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.
HTML5Huh, What is it good for?
Remy Sharp@rem   I wrote a book on it :)
Its more than๏ HTML        ๏ Buzzword๏ New HTML5   ๏ Simple  elements      doctype
JavaScript๏Offline๏App   cache๏WebStorage๏WebSQL๏IndexedDB๏Multimedia๏Video    & Audio
๏X-domain                     JavaScript  messaging๏CORS๏File    API๏Drag    & Drop๏History       API๏Lots,    lots more.
JavaScript๏Canvas API๏Offline apps๏Web Sockets
When can Iuse "HTML5"?
Making itwork inthe "other"browser
Polyfillswill/might save youA shim that mimics a futureAPI providing a fallback to       older browsers    http://goo.gl/0...
Oh, and learnJavaScript
CanvasHan Solo of HTML5
Canvas   SVG
๏ Its not one is better than the other,  they do different things๏ Select canvas when it makes sense๏ Dont assume interact...
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Canvas</title></head><body>  <canvas></canvas></body><...
2D APIctx = canvas.getContext(2d)
๏Gradients๏Pixel manipulation๏Paths๏Shadows๏Export to data url๏State saving
Gradientsvar rainbox = ctx.createLinearGradient(0, 0, w, h),    colours = {       0: red,       0.167: orange,       0.333...
Pixel Pushingvar pixels = ctx.getImageData(0, 0, w, h),    len = pixels.data.length;for (var i = 0; i < len; i += 4) {  va...
Pathsvar pinsize = 26,    pinedge = pinsize * 0.1,    centre = pinsize/2,    radius = centre - pinedge,    circle = Math.P...
T ip  Math.PI == 180°
T ipMath.PI * 2 == 360°
T ipd * Math.PI / 180    == radian
Shadowspinctx.shadowBlur = 2;pinctx.shadowOffsetX = 2;pinctx.shadowOffsetY = 2;pinctx.shadowColor = rgba(0,0,0,.7);
Exportpinctx.canvas.toDataURL(image/png)data:image/png;base64,...
T ip  context.canvas  All context contain back-  reference to its canvas
State Savingpinctx.fillStyle = #fff;pinctx.save();pinctx.fillStyle = #f00;// do somethingpinctx.restore();// now fillStyle...
Offline Applications
Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
The Manifest1. Serve as text/manifest, by   adding to mime.types:text/cache-manifest appcache
Firefox caching<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest↪ “access plus 0 seconds”</IfMod...
The Manifest2. First line must be:     CACHE MANIFEST
The Manifest3. Including page is implicitly   included in the cache.
The Manifest4. Two futher namespaces:   NETWORK & FALLBACK
CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
CACHE MANIFESTWhat to   CACHE:          app.jscache          app.css          index.html          NETWORK:          http:/...
CACHE MANIFEST                 CACHE:App cache        app.js                 app.cssrequires all     index.htmlresources a...
CACHE MANIFEST                  CACHE:                  app.jsRequests for      app.cssfiles not found   index.htmlin the ...
CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
The Manifest5. Include some versioning to   cache bust your manifest      # version 16
The Process
Browser: I have aBrowser: request    Server: serve all       manifest, cache                                              ...
When your app updatesapplicationCache.onUpdateReady = function () {   if (confirm("New version ready. Refresh?")) {     //...
T ip   Do offline last
Web SocketsTwo way real-time comms           http://www.flickr.com/photos/44442915@N00/4960579336
In a nutshell๏Persistent connection๏Tiny chunks of data exchanged๏Bi-directional & no origin rules
Some Uses๏Chat / "hello world"๏Streaming data like stock share prices๏Multi-player game state๏Google Wave   remember? :)
Native orpolyfilled  IE6✓ :(
http://github.com/gimite/web-socket-js/
new WebSocket(url)      http://dev.w3.org/html5/websockets/
ws://node.remysharp.com:8000      http://github.com/miksago/node-websocket-server
onopenonmessageoncloseonerror
var data = JSON.parse(event.data);
.send
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
var url = ws://node.remysharp.com:8000,       conn = new WebSocket(url);conn.onopen = function () {     conn.send(hello wo...
Questions?@remremy@leftlogic.com
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
Upcoming SlideShare
Loading in …5
×

HTML5 tutorial: canvas, offfline & sockets

10,733 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

×