SlideShare uma empresa Scribd logo
1 de 162
Baixar para ler offline
HTML5
Friend or Foe?
The Open Web
  Friend or Foe?
Remy Sharp.
Non-Flash-er.
http://remysharp.com/html5-spell-death-to-flash/
"Flash is dead!"
Is Flash is dead?
Should Flash
be worried?
HTML5: friend or foe (to Flash)?
Video killed the
radio Flash star?
http://youtube.com/watch?v=uofWfXOzX-g
Flash based

• Capture video
• Encode to FLV
• Upload/create SWF to play FLV
• Copy & paste <object> code
Flash based

• Capture video
• Encode to FLV
• Upload/create SWF to play FLV
         create

• Copy & paste <object> code
Open web based

• Capture video
• Encode to mp4
• Add
  <video src="foo.mp4" />
<video src="dizzy.mp4" />
<video src="dizzy.mp4" controls/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset=utf-8 />
  <title>Video Example</title>
</head>
<body>
<video src="dizzy.mp4" controls/>
</body>
</html>
HTML5: friend or foe (to Flash)?
Scripting
HTML5: friend or foe (to Flash)?
var video = document.getElementsByTagName('video')[0];
if (video.paused) {
  video.play();
}
var video = document.getElementsByTagName('video')[0];
if (video.paused) {
  video.play();
}

// position & asTime defined elsewhere
video.addEventListener('timeupdate', function () {
  positon.innerHTML = asTime(this.currentTime);
}, false);
API
•   play(), pause(), canPlayType(t)
API
•   play(), pause(), canPlayType(t)

•   currentTime, paused, duration,
    loop, autoplay, muted, volume, etc
API
•   play(), pause(), canPlayType(t)

•   currentTime, paused, duration,
    loop, autoplay, muted, volume, etc

•   progress, stalled, play, pause,
    waiting, canplay, seeking,
    timeupdate
Fullscreen?
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.
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.
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Pros
Pros

• No plugins required
Pros

• No plugins required
• Simple API: play(), pause() etc
Pros

• No plugins required
• Simple API: play(), pause() etc
• Video & Audio API the same
Pros

• No plugins required
• Simple API: play(), pause() etc
• Video & Audio API the same
• Player chrome is HTML & CSS
Cons
Cons

• Accessibility?
HTML5: friend or foe (to Flash)?
Cons

• Accessibility?
Cons

• Accessibility?
• Codecs
Cons

• Accessibility?
• Codecs
• IE
HTML5: friend or foe (to Flash)?
<video src="dizzy.mp4" controls/>
<video controls>
  <source src="dizzy.ogv" />
  <source src="dizzy.mp4" />
</video>
Video for Everybody
<video width="640" height="360" poster="dizzy.jpg" controls>
  <source src="dizzy.ogv" type="video/ogg" />
  <source src="dizzy.mp4" type="video/mp4" /><!--[if gt IE 6]>
  <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
  [endif]--><!--[if !IE]><!-->
  <object width="640" height="375" type="video/quicktime" data="dizzy.mp4">
  <!--<![endif]-->
  <param name="src" value="dizzy.mp4" />
  <param name="showlogo" value="false" />
  <object width="640" height="380" type="application/x-shockwave-flash"
    data="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4">
    <param name="movie" value="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4" />
    <img src="dizzy.jpg" width="640" height="360" alt="Title of video"
         title="No video playback capabilities, please download the video below" />
  </object><!--[if gt IE 6]><!--></object><!--<![endif]-->
</video>
<p>Download Video: <a href="dizzy.mp4">High Quality "MP4"</a> | <a href="dizzy.ogv">Low
Quality "OGG"</a></p>




   http://camendesign.com/code/video_for_everybody
Flash will be
needed for video
 for a while yet.
fonts
sIFR & Cufon
HTML5: friend or foe (to Flash)?
• Native font rendering
• IE works via EOT

