SlideShare a Scribd company logo
1 of 63
Download to read offline
< HTML 5 >
[object Object],[object Object],[object Object],[object Object],[object Object],Rey Bango
http://scriptjunkie.com
[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML5
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML5
[object Object]
Flickr: lambj
Flickr: mackro
Flickr: tvangoethem
 
 
[object Object],[object Object],[object Object],[object Object],[object Object],HTML5’s Umbrella Effect
Flickr: boblet
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],So What’s in It?
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],What’s Not?
[object Object]
[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML5 is Cool
Flickr: boblet
Flickr: lejoe
[object Object]
doctype <!DOCTYPE HTML PUBLIC &quot;-//W3C//Dtd HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/tr/html4/loose.dtd&quot;> HTML 4.01: HTML5 <!doctype html>
<div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
<nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
<nav> <aside> <nav> <section> <article> <footer> <header> Semantic HTML Tags
<address>   Written by:<br/> <a href=&quot;/people/show/23&quot;>Timothy Fisher</a>, <br/> Address: 25296 Hunter Lane, Flat Rock, MI  48134 <br/> Phone: 555-1212 </address>  Address applies to the nearest Article or Body tag. More Semantic HTML Tags Address Prior to HTML5 the Address element applied to the document/body as a whole
<div class=&quot;car&quot;  data-brand =&quot; ford &quot;  data-model =&quot; mustang &quot;> <button class=&quot;fire&quot;>  </div> More Semantic HTML Tags Data Attributes //Using DOM's getAttribute() property var brand=mydiv.getAttribute(&quot;data-brand&quot;) //returns &quot;ford&quot; mydiv.setAttribute(&quot;data-brand&quot;, &quot;mazda&quot;) //changes &quot;data-brand&quot; to &quot;mazda&quot; mydiv.removeAttribute(&quot;data-brand&quot;) //removes &quot;data-brand&quot; attribute entirely //Using JavaScript's dataset property var brand=mydiv.dataset.brand //returns &quot;ford&quot; mydiv.dataset.brand='mazda' //changes &quot;data-brand&quot; to &quot;mazda&quot; mydiv.dataset.brand=null //removes &quot;data-brand&quot; attribute Custom data attribs were always possible but prior to HTML5 they would cause validation errors.
<section>  <hgroup> <h1>Mobile Phones</h1> <h2>Different Smart Phones</h2>  </hgroup>  <p>Some of the more popular mobile smart phones</p>  <article> <h1>Apple iPhone</h1>  <p>A popular smart phone from Apple.</p> </article>  <article> <h1>Android-based Phones</h1>  <p>A series of smart phones that use the Google Android operating system.</p> </article> </section> More Semantic HTML Tags Section, hgroup, Article These elements replace many of your divs
<figure> <img src=&quot;ninja_guy.jpg&quot; alt=&quot;A Standing Ninja Guy.&quot;> <figcaption>Cool Ninja Guy</figcaption> </figure> More Semantic HTML Tags Figure and Figure Caption The browser can position the caption for you Cool Ninja Guy
More Semantic HTML Tags Menu and Command <menu label=&quot;Hero List&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Spiderman&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Superman&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Batman&quot;> </menu> a simple radio button group
<menu type=&quot;toolbar&quot;>  <li> <menu label=&quot;File&quot;>  <button type=&quot;button&quot; onclick=&quot;file_new()&quot;>New...</button> <button type=&quot;button&quot; onclick=&quot;file_open()&quot;>Open...</button> <button type=&quot;button&quot; onclick=&quot;file_save()&quot;>Save...</button> <button type=&quot;button&quot;onclick=&quot;file_saveas()&quot;>Save As...</button> </menu>  </li>  <li> <menu label=&quot;Edit&quot;>  <button type=&quot;button&quot; onclick=&quot;edit_copy()&quot;>Copy...</button> <button type=&quot;button&quot; onclick=&quot;edit_cut()&quot;>Cut...</button> <button type=&quot;button&quot; onclick=&quot;edit_paste()&quot;>Paste...</button> </menu>  </li>  </menu> More Semantic HTML Tags Menu (continued)
<video  src =”ironman.mp4” /> Automatically show native controls <video  src =”ironman.mp4”  controls   /> Video
Codec Support Credit: Encoding.com
<video controls/>   <source src=”ironman.mp4” />   <source src=”ironman. webm ” /> </video> Video ironman.mp4 ironman.webm
<audio src=” teenage_dream.mp3”></audio> <audio controls> <source src=”teenage_dream.mp3”/> <source src=”teenage_dream.ogg”/> </audio> Audio Provides a download link for non-supporting browsers: <audio src=”teenage_dream.ogg” autoplay controls loop>  <a href=” teenage_dream.ogg”>download</a> </audio>
<canvas id=”square”>  fallback content </canvas> <script>  // create basic filled square canvas = canvas.getElementById(‘square’);  context =  canvas.getContext(‘2d’);  context. fillStyle  = “#000000”;  context. fillRect (0, 0, 100, 100);  </script> Canvas A complete drawing and animation API
<script>  document.getElementById(‘notepad’).contentEditable = true; </script> Editable Content Turn any element into an editable area
Cross-Domain Messaging // sender var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', ' http://b.example.org/' ); // recipient addEvent(window, &quot;message&quot;, function(e){    document.getElementById(&quot;rcvd_message&quot;).innerHTML = e.origin + &quot; said: &quot; + e.data; });
sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key); Session Storage Save key/value pairs to a client-side data store implemented by browser Session store expires when the browser is closed
[object Object]
Output   < progress   id=&quot;p&quot; max=100><span>0</span>%</ progress > Progress < output   name=&quot;result&quot;></ output > Progress
Storage space usage:  <meter value=6 max=8> 6 blocks used (out of 8 total) </meter> Voter turnout:  <meter value=0.75> <img alt=&quot;75%&quot; src=&quot;graph75.png&quot;> </meter> Tickets sold: <meter min=&quot;0&quot; max=&quot;100&quot; value=&quot;75&quot;></meter> Meter Meter
<div draggable=”true”></div> // set data to access at target addEvent(div, “dragstart”, function(e) {  e.dataTransfer.setData(‘foo’, ‘bar’); }, true); // access data from dragged object addEvent(div, ‘dragend’, function(e) {  e.dataTransfer.getData(‘foo’); }, true); Drag and Drop HTML5 drag and drop should work across frames, and  across browser windows . HTML5 drag and drop also allows users to drag and drop data  to and from non-web applications , i.e. out of the browser or into the browser
<input type=”email” /> Input Types tel search email url datetime date range color Unsupported browsers default to text type Future browsers will display appropriate UI controls
<input type=&quot;range&quot; min=&quot;-100&quot; max=&quot;100&quot; value=&quot;0&quot;  step=&quot;10&quot; name=&quot;power&quot; list=&quot;powers&quot;>  <datalist id=&quot;powers&quot;> <option value=&quot;0&quot;>  <option value=&quot;-30&quot;>  <option value=&quot;30&quot;>  <option value=&quot;+50&quot;> </datalist> Input Types Input Type Range + Datalist
<input type=file multiple> Input Types File Upload Multiple
Input Types Datalist Used to provide Auto Complete feature <input list=&quot;movies&quot; /> <datalist id=&quot;movies&quot;> <option>The Dark Knight</option> <option>Spiderman 3</option> <option>X-Men</option> </datalist>
<input name=&quot;custname&quot; required> <script>  form.checkValidity();  </script> Form Validation By adding ‘required’ attribute you can take advantage of validity checking without custom JavaScript.
<html manifest=”cache.manifest”> Offline Applications Offline Applications using manifest Run a web application in offline mode, disconnected from Internet provide a cache.manifest file: Of course your app will still have failures if it tries to pull live data from the Internet uses MIME type:   text/cache-manifest CACHE MANIFEST clock.html clock.css clock.js
window.history.back(); window.history.forward(); window.history.go(2); window.history.length; window.history.pushState(data, title, url); window.history.replaceState(data, title, url); JavaScript API for moving through browser history History API
navigator. geolocation . getCurrentPosition( function(position) { // display position } ); Geolocation Build location-aware apps without access  to native mobile apis
Local Storage ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web Sockets ,[object Object],[object Object],[object Object],[object Object],var ws = new WebSocket(&quot;ws://friendfeed.com/websocket&quot;); ws.onopen = function() { ws.send(&quot;This is a message from the browser to the server&quot;); }; ws.onmessage = function(event) { alert(&quot;The server sent a message: &quot; + event.data); };
- Provide “threads” for JavaScript execution - Don’t have access to DOM or page.  - Have to communicate through postMessage API Web Workers
[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],If HTML5 video is not supported, flash video will load Progressive Enhancement
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Polyfills
[object Object],[object Object],[object Object]
http://html5.timothyfisher.com http://diveintohtml.com http://html5doctor.com/ http://html5demos.com http://caniuse.com http://html5rocks.com Resources
Introducing HTML5  (Bruce Lawson & Remy Sharp) HTML5: Up and Running (Mark Pilgrim) Books
Timothy Fisher http://html5.timothyfisher.com Credit
@reybango blog.reybango.com [email_address]

More Related Content

What's hot

Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5dynamis
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]Aaron Gustafson
 
HTML5: a quick overview
HTML5: a quick overviewHTML5: a quick overview
HTML5: a quick overviewMark Whitaker
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - IntroductionDavy De Pauw
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter Lubbers
 
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Mahbubur Rahman
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 

What's hot (20)

Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
HTML5
HTML5HTML5
HTML5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]
 
HTML5: a quick overview
HTML5: a quick overviewHTML5: a quick overview
HTML5: a quick overview
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - Introduction
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
Taking Advantage of Client Side / JavsScript Templates in Rich Internet Appli...
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Html 5
Html 5Html 5
Html 5
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 

Similar to HTML5 Overview

HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09pemaquid
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Finalematrix
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from AustinLisa Adkins
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing GadgetsQuirk
 
ImplementingChangeTrackingAndFlagging
ImplementingChangeTrackingAndFlaggingImplementingChangeTrackingAndFlagging
ImplementingChangeTrackingAndFlaggingSuite Solutions
 
Html5: What is it?
Html5: What is it? Html5: What is it?
Html5: What is it? joeydehnert
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examplesgopivthmk
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?Carlos Ramon
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Sergey Ilinsky
 
Mashups as Collection of Widgets
Mashups as Collection of WidgetsMashups as Collection of Widgets
Mashups as Collection of Widgetsgiurca
 

Similar to HTML5 Overview (20)

HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 
HTML5: 5 Quick Wins
HTML5:  5 Quick WinsHTML5:  5 Quick Wins
HTML5: 5 Quick Wins
 
Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
 
Developing Gadgets
Developing GadgetsDeveloping Gadgets
Developing Gadgets
 
ImplementingChangeTrackingAndFlagging
ImplementingChangeTrackingAndFlaggingImplementingChangeTrackingAndFlagging
ImplementingChangeTrackingAndFlagging
 
HTML5
HTML5HTML5
HTML5
 
Html5: What is it?
Html5: What is it? Html5: What is it?
Html5: What is it?
 
Html5
Html5Html5
Html5
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
Html5
Html5Html5
Html5
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
 
HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
 
Ajax
AjaxAjax
Ajax
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
 
Mashups as Collection of Widgets
Mashups as Collection of WidgetsMashups as Collection of Widgets
Mashups as Collection of Widgets
 
Mobile web with jQuery Mobile
Mobile web with jQuery MobileMobile web with jQuery Mobile
Mobile web with jQuery Mobile
 

More from reybango

NationJS: Node Noob to not so Noob
NationJS: Node Noob to not so Noob NationJS: Node Noob to not so Noob
NationJS: Node Noob to not so Noob reybango
 
From Node.js noob to not so noob
From Node.js noob to not so noobFrom Node.js noob to not so noob
From Node.js noob to not so noobreybango
 
How to Test IE & Microsoft Edge on OS X & Linux - SFHTML
How to Test IE & Microsoft Edge on OS X & Linux - SFHTMLHow to Test IE & Microsoft Edge on OS X & Linux - SFHTML
How to Test IE & Microsoft Edge on OS X & Linux - SFHTMLreybango
 
Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?reybango
 
A day in the life of a Developer Advocate
A day in the life of a Developer AdvocateA day in the life of a Developer Advocate
A day in the life of a Developer Advocatereybango
 
Getting into ember.js
Getting into ember.jsGetting into ember.js
Getting into ember.jsreybango
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shimsreybango
 
MAOW Berlin '09 Keynote
MAOW Berlin '09 KeynoteMAOW Berlin '09 Keynote
MAOW Berlin '09 Keynotereybango
 
AMO Barcamp Miami
AMO Barcamp MiamiAMO Barcamp Miami
AMO Barcamp Miamireybango
 

More from reybango (9)

NationJS: Node Noob to not so Noob
NationJS: Node Noob to not so Noob NationJS: Node Noob to not so Noob
NationJS: Node Noob to not so Noob
 
From Node.js noob to not so noob
From Node.js noob to not so noobFrom Node.js noob to not so noob
From Node.js noob to not so noob
 
How to Test IE & Microsoft Edge on OS X & Linux - SFHTML
How to Test IE & Microsoft Edge on OS X & Linux - SFHTMLHow to Test IE & Microsoft Edge on OS X & Linux - SFHTML
How to Test IE & Microsoft Edge on OS X & Linux - SFHTML
 
Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?Woah, You Can Test IE & Microsoft Edge on a Mac?
Woah, You Can Test IE & Microsoft Edge on a Mac?
 
A day in the life of a Developer Advocate
A day in the life of a Developer AdvocateA day in the life of a Developer Advocate
A day in the life of a Developer Advocate
 
Getting into ember.js
Getting into ember.jsGetting into ember.js
Getting into ember.js
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
 
MAOW Berlin '09 Keynote
MAOW Berlin '09 KeynoteMAOW Berlin '09 Keynote
MAOW Berlin '09 Keynote
 
AMO Barcamp Miami
AMO Barcamp MiamiAMO Barcamp Miami
AMO Barcamp Miami
 

Recently uploaded

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5DianaGray10
 

Recently uploaded (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5
 

HTML5 Overview

  • 2.
  • 4.
  • 5.
  • 6.
  • 7.
  • 11.  
  • 12.  
  • 13.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 22.
  • 23. doctype <!DOCTYPE HTML PUBLIC &quot;-//W3C//Dtd HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/tr/html4/loose.dtd&quot;> HTML 4.01: HTML5 <!doctype html>
  • 24. <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
  • 25. <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
  • 26. <nav> <aside> <nav> <section> <article> <footer> <header> Semantic HTML Tags
  • 27. <address> Written by:<br/> <a href=&quot;/people/show/23&quot;>Timothy Fisher</a>, <br/> Address: 25296 Hunter Lane, Flat Rock, MI 48134 <br/> Phone: 555-1212 </address> Address applies to the nearest Article or Body tag. More Semantic HTML Tags Address Prior to HTML5 the Address element applied to the document/body as a whole
  • 28. <div class=&quot;car&quot; data-brand =&quot; ford &quot; data-model =&quot; mustang &quot;> <button class=&quot;fire&quot;> </div> More Semantic HTML Tags Data Attributes //Using DOM's getAttribute() property var brand=mydiv.getAttribute(&quot;data-brand&quot;) //returns &quot;ford&quot; mydiv.setAttribute(&quot;data-brand&quot;, &quot;mazda&quot;) //changes &quot;data-brand&quot; to &quot;mazda&quot; mydiv.removeAttribute(&quot;data-brand&quot;) //removes &quot;data-brand&quot; attribute entirely //Using JavaScript's dataset property var brand=mydiv.dataset.brand //returns &quot;ford&quot; mydiv.dataset.brand='mazda' //changes &quot;data-brand&quot; to &quot;mazda&quot; mydiv.dataset.brand=null //removes &quot;data-brand&quot; attribute Custom data attribs were always possible but prior to HTML5 they would cause validation errors.
  • 29. <section> <hgroup> <h1>Mobile Phones</h1> <h2>Different Smart Phones</h2> </hgroup> <p>Some of the more popular mobile smart phones</p> <article> <h1>Apple iPhone</h1> <p>A popular smart phone from Apple.</p> </article> <article> <h1>Android-based Phones</h1> <p>A series of smart phones that use the Google Android operating system.</p> </article> </section> More Semantic HTML Tags Section, hgroup, Article These elements replace many of your divs
  • 30. <figure> <img src=&quot;ninja_guy.jpg&quot; alt=&quot;A Standing Ninja Guy.&quot;> <figcaption>Cool Ninja Guy</figcaption> </figure> More Semantic HTML Tags Figure and Figure Caption The browser can position the caption for you Cool Ninja Guy
  • 31. More Semantic HTML Tags Menu and Command <menu label=&quot;Hero List&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Spiderman&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Superman&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Batman&quot;> </menu> a simple radio button group
  • 32. <menu type=&quot;toolbar&quot;> <li> <menu label=&quot;File&quot;> <button type=&quot;button&quot; onclick=&quot;file_new()&quot;>New...</button> <button type=&quot;button&quot; onclick=&quot;file_open()&quot;>Open...</button> <button type=&quot;button&quot; onclick=&quot;file_save()&quot;>Save...</button> <button type=&quot;button&quot;onclick=&quot;file_saveas()&quot;>Save As...</button> </menu> </li> <li> <menu label=&quot;Edit&quot;> <button type=&quot;button&quot; onclick=&quot;edit_copy()&quot;>Copy...</button> <button type=&quot;button&quot; onclick=&quot;edit_cut()&quot;>Cut...</button> <button type=&quot;button&quot; onclick=&quot;edit_paste()&quot;>Paste...</button> </menu> </li> </menu> More Semantic HTML Tags Menu (continued)
  • 33. <video src =”ironman.mp4” /> Automatically show native controls <video src =”ironman.mp4” controls /> Video
  • 34. Codec Support Credit: Encoding.com
  • 35. <video controls/> <source src=”ironman.mp4” /> <source src=”ironman. webm ” /> </video> Video ironman.mp4 ironman.webm
  • 36. <audio src=” teenage_dream.mp3”></audio> <audio controls> <source src=”teenage_dream.mp3”/> <source src=”teenage_dream.ogg”/> </audio> Audio Provides a download link for non-supporting browsers: <audio src=”teenage_dream.ogg” autoplay controls loop> <a href=” teenage_dream.ogg”>download</a> </audio>
  • 37. <canvas id=”square”> fallback content </canvas> <script> // create basic filled square canvas = canvas.getElementById(‘square’); context = canvas.getContext(‘2d’); context. fillStyle = “#000000”; context. fillRect (0, 0, 100, 100); </script> Canvas A complete drawing and animation API
  • 38. <script> document.getElementById(‘notepad’).contentEditable = true; </script> Editable Content Turn any element into an editable area
  • 39. Cross-Domain Messaging // sender var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', ' http://b.example.org/' ); // recipient addEvent(window, &quot;message&quot;, function(e){    document.getElementById(&quot;rcvd_message&quot;).innerHTML = e.origin + &quot; said: &quot; + e.data; });
  • 40. sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key); Session Storage Save key/value pairs to a client-side data store implemented by browser Session store expires when the browser is closed
  • 41.
  • 42. Output < progress id=&quot;p&quot; max=100><span>0</span>%</ progress > Progress < output name=&quot;result&quot;></ output > Progress
  • 43. Storage space usage: <meter value=6 max=8> 6 blocks used (out of 8 total) </meter> Voter turnout: <meter value=0.75> <img alt=&quot;75%&quot; src=&quot;graph75.png&quot;> </meter> Tickets sold: <meter min=&quot;0&quot; max=&quot;100&quot; value=&quot;75&quot;></meter> Meter Meter
  • 44. <div draggable=”true”></div> // set data to access at target addEvent(div, “dragstart”, function(e) { e.dataTransfer.setData(‘foo’, ‘bar’); }, true); // access data from dragged object addEvent(div, ‘dragend’, function(e) { e.dataTransfer.getData(‘foo’); }, true); Drag and Drop HTML5 drag and drop should work across frames, and across browser windows . HTML5 drag and drop also allows users to drag and drop data to and from non-web applications , i.e. out of the browser or into the browser
  • 45. <input type=”email” /> Input Types tel search email url datetime date range color Unsupported browsers default to text type Future browsers will display appropriate UI controls
  • 46. <input type=&quot;range&quot; min=&quot;-100&quot; max=&quot;100&quot; value=&quot;0&quot; step=&quot;10&quot; name=&quot;power&quot; list=&quot;powers&quot;> <datalist id=&quot;powers&quot;> <option value=&quot;0&quot;> <option value=&quot;-30&quot;> <option value=&quot;30&quot;> <option value=&quot;+50&quot;> </datalist> Input Types Input Type Range + Datalist
  • 47. <input type=file multiple> Input Types File Upload Multiple
  • 48. Input Types Datalist Used to provide Auto Complete feature <input list=&quot;movies&quot; /> <datalist id=&quot;movies&quot;> <option>The Dark Knight</option> <option>Spiderman 3</option> <option>X-Men</option> </datalist>
  • 49. <input name=&quot;custname&quot; required> <script> form.checkValidity(); </script> Form Validation By adding ‘required’ attribute you can take advantage of validity checking without custom JavaScript.
  • 50. <html manifest=”cache.manifest”> Offline Applications Offline Applications using manifest Run a web application in offline mode, disconnected from Internet provide a cache.manifest file: Of course your app will still have failures if it tries to pull live data from the Internet uses MIME type: text/cache-manifest CACHE MANIFEST clock.html clock.css clock.js
  • 51. window.history.back(); window.history.forward(); window.history.go(2); window.history.length; window.history.pushState(data, title, url); window.history.replaceState(data, title, url); JavaScript API for moving through browser history History API
  • 52. navigator. geolocation . getCurrentPosition( function(position) { // display position } ); Geolocation Build location-aware apps without access to native mobile apis
  • 53.
  • 54.
  • 55. - Provide “threads” for JavaScript execution - Don’t have access to DOM or page. - Have to communicate through postMessage API Web Workers
  • 56.
  • 57.
  • 58.
  • 59.
  • 60. http://html5.timothyfisher.com http://diveintohtml.com http://html5doctor.com/ http://html5demos.com http://caniuse.com http://html5rocks.com Resources
  • 61. Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5: Up and Running (Mark Pilgrim) Books

Editor's Notes

  1. The use of “HTML5” as a catchall by media &amp; marketing is confusing development professionals.
  2. Cats are part of HTML5. :P
  3. Babies are part of HTML5. :P
  4. Staplers are part of HTML5. :P
  5. You have to laugh at how the media and marketing groups will put a spin on something.
  6. It’s a real issue because developers are getting confused about where HTML5 begins and ends. We need to better educate them.
  7. Bruce Lawson took this image showing where certain things fit.
  8. The use of “HTML5” as a catchall by media &amp; marketing is confusing development professionals.
  9. The use of “HTML5” as a catchall by media &amp; marketing is confusing development professionals.
  10. Common question which has no easy answer.
  11. How developers can start using HTML5 now
  12. Common question which has no easy answer.