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

You Don’t Have to be a Ninja to Learn HTML5 @claytonlz Desert Code Camp April 2nd, 2011Saturday, April 2, 2011

Semantic Elements Video Forms Example BoilerplateSaturday, April 2, 2011

<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

<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 element is appropriate only if the elements contents would be listed explicitly in the documents outline.Saturday, April 2, 2011

<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

<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, April 2, 2011

<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

<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

<div class="entry"> <h2>My Trip to Las Vegas</h2> <span>By John Smith</span> <p>...</p> </div>Saturday, April 2, 2011

<article class="entry"> <h1>My Trip to Las Vegas</h1> <span>By John Smith</span> <p>...</p> </article>Saturday, April 2, 2011

<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

<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

<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

Album Reviews | +-- Stuff you should buy | +--- Link 80 - 17 Reasons | +--- MF Doom - Mm...Food | +--- Bad Brains - Build a NationSaturday, April 2, 2011

<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

<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

Album Reviews | +-- Stuff you should buy | +--- Link 80 - 17 Reasons | +--- MF Doom - Mm...Food | +--- Bad Brains - Build a NationSaturday, April 2, 2011

<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

<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

<body> <header> <h1>My Journal</h1> </header> ... <footer> © 2011 Clayton </footer> </body> Footers dont necessarily have to appear at the end of a section, though they usually do.Saturday, April 2, 2011

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

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

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

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

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

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

<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

Forms: Placeholders <input type=url placeholder=http://example.com> <input type=email placeholder=email@example.com> Safari Chrome Opera iPhoneSaturday, April 2, 2011

Forms: Numbers <input type=number min=0 max=10 step=1 value=2> Safari Chrome OperaSaturday, April 2, 2011

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

✓ Build Script ✓ Optimized html template ✓ Optimized css template ✓ Web server configs ✓ Lightweight ✓ Customizable ✓ Well DocumentedSaturday, April 2, 2011

Saturday, April 2, 2011

http://spkr8.com/t/7006 Clayton Lengel-Zigich : @claytonlz Photo Credits http://www.ﬂickr.com/photos/thevoicewithin/1388730534/sizes/l/ http://www.chipwreck.de/blog/2010/02/25/html-5-video-tag-and-attributes/Saturday, April 2, 2011

http://www.claytonlz.com	166
http://tiesandtutus.com	5
http://feeds2.feedburner.com	3
http://new.claytonlz.com	3
http://feeds.feedburner.com	2
http://www.pennyauctionedge.com	1

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

by Clayton Lengel-Zigich

Accessibility

Upload Details

Usage Rights

6 Embeds 180

Statistics

You Don’t Have to be a Ninja to Learn HTML5! Presentation Transcript