Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5: Seu navegador não é mais o mesmo

Almir Filho
October 16, 2011

HTML5: Seu navegador não é mais o mesmo

Uma breve revisão de 4 das grandes 8 áreas do HTML5: Acesso a Dispositivos, Semântica, Conectividade e 3D, gráficos e efeitos.

Almir Filho

October 16, 2011
Tweet

More Decks by Almir Filho

Other Decks in Technology

Transcript

  1. 0 MM 500 MM 1.000 MM 1.500 MM 2.000 MM

    2007 2009 2011 2013 2015 internet móvel internet desktop
  2. 0 MM 500 MM 1.000 MM 1.500 MM 2.000 MM

    2007 2009 2011 2013 2015 internet móvel internet desktop ≃ 2014
  3. // fazendo uma requisição navigator.geolocation.getCurrentPosition( showMap ) // função callback

    function showMap( position ){ // aqui podemos mostrar o mapa com os // dados de position }
  4. position = { coords: { latitude: -35.29873363499, // graus longitude:

    123.44334887755,// graus altitude: 400.3, // metros (opcional) accuracy: 12, // metros heading: 45.5, // graus (opcional) speed: 5.4 // metros/s (opcional) }, timestamp: 307770135 // DOMTimeStamp }
  5. <div> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de agosto de

    1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  6. <div> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de agosto de

    1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  7. <div> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de agosto de

    1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  8. <div> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de agosto de

    1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  9. <div> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de agosto de

    1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  10. <div> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de agosto de

    1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  11. <div itemscope itemtype="http://schema.org/Movie"> <h1>Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16 de

    agosto de 1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  12. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p> Diretor: <span>James Cameron</span> <span>(16

    de agosto de 1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  13. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p> Diretor: <span itemprop="director">James Cameron</span>

    <span>(16 de agosto de 1954)</span> </p> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  14. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p> Diretor: <span itemprop="director">James Cameron</span>

    <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a> </div>
  15. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p> Diretor: <span itemprop="director">James Cameron</span>

    <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  16. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p> Diretor: <span itemprop="director">James Cameron</span>

    <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  17. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p itemprop="director"> Diretor: <span>James Cameron</span>

    <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  18. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p itemprop="director" itemscope> Diretor: <span>James

    Cameron</span> <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  19. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p itemprop="director" itemscope itemtype="http://schema.org/Person"> Diretor:

    <span>James Cameron</span> <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  20. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p itemprop="director" itemscope itemtype="http://schema.org/Person"> Diretor:

    <span itemprop="name">James Cameron</span> <span>(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  21. <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <p itemprop="director" itemscope itemtype="http://schema.org/Person"> Diretor:

    <span itemprop="name">James Cameron</span> <span itemprop="birthDate">(16 de agosto de 1954)</span> </p> <span itemprop="genre">Ficção Científica</span> <a href="../movies/trailer.html" itemprop="trailer"> Trailer </a> </div>
  22. filme avatar ficção científica pessoa <a> nome gênero trailer diretor

    james cameron 16 de agosto de 1954 nome data de nascimento
  23. receita filme pessoa artigo seriado de TV pintura evento empresas

    loja aeroporto playground vulcão atração Turística templo hindu parada de ônibus petshop dentista eletricista padaria energia escultura livro música
  24. svg

  25. http polling var polling = function() { $.getJSON(url, function(data) {

    // captura msg do server console.log('Server: ' + data) // executa a função a cada 5s setTimeout(polling, 5000) }) }
  26. web socket // inicia conexão var conexao = new WebSocket(socketUrl)

    // evento disparado sempre que // o server envia mensagens conexao.onmessage = function(event) { console.log('Server: ' + event.data) } // envia uma msg para o server conexao.send('Sup?')
  27. GET / HTTP/1.1 Host: www.facebook.com Connection: keep-alive Cache-Control: no-cache Pragma:

    no-cache User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.904.0 Safari/535.7 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 Cookie: datr=krO6TcAWG-B_o9kNTRiFM6x6; lu=Tg6UHh5wyz8c5ATcjEWfd-vQ; s=Aa7iUafc3lfb8-l9; sid=1; p=71; c_user=545486705; csm=1; sct=1316651618; xs=1%3A1ee7d61311e896dad9e674527eb9a36c%3A1; act=1318603138704%2F6; presence=EM318603143L71N0_5dEp_5f545486705F6EriF0CEstateFDutF1318603142905EvisF1H 0EblcF0EsndF0OQ1318603124EsF0CEblFDacF57G318603106PEuoFD1B01815847822FDexpF131860 3189266EflF_5b_5dEolF-1CCCC http request header
  28. HTTP/1.1 200 OK Cache-Control: private, no-cache, no-store, must-revalidate Expires: Sat,

    01 Jan 2000 00:00:00 GMT P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p" Pragma: no-cache Content-Encoding: gzip Content-Type: text/html; charset=utf-8 X-FB-Server: 10.140.153.106 X-Cnection: close Transfer-Encoding: chunked Date: Fri, 14 Oct 2011 15:54:22 GMT http response header
  29. 0 1500 3000 4500 6000 10 100 500 1.000 5.000

    0,156 1,563 7,813 15,625 78,125 11,689 116,895 584,473 1.168,945 5.844,727 http web socket consumo de banda em kBytes
  30. - ian hickson “reduzir kilobytes de dados para 2 bytes...e

    reduzir a latência de 150ms para 50ms é muito mais que um simples detalhe. na verdade, estes fatores sozinhos já são suficientes para fazer com que o web socket se torne muito interessante ao google.”