<ul>HTML5 </ul><ul>5 Quick Wins (Things you can start doing today) </ul>
<ul>  </ul><ul>Hi, I'm Jeff Leombruno.      @jlbruno I work at PixelMEDIA.      @pixelmedia Tweeting today?      #TechWorl...
<ul>Design Principles </ul>
<ul>  </ul><ul><ul><li>Compatibility
 
Utility
Interoperability
Universal Access </li></ul></ul>
<ul>Compatibility: </ul><ul><ul><li>Support Existing Content
 
Degrade Gracefully
 
Don't Reinvent the Wheel
 
Evolution Not Revolution 
 
Pave the Cowpaths
 
  </li></ul></ul><ul><ul><li>image: http://www.flickr.com/photos/by-mark/110162788/ </li></ul></ul>
<ul>Utility: </ul><ul><ul><li>Solve Real Problems
 
Priority of Constituencies  
Secure By Design  
Separation of Concerns  
DOM Consistency  </li></ul></ul>
<ul>Interoperability: </ul><ul><ul><li>Well-defined Behavior  
Avoid Needless Complexity  
Handle Errors </li></ul></ul>
<ul>Universal Access: </ul><ul><ul><li>Media Independence  
Support World Languages  
Accessibility  </li></ul></ul>
<ul>So, what is it? </ul>
<ul>  </ul><ul><ul><li>New markup tags
Multimedia/audio/video
Local data storage
Web workers
Offline applications
Form improvements
Geolocation*  </li></ul></ul>
<ul>Who's using it? </ul>
<ul>  </ul><ul><ul><li>Apple
Facebook
Google
Microsoft 
YouTube  </li></ul></ul>
<ul>&quot;HTML5 should not be considered as a whole. You should cherry pick the technology that suits the solution to your...
<ul>Quick Win #1 </ul><ul>New Doctype, Simplified Template </ul>
<ul>      <!DOCTYPE html> </ul>
 
<ul><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict...
<ul><!DOCTYPE html> <html lang=&quot;en&quot;> <head>     <title></title>      <meta charset=&quot;utf-8&quot;>          <...
Upcoming SlideShare
Loading in...5
×

HTML5: 5 Quick Wins

2,302

Published on

A quick intro to HTML5 and 5 quick things you can start using from it today.

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

