Your SlideShare is downloading. ×
0
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5

544

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
544
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5:o que mudou no javascriptMarcelo de Souzamsouza@conrad-caine.com
  • 2. Sobre mimMarcelo de SouzaLíder do time de Front-EndConrad CaineFatec/SenacIFSul (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. APIApplication 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 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. 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 APIvar 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 APIfunction 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 Messagingif (window.postMessage) { var h = document.body.clientHeight;window.postMessage(h, exemplo.com);}
  • 26. Cross Document Messagingfunction 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 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. 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.jsif (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.jsimportScripts(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 APIif (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. 2022DATA PREVISTA PARA NO MÍNIMO DOIS NAVEGADORES IMPLEMENTAREM TODAS ASFUNÇÕES
  • 42. 2014DATA PREVISTA PARA A RECOMENDAÇÃO OFICIAL
  • 43. Estatística de NavegadoresFonte: http://www.w3schools.com/browsers/browsers_stats.asp
  • 44. Internet ExplorerFonte: http://www.w3schools.com/browsers/browsers_stats.asp
  • 45. Obrigado!

×