O documento discute as principais mudanças no JavaScript introduzidas pelo HTML5, incluindo novas APIs para canvas, áudio e vídeo, geolocalização, mensagens entre documentos, XMLHttpRequest nível 2, WebSocket e armazenamento na web. O HTML5 objetiva compatibilidade, utilidade, interoperabilidade e acesso universal com o apoio de grandes empresas como Apple, Mozilla e Google.

1. HTML5:
o que mudou no javascript
Marcelo de Souza
msouza@conrad-caine.com

2. Sobre mim
Marcelo de Souza
Líder do time de Front-End
Conrad Caine
Fatec/Senac
IFSul (Cefet)
http://www.linkedin.com/in/marcelodesouzacc

3. Conrad Caine
• 1998, Munique, 2 pessoas
• 2005, Pelotas, 1 pessoa (+ 3)
• 2012, 115 pessoas
o Munique, Alemanha
o Pelotas, Brasil
o Buenos Aires, Argentina
• Tecnologias
o PHP, .NET, Python, Ruby, Node.js HTML5, Flash, Mobile (iOS, Android) e Javascript
• Criatividade Pragmática

4. HTML5

5. HTML
• 1993 - IETF (Internet Engineering Task Force) - HTML 2.0
• 1999 - W3C (World Wide Web Consortium) - HTML 4.1
• 2000 - XHTML 1.0
• 2001 - XHTML 1.1 (CSS)
• 2004 - XHTML 2 - não compatível

6. HTML5
• 2004 - WHATWG (Web Hypertext Application Technology Working Group)
• Opera, Apple, Mozilla, Google
• HTML5
o compatilidade
o utilidade
o interoperabilidade (APIs)
o acesso universal
o plugin free

7. HTML5 Javascript APIs

8. Javascript
"Enquanto HTML é usado para armazenar o conteúdo e a formatação de uma página web, e o CSS
codifica o estilo de como o conteúdo formatado deve ser exibido graficamente, JavaScript é
usado para criar efeitos ricos ou aplicações web ricas."
Mozilla Developer Network

9. API
Application Programming Interface

10. HTML5 Javascript APIs
• Canvas
• Audio e Video
• Geolocation
• Messaging
• XMLHttpRequest 2
• Web Socket
• Web Worker
• Web Storage

11. CANVAS API
• Elemento HTML que pode ser manipulado por javascript através de uma API
• criado pela Aple - direitos autorais
• SVG (Adobe) e VML (Microsoft)
• Explorer
• Navegadores
o Firefox
o Safari
o Chrome
o Opera
o IE9

12. CANVAS API
<canvas id="test">
atualize seu navegador!
</canvas>

13. CANVAS API
var canv = document.getElementById("test");
if (canv.getContext) {
var ctx = canv.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
}

14. CANVAS API
• http://mrdoob.com/projects/chromeexperiments/ball_pool
• http://www.rgraph.net/examples/bar-charts.html
• http://www.benjoffe.com/code/demos/canvascape/textures
• http://js-fireworks.appspot.com/
• http://www.chromeexperiments.com/

15. AUDIO E VIDEO API
• Plugin free
• Audio Codecs
o AAC
o MPEG-3
o Ogg Vorbis (free)
• Video Codecs
o H.264
o VP8
o Ogg Theora (free)
• iPhone: acelerador de hardware para H.264
• Google lança webm em 2010 (VP8 + Ogg Vorbis)

16. AUDIO E VIDEO API
Nave mp we og
gador S bm N
Intern 4 N g
et
Firefo
Explor N S S
x 9
er4.0
Googl S S S
e
Apple S N N
Chro
Safari
me 6
Opera N S S
5
10.6

17. AUDIO E VIDEO API
<video id="video1" poster="video.jpg"
controls>
<source src="video.webm" />
<source src="video.ogv" />
<source src="video.mp4" />
<p>Atualize seu navegador!</p>
</video>

18. AUDIO E VIDEO API
<audio controls="controls">
<source src="som.ogg" />
<source src="som.mp3" />
<p>Atualize seu navegador!</p>
</audio>

19. AUDIO E VIDEO API
var vd = document.getElementById('video1');
vd.play();
vd.pause();
console.log(vd.duration);

20. AUDIO E VIDEO API
• http://www.w3.org/2010/05/video/mediaevents.html
• http://videojs.com/
• http://www.youtube.com/html5

