HTML5: seu navegador não é mais o mesmo
-
Upload
almir-filho -
Category
Software
-
view
127 -
download
0
description
Transcript of HTML5: seu navegador não é mais o mesmo
HTML5seu 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
microfonecâmerageolocalização
geolocalização
microfonecâ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
IPSO
onde estou?
navegador
gps
sinal celular
wi-fi
IPSO
onde estou?
navegador
gps
sinal celular
wi-fi
IPSO
onde estou?
navegador
gps
sinal celular
wi-fi
IPSO
interface comum de acesso
if( navigator.geolocation ){
// navegador suporta geolocalização
}
// fazendo uma requisiçãonavigator.geolocation.getCurrentPosition( showMap )
// função callbackfunction showMap( position ){ // aqui podemos mostrar o mapa com os // dados de position
}
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}
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> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a></div>
<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>
<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>
<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>
<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>
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> <span>Ficção Científica</span> <a href="../movies/trailer.html"> Trailer </a></div>
<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>
<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>
<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>
<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>
<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>
filme
avatar
ficçãocientífica
jamescameron
<a>
nom
e
gênero trailer
dire
tor
<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>
<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>
<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>
<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>
<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>
<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>
filme
avatar
ficçãocientífica
pessoa
<a>
nom
e
gênero trailer
dire
tor
jamescameron
16 de agosto de
1954
nome data de nascimento
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
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
headerSkyNet ?
1.197 bytes de
header
fazer com que as
máquinas entendam
a web para melhor
nos servir
semântica
3D, gráficos & efeitos
svgcanvaswebGLcss3 3D
svgcanvaswebGLcss3 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 2DAPI 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 suporta CANVAS =( </canvas>
</body></html>
var canvas = document.getElementById("myCanvas")var context = canvas.getContext("2d") context.moveTo(100, 150)context.lineTo(450, 50)context.stroke()
var canvas = document.getElementById("myCanvas")var context = canvas.getContext("2d") context.moveTo(100, 150)context.lineTo(450, 50)context.stroke()
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 serverconsole.log('Server: ' + data)
// executa a função a cada 5ssetTimeout(polling, 5000)
})}
navegador
servidor
http polling
navegador
servidor
http pollingre
quisi
ção
1
navegador
servidor
http pollingre
quisi
ção
1
resp
osta
1
navegador
servidor
http pollingre
quisi
ção
1
resp
osta
1
requ
isiçã
o 2
navegador
servidor
http pollingre
quisi
ção
1
resp
osta
1
requ
isiçã
o 2
requ
isiçã
o n
resp
osta
2
resp
osta
n
web socket// inicia conexãovar conexao = new WebSocket(socketUrl)
// evento disparado sempre que// o server envia mensagensconexao.onmessage = function(event) {console.log('Server: ' + event.data)
}
// envia uma msg para o serverconexao.send('Sup?')
navegador
servidor
web socket
navegador
cone
xão
servidor
web socket
navegador
cone
xão
quad
ro 1
servidor
web socket
navegador
cone
xão
quad
ro 1
quad
ro 2
quad
ro 3
quad
ro n
servidor
web socket
economia de
banda
GET / HTTP/1.1Host: www.facebook.comConnection: keep-aliveCache-Control: no-cachePragma: no-cacheUser-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.7Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3Cookie: 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_5f545486705F6EriF0CEstateFDutF1318603142905EvisF1H0EblcF0EsndF0OQ1318603124EsF0CEblFDacF57G318603106PEuoFD1B01815847822FDexpF1318603189266EflF_5b_5dEolF-1CCCC
http request
header
HTTP/1.1 200 OKCache-Control: private, no-cache, no-store, must-revalidateExpires: Sat, 01 Jan 2000 00:00:00 GMTP3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"Pragma: no-cacheContent-Encoding: gzipContent-Type: text/html; charset=utf-8X-FB-Server: 10.140.153.106X-Cnection: closeTransfer-Encoding: chunkedDate: Fri, 14 Oct 2011 15:54:22 GMT
http response
header
1.197 bytes de
header
1.197 bytes
de header
1.197 bytes de
header
web socket
header
2 bytes
015
0030
0045
0060
00
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
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 simples
detalhe. na verdade, estes
fatores sozinhos já são
suficientes para fazer com que
o web socket se torne muito
interessante ao google.”
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
@caio_gondim
@almirfilho
loopinfinito.com.br
@loopinfinito