HTML5 Overview


Published on

An HTML5 overview I gave at Refresh FLL which showed the new features & touched on how to use progressive enhancement and polyfills to leverage HTML5 today.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The use of “HTML5” as a catchall by media & marketing is confusing development professionals.
  • Cats are part of HTML5. :P
  • Babies are part of HTML5. :P
  • Staplers are part of HTML5. :P
  • You have to laugh at how the media and marketing groups will put a spin on something.
  • It’s a real issue because developers are getting confused about where HTML5 begins and ends. We need to better educate them.
  • Bruce Lawson took this image showing where certain things fit.
  • The use of “HTML5” as a catchall by media & marketing is confusing development professionals.
  • The use of “HTML5” as a catchall by media & marketing is confusing development professionals.
  • Common question which has no easy answer.
  • How developers can start using HTML5 now
  • Common question which has no easy answer.
  • HTML5 Overview

    1. 1. < HTML 5 >
    2. 2. <ul><li>Microsoft Community Mgr. </li></ul><ul><li>Editor of Script Junkie </li></ul><ul><li> writer </li></ul><ul><li>Director of Community for jQuery JS Library Project Team </li></ul><ul><li>JavaScript & HTML5 fan boy </li></ul>Rey Bango
    3. 3.
    4. 4. <ul><li>What is HTML5? </li></ul>
    5. 5. <ul><li>Newest version of HTML </li></ul><ul><li>Provides backwards compatibility </li></ul><ul><ul><li>Your HTML/XHTML continue to work </li></ul></ul><ul><li>Supported by all modern browsers </li></ul><ul><ul><li>IE9 Beta </li></ul></ul><ul><ul><li>Firefox </li></ul></ul><ul><ul><li>Chrome </li></ul></ul><ul><ul><li>Opera </li></ul></ul><ul><ul><li>Safari </li></ul></ul>HTML5
    6. 6. <ul><li>Specification of HTML published by W3C </li></ul><ul><li>W3C HTML5 Spec => 900+ pages </li></ul><ul><li>Work started on HTML5 in late 2003 </li></ul><ul><li>First Working Draft published January 2008 </li></ul><ul><li>WHATWG Last Call on October 28, 2009 </li></ul><ul><li>Expected Candidate Recommendation - 2012 </li></ul><ul><li>W3C Recommendation - 2022 or later * </li></ul><ul><li>http:// / </li></ul>HTML5
    7. 7. <ul><li>The Hype </li></ul>
    8. 8. Flickr: lambj
    9. 9. Flickr: mackro
    10. 10. Flickr: tvangoethem
    11. 13. <ul><li>HTML5 has become an umbrella term for everything including CSS3. It’s not! </li></ul><ul><li>It’s an upgrade to the HTML specification </li></ul><ul><li>It provides backward compatibility </li></ul><ul><li>Enhances some tags and brings new semantic tags </li></ul><ul><li>Programmatic components like Canvas & Drag-and-Drop </li></ul>HTML5’s Umbrella Effect
    12. 14. Flickr: boblet
    13. 15. <ul><li>What can be considered part of HTML5 then? </li></ul><ul><ul><li>Canvas – API for 2D drawing </li></ul></ul><ul><ul><li>Audio & Video – In-browser audio & video; no plugins </li></ul></ul><ul><ul><li>New semantic elements such as article, footer, header, nav & section </li></ul></ul><ul><ul><li>Sub-projects: </li></ul></ul><ul><ul><ul><li>Web Storage </li></ul></ul></ul><ul><ul><ul><li>Geolocation </li></ul></ul></ul><ul><ul><ul><li>Drag and Drop </li></ul></ul></ul><ul><li>How to tell what you can use? </li></ul><ul><ul><li> </li></ul></ul>So What’s in It?
    14. 16. <ul><li>What is NOT in HTML5 then? </li></ul><ul><ul><li>CSS Transforms – rotation, scaling, skewing of elements </li></ul></ul><ul><ul><li>CSS Transitions – transitions between CSS property changes </li></ul></ul><ul><ul><li>Border Radius – rounded corners </li></ul></ul><ul><ul><li>Box Shadow- shadow selected elements </li></ul></ul><ul><ul><li>@font-face – web fonts </li></ul></ul><ul><li>This is CSS3!! </li></ul>What’s Not?
    15. 17. <ul><li>… or cats, babies and staplers. </li></ul>
    16. 18. <ul><li>What are Developers Raving About? </li></ul>
    17. 19. <ul><li>The Cool Stuff: </li></ul><ul><ul><li>New semantic elements such as article, footer, header, nav & section </li></ul></ul><ul><ul><li>Canvas – API for 2D drawing </li></ul></ul><ul><ul><li>Video – In-browser video; no plugins </li></ul></ul><ul><ul><li>Web Storage – offline storage </li></ul></ul><ul><ul><li>Forms – form enhancements </li></ul></ul><ul><ul><li>Geolocation </li></ul></ul>HTML5 is Cool
    18. 20. Flickr: boblet
    19. 21. Flickr: lejoe
    20. 22. <ul><li>Reliable Features </li></ul>
    21. 23. doctype <!DOCTYPE HTML PUBLIC &quot;-//W3C//Dtd HTML 4.01 Transitional//EN&quot; &quot;;> HTML 4.01: HTML5 <!doctype html>
    22. 24. <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”> <div id=”header”> HTML Tags
    23. 25. <nav> <aside> <section> <article> <footer> <header> Semantic HTML Tags
    24. 26. <nav> <aside> <nav> <section> <article> <footer> <header> Semantic HTML Tags
    25. 27. <address> Written by:<br/> <a href=&quot;/people/show/23&quot;>Timothy Fisher</a>, <br/> Address: 25296 Hunter Lane, Flat Rock, MI 48134 <br/> Phone: 555-1212 </address> Address applies to the nearest Article or Body tag. More Semantic HTML Tags Address Prior to HTML5 the Address element applied to the document/body as a whole
    26. 28. <div class=&quot;car&quot; data-brand =&quot; ford &quot; data-model =&quot; mustang &quot;> <button class=&quot;fire&quot;> </div> More Semantic HTML Tags Data Attributes //Using DOM's getAttribute() property var brand=mydiv.getAttribute(&quot;data-brand&quot;) //returns &quot;ford&quot; mydiv.setAttribute(&quot;data-brand&quot;, &quot;mazda&quot;) //changes &quot;data-brand&quot; to &quot;mazda&quot; mydiv.removeAttribute(&quot;data-brand&quot;) //removes &quot;data-brand&quot; attribute entirely //Using JavaScript's dataset property var brand=mydiv.dataset.brand //returns &quot;ford&quot; mydiv.dataset.brand='mazda' //changes &quot;data-brand&quot; to &quot;mazda&quot; mydiv.dataset.brand=null //removes &quot;data-brand&quot; attribute Custom data attribs were always possible but prior to HTML5 they would cause validation errors.
    27. 29. <section> <hgroup> <h1>Mobile Phones</h1> <h2>Different Smart Phones</h2> </hgroup> <p>Some of the more popular mobile smart phones</p> <article> <h1>Apple iPhone</h1> <p>A popular smart phone from Apple.</p> </article> <article> <h1>Android-based Phones</h1> <p>A series of smart phones that use the Google Android operating system.</p> </article> </section> More Semantic HTML Tags Section, hgroup, Article These elements replace many of your divs
    28. 30. <figure> <img src=&quot;ninja_guy.jpg&quot; alt=&quot;A Standing Ninja Guy.&quot;> <figcaption>Cool Ninja Guy</figcaption> </figure> More Semantic HTML Tags Figure and Figure Caption The browser can position the caption for you Cool Ninja Guy
    29. 31. More Semantic HTML Tags Menu and Command <menu label=&quot;Hero List&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Spiderman&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Superman&quot;> <command type=&quot;radio&quot; radiogroup=&quot;herolist&quot; label=&quot;Batman&quot;> </menu> a simple radio button group
    30. 32. <menu type=&quot;toolbar&quot;> <li> <menu label=&quot;File&quot;> <button type=&quot;button&quot; onclick=&quot;file_new()&quot;>New...</button> <button type=&quot;button&quot; onclick=&quot;file_open()&quot;>Open...</button> <button type=&quot;button&quot; onclick=&quot;file_save()&quot;>Save...</button> <button type=&quot;button&quot;onclick=&quot;file_saveas()&quot;>Save As...</button> </menu> </li> <li> <menu label=&quot;Edit&quot;> <button type=&quot;button&quot; onclick=&quot;edit_copy()&quot;>Copy...</button> <button type=&quot;button&quot; onclick=&quot;edit_cut()&quot;>Cut...</button> <button type=&quot;button&quot; onclick=&quot;edit_paste()&quot;>Paste...</button> </menu> </li> </menu> More Semantic HTML Tags Menu (continued)
    31. 33. <video src =”ironman.mp4” /> Automatically show native controls <video src =”ironman.mp4” controls /> Video
    32. 34. Codec Support Credit:
    33. 35. <video controls/> <source src=”ironman.mp4” /> <source src=”ironman. webm ” /> </video> Video ironman.mp4 ironman.webm
    34. 36. <audio src=” teenage_dream.mp3”></audio> <audio controls> <source src=”teenage_dream.mp3”/> <source src=”teenage_dream.ogg”/> </audio> Audio Provides a download link for non-supporting browsers: <audio src=”teenage_dream.ogg” autoplay controls loop> <a href=” teenage_dream.ogg”>download</a> </audio>
    35. 37. <canvas id=”square”> fallback content </canvas> <script> // create basic filled square canvas = canvas.getElementById(‘square’); context = canvas.getContext(‘2d’); context. fillStyle = “#000000”; context. fillRect (0, 0, 100, 100); </script> Canvas A complete drawing and animation API
    36. 38. <script> document.getElementById(‘notepad’).contentEditable = true; </script> Editable Content Turn any element into an editable area
    37. 39. Cross-Domain Messaging // sender var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', '' ); // recipient addEvent(window, &quot;message&quot;, function(e){    document.getElementById(&quot;rcvd_message&quot;).innerHTML = e.origin + &quot; said: &quot; +; });
    38. 40. sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key); Session Storage Save key/value pairs to a client-side data store implemented by browser Session store expires when the browser is closed
    39. 41. <ul><li>Some Caution Plz </li></ul>
    40. 42. Output < progress id=&quot;p&quot; max=100><span>0</span>%</ progress > Progress < output name=&quot;result&quot;></ output > Progress
    41. 43. Storage space usage: <meter value=6 max=8> 6 blocks used (out of 8 total) </meter> Voter turnout: <meter value=0.75> <img alt=&quot;75%&quot; src=&quot;graph75.png&quot;> </meter> Tickets sold: <meter min=&quot;0&quot; max=&quot;100&quot; value=&quot;75&quot;></meter> Meter Meter
    42. 44. <div draggable=”true”></div> // set data to access at target addEvent(div, “dragstart”, function(e) { e.dataTransfer.setData(‘foo’, ‘bar’); }, true); // access data from dragged object addEvent(div, ‘dragend’, function(e) { e.dataTransfer.getData(‘foo’); }, true); Drag and Drop HTML5 drag and drop should work across frames, and across browser windows . HTML5 drag and drop also allows users to drag and drop data to and from non-web applications , i.e. out of the browser or into the browser
    43. 45. <input type=”email” /> Input Types tel search email url datetime date range color Unsupported browsers default to text type Future browsers will display appropriate UI controls
    44. 46. <input type=&quot;range&quot; min=&quot;-100&quot; max=&quot;100&quot; value=&quot;0&quot; step=&quot;10&quot; name=&quot;power&quot; list=&quot;powers&quot;> <datalist id=&quot;powers&quot;> <option value=&quot;0&quot;> <option value=&quot;-30&quot;> <option value=&quot;30&quot;> <option value=&quot;+50&quot;> </datalist> Input Types Input Type Range + Datalist
    45. 47. <input type=file multiple> Input Types File Upload Multiple
    46. 48. Input Types Datalist Used to provide Auto Complete feature <input list=&quot;movies&quot; /> <datalist id=&quot;movies&quot;> <option>The Dark Knight</option> <option>Spiderman 3</option> <option>X-Men</option> </datalist>
    47. 49. <input name=&quot;custname&quot; required> <script> form.checkValidity(); </script> Form Validation By adding ‘required’ attribute you can take advantage of validity checking without custom JavaScript.
    48. 50. <html manifest=”cache.manifest”> Offline Applications Offline Applications using manifest Run a web application in offline mode, disconnected from Internet provide a cache.manifest file: Of course your app will still have failures if it tries to pull live data from the Internet uses MIME type: text/cache-manifest CACHE MANIFEST clock.html clock.css clock.js
    49. 51. window.history.back(); window.history.forward(); window.history.go(2); window.history.length; window.history.pushState(data, title, url); window.history.replaceState(data, title, url); JavaScript API for moving through browser history History API
    50. 52. navigator. geolocation . getCurrentPosition( function(position) { // display position } ); Geolocation Build location-aware apps without access to native mobile apis
    51. 53. Local Storage <ul><li>A set of APIs to manipulate client-side databases using SQL </li></ul><ul><li>Web SQL </li></ul><ul><ul><ul><li>Apple </li></ul></ul></ul><ul><ul><ul><li>Google </li></ul></ul></ul><ul><ul><ul><li>Opera </li></ul></ul></ul><ul><li>IndexedDB has replaced Web SQL </li></ul>
    52. 54. Web Sockets <ul><li>Opens a persistent connection to the server </li></ul><ul><li>Can be used for server to browser push </li></ul><ul><li>Restricted communication to origin server </li></ul><ul><li>Eliminates need to poll for data </li></ul>var ws = new WebSocket(&quot;ws://;); ws.onopen = function() { ws.send(&quot;This is a message from the browser to the server&quot;); }; ws.onmessage = function(event) { alert(&quot;The server sent a message: &quot; +; };
    53. 55. - Provide “threads” for JavaScript execution - Don’t have access to DOM or page. - Have to communicate through postMessage API Web Workers
    54. 56. <ul><li>W3C says we shouldn’t </li></ul><ul><li>use HTML5!!!! </li></ul>
    55. 57. <ul><li>Create a solid cross-browser base to start from & use HTML5 to enhance sites </li></ul><ul><li>Fallbacks can be used to degrade gracefully when necessary </li></ul><ul><li><video controls width=&quot;500&quot;> </li></ul><ul><ul><li><source src=&quot;video.ogg&quot; /> </li></ul></ul><ul><ul><li><source src=&quot;video.mp4&quot; /> </li></ul></ul><ul><ul><li><embed src=&quot;; type=&quot;application/x-shockwave-flash&quot; </li></ul></ul><ul><ul><li>width=&quot;1024&quot; height=&quot;798&quot; allowscriptaccess=&quot;always&quot; </li></ul></ul><ul><ul><li>allowfullscreen=&quot;true&quot;></embed> </li></ul></ul><ul><li></video> </li></ul>If HTML5 video is not supported, flash video will load Progressive Enhancement
    56. 58. <ul><ul><li>Support for older browsers </li></ul></ul><ul><ul><li>Use polyfills to fallback gracefully or mimic functionality </li></ul></ul><ul><ul><ul><li>HTML5Shim </li></ul></ul></ul><ul><ul><ul><li>Modernizr </li></ul></ul></ul><ul><ul><ul><li>Explorercanvas </li></ul></ul></ul><ul><ul><ul><li>Socket.IO </li></ul></ul></ul><ul><ul><li>Big List of Polyfills: </li></ul></ul>Polyfills
    57. 59. <ul><li>I’m asking you, the developer, to look at the technology that’s available to you and chose the solution that suits your problem best. If that happens to be an HTML5 technology, or a non-HTML5 API, or even Flash, you’ve chosen the individual specific technology, not a f**king buzzword. </li></ul><ul><li>Remy Sharp, 10/7/10 </li></ul><ul><li> </li></ul>
    58. 60. Resources
    59. 61. Introducing HTML5 (Bruce Lawson & Remy Sharp) HTML5: Up and Running (Mark Pilgrim) Books
    60. 62. Timothy Fisher Credit
    61. 63. @reybango [email_address]