Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

You Don't Have to be a Ninja to Learn HTML5!

1,635 views

Published on

"You Don't Have to be a Ninja to learn HTML5" as presented by Clayton Lengel-Zigich at Desert Code Camp on April 2nd, 2011

  • Be the first to comment

  • Be the first to like this

You Don't Have to be a Ninja to Learn HTML5!

  1. 1. You Don’t Have to be a Ninja to Learn HTML5 @claytonlz Desert Code Camp April 2nd, 2011Saturday, April 2, 2011
  2. 2. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  3. 3. <section> “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.” </section>Saturday, April 2, 2011
  4. 4. <div id="chapter_1"> ... </div>Saturday, April 2, 2011
  5. 5. <section id="chapter_1"> ... </section>Saturday, April 2, 2011
  6. 6. <section id="chapter_1"> ... </section> A general rule is that the section element is appropriate only if the elements contents would be listed explicitly in the documents outline.Saturday, April 2, 2011
  7. 7. <nav> “The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.” </nav>Saturday, April 2, 2011
  8. 8. <ul id="nav"> <li><a href="/home">Home</a></li> <li><a href="/news">News</a></li> </ul>Saturday, April 2, 2011
  9. 9. <nav> <ul> <li><a href="/home">Home</a></li> <li><a href="/news">News</a></li> </ul> </nav>Saturday, April 2, 2011
  10. 10. <nav> <ul> <li><a href="/home">Home</a></li> <li><a href="/news">News</a></li> </ul> </nav> The nav element allows some user agents to omit navigation information or skip directly to navigation information.Saturday, April 2, 2011
  11. 11. <article> “The article element represents a self- contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.” </article>Saturday, April 2, 2011
  12. 12. <div class="entry"> <h2>My Trip to Las Vegas</h2> <span>By John Smith</span> <p>...</p> </div>Saturday, April 2, 2011
  13. 13. <article class="entry"> <h1>My Trip to Las Vegas</h1> <span>By John Smith</span> <p>...</p> </article>Saturday, April 2, 2011
  14. 14. <article class="entry"> <h1>My Trip to Las Vegas</h1> <span>By John Smith</span> <p>...</p> </article> When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.Saturday, April 2, 2011
  15. 15. <hgroup> “The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.” </hgroup>Saturday, April 2, 2011
  16. 16. <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2> <h3>Link 80 - 17 Reasons</h3> <h3>MF Doom - Mm..Food</h3> <h3>Bad Brains - Build a Nation</h3>Saturday, April 2, 2011
  17. 17. Album Reviews | +-- Stuff you should buy | +--- Link 80 - 17 Reasons | +--- MF Doom - Mm...Food | +--- Bad Brains - Build a NationSaturday, April 2, 2011
  18. 18. <hgroup> <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2> </hgroup> <h3>Link 80 - 17 Reasons</h3> <h3>MF Doom - Mm..Food</h3> <h3>Bad Brains - Build a Nation</h3>Saturday, April 2, 2011
  19. 19. <hgroup> <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2> </hgroup> <h3>Link 80 - 17 Reasons</h3> <h3>MF Doom - Mm..Food</h3> <h3>Bad Brains - Build a Nation</h3> The point of using hgroup is to mask the h2 element (which acts as a tagline) from the outline algorithm.Saturday, April 2, 2011
  20. 20. Album Reviews | +-- Stuff you should buy | +--- Link 80 - 17 Reasons | +--- MF Doom - Mm...Food | +--- Bad Brains - Build a NationSaturday, April 2, 2011
  21. 21. <hgroup> <h1>Album Reviews</h1> <h2>Stuff you should buy!</h2> </hgroup> <article> <hgroup> <h1>Link 80</h1> <h2>17 Reasons</h2> </hgroup> <p>...</p> </article>Saturday, April 2, 2011
  22. 22. <header> “The header element represents a group of introductory or navigational aids.” “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.” </footer>Saturday, April 2, 2011
  23. 23. <body> <div id="header"> <h1>My Journal</h1> </div> ... <div id="footer"> &copy; 2011 Clayton </div> </body>Saturday, April 2, 2011
  24. 24. <body> <header> <h1>My Journal</h1> </header> ... <footer> &copy; 2011 Clayton </footer> </body>Saturday, April 2, 2011
  25. 25. <body> <header> <h1>My Journal</h1> </header> ... <footer> &copy; 2011 Clayton </footer> </body> Footers dont necessarily have to appear at the end of a section, though they usually do.Saturday, April 2, 2011
  26. 26. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  27. 27. <script type="text/javascript" charset="utf-8"> </script> <object> ... </object>Saturday, April 2, 2011
  28. 28. IE 9.0+ FireFox 3.5+ Safari 3.0+ Chrome 3.0+ Opera 10.5+ iPhone 1.0+ Android 2.0+Saturday, April 2, 2011
  29. 29. Video: The <video> Element <video width="320" height="240" controls> <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="oxy-clean.webm" type=video/webm; codecs="vp8, vorbis"> <source src="oxy-clean.ogv" type=video/ogg; codecs="theora, vorbis"> </video>Saturday, April 2, 2011
  30. 30. Video: The <video> Element <video width="320" height="240" controls> <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="oxy-clean.webm" type=video/webm; codecs="vp8, vorbis"> <source src="oxy-clean.ogv" type=video/ogg; codecs="theora, vorbis"> </video>Saturday, April 2, 2011
  31. 31. Video: Size <video width="320" height="240" controls> <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="oxy-clean.webm" type=video/webm; codecs="vp8, vorbis"> <source src="oxy-clean.ogv" type=video/ogg; codecs="theora, vorbis"> </video>Saturday, April 2, 2011
  32. 32. Video: Controls <video width="320" height="240" controls> <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="oxy-clean.webm" type=video/webm; codecs="vp8, vorbis"> <source src="oxy-clean.ogv" type=video/ogg; codecs="theora, vorbis"> </video>Saturday, April 2, 2011
  33. 33. Video: Mime Types <video width="320" height="240" controls> <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="oxy-clean.webm" type=video/webm; codecs="vp8, vorbis"> <source src="oxy-clean.ogv" type=video/ogg; codecs="theora, vorbis"> </video> AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webmSaturday, April 2, 2011
  34. 34. Video: Codecs <video width="320" height="240" controls> <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="oxy-clean.webm" type=video/webm; codecs="vp8, vorbis"> <source src="oxy-clean.ogv" type=video/ogg; codecs="theora, vorbis"> </video> type video/mp4 video codec avc1.42E01E (H.264 Baseline) audio codec mp4a.40.2 (Low-Complexity AAC)Saturday, April 2, 2011
  35. 35. <video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="pr6.ogv" type=video/ogg; codecs="theora, vorbis" /> <source src="pr6.mp4" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "http://wearehugh.com/ dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="pr6.mp4">MP4</a>,↵ <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>. </p> </object> </video> <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>Saturday, April 2, 2011
  36. 36. <video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="pr6.ogv" type=video/ogg; codecs="theora, vorbis" /> <source src="pr6.mp4" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "http://wearehugh.com/ dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="pr6.mp4">MP4</a>,↵ <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>. </p> </object> </video> <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>Saturday, April 2, 2011
  37. 37. <video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="pr6.ogv" type=video/ogg; codecs="theora, vorbis" /> <source src="pr6.mp4" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "http://wearehugh.com/ dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="pr6.mp4">MP4</a>,↵ <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>. </p> </object> </video> <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>Saturday, April 2, 2011
  38. 38. <video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="pr6.ogv" type=video/ogg; codecs="theora, vorbis" /> <source src="pr6.mp4" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "http://wearehugh.com/ dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="pr6.mp4">MP4</a>,↵ <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>. </p> </object> </video> <script> var v = document.getElementById("movie"); v.onclick = function() { if (v.paused) { v.play(); } else { v.pause(); } }; </script>Saturday, April 2, 2011
  39. 39. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  40. 40. Forms: Placeholders <input type=url placeholder=http://example.com> <input type=email placeholder=email@example.com> Safari Chrome Opera iPhoneSaturday, April 2, 2011
  41. 41. Forms: Numbers <input type=number min=0 max=10 step=1 value=2> Safari Chrome OperaSaturday, April 2, 2011
  42. 42. Forms: Ranges <input type=range min=0 max=100 step=5> Safari Chrome OperaSaturday, April 2, 2011
  43. 43. Forms: Search <input type=search /> Safari Chrome OperaSaturday, April 2, 2011
  44. 44. Forms: Required Fields <input name=first_name required> Safari Chrome OperaSaturday, April 2, 2011
  45. 45. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  46. 46. ✓ Build Script ✓ Optimized html template ✓ Optimized css template ✓ Web server configs ✓ Lightweight ✓ Customizable ✓ Well DocumentedSaturday, April 2, 2011
  47. 47. Saturday, April 2, 2011
  48. 48. http://spkr8.com/t/7006 Clayton Lengel-Zigich : @claytonlz Photo Credits http://www.flickr.com/photos/thevoicewithin/1388730534/sizes/l/ http://www.chipwreck.de/blog/2010/02/25/html-5-video-tag-and-attributes/Saturday, April 2, 2011

×