apis do html 5 - devinrio 2010
DESCRIPTION
Apresentação do Dev In Rio 2010, por Leo Balter (@leobalter)TRANSCRIPT
![Page 1: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/1.jpg)
HTML 5
E suas APIs
![Page 2: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/2.jpg)
O que é HTML 5?
![Page 3: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/3.jpg)
HTML 5
CSS 3JavaScript
![Page 4: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/4.jpg)
Pronto em 2022?
![Page 5: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/5.jpg)
Por quê?
![Page 6: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/6.jpg)
Realidade
Chrome Opera InternetExplorer
SafariFirefox
![Page 7: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/7.jpg)
![Page 8: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/8.jpg)
CNN
Flickr The New York Times
TimeVimeo
Apple
Youtube Flickr
Nike
Globo.com
AdobeNational
Geographic
Videolog
![Page 9: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/9.jpg)
![Page 10: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/10.jpg)
O que está pronto para ser implementado?
http://html5readiness.com/
![Page 12: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/12.jpg)
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
![Page 13: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/13.jpg)
Destaque-se
![Page 14: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/14.jpg)
Finalmente, as APIs
![Page 15: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/15.jpg)
- WebForms 2.0
- Web Storage
- Web Sockets
- Web Workers
- Geolocation
- Video & Audio
- Canvas & SVG
- Aplicações Offline
![Page 16: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/16.jpg)
WebForms 2.0
- Mais tipos de inputs- Validação mais simples
- Menos JavaScript
![Page 17: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/17.jpg)
Novos tipos de input
- text- hidden- radio- password- etc
- email- datetime- number- range- etc+
<input type=”email” required placeholder=”[email protected]” />
![Page 18: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/18.jpg)
<form> <input id="q" autofocus> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Ir"></form>
![Page 19: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/19.jpg)
<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;
![Page 20: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/20.jpg)
Validação
![Page 21: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/21.jpg)
<script>form = document.getElementById(‘f’);if ( form.checkValidity() )alert(‘validado!’);
</script>
<input type="text" name="letras" pattern="[a-z]+" > Pattern
Validity
![Page 22: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/22.jpg)
Aplicações Offline
![Page 23: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/23.jpg)
<html manifest=”cache.manifest”>
AddType text/cache-manifest manifest.htaccess
CACHE MANIFESTindex.htmlstylesheet.cssimagens/logo.pngjs/script.js
![Page 24: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/24.jpg)
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
![Page 25: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/25.jpg)
var cacheStatus = window.applicationCache.status;
window.applicationCache.update();
window.applicationCache.swapCache();
![Page 26: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/26.jpg)
Web Storage
Cookies Máximo de 20
Limitados a 4KB
Reduzem velocidade da página pois são
transferidos via headers do HTTP
![Page 27: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/27.jpg)
localStorage
sessionStorage
domínio de acesso
aba/janela aberta
http://dev.w3.org/html5/webstorage/
![Page 28: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/28.jpg)
localStorage.chave = “valor”;
localStorage[‘chave’] = “valor”;
sessionStorage.chave = “valor”;
sessionStorage[‘chave’] = “valor”;
![Page 29: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/29.jpg)
![Page 30: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/30.jpg)
SQL Database
http://dev.w3.org/html5/webdatabase/
![Page 31: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/31.jpg)
var db = openDatabase(“nome”, “versão”);db.transaction(function(tx) {tx.executeSql(“SELECT * FROM tabela”, callbackSucesso, callbackErro);
});
![Page 32: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/32.jpg)
![Page 33: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/33.jpg)
Geolocation
![Page 34: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/34.jpg)
if (navigator.geolocation) {var geo = navigator.geolocation;geo.getCurrentPosition( function (posicao) {lat = posicao.coords.latitude;lng = posicao.coords.longitude;
});}
![Page 35: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/35.jpg)
Integrando Geolocation com GoogleMaps
http://bit.ly/9Za0iJ
http://bit.ly/diHqBj
![Page 36: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/36.jpg)
Web Workers
![Page 37: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/37.jpg)
Script principal
Worker A
Worker B
Worker C
Worker D
![Page 38: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/38.jpg)
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
![Page 39: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/39.jpg)
WebSockets
![Page 40: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/40.jpg)
AJAXRequisição
Pedido - Abre Resposta - Fecha
WebSocketRequisição
1Abre 2 4 6531 1 1 111
![Page 41: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/41.jpg)
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”);
}
![Page 42: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/42.jpg)
![Page 43: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/43.jpg)
![Page 44: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/44.jpg)
Canvas
![Page 45: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/45.jpg)
Scriptable Image Tag
Renderizado pelo JS
Muito bom para muita demanda de animação
![Page 46: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/46.jpg)
<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:
![Page 47: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/47.jpg)
![Page 48: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/48.jpg)
Video & Audio
![Page 49: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/49.jpg)
<audio src="sound.mp3" controls></audio>
![Page 50: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/50.jpg)
<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>
![Page 51: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/51.jpg)
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
![Page 52: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/52.jpg)
Atributos HTML e JS para <video>
loopautoplay
controlspreload
![Page 53: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/53.jpg)
<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:
![Page 54: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/54.jpg)
Controles JS
play() / playpause() / pause
volumemuted
currentTimeloadeddata
ended
http://praegnanz.de/html5video/index.php
![Page 55: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/55.jpg)
![Page 56: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/56.jpg)
<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>
![Page 57: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/57.jpg)
http://www.thewildernessdowntown.com/
![Page 58: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/58.jpg)
![Page 59: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/59.jpg)
![Page 60: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/60.jpg)
Dúvidas?
![Page 61: APIs do HTML 5 - DevInRio 2010](https://reader033.vdocuments.mx/reader033/viewer/2022051014/54b54e604a795979748b46e3/html5/thumbnails/61.jpg)
Leo Balter
@leobalter
yayquery.com.br