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

  • 1,354 views
Uploaded 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

"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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,354
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. You Don’t Have to be a Ninja to Learn HTML5 @claytonlz Desert Code Camp April 2nd, 2011Saturday, April 2, 2011
  • 2. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  • 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. <div id="chapter_1"> ... </div>Saturday, April 2, 2011
  • 5. <section id="chapter_1"> ... </section>Saturday, April 2, 2011
  • 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. <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. <ul id="nav"> <li><a href="/home">Home</a></li> <li><a href="/news">News</a></li> </ul>Saturday, April 2, 2011
  • 9. <nav> <ul> <li><a href="/home">Home</a></li> <li><a href="/news">News</a></li> </ul> </nav>Saturday, April 2, 2011
  • 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. <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. <div class="entry"> <h2>My Trip to Las Vegas</h2> <span>By John Smith</span> <p>...</p> </div>Saturday, April 2, 2011
  • 13. <article class="entry"> <h1>My Trip to Las Vegas</h1> <span>By John Smith</span> <p>...</p> </article>Saturday, April 2, 2011
  • 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. <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. <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. Album Reviews | +-- Stuff you should buy | +--- Link 80 - 17 Reasons | +--- MF Doom - Mm...Food | +--- Bad Brains - Build a NationSaturday, April 2, 2011
  • 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. <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. Album Reviews | +-- Stuff you should buy | +--- Link 80 - 17 Reasons | +--- MF Doom - Mm...Food | +--- Bad Brains - Build a NationSaturday, April 2, 2011
  • 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. <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. <body> <div id="header"> <h1>My Journal</h1> </div> ... <div id="footer"> &copy; 2011 Clayton </div> </body>Saturday, April 2, 2011
  • 24. <body> <header> <h1>My Journal</h1> </header> ... <footer> &copy; 2011 Clayton </footer> </body>Saturday, April 2, 2011
  • 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. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  • 27. <script type="text/javascript" charset="utf-8"> </script> <object> ... </object>Saturday, April 2, 2011
  • 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. 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. 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. 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. 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. 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. 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. <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. <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. <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. <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. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  • 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. Forms: Numbers <input type=number min=0 max=10 step=1 value=2> Safari Chrome OperaSaturday, April 2, 2011
  • 42. Forms: Ranges <input type=range min=0 max=100 step=5> Safari Chrome OperaSaturday, April 2, 2011
  • 43. Forms: Search <input type=search /> Safari Chrome OperaSaturday, April 2, 2011
  • 44. Forms: Required Fields <input name=first_name required> Safari Chrome OperaSaturday, April 2, 2011
  • 45. Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011
  • 46. ✓ Build Script ✓ Optimized html template ✓ Optimized css template ✓ Web server configs ✓ Lightweight ✓ Customizable ✓ Well DocumentedSaturday, April 2, 2011
  • 47. Saturday, April 2, 2011
  • 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