21. GEOLOCATION API
• latitude e longitude
• segurança: permissão do usuário
• tablet, smartphone, notebook
• uma das primeiras funções suportadas por todos os navegadores
o Firefox 3.5
o Chrome 5
o IE9
o Safari 5
o Opera 10.6

22. GEOLOCATION API
function upd(position) {
// codigo
}
function err(error) {
// codigo
}
if (navigator.geolocation) {
navigator.geolocation
.getCurrentPosition(upd, err);
}

23. GEOLOCATION API
• http://html5demos.com/geo
• http://maxheapsize.com/static/html5geolocationdemo.html

24. Cross Document Messaging
• comunicação entre iFrames, tabs e windows em um navegador
• permite diferentes sites comunicarem-se entre si através do navegador
• segurança: origem da mensagem
• Navegadores
o Firefox 3
o Chrome
o IE8
o Opera 9.6
o Safari 4

25. Cross Document Messaging
if (window.postMessage) {
var h = document.body.clientHeight;
window.postMessage(h, 'exemplo.com');
}

26. Cross Document Messaging
function messageHandler(ev) {
if (ev.origin == 'exemplo.com') {
iframe.style.height = ev.data;
}
}

27. Cross Document Messaging
• Facebook apps
• API de videos do YouTube

28. HXMLHttpRequest Level 2
• Versão melhorada do AJAX
• Cross Origin (configurações no servidor)
• Progress events
o loadstart, progress, abort, error, load, loaded
• Navegadores
o Chrome
o Firefox 3.5
o Safari 4

29. WebSocket API
• Full-Duplex: Conexão em tempo real com o servidor
• redução da quantidade de bytes
• redução da latência
• aplicativos web
• websocket servers
o Kaazing, Netty, mod_pywebsocket, node.js
• Navegadores
o Chrome 4
o Firefox 4
o Safari 5

30. WebSocket API

31. WebSocket API
if (window.WebSocket) {
ws = new WebSocket('ws://exemplo.com');
ws.onopen = function() {
ws.send('mensagem ao servidor');
}
ws.onmessage = function(ev) {
console.log(ev.data);
}
ws.onclose = function(ev) {
console.log('conexão fechada');
}
}

32. Web Workers API
• Processamento Javascript em Background
• Threads: multicore CPUs
• Previne avisos: "Script não responde"
• Não trava o navegador

33. Web Workers API
• Não consegue acessar elementos na página pai
• Usa postMessage como comunicação
• Navegadores
o Firefox 3.5
o Chrome 3
o IE10
o Opera 10.6
o Safari 4

34. Web Workers API
// main.js
if (window.Worker) {
w = new Worker('task.js');
w.postMessage('start');
w.onmessage = function(ev) {
console.log(ev.data);
w.terminate();
}
}

35. Web Workers API
// task.js
importScripts('jQuery.js');
function start() {
// codigo
}
self.onmessage = function(ev) {
if (ev.data == 'start') {
start();
self.postMessage('feito!');
}
}

36. Web Workers API
• http://ie.microsoft.com/testdrive/Graphics/WorkerFountains/D
• http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/D
• http://www.facebooktv.co/labs/html5_demo_web_workers/

37. Web Storage API
• Armazenamento de dados local
o Local Storage
o Session Storage
• Cookie
o 4KB
o enviado ao servidor
• Navegadores
o Chrome 3
o Firefox 3
o IE8
o Opera 10
o Safari 4

38. Web Storage API
if (window.localStorage) {
localStorage.setItem('nome', 'Marcelo');
console.log(localStorage.getItem('nome'));
localStorage.removeItem('nome');
localStorage.clear();
}
// window.sessionStorage

39. Web Storage API
• http://labs.zenorocha.com/html5/local-storage/
• http://diveintohtml5.info/examples/localstorage-halma.html

40. O futuro do HTML5

41. 2022
DATA PREVISTA PARA NO MÍNIMO DOIS NAVEGADORES IMPLEMENTAREM TODAS AS
FUNÇÕES

42. 2014
DATA PREVISTA PARA A RECOMENDAÇÃO OFICIAL

43. Estatística de Navegadores
Fonte: http://www.w3schools.com/browsers/browsers_stats.asp

44. Internet Explorer
Fonte: http://www.w3schools.com/browsers/browsers_stats.asp

45. Obrigado!