HTML5 - Seu navegador não é mais o mesmo

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

svg
• gráficos vetoriais 2D
• especificação HTML5
• suporte completo DOM
• css
• animações

geração
gráfica
dinâmica

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

suporte
3.2
4.0
3.2 3.0
9.0
3.0

<canvas>
desenho 2D
API javaScript

<!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()

suporte
3.1
4.0
3.2 2.0
9.0
2.1

webGL
• openGL na web
• API javaScript
• usa <canvas>
• 2D e 3D
• aceleração de hardware

suporte
5.0
5.0
7.0
4.0
3.0
10.0

suporte
5.1*
8.0*
4.0*
* = suporte parcial

microfone
câmera
geolocalização

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

coordenadas
geográficas
latitude: 02º 32’ S
longitude: 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

localização = contexto
maior relevância

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

acesso
a partir de
dispositivos
móveis

grande
crescimento
de dispositivos
móveis conectados
à internet

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

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

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?

onde estou?
navegador
gps
antenas
wi-fi
IP
SO

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

// fazendo uma requisição
navigator.geolocation.getCurrentPosition( showMap )
// função callback
function 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
5.0
5.0
3.2 3.5
9.0
2.1

sintaxe é
o estudo da
gramática

semântica é o
estudo do
significado

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

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

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>

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

<div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<p>
Diretor:
</p>
Trailer
</a>
</div>

<h1 itemprop="name">Avatar</h1>
<p>
Diretor:
</p>
Trailer
</a>
</div>

<p>
Diretor:
<span itemprop="director">James Cameron</span>
</p>
Trailer
</a>
</div>

<p>
Diretor:
</p>
<span itemprop="genre">Ficção Científica</span>
Trailer
</a>
</div>

<p>
Diretor:
</p>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>

avatar
filme
ficção
científica
james
cameron
<a>
nome
gênero trailer
diretor

<p itemprop="director">
Diretor:
</p>
Trailer
</a>
</div>

<p itemprop="director"
itemscope>
Diretor:
</p>
Trailer
</a>
</div>

itemscope
itemtype="http://schema.org/Person">
Diretor:
</p>
Trailer
</a>
</div>

itemscope
Diretor:
<span itemprop="name">James Cameron</span>
</p>
Trailer
</a>
</div>

itemscope
Diretor:
<span itemprop="name">James Cameron</span>
<span itemprop="birthDate">(16 de agosto de 1954)</span>
</p>
Trailer
</a>
</div>

avatar
filme
ficção
científica
pessoa
<a>
nome
gênero trailer
diretor
james
cameron
16 de
agosto de
1954
nome data de
nascimento

filme
empresas
receita
pintura
pessoa
artigo
seriado de TV
evento
loja
aeroporto
playground
vulcão
atração turística
templo hindu
escultura
parada de ônibus
petshop
dentista
eletricista
padaria
energia
música
livro

uma tentativa de facilitar
que máquinas
entendam o significado,
das informações na web

1.197 bytes de
header SkyNet ?

fazer com que as
máquinas entendam
a web para melhor
nos servir
1.197 bytes de
header

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)
})
}

http polling
servidor
navegador

http polling
servidor
requisição 1
navegador

http polling
servidor
requisição 1
resposta 1
navegador

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

navegador
servidor
http polling
requisição 1
resposta 1
requisição 2
resposta 2
requisição n
resposta n

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?')

web socket
servidor
navegador

web socket
servidor
conexão
navegador

web socket
servidor
conexão
quadro 1
navegador

navegador
conexão
quadro 1
quadro 2
quadro 3
quadro n
servidor
web socket

http request
header
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 response
header
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

1.197 bytes de
header
1.197 bytes
de header

web socket
header
2 bytes
1.197 bytes de
header

5.844,727
consumo de
banda em kB
0 1500 3000 4500 6000 10 100 500 1.000 5.000
http web socket
584,473
1.168,945
11,689 0,156 116,895 1,563 7,813 15,625 78,125

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

“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.”
- ian hickson

suporte
5.0
4.2
14.0
6.0
10.0

obrigado
@caio_gondim
@almirfilho

HTML5 - Seu navegador não é mais o mesmo

Recommended

Recommended

More Related Content

Similar to HTML5 - Seu navegador não é mais o mesmo

Similar to HTML5 - Seu navegador não é mais o mesmo (20)

More from Caio Gondim

More from Caio Gondim (8)

HTML5 - Seu navegador não é mais o mesmo