HTML5: 5 Quick Wins
2 likes1,072 views
The document discusses quick wins and improvements that can be implemented in HTML5 today, including simplifying the document type and template, adding new semantic elements, updating forms, using custom data attributes, and including polyfills for cross-browser compatibility. Some specific examples mentioned are a shorter doctype, new input types like email and date, using data attributes instead of classes, and including polyfills to enable HTML5 features in older browsers.
HTML5: 5 Quick Wins
- 1. HTML5 5 Quick Wins (Things you can start doing today)
- 2. Hi, I'm Jeff Leombruno. @jlbruno I work at PixelMEDIA. @pixelmedia Tweeting today? #TechWorld2010
- 6. Utility
- 9. Compatibility: Support Existing Content
- 13. Don't Reinvent the Wheel
- 20. Utility: Solve Real Problems
- 23. Secure By Design
- 25. DOM Consistency
- 28. Handle Errors
- 29. Universal Access: Media Independence
- 31. Accessibility
- 32. So, what is it?
- 33. New markup tags
- 36. Web workers
- 39. Geolocation*
- 40. Who's using it?
- 41. Apple
- 42. Facebook
- 43. Google
- 44. Microsoft
- 45. YouTube
- 46. "HTML5 should not be considered as a whole. You should cherry pick the technology that suits the solution to your problem." -- Remy Sharp http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites
- 47. Quick Win #1 New Doctype, Simplified Template
- 50. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>
- 51. <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" href="style.css" /> </head> <body> </body> </html>
- 52. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset= " utf-8" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>
- 53. Quick Win #2 New Semantic Elements
- 56. <body> <div class="header"> </div> <ul id="nav"> </nav> <div id="content"> <h1> </h1> <div class="article"> </div> <div class="footer"> </div> </div> <div class="sidebar"> </div> <div id="footer"> </div> </body>
- 57. <body> <header> </header> <nav> </nav> <section> <header> </header> <article> </article> <footer> </footer> </section> <aside> </aside> <footer> </footer> </body>
- 58. article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
- 60. We can fix this.
- 61. We have the technology...
- 62. http://intertwingly.net/blog/2008/01/22/Best-Standards-Support#c1201006277 (Jan 22, 2008) <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> http://code.google.com/p/html5shim/
- 64. Quick Win #3 Form Updates
- 65. New Input Types: email
- 67. url
- 69. number
- 71. range
- 73. date, month, week, time, datetime, datetime-local
- 75. search
- 77. color
- 78. Email:
- 79. URL:
- 81. Date: (in Opera)
- 82. Search: (in WebKit)
- 85. placeholder
- 86. autofocus
- 88. required
- 89. Validation: (in Firefox 4)
- 91. Validation: <form novalidate > <input type="email" id="addr"> <input type="submit" value="Subscribe"> </form> <form> <input type="email" id="addr"> <input type="submit" value="Subscribe"> <input type="submit" value="Save" formnovalidate > </form>
- 92. Quick Win #4 Custom data attributes
- 93. "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." http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes
- 94. <ul> <li class="prodSizeSmall red">Product 1</li> <li class="prodSizeSmall green">Product 2</li> <li class="prodSizeSmall blue">Product 3</li> <li class="prodSizeMedium red">Product 4</li> <li class="prodSizeMedium blue">Product 5</li> <li class="prodSizeLarge blue">Product 6</li> <li class="prodSizeLarge green">Product 7</li> <li class="prodSizeLarge red">Product 8</li> </ul>
- 95. <ul> <li data-prod-size="small" data-prod-color="red">Product 1</li> <li data-prod-size="small" data-prod-color="green">Product 2</li> <li data-prod-size="small" data-prod-color="blue">Product 3</li> <li data-prod-size="medium" data-prod-color="red">Product 4</li> <li data-prod-size="medium" data-prod-color="blue">Product 5</li> <li data-prod-size="large" data-prod-color="blue">Product 6</li> <li data-prod-size="large" data-prod-color="green">Product 7</li> <li data-prod-size="large" data-prod-color="red">Product 8</li> </ul>
- 98. <img data-product-price="£350.00" data-product-name="Meisterstück Classique" data-closeup="/WritingInstrument/MagnifiedImages/12737_l.jpg" alt="Meisterstück Classique" src="/WritingInstrument/ThumbImages/12737_t2.png" class="proColorImg"> var imgSrc = $targetImg.attr('data-closeup'); var productName = $targetImg.attr('data-product-name'); var productPrice = $targetImg.attr('data-product-price');
- 99. Quick Win #5 Polyfills!
- 100. Polyfill: (as defined by Paul Irish ) (n) A shim that mimics a future API providing fallback functionality to older browsers. http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- 101. Thank you! The cow thinks it would be great of you to leave any feedback here: http://speakerrate.com/jlbruno Want to read more? Check out Mark Pilgrim's online book: http://diveintohtml5.org/