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