Your SlideShare is downloading. ×
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

541

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
541
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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!

×