• Doesn't work in Firefox 3 - 7%
Streaming
Sockets
HTML5: friend or foe (to Flash)?
• Pushed data relies on Flash
• Pushed data relies on Flash
• If no Flash, switches to polling
• Pushed data relies on Flash
• If no Flash, switches to polling
• Polling bad for high concurrency
• Had to work in corporate environment
• Corp env were blocking odd traffic &
  Flash

• Needed to be pure JS solution
• It's possible, but complicated
WebSocket
var ws = new WebSocket("ws://hostname:80/");

ws.onmessage = function (event) {
   // message in, let's convert it to JSON
   var data = JSON.parse(event.data);
};

ws.onclose = function () {};

ws.onopen = function () {};
var ws = new WebSocket("ws://localhost:8080/");
ws.onmessage = function(event) {
  var data = JSON.parse(event.data);
  var p = $(twitterlib.render(data));
  if( $('#tweets > li').length > 15) {
    $('#tweets >li:last').slideDown(100, function() {
      $(this).remove();
    });
  }

  $('#tweets').prepend(p);
  p.slideDown(140);
};
ws.onclose = function() {
   alert("socket closed");
};
ws.onopen = function() {
   //alert("connected...");
};
HTML5: friend or foe (to Flash)?
Graphics
2D Graphics
Canvas
HTML5: friend or foe (to Flash)?
Google Analytics - Flash charts




Interactive Demo - Canvas charts
HTML5: friend or foe (to Flash)?
Let's get technical
HTML5: friend or foe (to Flash)?
<!DOCTYPE html>
<html>
<head>
  <title>Canvas</title>
</head>
<body>
  <canvas></canvas>
</body>
</html>
var ctx = canvas.getContext('2d');
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#E4E4E4');
grad.addColorStop(1, '#000');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,600,600);
HTML5: friend or foe (to Flash)?
Let's mix it up
http://html5demos.com/canvas-grad
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event.clientX,
      y = event.clientY,
      rx = 600 * x / width,
      ry = 600 * y / width;

     var xc = parseInt(256 * x / width);
     var yc = parseInt(256 * y / height);

     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
     grad.addColorStop(0, '#000');
     grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')');

     ctx.fillStyle = grad;
     ctx.fillRect(0,0,600,600);
};

              http://html5demos.com/canvas-grad
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,           Caclulate from
      x = event.clientX,                     the mouse the
      y = event.clientY,                       radius and
      rx = 600 * x / width,
      ry = 600 * y / width;
                                                colours

     var xc = parseInt(256 * x / width);
     var yc = parseInt(256 * y / height);

     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
     grad.addColorStop(0, '#000');
     grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')');

     ctx.fillStyle = grad;
     ctx.fillRect(0,0,600,600);
};

              http://html5demos.com/canvas-grad
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event.clientX,
      y = event.clientY,
      rx = 600 * x / width,
      ry = 600 * y / width;
                 Re-render the
     var xc =       gradient
              parseInt(256 * x / width);
     var yc = parseInt(256 * y / height);

     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
     grad.addColorStop(0, '#000');
     grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')');

     ctx.fillStyle = grad;
     ctx.fillRect(0,0,600,600);
};

              http://html5demos.com/canvas-grad
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event.clientX,
      y = event.clientY,
      rx = 600 * x / width,
      ry = 600 * y / width;

     var xc = parseInt(256 * x / width);
     var yc = parseInt(256 * y / height);
                                    Set the new fill
     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
     grad.addColorStop(0, '#000'); style and refill -
                                     the browser
     grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')');
                                   handles the hard
     ctx.fillStyle = grad;
     ctx.fillRect(0,0,600,600);
                                         work
};

              http://html5demos.com/canvas-grad
body.onmousemove = function (event) {
  var width = window.innerWidth,
      height = window.innerHeight,
      x = event.clientX,
      y = event.clientY,
      rx = 600 * x / width,
      ry = 600 * y / width;

     var xc = parseInt(256 * x / width);
     var yc = parseInt(256 * y / height);

     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
     grad.addColorStop(0, '#000');
     grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')');

     ctx.fillStyle = grad;
     ctx.fillRect(0,0,600,600);
};

              http://html5demos.com/canvas-grad
