Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5 Ways to Embrace HTML5 Today

Daniel Ryan
October 22, 2011

5 Ways to Embrace HTML5 Today

Presented at DevChatt 2010.

Daniel Ryan

October 22, 2011
Tweet

More Decks by Daniel Ryan

Other Decks in Technology

Transcript

  1. ( ) 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. ⊛ ⊛ ⊛ ⊛
  2. ( ) 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. ⊛ ⊛
  3. ( ) 5 Features Ready to Implement New elements (tags)

    and attributes Client side storage <audio> and <video> Geolocation New form types ⊛ ⊛ ⊛ ⊛ ⊛
  4. ( ) 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
  5. ( ) 1: New Elements — Implementation Add this <script>

    tag just after <head>: <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]--> Add this line to the top of your CSS file: section, article, aside, header, footer, nav, figure, dialog { display: block; } ⊛ ⊛
  6. ( ) 1: New Elements — Sample — chattarati.com <!DOCTYPE

    html> <html> <head> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]--> </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>
  7. ( ) 1: New Attributes — Forms & Inputs autofocus

    form required autocomplete, min, max, multiple, pattern, step novalidate ⊛ ⊛ ⊛ ⊛ ⊛
  8. ( ) 1: New Attributes — Miscellaneous ol[reversed] iframe[sandbox] script[async]

    see more at http://www.w3.org/TR/html5- diff/#new-attributes ⊛ ⊛ ⊛ ⊛
  9. ( ) 1: New Attributes — Global contenteditable contextmenu data-*

    draggable hidden role and aria-* (http://www.w3.org/TR/wai- aria/) spellcheck ⊛ ⊛ ⊛ ⊛ ⊛ ⊛ ⊛
  10. ( ) 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) ⊛ ⊛ ⊛ ⊛
  11. ( ) 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 ⊛ ⊛ ⊛ ⊛
  12. ( ) 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 ⊛ ⊛ ⊛ ⊛ ⊛
  13. ( ) 5: New Form Types search tel url email

    datetime date month week time datetime-local number range color
  14. ( ) 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 ⊛ ⊛ ⊛