Post on 02-Jul-2015
description
seu navegador não é mais o mesmo
@caio_gondim
@almirfilho
HTML5
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
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
geração gráfica dinâmica
google charts
bing maps
vexflow.com
svg naprá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áficosanimados
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
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
acesso a dispositivos
microfonecâmerageolocalização
geolocalização
microfonecâmera
posição de um objeto em relação a superfície do planeta
coordenadas geográficas
coordenadas geográficaslatitude: 02º 32’ Slongitude: 44º 17’ W
geolocalização torna-se cada vez mais importante
isto não é diferente na web
serviços de mapas
• google maps
• yahoo! maps
• bing maps
redes sociais
• foursquare
• gowalla
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
acessoa partir de dispositivos móveis
grandecrescimentode dispositivosmó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 onavegadorobtém minha posiçãogeográfica?
onde estou?
navegador
gps
antenas
wi-fi
IPSO
onde estou?
navegador
gps
antenas
wi-fi
IPSO
onde estou?
navegador
gps
antenas
wi-fi
IPSO
onde estou?
navegador
gps
antenas
wi-fi
IPSO
interface comumde 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 é comodizer algo
semântica é o significadopor trásdo que foi dito
criar dados ewebsites que máquinassejam capazes de entender
problemas atuais
sistema de documentosligados entre si escritos emHTML
HTMLdescreve asintaxe, não osignificado
<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ânticahoje
uma tentativa de facilitar que máquinas entendam o 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
conectividade
web sockets
bidirecional
full-duplex
baixalatê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 header2 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 kB
ws://
aplicações
aplicações
• jogos online multiplayer
• timeline de redes sociais
• chat
- 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
obrigado
@caio_gondim
@almirfilho
obrigado
@caio_gondim
@almirfilho
dúvidas?