html5 - seu navegador não é mais o mesmo

171
seu navegador não é mais o mesmo @caio_gondim @almirfilho HTML5

Upload: caio-gondim

Post on 02-Jul-2015

156 views

Category:

Software


5 download

DESCRIPTION

Apresentação que usamos nos eventos 3.PHP, em São Luís - MA, e no PHP Conference 2011, em São Paulo - SP

TRANSCRIPT

Page 1: HTML5 - Seu navegador não é mais o mesmo

seu navegador não é mais o mesmo

@caio_gondim

@almirfilho

HTML5

Page 2: HTML5 - Seu navegador não é mais o mesmo
Page 3: HTML5 - Seu navegador não é mais o mesmo

semântica

armazenamento & offline

acesso à dispositivos

conectividade

css3

3D, gráficos & efeitos

performance

multimídia

Page 4: HTML5 - Seu navegador não é mais o mesmo

semântica

armazenamento & offline

acesso à dispositivos

conectividade

css3

3D, gráficos & efeitos

performance

multimídia

Page 5: HTML5 - Seu navegador não é mais o mesmo

3D, gráficos & efeitos

Page 6: HTML5 - Seu navegador não é mais o mesmo

svgcanvaswebGLcss3 3D

Page 7: HTML5 - Seu navegador não é mais o mesmo

svgcanvaswebGLcss3 3D

Page 8: HTML5 - Seu navegador não é mais o mesmo

svg

Page 9: HTML5 - Seu navegador não é mais o mesmo

svg

• gráficos vetoriais 2D

• especificação HTML5

• suporte completo DOM

• css

• animações

Page 10: HTML5 - Seu navegador não é mais o mesmo

por que svg?

Page 11: HTML5 - Seu navegador não é mais o mesmo

alta qualidade gráfica

Page 12: HTML5 - Seu navegador não é mais o mesmo

economia de banda

Page 13: HTML5 - Seu navegador não é mais o mesmo

geração gráfica dinâmica

Page 14: HTML5 - Seu navegador não é mais o mesmo

google charts

Page 15: HTML5 - Seu navegador não é mais o mesmo

bing maps

Page 16: HTML5 - Seu navegador não é mais o mesmo

vexflow.com

Page 17: HTML5 - Seu navegador não é mais o mesmo
Page 18: HTML5 - Seu navegador não é mais o mesmo
Page 19: HTML5 - Seu navegador não é mais o mesmo

svg naprática

Page 20: HTML5 - Seu navegador não é mais o mesmo

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

Page 21: HTML5 - Seu navegador não é mais o mesmo

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

Page 22: HTML5 - Seu navegador não é mais o mesmo

suporte

Page 23: HTML5 - Seu navegador não é mais o mesmo

suporte

3.2

3.0

4.0

9.03.2

3.0

Page 24: HTML5 - Seu navegador não é mais o mesmo

canvas

Page 25: HTML5 - Seu navegador não é mais o mesmo

<canvas>desenho 2DAPI javaScript

Page 26: HTML5 - Seu navegador não é mais o mesmo

controle a nível de pixel

Page 27: HTML5 - Seu navegador não é mais o mesmo

gráficosanimados

Page 28: HTML5 - Seu navegador não é mais o mesmo
Page 29: HTML5 - Seu navegador não é mais o mesmo
Page 30: HTML5 - Seu navegador não é mais o mesmo
Page 31: HTML5 - Seu navegador não é mais o mesmo
Page 32: HTML5 - Seu navegador não é mais o mesmo

sem plug-ins

Page 33: HTML5 - Seu navegador não é mais o mesmo

canvas na prática

Page 34: HTML5 - Seu navegador não é mais o mesmo

