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

HTML5, the Open Web, and what it means for you - Tech4Africa

HTML5, the Open Web, and what it means for you - Tech4Africa

00809b14f856d33156329188a5b6ecdc?s=128

Robert Nyman

October 28, 2011
Tweet

More Decks by Robert Nyman

Other Decks in Technology

Transcript

  1. HTML5 The Open Web, and what it means for you

  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. None
  8. None
  9. What is HTML5?

  10. Semantics APIs

  11. None
  12. must die!!! Not really

  13. HTML5 semantics

  14. None
  15. <!DOCTYPE html>

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

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

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

  20. HTML5 Doctor

  21. HTML5 Forms

  22. None
  23. None
  24. http://www.quirksmode.org/html5/inputs.html http://www.quirksmode.org/html5/inputs_mobile.html http://wufoo.com/html5/

  25. Video

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

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

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

  30. None
  31. None
  32. None
  33. None
  34. None
  35. Canvas

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

  37. 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);
  38. None
  39. None
  40. None
  41. pdf.js

  42. History API

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

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

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

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

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

    // Close the connection ws.close();
  49. 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"); };
  50. web-socket-js Socket.IO

  51. Offline Web Applications

  52. if (window.addEventListener) { /* Works well in Firefox and Opera

    with the Work Offline option in the File menu. Pulling the ethernet cable doesn't seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false); } else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline; }
  53. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); },

    1000);
  54. <!DOCTYPE html> <html manifest="offline.appcache"> <head> ...

  55. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css

    offline.css NETWORK: /live-updates
  56. WebGL

  57. None
  58. None
  59. None
  60. None
  61. squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [ 1.0, 1.0,

    0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4; }
  62. var teapotPositions = new Float32Array([ 17.83489990234375, 0, 30.573999404907227, 16.452699661254883, -7.000179767608643,

    30.573999404907227, 16.223100662231445, -6.902520179748535, 31.51460075378418, 17.586000442504883, 0, 31.51460075378418, 16.48940086364746, -7.015810012817383, 31.828100204467773, 17.87470054626465, 0, 31.828100204467773, 17.031099319458008, -7.246280193328857, 31.51460075378418, 18.46190071105957, 0, 31.51460075378418, 17.62779998779297, -7.500199794769287, 30.573999404907227, 19.108800888061523, 0, 30.573999404907227, 12.662699699401855, -12.662699699401855, 30.573999404907227, 12.486100196838379, -12.486100196838379, 31.51460075378418, 12.690999984741211, -12.690999984741211, 31.828100204467773, 13.10789966583252, -13.10789966583252, 31.51460075378418, 13.56719970703125, -13.56719970703125, 30.573999404907227, 7.000179767608643, -16.452699661254883, 30.573999404907227, 6.902520179748535, -16.223100662231445, 31.51460075378418, 7.015810012817383, -16.48940086364746, 31.828100204467773, 7.246280193328857, -17.031099319458008, 31.51460075378418, 7.500199794769287, -17.62779998779297, 30.573999404907227, 0, -17.83489990234375, 30.573999404907227, 0, -17.586000442504883, 31.51460075378418, 0, -17.87470054626465, 31.828100204467773, 0, -18.46190071105957, 31.51460075378418, 0, -19.108800888061523, 30.573999404907227, 0, -17.83489990234375, 30.573999404907227, -7.483870029449463, -16.452699661254883, 30.573999404907227, -7.106579780578613, -16.223100662231445, 31.51460075378418, 0, -17.586000442504883, 31.51460075378418, -7.07627010345459, -16.48940086364746, 31.828100204467773, 0, -17.87470054626465, 31.828100204467773, -7.25383996963501, -17.031099319458008, 31.51460075378418, 0, -18.46190071105957, 31.51460075378418, -7.500199794769287, -17.62779998779297, 30.573999404907227, 0, -19.108800888061523, 30.573999404907227, -13.092700004577637, -12.662699699401855, 30.573999404907227, -12.667499542236328, -12.486100196838379, 31.51460075378418, -12.744799613952637, -12.690999984741211, 31.828100204467773, -13.11460018157959, -13.10789966583252, 31.51460075378418, -13.56719970703125, -13.56719970703125, 30.573999404907227, -16.61389923095703, -7.000179767608643, 30.573999404907227, -16.291099548339844, -6.902520179748535, 31.51460075378418, -16.50950050354004, -7.015810012817383, 31.828100204467773, -17.033599853515625, -7.246280193328857, 31.51460075378418, -17.62779998779297, -7.500199794769287, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227, -17.586000442504883, 0, 31.51460075378418, -17.87470054626465, 0, 31.828100204467773, -18.46190071105957, 0, 31.51460075378418, -19.108800888061523, 0, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227, -16.452699661254883, 7.000179767608643,
  63. None
  64. Questions

  65. Is it ready? Will HTML5 be around?

  66. Is it ready?

  67. Is it ready?

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

  69. Will HTML5 be around?

  70. None
  71. None
  72. None
  73. HTML5 - The beauty of the Open Web

  74. We are drowning in information, while starving for wisdom -

    E.O. Wilson
  75. None
  76. Robert Nyman robnyman@mozilla.com Twitter: @robertnyman robertnyman.com/speaking/ robertnyman.com/html5/ robertnyman.com/css3/