• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,793
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
35
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5The Open Web, and what it means for you
  • 2. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • 3. @robertnyman
  • 4. What is HTML5?
  • 5. Semantics APIs
  • 6. must die!!! rea lly Not
  • 7. HTML5 semantics
  • 8. <!DOCTYPE html>
  • 9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • 10. <meta charset="utf-8">
  • 11. <header> <hgroup><article> <nav><section> <figure><aside> <figcaption><footer>
  • 12. HTML5 Doctor
  • 13. HTML5 Forms
  • 14. http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  • 15. Video
  • 16. <video controls src="nasa.webm"></video>
  • 17. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p></video>
  • 18. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  • 19. Canvas
  • 20. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  • 21. 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);
  • 22. pdf.js
  • 23. History API
  • 24. window.history.pushState(state, title, url);
  • 25. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  • 26. Web Sockets
  • 27. LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP PollingCross Frame Communication
  • 28. var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
  • 29. var ws = new WebSocket("ws://robertnyman.com/wsmagic");// When connection is openedws.onopen = function () { console.log("Connection opened!");};// When you receive a messagews.onmessage = function (evt) { console.log(evt.data);};// When you close the connectionws.onclose = function () { console.log("Connection closed");};// When an error occurredws.onerror = function () { console.log("An error occurred");};
  • 30. web-socket-js Socket.IO
  • 31. Offline Web Applications
  • 32. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesnt 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;}
  • 33. // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  • 34. <!DOCTYPE html><html manifest="offline.appcache"><head>...
  • 35. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  • 36. WebGL
  • 37. 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;}
  • 38. 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,
  • 39. Questions
  • 40. Is it ready? Will HTML5 be around?
  • 41. Is it ready?
  • 42. Is it ready?
  • 43. Is it ready?http://caniuse.com/
  • 44. Will HTML5 be around?
  • 45. HTML5 -The beauty of the Open Web
  • 46. We are drowning ininformation, while starvingfor wisdom - E.O. Wilson
  • 47. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/