<!DOCTYPE HTML><html><header>...</header><body> <canvas id="myCanvas" width="800" height="600"> Seu navegador não suporta CANVAS =( </canvas>

</body></html>

Page 35: HTML5 - Seu navegador não é mais o mesmo

var canvas = document.getElementById("myCanvas")var context = canvas.getContext("2d") context.moveTo(100, 150)context.lineTo(450, 50)context.stroke()

Page 36: HTML5 - Seu navegador não é mais o mesmo

var canvas = document.getElementById("myCanvas")var context = canvas.getContext("2d") context.moveTo(100, 150)context.lineTo(450, 50)context.stroke()

Page 37: HTML5 - Seu navegador não é mais o mesmo

suporte

Page 38: HTML5 - Seu navegador não é mais o mesmo

suporte

3.1

2.0

4.0

9.03.2

2.1

Page 39: HTML5 - Seu navegador não é mais o mesmo

webGL

Page 40: HTML5 - Seu navegador não é mais o mesmo

webGL

• openGL na web

• API javaScript

• usa <canvas>

• 2D e 3D

• aceleração de hardware

Page 41: HTML5 - Seu navegador não é mais o mesmo
Page 42: HTML5 - Seu navegador não é mais o mesmo
Page 43: HTML5 - Seu navegador não é mais o mesmo
Page 44: HTML5 - Seu navegador não é mais o mesmo
Page 45: HTML5 - Seu navegador não é mais o mesmo
Page 46: HTML5 - Seu navegador não é mais o mesmo
Page 47: HTML5 - Seu navegador não é mais o mesmo
Page 48: HTML5 - Seu navegador não é mais o mesmo

suporte

5.0

5.0

4.0

7.0

10.0

3.0

Page 49: HTML5 - Seu navegador não é mais o mesmo

suporte

5.1*

4.0*

8.0*

* = suporte parcial

Page 50: HTML5 - Seu navegador não é mais o mesmo

3D, gráficos & efeitos

Page 51: HTML5 - Seu navegador não é mais o mesmo

acesso a dispositivos

Page 52: HTML5 - Seu navegador não é mais o mesmo

microfonecâmerageolocalização

Page 53: HTML5 - Seu navegador não é mais o mesmo

geolocalização

microfonecâmera

Page 54: HTML5 - Seu navegador não é mais o mesmo

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

Page 55: HTML5 - Seu navegador não é mais o mesmo

coordenadas geográficas

Page 56: HTML5 - Seu navegador não é mais o mesmo

coordenadas geográficaslatitude: 02º 32’ Slongitude: 44º 17’ W

Page 57: HTML5 - Seu navegador não é mais o mesmo

geolocalização torna-se cada vez mais importante

Page 58: HTML5 - Seu navegador não é mais o mesmo

isto não é diferente na web

Page 59: HTML5 - Seu navegador não é mais o mesmo

serviços de mapas

• google maps

• yahoo! maps

• bing maps

Page 60: HTML5 - Seu navegador não é mais o mesmo

redes sociais

• foursquare

• gowalla

Page 61: HTML5 - Seu navegador não é mais o mesmo

e-gov

Page 62: HTML5 - Seu navegador não é mais o mesmo

ferramentas SEO

Page 63: HTML5 - Seu navegador não é mais o mesmo

google analytics

Page 64: HTML5 - Seu navegador não é mais o mesmo
Page 65: HTML5 - Seu navegador não é mais o mesmo

localização = contexto

Page 66: HTML5 - Seu navegador não é mais o mesmo

localização = contexto

maior relevância

Page 67: HTML5 - Seu navegador não é mais o mesmo

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

Page 68: HTML5 - Seu navegador não é mais o mesmo
Page 69: HTML5 - Seu navegador não é mais o mesmo
Page 70: HTML5 - Seu navegador não é mais o mesmo
Page 71: HTML5 - Seu navegador não é mais o mesmo
Page 72: HTML5 - Seu navegador não é mais o mesmo
Page 73: HTML5 - Seu navegador não é mais o mesmo
Page 74: HTML5 - Seu navegador não é mais o mesmo
Page 75: HTML5 - Seu navegador não é mais o mesmo

publicidade direcionada

Page 76: HTML5 - Seu navegador não é mais o mesmo

acessoa partir de dispositivos móveis

Page 77: HTML5 - Seu navegador não é mais o mesmo

grandecrescimentode dispositivosmóveis conectadosà internet

Page 78: HTML5 - Seu navegador não é mais o mesmo

0 MM

500 MM

1.000 MM

1.500 MM

2.000 MM

2007 2009 2011 2013 2015

internet móvel internet desktop

Page 79: HTML5 - Seu navegador não é mais o mesmo

0 MM

500 MM

1.000 MM

1.500 MM

2.000 MM

2007 2009 2011 2013 2015

internet móvel internet desktop

≃ 2014

Page 80: HTML5 - Seu navegador não é mais o mesmo

desktop

•posição fixa

•localização aproximada

Page 81: HTML5 - Seu navegador não é mais o mesmo

dispositivo móvel

•posição variável

•localização mais exata

Page 82: HTML5 - Seu navegador não é mais o mesmo

como onavegadorobtém minha posiçãogeográfica?

Page 83: HTML5 - Seu navegador não é mais o mesmo
Page 84: HTML5 - Seu navegador não é mais o mesmo

onde estou?

navegador

gps

antenas

wi-fi

IPSO

Page 85: HTML5 - Seu navegador não é mais o mesmo

onde estou?

navegador

gps

antenas

wi-fi

IPSO

Page 86: HTML5 - Seu navegador não é mais o mesmo

onde estou?

navegador

gps

antenas

wi-fi

IPSO

Page 87: HTML5 - Seu navegador não é mais o mesmo

onde estou?

navegador

gps

antenas

wi-fi

IPSO

Page 88: HTML5 - Seu navegador não é mais o mesmo

interface comumde acesso

Page 89: HTML5 - Seu navegador não é mais o mesmo

if ( navigator.geolocation ){

// navegador suporta geolocalização

}

Page 90: HTML5 - Seu navegador não é mais o mesmo

// fazendo uma requisiçãonavigator.geolocation.getCurrentPosition( showMap )

// função callbackfunction showMap( position ){ // aqui podemos mostrar o mapa com os // dados de position

}

