HTML5 Now
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 Now

on

  • 6,130 views

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 ...

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.

Statistics

Views

Total Views
6,130
Views on SlideShare
6,030
Embed Views
100

Actions

Likes
14
Downloads
148
Comments
0

13 Embeds 100

http://crnixon.com 39
http://www.slideshare.net 29
http://speakerrate.com 14
http://coderwall.com 7
http://www.brijj.com 2
http://t1sc.blogspot.com 2
https://twitter.com 1
http://t1sc.blogspot.kr 1
http://localhost:3000 1
http://static.slidesharecdn.com 1
http://webcache.googleusercontent.com 1
http://www.nofoon.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Now Presentation Transcript

  • 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
  • 4. Why HTML5? 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
  • 7. <!DOCTYPE html> 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
  • 46. The Canvas 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
  • 72. Questions? 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