HTML5 Now

HTML5 NOW Guest Appearance By CSS3 ★ Clinton R. Nixon Web Wrangler, Viget Labs Friday, January 29, 2010

What is HTML5? Friday, January 29, 2010

★ Not XHTML 2.0 ★ “Web Applications 1.0” ★ Description of current browser behavior ★ Description of common web page structure ★ A bunch of new tags ★ And a bunch of new attributes ★ New JavaScript capabilities ★ The DOM deﬁnition Friday, January 29, 2010

Why HTML5? Friday, January 29, 2010

★ Ease of use ★ Semantic blah blah blah ★ Reduce content size ★ JavaScript and web app capabilities ★ Mobile applications ★ Learning new things is fun Friday, January 29, 2010

HTML5 Documents Friday, January 29, 2010

<!DOCTYPE html> Friday, January 29, 2010

OK! <!DOCTYPE html> Friday, January 29, 2010

<!DOCTYPE html> <title>Valid HTML 5</title> <p>Hello world</p> Friday, January 29, 2010

Caut ion! <!DOCTYPE html> <title>Valid HTML 5</title> <p>Hello world</p> Friday, January 29, 2010

This is not XHTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Sample HTML 5 Page</title> <body> <p>This is perfectly valid HTML. Friday, January 29, 2010

But XHTML-style is also valid <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>My Sample HTML 5 Page</title> </head> <body> <p>This is perfectly valid HTML.</p> </body> </html> Friday, January 29, 2010

HTML5 Elements Friday, January 29, 2010

New block-level elements ★ header ★ article ★ footer ★ aside ★ hgroup ★ dialog ★ nav ★ command ★ section ★ output Friday, January 29, 2010

New block-level elements ★ header ★ article OK* ★ footer ★ aside ★ hgroup ★ dialog ★ nav ★ command ★ section ★ output Friday, January 29, 2010

New block-level elements ★ header ★ article OK* ★ footer ★ aside ★ hgroup Cau tion ! ★ dialog ★ nav ★ command ★ section ★ output Friday, January 29, 2010

<header> <h1>Good Times Blog</h1> <p class="description">Good Times Blog is the blog that most ...</p> </header> <nav> <menu> <li><a href="/archives">Archives</a></li> <li><a href="/about">About</a></li> </menu> </nav> <section id="posts"> <article> <header> <h2>Best Throat-‐Singing Albums of 2009</h2> <div class="date">10 Jan 2009</div> </header> <p>The best throat-‐singing ...</p> <p>In my opinion ...</p> <aside><p>Throat singing is practiced by ...</p></aside> <footer> <p>Posted by Clinton R. Nixon</p> <p><a href="/best-‐throat-‐singing#comments">3 comments</a></p> </footer> </article> <article>...</article> <nav><a href="/archives">Earlier Entries</a></nav> </section> <footer><p>Good Times Blog is (c) 2010 +3 Magic Sword Productions</p></footer> Friday, January 29, 2010

<section id="posts"> <article> <header> <h2>Best Throat-‐Singing Albums of 2009</h2> <div class="date">10 Jan 2009</div> </header> <p>The best throat-‐singing ...</p> <p>In my opinion ...</p> <aside> <p>Throat singing is practiced by ...</p> </aside> <footer> <p>Posted by Clinton R. Nixon</p> <p><a href="/best-‐throat-‐singing#comments"> 3 comments</a></p> </footer> </article> <article>...</article> <nav><a href="/archives">Earlier Entries</a></nav> </section> Friday, January 29, 2010

New text-level elements ★ mark ★ time ★ meter ★ progress Friday, January 29, 2010

New text-level elements OK* ★ mark ★ time ★ meter ★ progress Friday, January 29, 2010

This album received <meter value="7.4" min="0.0" max="10.0" low="5.0" high="7.5" optimum="9.0"> a score of 7.4 </meter> on Pitchfork. You answered <meter>62.5%</meter> or <meter>5/8</meter>ths of the trivia questions correctly. We are <progress value="48" max="91"> more than halfway </progress> through with the movie. Friday, January 29, 2010

* IE, Firefox 2 Friday, January 29, 2010