Page 91: HTML5 - Seu navegador não é mais o mesmo

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}

Page 92: HTML5 - Seu navegador não é mais o mesmo

suporte

4.0 10.0

3.0

Page 93: HTML5 - Seu navegador não é mais o mesmo

suporte

5.0

3.5

5.0

9.03.2

2.1

Page 94: HTML5 - Seu navegador não é mais o mesmo

acesso a dispositivos

Page 95: HTML5 - Seu navegador não é mais o mesmo

semântica

Page 96: HTML5 - Seu navegador não é mais o mesmo

sintaxe éo estudo da gramática

Page 97: HTML5 - Seu navegador não é mais o mesmo

semântica é o estudo do significado

Page 98: HTML5 - Seu navegador não é mais o mesmo

sintaxe é comodizer algo

Page 99: HTML5 - Seu navegador não é mais o mesmo

semântica é o significadopor trásdo que foi dito

Page 100: HTML5 - Seu navegador não é mais o mesmo

criar dados ewebsites que máquinassejam capazes de entender

Page 101: HTML5 - Seu navegador não é mais o mesmo

problemas atuais

Page 102: HTML5 - Seu navegador não é mais o mesmo

sistema de documentosligados entre si escritos emHTML

Page 103: HTML5 - Seu navegador não é mais o mesmo

HTMLdescreve asintaxe, não osignificado

Page 104: HTML5 - Seu navegador não é mais o mesmo

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

Page 105: HTML5 - Seu navegador não é mais o mesmo

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

Page 106: HTML5 - Seu navegador não é mais o mesmo

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

Page 107: HTML5 - Seu navegador não é mais o mesmo

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

Page 108: HTML5 - Seu navegador não é mais o mesmo

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

Page 109: HTML5 - Seu navegador não é mais o mesmo

schema.org

Page 110: HTML5 - Seu navegador não é mais o mesmo

schema.org

•consórcio entre google, bing e yahoo!

•microdata

Page 111: HTML5 - Seu navegador não é mais o mesmo

schema.org na prática

Page 112: HTML5 - Seu navegador não é mais o mesmo

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

Page 113: HTML5 - Seu navegador não é mais o mesmo

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

Page 114: HTML5 - Seu navegador não é mais o mesmo

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

Page 115: HTML5 - Seu navegador não é mais o mesmo

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

Page 116: HTML5 - Seu navegador não é mais o mesmo

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

Page 117: HTML5 - Seu navegador não é mais o mesmo

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

Page 118: HTML5 - Seu navegador não é mais o mesmo

filme

avatar

ficçãocientífica

jamescameron

<a>

nom

e

gênero trailer

dire

tor

Page 119: HTML5 - Seu navegador não é mais o mesmo

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

Page 120: HTML5 - Seu navegador não é mais o mesmo

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

Page 121: HTML5 - Seu navegador não é mais o mesmo

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

Page 122: HTML5 - Seu navegador não é mais o mesmo

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

Page 123: HTML5 - Seu navegador não é mais o mesmo

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

Page 124: HTML5 - Seu navegador não é mais o mesmo

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

Page 125: HTML5 - Seu navegador não é mais o mesmo

filme

avatar

ficçãocientífica

pessoa

<a>

nom

e

gênero trailer

dire

tor

jamescameron

16 de agosto de

1954

nome data de nascimento

Page 126: HTML5 - Seu navegador não é mais o mesmo
Page 127: HTML5 - Seu navegador não é mais o mesmo

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

