Clinton Dreisbach, profile picture
Uploaded byClinton Dreisbach
PDF, PPTX6,792 views

HTML5 Now

The document outlines HTML5, introducing its features such as new tags, attributes, and JavaScript capabilities aimed at enhancing web applications and improving ease of use. Key topics include new block-level and text-level elements, form enhancements, multimedia support with <audio> and <video> tags, and cross-document messaging with JavaScript. The document emphasizes the importance of HTML5 for mobile applications and developers' transition from XHTML.

Embed presentation

Download as PDF, PPTX
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

More Related Content

PDF
HTML 5: The Future of the Web
byTim Wright
 
PDF
Ruby On Rails coding conventions, standards and best practices
byDavid Paluy
 
PDF
Migrating Legacy Rails Apps to Rails 3
byClinton Dreisbach
 
PDF
Narwhal and the Adventures of CommonJS
byClinton Dreisbach
 
PDF
Unearthed Arcana for Web People
byClinton Dreisbach
 
PDF
Ruby on Rails - The Best Track for your Start Up
byPrateek Saxena
 
PDF
Having Fun with Play
byClinton Dreisbach
 
PDF
The Joy Of Ruby
byClinton Dreisbach
 
HTML 5: The Future of the Web
byTim Wright
 
Ruby On Rails coding conventions, standards and best practices
byDavid Paluy
 
Migrating Legacy Rails Apps to Rails 3
byClinton Dreisbach
 
Narwhal and the Adventures of CommonJS
byClinton Dreisbach
 
Unearthed Arcana for Web People
byClinton Dreisbach
 
Ruby on Rails - The Best Track for your Start Up
byPrateek Saxena
 
Having Fun with Play
byClinton Dreisbach
 
The Joy Of Ruby
byClinton Dreisbach
 

Similar to HTML5 Now

PDF
HTML5 Pearson preso
byChris Mills
 
PPTX
Html5 tutorial
bymadhavforu
 
PDF
Intro to HTML 5 / CSS 3
byTadpole Collective
 
PDF
A practical guide to building websites with HTML5 & CSS3
byDarren Wood
 
PDF
Up to Speed on HTML 5 and CSS 3
byM. Jackson Wilkinson
 
PDF
A Primer on HTML 5 - By Nick Armstrong
byNick Armstrong
 
PDF
University of Abertay Dundee - evening
byRachel Andrew
 
PDF
Html5 coredevsummit
byJen Simmons
 
PDF
HTML5 - getting started
byTed Drake
 
PDF
HTML5, just another presentation :)
byFrançois Massart
 
PDF
Html5 training
byJames VanDyke
 
KEY
2022 HTML5: The future is now
byGonzalo Cordero
 
PDF
HTML5
byCygnet Infotech
 
PDF
Refreshdc html5css3-090719085307-phpapp01
byApoorvi Kapoor
 
PDF
Html5 intro
byYnon Perek
 
PDF
Beginning Html 5 Presentation
byUsman Saleem
 
PDF
Mansoura University CSED & Nozom web development sprint
byAl Sayed Gamal
 
PDF
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
byMediacurrent
 
PDF
University of Abertay Dundee - afternoon
byRachel Andrew
 
PDF
Foundation of Web Application Developmnet - XHTML
byVashira Ravipanich
 
HTML5 Pearson preso
byChris Mills
 
Html5 tutorial
bymadhavforu
 
Intro to HTML 5 / CSS 3
byTadpole Collective
 
A practical guide to building websites with HTML5 & CSS3
byDarren Wood
 
Up to Speed on HTML 5 and CSS 3
byM. Jackson Wilkinson
 
A Primer on HTML 5 - By Nick Armstrong
byNick Armstrong
 
University of Abertay Dundee - evening
byRachel Andrew
 
Html5 coredevsummit
byJen Simmons
 
HTML5 - getting started
byTed Drake
 
HTML5, just another presentation :)
byFrançois Massart
 
Html5 training
byJames VanDyke
 
2022 HTML5: The future is now
byGonzalo Cordero
 
HTML5
byCygnet Infotech
 
Refreshdc html5css3-090719085307-phpapp01
byApoorvi Kapoor
 
Html5 intro
byYnon Perek
 
Beginning Html 5 Presentation
byUsman Saleem
 
Mansoura University CSED & Nozom web development sprint
byAl Sayed Gamal
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
byMediacurrent
 
University of Abertay Dundee - afternoon
byRachel Andrew
 
Foundation of Web Application Developmnet - XHTML
byVashira Ravipanich
 

Recently uploaded

PDF
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
PDF
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
PPTX
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
byscribddobruno
 
PDF
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
PDF
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
PDF
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
bySharpEagle Technology
 
PDF
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
PDF
Top Crypto Supers 15th Report November 2025
byStephen Perrenod
 
PDF
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
PDF
The Evolving Role of the CEO in the Age of AI
byPipal Tree Services Executive Search Firm
 
PDF
[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...
byWintari Yasmin
 
PDF
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
PDF
[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...
byWintari Yasmin
 
PPTX
kernel PPT (Explanation of Windows Kernal).pptx
byINFOBYTES1
 
PDF
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
PDF
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
PDF
Integrating AI with Meaningful Human Collaboration
byCadabra Studio
 
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
PDF
The partnership effect: Libraries and publishers on collaborating and thrivin...
byBookNet Canada
 
PPTX
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
byscribddobruno
 
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
bySharpEagle Technology
 
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
Top Crypto Supers 15th Report November 2025
byStephen Perrenod
 
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
The Evolving Role of the CEO in the Age of AI
byPipal Tree Services Executive Search Firm
 
[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...
byWintari Yasmin
 
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...
byWintari Yasmin
 
kernel PPT (Explanation of Windows Kernal).pptx
byINFOBYTES1
 
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
Integrating AI with Meaningful Human Collaboration
byCadabra Studio
 
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
The partnership effect: Libraries and publishers on collaborating and thrivin...
byBookNet Canada
 
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 

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 XHTML2.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
  • 4.
  • 5.
    ★ Ease ofuse ★ 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
  • 7.
  • 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 notXHTML <!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 isalso 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, Firefox2 Friday, January 29, 2010
  • 23.
    * IE, Firefox2 IE doesn’t let you style unknown elements. You can fix this with a little JS. Friday, January 29, 2010
  • 24.
    * IE, Firefox2 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 lotof 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 fixcodec 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 fixcodec 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
  • 46.
  • 47.
    ★ Pixel-based drawingsurface: 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 drawingsurface: 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 boxshadow 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
  • 72.
  • 73.
    Find out moreat: http://crnixon.org http://pinboard.in/u:crnixon/t:html5/ or email me at clinton.nixon@viget.com. Friday, January 29, 2010