You Don’t   Have to be a                           Ninja                          to Learn                          HTML5 ...
Semantic Elements                          Video                          Forms                          Example          ...
<section>                            “The section element represents a generic                             section of a do...
<div id="chapter_1">                 ...               </div>Saturday, April 2, 2011
<section id="chapter_1">           ...         </section>Saturday, April 2, 2011
<section id="chapter_1">           ...         </section>                          A general rule is that the section elem...
<nav>                          “The nav element represents a section of a                           page that links to oth...
<ul id="nav">      <li><a href="/home">Home</a></li>      <li><a href="/news">News</a></li>    </ul>Saturday, April 2, 2011
<nav>     <ul>       <li><a href="/home">Home</a></li>       <li><a href="/news">News</a></li>     </ul>   </nav>Saturday,...
<nav>     <ul>       <li><a href="/home">Home</a></li>       <li><a href="/news">News</a></li>     </ul>   </nav>         ...
<article>                          “The article element represents a self-                          contained composition ...
<div class="entry">     <h2>My Trip to Las Vegas</h2>     <span>By John Smith</span>     <p>...</p>   </div>Saturday, Apri...
<article class="entry">     <h1>My Trip to Las Vegas</h1>     <span>By John Smith</span>     <p>...</p>   </article>Saturd...
<article class="entry">     <h1>My Trip to Las Vegas</h1>     <span>By John Smith</span>     <p>...</p>   </article>      ...
<hgroup>                          “The hgroup element represents the heading                          of a section. The el...
<h1>Album Reviews</h1>      <h2>Stuff you should buy!</h2>        <h3>Link 80 - 17 Reasons</h3>        <h3>MF Doom - Mm..F...
Album Reviews   |   +-- Stuff you should buy       |       +--- Link 80 - 17 Reasons       |       +--- MF Doom - Mm...Foo...
<hgroup>     <h1>Album Reviews</h1>     <h2>Stuff you should buy!</h2>   </hgroup>   <h3>Link 80 - 17 Reasons</h3>   <h3>M...
<hgroup>     <h1>Album Reviews</h1>     <h2>Stuff you should buy!</h2>   </hgroup>   <h3>Link 80 - 17 Reasons</h3>   <h3>M...
Album Reviews     |     +-- Stuff you should buy   |   +--- Link 80 - 17 Reasons   |   +--- MF Doom - Mm...Food   |   +---...
<hgroup>     <h1>Album Reviews</h1>     <h2>Stuff you should buy!</h2>   </hgroup>   <article>     <hgroup>       <h1>Link...
<header>                          “The header element represents a group of                          introductory or navig...
<body>     <div id="header">       <h1>My Journal</h1>     </div>     ...     <div id="footer">       &copy; 2011 Clayton ...
<body>     <header>       <h1>My Journal</h1>     </header>     ...     <footer>       &copy; 2011 Clayton     </footer>  ...
<body>     <header>       <h1>My Journal</h1>     </header>     ...     <footer>       &copy; 2011 Clayton     </footer>  ...
Semantic Elements                          Video                          Forms                          Example          ...
<script type="text/javascript" charset="utf-8">                          </script>                                        ...
IE      9.0+                          FireFox   3.5+                          Safari    3.0+                          Chro...
Video: The <video> Element     <video width="320" height="240" controls>       <source src="oxy-clean.mp4" type=video/mp4;...
Video: The <video> Element     <video width="320" height="240" controls>       <source src="oxy-clean.mp4" type=video/mp4;...
Video: Size     <video width="320" height="240" controls>       <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1.4...
Video: Controls     <video width="320" height="240" controls>       <source src="oxy-clean.mp4" type=video/mp4; codecs="av...
Video: Mime Types     <video width="320" height="240" controls>       <source src="oxy-clean.mp4" type=video/mp4; codecs="...
Video: Codecs     <video width="320" height="240" controls>       <source src="oxy-clean.mp4" type=video/mp4; codecs="avc1...
<video id="movie" width="320" height="240" preload controls>   <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis...
<video id="movie" width="320" height="240" preload controls>   <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis...
<video id="movie" width="320" height="240" preload controls>   <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis...
<video id="movie" width="320" height="240" preload controls>   <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis...
Semantic Elements                          Video                          Forms                          Example          ...
Forms: Placeholders     <input type=url placeholder=http://example.com>     <input type=email placeholder=email@example.co...
Forms: Numbers      <input type=number min=0 max=10 step=1 value=2>       Safari             Chrome   OperaSaturday, April...
Forms: Ranges     <input type=range min=0 max=100 step=5>       Safari             Chrome   OperaSaturday, April 2, 2011
Forms: Search         <input type=search />       Safari             Chrome   OperaSaturday, April 2, 2011
Forms: Required Fields      <input name=first_name required>       Safari             Chrome   OperaSaturday, April 2, 2011
Semantic Elements                          Video                          Forms                          Example          ...
✓   Build Script                      ✓   Optimized html template                      ✓   Optimized css template         ...
Saturday, April 2, 2011
http://spkr8.com/t/7006      Clayton Lengel-Zigich : @claytonlz      Photo Credits         http://www.flickr.com/photos/the...
Upcoming SlideShare
Loading in …5
×

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

1,526 views
1,450 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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,526
On SlideShare
0
From Embeds
0
Number of Embeds
203
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×