canvas.toDataURL("image/png");
canvas.toDataURL("image/png");
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yez
CzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT+
+fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAs
YQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+nEEn58/
fuQfHehf6/8Ik01rBHyCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN
              data:image/png;base64,...
+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy
+zICBLmscOOuESDIGi+7LyNAkMsKN
+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy
+zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgI//3R3T1m/
7AqdPa5PkLP7Nd2LBAjyIkAvP5sAQc7u13QvEiDIiwC9/
GwCBDm7X9O9SIAgLwL08rMJEOTsfk33IgGCvAjQy88mQJCz+zXdiwR+/i/pLwba/fLPj7/zPe5fH1+7R3P+BgI
+QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55D
gCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQ
IAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzy
FAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/
gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo
+Qb7F4pcI/E
+AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAg
QZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDE
HUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQW
CHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBI
kVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0C
QWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDEC
BIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI
0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHND
ECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUg
TI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
Canvas
     +
drawImage
     +
   Video
     =
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(-1, 1);
ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.drawImage(
  video, 0, 0,
  video.width,
  video.height,
  0, 0,
  canvas.width,
  canvas.height);




http://html5demos.com/video-canvas
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(-1, 1);
ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.drawImage(
  video, 0, 0,
  video.width,
  video.height,
  0, 0,
  canvas.width,
  canvas.height);




http://html5demos.com/video-canvas
ctx.getImageData(0, 0, w, h);
ctx.getImageData(0, 0, w, h);


        0   1    2    3


   0    r   g    b    a


   1    r   g    b    a


  ...   r   g    b    a
pixels.data[i * 4 + 0];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
pixels.data[i * 4 + 1];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
pixels.data[i * 4 + 2];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
pixels.data[i * 4 + 3];


      0   1    2    3


 0    r   g    b    a


 1    r   g    b    a


...   r   g    b    a
for (i = 0; i   < pixels.data.length / 4; i++) {
  totals.r +=   pixels.data[i * 4 + 0]; // r
  totals.g +=   pixels.data[i * 4 + 1]; // g
  totals.b +=   pixels.data[i * 4 + 2]; // b
}

var r =   parseInt(totals.r / (w*h)),
    g =   parseInt(totals.g / (w*h)),
    b =   parseInt(totals.b / (w*h)),
    rgb   = [r, g, b].join(',');
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
SVG
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
...using Flash!
segue: just like
screaming monkey
3D
CSS
Yeah, 3D CSS.
HTML5: friend or foe (to Flash)?
#canvas {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 20em;
}

#rubiks {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(15deg) rotateY(15deg);
}

#rubiks .face1 {
  -webkit-transform: rotateX(90deg) translateZ
(10.8em);
}

#rubiks .face2 { /* front */
  -webkit-transform: translateZ(10.8em);
}

#rubiks .face3 {
  -webkit-transform: rotateY(90deg) translateZ
WebGL
HTML5: friend or foe (to Flash)?
Mobile?
HTML5: friend or foe (to Flash)?
Offline
Offline Apps


•   Application cache / manifest

•   Events: offline, online
•   navigator.onLine property
Offline Apps


•   Application cache / manifest

•   Events: offline, online
http://icanhaz.com/rubiks
http://icanhaz.com/rubiks
Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>
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
The Manifest

2. First line must be:


    CACHE MANIFEST
The Manifest

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

4. Two futher namespaces:
   NETWORK & FALLBACK

    FALLBACK:
    / offline.html
The Manifest

5. Include some versioning to
   cache bust your manifest


      # version 16
The process
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
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
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
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
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
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
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
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
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
Browser: I have a
     Problem:
Browser: request   Server: serve all   manifest, cache
                                           assets
     Change of content
     requiresBrowser:
 Server: serve
               2 refreshes
                   applicationCache    Browser: reload
manifest assets
                       updated



                     Browser: only
