HTML5The Open Web,  and what it means for you
Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for ...
@robertnyman
What is HTML5?
Semantics   APIs
must die!!!              rea lly        Not
HTML5 semantics
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<header>    <hgroup><article>   <nav><section>   <figure><aside>     <figcaption><footer>
HTML5 Doctor
HTML5 Forms
http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
Video
<video controls src="nasa.webm"></video>
<video controls>    <source src="nasa.mp4"></source>    <source src="nasa.webm"></source>    <p>Hello, older web browser</...
<video src="http://vid.ly/4w2g7d?content=video"controls></video>
Canvas
<canvas id="my-canvas" width="500" height="500">    I am canvas</canvas>
var canvas = document.getElementById("my-canvas"),    context = canvas.getContext("2d");context.fillStyle = "#f00";context...
pdf.js
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",title = "My blog",state = {    address : url};window.history.pushState(state, title, ur...
Web Sockets
LiveConnect    Forever Frame       HTTP Long-Polling and XHR Streaming      What came before WebSockets?      AJAX        ...
var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
var ws = new WebSocket("ws://robertnyman.com/wsmagic");// When connection is openedws.onopen = function () {    console.lo...
web-socket-js Socket.IO
Offline Web Applications
if (window.addEventListener) {    /*        Works well in Firefox and Opera with the        Work Offline option in the Fil...
// Poll the navigator.onLine propertysetInterval(function () {    console.log(navigator.onLine);}, 1000);
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
WebGL
squareVertexPositionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);vertices = [    ...
var teapotPositions = new Float32Array([ 17.83489990234375, 0, 30.573999404907227,16.452699661254883, -7.000179767608643, ...
Questions
Is it ready?               Will HTML5 be                  around?
Is it ready?
Is it ready?
Is it ready?http://caniuse.com/
Will HTML5 be around?
HTML5             -The beauty of the Open Web
We are drowning ininformation, while starvingfor wisdom                       - E.O. Wilson
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
HTML5, the open web, and what it means for you -Tech4Africa
Upcoming SlideShare
Loading in...5
×

HTML5, the open web, and what it means for you -Tech4Africa

1,882

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,882
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5, the open web, and what it means for you -Tech4Africa

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

    Clipping is a handy way to collect important slides you want to go back to later.

×