5 ways to embrace HTML5 today

2,823 views

Published on

5 fairly simply to implement features of HTML5 ready to use today.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,823
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide






























































































































































































































































































































































































































































































  • 5 ways to embrace HTML5 today

    1. 1. ( 5 ways to embrace HTML5 today Daniel Ryan DevChatt March 2010 )
    2. 2. ( What is HTML5? ) ⊛ HTML5 is the next major revision of the HTML spec.
    3. 3. ( What is HTML5? ) ⊛ HTML5 is the next major revision of the HTML spec. ⊛ It is currently in “Last Call” phase at the WHATWG.
    4. 4. ( 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.
    5. 5. ( 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.
    6. 6. ( What browsers support HTML5? ) ⊛ All of them. Sort of.
    7. 7. ( 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.
    8. 8. ( 5 Features Ready to Implement ) ⊛ New elements (tags) and attributes
    9. 9. ( 5 Features Ready to Implement ) ⊛ New elements (tags) and attributes ⊛ Client side storage
    10. 10. ( 5 Features Ready to Implement ) ⊛ New elements (tags) and attributes ⊛ Client side storage ⊛ <audio> and <video>
    11. 11. ( 5 Features Ready to Implement ) ⊛ New elements (tags) and attributes ⊛ Client side storage ⊛ <audio> and <video> ⊛ Geolocation
    12. 12. ( 5 Features Ready to Implement ) ⊛ New elements (tags) and attributes ⊛ Client side storage ⊛ <audio> and <video> ⊛ Geolocation ⊛ New form types
    13. 13. <!doctype HTML>
    14. 14. ( 1: New Elements ⊛ section ⊛ video ⊛ rp ) ⊛ article ⊛ audio ⊛ canvas ⊛ aside ⊛ embed ⊛ command ⊛ hgroup ⊛ mark ⊛ details ⊛ header ⊛ progress ⊛ datalist ⊛ footer ⊛ meter ⊛ keygen ⊛ nav ⊛ time ⊛ output ⊛ figure ⊛ ruby ⊛ dialog ⊛ figcaption ⊛ rt
    15. 15. ( 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]-->
    16. 16. ( 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; }
    17. 17. <!DOCTYPE html>
    18. 18. <!DOCTYPE html> <html>
    19. 19. <!DOCTYPE html> <html> <head>
    20. 20. <!DOCTYPE html> <html> <head> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    21. 21. <!DOCTYPE html> <html> <head> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head>
    22. 22. <!DOCTYPE html> <html> <head> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body>
    23. 23. <!DOCTYPE html> <html> <head> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <header>
    24. 24. <!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>
    25. 25. <!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>
    26. 26. <!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>
    27. 27. <!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>
    28. 28. <!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>
    29. 29. <!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>
    30. 30. <!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>
    31. 31. <!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">
    32. 32. <!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">
    33. 33. <!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>
    34. 34. <!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>
    35. 35. <!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>
    36. 36. <!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>
    37. 37. <!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>
    38. 38. <!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>
    39. 39. <!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>
    40. 40. <!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">
    41. 41. <!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">
    42. 42. <!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>
    43. 43. <!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>
    44. 44. <!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>
    45. 45. <!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>
    46. 46. <!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> <footer id="ft">
    47. 47. <!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> <footer id="ft"> <p class="copyright">&copy;2008-2010 Chattarati.</p>
    48. 48. <!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> <footer id="ft"> <p class="copyright">&copy;2008-2010 Chattarati.</p> </footer>
    49. 49. <!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> <footer id="ft"> <p class="copyright">&copy;2008-2010 Chattarati.</p> </footer> </body>
    50. 50. <!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> <footer id="ft"> <p class="copyright">&copy;2008-2010 Chattarati.</p> </footer> </body> </html>
    51. 51. ( 1: New Attributes — Forms & Inputs ) ⊛ autofocus
    52. 52. ( 1: New Attributes — Forms & Inputs ) ⊛ autofocus ⊛ form
    53. 53. ( 1: New Attributes — Forms & Inputs ) ⊛ autofocus ⊛ form ⊛ required
    54. 54. ( 1: New Attributes — Forms & Inputs ) ⊛ autofocus ⊛ form ⊛ required ⊛ autocomplete, min, max, multiple, pattern, step
    55. 55. ( 1: New Attributes — Forms & Inputs ) ⊛ autofocus ⊛ form ⊛ required ⊛ autocomplete, min, max, multiple, pattern, step ⊛ novalidate
    56. 56. ( 1: New Attributes — Miscellaneous ) ⊛ ol[reversed]
    57. 57. ( 1: New Attributes — Miscellaneous ) ⊛ ol[reversed] ⊛ iframe[sandbox]
    58. 58. ( 1: New Attributes — Miscellaneous ) ⊛ ol[reversed] ⊛ iframe[sandbox] ⊛ script[async]
    59. 59. ( 1: New Attributes — Miscellaneous ) ⊛ ol[reversed] ⊛ iframe[sandbox] ⊛ script[async] ⊛ see more at http://www.w3.org/TR/html5-diff/ #new-attributes
    60. 60. ( 1: New Attributes — Global ) ⊛ contenteditable
    61. 61. ( 1: New Attributes — Global ) ⊛ contenteditable ⊛ contextmenu
    62. 62. ( 1: New Attributes — Global ) ⊛ contenteditable ⊛ contextmenu ⊛ data-*
    63. 63. ( 1: New Attributes — Global ) ⊛ contenteditable ⊛ contextmenu ⊛ data-* ⊛ draggable
    64. 64. ( 1: New Attributes — Global ) ⊛ contenteditable ⊛ contextmenu ⊛ data-* ⊛ draggable ⊛ hidden
    65. 65. ( 1: New Attributes — Global ) ⊛ contenteditable ⊛ contextmenu ⊛ data-* ⊛ draggable ⊛ hidden ⊛ role and aria-* (http://www.w3.org/TR/wai- aria/)
    66. 66. ( 1: New Attributes — Global ) ⊛ contenteditable ⊛ contextmenu ⊛ data-* ⊛ draggable ⊛ hidden ⊛ role and aria-* (http://www.w3.org/TR/wai- aria/) ⊛ spellcheck
    67. 67. ( 2: Client Side Storage ) ⊛ Store data in the browser via a JavaScript API (http://bit.ly/b95AIS)
    68. 68. ( 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
    69. 69. ( 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
    70. 70. ( 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)
    71. 71. ( 3: <audio> ) ⊛ Native support for audio file playback with a full JavaScript API for controls
    72. 72. ( 3: <audio> ) ⊛ Native support for audio file playback with a full JavaScript API for controls ⊛ Go full native (http://bit.ly/awkhmZ)
    73. 73. ( 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>
    74. 74. ( 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
    75. 75. ( 4: <video> ) ⊛ Native support for video file playback with a full JavaScript API for controls
    76. 76. ( 4: <video> ) ⊛ Native support for video file playback with a full JavaScript API for controls ⊛ Go full native (http://bit.ly/cdmRVx)
    77. 77. ( 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>
    78. 78. ( 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
    79. 79. ( 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
    80. 80. ( 5: New Form Types ⊛ search ⊛ time ) ⊛ tel ⊛ datetime-local ⊛ url ⊛ number ⊛ email ⊛ range ⊛ datetime ⊛ color ⊛ date ⊛ month ⊛ week
    81. 81. ( 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
    82. 82. ( Thanks for listening http://dryan.com/html5 for more info )

    ×