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

6,521

Published on

Roots conf HTML5 90 minute tutorial.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,521
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
186
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 tutorial: canvas, offfline & sockets

  1. 1. HTML5Huh, What is it good for?
  2. 2. Remy Sharp@rem I wrote a book on it :)
  3. 3. Its more than๏ HTML ๏ Buzzword๏ New HTML5 ๏ Simple elements doctype
  4. 4. JavaScript๏Offline๏App cache๏WebStorage๏WebSQL๏IndexedDB๏Multimedia๏Video & Audio
  5. 5. ๏X-domain JavaScript messaging๏CORS๏File API๏Drag & Drop๏History API๏Lots, lots more.
  6. 6. JavaScript๏Canvas API๏Offline apps๏Web Sockets
  7. 7. When can Iuse "HTML5"?
  8. 8. Making itwork inthe "other"browser
  9. 9. Polyfillswill/might save youA shim that mimics a futureAPI providing a fallback to older browsers http://goo.gl/0Z9eI
  10. 10. Oh, and learnJavaScript
  11. 11. CanvasHan Solo of HTML5
  12. 12. Canvas SVG
  13. 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. 14. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Canvas</title></head><body> <canvas></canvas></body></html>
  15. 15. 2D APIctx = canvas.getContext(2d)
  16. 16. ๏Gradients๏Pixel manipulation๏Paths๏Shadows๏Export to data url๏State saving
  17. 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. 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. 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. 20. T ip Math.PI == 180°
  21. 21. T ipMath.PI * 2 == 360°
  22. 22. T ipd * Math.PI / 180 == radian
  23. 23. Shadowspinctx.shadowBlur = 2;pinctx.shadowOffsetX = 2;pinctx.shadowOffsetY = 2;pinctx.shadowColor = rgba(0,0,0,.7);
  24. 24. Exportpinctx.canvas.toDataURL(image/png)data:image/png;base64,...
  25. 25. T ip context.canvas All context contain back- reference to its canvas
  26. 26. State Savingpinctx.fillStyle = #fff;pinctx.save();pinctx.fillStyle = #f00;// do somethingpinctx.restore();// now fillStyle is #fff
  27. 27. Offline Applications
  28. 28. Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
  29. 29. my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
  30. 30. The Manifest1. Serve as text/manifest, by adding to mime.types:text/cache-manifest appcache
  31. 31. Firefox caching<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest↪ “access plus 0 seconds”</IfModule>
  32. 32. The Manifest2. First line must be: CACHE MANIFEST
  33. 33. The Manifest3. Including page is implicitly included in the cache.
  34. 34. The Manifest4. Two futher namespaces: NETWORK & FALLBACK
  35. 35. CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
  36. 36. CACHE MANIFESTWhat to CACHE: app.jscache app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
  37. 37. CACHE MANIFEST CACHE:App cache app.js app.cssrequires all index.htmlresources are NETWORK: http://*accounted for. https://* FALLBACK: / offline.html
  38. 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. 39. CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
  40. 40. The Manifest5. Include some versioning to cache bust your manifest # version 16
  41. 41. The Process
  42. 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. 43. When your app updatesapplicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; }};
  44. 44. T ip Do offline last
  45. 45. Web SocketsTwo way real-time comms http://www.flickr.com/photos/44442915@N00/4960579336
  46. 46. In a nutshell๏Persistent connection๏Tiny chunks of data exchanged๏Bi-directional & no origin rules
  47. 47. Some Uses๏Chat / "hello world"๏Streaming data like stock share prices๏Multi-player game state๏Google Wave remember? :)
  48. 48. Native orpolyfilled IE6✓ :(
  49. 49. http://github.com/gimite/web-socket-js/
  50. 50. new WebSocket(url) http://dev.w3.org/html5/websockets/
  51. 51. ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
  52. 52. onopenonmessageoncloseonerror
  53. 53. var data = JSON.parse(event.data);
  54. 54. .send
  55. 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. 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. 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. 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. 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. 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. 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. 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. 63. Questions?@remremy@leftlogic.com
  1. A particular slide catching your eye?

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

×