* IE, Firefox 2 IE doesn’t let you style unknown elements. You can ﬁx this with a little JS. Friday, January 29, 2010

* IE, Firefox 2 IE doesn’t let you style unknown elements. You can ﬁx this with a little JS. Firefox 2 (and other old Gecko browsers) are batpoop crazy. 3-4% of the browser market. Worth it? Friday, January 29, 2010

Changed elements ★ block-level <a> ★ <b>, <i> and <small> are semantically justiﬁed ★ <address> is revisited ★ <menu> is back in town and ready to kick <ul> in the validator Friday, January 29, 2010

Changed elements ★ block-level <a> OK! ★ <b>, <i> and <small> are semantically justiﬁed ★ <address> is revisited ★ <menu> is back in town and ready to kick <ul> in the validator Friday, January 29, 2010

Changed elements ★ block-level <a> OK! ★ <b>, <i> and <small> are semantically justiﬁed ★ <address> is revisited ★ <menu> is back in town and ready to kick <ul> in the validator metal Friday, January 29, 2010

Elements that have been run out of town basefont u big frame center frameset font noframes s acronym strike applet tt Friday, January 29, 2010

New and changed attributes All presentational contexteditable <ol reversed> attributes are contextmenu <script async> gone. draggable <style scoped> <a id> instead of hidden <a name> spellcheck data-* <a ping> Friday, January 29, 2010

New and changed attributes All presentational contexteditable <ol reversed> attributes are contextmenu <script async> gone. draggable <style scoped> <a id> instead of hidden <a name> spellcheck data-* <a ping> OK! Friday, January 29, 2010

New and changed attributes All presentational contexteditable <ol reversed> attributes are contextmenu <script async> gone. draggable <style scoped> <a id> instead of hidden <a name> spellcheck data-* <a ping> OK! Caut ion! Friday, January 29, 2010

New and changed attributes All presentational contexteditable <ol reversed> attributes are contextmenu <script async> gone. draggable <style scoped> <a id> instead of hidden <a name> spellcheck data-* <a ping> OK! Caut ion! Danger! Friday, January 29, 2010

HTML5 Forms Friday, January 29, 2010

★ A lot of HTML5 is focused on web applications. ★ Because of that, forms have gained a lot of capabilities. Friday, January 29, 2010

New input types tel week search time url datetime-‐local email number datetime range date color month Friday, January 29, 2010

New input types tel week search time url datetime-‐local email number datetime range date color OK! month Friday, January 29, 2010

New attributes for form elements <input autofocus> <input required> <input placeholder> <input form=form_id> <input min=x max=y> <input multiple> <input pattern=some_pattern> <input list=list_name> <form novalidate> Friday, January 29, 2010

New attributes for form elements <input autofocus> <input required> Caut <input placeholder> ion! <input form=form_id> <input min=x max=y> <input multiple> <input pattern=some_pattern> <input list=list_name> <form novalidate> Friday, January 29, 2010

Datalists <input list="sandwiches" name="sandwich"> <datalist id="sandwiches"> <option value="hamburger">hamburger <option value="reuben">reuben <option value="grilled cheese">grilled cheese </datalist> Friday, January 29, 2010

Datalists <input list="sandwiches" name="sandwich"> <datalist id="sandwiches"> <option value="hamburger">hamburger <option value="reuben">reuben <option value="grilled cheese">grilled cheese </datalist> Caut ion! Friday, January 29, 2010

MULTIMEDIA RODEO Friday, January 29, 2010

★ New tags: <audio> and <video> ★ Only supported in FF 3.5+, Safari 4, and Chrome 3 ★ Biggest problem: codec support ★ Biggest use: mobile devices Friday, January 29, 2010

Media attributes src autobuffer autoplay loop controls width (video only) height (video only) poster (video only) Friday, January 29, 2010

How to ﬁx codec issues <video controls> for Safari and Chrome <source src="/downloads/streaming/media/tube1.mp4"> <source src="/downloads/streaming/media/tube1.ogv" type="video/ogg; codecs=theora,vorbis">  <a href="/downloads/streaming/media/tube1.mp4" id="player"></a> <script> $f("player", "/downloads/streaming/swf/flowplayer-3.0.5.swf", {config: { autoPlay: false, autoBuffering: true }}); </script> </video> Friday, January 29, 2010

