HTML5
seu navegador não
é mais o mesmo
@caio_gondim
@almirfilho
semântica
armazenamento & offline
acesso à dispositivos
conectividade
css3
3D, gráficos & efeitos
performance
multimídia
semântica
armazenamento & offline
acesso à dispositivos
conectividade
css3
3D, gráficos & efeitos
performance
multimídia
acesso a dispositivos
microfone
câmera
geolocalização
geolocalização
microfone
câmera
posição de um
objeto em relação
a superfície do
planeta
a geolocalização
torna-se cada
vez mais
importante
isto não é
diferente na
web
serviços de
mapas
redes sociais
e-gov
ferramentas SEO
google analytics
localização = contexto
localização = contexto
maior relevância
busca e
recomendação
baseadas em
localização
publicidade
direcionada
google adWords
acesso a partir
de dispositivos
móveis
grande crescimento
de dispositivos
móveis conectados
à internet
0 MM
500 MM
1.000 MM
1.500 MM
2.000 MM
2007 2009 2011 2013 2015
internet móvel internet desktop
0 MM
500 MM
1.000 MM
1.500 MM
2.000 MM
2007 2009 2011 2013 2015
internet móvel internet desktop
≃ 2014
desktop
•posição fixa
•localização aproximada
dispositivo móvel
•posição variável
•localização mais exata
como o
navegador obtém
minha posição
geográfica?
• gps
• sinal de celular
• redes wi-fi
• IP sniffing
recursos
onde estou?
navegador
gps
sinal celular
wi-fi
IP
SO
onde estou?
navegador
gps
sinal celular
wi-fi
IP
SO
onde estou?
navegador
gps
sinal celular
wi-fi
IP
SO
onde estou?
navegador
gps
sinal celular
wi-fi
IP
SO
interface
comum de
acesso
if( navigator.geolocation ){
	 // navegador suporta geolocalização
}
// fazendo uma requisição
navigator.geolocation.getCurrentPosition( showMap )
// função callback
function showMap( positio...
position = {
	 coords: {
	 	 latitude: -35.29873363499, // graus
	 	 longitude: 123.44334887755,// graus
	 	 altitude: 400...
suporte
4.0 10.0
3.0
suporte
5.0
3.5
5.0
9.03.2
2.1
acesso a dispositivos
semântica
sintaxe é o
estudo da
gramática
semântica é o
estudo do
significado
sintaxe é como
dizer algo
semântica é o
significado por
trás do que foi
dito
semântica
=
desambiguação
criar dados e
websites que
máquinas sejam
capazes de entender
problemas
atuais
sistema de
documentos ligados
entre si escritos em
HTML
HTML descreve
a sintaxe, não o
significado
<div>
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	 <span>(16 de agosto de 1954)</span>
	 </p>
	...
<div>
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	 <span>(16 de agosto de 1954)</span>
	 </p>
	...
<div>
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	 <span>(16 de agosto de 1954)</span>
	 </p>
	...
<div>
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	 <span>(16 de agosto de 1954)</span>
	 </p>
	...
<div>
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	 <span>(16 de agosto de 1954)</span>
	 </p>
	...
schema.org
schema.org
• consórcio entre google,
bing e yahoo!
• microdata
schema.org
na prática
<div>
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	 <span>(16 de agosto de 1954)</span>
	 </p>
	...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1>Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Cameron</span>
	 	...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span>James Ca...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span itemprop...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span itemprop...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span itemprop...
filme
avatar
ficção
científica
james
cameron
<a>
nome
gênero trailer
diretor
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p>
	 	 Diretor:
	 	 <span itemprop...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p itemprop="director">
	 	 Diretor...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p itemprop="director"
	 	 itemscop...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p itemprop="director"
	 	 itemscop...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p itemprop="director"
	 	 itemscop...
<div itemscope itemtype="http://schema.org/Movie">
	 <h1 itemprop="name">Avatar</h1>
	 <p itemprop="director"
	 	 itemscop...
filme
avatar
ficção
científica
pessoa
<a>
nome
gênero trailer
diretor
james
cameron
16 de
agosto de
1954
nome data de
nasc...
receita
filme
pessoa
artigo
seriado de TV
pintura
evento
empresas
loja
aeroporto
playground
vulcão
atração Turística
templ...
web semântica
hoje
uma tentativa de
facilitar que máquinas
entendam a semântica,
ou significado, das
informações na web
1.197 bytes de
header
SkyNet ?
1.197 bytes de
header
fazer com que as
máquinas entendam
a web para melhor
nos servir
semântica
3D, gráficos & efeitos
svg
canvas
webGL
css3 3D
svg
canvas
webGL
css3 3D
svg
svg
•gráficos vetoriais 2D
•especificação HTML5
•suporte completo DOM
•css
•animações
por que svg?
alta
qualidade
gráfica
economia
de banda
google charts
bing maps
vexflow.com
(Vídeo IE9: SVG Girl)
jsdo.it/event/svggirl
svg na prática
<!DOCTYPE HTML>
<html>
<header>...</header>
<body>
<svg>
<rect width="50" height="50" fill="red" />
</svg>
</body>
</html>
<!DOCTYPE HTML>
<html>
<header>...</header>
<body>
<svg>
<rect width="50" height="50" fill="red" />
</svg>
</body>
</html>
suporte
suporte
3.2
3.0
4.0
9.03.2
3.0
canvas
<canvas>
desenho 2D
API javaScript
controle a nível de pixel
gráficos animados
(Vídeo Angry Birds online)
(Vídeo Sketchpad: online paint)
mugtug.com/sketchpad
sem plug-ins
canvas na
prática
<!DOCTYPE HTML>
<html>
<header>...</header>
<body>
<canvas id="myCanvas" width="800" height="600">
Seu navegador não supor...
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
 
context.moveTo(100, 150)
context....
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
 
context.moveTo(100, 150)
context....
suporte
suporte
3.1
2.0
4.0
9.03.2
2.1
webGL
webGL
•openGL na web
•API javaScript
•usa <canvas>
•2D e 3D
•aceleração de hardware
(Vídeo Quake 3)
media.tojicode.com/q3bsp
(Vídeo WebGL skin renderer)
altaredqualia.com/three/examples/webgl_materials_skin.html
(Vídeo HelloRacer)
helloracer.com/webgl/
(Vídeo Google Maps 3D)
suporte
5.0
5.0
4.0
7.0
10.0
3.0
suporte
5.1*
4.0*
8.0*
* = suporte parcial
3D, gráficos & efeitos
conectividade
web sockets
bidirecional
full-duplex
baixa latência
http polling
var polling = function() {
$.getJSON(url, function(data) {
// captura msg do server
console.log('Server: ' + ...
navegador
servidor
http polling
navegador
servidor
http polling
requisição1
navegador
servidor
http polling
requisição1
resposta1
navegador
servidor
http polling
requisição1
resposta1
requisição2
navegador
servidor
http polling
requisição1
resposta1
requisição2
requisiçãon
resposta2
respostan
web socket
// inicia conexão
var conexao = new WebSocket(socketUrl)
// evento disparado sempre que
// o server envia mensa...
navegador
servidor
web socket
navegador
conexão
servidor
web socket
navegador
conexão
quadro1
servidor
web socket
navegador
conexão
quadro1
quadro2
quadro3
quadron
servidor
web socket
economia de
banda
GET / HTTP/1.1
Host: www.facebook.com
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
User-Agent: Mozilla/...
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...
1.197 bytes de
header
1.197 bytes
de header
1.197 bytes de
header
web socket
header
2 bytes
01500300045006000
10 100 500 1.000 5.000
0,156 1,563 7,813 15,625 78,12511,689 116,895
584,473
1.168,945
5.844,727
http we...
ws://
aplicações
aplicações
•jogos online multiplayer
•timeline de redes sociais
•chat
(Vídeo Racer Car com iPhone)
demo.kaazing.com/racer/
- ian hickson
“reduzir kilobytes de dados
para 2 bytes...e reduzir a
latência de 150ms para 50ms é
muito mais que um simpl...
suporte
4.2
5.0
6.0
14.0
10.0
suporte
4.2
5.0
6.0
14.0
10.0
conectividade
dúvidas?
obrigado
@caio_gondim
@almirfilho
obrigado
@caio_gondim
@almirfilho
loopinfinito.com.br
@loopinfinito
obrigado
m
mirfilho
loopinfinito.com.br
@loopinfinito
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
HTML5: seu navegador não é mais o mesmo
Próximos SlideShares
Carregando em…5
×

HTML5: seu navegador não é mais o mesmo

352 visualizações

Publicada em

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

Publicada em: Software
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
352
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5: seu navegador não é mais o mesmo

  1. 1. HTML5 seu navegador não é mais o mesmo @caio_gondim @almirfilho
  2. 2. semântica armazenamento & offline acesso à dispositivos conectividade css3 3D, gráficos & efeitos performance multimídia
  3. 3. semântica armazenamento & offline acesso à dispositivos conectividade css3 3D, gráficos & efeitos performance multimídia
  4. 4. acesso a dispositivos
  5. 5. microfone câmera geolocalização
  6. 6. geolocalização microfone câmera
  7. 7. posição de um objeto em relação a superfície do planeta
  8. 8. a geolocalização torna-se cada vez mais importante
  9. 9. isto não é diferente na web
  10. 10. serviços de mapas
  11. 11. redes sociais
  12. 12. e-gov
  13. 13. ferramentas SEO
  14. 14. google analytics
  15. 15. localização = contexto
  16. 16. localização = contexto maior relevância
  17. 17. busca e recomendação baseadas em localização
  18. 18. publicidade direcionada
  19. 19. google adWords
  20. 20. acesso a partir de dispositivos móveis
  21. 21. grande crescimento de dispositivos móveis conectados à internet
  22. 22. 0 MM 500 MM 1.000 MM 1.500 MM 2.000 MM 2007 2009 2011 2013 2015 internet móvel internet desktop
  23. 23. 0 MM 500 MM 1.000 MM 1.500 MM 2.000 MM 2007 2009 2011 2013 2015 internet móvel internet desktop ≃ 2014
  24. 24. desktop •posição fixa •localização aproximada
  25. 25. dispositivo móvel •posição variável •localização mais exata
  26. 26. como o navegador obtém minha posição geográfica?
  27. 27. • gps • sinal de celular • redes wi-fi • IP sniffing recursos
  28. 28. onde estou? navegador gps sinal celular wi-fi IP SO
  29. 29. onde estou? navegador gps sinal celular wi-fi IP SO
  30. 30. onde estou? navegador gps sinal celular wi-fi IP SO
  31. 31. onde estou? navegador gps sinal celular wi-fi IP SO
  32. 32. interface comum de acesso
  33. 33. if( navigator.geolocation ){ // navegador suporta geolocalização }
  34. 34. // fazendo uma requisição navigator.geolocation.getCurrentPosition( showMap ) // função callback function showMap( position ){ // aqui podemos mostrar o mapa com os // dados de position }
  35. 35. 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 }
  36. 36. suporte 4.0 10.0 3.0
  37. 37. suporte 5.0 3.5 5.0 9.03.2 2.1
  38. 38. acesso a dispositivos
  39. 39. semântica
  40. 40. sintaxe é o estudo da gramática
  41. 41. semântica é o estudo do significado
  42. 42. sintaxe é como dizer algo
  43. 43. semântica é o significado por trás do que foi dito
  44. 44. semântica = desambiguação
  45. 45. criar dados e websites que máquinas sejam capazes de entender
  46. 46. problemas atuais
  47. 47. sistema de documentos ligados entre si escritos em HTML
  48. 48. HTML descreve a sintaxe, não o significado
  49. 49. <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>
  50. 50. <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>
  51. 51. <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>
  52. 52. <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>
  53. 53. <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>
  54. 54. schema.org
  55. 55. schema.org • consórcio entre google, bing e yahoo! • microdata
  56. 56. schema.org na prática
  57. 57. <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>
  58. 58. <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>
  59. 59. <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>
  60. 60. <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>
  61. 61. <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>
  62. 62. <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>
  63. 63. filme avatar ficção científica james cameron <a> nome gênero trailer diretor
  64. 64. <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>
  65. 65. <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>
  66. 66. <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>
  67. 67. <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>
  68. 68. <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>
  69. 69. <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>
  70. 70. filme avatar ficção científica pessoa <a> nome gênero trailer diretor james cameron 16 de agosto de 1954 nome data de nascimento
  71. 71. 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
  72. 72. web semântica hoje
  73. 73. uma tentativa de facilitar que máquinas entendam a semântica, ou significado, das informações na web
  74. 74. 1.197 bytes de header SkyNet ?
  75. 75. 1.197 bytes de header fazer com que as máquinas entendam a web para melhor nos servir
  76. 76. semântica
  77. 77. 3D, gráficos & efeitos
  78. 78. svg canvas webGL css3 3D
  79. 79. svg canvas webGL css3 3D
  80. 80. svg
  81. 81. svg •gráficos vetoriais 2D •especificação HTML5 •suporte completo DOM •css •animações
  82. 82. por que svg?
  83. 83. alta qualidade gráfica
  84. 84. economia de banda
  85. 85. google charts
  86. 86. bing maps
  87. 87. vexflow.com
  88. 88. (Vídeo IE9: SVG Girl) jsdo.it/event/svggirl
  89. 89. svg na prática
  90. 90. <!DOCTYPE HTML> <html> <header>...</header> <body> <svg> <rect width="50" height="50" fill="red" /> </svg> </body> </html>
  91. 91. <!DOCTYPE HTML> <html> <header>...</header> <body> <svg> <rect width="50" height="50" fill="red" /> </svg> </body> </html>
  92. 92. suporte
  93. 93. suporte 3.2 3.0 4.0 9.03.2 3.0
  94. 94. canvas
  95. 95. <canvas> desenho 2D API javaScript
  96. 96. controle a nível de pixel
  97. 97. gráficos animados
  98. 98. (Vídeo Angry Birds online)
  99. 99. (Vídeo Sketchpad: online paint) mugtug.com/sketchpad
  100. 100. sem plug-ins
  101. 101. canvas na prática
  102. 102. <!DOCTYPE HTML> <html> <header>...</header> <body> <canvas id="myCanvas" width="800" height="600"> Seu navegador não suporta CANVAS =( </canvas> </body> </html>
  103. 103. var canvas = document.getElementById("myCanvas") var context = canvas.getContext("2d")   context.moveTo(100, 150) context.lineTo(450, 50) context.stroke()
  104. 104. var canvas = document.getElementById("myCanvas") var context = canvas.getContext("2d")   context.moveTo(100, 150) context.lineTo(450, 50) context.stroke()
  105. 105. suporte
  106. 106. suporte 3.1 2.0 4.0 9.03.2 2.1
  107. 107. webGL
  108. 108. webGL •openGL na web •API javaScript •usa <canvas> •2D e 3D •aceleração de hardware
  109. 109. (Vídeo Quake 3) media.tojicode.com/q3bsp
  110. 110. (Vídeo WebGL skin renderer) altaredqualia.com/three/examples/webgl_materials_skin.html
  111. 111. (Vídeo HelloRacer) helloracer.com/webgl/
  112. 112. (Vídeo Google Maps 3D)
  113. 113. suporte 5.0 5.0 4.0 7.0 10.0 3.0
  114. 114. suporte 5.1* 4.0* 8.0* * = suporte parcial
  115. 115. 3D, gráficos & efeitos
  116. 116. conectividade
  117. 117. web sockets
  118. 118. bidirecional
  119. 119. full-duplex
  120. 120. baixa latência
  121. 121. 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) }) }
  122. 122. navegador servidor http polling
  123. 123. navegador servidor http polling requisição1
  124. 124. navegador servidor http polling requisição1 resposta1
  125. 125. navegador servidor http polling requisição1 resposta1 requisição2
  126. 126. navegador servidor http polling requisição1 resposta1 requisição2 requisiçãon resposta2 respostan
  127. 127. 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?')
  128. 128. navegador servidor web socket
  129. 129. navegador conexão servidor web socket
  130. 130. navegador conexão quadro1 servidor web socket
  131. 131. navegador conexão quadro1 quadro2 quadro3 quadron servidor web socket
  132. 132. economia de banda
  133. 133. 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
  134. 134. 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
  135. 135. 1.197 bytes de header 1.197 bytes de header
  136. 136. 1.197 bytes de header web socket header 2 bytes
  137. 137. 01500300045006000 10 100 500 1.000 5.000 0,156 1,563 7,813 15,625 78,12511,689 116,895 584,473 1.168,945 5.844,727 http web socket consumo de banda em kBytes
  138. 138. ws://
  139. 139. aplicações
  140. 140. aplicações •jogos online multiplayer •timeline de redes sociais •chat
  141. 141. (Vídeo Racer Car com iPhone) demo.kaazing.com/racer/
  142. 142. - 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.”
  143. 143. suporte 4.2 5.0 6.0 14.0 10.0
  144. 144. suporte 4.2 5.0 6.0 14.0 10.0
  145. 145. conectividade
  146. 146. dúvidas?
  147. 147. obrigado @caio_gondim @almirfilho
  148. 148. obrigado @caio_gondim @almirfilho loopinfinito.com.br @loopinfinito
  149. 149. obrigado m mirfilho loopinfinito.com.br @loopinfinito

×