APIs do HTML 5 - DevInRio 2010

Preview:

DESCRIPTION

Apresentação do Dev In Rio 2010, por Leo Balter (@leobalter)

Citation preview

HTML 5

E suas APIs

O que é HTML 5?

HTML 5

CSS 3JavaScript

Pronto em 2022?

Por quê?

Realidade

Chrome Opera InternetExplorer

SafariFirefox

CNN

Flickr The New York Times

TimeVimeo

Apple

Google

Youtube Flickr

Nike

Globo.com

Facebook

AdobeNational

Geographic

Videolog

O que está pronto para ser implementado?

http://html5readiness.com/

http://www.modernizr.com/

Progressive Enhancement

■ conteúdo e funcionalidades básicas disponível para qualquer browser■marcação semântica■CSS e JavaScript em arquivos

externos e modularizados■manter os padrões do browser do

usuário

Destaque-se

Finalmente, as APIs

- WebForms 2.0

- Web Storage

- Web Sockets

- Web Workers

- Geolocation

- Video & Audio

- Canvas & SVG

- Aplicações Offline

WebForms 2.0

- Mais tipos de inputs- Validação mais simples

- Menos JavaScript

Novos tipos de input

- text- hidden- radio- password- etc

- email- datetime- number- range- etc+

<input type=”email” required placeholder=”voce@exemplo.com” />

<form> <input id="q" autofocus> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Ir"></form>

<form> <input name="n" type="number" min="0" max="10" step="2" value="6"> <input type="submit" value="Ir"></form>

http://diveintohtml5.org/examples/input-type-number-min-max-step.html

input.stepUp(n);input.stepDown(n);input.valueAsNumber;

Validação

<script>form = document.getElementById(‘f’);if ( form.checkValidity() )alert(‘validado!’);

</script>

<input type="text" name="letras" pattern="[a-z]+" > Pattern

Validity

Aplicações Offline

<html manifest=”cache.manifest”>

AddType text/cache-manifest manifest.htaccess

CACHE MANIFESTindex.htmlstylesheet.cssimagens/logo.pngjs/script.js

CACHE MANIFEST#comentarios e versões

CACHE:index.htmlstylesheet.cssimagens/logo.pngjs/script.js

NETWORK:login.php/myapihttp://api.twitter.com

FALLBACK:/main.php /static.html

Arquivos cacheados

Arquivos que necessitamde status online

Fallback para recursonão disponível

var cacheStatus = window.applicationCache.status;

window.applicationCache.update();

window.applicationCache.swapCache();

Web Storage

Cookies Máximo de 20

Limitados a 4KB

Reduzem velocidade da página pois são

transferidos via headers do HTTP

localStorage

sessionStorage

domínio de acesso

aba/janela aberta

http://dev.w3.org/html5/webstorage/

localStorage.chave = “valor”;

localStorage[‘chave’] = “valor”;

sessionStorage.chave = “valor”;

sessionStorage[‘chave’] = “valor”;

SQL Database

http://dev.w3.org/html5/webdatabase/

var db = openDatabase(“nome”, “versão”);db.transaction(function(tx) {tx.executeSql(“SELECT * FROM tabela”, callbackSucesso, callbackErro);

});

Geolocation

if (navigator.geolocation) {var geo = navigator.geolocation;geo.getCurrentPosition( function (posicao) {lat = posicao.coords.latitude;lng = posicao.coords.longitude;

});}

Integrando Geolocation com GoogleMaps

http://bit.ly/9Za0iJ

http://bit.ly/diHqBj

Web Workers

Script principal

Worker A

Worker B

Worker C

Worker D

main.js: var worker = new Worker('paralelo.js'); worker.onmessage = function(event) {

alert(event.data); };

paralelo.js: self.onmessage = function(event) { // trabalho a ser exeucado em paralelo. self.postMessage(dados); }

http://leobalter.net/html5/webworkers.html

WebSockets

AJAXRequisição

Pedido - Abre Resposta - Fecha

WebSocketRequisição

1Abre 2 4 6531 1 1 111

var socket = new WebSocket(location);socket.onopen = function(event) { socket.postMessage(“Olá, servidor”);}socket.onmessage = function(event) { alert(event.data);

}socket.onclose = function(event) { alert(“Socket fechado”);

}

Canvas

Scriptable Image Tag

Renderizado pelo JS

Muito bom para muita demanda de animação

<canvas id="myCanvas" width="300" height="300"></canvas>

var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect( 10, 10, 55, 50 );

ctx.fillStyle = "rgba(0,0,200, 0.5)";ctx.fillRect( 30, 30, 55, 50 );

HTML:

Javascript:

Video & Audio

<audio src="sound.mp3" controls></audio>

<video width="480" height="267" poster="imagemPoster.jpg" controls> <source type="video/mp4" src="video.mp4" /> <source type="video/webm" src="video.webm" /> <source type="video/ogg" src="video.ogv" /> </video>

Tipos de Vídeo

http://wiki.whatwg.org/wiki/Video_type_parameters

WEBM MP4/h.264 OGVSafari

Chrome 5Firefox 3.5Opera 10.5

SafariChrome 5

IE 9iPhone

Android

SafariChrome 6

IE 9 com v8Firefox 4

Opera 10.6

Atributos HTML e JS para <video>

loopautoplay

controlspreload

<video src=”exp.mov” controls preload=”false” loop autoplay></video>

var vid = document.getElementById('idVideo');console.log(vid.controls);console.log(vid.preload);console.log(vid.loop);console.log(vid.autoplay);

HTML:

JS:

Controles JS

play() / playpause() / pause

volumemuted

currentTimeloadeddata

ended

http://praegnanz.de/html5video/index.php

<video controls> <source type="video/mp4" src="video.mp4" /> <img src="placeholder.jpg" /></video>

<video controls> <source type="video/mp4" src="video.mp4" /> Esse browser não toca esse vídeo super legal</video>

<video controls> <source type="video/mp4" src="video.mp4" /> <object><embed> // Muito flash no meio disso </embed></object></video>

Dúvidas?

Leo Balter

@leobalter

leo@balter.com.br

yayquery.com.br

Recommended