No Downloads
Views
Total Views
2,302
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5: 5 Quick Wins"

  1. 1. <ul>HTML5 </ul><ul>5 Quick Wins (Things you can start doing today) </ul>
  2. 2. <ul>  </ul><ul>Hi, I'm Jeff Leombruno.     @jlbruno I work at PixelMEDIA.     @pixelmedia Tweeting today?     #TechWorld2010 </ul>
  3. 3. <ul>Design Principles </ul>
  4. 4. <ul>  </ul><ul><ul><li>Compatibility
  5. 5.  
  6. 6. Utility
  7. 7. Interoperability
  8. 8. Universal Access </li></ul></ul>
  9. 9. <ul>Compatibility: </ul><ul><ul><li>Support Existing Content
  10. 10.  
  11. 11. Degrade Gracefully
  12. 12.  
  13. 13. Don't Reinvent the Wheel
  14. 14.  
  15. 15. Evolution Not Revolution 
  16. 16.  
  17. 17. Pave the Cowpaths
  18. 18.  
  19. 19.   </li></ul></ul><ul><ul><li>image: http://www.flickr.com/photos/by-mark/110162788/ </li></ul></ul>
  20. 20. <ul>Utility: </ul><ul><ul><li>Solve Real Problems
  21. 21.  
  22. 22. Priority of Constituencies  
  23. 23. Secure By Design  
  24. 24. Separation of Concerns  
  25. 25. DOM Consistency </li></ul></ul>
  26. 26. <ul>Interoperability: </ul><ul><ul><li>Well-defined Behavior  
  27. 27. Avoid Needless Complexity  
  28. 28. Handle Errors </li></ul></ul>
  29. 29. <ul>Universal Access: </ul><ul><ul><li>Media Independence  
  30. 30. Support World Languages  
  31. 31. Accessibility </li></ul></ul>
  32. 32. <ul>So, what is it? </ul>
  33. 33. <ul>  </ul><ul><ul><li>New markup tags
  34. 34. Multimedia/audio/video
  35. 35. Local data storage
  36. 36. Web workers
  37. 37. Offline applications
  38. 38. Form improvements
  39. 39. Geolocation* </li></ul></ul>
  40. 40. <ul>Who's using it? </ul>
  41. 41. <ul>  </ul><ul><ul><li>Apple
  42. 42. Facebook
  43. 43. Google
  44. 44. Microsoft 
  45. 45. YouTube </li></ul></ul>
  46. 46. <ul>&quot;HTML5 should not be considered as a whole. You should cherry pick the technology that suits the solution to your problem.&quot;       -- Remy Sharp       </ul><ul>http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites </ul>
  47. 47. <ul>Quick Win #1 </ul><ul>New Doctype, Simplified Template </ul>
  48. 48. <ul>      <!DOCTYPE html> </ul>
  49. 50. <ul><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot; xml:lang=&quot;en&quot;> <head>     <title></title>     <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />         <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; />           <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; />     </head> <body> </body> </html> </ul>
  50. 51. <ul><!DOCTYPE html> <html lang=&quot;en&quot;> <head>     <title></title>     <meta charset=&quot;utf-8&quot;>         <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /> </ul><ul>          <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; />     </head> <body> </body> </html> </ul>
  51. 52. <ul><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </ul><ul>&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot; > </ul><ul><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot; xml:lang=&quot;en&quot; > <head>     <title></title>     <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset= &quot; utf-8&quot; />         <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; />           <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; />     </head> <body> </body> </html> </ul>
  52. 53. <ul>Quick Win #2 </ul><ul>New Semantic Elements </ul>
  53. 54. <ul>http://www.w3.org/TR/html5-diff/#new-elements </ul>
  54. 56. <ul><body>     <div class=&quot;header&quot;>     </div>          <ul id=&quot;nav&quot;>     </nav>     <div id=&quot;content&quot;>         <h1>         </h1>           <div class=&quot;article&quot;>         </div>         <div class=&quot;footer&quot;>          </div>        </div>     <div class=&quot;sidebar&quot;>     </div>     <div id=&quot;footer&quot;>     </div> </body> </ul>
  55. 57. <ul><body>     <header>     </header>          <nav>     </nav>     <section>         <header>         </header>           <article>         </article>         <footer>          </footer>        </section>     <aside>     </aside>     <footer>     </footer> </body> </ul>
  56. 58. <ul>article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary {     display:block; } </ul>
  57. 60. <ul>We can fix this. </ul>
  58. 61. <ul>  We have the technology... </ul>
  59. 62. <ul>http://intertwingly.net/blog/2008/01/22/Best-Standards-Support#c1201006277 </ul><ul>(Jan 22, 2008) </ul><ul><!--[if lt IE 9]> <script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;></script> <![endif]--> </ul><ul>http://code.google.com/p/html5shim/ </ul>
  60. 64. <ul>Quick Win #3 </ul><ul>Form Updates </ul>
  61. 65. <ul>New Input Types: </ul><ul><ul><li>email
  62. 66.  
  63. 67. url
  64. 68.  
  65. 69. number
  66. 70.  
  67. 71. range
  68. 72.  
  69. 73. date, month, week, time, datetime, datetime-local
  70. 74.  
  71. 75. search
  72. 76.  
  73. 77. color </li></ul></ul>
  74. 78. <ul>Email: </ul>
  75. 79. <ul>URL:   </ul>
  76. 80. <ul>        Number: </ul>
  77. 81. <ul>Date: (in Opera) </ul>
  78. 82. <ul>  Search: (in WebKit)   </ul>
  79. 83. <ul>New Input Attributes: </ul><ul><ul><li> 
  80. 84.  
  81. 85. placeholder
  82. 86. autofocus
  83. 87.  
  84. 88. required </li></ul></ul>
  85. 89. <ul>    Validation: (in Firefox 4) </ul>
  86. 90. <ul>Validation: (in Opera) </ul>
  87. 91. <ul>Validation: </ul><ul>  <form novalidate >     <input type=&quot;email&quot; id=&quot;addr&quot;>     <input type=&quot;submit&quot; value=&quot;Subscribe&quot;> </form> <form>     <input type=&quot;email&quot; id=&quot;addr&quot;>     <input type=&quot;submit&quot; value=&quot;Subscribe&quot;>     <input type=&quot;submit&quot; value=&quot;Save&quot; formnovalidate > </form> </ul>
  88. 92. <ul>Quick Win #4 </ul><ul>Custom data attributes </ul>
  89. 93. <ul>&quot;Custom data attributes  are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.&quot;       </ul><ul>http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes </ul>
  90. 94. <ul>              <ul>     <li class=&quot;prodSizeSmall red&quot;>Product 1</li>     <li class=&quot;prodSizeSmall green&quot;>Product 2</li>     <li class=&quot;prodSizeSmall blue&quot;>Product 3</li>     <li class=&quot;prodSizeMedium red&quot;>Product 4</li>     <li class=&quot;prodSizeMedium blue&quot;>Product 5</li>     <li class=&quot;prodSizeLarge blue&quot;>Product 6</li>     <li class=&quot;prodSizeLarge green&quot;>Product 7</li>     <li class=&quot;prodSizeLarge red&quot;>Product 8</li> </ul> </ul>
  91. 95. <ul>              <ul>     <li data-prod-size=&quot;small&quot; data-prod-color=&quot;red&quot;>Product 1</li>     <li data-prod-size=&quot;small&quot; data-prod-color=&quot;green&quot;>Product 2</li>     <li data-prod-size=&quot;small&quot; data-prod-color=&quot;blue&quot;>Product 3</li>     <li data-prod-size=&quot;medium&quot; data-prod-color=&quot;red&quot;>Product 4</li>     <li data-prod-size=&quot;medium&quot; data-prod-color=&quot;blue&quot;>Product 5</li>     <li data-prod-size=&quot;large&quot; data-prod-color=&quot;blue&quot;>Product 6</li>     <li data-prod-size=&quot;large&quot; data-prod-color=&quot;green&quot;>Product 7</li>     <li data-prod-size=&quot;large&quot; data-prod-color=&quot;red&quot;>Product 8</li> </ul> </ul>
  92. 98. <ul>        <img       data-product-price=&quot;£350.00&quot;  </ul><ul>     data-product-name=&quot;Meisterstück Classique&quot;       data-closeup=&quot;/WritingInstrument/MagnifiedImages/12737_l.jpg&quot;  </ul><ul>     alt=&quot;Meisterstück Classique&quot;       src=&quot;/WritingInstrument/ThumbImages/12737_t2.png&quot;       class=&quot;proColorImg&quot;>         var imgSrc = $targetImg.attr('data-closeup'); var productName = $targetImg.attr('data-product-name'); var productPrice = $targetImg.attr('data-product-price');      </ul>
  93. 99. <ul>Quick Win #5 </ul><ul>Polyfills! </ul>
  94. 100. <ul>  Polyfill: (as defined by Paul Irish )   (n) A shim that mimics a future API providing fallback functionality to older browsers.     </ul><ul>http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills </ul>
  95. 101. <ul>Thank you! The cow thinks it would be great of you to leave any feedback here: http://speakerrate.com/jlbruno </ul><ul>Want to read more? Check out Mark Pilgrim's online book: http://diveintohtml5.org/ </ul>

×