Browser: serve                          Server: 304 Not
                   request manifest
   locally                                 Modified
                         file
applicationCache.onUpdateReady =
function () {
   applicationCache.swapCache();
   notice('reload');
};

window.onOnline =
function () {
   // fire an update to the cache
   applicationCache.update();
};
Web Workers
•   "Threads"
•"Threads"

• Sandboxed
•"Threads"

• Sandboxed
• Debugging can be tricky
HTML5: friend or foe (to Flash)?
http://html5demos.com/worker
app.html
var w = new Worker('worker.js');
app.html
var w = new Worker('worker.js');

w.onmessage = function (event) {
   alert("msg: " + event.data);
};
app.html
var w = new Worker('worker.js');

w.onmessage = function (event) {
   alert("msg: " + event.data);
};

w.postMessage('run');
worker.js
onmessage = function (event) {
   if (event.data == 'run') {
     run();
   }
};

function run() {
  var n = 1;
  search: while (running) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
      if (n % i == 0)
       continue search;
    // found a prime!
    postMessage(n);
  }
}
worker.js
onmessage = function (event) {
   if (event.data == 'run') {
     run();
   }
};

function run() {
  var n = 1;
  search: while (running) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
      if (n % i == 0)
       continue search;
    // found a prime!
    postMessage(n);
  }
}
worker.js
onmessage = function (event) {
   if (event.data == 'run') {
     run();
   }
};

function run() {
  var n = 1;
  search: while (running) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i += 1)
      if (n % i == 0)
       continue search;
    // found a prime!
    postMessage(n);
  }
}
Can dos

• Spawn more workers
• setTimeout/Interval & clear
• Access navigator
• Error handling onerror
• XHR (though responseXML is null)
8 workers   Workers disabled
8 workers   Workers disabled
Geolocation
HTML5: friend or foe (to Flash)?
Not always accurate!
navigator.geolocation.getCurrentPosition(function (geo) {
  console.log(geo);
}, function () {
  // error handler
});
navigator.geolocation.getCurrentPosition(function (geo) {
  console.log(geo);
}, function () {
  // error handler
});
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Microdata,
datagrids,
                  Accessible
XHR2 & upload
progress events   Rich
                  Internet
                  Applications
    History
    manager,
    drag & drop     ...and more!
http://www.w3.org/TR/html5

http://tr.im/whatwg_complete

irc://irc.freenode.net/#whatwg
@rem
remy@leftlogic.com
http://delicious.com/remy.sharp/fb022010

Mais conteúdo relacionado

Mais procurados

HKG18-212 - Trusted Firmware M: Introduction
HKG18-212 - Trusted Firmware M: IntroductionHKG18-212 - Trusted Firmware M: Introduction
HKG18-212 - Trusted Firmware M: IntroductionLinaro
 
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & MicrometerSpring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & MicrometerToshiaki Maki
 
Net Devops Overview
Net Devops OverviewNet Devops Overview
Net Devops OverviewJoel W. King
 
Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...
Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...
Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...HostedbyConfluent
 
MQTT avec Mosquitto et Paho - DevFest Brest 2019
MQTT avec Mosquitto et Paho - DevFest Brest 2019MQTT avec Mosquitto et Paho - DevFest Brest 2019
MQTT avec Mosquitto et Paho - DevFest Brest 2019Laurent Guérin
 
Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!Prashant Kalkar
 
Introduction to eBPF
Introduction to eBPFIntroduction to eBPF
Introduction to eBPFRogerColl2
 
NGINX Back to Basics Part 3: Security (Japanese Version)
NGINX Back to Basics Part 3: Security (Japanese Version)NGINX Back to Basics Part 3: Security (Japanese Version)
NGINX Back to Basics Part 3: Security (Japanese Version)NGINX, Inc.
 
FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...
FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...
FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...James W. De Rienzo
 
eBPF - Rethinking the Linux Kernel
eBPF - Rethinking the Linux KerneleBPF - Rethinking the Linux Kernel
eBPF - Rethinking the Linux KernelThomas Graf
 
