apis do html 5 - devinrio 2010
DESCRIPTION
Apresentação do Dev In Rio 2010, por Leo Balter (@leobalter)TRANSCRIPT
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
Youtube Flickr
Nike
Globo.com
AdobeNational
Geographic
Videolog
O que está pronto para ser implementado?
http://html5readiness.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=”[email protected]” />
<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>
http://www.thewildernessdowntown.com/
Dúvidas?
Leo Balter
@leobalter
yayquery.com.br