codebits 2009 HTML5 JS APIs

3,487 views

Published on

HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This presentation will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs.

Published in: Technology, Design
  • Be the first to comment

codebits 2009 HTML5 JS APIs

  1. 1. Is AP Br L5 ow HTM ser HTML5 JavaScript APIs codebits.eu 2009
  2. 2. HTML5
  3. 3. HTML5 Web Forms Offline History API Audio/Video Drag & Drop Undo Canvas Editable X-Domain Messaging
  4. 4. “HTML5”
  5. 5. “HTML5” Web Forms Offline History API Audio/Video Drag & Drop Undo Canvas Editable X-Domain Messaging Storage Geolocation Databases querySelector Workers Sockets Server Events
  6. 6. “HTML5” •Video •Storage •Canvas •Workers •Offline
  7. 7. “HTML5” •Video •Storage •Canvas •Workers •Offline
  8. 8. “HTML5” •Video •Storage •Canvas •Workers •Offline
  9. 9. Video (and audio)
  10. 10. <object classid="clsid:d27cdb6e-a height="344" codebase="http://dow flash/swflash.cab#version=6,0,40, <param name="allowFullScreen" val <param name="allowscriptaccess" v <param name="src" value="http://w <param name="allowfullscreen" val <embed type="application/x-shockw src="http://www.youtube.com/v/oHg allowscriptaccess="always" allowf </embed> </object>
  11. 11. <video src="dizzy.ogv" />
  12. 12. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  13. 13. ?
  14. 14. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  15. 15. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> </video>
  16. 16. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> <!-- down to flash --> <object><param></object> </video>
  17. 17. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  18. 18. http://html5demos.com/video
  19. 19. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); } http://html5demos.com/video
  20. 20. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); } http://html5demos.com/video
  21. 21. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); } http://html5demos.com/video
  22. 22. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); } http://html5demos.com/video
  23. 23. addEvent( video, 'timeupdate', function () { positon.innerHTML = ➥ asTime(this.currentTime); } ); http://html5demos.com/video
  24. 24. addEvent( video, 'timeupdate', function () { positon.innerHTML = ➥ asTime(this.currentTime); } ); http://html5demos.com/video
  25. 25. addEvent( video, 'timeupdate', function () { positon.innerHTML = ➥ asTime(this.currentTime); } ); http://html5demos.com/video
  26. 26. •play(), pause() •paused, ended, currentTime •canplay, timeupdate, ended •and a bunch more.
  27. 27. •Bugs tend to be rather quiet...shhh... •Firefox needs the right content-type • Safari will plough ahead
  28. 28. Accessibility?
  29. 29. http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
  30. 30. Canvas (+ excanvas.js)
  31. 31. <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
  32. 32. var ctx = canvas.getContext('2d');
  33. 33. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
  34. 34. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000');
  35. 35. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad;
  36. 36. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  37. 37. Let's mix it up
  38. 38. http://html5demos.com/canvas-grad
  39. 39. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  40. 40. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, Caclulate from x = event.clientX, the mouse the y = event.clientY, rx = 600 * x / width, radius and ry = 600 * y / width; colours var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  41. 41. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; Re-render the var xc = gradient parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  42. 42. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); Set 0, rx, ry, 600); grad = ctx.createRadialGradient(rx, ry, the new fill grad.addColorStop(0, '#000'); style and refill - the browser grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; handles the hard ctx.fillRect(0,0,600,600); work }; http://html5demos.com/canvas-grad
  43. 43. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  44. 44. canvas.toDataURL("image/png");
  45. 45. canvas.toDataURL("image/png"); data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yez CzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT+ +fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAs YQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+nEEn58/ fuQfHehf6/8Ik01rBHyCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN data:image/png;base64,... +4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy +zICBLmscOOuESDIGi+7LyNAkMsKN +4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy +zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgI//3R3T1m/ 7AqdPa5PkLP7Nd2LBAjyIkAvP5sAQc7u13QvEiDIiwC9/ GwCBDm7X9O9SIAgLwL08rMJEOTsfk33IgGCvAjQy88mQJCz+zXdiwR+/i/pLwba/fLPj7/zPe5fH1+7R3P+BgI +QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55D gCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQ IAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzy FAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/ gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo +Qb7F4pcI/E +AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAg QZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDE HUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQW CHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBI kVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0C QWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDEC BIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI 0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHND ECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUg TI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
  46. 46. Canvas + drawImage + Video =
  47. 47. http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  48. 48. ctx.translate(canvas.width/2, canvas.height/2); ctx.scale(-1, 1); ctx.translate(-canvas.width/2, -canvas.height/2); ctx.drawImage( video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height); http://html5demos.com/video-canvas
  49. 49. ctx.getImageData(0, 0, w, h);
  50. 50. ctx.getImageData(0, 0, w, h); 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  51. 51. pixels.data[i * 4 + 0]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  52. 52. pixels.data[i * 4 + 1]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  53. 53. pixels.data[i * 4 + 2]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  54. 54. pixels.data[i * 4 + 3]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  55. 55. for (i = 0; i < pixels.data.length / 4; i++) { totals.r += pixels.data[i * 4 + 0]; // r totals.g += pixels.data[i * 4 + 1]; // g totals.b += pixels.data[i * 4 + 2]; // b } var r = parseInt(totals.r / (w*h)), g = parseInt(totals.g / (w*h)), b = parseInt(totals.b / (w*h)), rgb = [r, g, b].join(',');
  56. 56. Don't use for evil
  57. 57. Storage (supersized cookies)
  58. 58. Storage Database
  59. 59. Storage Database
  60. 60. Storage
  61. 61. Storage window based sessionStorage localStorage
  62. 62. Storage window based sessionStorage domain based localStorage
  63. 63. Storage var ss = sessionStorage; ss.setItem('key', 12); alert( ss.getItem('key') );
  64. 64. Storage var ss = sessionStorage; ss.setItem('key', 12); alert( ss.getItem('key') );
  65. 65. Storage var ss = sessionStorage; ss.key = 12; alert( ss.key );
  66. 66. Values set with expando syntax & that overwrite methods: are removed on reload
  67. 67. ...but not removed using setItem // Safari debugger broken: ss.setItem('key', 12);
  68. 68. Storage • setItem(key, value) • getItem(key) • removeItem(key) • key(index) • clear()
  69. 69. Values are strings Work around: JSON (and http://www.json.org/json2.js)
  70. 70. Tweet stream demo using localStorage
  71. 71. Web Workers
  72. 72. •"Threads" •Native or via Gears •Sandboxed •Debugging can be tricky
  73. 73. http://html5demos.com/worker
  74. 74. •importScripts • postMessage • onmessage • onconnect
  75. 75. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  76. 76. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  77. 77. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  78. 78. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  79. 79. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); }
  80. 80. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); }
  81. 81. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); }
  82. 82. Can dos •Spawn more workers •setTimeout/Interval & clear •Access navigator •Error handling onerror •XHR (though responseXML is null)
  83. 83. 8 workers Workers disabled
  84. 84. Of ine Applications
  85. 85. Of ine Applications
  86. 86. Of ine Apps •Application cache / manifest •Events: of ine, online •navigator.onLine property
  87. 87. http://icanhaz.com/rubiks
  88. 88. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  89. 89. my.manifest CACHE MANIFEST app.html css/style.css js/app.js #version 13
  90. 90. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  91. 91. The Manifest 2. First line must be: CACHE MANIFEST
  92. 92. The Manifest 3. Including page is implicitly included in the cache.
  93. 93. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  94. 94. The Manifest 5. Include some versioning to cache bust your manifest # version 16
  95. 95. The process
  96. 96. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  97. 97. Browser: I have a Problem: Browser: request Server: serve all manifest, cache assets Change of content requires 2 refreshes Server: serve Browser: applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  98. 98. applicationCache.onUpdateReady = function () { applicationCache.swapCache(); notice('reload'); }; window.onOnline = function () { // fire an update to the cache applicationCache.update(); };
  99. 99. And a lot more...
  100. 100. Attributes: data-*, itemProp, sandbox (on iframes) <progress> Microdata API, <meter> datagrid, XHR2 & <datalist> upload progress <ruby> querySelector Drag & Drop, History manager ARIA overlap
  101. 101. http://www.whatwg.org/html5/ http://tr.im/whatwg_complete irc://irc.freenode.net/#whatwg
  102. 102. Remy Sharp @rem icnhz.com/rs_talks icnhz.com/rs_codebits html5demos.com The Dizzy HTML5 cat

×