Writing the Container Network Interface(CNI) plugin in golang
Writing the Container Network Interface(CNI) plugin in golangWriting the Container Network Interface(CNI) plugin in golang
Writing the Container Network Interface(CNI) plugin in golangHungWei Chiu
 
Controlling multiple VMs with the power of Python
Controlling multiple VMs with the power of PythonControlling multiple VMs with the power of Python
Controlling multiple VMs with the power of PythonYurii Vasylenko
 
Offre technique animation de formation ingenierie de formation
Offre technique animation de formation ingenierie de formationOffre technique animation de formation ingenierie de formation
Offre technique animation de formation ingenierie de formationNabil Gharib
 
Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...
Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...
Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...confluent
 
Spring cloud on kubernetes
Spring cloud on kubernetesSpring cloud on kubernetes
Spring cloud on kubernetesSangSun Park
 
Introduction to Kubernetes Workshop
Introduction to Kubernetes WorkshopIntroduction to Kubernetes Workshop
Introduction to Kubernetes WorkshopBob Killen
 

Mais procurados (20)

HKG18-212 - Trusted Firmware M: Introduction
HKG18-212 - Trusted Firmware M: IntroductionHKG18-212 - Trusted Firmware M: Introduction
HKG18-212 - Trusted Firmware M: Introduction
 
eBPF maps 101
eBPF maps 101eBPF maps 101
eBPF maps 101
 
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & MicrometerSpring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & Micrometer
 
Net Devops Overview
Net Devops OverviewNet Devops Overview
Net Devops Overview
 
Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...
Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...
Highly Available Kafka Consumers and Kafka Streams on Kubernetes with Adrian ...
 
MQTT avec Mosquitto et Paho - DevFest Brest 2019
MQTT avec Mosquitto et Paho - DevFest Brest 2019MQTT avec Mosquitto et Paho - DevFest Brest 2019
MQTT avec Mosquitto et Paho - DevFest Brest 2019
 
Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!Uncover the mysteries of infrastructure as code (iac)!
Uncover the mysteries of infrastructure as code (iac)!
 
Introduction to eBPF
Introduction to eBPFIntroduction to eBPF
Introduction to eBPF
 
NGINX Back to Basics Part 3: Security (Japanese Version)
NGINX Back to Basics Part 3: Security (Japanese Version)NGINX Back to Basics Part 3: Security (Japanese Version)
NGINX Back to Basics Part 3: Security (Japanese Version)
 
Charte de projet
Charte de projetCharte de projet
Charte de projet
 
Acp policies
Acp policiesAcp policies
Acp policies
 
Gantt
GanttGantt
Gantt
 
FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...
FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...
FedRAMP 2.0 Control-Implementation-Summary (CIS) v2 1 cross-matrixed with Fed...
 
eBPF - Rethinking the Linux Kernel
eBPF - Rethinking the Linux KerneleBPF - Rethinking the Linux Kernel
eBPF - Rethinking the Linux Kernel
 
Writing the Container Network Interface(CNI) plugin in golang
Writing the Container Network Interface(CNI) plugin in golangWriting the Container Network Interface(CNI) plugin in golang
Writing the Container Network Interface(CNI) plugin in golang
 
Controlling multiple VMs with the power of Python
Controlling multiple VMs with the power of PythonControlling multiple VMs with the power of Python
Controlling multiple VMs with the power of Python
 
Offre technique animation de formation ingenierie de formation
Offre technique animation de formation ingenierie de formationOffre technique animation de formation ingenierie de formation
Offre technique animation de formation ingenierie de formation
 
Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...
Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...
Industry-ready NLP Service Framework Based on Kafka (Bernhard Waltl and Georg...
 
Spring cloud on kubernetes
Spring cloud on kubernetesSpring cloud on kubernetes
Spring cloud on kubernetes
 
Introduction to Kubernetes Workshop
Introduction to Kubernetes WorkshopIntroduction to Kubernetes Workshop
Introduction to Kubernetes Workshop
 

Destaque

Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Aduci
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015Johannes Thönes
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptRalf Schwoebel
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?Sergii Zhuk
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Stephan Hochdörfer
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App developmentRalf Schwoebel
 
HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web ApplicationAllan Huang
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Stephan Hochdörfer
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)robinzimmermann
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestRalf Schwoebel
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 
El ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicosEl ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicosivazorro
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications Sunny Sharma
 

