SlideShare uma empresa Scribd 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.

TecnologiaDesign
1 de 73
Baixar para ler 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

Recomendados

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
 

Recomendados

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
 
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
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 

Mais conteúdo relacionado

Semelhante a 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
 

Semelhante a 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
 

Último

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
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 

Último (20)

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...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 

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