HTML5 - Seu navegador não é mais o mesmo

212b8b6589f7e98dae14e6517101f427?s=47 Caio Gondim
December 05, 2011

HTML5 - Seu navegador não é mais o mesmo

Apresentação que usamos nos eventos 3.PHP, em São Luís - MA, e no PHP Conference 2011, em São Paulo - SP

212b8b6589f7e98dae14e6517101f427?s=128

Caio Gondim

December 05, 2011
Tweet

Transcript

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

  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. 3D, gráficos & efeitos

  6. svg canvas webGL css3 3D

  7. svg canvas webGL css3 3D

  8. svg

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

    •animações
  10. por que svg?

  11. alta qualidade gráfica

  12. economia de banda

  13. geração gráfica dinâmica

  14. google charts

  15. bing maps

  16. vexflow.com

  17. None
  18. None
  19. svg na prática

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

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

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

  23. suporte 3.2 3.0 4.0 9.0 3.2 3.0

  24. canvas

  25. <canvas> desenho 2D API javaScript

  26. controle a nível de pixel

  27. gráficos animados

  28. None
  29. None
  30. None
  31. None
  32. sem plug-ins

  33. canvas na prática

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

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

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

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

  38. suporte 3.1 2.0 4.0 9.0 3.2 2.1

  39. webGL

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

    3D •aceleração de hardware
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. suporte 5.0 5.0 4.0 7.0 10.0 3.0

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

  50. 3D, gráficos & efeitos

  51. acesso a dispositivos

  52. microfone câmera geolocalização

  53. geolocalização microfone câmera

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

  55. coordenadas geográficas

  56. coordenadas geográficas latitude: 02º 32’ S longitude: 44º 17’ W

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

  58. isto não é diferente na web

  59. serviços de mapas •google maps •yahoo! maps •bing maps

  60. redes sociais •foursquare •gowalla

  61. e-gov

  62. ferramentas SEO

  63. google analytics

  64. None
  65. localização = contexto

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

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

  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. publicidade direcionada

  76. acesso a partir de dispositivos móveis

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

  78. 0 MM 500 MM 1.000 MM 1.500 MM 2.000 MM

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

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

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

  82. como o navegador obtém minha posição geográfica?

  83. None
  84. onde estou? navegador gps antenas wi-fi IP SO

  85. onde estou? navegador gps antenas wi-fi IP SO

  86. onde estou? navegador gps antenas wi-fi IP SO

  87. onde estou? navegador gps antenas wi-fi IP SO

  88. interface comum de acesso

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

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

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

  93. suporte 5.0 3.5 5.0 9.0 3.2 2.1

  94. acesso a dispositivos

  95. semântica

  96. sintaxe é o estudo da gramática

  97. semântica é o estudo do significado

  98. sintaxe é como dizer algo

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

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

  101. problemas atuais

  102. sistema de documentos ligados entre si escritos em HTML

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

  104. <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>
  105. <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>
  106. <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>
  107. <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>
  108. <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>
  109. schema.org

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

  111. schema.org na prática

  112. <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>
  113. <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>
  114. <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>
  115. <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>
  116. <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>
  117. <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>
  118. filme avatar ficção científica james cameron <a> nome gênero trailer

    diretor
  119. <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>
  120. <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>
  121. <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>
  122. <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>
  123. <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>
  124. <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>
  125. filme avatar ficção científica pessoa <a> nome gênero trailer diretor

    james cameron 16 de agosto de 1954 nome data de nascimento
  126. None
  127. 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
  128. web semântica hoje

  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. uma tentativa de facilitar que máquinas entendam o significado, das

    informações na web
  137. 1.197 bytes de header SkyNet ?

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

    a web para melhor nos servir
  139. semântica

  140. conectividade

  141. web sockets

  142. bidirecional

  143. full-duplex

  144. baixa latência

  145. 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) }) }
  146. navegador servidor http polling

  147. navegador servidor http polling requisição 1

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

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

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

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

  153. navegador conexão servidor web socket

  154. navegador conexão quadro 1 servidor web socket

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

    servidor web socket
  156. economia de banda

  157. 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
  158. 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
  159. 1.197 bytes de header 1.197 bytes de header

  160. 1.197 bytes de header web socket header 2 bytes

  161. 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 kB
  162. ws://

  163. aplicações

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

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

  167. suporte 4.2 5.0 6.0 14.0 10.0

  168. conectividade

  169. obrigado @caio_gondim @almirfilho

  170. obrigado @caio_gondim @almirfilho

  171. dúvidas?