Estado da Arte HTML5

1,504 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,504
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Estado da Arte HTML5

  1. 1. HTML5, State of art june, 2Presented by Nelson Monteiro, 5242 1
  2. 2. Agenda• What is HTML5 • State of mobile web• HTML5 brief history development• Where are we now? – HTML5 API usage• Mobile webkit browsers – Mobile browser os support choice• New rules/ new tags • Native apps vs Web apps – semantic web • Advantages of mobile apps using html5 – video • Examples – canvas • Useful links – local storage • Questions? – geolocation – offline applications 1º Simpósio do Mestrado em Computação Móvel 2 2
  3. 3. What is HTML5• the natural evolution of html?• the lost battle of xhtml2?• the union between whatwg an w3c?• the end of native apps?• HTML + CSS + javascript? 1º Simpósio do Mestrado em Computação Móvel 3 3
  4. 4. HTML5 brief history• 1999: HTML 4.01 was released• 2002: w3c start XHTML2• 2004: Web Hypertext Application Technology Working Group (WHATWG) - Apple, Mozilla and Opera - started work on Web Applications 1.0• 2007: W3C drops XHTML and forms HTMLWG• 2008: first draft of HTML5 is published• June 2011: HTML5 Working Draft has reached its Last Call milestone 1º Simpósio do Mestrado em Computação Móvel 4 4
  5. 5. Where are we now?• Current State: http://www.whatwg.org/specs/web-apps/current-work/multipage/ 1º Simpósio do Mestrado em Computação Móvel 5 5
  6. 6. Mobile webkit browsers supporthttp://radar.oreilly.com/2010/05/mobile-operating-systems-and-b.html 1º Simpósio do Mestrado em Computação Móvel 6 6
  7. 7. New rules/ new tagsSemantic Web• Before HTML5 • After HTML5 1º Simpósio do Mestrado em Computação Móvel 7 7
  8. 8. New rules/ new tagsVideo<video width="640" height="360" controls> <source src="vid.mp4" type="video/mp4" /><!-- Safari / iOS video --> <source src="vid.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+--> <source src="vid.webm" type="video/webm" /><!-- Chrome10+, Ffx4+,Opera10.6+ --></video>http://diveintohtml5.org/video.html 1º Simpósio do Mestrado em Computação Móvel 8 8
  9. 9. New rules/ new tagsVideo 1º Simpósio do Mestrado em Computação Móvel 9 9
  10. 10. New rules/ new tagsVideoAdvantages:• no plugins needed• direct video watching• interaction between video and web app 1º Simpósio do Mestrado em Computação Móvel 10 10
  11. 11. New rules/ new tagsCanvas <script type="text/javascript"> if (Modernizr.canvas) { var c = document.createElement(canvas); var context = c.getContext(2d); // context.fillStyle = "rgb(200,0,0)"; context.fillRect (10, 10, 55, 50); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect (30, 30, 55, 50); // document.getElementById(chartContainer).appendChild(c); } </script>http://diveintohtml5.org/canvas.html 1º Simpósio do Mestrado em Computação Móvel 11 11
  12. 12. New rules/ new tagsCanvas 1º Simpósio do Mestrado em Computação Móvel 12 12
  13. 13. New rules/ new tagsCanvasAdvantages:• no plugins needed• creating interactive/ dynamic charts• creating interactive/ dynamic maps 1º Simpósio do Mestrado em Computação Móvel 13 13
  14. 14. New rules/ new tagsLocal Storagefunction saveGameState() { if (!supportsLocalStorage()) { return false; } localStorage["halma.game.in.progress"] = gGameInProgress; for (var i = 0; i < kNumPieces; i++) { localStorage["halma.piece." + i + ".row"] = gPieces[i].row; localStorage["halma.piece." + i + ".column"] = gPieces[i].column; }http://diveintohtml5.org/storage.html 1º Simpósio do Mestrado em Computação Móvel 14 14
  15. 15. New rules/ new tagsLocal Storage 1º Simpósio do Mestrado em Computação Móvel 15 15
  16. 16. New rules/ new tagsLocal StorageAdvantages:• persists beyond a page refresh• on the client• isn’t transmitted to the server• 5 Mb of storage 1º Simpósio do Mestrado em Computação Móvel 16 16
  17. 17. New rules/ new tagsGeolocationfunction get_location() { navigator.geolocation.getCurrentPosition(show_map);}function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // lets show a map or do something interesting!}http://diveintohtml5.org/geolocation.html 1º Simpósio do Mestrado em Computação Móvel 17 17
  18. 18. New rules/ new tagsGeolocation 1º Simpósio do Mestrado em Computação Móvel 18 18
  19. 19. New rules/ new tagsGeolocationAdvantages:• no plugins needed• show current location on map• deliver content for your location only 1º Simpósio do Mestrado em Computação Móvel 19 19
  20. 20. New rules/ new tagsOffline Application<!DOCTYPE HTML> CACHE  MANIFEST<html manifest="/cache.manifest"> /clock.css<body> /clock.js... /clock-­‐face.jpg</body></html>http://diveintohtml5.org/offline.html 1º Simpósio do Mestrado em Computação Móvel 20 20
  21. 21. New rules/ new tagsOffline ApplicationAdvantages:• Working with the application offline• New data downloaded when online again 1º Simpósio do Mestrado em Computação Móvel 21 21
  22. 22. State mobile web development • HTML5 API usagehttp://www.webdirections.org/sotmw2011/technologies/ 1º Simpósio do Mestrado em Computação Móvel 22 22
  23. 23. State mobile web development • HTML5 API usagehttp://www.webdirections.org/sotmw2011/technologies/ 1º Simpósio do Mestrado em Computação Móvel 23 23
  24. 24. State mobile web development • Mobile browser os choicehttp://www.webdirections.org/sotmw2011/browsers-and-platforms/ 1º Simpósio do Mestrado em Computação Móvel 24 24
  25. 25. Native apps vs. Web apps Native Web• access to app store • no app store• access to device api • no access to device api• native UI experience • challenge creating device UI• good performance • smaller performance• bigger learning curve • ease of learning• no cross platform • ease of cross platform deployment development• long development time • ease of development• upgrades need to be • instant upgrades submited to app store • no app store restrictions• App store restrictions 1º Simpósio do Mestrado em Computação Móvel 25 25
  26. 26. Advantages of mobile apps using html5• Geolocation API• Offline Storage• Offline Cache• Multi-touch Event API• Vídeo• Canvas• Fancier styles and transitions• Great javascript engine 1º Simpósio do Mestrado em Computação Móvel 26 26
  27. 27. Examples• http://optimus.usatoday.com/• http://foursquareplayground.com/• http://everytimezone.com/ 1º Simpósio do Mestrado em Computação Móvel 27 27
  28. 28. Useful links• http://www.slideshare.net/MrJ1971/html5-and-the-mobile-web• http://www.slideshare.net/glenn.kelman/html-5-vs-native-mobile-applications• http://www.slideshare.net/phish108/html5-for-mobiles• http://www.slideshare.net/brucelawson/web-anywhere-mobile-optimisation- with-html5-css3-javascript• http://www.slideshare.net/didoo/html5-for-mobile• http://www.slideshare.net/batmoo/html5-css3-and-other-fancy-buzzwords• http://www.slideshare.net/wolframkriesing/html5-apps-mobile-developer- summit-bangalore• http://www.slideshare.net/docdoku/html-5-ou-lvolution-majeure-du-web-et- de-linternet-mobile• http://www.slideshare.net/pp.koch/the-future-of-the-mobile-web• http://www.slideshare.net/marcelioleal/html5overviewpdf• http://www.slideshare.net/zibin/brief-history-of-html5-7977732• http://www.slideshare.net/elisabethrobson/html5-whats-it-all-about• http://www.slideshare.net/marcelioleal/html5overviewpdf• http://www.whatwg.org/specs/web-apps/current-work/multipage/• http://devfiles.myopera.com/articles/572/idlist-url.htm 1º Simpósio do Mestrado em Computação Móvel 28 28
  29. 29. Questions?1º Simpósio do Mestrado em Computação Móvel 29 29

×