SlideShare a Scribd company logo

HTML5 Now

•
•
Clinton Dreisbach
Clinton Dreisbach

HTML 5 provides us with all sorts of new abilities as web designers. We have new tags and attributes, richer form fields, client-side storage, and more. We’ll talk about how you can start using these features today and how to use them in a cross-browser friendly manner.

TechnologyDesign
1 of 73
Download to read offline
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 definition 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 fix this with a little JS. Friday, January 29, 2010
* IE, Firefox 2 IE doesn’t let you style unknown elements. You can fix 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 justified ★ <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 justified ★ <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 justified ★ <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 fix 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"> <!-- No HTML 5 support. Use Flash instead --> <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 fix 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 <!-- No HTML 5 support. Use Flash instead --> <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
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
<iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data; Caut    event.source.postMessage("message  posted",                                                      event.origin); ion! }); </script> 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 fires 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 fires 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 reflections & 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

Recommended

Having Fun with Play
Having Fun with PlayHaving Fun with Play
Having Fun with PlayClinton Dreisbach
 
Narwhal and the Adventures of CommonJS
Narwhal and the Adventures of CommonJSNarwhal and the Adventures of CommonJS
Narwhal and the Adventures of CommonJSClinton Dreisbach
 
The Joy Of Ruby
The Joy Of RubyThe Joy Of Ruby
The Joy Of RubyClinton Dreisbach
 
Unearthed Arcana for Web People
Unearthed Arcana for Web PeopleUnearthed Arcana for Web People
Unearthed Arcana for Web PeopleClinton Dreisbach
 
Ruby On Rails coding conventions, standards and best practices
Ruby On Rails coding conventions, standards and best practicesRuby On Rails coding conventions, standards and best practices
Ruby On Rails coding conventions, standards and best practicesDavid Paluy
 
Ruby on Rails - The Best Track for your Start Up
Ruby on Rails - The Best Track for your Start UpRuby on Rails - The Best Track for your Start Up
Ruby on Rails - The Best Track for your Start UpPrateek Saxena
 
Migrating Legacy Rails Apps to Rails 3
Migrating Legacy Rails Apps to Rails 3Migrating Legacy Rails Apps to Rails 3
Migrating Legacy Rails Apps to Rails 3Clinton Dreisbach
 
Html5 coredevsummit
Html5 coredevsummitHtml5 coredevsummit
Html5 coredevsummitJen Simmons
 

Recommended

Having Fun with Play
Having Fun with PlayHaving Fun with Play
Having Fun with PlayClinton Dreisbach
 
Narwhal and the Adventures of CommonJS
Narwhal and the Adventures of CommonJSNarwhal and the Adventures of CommonJS
Narwhal and the Adventures of CommonJSClinton Dreisbach
 
The Joy Of Ruby
The Joy Of RubyThe Joy Of Ruby
The Joy Of RubyClinton Dreisbach
 
Unearthed Arcana for Web People
Unearthed Arcana for Web PeopleUnearthed Arcana for Web People
Unearthed Arcana for Web PeopleClinton Dreisbach
 
Ruby On Rails coding conventions, standards and best practices
Ruby On Rails coding conventions, standards and best practicesRuby On Rails coding conventions, standards and best practices
Ruby On Rails coding conventions, standards and best practicesDavid Paluy
 
Ruby on Rails - The Best Track for your Start Up
Ruby on Rails - The Best Track for your Start UpRuby on Rails - The Best Track for your Start Up
Ruby on Rails - The Best Track for your Start UpPrateek Saxena
 
Migrating Legacy Rails Apps to Rails 3
Migrating Legacy Rails Apps to Rails 3Migrating Legacy Rails Apps to Rails 3
Migrating Legacy Rails Apps to Rails 3Clinton Dreisbach
 
Html5 coredevsummit
Html5 coredevsummitHtml5 coredevsummit
Html5 coredevsummitJen Simmons
 
"How Mozilla Uses Selenium"
"How Mozilla Uses Selenium""How Mozilla Uses Selenium"
"How Mozilla Uses Selenium"Stephen Donner
 
Laying Pipe with Transmogrifier
Laying Pipe with TransmogrifierLaying Pipe with Transmogrifier
Laying Pipe with TransmogrifierClayton Parker
 
Joomla: 10 years of progress (jd15fr)
Joomla: 10 years of progress (jd15fr)Joomla: 10 years of progress (jd15fr)
Joomla: 10 years of progress (jd15fr)Peter Martin
 
HTML5 - getting started
HTML5 - getting startedHTML5 - getting started
HTML5 - getting startedTed Drake
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010Mystic Coders, LLC
 
Continuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonContinuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonEric Steele
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 AppsNikolai Onken
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensiblyChristian Heilmann
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumMassimo Azzolini
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
Lecture 1
Lecture 1Lecture 1
Lecture 1barryavery
 
Joomla PLT Summit Feedback
Joomla PLT Summit FeedbackJoomla PLT Summit Feedback
Joomla PLT Summit FeedbackChris Davenport
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 DesignChristopher Schmitt
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Christopher Schmitt
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5Christopher Schmitt
 
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) Gabriele Gigliotti
 
Semantic chop
Semantic chopSemantic chop
Semantic chopPascal Rettig
 
10x Performance Improvements - A Case Study
10x Performance Improvements - A Case Study10x Performance Improvements - A Case Study
10x Performance Improvements - A Case StudyRonald Bradford
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 

More Related Content

Similar to HTML5 Now

"How Mozilla Uses Selenium"
"How Mozilla Uses Selenium""How Mozilla Uses Selenium"
"How Mozilla Uses Selenium"Stephen Donner
 
Laying Pipe with Transmogrifier
Laying Pipe with TransmogrifierLaying Pipe with Transmogrifier
Laying Pipe with TransmogrifierClayton Parker
 
Joomla: 10 years of progress (jd15fr)
Joomla: 10 years of progress (jd15fr)Joomla: 10 years of progress (jd15fr)
Joomla: 10 years of progress (jd15fr)Peter Martin
 
HTML5 - getting started
HTML5 - getting startedHTML5 - getting started
HTML5 - getting startedTed Drake
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010Mystic Coders, LLC
 
Continuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonContinuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonEric Steele
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumMassimo Azzolini
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!Christopher Schmitt
 
Joomla PLT Summit Feedback
Joomla PLT Summit FeedbackJoomla PLT Summit Feedback
Joomla PLT Summit FeedbackChris Davenport
 
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) Gabriele Gigliotti
 
10x Performance Improvements - A Case Study
10x Performance Improvements - A Case Study10x Performance Improvements - A Case Study
10x Performance Improvements - A Case StudyRonald Bradford
 

Similar to HTML5 Now (20)

"How Mozilla Uses Selenium"
"How Mozilla Uses Selenium""How Mozilla Uses Selenium"
"How Mozilla Uses Selenium"
 
Laying Pipe with Transmogrifier
Laying Pipe with TransmogrifierLaying Pipe with Transmogrifier
Laying Pipe with Transmogrifier
 
Joomla: 10 years of progress (jd15fr)
Joomla: 10 years of progress (jd15fr)Joomla: 10 years of progress (jd15fr)
Joomla: 10 years of progress (jd15fr)
 
HTML5 - getting started
HTML5 - getting startedHTML5 - getting started
HTML5 - getting started
 
In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010
 
Continuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using HudsonContinuous Integration Testing for Plone Using Hudson
Continuous Integration Testing for Plone Using Hudson
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 Apps
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone Symposium
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Joomla PLT Summit Feedback
Joomla PLT Summit FeedbackJoomla PLT Summit Feedback
Joomla PLT Summit Feedback
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine) HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
 
Semantic chop
Semantic chopSemantic chop
Semantic chop
 
10x Performance Improvements - A Case Study
10x Performance Improvements - A Case Study10x Performance Improvements - A Case Study
10x Performance Improvements - A Case Study
 

Recently uploaded

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 

