5 Ways to Embrace HTML5 Today

( ) 5 ways to embrace HTML5 today Daniel Ryan
DevChatt March 2010

( ) What is HTML5? HTML5 is the next major
revision of the HTML spec. It is currently in “Last Call” phase at the WHATWG. It was written both to define new features and ratify current behavior. It is scheduled to be a “Proposed Recommendation” in 2022. ⊛ ⊛ ⊛ ⊛

( ) What browsers support HTML5? All of them. Sort
of. Most of the proposed features can be implemented today through either native browser support or a combination of CSS and JavaScript. ⊛ ⊛

( ) 5 Features Ready to Implement New elements (tags)
and attributes Client side storage <audio> and <video> Geolocation New form types ⊛ ⊛ ⊛ ⊛ ⊛

( ) 0: the Doctype <!doctype HTML>

( ) 1: New Elements section article aside hgroup header
footer nav figure figcaption video audio embed mark progress meter time ruby rt rp canvas command details datalist keygen output dialog

( ) 1: New Elements — Implementation Add this <script>
tag just after <head>:  Add this line to the top of your CSS file: section, article, aside, header, footer, nav, figure, dialog { display: block; } ⊛ ⊛

( ) 1: New Elements — Sample — chattarati.com <!DOCTYPE
html> <html> <head>  </head> <body> <header> <a href="/" title="Chattarati Homepage">Chattarati</a> <nav> <ul> <li><a href="/metro/" title="Metro" class="metro ancestor" rel="metro">Metro</a></li> </ul> </nav> </header> <section id="main"> <article class="hentry"> <header> <h1>School Board Upholds Normal Park's Current Zone</h1> </header> <footer>By <a href="/author/acollier/" class="author vcard url fn">Aaron Collier</a></footer> <p>The debate over Normal Park Museum Magnet's zone came to a head Thursday evening when the</p> </article> </section> <section id="sb"> <section class="summary-article"> <h2>Summary</h2> <div class="summary">Thursday evening, the Hamilton County School Board voted 6 to 3 to approve a plan to maintain Normal Park Museum Magnet's current zone and pre-K program despite a 2007 decision to expand the school's zone. </div> </section> </section>

( ) 1: New Attributes — Forms & Inputs autofocus
form required autocomplete, min, max, multiple, pattern, step novalidate ⊛ ⊛ ⊛ ⊛ ⊛

( ) 1: New Attributes — Miscellaneous ol[reversed] iframe[sandbox] script[async]
see more at http://www.w3.org/TR/html5- diff/#new-attributes ⊛ ⊛ ⊛ ⊛

( ) 1: New Attributes — Global contenteditable contextmenu data-*
draggable hidden role and aria-* (http://www.w3.org/TR/wai- aria/) spellcheck ⊛ ⊛ ⊛ ⊛ ⊛ ⊛ ⊛

( ) 2: Client Side Storage Store data in the
browser via a JavaScript API (http://bit.ly/b95AIS) Enable offline syncing or speed up heavy web apps Gracefully degrade with http://plugins.jquery.com/project/jStorage Store static assets in a manifest for offline access (http://bit.ly/dnOQYc) ⊛ ⊛ ⊛ ⊛

( ) 3: <audio> Native support for audio file playback
with a full JavaScript API for controls Go full native (http://bit.ly/awkhmZ) Fallback with <audio src=”file.mp3”> <embed src=”flashplayer.swf”></embed> </audio> Or, get around the format war with http://bit.ly/bwny0J ⊛ ⊛ ⊛ ⊛

( ) 4: <video> Native support for video file playback
with a full JavaScript API for controls Go full native (http://bit.ly/cdmRVx) Fallback with <video src=”file.mp3”> <embed src=”flashplayer.swf”></embed> </video> Or, get around the format war with http://bit.ly/b3AeXi See some demos at http://youtube.com/html5 or http://bit.ly/cfI2ML ⊛ ⊛ ⊛ ⊛ ⊛

( ) 5: New Form Types search tel url email
datetime date month week time datetime-local number range color

( ) 5: New Form Types Write your own JavaScript
validation Use http://code.google.com/p/webforms2/ Be sure to still do server-side validation, the client-side is mainly to benefit your users ⊛ ⊛ ⊛

( ) Thanks for listening http://dryan.com/html5 for more info

5 Ways to Embrace HTML5 Today

5 Ways to Embrace HTML5 Today

Daniel Ryan

More Decks by Daniel Ryan

Other Decks in Technology

Featured

Transcript

( ) 5 ways to embrace HTML5 today Daniel Ryan

( ) What is HTML5? HTML5 is the next major

( ) What browsers support HTML5? All of them. Sort

( ) 5 Features Ready to Implement New elements (tags)

( ) 0: the Doctype <!doctype HTML>

( ) 1: New Elements section article aside hgroup header

( ) 1: New Elements — Implementation Add this <script>

( ) 1: New Elements — Sample — chattarati.com <!DOCTYPE

( ) 1: New Attributes — Forms & Inputs autofocus

( ) 1: New Attributes — Miscellaneous ol[reversed] iframe[sandbox] script[async]

( ) 1: New Attributes — Global contenteditable contextmenu data-*

( ) 2: Client Side Storage Store data in the

( ) 3: <audio> Native support for audio file playback

( ) 4: <video> Native support for video file playback

( ) 5: New Form Types search tel url email

( ) 5: New Form Types Write your own JavaScript

( ) Thanks for listening http://dryan.com/html5 for more info