Destaque (14)

Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009
 
OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015OnConnectionLost: The life of an offline web application - JSUnconf 2015
OnConnectionLost: The life of an offline web application - JSUnconf 2015
 
Updated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with JavascriptUpdated: NW.js - Desktop Apps with Javascript
Updated: NW.js - Desktop Apps with Javascript
 
From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?From JavaEE to Android: Way in one click?
From JavaEE to Android: Way in one click?
 
Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13Offline Strategies for HTML5 Web Applications - oscon13
Offline Strategies for HTML5 Web Applications - oscon13
 
Anatomy of mobile App development
Anatomy of mobile App developmentAnatomy of mobile App development
Anatomy of mobile App development
 
HTML5 Offline Web Application
HTML5 Offline Web ApplicationHTML5 Offline Web Application
HTML5 Offline Web Application
 
Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8Offline strategies for HTML5 web applications - frOSCon8
Offline strategies for HTML5 web applications - frOSCon8
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)HTML5 Offline Web Applications (Silicon Valley User Group)
HTML5 Offline Web Applications (Silicon Valley User Group)
 
HTML5 AppCache: The Manifest
HTML5 AppCache: The ManifestHTML5 AppCache: The Manifest
HTML5 AppCache: The Manifest
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
El ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicosEl ornato limpieza de vías y espacios públicos
El ornato limpieza de vías y espacios públicos
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications
 

Semelhante a HTML5: friend or foe (to Flash)?

codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02PL dream
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014Christian Heilmann
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Chris Alfano
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015Christian Heilmann
 

Semelhante a HTML5: friend or foe (to Flash)? (20)

codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
 

Mais de Remy Sharp

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
Forget the Web
Forget the WebForget the Web
Forget the WebRemy Sharp
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction ImplementationRemy Sharp
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the newRemy Sharp
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the webRemy Sharp
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsRemy Sharp
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless AppsRemy Sharp
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009Remy Sharp
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
 

Mais de Remy Sharp (18)

HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Forget the Web
Forget the WebForget the Web
Forget the Web
 
Interaction Implementation
Interaction ImplementationInteraction Implementation
Interaction Implementation
 
jQuery: out with the old, in with the new
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
Webapps without the web
Webapps without the webWebapps without the web
Webapps without the web
 
TwitterLib.js
TwitterLib.jsTwitterLib.js
TwitterLib.js
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009jQuery Loves Developers - SWDC2009
jQuery Loves Developers - SWDC2009
 
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 

