Your SlideShare is downloading. ×
Is HTML5 Ready? (workshop)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Is HTML5 Ready? (workshop)

2,285

Published on

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,285
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
59
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Is HTML5 ready forproduction?
  • 2. Hi, I’m Remy@remremy@leftlogic.comI <3 JavaScriptQuestions: interrupt& ask!
  • 3. Theres a lot more down here.
  • 4. HTML5 is a spec
  • 5. sort of"HTML5" is a ^brand
  • 6. MOAR!!!"HTML5" Geolocation Web Workers Web Sockets Web SQL Databases Web Storage Offline applicationsHTML5 Offline events Canvas Video Web Forms
  • 7. H TM L5N OTNOT HTM L5
  • 8. CSS != HTMLBut maybe we should have been more careful
  • 9. caniuse.com
  • 10. When can Iuse "HTML5"?
  • 11. Making itwork inthe "other"browser
  • 12. PolyfillA shim that mimics a futureAPI providing a fallback to older browsers http://goo.gl/0Z9eI
  • 13. ToolsModernizr to detect supportyepnode.js to conditionally load(available as part of Modernizr)
  • 14. ToolsModernizr.load({ test: Modernizr.geolocation, nope: geo-polyfill.js, complete: initMyGeoApp});
  • 15. Oh, and learnJavaScript
  • 16. Web Storage
  • 17. Cookiessuck.
  • 18. Not the edible ones, duh.Cookiessuck.
  • 19. The code for cookies is a pain - I always google it.
  • 20. "Session" cookiesleak across sessions.
  • 21. Persistent cookiesrequire special date format
  • 22. Deleting a cookie, isnt really deleting, but setting in the past.
  • 23. Varying degrees oflimitations on size and number.
  • 24. Fuck cookies.
  • 25. Sexy Web Storage FTW
  • 26. One InterfacelocalStoragesessionStorage http://dev.w3.org/html5/webstorage/
  • 27. localStorage• Persists• Applied to document origin, i.e. scheme/host/port tuple• No expiry
  • 28. sessionStorage• Lasts whilst on the document origin• Doesnt leak• Exactly the same API as localStorage
  • 29. 5mb?Done! o/However: utf-16 ∴ 2½Mb
  • 30. APIvoid setItem(key, value)any* getItem(key)void removeItem(key)string key(index)void clear()readonly number length
  • 31. var store = sessionStorage;Play store.setItem(name,rem); store.getItem(name); store.removeItem(name); Do it in the console!
  • 32. APIsetter setItemgetter getItemdeleter removeItem
  • 33. var store = sessionStorage;Play store.name = rem; store.name; delete store.name; Do it in the console!
  • 34. t ip Theres no security protecting the API // Safari debugger broken: ss.setItem(key, 12);
  • 35. Values are strings Work around: JSON (and http://www.json.org/json2.js)
  • 36. Play var store = sessionStorage, user = { screen_name : ‘rem’, rating : 11 }; store.user = JSON.stringify(user)); var gotUser = JSON.parse(store.user); alert(gotUser.screen_name);
  • 37. Events toowindow.addEventListener(storage, function (event) { console.log(event);}, false); http://jsbin.com/ahafa3
  • 38. Storage in all browsers
  • 39. window.name
  • 40. sessionStorage = (function () { var data = window.name ? JSON.parse(window.name) : {}; return { clear: function () { data = {}; window.top.name = ; }, getItem: function (key) { return data[key] || null; }, removeItem: function (key) { delete data[key]; window.top.name = JSON.stringify(data); }, setItem: function (key, value) { data[key] = value; window.top.name = JSON.stringify(data); } };})(); http://gist.github.com/350433
  • 41. t ip Firefox cookie security applies to Storage too :(
  • 42. t ipvar cookiesEnabled = (function () { // the id is our test value var id = +new Date(); // generate a cookie to probe cookie access document.cookie = __cookieprobe= + id + ;path=/; // if the cookie has been set, then were good return (document.cookie.indexOf(id) !== -1);})();
  • 43. Web SQL Databases http://flic.kr/p/drmCJ
  • 44. IndexedDB http://flic.kr/p/5KXFwB
  • 45. Questions?
  • 46. CanvasCooler than this guy.
  • 47. Canvas SVG
  • 48. http://vimeo.com/6691519
  • 49. • 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
  • 50. http://mrdoob.com
  • 51. canvas-1.htmlPlay <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html> http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
  • 52. 2D APIctx = canvas.getContext(2d)
  • 53. Start Simple
  • 54. fillRect, strokeRect & colours
  • 55. ctx.fillRect(10, 10, 100, 100);
  • 56. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;
  • 57. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);
  • 58. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;
  • 59. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;
  • 60. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;ctx.arc(100,50,25,0,Math.PI*2,true);
  • 61. ctx.fillRect(10, 10, 100, 100);ctx.fillStyle = #c00;ctx.fillRect(100, 75, 50, 50);ctx.strokeStyle = #0c0;ctx.lineWidth = 5;ctx.arc(100,50,25,0,Math.PI*2,true);ctx.stroke();
  • 62. t ip Math.PI == 180°
  • 63. t ip Math.PI *2 == 360°
  • 64. t ip d * Math.PI / 180 == radian
  • 65. t ip CSS stretches
  • 66. Gradient fills
  • 67. 1. Create a gradient object2.Add colour stops3.Set the gradient to the fillStyle4.Draw
  • 68. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);
  • 69. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #fff);gradient.addColorStop(0.5, #f00);gradient.addColorStop(1, #000);
  • 70. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #fff);gradient.addColorStop(0.5, #f00);gradient.addColorStop(1, #000);ctx.fillStyle = gradient;
  • 71. var w = canvas.width, h = canvas.height;var gradient = ctx.createLinearGradient(0, 0, w, h);gradient.addColorStop(0, #fff);gradient.addColorStop(0.5, #f00);gradient.addColorStop(1, #000);ctx.fillStyle = gradient;ctx.fillRect(0, 0, w, h);
  • 72. PlaycreateRadialGradient(x0,y0,r0,x1,y1,r1)
  • 73. Pattern Fills
  • 74. var img = new Image();img.src = url;var pattern = ctx.createPattern(img,repeat);ctx.fillStyle = pattern;ctx.fillRect(0, 0, w, h);
  • 75. t ip invalid_state img.onload = function () { // now use image for canvas };
  • 76. Playing with paths
  • 77. • For drawing irregular shapes• Can be filled• ...or stroked.
  • 78. lineWidth rect(x,y,h,w)lineTo(x,y) arc(x,y,r,s,e, anticw)moveTo(x,y) fill()beginPath() stroke()closePath()
  • 79. drawImage
  • 80. <img> <canvas> <video> <canvas>
  • 81. drawImage(src, dx, dy)drawImage(src, dx, dy, dw, dh)drawImage(src, sx, sy, sw, sh, dx, dy, dw, dh)
  • 82. Play img.onload = function () { // this == img canvas.width = this.width; canvas.height = this.height; ctx.drawImage(this, 0, 0); }; canvas-10.html
  • 83. pixelpushing
  • 84. ctx.getImageData(0,0,w,h)
  • 85. ctx.getImageData(0, 0, w, h); 0 1 2 3 i = 0 r g b a i = 1 r g b a i... r g b a
  • 86. pixels.data[i * 4 + 0]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  • 87. pixels.data[i * 4 + 1]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  • 88. pixels.data[i * 4 + 2]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  • 89. pixels.data[i * 4 + 3]; 0 1 2 3i = 0 r g b ai = 1 r g b ai... r g b a
  • 90. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) {}
  • 91. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { This says loop over each pixel}
  • 92. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0]}
  • 93. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0] // green: pixels.data[i+1]}
  • 94. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0] // green: pixels.data[i+1] // blue: pixels.data[i+2]}
  • 95. var pixels = ctx.getImageData(0, 0, w, h), l = pixels.data.length, i;for (i = 0; i < l; i += 4) { // red: pixels.data[i+0] // green: pixels.data[i+1] // blue: pixels.data[i+2] // alpha: pixels.data[i+3]}
  • 96. ctx.putImageData(pixels, 0, 0)
  • 97. ctx.putImageData(pixels, 0, 0) Needs to be a CanvasPixelArray object
  • 98. t ip security_err To use getImageData, your document must be served over http (or https) - i.e. it doesnt work offline.
  • 99. /workshop/authors-large.jpgPlay greyscale = r*.3 + g*.59 + b*.11; r = g = b = greyscale; saturation = (Math.max(r,g,b) + Math.min(r,g,b))/2; r = g = b = saturation; http://jsbin.com/aguho3/2/edit
  • 100. canvas.toDataURL(image/png);
  • 101. Play save.onclick = function () { window.open( canvas.toDataURL(image/png) ); }; canvas-13.html
  • 102. Questions?
  • 103. Offline Applications
  • 104. Offline Apps• Application cache / manifest• Events: offline, online• navigator.onLine property
  • 105. http://icanhaz.com/rubiks
  • 106. Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
  • 107. my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
  • 108. The Manifest1. Serve as text/manifest, by adding to mime.types:text/cache-manifest appcache
  • 109. t ip Firefox caching <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds” </IfModule>
  • 110. The Manifest2. First line must be: CACHE MANIFEST
  • 111. The Manifest3. Including page is implicitly included in the cache.
  • 112. The Manifest4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  • 113. CACHE MANIFEST/index.htmlrange.jsdatastore.jsFALLBACK:# force everything through# the index url/ /# this wont match# anything unless its on# another domainNETWORK:*# v4
  • 114. CACHE MANIFEST / index.htmlServed from cache range.js datastore.js FALLBACK: # force everything through # the index url / / # this wont match # anything unless its on # another domain NETWORK: * # v4
  • 115. CACHE MANIFEST / index.html range.jsRequests for files not datastore.jsfound in the cache, are FALLBACK: # force everything through directed to / # the index url / / i.e. index.html # this wont match (when offline). # anything unless its on # another domain NETWORK: * # v4
  • 116. CACHE MANIFEST / index.html range.js datastore.jsAny requests to urls FALLBACK:that dont match / - # force everything through # the index url i.e. on another / / domain, will be # this wont match # anything unless its onserved through the # another domain NETWORK: web. * # v4
  • 117. CACHE MANIFEST / index.html range.js datastore.js FALLBACK: # force everything through # the index url / / Also ensures # this wont match browser even # anything unless its on # another domainattempts to load the NETWORK: * asset # v4
  • 118. CACHE MANIFEST / index.html range.js datastore.js FALLBACK: # force everything through # the index url / /The contents of the # this wont match manifest must # anything unless its on # another domainchange to trigger an NETWORK: * update # v4
  • 119. The Manifest5. Include some versioning to cache bust your manifest # version 16
  • 120. The process
  • 121. Browser: I have aBrowser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reloadmanifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 122. Browser: I have a Problem: serve allBrowser: requestServer: manifest, cache assets Change of content requires 2 refreshes reload Server: serve Browser: applicationCache Browser:manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 123. document.body.onOnline =function () { // fire an update to the cache applicationCache.update();};
  • 124. applicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location.refresh(); }};
  • 125. t ip Do offline last
  • 126. Questions?
  • 127. Web Sockets
  • 128. Native or polyfilled
  • 129. http://github.com/gimite/web-socket-js/
  • 130. new WebSocket(url) http://dev.w3.org/html5/websockets/
  • 131. ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
  • 132. onopenonmessageoncloseonerror
  • 133. var data = JSON.parse(event.data);
  • 134. .send
  • 135. 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);};
  • 136. 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);};
  • 137. 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);};
  • 138. 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);};
  • 139. 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);};
  • 140. 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);};
  • 141. 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);};Play
  • 142. Questions? To contact me after my presentation – text NHT to INTRO (46876) Or -- remy@leftlogic.com @rem

×