Advertisement
Advertisement

More Related Content

Advertisement
Advertisement

HTML 5: The Future of the Web

  1. HTML 5: The Future of the Web Tim Wright | csskarma.com | @csskarma Friday, July 23, 2010 1
  2. A Brief Introduction • University of Southern California Web Services • CSSKarma • Smashing Magazine & SitePoint csskarma.com/presentations/penn Friday, July 23, 2010 2
  3. The Goal. Friday, July 23, 2010 3
  4. What we’ll cover • What is it? • Living in the past • Debunking some rumors • New Attributes & Elements • Audio & Video APIs Friday, July 23, 2010 4
  5. What else we’ll cover • Forms • Accessibility • Geolocation • HTML 5 Storage & sockets • Browser & Device Support • Current Events Friday, July 23, 2010 5
  6. HTML 5 = Markup + JS APIs Friday, July 23, 2010 6
  7. Quick History 1991 - Informal HTML 1998 - CSS 2 1994 - HTML 2 2000 - XHTML 1 1996 - CSS 1 & JavaScript 2002 - Tableless designs 1997 - HTML 4 2005 - Ajax 2009 - HTML 5 Friday, July 23, 2010 7
  8. Is HTML 5 Ready? via ishtml5readyyet.com Friday, July 23, 2010 8
  9. The real scoop • Last call for a working draft: Oct. 2009 • Candidate recommendation: 2012 • finished spec • Proposed recommendation: 2022 • 2 browsers with full implementation via adactio.com Friday, July 23, 2010 9
  10. Browser-based usage Friday, July 23, 2010 10
  11. Let’s dig around... Friday, July 23, 2010 11
  12. What has changed ...everything is lighter Friday, July 23, 2010 12
  13. <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> • Why not html5? • Technically optional Friday, July 23, 2010 13
  14. <meta charset=”utf-8”> HTML 4.01 <meta http-equiv=”Content-Type” content=”text/ html; charset=utf-8”> XHTML 1.0 <meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> via adactio.com Friday, July 23, 2010 14
  15. Script & Style Before: <script type=”text/javascript”></script> <style type=”text/css”></style> After: <script></script> <style></style> Friday, July 23, 2010 15
  16. Link relations • <link rel=”icon” • <link rel=”prefetch” • <link rel=”pingback” • <a rel=”external” • <a rel=”tag” Friday, July 23, 2010 16
  17. Notable changes Block-level anchors Presentational elements like <i>, <b>, <cite> & <small> redefined Friday, July 23, 2010 17
  18. What was removed Annoying elements: <font>, <big> (but not small), <center>, <frame>, <acronym> Weird attributes we don’t use: bgcolor, axis, border, summary via adactio.com Friday, July 23, 2010 18
  19. Markup freedom <li class="foo">Hello world</li> <img src="barf.jpg" alt="picture of vomit" /> <li class=foo>Hello world <img src=barf.jpg alt=picture of vomit> <LI CLASS="foo">Hello world</LI> <IMG SRC="barf.jpg" ALT="picture of vomit"> <li class=foo>Hello world</li> <img src=foo alt=bar> via adactio.com Friday, July 23, 2010 19
  20. New...building robust applications Attributes Friday, July 23, 2010 20
  21. Editing content <div contentEditable=”true”></div> Friday, July 23, 2010 21
  22. Spellcheck <div spellcheck=”true”></div> Friday, July 23, 2010 22
  23. Hiding elements <div hidden></div> Friday, July 23, 2010 23
  24. Easy drag and drop <div draggable=”true”></div> document.addEventListener('dragstart', function(event) { alert(‘drag started’); }, false); Friday, July 23, 2010 24
  25. Microdata <section class="vcard" id="hCard-Ricardo- Montalban" itemscope="itemscope" itemtype="http://www.data-vocabulary.org/ Person"> <p itemprop=”name” class=”fn”>Ricardo Montalban</p> <p itemprop=”nickname” class=”nickname”>Ricky</ p> </section> Friday, July 23, 2010 25
  26. Embedding data-* <section data-latitude=”38.254” data- longitude=”85.72”> [ content ] </section> Data for the application to consume Friday, July 23, 2010 26
  27. Structural Elements ...some new semantics Friday, July 23, 2010 27
  28. Sectioning content <header <footer <nav <aside <section <article <hgroup Friday, July 23, 2010 28
  29. <header> & <footer> <header> <h1>Awesome web site</h1> </header> <footer> <p>some site information</p> </footer> Friday, July 23, 2010 29
  30. <nav> <nav> <ul> <li><a href=”/”>Home</li> <li><a href=”/about”>About</li> <li><a href=”/contact”>Contact</li> </ul> </nav> Friday, July 23, 2010 30
  31. <aside> <aside> <p>This is content related to the main content, maybe related links of a pull-quote?</p> </aside> Friday, July 23, 2010 31
  32. <section> vs. <div> <section> <p>Contributes to the overall outline of the page & related content</p> </section> Friday, July 23, 2010 32
  33. <article> & <hgroup> <article> <hgroup> <h1>How to skin a cat</h1> <h2>By Jimmy Rollins</h2> </hgroup> <h3>Buy a knife</h3> <p>The article here</p> </article> Friday, July 23, 2010 33
  34. Text-level semantics <figure <figcaption <mark <time <progress Friday, July 23, 2010 34
  35. <figure> & <figcaption> <figure> <img src=”fungi.png” alt=”shower mold”> <figcaption> <p>This is mold in my shower, it’s gross</p> </figcaption> </figure> Friday, July 23, 2010 35
  36. <time> & <mark> <time datetime=”13:15”>1:15pm EDT</time> This is a <mark>search term</mark> highlighter Friday, July 23, 2010 36
  37. <progress> Your file is <progress>50%</progress> uploaded Friday, July 23, 2010 37
  38. Audio & Video APIs ...filetype matters, apparently Friday, July 23, 2010 38
  39. Audio <audio src=”hey_jude.ogg”> Friday, July 23, 2010 39
  40. Audio <audio src=”hey_jude.ogg” controls autoplay preload> Friday, July 23, 2010 40
  41. Audio <audio controls autoplay loop preload=”off”> <src=”hey_jude.mp3”> /* webkit */ <src=”hey_jude.ogg”> /* gecko */ Your browser stinks /* jerks */ </audio> http://media.io/ Friday, July 23, 2010 41
  42. Video <video controls autoplay poster=”titlescreen.jpg”> <src=”monkey.ogv”> <src=”monkey.mp4”> Your browser still stinks </video> Friday, July 23, 2010 42
  43. Fallbacks <video controls autoplay> <src=”monkey.ogv”> <src=”monkey.mp4”> [ flash fallback ] [ text fallback ] </video> Mobile solution? Friday, July 23, 2010 43
  44. A/V Controls (play) <p id=”play”>Play</p> Friday, July 23, 2010 44
  45. A/V Controls (play) var video = $('#video'); var play = $('#play'); play.click(function(){ if (video.paused == false) { video.pause(); $(this).text(‘play’); } else { video.play(); $(this).text(‘pause’); } }); Friday, July 23, 2010 45
  46. A/V Controls Let’s see one: http://www.broken-links.com/tests/video/ Friday, July 23, 2010 46
  47. HTML...inputs & validation 5 Forms Friday, July 23, 2010 47
  48. Labeling attributes <input type=”email”> <input type=”url” placeholder=”http://”> <input type=”number” step=”2” min=”10” max=”50”> <input type=”color”> <input type=”range”> <input type=”date”> <input type=”search” autocomplete=”off”> Friday, July 23, 2010 48
  49. More attr & validation <input type=”search”> <input type=”text” autofocus required> document.getElementById(“q”).focus(); Friday, July 23, 2010 49
  50. Custom inputs <input type=”zip” pattern=”regex pattern” required name=”zip”> Friday, July 23, 2010 50
  51. Let’s see one http://www.csskarma.com/lab/demomachine/ Friday, July 23, 2010 51
  52. Degradation & Benefits Degrades to a text box Increased usability & conversion rates Easier styling with attribute selectors Easy validation & less spam Friday, July 23, 2010 52
  53. Accessibility Built-in vs. Bolt-on Friday, July 23, 2010 53
  54. Built-in accessibility header, footer, nav, article, aside Friday, July 23, 2010 54
  55. Bolt-on accessibility <header role=”banner”> <ul role=”menu”> <li role=”menuitem”> <article role=”main”> <aside role=”complementary”> <footer role=”contentinfo”> Friday, July 23, 2010 55
  56. Bolt-on accessibility <section aria-atomic=”true” aria-live=”polite”> <input aria-required=”true”> *HTML5 valid* http://reader.usc.edu/dev/ Friday, July 23, 2010 56
  57. I wanna use...menow! it too Friday, July 23, 2010 57
  58. Class names <div class=”header”></div> <div class=”article”></div> <div class=”aside”></div> <div class=”footer”></div> Friday, July 23, 2010 58
  59. Styles article, aside, details, figure, footer, header, hgroup, nav, section { display: block; } Friday, July 23, 2010 59
  60. CreateElement <script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘section’); document.createElement(‘article’); document.createElement(‘footer’); </script> Friday, July 23, 2010 60
  61. HTML Shiv by: Remy Sharp <!--[if IE]> <script src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"> </script> <![endif]--> http://html5shiv.googlecode.com/svn/trunk/html5.js Friday, July 23, 2010 61
  62. Server-side JavaScript • Jaxer • Creating element in the DOM Friday, July 23, 2010 62
  63. Moving forward Options for moving forward • doctype & aria roles • doctype -> class names -> aria roles • doctype -> new elements -> aria roles • Client-side JS • Server-side JS Friday, July 23, 2010 63
  64. The New kids will love it ...the Web Friday, July 23, 2010 64
  65. Old <head> <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="html 5 demo" /> <meta name="keywords" content="example, web site, html5" /> <title>Title</title> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link href="website.css" rel="stylesheet" type="text/css" media="all" /> <script type=”text/javascript” src=”website.js”></script> </head> Friday, July 23, 2010 65
  66. New <head> <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <meta name=”description” content=”html 5 demo”> <meta name=”keywords” content=”example, website, html5”> <title>Title</title> <link rel=”icon” href=”favicon.ico”> <link rel=”preftech” href=”nextpage.html”> <link href=”website.css” rel=”stylesheet” media=”all”> <script src=”website.js”></script> </head> Friday, July 23, 2010 66
  67. Old <body> <body> <div id=”header”><h1><a href=”/”>Site Title</a></ h1></div> <div id=”nav”> <ul> <li><a href=”/about”>About</a></li> </ul> </div> <div id=”content”></div> <div id=”sidebar”></div> <div id=”footer”></div> </body> Friday, July 23, 2010 67
  68. New <body> <body> <header role=”banner”><h1><a href=”/”>Site Title</a></ h1></header> <nav> <ul role=”menu”> <li role=”menuitem”><a href=”#”>About</a></li> </ul> </nav> <article role=”main”></article> <aside role=”complimentary”></aside> <footer role=”contentinfo”></footer> </body> Friday, July 23, 2010 68
  69. Old <form> <form action=”” method=”post”> <label for=”name”>Name</label> <input type=”text” name=”name” id=”name”/> <label for=”email”>E-mail</label> <input type=”text” name=”email” id=”email”/> <label for=”url”>URL</label> <input type=”text” name=”url” id=”url”/> <button type=”submit”>Submit</button> </form> Friday, July 23, 2010 69
  70. New <form> <form action=”” method=”post”> <label for=”name”>Name</label> <input type=”text” name=”name” id=”name” required autofocus> <label for=”email”>E-mail</label> <input type=”email” name=”email” id=”email” required> <label for=”url”>URL</label> <input type=”url” name=”url” id=”url” placeholder=”http://” required> <button type=”submit”>Submit</button> </form> Friday, July 23, 2010 70
  71. Old <video> (?) <object width="640" height="385"><param name="movie" value="video.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></ param><embed src="video.swf" type="application/x- shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></ embed></object> Friday, July 23, 2010 71
  72. New <video> <video src=”video.mp4” controls preload> Friday, July 23, 2010 72
  73. What does clean mean? • Reduced page weight • Speed & Responsiveness • Higher conversions • Better usability • Happy users • Device development Friday, July 23, 2010 73
  74. New JavaScript ...and Ninja-like qualities Friday, July 23, 2010 74
  75. New JavaScript Finding elements by class (DOM API) document.getElementbyClassname(“skipmenu”); Finding elements by CSS syntax (selectors API) document.querySelectorAll(“#nav ul > li”); document.querySelector(“:hover”); <li class=foo>Hello world</li> <img src=foo alt=bar> Friday, July 23, 2010 75
  76. classList API var element = $(‘div’); element.classList.add(‘class-name’); element.classList.remove(‘class-name’); element.classList.toggle(‘class-name’); via davidwalsh.name Friday, July 23, 2010 76
  77. Geolocationbut still way cool Not actually HTML5, Friday, July 23, 2010 77
  78. Data Sources • GPS • Cellular Network • IP Friday, July 23, 2010 78
  79. Information • Latitude • Longitude • Accuracy • Altitude • Altitude Accuracy • Heading • Timestamp • Speed Friday, July 23, 2010 79
  80. Privacy Friday, July 23, 2010 80
  81. Getting the data function youAreHere(position){ var youAreHere = { latitude : position.coords.latitude, longitude : position.coords.longitude, accuracy : position.coords.accuracy, // meters speed : position.coords.speed, // mps altitude : position.coords.altitude, altitudeAccuracy : position.coords.altitudeAccuracy, heading : position.coords.heading, // degrees timestamp : position.timestamp }; } Friday, July 23, 2010 81
  82. Error Handling function geoErrors(error){ if(error.code === 1){ $('ul').html('<li>Data not shared by user</li>'); } else if(error.code === 2){ $('ul').html('<li>Data not available for some reason</li>'); } else if(error.code === 3){ $('ul').html('<li>Connection timed out</li>'); } else if(error.code === 0){ $('ul').html('<li>Something else happened</li>'); } } Friday, July 23, 2010 82
  83. Usage if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(youAreHere, geoErrors, { enableHighAccuracy: true, // increases load time maximumAge:60000, // 10 mins timeout:0 // check the cache first }); } Friday, July 23, 2010 83
  84. Let’s see one http://www.csskarma.com/lab/html5/geo/ Friday, July 23, 2010 84
  85. Great examples Friday, July 23, 2010 85
  86. Storage & Sockets ..set it and forget it Friday, July 23, 2010 86
  87. Local Storage • Persistent to the browser • Super cookies Friday, July 23, 2010 87
  88. Local Storage (setting) var edit = document.getElementById('edit'); ! $(edit).blur(function() { ! localStorage.setItem('todoData', this.innerHTML); }); Friday, July 23, 2010 88
  89. Local Storage (getting) if ( localStorage.getItem('todoData') ) { edit.innerHTML = localStorage.getItem ('todoData'); } Friday, July 23, 2010 89
  90. Local Storage (forgetting) <p><a href=”#clear” id=”clear”>Clear storage</a></p> $('#clear').click(function(){ ! ! localStorage.clear(); ! ! location.reload(true); ! ! return false; ! }); Friday, July 23, 2010 90
  91. Local Storage (demo) http://www.csskarma.com/lab/html5/localstorage/ Using: contentEditable=”true” localStorage.setItem() localStorage.getItem() localStorage.clear() Friday, July 23, 2010 91
  92. Web Sockets Bi-directional, full-duplex communications channels, over a single TCP socket, designed to be implemented in Web browsers and Web servers. http://dev.w3.org/html5/websockets/ Friday, July 23, 2010 92
  93. Support Friday, July 23, 2010 93
  94. Active browsers Friday, July 23, 2010 94
  95. Browser support CanIUse.com HTML5test.com Friday, July 23, 2010 95
  96. Modern mobile devices Friday, July 23, 2010 96
  97. Effects on mobile Friday, July 23, 2010 97
  98. Current Events Friday, July 23, 2010 98
  99. WebM video format High-quality open video format YouTube for compression over ogg (.ogv) IE9, Chrome, Firefox & Opera support WebM converter -> mirovideoconverter.com Friday, July 23, 2010 99
  100. New <track> Element Friday, July 23, 2010 100
  101. Resources Friday, July 23, 2010 101
  102. Resources • webmproject.org • HTML5Doctor.com • HTML5gallery.com • data-vocabulary.org • WHATWG.org • HTML5 for Designers Friday, July 23, 2010 102
  103. What we covered • What is it? • Living in the past • Debunking some rumors • New Attributes & Elements • Audio & Video APIs Friday, July 23, 2010 103
  104. What we covered (cont.) • Forms • Accessibility • Geolocation • HTML 5 Storage & sockets • Browser & Device Support • Current Events Friday, July 23, 2010 104
  105. Steal my work csskarma.com/presentations/penn/ Friday, July 23, 2010 105
  106. “Never memorize something you that can look up” - Albert Einstein Friday, July 23, 2010 106
  107. Questions? Friday, July 23, 2010 107
  108. Find me online e-mail: timwright@csskarma.com web: http://www.csskarma.com twitter: @csskarma </presentation> Friday, July 23, 2010 108
Advertisement