Html5

838 visualizações

Publicada em

Palestra sobre HTML5 de Marcelo Santos de Souza no 1° Evento SouWebPel.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
838
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html5

  1. 1. HTML5:o que mudou no javascriptMarcelo de Souzamsouza@conrad-caine.com
  2. 2. Sobre mimMarcelo de SouzaLíder do time de Front-EndConrad CaineFatec/SenacIFSul (Cefet)http://www.linkedin.com/in/marcelodesouzacc
  3. 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. 4. HTML5
  5. 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. 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. 7. HTML5 Javascript APIs
  8. 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. 9. APIApplication Programming Interface
  10. 10. HTML5 Javascript APIs• Canvas• Audio e Video• Geolocation• Messaging• XMLHttpRequest 2• Web Socket• Web Worker• Web Storage
  11. 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. 12. CANVAS API<canvas id="test">atualize seu navegador!</canvas>
  13. 13. CANVAS APIvar 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. 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. 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. 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. 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. 18. AUDIO E VIDEO API<audio controls="controls"><source src="som.ogg" /><source src="som.mp3" /><p>Atualize seu navegador!</p></audio>
  19. 19. AUDIO E VIDEO APIvar vd = document.getElementById(video1);vd.play();vd.pause();console.log(vd.duration);
  20. 20. AUDIO E VIDEO API• http://www.w3.org/2010/05/video/mediaevents.html• http://videojs.com/• http://www.youtube.com/html5
  21. 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. 22. GEOLOCATION APIfunction upd(position) { // codigo}function err(error) { // codigo}if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(upd, err);}
  23. 23. GEOLOCATION API• http://html5demos.com/geo• http://maxheapsize.com/static/html5geolocationdemo.html
  24. 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. 25. Cross Document Messagingif (window.postMessage) { var h = document.body.clientHeight;window.postMessage(h, exemplo.com);}
  26. 26. Cross Document Messagingfunction messageHandler(ev) { if (ev.origin == exemplo.com) { iframe.style.height = ev.data;}}
  27. 27. Cross Document Messaging• Facebook apps• API de videos do YouTube
  28. 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. 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. 30. WebSocket API
  31. 31. WebSocket APIif (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. 32. Web Workers API• Processamento Javascript em Background• Threads: multicore CPUs• Previne avisos: "Script não responde"• Não trava o navegador
  33. 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. 34. Web Workers API// main.jsif (window.Worker) { w = new Worker(task.js); w.postMessage(start); w.onmessage = function(ev) { console.log(ev.data);w.terminate();}}
  35. 35. Web Workers API// task.jsimportScripts(jQuery.js);function start() { // codigo}self.onmessage = function(ev) { if (ev.data == start) { start(); self.postMessage(feito!);}}
  36. 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. 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. 38. Web Storage APIif (window.localStorage) {localStorage.setItem(nome, Marcelo);console.log(localStorage.getItem(nome)); localStorage.removeItem(nome); localStorage.clear();}// window.sessionStorage
  39. 39. Web Storage API• http://labs.zenorocha.com/html5/local-storage/• http://diveintohtml5.info/examples/localstorage-halma.html
  40. 40. O futuro do HTML5
  41. 41. 2022DATA PREVISTA PARA NO MÍNIMO DOIS NAVEGADORES IMPLEMENTAREM TODAS ASFUNÇÕES
  42. 42. 2014DATA PREVISTA PARA A RECOMENDAÇÃO OFICIAL
  43. 43. Estatística de NavegadoresFonte: http://www.w3schools.com/browsers/browsers_stats.asp
  44. 44. Internet ExplorerFonte: http://www.w3schools.com/browsers/browsers_stats.asp
  45. 45. Obrigado!

×