Page 128: HTML5 - Seu navegador não é mais o mesmo

web semânticahoje

Page 129: HTML5 - Seu navegador não é mais o mesmo
Page 130: HTML5 - Seu navegador não é mais o mesmo
Page 131: HTML5 - Seu navegador não é mais o mesmo
Page 132: HTML5 - Seu navegador não é mais o mesmo
Page 133: HTML5 - Seu navegador não é mais o mesmo
Page 134: HTML5 - Seu navegador não é mais o mesmo
Page 135: HTML5 - Seu navegador não é mais o mesmo
Page 136: HTML5 - Seu navegador não é mais o mesmo

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

Page 137: HTML5 - Seu navegador não é mais o mesmo

1.197 bytes de header

SkyNet ?

Page 138: HTML5 - Seu navegador não é mais o mesmo

1.197 bytes de header

fazer com que as máquinas entendam a web para melhor nos servir

Page 139: HTML5 - Seu navegador não é mais o mesmo

semântica

Page 140: HTML5 - Seu navegador não é mais o mesmo

conectividade

Page 141: HTML5 - Seu navegador não é mais o mesmo

web sockets

Page 142: HTML5 - Seu navegador não é mais o mesmo

bidirecional

Page 143: HTML5 - Seu navegador não é mais o mesmo

full-duplex

Page 144: HTML5 - Seu navegador não é mais o mesmo

baixalatência

Page 145: HTML5 - Seu navegador não é mais o mesmo

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)

})}

Page 146: HTML5 - Seu navegador não é mais o mesmo

navegador

servidor

http polling

Page 147: HTML5 - Seu navegador não é mais o mesmo

navegador

servidor

http pollingre

quisi

ção

1

Page 148: HTML5 - Seu navegador não é mais o mesmo

navegador

servidor

http pollingre

quisi

ção

1

resp

osta

1

Page 149: HTML5 - Seu navegador não é mais o mesmo

navegador

servidor

http pollingre

quisi

ção

1

resp

osta

1

requ

isiçã

o 2

Page 150: HTML5 - Seu navegador não é mais o mesmo

navegador

servidor

http pollingre

quisi

ção

1

resp

osta

1

requ

isiçã

o 2

requ

isiçã

o n

resp

osta

2

resp

osta

n

Page 151: HTML5 - Seu navegador não é mais o mesmo

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

Page 152: HTML5 - Seu navegador não é mais o mesmo

navegador

servidor

web socket

Page 153: HTML5 - Seu navegador não é mais o mesmo

navegador

cone

xão

servidor

web socket

Page 154: HTML5 - Seu navegador não é mais o mesmo

navegador

cone

xão

quad

ro 1

servidor

web socket

Page 155: HTML5 - Seu navegador não é mais o mesmo

navegador

cone

xão

quad

ro 1

quad

ro 2

quad

ro 3

quad

ro n

servidor

web socket

Page 156: HTML5 - Seu navegador não é mais o mesmo

economia de banda

Page 157: HTML5 - Seu navegador não é mais o mesmo

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

Page 158: HTML5 - Seu navegador não é mais o mesmo

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

Page 159: HTML5 - Seu navegador não é mais o mesmo

1.197 bytes de header

1.197 bytes de header

Page 160: HTML5 - Seu navegador não é mais o mesmo

1.197 bytes de header

web socket header2 bytes

Page 161: HTML5 - Seu navegador não é mais o mesmo

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

Page 162: HTML5 - Seu navegador não é mais o mesmo

ws://

Page 163: HTML5 - Seu navegador não é mais o mesmo

aplicações

Page 164: HTML5 - Seu navegador não é mais o mesmo

aplicações

• jogos online multiplayer

• timeline de redes sociais

• chat

Page 165: HTML5 - Seu navegador não é mais o mesmo

- 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.”

Page 166: HTML5 - Seu navegador não é mais o mesmo

suporte

4.2

5.0

6.0

14.0

10.0

Page 167: HTML5 - Seu navegador não é mais o mesmo

suporte

4.2

5.0

6.0

14.0

10.0

Page 168: HTML5 - Seu navegador não é mais o mesmo

conectividade

Page 169: HTML5 - Seu navegador não é mais o mesmo

obrigado

@caio_gondim

@almirfilho

Page 170: HTML5 - Seu navegador não é mais o mesmo

obrigado

@caio_gondim

@almirfilho

Page 171: HTML5 - Seu navegador não é mais o mesmo

dúvidas?