·

+

• Floats são incontroláveis
• Tables não possuem semântica
• position: absolute dificulta "responsive design"
• CSS3 resolve com regions, exclusions, e flexible box.

• CSS Regions Module Level 3
• CSS Flexible Box Layout Module
• CSS Grid Layout
• CSS Hierarchies
• CSS Filter Effects 1.0
• CSS Variables Module Level 1

Aplique efeitos e filtros a qualquer elemento DOM:

      video, img {
        : grayscale(0.5) blur(10px);
      }
    

Leia mais em blog post.

Demo

.cssshade:hover {
  -webkit-filter: custom(url(shaders/vertex/crumple.vs) 
    mix(url(shaders/fragment/crumple.fs) multiply source-atop), 
    50 50 border-box, 
    transform perspective(1000) scale(1) 
      rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
    amount 1, strength 0.4, lightIntensity 1);  
  }
  

Confirme que o flag CSS Shaders está ativado em chrome://flags e passe o mouse sobre o código acima.

Web Workers

index.html

function startWorker(settings) {
  var myWorker = new Worker('scripts/worker.js');
  myWorker.addEventListener("message", workerListener, false);
  myWorker.postMessage(settings);
}                     

Worker.js

self.addEventListener('message', function(e) {
  doSomeWork();
}
function doSomeWork() {
  importScripts('js/script1.js');
  ...
  postMessage(result);
}     

Abrindo um filesystem:

window.(
  TEMPORARY,        // PERSISTENT vs. TEMPORARY
  1024 * 1024,      // tamanho (bytes) requerido
  initFs,           // callback de sucesso
  opt_errorHandler  // callback de erro
);    

• Segurança: o FS é sandboxed
• Apps nativas acessam arquivos/diretórios... web apps também!
• Uso: cache dinâmico e controlado

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {









};
xhr.send();    

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {







  }, onError);
};
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {




    
    }, onError);
  }, onError);
};
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) { ... };
        writer.onerror = function(e) { ... };
        writer.write(new Blob([xhr.response], {type: 'image/png'}));
      }, onError);
    }, onError);
  }, onError);
};
xhr.send();

• Arquivos/diretórios recebem uma ( filesystem: ) URL:

filesystem:http://example.com/temporary/image.png

• Uso em src/href:

var img = document.createElement('img');
img.src = fileEntry.toURL();
document.body.appendChild(img);

• Qual o FileEntry de uma URL filesystem:?

window.(img.src, 
  function(fileEntry) { ... });

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  window.(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {

      fileEntry.createWriter(function(writer) {
        writer.onwriteend = function(e) { ... };
        writer.onerror = function(e) { ... };
        writer.write(new Blob([xhr.response], {type: 'image/png'}));
      }, onError);
    }, onError);
  }, onError);
};

xhr.send();

Biblioteca que implementa comandos UNIX (ls, cp, mv)

var filer = new Filer();

filer.init({persistent: false, size: 1024 * 1024}, function(fs) {...}, onError);

filer.ls('path/to/some/dir/', function(entries) { ... }, onError);

filer.cp('file.txt', '/path/to/folder', 'newname.txt', function(entry) {
    // entry.fullPath == '/path/to/folder/newname.txt'
}, onError);

var b = new Blob(['body { color: red; }'], {type: 'text/css'});
filer.write('styles.css', {data: b, type: b.type}, function(entry, writer) {
  ...
}, onError);

function downloadLink(name, content, mimetype) {
  var a = document.createElement('a');
  a.href = window.(
    new Blob([content], {type: mimetype}));
  a.download = name;
  a.textContent = 'Download pronto';

  document.body.appendChild(a);
}

downloadLink('MyNovel.txt', 
            document.querySelector('textarea').textContent, 
            'text/plain');
  

WebRTC: acesso à câmera e ao microfone sem plugins

navigator.({audio: true, video: true}, 
  function(stream) {
    var video = document.querySelector('video');
    video.src = window.(stream);
  }, function(e) {
    console.log(e);
  });

  <video autoplay controls></video>

• Photo booth
• Demo do WebRTC no Google App Engine
• Live Effects
• Realidade aumentada
• WebGL Live TV
• Instant Camera
• Explode Video

      <input type="button" value="♦" onclick="record(this)">
      <input type="button" value="◼" onclick="stop(this)">

      var localMediaStream, recorder;

      var record = function(button) {
        recorder = localMediaStream.record();
      };

      var stop = function(button) {
        localMediaStream.stop();
        recorder.getRecordedData(function(blob) {
          // Upload blob using XHR2.
        });
      };

• Technitone
• Plink
• Bohemian Rhapsichord
• 3D Audio Visualizer
• GAL 9000
• HTML5Wow Visualizer
• WebGL City
• Sound Toy

• WebSockets tinham as mesmas limitações que WebWorkers.
• Agora aceitam File, Blob, ou ArrayBuffer!

var socket = new WebSocket('ws://example.com/sock', ['dumby-protocol']);
socket.binaryType = 'blob'; // or 'arraybuffer'
socket.onopen = function(e) {
  window.setInterval(function() {
    if (socket.bufferedAmount == 0) {
      socket.send(new Blob([blob1, blob2]));
    }
  }, 50); // executa a cada 50ms apenas
};
socket.onmessage = function(e) {
  document.querySelector('img').src = (e.data);
};