Browsers with Wings

16,529 views
13,925 views

Published on

HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!

Published in: Technology, Art & Photos
1 Comment
21 Likes
Statistics
Notes
No Downloads
Views
Total views
16,529
On SlideShare
0
From Embeds
0
Number of Embeds
396
Actions
Shares
0
Downloads
169
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

Browsers with Wings

  1. Browsers with Wings: HTML5 & APIs
  2. HTML5 brand
  3. HTML5 is: markup, JavaScript, CSS, SVG, jQuery & your dinner.
  4. HTML5 is: markup, Lie. Don'CSS, JavaScript, t be stoop id SVG, jQuery & , but... your dinner.
  5. HTML5 is anything & everything to mere mortal beings.
  6. Today
  7. Media
  8. <video src=bruce.mp4>
  9. <video src=bruce.mp4> <a href="bruce.mp4">Download</a> </video>
  10. Codec Wars
  11. <video> <source src=bruce.mp4> <source src=bruce.ogv> </video>
  12. <video> <source src=bruce.webm> <source src=bruce.mp4> <source src=bruce.ogv> </video>
  13. <video controls> <source src=bruce.mp4> <source src=bruce.ogv> </video>
  14. <video> works i n IE6
  15. <video> wo L n .IE6 rks iie
  16. http://camendesign.com/code/video_for_everybody <video width="640" height="360" controls preload="none"> <!-- MP4 must be first for iPad! --> <source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video --> <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera --> <!-- fallback to Flash: --> <object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <!-- fallback image. note the title field below, put the title of the video there --> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"OGG"</a> </p>
  17. Custom player style
  18. function toggle() { if (video.paused) { video.play(); this.innerHTML = 'Pause'; } else { video.pause(); this.innerHTML = 'Play'; } } var play = document.getElementById('play'); play.onclick = toggle;
  19. function toggle() { if (video.paused) { video.play(); this.innerHTML = 'Pause'; } else { video.pause(); this.innerHTML = 'Play'; } } var play = document.getElementById('play'); play.onclick = toggle;
  20. function toggle() { if (video.paused) { video.play(); this.innerHTML = 'Pause'; } else { video.pause(); this.innerHTML = 'Play'; } } var play = document.getElementById('play'); play.onclick = toggle;
  21. function toggle() { if (video.paused) { video.play(); this.innerHTML = 'Pause'; } else { video.pause(); this.innerHTML = 'Play'; } } var play = document.getElementById('play'); play.onclick = toggle;
  22. // get & set video.currentTime // half speed video.playbackRate = 0.5 // actual loaded video video.currentSrc // etc
  23. video.ontimeupdate = function () { updatePlayhead(this.currentTime); };
  24. Fullscreen?
  25. Warning! User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full- screen videos when links are clicked or pages navigated. Instead, user-agent specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
  26. Canvas Cooler than a fake Han Solo.
  27. First consider SVG: Standard Vertical Graphing
  28. First consider SVG: Standard Vertical Lie. Graphing
  29. First consider SVG: Standard a lie. Not Vertical Lie. Graphing
  30. SVG: Vector based, good for simple and interactive Canvas: Pixel based, good for pixel manipulation & high animation Check out raphaeljs.com
  31. Mix & match to the technology's strength
  32. pixel pushing
  33. http://mugtug.com/darkroom
  34. var ctx = canvas.getContext('2d'); ctx.getImageData(0,0,w,h)
  35. 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
  36. pixels.data[i * 4 + 0]; 0 1 2 3 i = 0 r g b a i = 1 r g b a i... r g b a
  37. pixels.data[i * 4 + 1]; 0 1 2 3 i = 0 r g b a i = 1 r g b a i... r g b a
  38. pixels.data[i * 4 + 2]; 0 1 2 3 i = 0 r g b a i = 1 r g b a i... r g b a
  39. pixels.data[i * 4 + 3]; 0 1 2 3 i = 0 r g b a i = 1 r g b a i... r g b a
  40. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { }
  41. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { This says loop over each pixel }
  42. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { px.data[i+0] = 255 - px.data[i+0]; }
  43. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { px.data[i+0] = 255 - px.data[i+0]; px.data[i+1] = 255 - px.data[i+1]; }
  44. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { px.data[i+0] = 255 - px.data[i+0]; px.data[i+1] = 255 - px.data[i+1]; px.data[i+2] = 255 - px.data[i+2]; }
  45. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { px.data[i+0] = 255 - px.data[i+0]; px.data[i+1] = 255 - px.data[i+1]; px.data[i+2] = 255 - px.data[i+2]; // don't need to do the alphachannel }
  46. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { px.data[i+0] = 255 - px.data[i+0]; px.data[i+1] = 255 - px.data[i+1]; px.data[i+2] = 255 - px.data[i+2]; // don't need to do the alphachannel } ctx.putImageData(px, 0, 0);
  47. You can do that in SVG, but you can't do this:
  48. http://mrdoob.com
  49. canvas.toDataURL()
  50. canvas.toDataURL()
  51. data:image/ png;base64,iVBORw0KGgoAA AGQCAYAAACAvzbMAAAgAElEQ f2e692YghpAYQuYQQaP9U8Ur Q4gSwXNbREIaqVKlpVFPq6G0 VIhMZJDc3OEM/ 99v7b3P2efcfc49e5+9z9nDd +67PWWd +95liOD8IBAiAAAiAAAjYJxG GAgCAjgAAIgAAIOCIAAXGEDY ACIAACjghAQBxhgyMQAAEQAA IQEEfY4AgEQAAEQAACgjwAAi IBEAABEICAIA +AAAiAAAg4IgABcYQNjkAABE KOCEBAHGGDIxAAARAAAQgI8g
  52. Shims 1. Silverlight Bridge 2. excanvas.js
  53. Storage
  54. Cookies suck. (for most situations)
  55. The code for cookies is painful: so we google it.
  56. "Session" cookies leak across "sessions".
  57. Non-session cookies require "special" date format
  58. Deleting cookies, doesn't delete, but sets it in the past.
  59. Fuck cookies.
  60. Sexy Web Storage FTW
  61. Key/value pair
  62. One API setItem(key, value)
  63. One API setItem(key, value) string* getItem(key)
  64. One API setItem(key, value) string* getItem(key) removeItem(key)
  65. One API setItem(key, value) string* getItem(key) removeItem(key) string key(index)
  66. One API setItem(key, value) string* getItem(key) removeItem(key) string key(index) clear()
  67. One API setItem(key, value) string* getItem(key) removeItem(key) string key(index) clear() .length
  68. Two instances localStorage sessionStorage
  69. localStorage • Persists • Applied to document origin, i.e. scheme/host/port tuple • No expiry
  70. sessionStorage • Lasts whilst on the document origin • Doesn't leak • Exactly the same API as localStorage
  71. var ss = sessionStorage; ss.setItem('version', 12); ss.getItem('version');
  72. rnin g! Wa Values are strings
  73. rnin g! Wa Values are strings Work around: JSON (and http://www.json.org/json2.js)
  74. var ss = sessionStorage, user = { screen_name : ‘rem’, rating : 11 }; ss.setItem(‘user’, JSON.stringify(user)); var obj = JSON.parse(ss.getItem(‘user’)); alert(obj.screen_name);
  75. window.name shim http://gist.github.com/350433
  76. Alternatives
  77. Web SQL Database
  78. IndexedDB
  79. Geolocation
  80. navigator.geolocation
  81. getCurrentPosition watchPosition clearPosition
  82. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  83. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  84. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  85. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  86. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  87. Check your accuracy
  88. http://j.mp/geoshim if (!navigator.geolocation) { navigator.geolocation = (function (window) { function getCurrentPosition(callback) { // source: http://www.maxmind.com/app/javascript_city var geourl = 'http://j.maxmind.com/app/geoip.js_' + Math.random(), iframe = document.createElement('iframe'), doc, win; iframe.style.display = 'none'; window.document.body.appendChild(iframe); doc = iframe.contentDocument || iframe.contentWindow.document; win = iframe.contentWindow; // once the script has loaded, it triggers an onload event iframe.onload = function () { // assign all the captured values across to our geo object var geo = { coords: { latitude: win.geoip_latitude(), longitude: win.geoip_longitude() // other values are supported, i.e. accuracy, speed, heading, etc }, timestamp: (new Date()).getTime()
  89. Sockets
  90. Move over comet.
  91. Low latency. Direct connection. Simple API.
  92. var url = 'ws://apps.leftlogic.com:8000/', conn = new WebSocket(url); conn.onmessage = function (event) { console.log(JSON.parse(event.data)); }; conn.send('hello world');
  93. var url = 'ws://apps.leftlogic.com:8000/', conn = new WebSocket(url); conn.onmessage = function (event) { console.log(JSON.parse(event.data)); }; conn.send('hello world');
  94. var url = 'ws://apps.leftlogic.com:8000/', conn = new WebSocket(url); conn.onmessage = function (event) { console.log(JSON.parse(event.data)); }; conn.send('hello world');
  95. var url = 'ws://apps.leftlogic.com:8000/', conn = new WebSocket(url); conn.onmessage = function (event) { console.log(JSON.parse(event.data)); }; conn.send('hello world');
  96. var url = 'ws://apps.leftlogic.com:8000/', conn = new WebSocket(url); conn.onmessage = function (event) { console.log(JSON.parse(event.data)); }; conn.send('hello world');
  97. var url = 'ws://apps.leftlogic.com:8000/', conn = new WebSocket(url); conn.onmessage = function (event) { console.log(JSON.parse(event.data)); }; conn.send('hello world');
  98. http://rem.im/collab-drawing
  99. http://rem.im/collab-drawing
  100. http://rem.im/collab-drawing
  101. http://github.com/gimite/web-socket-js/
  102. Partial
  103. Offline
  104. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  105. my.manifest CACHE MANIFEST app.html css/style.css js/app.js #version 13
  106. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  107. t ip Firefox caching <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds” </IfModule>
  108. The Manifest 2. First line must be: CACHE MANIFEST
  109. The Manifest 3. Including page is implicitly included in the cache.
  110. The Manifest 4. Include some versioning to cache bust your manifest # version 16
  111. The Manifest 5. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  112. CACHE MANIFEST CACHE: app.js app.css index.html NETWORK: /live/* FALLBACK: * offline.html
  113. CACHE MANIFEST CACHE: app.js Served from cache app.css index.html NETWORK: /live/* FALLBACK: * offline.html
  114. CACHE MANIFEST CACHE: app.js app.css index.html Requests to http://mysite.com/live/x NETWORK: /live/* must go via the web FALLBACK: * offline.html
  115. CACHE MANIFEST CACHE: app.js app.css Requests for files not index.html found in the cache, NETWORK: are directed to /live/* offline.html (when FALLBACK: offline). / offline.html
  116. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  117. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  118. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  119. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  120. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  121. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  122. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  123. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  124. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  125. File API
  126. files[0].getAsDataURL()
  127. files[0].getAsDataURL()
  128. Link prefetching Web Workers Web Forms Hash change event, history state management Contenteditable Native drag and drop - embedding of data Microdata Cross server messaging embedded attribute data mime-type registration DXHTML6
  129. Link prefetching Web Workers Web Forms Hash change event, history state management Contenteditable Native drag and drop - embedding of data Microdata Cross server messaging embedded attribute data mime-type registration Lie. DXHTML6
  130. "Should I be using HTML5 today?"
  131. 1. doctype, script & styles only
  132. 1. doctype, script & styles only 2. New HTML5 elements
  133. 1. doctype, script & styles only 2. New HTML5 elements 3. Existing APIs
  134. 1. doctype, script & styles only 2. New HTML5 elements 3. Existing APIs 4. Shims
  135. Yes.
  136. introducinghtml5.com Yes. @rem remy@leftlogic.com

×