Browsers with Wings
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Browsers with Wings

on

  • 7,848 views

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 ...

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!

Statistics

Views

Total Views
7,848
Views on SlideShare
7,455
Embed Views
393

Actions

Likes
21
Downloads
165
Comments
1

7 Embeds 393

http://www.slideshare.net 233
http://www.webdirections.org 136
http://lanyrd.com 15
http://translate.googleusercontent.com 3
https://poliformat.upv.es 3
http://www.lmodules.com 2
http://webexpantion.blogspot.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Browsers with Wings Presentation Transcript

  • 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