How to ﬁx codec issues <video controls> <source src="/downloads/streaming/media/tube1.mp4"> <source src="/downloads/streaming/media/tube1.ogv" type="video/ogg; codecs=theora,vorbis"> for Firefox  <a href="/downloads/streaming/media/tube1.mp4" id="player"></a> <script> $f("player", "/downloads/streaming/swf/flowplayer-3.0.5.swf", {config: { autoPlay: false, autoBuffering: true }}); </script> </video> Friday, January 29, 2010

The Canvas Friday, January 29, 2010

★ Pixel-based drawing surface: points, lines, curves, shapes, gradients, fonts, images, and even video ★ Doesn’t work with IE natively ★ ExplorerCanvas can help, but isn’t perfect (no fonts, images, or video) ★ Alternative to Flash ★ Interactive via JS Friday, January 29, 2010

★ Pixel-based drawing surface: points, lines, curves, shapes, gradients, fonts, images, and even video ★ Doesn’t work with IE natively ★ ExplorerCanvas can help, but isn’t perfect (no fonts, images, or video) ★ Alternative to Flash Caut ★ Interactive via JS ion! Friday, January 29, 2010

JavaScript Stampede Friday, January 29, 2010

Cross-document messaging One document sends messages using postMessage(); another document listens by adding an event listener for “message.” Friday, January 29, 2010

Not actually HTML5 ★ Web Workers ★ Web Storage ★ Web Sockets ★ Server-sent Events ★ Web SQL Database ★ Geolocation API ★ XMLHttpRequest Level 2 Friday, January 29, 2010

Web Storage ★ Key-value pairs ★ sessionStorage and localStorage ★ Asynchronous, but ﬁres events ★ Only stores strings ★ Max storage size varies by browser Friday, January 29, 2010

Web Storage OK! ★ Key-value pairs ★ sessionStorage and localStorage ★ Asynchronous, but ﬁres events ★ Only stores strings ★ Max storage size varies by browser Friday, January 29, 2010

localStorage.setItem("emails", JSON.stringify(emails)); var emails = JSON.parse( localStorage.getItem("emails")); localStorage.removeItem("emails"); localStorage.clear(); $(window).bind('storage', function (event) { if (event.key == null) { // clear event } else if (event.newValue == null) { // removeItem event } else { // setItem event } }); Friday, January 29, 2010

Detection with MODERNIZR Friday, January 29, 2010

★ Input types ★ @font-face ★ Input attributes ★ border-image ★ <audio> and <video> ★ border-radius ★ <canvas> ★ box-shadow ★ <canvas> text ★ Multiple backgrounds ★ localStorage ★ opacity ★ sessionStorage ★ CSS animations, ★ Web Workers reﬂections & transforms ★ applicationCache ★ Columns ★ Geolocation API Friday, January 29, 2010

Modernizr ★ Adds detection via CSS properties and JavaScript. ★ Attaches classes to <html> and creates a global Modernizr object. ★ Allows you to add your own tests. Friday, January 29, 2010

/* Simulated box shadow using borders: */ div.somediv { border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow div.somediv { border: none; box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; -webkit-box-shadow: #666 1px 1px 1px; } Friday, January 29, 2010

if (!Modernizr.inputtypes.date){ $("input[type='date']").datepicker(); } Friday, January 29, 2010

The Future of HTML Friday, January 29, 2010

Questions? Friday, January 29, 2010 <

Find out more at: http://crnixon.org http://pinboard.in/u:crnixon/t:html5/ or email me at clinton.nixon@viget.com. Friday, January 29, 2010

http://www.slideshare.net	29
http://crnixon.com	29
http://speakerrate.com	14
http://coderwall.com	6
http://www.brijj.com	2
http://static.slidesharecdn.com	1
http://www.nofoon.com	1
http://webcache.googleusercontent.com	1
http://localhost:3000	1

HTML5 Now

by Clinton R. Nixon on Jan 29, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 84

Statistics

HTML5 Now — Presentation Transcript