[In Control 2010] HTML5

3,746 views

Published on

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,746
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

[In Control 2010] HTML5

  1. 1. HTML5 AIGA IN CONTROL ORLANDO 2010 CHRISTOPHER SCHMITT h t t p : / / t w i t t e r. c o m / @ t e l e j e c t
  2. 2. WHO AM I? • Someone who doesn’t like to get bored. • (Nerd.) • Web designer since ’93 • Author of ~10 books including CSS Cookbook, 3rd Edition* • Member of the Web Standards Project • Adobe TF Co-Lead & EduTF member • Co-author of InterACT with Web Standards (Peachpit, due Spring)
  3. 3. WHO ARE YOU?
  4. 4. CASTING OUT XHTML
  5. 5. THINGS ARE GOOD BETWEEN US, XHTML, RIGHT? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF.
  6. 6. “THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML, INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE DIDN'T WORK.” -SIR TIM BERNERS-LEE
  7. 7. 5 % http://dev.opera.com/articles/view/mama-markup-validation-report/
  8. 8. BLUEPRINTS VS REALITY
  9. 9. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.” -FRANK LLOYD WRIGHT
  10. 10. RELEARNING SYNTAX • Attribute quotes “not really” required • UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing. • No more need to do self-closing tags like <IMG /> or <BR /> • Also, no more minimalization. So, this is okay: <dl compact> • Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby!
  11. 11. STARTING OUT BASIC HTML5 LAYOUT
  12. 12. DOCTYPE
  13. 13. HTML 4.01 Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> XHTML 1.0 Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. 14. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>DOWNTOWN ORLANDO RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html>
  15. 15. EXERCISE • Goto HTML validator at http://validator.w3.org/#validate_by_input • Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p>
  16. 16. BUILDING WITH HTML5
  17. 17. DIV ID=”header” DIV ID=”nav” DIV ID=”section” DIV ID=”sidecolumn” DIV ID=”article” DIV ID=”footer”
  18. 18. <HEADER> <NAV> <SECTION> <ASIDE> <ARTICLE> <FOOTER>
  19. 19. <body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul> </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section> <aside> <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer> </body>
  20. 20. <script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> http://ejohn.org/blog/html5-shiv/
  21. 21. BASIC CSS FORMATTING
  22. 22. HEADER NAV SECTION ASIDE ARTICLE FOOTER
  23. 23. LESSONS LEARNED • New HTML5 elements are treated as inline elements. • Need to use CSS declaration “display:block” • IE6and IE7 need to be nudged to recognize HTML elements in order to have CSS be applied • document.createElement(‘html5element’); • Dean Edwards IE7 script doesn’t help • There isn’t a jQuery plugin to make it “easier”
  24. 24. LESSONS LEARNED • For Firefox 2 and Camino (Gecko 1.9) • HTML5 pages need to be served as XHTML • Content-Type: application/xhtml+xml; • ...Let the irony set for a bit.
  25. 25. <?php if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox/2.0') > -1) { header("Content-Type: application/xhtml+xml; charset=UTF-8"); echo'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">'; } else { echo '<!DOCTYPE html><html>'; }?> http://tr.im/h0Rj
  26. 26. NEW HTML5 ELEMENTS • article • embed • nest • aside • event-source • output • audio • figure • progress • canvas • footer • source • command • header • time • datagrid • mark • video • datalist • meter • datatemplate • nav
  27. 27. HTML5 AUDIO
  28. 28. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> </head> <body> <h1>Video Example</h1> <audio src="html5test.ogg" autoplay controls> <a href="html5test.ogg">Download audio</a> </audio> </body> </html>
  29. 29. HTML5 AUDIO • AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS • If you don’t have CONTROL, player becomes transparent
  30. 30. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10+ Ogg Vorbis Y Y MP3 Y Y WAV Y Y Y
  31. 31. SUPPORTING AUDIO <audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT code here --> </audio>
  32. 32. SUPPORTING AUDIO • Ifyou do insert audio, setting the file to autoplay is not recommended, as it interferes with the experience for web surfers using screen readers. • Don’t use WAV file type. • Better to ship a compact disc to the user instead.
  33. 33. HTML5 VIDEO
  34. 34. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> </head> <body> <h1>Video Example</h1> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ 4GuKSqAg5xI&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></ object> </body> </html>
  35. 35. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> </head> <body> <h1>Video Example</h1> <video src="html5test.ogg" width="320" height="240" controls poster="html5testvideoposter.jpg"> <a href="html5testvideo.ogg">Download movie</a> </video> </body> </html>
  36. 36. VIDEO DEMO • Play the demo.
  37. 37. HTML5 VIDEO • WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself. • Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value. • Text can be included within VIDEO element to allow user to download video if their browser doesn’t support. • If you want to give users control, use CONTROL attribute.
  38. 38. HTML5 VIDEO • Videocan start automatically if using the AUTOPLAY=”1” attribute and value. • Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1. • Codecs support...
  39. 39. HTML5 VIDEO “It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” - http://www.whatwg.org/specs/web-apps/current-work/#video- and-audio-codecs-for-video-elements
  40. 40. CODECS • Ogg (or “Vorbis”) • No need to worry about patents • H.264 • Created by the MPEG group • If you have blu-ray disc player, you are using it
  41. 41. CODEC SUPPORT FF3.5+ S Ch IE Ogg Y Y H.264 Y Y
  42. 42. LESSONS LEARNED • Used VLC (http://www.videolan.org/vlc/) to encode common movie files types to OGG • People really, really, really want this to work, • However, feel like to support every file format will take a lot of time • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/
  43. 43. HTML5 & MICROFORMATS
  44. 44. REPLACING ABBR • <ABBR> element is used by screenreaders to expand abbreviations like “lbs” or “NCAAP” • However unintended consequences occurred trying to workaround browser bugs for other HTML elements • What happens when a screenreaders text like this: • “Let’sgo to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
  45. 45. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http:// www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div>
  46. 46. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http:// www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart" datetime="2007-10-05">October 5</time>- <time class="dtend" datetime="2007-10-20">19</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div> http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
  47. 47. POSTSCRIPT • <ABBR> issue has ben resolved with new pattern (dropping <ABBR> altogether): http://microformats.org/wiki/value-class-pattern • <p>Let’sgo to <span class="geo">51° 30' 48.45", -0° 8' 53.23" (<span class="value">51.513458;-0.14812</span>) </span></span> </p> • Thereby microformats doesn’t rely on any HTML5 elements, and • HTML5 spec isn’t looking to include microformats.
  48. 48. HTML5 CANVAS
  49. 49. <canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas>
  50. 50. <script type="text/javascript"><!-- window.addEventListener('load', function () { // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } // Now you are done! Let's draw a blue rectangle. context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100); }, false); // --></script>
  51. 51. // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath(); }, false);
  52. 52. // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath(); }, false);
  53. 53. http://flickr.com/photos/dunstan/3099313036/
  54. 54. http://www.filamentgroup.com/lab/ jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
  55. 55. http://www.filamentgroup.com/lab/ jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
  56. 56. <table > <caption>My Push Ups</caption> <thead> <tr> <td></td> <th>M</th> <th>Tu</th> <th>W</th> <th>Th</th> <th>F</th> <th>Sa</th> </tr> </thead> <tbody> <tr> <th>Chris</th> <td>56</td> <td>30</td> <td>50</td> <td>0</td> <td>45</td> <td>120</td> <td>0</td> </tr> </tbody> </table>
  57. 57. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); }); </script>
  58. 58. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http:// ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); }); </script>
  59. 59. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); }); </script>
  60. 60. http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx
  61. 61. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); }); </script>
  62. 62. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); }); </script>
  63. 63. table.accessHide { position: absolute; left: -999999px; } table { height: 100px; width: 250px;}
  64. 64. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.2/jquery.min.js"></script> <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></ script><![endif]--> <script type="text/javascript" src="visualize.jQuery.js"></script> <script type="text/javascript"> $(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); }); </script>
  65. 65. http://tr.im/Pjzy
  66. 66. QUICK INTERMISSION http://tr.im/Pjzy
  67. 67. HTML5 & LOCAL DATABASE, APP CACHE, GEOLOCATION, YOUR PHONE
  68. 68. http://www.youtube.com/watch?v=VmjxmOtNZCk&fmt=18
  69. 69. DATABASE, APP CACHE, GEOLOCATION LINKS • W3C HTML5 Database Storage Specification: http://tr.im/h13y • W3C Geolocation API Specification: http://tr.im/h12L • W3C HTML5 Offline Web Applications: http://tr.im/h12z • Safari Dev Connection on HTML5 Offline Application Cache: http://tr.im/h12f • WebKit Does HTML5 Client-Side Storage: http://tr.im/h140
  70. 70. “HTML 5 IS A KLUDGE.” - BRUCE LAWSON
  71. 71. http://ishtml5readyyet.com/
  72. 72. CAN HTML5 TELL US WHAT’S FOR DINNER?
  73. 73. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Downtown Orlando Restaurants</title> <!--[if IE8]> <script src="http://html5shiv.googlecode.com/svn/ trunk/html5.js"></script> <![endif]-->
  74. 74. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Downtown Orlando Restaurants</title> <!--[if IE]> <script src="http:// html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]-->
  75. 75. <header> ... </header> <nav> ... </nav> <section> ... </section> <footer> ... </footer>
  76. 76. <div id="" class="vcard"> <a class="url fn n" href="http://www.310lakeside.net"> <span class="given-name">Joanne</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">310 Lakeside</div> <div class="adr"> <div class="street-address">301 East Pine Street</div> <span class="locality">Orlando</span>, <span class="region">FL</span>, <span class="postal-code">32801</span> <span class="country-name">USA</span> </div> <div class="tel">(407) 447-9310</div> <div class="note distance"> </div> </div>
  77. 77. http://zappatic.net/safarimicroformats/
  78. 78. https://addons.mozilla.org/en-US/firefox/addon/4106
  79. 79. <a href=”http://h2vx.com/vcf/example.com/ page.html”>Download contacts</a>
  80. 80. GREAT, HTML5, BUT I’M HUNGRY NOW.
  81. 81. <script src="http://www.google.com/jsapi? key=yourkeygoeshere"></script> <script> google.load("maps", "3",{"other_params":"sensor=true"}); google.load("jquery", "1"); </script>
  82. 82. if (navigator && navigator.geolocation) { // HTML5 GeoLocation function getLocation(position) { updateMyLocation(position.coords.latitude,position.coords.lo ngitude); proccessDirections.sortLocations( position.coords.latitude, position.coords.longitude ); } navigator.geolocation.getCurrentPosition(getLocation);
  83. 83. } else { // Google AJAX API fallback GeoLocation if ((typeof google == 'object') && google.loader && google.loader.ClientLocation) { updateMyLocation(google.loader.ClientLocation.latitude,googl e.loader.ClientLocation.longitude); proccessDirections.sortLocations( google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude ); } } }
  84. 84. addresses = $(locations).map(function(){ var $adr = $(this).find(".adr"), latLng = null, lat, lng;
  85. 85. WHAT NEXT? • Check your current location against the addresses in your listing. • Withtwo points, we can determine the distance between where I am and where the food is located. • With a list of values, I can sort those addresses based on the fewest amount of travel (did I mention I was hungry now?) •I can then also mention HOW far those distances are, too.
  86. 86. http://2010.incontrolconference.com/eats/
  87. 87. BUT WAIT.... • There are a lot of restaurants in the list. • To go back and forth for geoencoding the addresses will take time. • Wouldn’t there be a faster way, if I had the time, to bypass that?
  88. 88. <div id="" class="vcard"> <a class="url fn n" href="http://www.tmh.com/"> <span class="given-name">John</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Tallahassee Memorial Hospital</div> <div class="adr" data-longitude="-84.260799" data-latitude="30.456100" data-lang="js"> <div class="street-address">1300 Miccosukee Road</div> <span class="locality">Tallahassee</span>, <span class="region">FL</span> <span class="country-name">USA</span> </div> <div class="tel">(850) 431-1155</div> </div> http://ejohn.org/blog/html-5-data-attributes/
  89. 89. if ((lat = $adr.attr("data-latitude")) && (lng = $adr.attr("data-longitude"))) { latLng = new google.maps.LatLng(lat,lng); }
  90. 90. BUT WAIT.... •I own an iPhone!
  91. 91. HTML5. IT’S WHAT FOR DINNER.
  92. 92. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/@teleject
  93. 93. Creative Commons Citations http://www.flickr.com/photos/gurock20/459901107/ http://www.flickr.com/photos/wili/214317898/ http://www.flickr.com/photos/gadl/421838292/ http://www.flickr.com/photos/tantek/1141384818/ http://dev.opera.com/articles/view/html-5-canvas-the-basics/

×