0
Browsers
    with
  Wings:
  HTML5
  & APIs
HTML5 brand
HTML5 is:
markup,
JavaScript, CSS,
SVG, jQuery &
your dinner.
HTML5 is:
markup, Lie.
        Don'CSS,
JavaScript, t be
       stoop
             id
SVG, jQuery & ,
        but...
your ...
HTML5 is
anything & everything
to mere mortal beings.
Today
Media
<video src=bruce.mp4>
<video src=bruce.mp4>
 <a href="bruce.mp4">Download</a>
</video>
Codec Wars
<video>
 <source src=bruce.mp4>
 <source src=bruce.ogv>
</video>
<video>
 <source src=bruce.webm>
 <source src=bruce.mp4>
 <source src=bruce.ogv>
</video>
<video controls>
 <source src=bruce.mp4>
 <source src=bruce.ogv>
</video>
<video>
works i n IE6
<video>
wo L    n .IE6
   rks iie
http://camendesign.com/code/video_for_everybody

<video width="640" height="360" controls preload="none">
  <!-- MP4 must ...
Custom player style
function toggle() {
  if (video.paused) {
    video.play();
    this.innerHTML = 'Pause';
  } else {
    video.pause();
  ...
function toggle() {
  if (video.paused) {
    video.play();
    this.innerHTML = 'Pause';
  } else {
    video.pause();
  ...
function toggle() {
  if (video.paused) {
    video.play();
    this.innerHTML = 'Pause';
  } else {
    video.pause();
  ...
function toggle() {
  if (video.paused) {
    video.play();
    this.innerHTML = 'Pause';
  } else {
    video.pause();
  ...
// get & set
video.currentTime

// half speed
video.playbackRate = 0.5

// actual loaded video
video.currentSrc

// etc
video.ontimeupdate = function () {
   updatePlayhead(this.currentTime);
};
Fullscreen?
Warning! User agents should not provide a public API to cause
videos to be shown full-screen. A script, combined with a ca...
Canvas
Cooler than a fake Han Solo.
First consider SVG:
Standard
Vertical
Graphing
First consider SVG:
Standard
Vertical
  Lie.
Graphing
First consider SVG:
Standard a lie.
       Not
Vertical
  Lie.
Graphing
SVG: Vector based, good for simple
and interactive

Canvas: Pixel based, good for pixel
manipulation & high animation



C...
Mix & match
to the
technology's
strength
pixel
pushing
http://mugtug.com/darkroom
var ctx = canvas.getContext('2d');
ctx.getImageData(0,0,w,h)
ctx.getImageData(0, 0, w, h);


         0   1   2    3


 i = 0   r   g   b    a


 i = 1   r   g   b    a


 i...    r  ...
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
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
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
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
var px = ctx.getImageData(0, 0, w, h),
    l = px.data.length,
    i;

for (i = 0; i < l; i += 4) {




}
var px = ctx.getImageData(0, 0, w, h),
    l = px.data.length,
    i;

for (i = 0; i < l; i += 4) {


                    ...
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 -...
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 -...
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...
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 -...
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 -...
You can do
that in SVG,
but you can't
do this:
http://mrdoob.com
canvas.toDataURL()
canvas.toDataURL()
data:image/
png;base64,iVBORw0KGgoAA
AGQCAYAAACAvzbMAAAgAElEQ
f2e692YghpAYQuYQQaP9U8Ur
Q4gSwXNbREIaqVKlpVFPq6G0
VIhMZJDc3O...
Shims


1. Silverlight
Bridge
2. excanvas.js
Storage
Cookies
suck.
    (for most situations)
The code for
cookies is
painful: so
we google it.
"Session"
     cookies
leak across
 "sessions".
Non-session
cookies require
"special"
date format
Deleting
       cookies,
doesn't delete,
    but sets it
   in the past.
Fuck cookies.
Sexy Web Storage FTW
Key/value pair
One API
setItem(key, value)
One API
setItem(key, value)
string* getItem(key)
One API
setItem(key, value)
string* getItem(key)
removeItem(key)
One API
setItem(key, value)
string* getItem(key)
removeItem(key)
string key(index)
One API
setItem(key, value)
string* getItem(key)
removeItem(key)
string key(index)
clear()
One API
setItem(key, value)
string* getItem(key)
removeItem(key)
string key(index)
clear()
.length
Two instances


localStorage
sessionStorage
localStorage

• Persists
• Applied to document origin, i.e.
  scheme/host/port tuple

• No expiry
sessionStorage

• Lasts whilst on the document origin
• Doesn't leak
• Exactly the same API as localStorage
var ss = sessionStorage;


ss.setItem('version', 12);
ss.getItem('version');
rnin g!
Wa


     Values are strings
rnin g!
Wa


     Values are strings

            Work around: JSON
      (and http://www.json.org/json2.js)
var ss = sessionStorage,
    user = { screen_name : ‘rem’,
             rating : 11 };


ss.setItem(‘user’, JSON.stringify...
window.name shim




    http://gist.github.com/350433
Alternatives
Web SQL Database
IndexedDB
Geolocation
navigator.geolocation
getCurrentPosition
watchPosition
clearPosition
var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
  map(data.coords.latitude,
      data.coords.long...
var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
  map(data.coords.latitude,
      data.coords.long...
var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
  map(data.coords.latitude,
      data.coords.long...
var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
  map(data.coords.latitude,
      data.coords.long...
var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
  map(data.coords.latitude,
      data.coords.long...
Check your accuracy
http://j.mp/geoshim
if (!navigator.geolocation) {

navigator.geolocation = (function (window) {
  function getCurrentPosit...
Sockets
Move
 over
comet.
Low latency.
Direct connection.
Simple API.
var url = 'ws://apps.leftlogic.com:8000/',
       conn = new WebSocket(url);


conn.onmessage = function (event) {
     co...
var url = 'ws://apps.leftlogic.com:8000/',
       conn = new WebSocket(url);


conn.onmessage = function (event) {
     co...
var url = 'ws://apps.leftlogic.com:8000/',
      conn = new WebSocket(url);


conn.onmessage = function (event) {
     con...
var url = 'ws://apps.leftlogic.com:8000/',
       conn = new WebSocket(url);


conn.onmessage = function (event) {
     co...
var url = 'ws://apps.leftlogic.com:8000/',
       conn = new WebSocket(url);


conn.onmessage = function (event) {
     co...
var url = 'ws://apps.leftlogic.com:8000/',
       conn = new WebSocket(url);


conn.onmessage = function (event) {
     co...
http://rem.im/collab-drawing
http://rem.im/collab-drawing
http://rem.im/collab-drawing
http://github.com/gimite/web-socket-js/
Partial
Offline
Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>
my.manifest
CACHE MANIFEST
app.html
css/style.css
js/app.js
#version 13
The Manifest

1. Serve as text/manifest, by
   adding to mime.types:

text/cache-manifest manifest
t ip    Firefox caching

 <IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/cache-manifest
  ↪ “access plus...
The Manifest

2. First line must be:

    CACHE MANIFEST
The Manifest

3. Including page is implicitly
   included in the cache.
The Manifest

4. Include some versioning to
   cache bust your manifest

     # version 16
The Manifest

5. Two futher namespaces:
   NETWORK & FALLBACK

    FALLBACK:
    / offline.html
CACHE MANIFEST

CACHE:
app.js
app.css
index.html

NETWORK:
/live/*

FALLBACK:
* offline.html
CACHE MANIFEST

                    CACHE:
                    app.js
Served from cache   app.css
                    inde...
CACHE MANIFEST

                           CACHE:
                           app.js
                           app.css
   ...
CACHE MANIFEST

                        CACHE:
                        app.js
                        app.css
Requests for...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
Browser: I have a
Browser: request   Server: serve all    manifest, cache
                                           asset...
File API
files[0].getAsDataURL()
files[0].getAsDataURL()
Link prefetching
Web Workers
Web Forms
Hash change event, history state management
Contenteditable
Native drag and drop - ...
Link prefetching
Web Workers
Web Forms
Hash change event, history state management
Contenteditable
Native drag and drop - ...
"Should I be
using HTML5
today?"
1. doctype, script & styles only
1. doctype, script & styles only

2. New HTML5 elements
1. doctype, script & styles only

2. New HTML5 elements

3. Existing APIs
1. doctype, script & styles only

2. New HTML5 elements

3. Existing APIs

4. Shims
Yes.
introducinghtml5.com




              Yes.

@rem
remy@leftlogic.com
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Browsers with Wings
Upcoming SlideShare
Loading in...5
×

Browsers with Wings

6,516

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
6,516
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
168
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

Transcript of "Browsers with Wings"

  1. 1. Browsers with Wings: HTML5 & APIs
  2. 2. HTML5 brand
  3. 3. HTML5 is: markup, JavaScript, CSS, SVG, jQuery & your dinner.
  4. 4. HTML5 is: markup, Lie. Don'CSS, JavaScript, t be stoop id SVG, jQuery & , but... your dinner.
  5. 5. HTML5 is anything & everything to mere mortal beings.
  6. 6. Today
  7. 7. Media
  8. 8. <video src=bruce.mp4>
  9. 9. <video src=bruce.mp4> <a href="bruce.mp4">Download</a> </video>
  10. 10. Codec Wars
  11. 11. <video> <source src=bruce.mp4> <source src=bruce.ogv> </video>
  12. 12. <video> <source src=bruce.webm> <source src=bruce.mp4> <source src=bruce.ogv> </video>
  13. 13. <video controls> <source src=bruce.mp4> <source src=bruce.ogv> </video>
  14. 14. <video> works i n IE6
  15. 15. <video> wo L n .IE6 rks iie
  16. 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. 17. Custom player style
  18. 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. 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. 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. 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. 22. // get & set video.currentTime // half speed video.playbackRate = 0.5 // actual loaded video video.currentSrc // etc
  23. 23. video.ontimeupdate = function () { updatePlayhead(this.currentTime); };
  24. 24. Fullscreen?
  25. 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. 26. Canvas Cooler than a fake Han Solo.
  27. 27. First consider SVG: Standard Vertical Graphing
  28. 28. First consider SVG: Standard Vertical Lie. Graphing
  29. 29. First consider SVG: Standard a lie. Not Vertical Lie. Graphing
  30. 30. SVG: Vector based, good for simple and interactive Canvas: Pixel based, good for pixel manipulation & high animation Check out raphaeljs.com
  31. 31. Mix & match to the technology's strength
  32. 32. pixel pushing
  33. 33. http://mugtug.com/darkroom
  34. 34. var ctx = canvas.getContext('2d'); ctx.getImageData(0,0,w,h)
  35. 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. 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. 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. 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. 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. 40. var px = ctx.getImageData(0, 0, w, h), l = px.data.length, i; for (i = 0; i < l; i += 4) { }
  41. 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. 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. 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. 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. 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. 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. 47. You can do that in SVG, but you can't do this:
  48. 48. http://mrdoob.com
  49. 49. canvas.toDataURL()
  50. 50. canvas.toDataURL()
  51. 51. data:image/ png;base64,iVBORw0KGgoAA AGQCAYAAACAvzbMAAAgAElEQ f2e692YghpAYQuYQQaP9U8Ur Q4gSwXNbREIaqVKlpVFPq6G0 VIhMZJDc3OEM/ 99v7b3P2efcfc49e5+9z9nDd +67PWWd +95liOD8IBAiAAAiAAAjYJxG GAgCAjgAAIgAAIOCIAAXGEDY ACIAACjghAQBxhgyMQAAEQAA IQEEfY4AgEQAAEQAACgjwAAi IBEAABEICAIA +AAAiAAAg4IgABcYQNjkAABE KOCEBAHGGDIxAAARAAAQgI8g
  52. 52. Shims 1. Silverlight Bridge 2. excanvas.js
  53. 53. Storage
  54. 54. Cookies suck. (for most situations)
  55. 55. The code for cookies is painful: so we google it.
  56. 56. "Session" cookies leak across "sessions".
  57. 57. Non-session cookies require "special" date format
  58. 58. Deleting cookies, doesn't delete, but sets it in the past.
  59. 59. Fuck cookies.
  60. 60. Sexy Web Storage FTW
  61. 61. Key/value pair
  62. 62. One API setItem(key, value)
  63. 63. One API setItem(key, value) string* getItem(key)
  64. 64. One API setItem(key, value) string* getItem(key) removeItem(key)
  65. 65. One API setItem(key, value) string* getItem(key) removeItem(key) string key(index)
  66. 66. One API setItem(key, value) string* getItem(key) removeItem(key) string key(index) clear()
  67. 67. One API setItem(key, value) string* getItem(key) removeItem(key) string key(index) clear() .length
  68. 68. Two instances localStorage sessionStorage
  69. 69. localStorage • Persists • Applied to document origin, i.e. scheme/host/port tuple • No expiry
  70. 70. sessionStorage • Lasts whilst on the document origin • Doesn't leak • Exactly the same API as localStorage
  71. 71. var ss = sessionStorage; ss.setItem('version', 12); ss.getItem('version');
  72. 72. rnin g! Wa Values are strings
  73. 73. rnin g! Wa Values are strings Work around: JSON (and http://www.json.org/json2.js)
  74. 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. 75. window.name shim http://gist.github.com/350433
  76. 76. Alternatives
  77. 77. Web SQL Database
  78. 78. IndexedDB
  79. 79. Geolocation
  80. 80. navigator.geolocation
  81. 81. getCurrentPosition watchPosition clearPosition
  82. 82. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  83. 83. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  84. 84. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  85. 85. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  86. 86. var geo = navigator.geolocation; geo.getCurrentPosition(function(data){ map(data.coords.latitude, data.coords.longitude); });
  87. 87. Check your accuracy
  88. 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. 89. Sockets
  90. 90. Move over comet.
  91. 91. Low latency. Direct connection. Simple API.
  92. 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. 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. 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. 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. 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. 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. 98. http://rem.im/collab-drawing
  99. 99. http://rem.im/collab-drawing
  100. 100. http://rem.im/collab-drawing
  101. 101. http://github.com/gimite/web-socket-js/
  102. 102. Partial
  103. 103. Offline
  104. 104. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  105. 105. my.manifest CACHE MANIFEST app.html css/style.css js/app.js #version 13
  106. 106. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  107. 107. t ip Firefox caching <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds” </IfModule>
  108. 108. The Manifest 2. First line must be: CACHE MANIFEST
  109. 109. The Manifest 3. Including page is implicitly included in the cache.
  110. 110. The Manifest 4. Include some versioning to cache bust your manifest # version 16
  111. 111. The Manifest 5. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  112. 112. CACHE MANIFEST CACHE: app.js app.css index.html NETWORK: /live/* FALLBACK: * offline.html
  113. 113. CACHE MANIFEST CACHE: app.js Served from cache app.css index.html NETWORK: /live/* FALLBACK: * offline.html
  114. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 125. File API
  126. 126. files[0].getAsDataURL()
  127. 127. files[0].getAsDataURL()
  128. 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. 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. 130. "Should I be using HTML5 today?"
  131. 131. 1. doctype, script & styles only
  132. 132. 1. doctype, script & styles only 2. New HTML5 elements
  133. 133. 1. doctype, script & styles only 2. New HTML5 elements 3. Existing APIs
  134. 134. 1. doctype, script & styles only 2. New HTML5 elements 3. Existing APIs 4. Shims
  135. 135. Yes.
  136. 136. introducinghtml5.com Yes. @rem remy@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.

×