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.

Transcript

1. HTML5 seu navegador não é mais o mesmo @caio_gondim @almirfilho
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
17. localização = contexto
18. localização = contexto maior relevância
19. busca e recomendação baseadas em localização
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
36. como o navegador obtém minha posição geográfica?
37. • gps • sinal de celular • redes wi-fi • IP sniffing recursos
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
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