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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 

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

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 

Recently uploaded (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

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