Your SlideShare is downloading. ×
0
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
You Don't Have to be a Ninja to Learn HTML5!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,391

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

"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,391
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

×