HTML5 Now

  • 1. HTML5 NOW Guest Appearance By CSS3 ★ Clinton R. Nixon Web Wrangler, Viget Labs Friday, January 29, 2010
  • 2. What is HTML5? Friday, January 29, 2010
  • 3. ★ 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 definition Friday, January 29, 2010
  • 5. ★ 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
  • 6. HTML5 Documents Friday, January 29, 2010
  • 8. OK! <!DOCTYPE html> Friday, January 29, 2010
  • 9. <!DOCTYPE html> <title>Valid HTML 5</title> <p>Hello world</p> Friday, January 29, 2010
  • 10. Caut ion! <!DOCTYPE html> <title>Valid HTML 5</title> <p>Hello world</p> Friday, January 29, 2010
  • 11. 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
  • 12. 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
  • 13. HTML5 Elements Friday, January 29, 2010
  • 14. New block-level elements ★ header ★ article ★ footer ★ aside ★ hgroup ★ dialog ★ nav ★ command ★ section ★ output Friday, January 29, 2010
  • 15. New block-level elements ★ header ★ article OK* ★ footer ★ aside ★ hgroup ★ dialog ★ nav ★ command ★ section ★ output Friday, January 29, 2010
  • 16. New block-level elements ★ header ★ article OK* ★ footer ★ aside ★ hgroup Cau tion ! ★ dialog ★ nav ★ command ★ section ★ output Friday, January 29, 2010
  • 17. <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
  • 18. <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
  • 19. New text-level elements ★ mark ★ time ★ meter ★ progress Friday, January 29, 2010
  • 20. New text-level elements OK* ★ mark ★ time ★ meter ★ progress Friday, January 29, 2010
  • 21. 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
  • 22. * IE, Firefox 2 Friday, January 29, 2010
  • 23. * IE, Firefox 2 IE doesn’t let you style unknown elements. You can fix this with a little JS. Friday, January 29, 2010
  • 24. * IE, Firefox 2 IE doesn’t let you style unknown elements. You can fix 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
  • 25. Changed elements ★ block-level <a> ★ <b>, <i> and <small> are semantically justified ★ <address> is revisited ★ <menu> is back in town and ready to kick <ul> in the validator Friday, January 29, 2010
  • 26. Changed elements ★ block-level <a> OK! ★ <b>, <i> and <small> are semantically justified ★ <address> is revisited ★ <menu> is back in town and ready to kick <ul> in the validator Friday, January 29, 2010
  • 27. Changed elements ★ block-level <a> OK! ★ <b>, <i> and <small> are semantically justified ★ <address> is revisited ★ <menu> is back in town and ready to kick <ul> in the validator metal Friday, January 29, 2010
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. HTML5 Forms Friday, January 29, 2010
  • 34. ★ A lot of HTML5 is focused on web applications. ★ Because of that, forms have gained a lot of capabilities. Friday, January 29, 2010
  • 35. New input types tel week search time url datetime-­‐local email number datetime range date color month Friday, January 29, 2010
  • 36. New input types tel week search time url datetime-­‐local email number datetime range date color OK! month Friday, January 29, 2010
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. MULTIMEDIA RODEO Friday, January 29, 2010
  • 42. ★ 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
  • 43. Media attributes src autobuffer autoplay loop controls width (video only) height (video only) poster (video only) Friday, January 29, 2010
  • 44. How to fix 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"> <!-- No HTML 5 support. Use Flash instead --> <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
  • 45. How to fix 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 <!-- No HTML 5 support. Use Flash instead --> <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
  • 47. ★ 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
  • 48. ★ 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
  • 49. JavaScript Stampede Friday, January 29, 2010
  • 50. Cross-document messaging One document sends messages using postMessage(); another document listens by adding an event listener for “message.” Friday, January 29, 2010
  • 51. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 52. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 53. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 54. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 55. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 56. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 57. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 58. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 59. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 60. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data;    event.source.postMessage("message  posted",                                                      event.origin); }); </script> Friday, January 29, 2010
  • 61. <iframe  src="http://whiteboard.me/board"  id="whiteboard"></iframe> <form  id="localwriter">    <input  type="text"  id="message">    <input  type="submit"> </form> <script>    $(document).ready(function  ()  {        var  whiteboard  =  $('#whiteboard').get(0);        $('#localwriter').bind('submit',  function  (event)  {            whiteboard.postMessage($('#message').val(),                                                            'http://writeboard.me/');            event.preventDefault();        });    }); </script> -­‐-­‐-­‐ <script> $(window).bind('message',  function  (event)  {    if  (event.origin  !==  'http://crnixon.org')  {  return;  }        $("#output").get(0).textContent  +=  "<p>"  +        "so-­‐and-­‐so  said:  "  +  event.data; Caut    event.source.postMessage("message  posted",                                                      event.origin); ion! }); </script> Friday, January 29, 2010
  • 62. Not actually HTML5 ★ Web Workers ★ Web Storage ★ Web Sockets ★ Server-sent Events ★ Web SQL Database ★ Geolocation API ★ XMLHttpRequest Level 2 Friday, January 29, 2010
  • 63. Web Storage ★ Key-value pairs ★ sessionStorage and localStorage ★ Asynchronous, but fires events ★ Only stores strings ★ Max storage size varies by browser Friday, January 29, 2010
  • 64. Web Storage OK! ★ Key-value pairs ★ sessionStorage and localStorage ★ Asynchronous, but fires events ★ Only stores strings ★ Max storage size varies by browser Friday, January 29, 2010
  • 65. 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
  • 66. Detection with MODERNIZR Friday, January 29, 2010
  • 67. ★ 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 reflections & transforms ★ applicationCache ★ Columns ★ Geolocation API Friday, January 29, 2010
  • 68. 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
  • 69. /* 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
  • 70. if (!Modernizr.inputtypes.date){ $("input[type='date']").datepicker(); } Friday, January 29, 2010
  • 71. The Future of HTML Friday, January 29, 2010
  • 73. 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