HTML5 - Seu navegador não é mais o mesmo

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.

C61a787d4d03535b394d39443fbebc16?s=128

Loop Infinito

October 16, 2011
Tweet

Transcript

  1. HTML5 seu navegador não é mais o mesmo @caio_gondim @almirfilho

  2. None
  3. semântica armazenamento & offline acesso à dispositivos conectividade css3 3D,

    gráficos & efeitos performance multimídia
  4. semântica armazenamento & offline acesso à dispositivos conectividade css3 3D,

    gráficos & efeitos performance multimídia
  5. acesso a dispositivos

  6. microfone câmera geolocalização

  7. geolocalização microfone câmera

  8. posição de um objeto em relação a superfície do planeta

  9. a geolocalização torna-se cada vez mais importante

  10. isto não é diferente na web

  11. serviços de mapas

  12. redes sociais

  13. e-gov

  14. ferramentas SEO

  15. google analytics

  16. None
  17. localização = contexto

  18. localização = contexto maior relevância

  19. busca e recomendação baseadas em localização

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. publicidade direcionada

  28. google adWords

  29. acesso a partir de dispositivos móveis

  30. grande crescimento de dispositivos móveis conectados à internet

  31. 0 MM 500 MM 1.000 MM 1.500 MM 2.000 MM

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

    2007 2009 2011 2013 2015 internet móvel internet desktop ≃ 2014
  33. desktop •posição fixa •localização aproximada

  34. dispositivo móvel •posição variável •localização mais exata

  35. None
  36. como o navegador obtém minha posição geográfica?

  37. • gps • sinal de celular • redes wi-fi •

    IP sniffing recursos
  38. None
  39. onde estou? navegador gps sinal celular wi-fi IP SO

  40. onde estou? navegador gps sinal celular wi-fi IP SO

  41. onde estou? navegador gps sinal celular wi-fi IP SO

  42. onde estou? navegador gps sinal celular wi-fi IP SO

  43. interface comum de acesso

  44. if( navigator.geolocation ){ // navegador suporta geolocalização }

  45. // fazendo uma requisição navigator.geolocation.getCurrentPosition( showMap ) // função callback

    function showMap( position ){ // aqui podemos mostrar o mapa com os // dados de position }
  46. 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 }
  47. suporte 4.0 10.0 3.0

  48. suporte 5.0 3.5 5.0 9.0 3.2 2.1

  49. acesso a dispositivos

  50. semântica

  51. sintaxe é o estudo da gramática

  52. semântica é o estudo do significado

  53. sintaxe é como dizer algo

  54. semântica é o significado por trás do que foi dito

  55. semântica = desambiguação

  56. criar dados e websites que máquinas sejam capazes de entender

  57. problemas atuais

  58. sistema de documentos ligados entre si escritos em HTML

  59. HTML descreve a sintaxe, não o significado

  60. <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>
  61. <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>
  62. <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>
  63. <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>
  64. <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>
  65. schema.org

  66. schema.org • consórcio entre google, bing e yahoo! • microdata

  67. schema.org na prática

  68. <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>
  69. <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>
  70. <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>
  71. <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>
  72. <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>
  73. <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>
  74. filme avatar ficção científica james cameron <a> nome gênero trailer

    diretor
  75. <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>
  76. <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>
  77. <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>
  78. <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>
  79. <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>
  80. <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>
  81. filme avatar ficção científica pessoa <a> nome gênero trailer diretor

    james cameron 16 de agosto de 1954 nome data de nascimento
  82. 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
  83. web semântica hoje

  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. uma tentativa de facilitar que máquinas entendam a semântica, ou

    significado, das informações na web
  92. 1.197 bytes de header SkyNet ?

  93. 1.197 bytes de header fazer com que as máquinas entendam

    a web para melhor nos servir
  94. semântica

  95. 3D, gráficos & efeitos

  96. svg canvas webGL css3 3D

  97. svg canvas webGL css3 3D

  98. svg

  99. svg •gráficos vetoriais 2D •especificação HTML5 •suporte completo DOM •css

    •animações
  100. por que svg?

  101. alta qualidade gráfica

  102. economia de banda

  103. google charts

  104. bing maps

  105. vexflow.com

  106. (Vídeo IE9: SVG Girl) jsdo.it/event/svggirl

  107. svg na prática

  108. <!DOCTYPE HTML> <html> <header>...</header> <body> <svg> <rect width="50" height="50" fill="red"

    /> </svg> </body> </html>
  109. <!DOCTYPE HTML> <html> <header>...</header> <body> <svg> <rect width="50" height="50" fill="red"

    /> </svg> </body> </html>
  110. suporte

  111. suporte 3.2 3.0 4.0 9.0 3.2 3.0

  112. canvas

  113. <canvas> desenho 2D API javaScript

  114. controle a nível de pixel

  115. gráficos animados

  116. (Vídeo Angry Birds online)

  117. (Vídeo Sketchpad: online paint) mugtug.com/sketchpad

  118. sem plug-ins

  119. canvas na prática

  120. <!DOCTYPE HTML> <html> <header>...</header> <body> <canvas id="myCanvas" width="800" height="600"> Seu

    navegador não suporta CANVAS =( </canvas> </body> </html>
  121. var canvas = document.getElementById("myCanvas") var context = canvas.getContext("2d") context.moveTo(100, 150)

    context.lineTo(450, 50) context.stroke()
  122. var canvas = document.getElementById("myCanvas") var context = canvas.getContext("2d") context.moveTo(100, 150)

    context.lineTo(450, 50) context.stroke()
  123. suporte

  124. suporte 3.1 2.0 4.0 9.0 3.2 2.1

  125. webGL

  126. webGL •openGL na web •API javaScript •usa <canvas> •2D e

    3D •aceleração de hardware
  127. (Vídeo Quake 3) media.tojicode.com/q3bsp

  128. (Vídeo WebGL skin renderer) altaredqualia.com/three/examples/webgl_materials_skin.html

  129. (Vídeo HelloRacer) helloracer.com/webgl/

  130. (Vídeo Google Maps 3D)

  131. suporte 5.0 5.0 4.0 7.0 10.0 3.0

  132. suporte 5.1* 4.0* 8.0* * = suporte parcial

  133. 3D, gráficos & efeitos

  134. conectividade

  135. web sockets

  136. bidirecional

  137. full-duplex

  138. baixa latência

  139. 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) }) }
  140. navegador servidor http polling

  141. navegador servidor http polling requisição 1

  142. navegador servidor http polling requisição 1 resposta 1

  143. navegador servidor http polling requisição 1 resposta 1 requisição 2

  144. navegador servidor http polling requisição 1 resposta 1 requisição 2

    requisição n resposta 2 resposta n
  145. 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?')
  146. navegador servidor web socket

  147. navegador conexão servidor web socket

  148. navegador conexão quadro 1 servidor web socket

  149. navegador conexão quadro 1 quadro 2 quadro 3 quadro n

    servidor web socket
  150. economia de banda

  151. 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
  152. 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
  153. 1.197 bytes de header 1.197 bytes de header

  154. 1.197 bytes de header web socket header 2 bytes

  155. 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
  156. ws://

  157. aplicações

  158. aplicações •jogos online multiplayer •timeline de redes sociais •chat

  159. (Vídeo Racer Car com iPhone) demo.kaazing.com/racer/

  160. - 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.”
  161. suporte 4.2 5.0 6.0 14.0 10.0

  162. suporte 4.2 5.0 6.0 14.0 10.0

  163. conectividade

  164. dúvidas?

  165. obrigado @caio_gondim @almirfilho

  166. obrigado @caio_gondim @almirfilho loopinfinito.com.br @loopinfinito

  167. obrigado m mirfilho loopinfinito.com.br @loopinfinito