Último

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Último (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

HTML5: friend or foe (to Flash)?

  • 2. The Open Web Friend or Foe?
  • 6. Is Flash is dead?
  • 11. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV • Copy & paste <object> code
  • 12. Flash based • Capture video • Encode to FLV • Upload/create SWF to play FLV create • Copy & paste <object> code
  • 13. Open web based • Capture video • Encode to mp4 • Add <video src="foo.mp4" />
  • 16. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Video Example</title> </head> <body> <video src="dizzy.mp4" controls/> </body> </html>
  • 20. var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); }
  • 21. var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); } // position & asTime defined elsewhere video.addEventListener('timeupdate', function () { positon.innerHTML = asTime(this.currentTime); }, false);
  • 22. API • play(), pause(), canPlayType(t)
  • 23. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc
  • 24. API • play(), pause(), canPlayType(t) • currentTime, paused, duration, loop, autoplay, muted, volume, etc • progress, stalled, play, pause, waiting, canplay, seeking, timeupdate
  • 26. 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.
  • 27. 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.
  • 30. Pros
  • 32. Pros • No plugins required • Simple API: play(), pause() etc
  • 33. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same
  • 34. Pros • No plugins required • Simple API: play(), pause() etc • Video & Audio API the same • Player chrome is HTML & CSS
  • 35. Cons
  • 43. <video controls> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> </video>
  • 44. Video for Everybody <video width="640" height="360" poster="dizzy.jpg" controls> <source src="dizzy.ogv" type="video/ogg" /> <source src="dizzy.mp4" type="video/mp4" /><!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! [endif]--><!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="dizzy.mp4"> <!--<![endif]--> <param name="src" value="dizzy.mp4" /> <param name="showlogo" value="false" /> <object width="640" height="380" type="application/x-shockwave-flash" data="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4"> <param name="movie" value="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4" /> <img src="dizzy.jpg" width="640" height="360" alt="Title of video" title="No video playback capabilities, please download the video below" /> </object><!--[if gt IE 6]><!--></object><!--<![endif]--> </video> <p>Download Video: <a href="dizzy.mp4">High Quality "MP4"</a> | <a href="dizzy.ogv">Low Quality "OGG"</a></p> http://camendesign.com/code/video_for_everybody
  • 45. Flash will be needed for video for a while yet.
  • 46. fonts
  • 49. • Native font rendering • IE works via EOT • Doesn't work in Firefox 3 - 7%
  • 52. • Pushed data relies on Flash
  • 53. • Pushed data relies on Flash • If no Flash, switches to polling
  • 54. • Pushed data relies on Flash • If no Flash, switches to polling • Polling bad for high concurrency
  • 55. • Had to work in corporate environment • Corp env were blocking odd traffic & Flash • Needed to be pure JS solution • It's possible, but complicated
  • 57. var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { // message in, let's convert it to JSON var data = JSON.parse(event.data); }; ws.onclose = function () {}; ws.onopen = function () {};
  • 58. var ws = new WebSocket("ws://localhost:8080/"); ws.onmessage = function(event) { var data = JSON.parse(event.data); var p = $(twitterlib.render(data)); if( $('#tweets > li').length > 15) { $('#tweets >li:last').slideDown(100, function() { $(this).remove(); }); } $('#tweets').prepend(p); p.slideDown(140); }; ws.onclose = function() { alert("socket closed"); }; ws.onopen = function() { //alert("connected..."); };
  • 64. Google Analytics - Flash charts Interactive Demo - Canvas charts
  • 68. <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
  • 69. var ctx = canvas.getContext('2d');
  • 70. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
  • 71. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000');
  • 72. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad;
  • 73. var ctx = canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
  • 77. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 78. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, Caclulate from x = event.clientX, the mouse the y = event.clientY, radius and rx = 600 * x / width, ry = 600 * y / width; colours var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 79. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; Re-render the var xc = gradient parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 80. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); Set the new fill grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); style and refill - the browser grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); handles the hard ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); work }; http://html5demos.com/canvas-grad
  • 81. body.onmousemove = function (event) { var width = window.innerWidth, height = window.innerHeight, x = event.clientX, y = event.clientY, rx = 600 * x / width, ry = 600 * y / width; var xc = parseInt(256 * x / width); var yc = parseInt(256 * y / height); grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); grad.addColorStop(0, '#000'); grad.addColorStop(1, 'rgb('+xc+','+(255-xc)+','+yc+')'); ctx.fillStyle = grad; ctx.fillRect(0,0,600,600); }; http://html5demos.com/canvas-grad
  • 83. canvas.toDataURL("image/png"); data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yez CzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT+ +fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAs YQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+nEEn58/ fuQfHehf6/8Ik01rBHyCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN data:image/png;base64,... +4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy +zICBLmscOOuESDIGi+7LyNAkMsKN +4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy +zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgI//3R3T1m/ 7AqdPa5PkLP7Nd2LBAjyIkAvP5sAQc7u13QvEiDIiwC9/ GwCBDm7X9O9SIAgLwL08rMJEOTsfk33IgGCvAjQy88mQJCz+zXdiwR+/i/pLwba/fLPj7/zPe5fH1+7R3P+BgI +QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55D gCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQ IAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzy FAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/ gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo +Qb7F4pcI/E +AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAg QZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDE HUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQW CHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBI kVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0C QWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDEC BIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI 0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHND ECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUg TI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
  • 84. Canvas + drawImage + Video =
  • 89. ctx.translate(canvas.width/2, canvas.height/2); ctx.scale(-1, 1); ctx.translate(-canvas.width/2, -canvas.height/2); ctx.drawImage( video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height); http://html5demos.com/video-canvas
  • 90. ctx.translate(canvas.width/2, canvas.height/2); ctx.scale(-1, 1); ctx.translate(-canvas.width/2, -canvas.height/2); ctx.drawImage( video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height); http://html5demos.com/video-canvas
  • 92. ctx.getImageData(0, 0, w, h); 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 93. pixels.data[i * 4 + 0]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 94. pixels.data[i * 4 + 1]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 95. pixels.data[i * 4 + 2]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 96. pixels.data[i * 4 + 3]; 0 1 2 3 0 r g b a 1 r g b a ... r g b a
  • 97. for (i = 0; i < pixels.data.length / 4; i++) { totals.r += pixels.data[i * 4 + 0]; // r totals.g += pixels.data[i * 4 + 1]; // g totals.b += pixels.data[i * 4 + 2]; // b } var r = parseInt(totals.r / (w*h)), g = parseInt(totals.g / (w*h)), b = parseInt(totals.b / (w*h)), rgb = [r, g, b].join(',');
  • 100. SVG
  • 105. 3D
  • 108. #canvas { -webkit-perspective: 800; -webkit-perspective-origin: 50% 20em; } #rubiks { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(15deg) rotateY(15deg); } #rubiks .face1 { -webkit-transform: rotateX(90deg) translateZ (10.8em); } #rubiks .face2 { /* front */ -webkit-transform: translateZ(10.8em); } #rubiks .face3 { -webkit-transform: rotateY(90deg) translateZ
  • 109. WebGL
  • 114. Offline Apps • Application cache / manifest • Events: offline, online • navigator.onLine property
  • 115. Offline Apps • Application cache / manifest • Events: offline, online
  • 118. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  • 119. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  • 121. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  • 122. The Manifest 2. First line must be: CACHE MANIFEST
  • 123. The Manifest 3. Including page is implicitly included in the cache.
  • 124. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  • 125. The Manifest 5. Include some versioning to cache bust your manifest # version 16
  • 127. 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
  • 128. 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
  • 129. 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
  • 130. 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
  • 131. 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
  • 132. 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
  • 133. 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
  • 134. 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
  • 135. 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
  • 136. Browser: I have a Problem: Browser: request Server: serve all manifest, cache assets Change of content requiresBrowser: Server: serve 2 refreshes applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  • 137. applicationCache.onUpdateReady = function () { applicationCache.swapCache(); notice('reload'); }; window.onOnline = function () { // fire an update to the cache applicationCache.update(); };
  • 139. "Threads"
  • 144. app.html var w = new Worker('worker.js');
  • 145. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); };
  • 146. app.html var w = new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run');
  • 147. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var n = 1; search: while (running) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } }
  • 148. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var n = 1; search: while (running) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } }
  • 149. worker.js onmessage = function (event) { if (event.data == 'run') { run(); } }; function run() { var n = 1; search: while (running) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } }
  • 150. Can dos • Spawn more workers • setTimeout/Interval & clear • Access navigator • Error handling onerror • XHR (though responseXML is null)
  • 151. 8 workers Workers disabled
  • 152. 8 workers Workers disabled
  • 156. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  • 157. navigator.geolocation.getCurrentPosition(function (geo) { console.log(geo); }, function () { // error handler });
  • 160. Microdata, datagrids, Accessible XHR2 & upload progress events Rich Internet Applications History manager, drag & drop ...and more!