HTML5: huh, what is it good for?

3,114
-1

Published on

Published in: Technology, Design
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,114
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5: huh, what is it good for?

  1. 1. HTML5Huh, What is it good for?
  2. 2. Remy Sharp@rem Plug: Introducing HTML5
  3. 3. Its more than๏ HTML ๏ Buzzword๏ New HTML5 ๏ Simple elements doctype
  4. 4. <!doctype html><html lang="en"><head> <meta charset="utf-8"> <!doctype html> <title>My HTML5 page</title> <style> body { } <style> <script> font-family: sans-serif; </style></head><body><article> <h1>My story</h1> <article> <p>With JavaScript</p></article><script src="funky.js"></script><script>makeFunky(document.querySelector(article));</script></body></html>
  5. 5. JavaScript๏Offline๏App cache๏WebStorage๏WebSQL๏IndexedDB๏Multimedia๏Video & Audio
  6. 6. ๏X-domain JavaScript messaging๏CORS๏File API๏Drag & Drop๏History API๏Lots, lots more.
  7. 7. JavaScript๏ Drawing๏ Offline๏ URLs๏ Real-time
  8. 8. When can Iuse "HTML5"?
  9. 9. Making itwork inthe "other"browser
  10. 10. Polyfillswill/might save youA shim that mimics a futureAPI providing a fallback to older browsers http://goo.gl/0Z9eI
  11. 11. ToolsModernizr to detect supportyepnode.js to conditionally load(available as part of Modernizr)
  12. 12. ToolsModernizr.load({ test: Modernizr.geolocation, nope: geo-polyfill.js, complete: initMyGeoApp});
  13. 13. Oh, and learnJavaScript
  14. 14. CanvasHan Solo of HTML5
  15. 15. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Canvas</title></head><body> <canvas></canvas></body></html>
  16. 16. 2D APIctx = canvas.getContext(2d)
  17. 17. ๏Gradients๏Pixel manipulation๏Paths๏Shadows๏Export to data url๏State saving
  18. 18. Gradients
  19. 19. Gradientsvar rainbow = 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 = rainbow;ctx.fillRect(0, 0, w, h);
  20. 20. Pixel Pushing
  21. 21. 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(,) + );}
  22. 22. Shadows & Paths
  23. 23. Shadowsctx.shadowBlur = 2;ctx.shadowOffsetX = 2;ctx.shadowOffsetY = 2;ctx.shadowColor = rgba(0,0,0,.7);
  24. 24. Pathsvar pinsize = 26, pinedge = pinsize * 0.1, centre = pinsize/2, radius = centre - pinedge, circle = Math.PI * 2;ctx.fillStyle = rgb; // from our pixelctx.beginPath();ctx.arc(centre, centre, // ↵ radius, 0, circle, true);ctx.closePath();ctx.fill();
  25. 25. Exportctx.canvas.toDataURL(image/png)data:image/png;base64,...
  26. 26. T ip context.canvas All context contain back- reference to its canvas
  27. 27. State Savingpinctx.fillStyle = #fff;pinctx.save();pinctx.fillStyle = #f00;// do somethingpinctx.restore();// now fillStyle is #fff
  28. 28. Offline Applications
  29. 29. Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
  30. 30. my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
  31. 31. The Manifest1. Serve as text/manifest, by adding to mime.types:text/cache-manifest appcache
  32. 32. Firefox caching<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest↪ “access plus 0 seconds”</IfModule>
  33. 33. The Manifest2. First line must be: CACHE MANIFEST
  34. 34. The Manifest3. Including page is implicitly included in the cache.
  35. 35. The Manifest4. Two futher namespaces: NETWORK & FALLBACK
  36. 36. CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
  37. 37. CACHE MANIFESTWhat to CACHE: app.jscache app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
  38. 38. CACHE MANIFEST CACHE:App cache app.js app.cssrequires all index.htmlresources are NETWORK: http://*accounted for. https://* FALLBACK: / offline.html
  39. 39. 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
  40. 40. CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
  41. 41. The Manifest5. Include some versioning to cache bust your manifest # version 16
  42. 42. When your app updatesapplicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; }};
  43. 43. T ip Do offline last
  44. 44. Web Storage http://www.flickr.com/photos/ph0t0s/64821154
  45. 45. Key / Value pair๏ localStorage, persistent๏ sessionStorage, temporary๏ Extremely simple to use๏ Storage events
  46. 46. sessionStorage.name = @rem;// page is reloadedvar name = sessionStorage.name;if (name !== undefined) { alert(Welcome back + name);}
  47. 47. sessionStorage.name = @rem;// page is reloadedvar name = sessionStorage.name;if (name !== undefined) { alert(Welcome back + name);}
  48. 48. sessionStorage.name = @rem;// page is reloadedvar name = sessionStorage.name;if (name !== undefined) { alert(Welcome back + name);}
  49. 49. Storagecoerces toString
  50. 50. Stringvar sess = sessionStorage;sess.data = JSON.stringify(data);
  51. 51. Stringvar sess = sessionStorage;sess.data = JSON.stringify(data);var data = JSON.parse( sess.data || {} // or empty obj);
  52. 52. Eventswindow.onstorage = function(e){ // e.key // e.newValue // e.oldValue // e.url};
  53. 53. URLs
  54. 54. History APIhistory.pushState(obj, title, url);window.onpopstate = fn;
  55. 55. Detection!!(window.history  &&  history.pushState)
  56. 56. PolyfillHistory.jshttps://github.com/balupton/history.js
  57. 57. hashchangewindow.onhashchange = function(e) { // user went back or forward // now read location.hash};
  58. 58. Server SentEvents"push based XHR"
  59. 59. Prerequisites๏ Persistent connection support (event based are favourable: ie. node, twisted, etc)๏ Support in browser* but we can fix that :)๏ If not native, fails over to polling
  60. 60. Limitations๏ Same origin rules๏ No support in Firefox or IE๏ Read only
  61. 61. Usagevar es = new EventSource(url);es.onopen = function () { console.log(open stream);};es.onmessage = function (event) { console.log(got message: + event.data);};
  62. 62. Server codeapp.get(/sse, function (req, res) { connections.push(res); res.writeHead(200, { Content-Type: text/event-stream, Cache-Control: no-cache }); res.write(eventId:0nn);}); Using Connect
  63. 63. Server codeconnections.forEach(function (c) { c.write(data: + JSON.stringify(req.body) + nn);}); req.body is an object of key/values
  64. 64. Web SocketsTwo way real-time comms http://www.flickr.com/photos/44442915@N00/4960579336
  65. 65. In a nutshell๏Persistent connection๏Tiny chunks of data exchanged๏Bi-directional & no origin rules
  66. 66. Some Uses๏Chat / "hello world"๏Streaming data like stock share prices๏Multi-player game state๏Google Wave remember? :)
  67. 67. Native orpolyfilled IE6✓ :(
  68. 68. http://github.com/gimite/web-socket-js/
  69. 69. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  70. 70. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  71. 71. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  72. 72. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  73. 73. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  74. 74. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  75. 75. var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(@rem says Hi!);};conn.onmessage = function (event) { console.log(event.data);};
  76. 76. Demojsbin.com/uwomu6
  77. 77. Questions?@remremy@leftlogic.com

×