Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 - The 2012 of the Web - Adobe MAX

HTML5 - The 2012 of the Web - Adobe MAX

00809b14f856d33156329188a5b6ecdc?s=128

Robert Nyman

October 04, 2011
Tweet

More Decks by Robert Nyman

Other Decks in Technology

Transcript

  1. HTML5 - The 2012 of the Web

  2. None
  3. None
  4. None
  5. Mozilla is a global non-profit dedicated to putting you in

    control of your online experience and shaping the future of the Web for the public good
  6. @robertnyman

  7. 2012

  8. Mesoamerican Long Count calendar

  9. "The beginning of a new era"

  10. HTML4 * 1000 HTML 4000

  11. must die!!! Not really

  12. What is HTML5?

  13. Semantics APIs

  14. The makeup of the Open Web stack

  15. None
  16. HTML5 semantics

  17. None
  18. <!DOCTYPE html>

  19. None
  20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  21. <meta charset="utf-8">

  22. <header> <article> <section> <aside> <footer> <hgroup> <nav> <figure> <figcaption>

  23. HTML5 Doctor

  24. HTML5 Forms

  25. <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email">

    <input type="month"> <input type="number"> <input type="range"> <input type="search" results="5" autosave="saved-searches"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> New form types
  26. None
  27. <input type="text" autocomplete="off"> <input type="text" autofocus> <input type="submit" formaction="http://example.org/save" value="Save">

    <input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"> <input type="submit" formmethod="POST" value="Send as POST"> <input type="submit" formnovalidate value="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window"> New form attributes
  28. <input type="text" list="data-list"> <input type="range" max="95"> <input type="range" min="2"> <input

    type="file" multiple> <input type="text" readonly> <input type="text" required> <input type="text" pattern="[A-Z]*"> <input type="text" placeholder="E.g. Robocop"> <input type="text" spellcheck="true"> <input type="number" step="5">
  29. <input type="text" list="data-list"> <datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack

    Shephard"> <option value="James 'Sawyer' Ford"> <option value="John Locke"> <option value="Sayid Jarrah"> </datalist> New form elements
  30. <keygen></keygen> <meter min="0" max="10" value="7"></meter> <input type="range" id="range"> <output for="range"

    id="output"></output> <progress max="100" value="70">70%</progress>
  31. <input type="range" id="da-range"> <output id="da-range-output"></output> <script> (function () { var

    range = document.getElementById("da-range"), output = document.getElementById("da-range-output"); range.addEventListener("input", function () { output.value = this.value; }, false); })(); </script>
  32. None
  33. http://www.quirksmode.org/html5/inputs.html http://www.quirksmode.org/html5/inputs_mobile.html http://wufoo.com/html5/

  34. Web Storage

  35. None
  36. sessionStorage.setItem("Charming", "Anthony Weiner"); console.log(sessionStorage.getItem("Charming"));

  37. localStorage.setItem("Occupation", "Politician");

  38. var anthonyWeiner = { "Interest" : "Photography", "Social" : "Twitter"

    }; localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner)); console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
  39. IndexedDB Web SQL

  40. History API

  41. window.history.pushState(state, title, url);

  42. var url = "http://robertnyman.com", title = "My blog", state =

    { address : url }; window.history.pushState(state, title, url);
  43. None
  44. Web Sockets

  45. What came before WebSockets? Cross Frame Communication HTTP Polling LiveConnect

    Forever Frame AJAX HTTP Long-Polling and XHR Streaming
  46. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data");

    // Close the connection ws.close();
  47. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened

    ws.onopen = function () { console.log("Connection opened!"); }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred"); };
  48. web-socket-js Socket.IO

  49. None
  50. Video

  51. <video controls src="nasa.webm"></video>

  52. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p>

    </video>
  53. None
  54. <video src="http://vid.ly/4w2g7d?content=video" controls></video>

  55. None
  56. None
  57. None
  58. None
  59. None
  60. Canvas

  61. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>

  62. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00";

    context.fillRect(0, 0, 100, 100); context.clearRect(40, 40, 20, 20);
  63. None
  64. None
  65. pdf.js

  66. WebGL

  67. http://code.google.com/p/webglsamples/

  68. None
  69. None
  70. Questions

  71. Is it ready? Will HTML5 be around?

  72. Is it ready?

  73. Is it ready?

  74. Is it ready? http://caniuse.com/

  75. Will HTML5 be around?

  76. Will HTML5 be around?

  77. None
  78. None
  79. HTML5 - The beauty of the Open Web

  80. None
  81. Robert Nyman robnyman@mozilla.com Twitter: @robertnyman robertnyman.com/speaking/ robertnyman.com/html5/ robertnyman.com/css3/