Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 tutorial: canvas, offfline & sockets

10,771 views

Published on

Roots conf HTML5 90 minute tutorial.

Published in: Technology
  • Be the first to comment

HTML5 tutorial: canvas, offfline & sockets

  1. HTML5Huh, What is it good for?
  2. Remy Sharp@rem I wrote a book on it :)
  3. Its more than๏ HTML ๏ Buzzword๏ New HTML5 ๏ Simple elements doctype
  4. JavaScript๏Offline๏App cache๏WebStorage๏WebSQL๏IndexedDB๏Multimedia๏Video & Audio
  5. ๏X-domain JavaScript messaging๏CORS๏File API๏Drag & Drop๏History API๏Lots, lots more.
  6. JavaScript๏Canvas API๏Offline apps๏Web Sockets
  7. When can Iuse "HTML5"?
  8. Making itwork inthe "other"browser
  9. Polyfillswill/might save youA shim that mimics a futureAPI providing a fallback to older browsers http://goo.gl/0Z9eI
  10. Oh, and learnJavaScript
  11. CanvasHan Solo of HTML5
  12. Canvas SVG
  13. ๏ Its not one is better than the other, they do different things๏ Select canvas when it makes sense๏ Dont assume interactive means canvas๏ Check out raphaeljs.com
  14. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Canvas</title></head><body> <canvas></canvas></body></html>
  15. 2D APIctx = canvas.getContext(2d)
  16. ๏Gradients๏Pixel manipulation๏Paths๏Shadows๏Export to data url๏State saving
  17. Gradientsvar rainbox = ctx.createLinearGradient(0, 0, w, h), colours = { 0: red, 0.167: orange, 0.333: yellow, // etc };for (var key in colours) { rainbow.addColorStop(key, colours[key]);}ctx.fillStyle = rainbox;ctx.fillRect(0, 0, w, h);
  18. Pixel Pushingvar pixels = ctx.getImageData(0, 0, w, h), len = pixels.data.length;for (var i = 0; i < len; i += 4) { var rgb = rgb( + // ↵ [ pixels.data[i], // red pixels.data[i+1], // green pixels.data[i+2] // blue ].join(,) + );}
  19. Pathsvar pinsize = 26, pinedge = pinsize * 0.1, centre = pinsize/2, radius = centre - pinedge, circle = Math.PI * 2;pinctx.beginPath();pinctx.arc(centre, centre, // ↵ radius, 0, circle, true);pinctx.closePath();pinctx.fill();
  20. T ip Math.PI == 180°
  21. T ipMath.PI * 2 == 360°
  22. T ipd * Math.PI / 180 == radian
  23. Shadowspinctx.shadowBlur = 2;pinctx.shadowOffsetX = 2;pinctx.shadowOffsetY = 2;pinctx.shadowColor = rgba(0,0,0,.7);
  24. Exportpinctx.canvas.toDataURL(image/png)data:image/png;base64,...
  25. T ip context.canvas All context contain back- reference to its canvas
  26. State Savingpinctx.fillStyle = #fff;pinctx.save();pinctx.fillStyle = #f00;// do somethingpinctx.restore();// now fillStyle is #fff
  27. Offline Applications
  28. Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
  29. my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
  30. The Manifest1. Serve as text/manifest, by adding to mime.types:text/cache-manifest appcache
  31. Firefox caching<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest↪ “access plus 0 seconds”</IfModule>
  32. The Manifest2. First line must be: CACHE MANIFEST
  33. The Manifest3. Including page is implicitly included in the cache.
  34. The Manifest4. Two futher namespaces: NETWORK & FALLBACK
  35. CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
  36. CACHE MANIFESTWhat to CACHE: app.jscache app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
  37. CACHE MANIFEST CACHE:App cache app.js app.cssrequires all index.htmlresources are NETWORK: http://*accounted for. https://* FALLBACK: / offline.html
  38. CACHE MANIFEST CACHE: app.jsRequests for app.cssfiles not found index.htmlin the cache, NETWORK: http://*are directed https://*to offline.html FALLBACK:(when offline). / offline.html
  39. CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
  40. The Manifest5. Include some versioning to cache bust your manifest # version 16
  41. The Process
  42. Browser: I have aBrowser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reloadmanifest assets updatedBrowser: serve Browser: only Server: 304 Not locally request manifest file Modified
  43. When your app updatesapplicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; }};
  44. T ip Do offline last
  45. Web SocketsTwo way real-time comms http://www.flickr.com/photos/44442915@N00/4960579336
  46. In a nutshell๏Persistent connection๏Tiny chunks of data exchanged๏Bi-directional & no origin rules
  47. Some Uses๏Chat / "hello world"๏Streaming data like stock share prices๏Multi-player game state๏Google Wave remember? :)
  48. Native orpolyfilled IE6✓ :(
  49. http://github.com/gimite/web-socket-js/
  50. new WebSocket(url) http://dev.w3.org/html5/websockets/
  51. ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
  52. onopenonmessageoncloseonerror
  53. var data = JSON.parse(event.data);
  54. .send
  55. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  56. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  57. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  58. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  59. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  60. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  61. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
  62. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);}; Lets play
  63. Questions?@remremy@leftlogic.com

×