Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iG Tech Talk - iG

1,489 views

Published on

[pt-br]
Uma breve apresentação sobre HTML5, feita para ser apresentada para o pessoal do iG.

O conteúdo não é tão técnico.

Vale a pena dar uma espiada ;)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

iG Tech Talk - iG

  1. 1. HTML5: Mas não é mesma coisa? Daniel R. C. Filho
  2. 2. NÃO!
  3. 3. Fim.
  4. 4. HTML5 HTML + JavaScript APIs + CSS
  5. 5. HTML5 Wikipedia: bit.ly/wiki-html5
  6. 6. HTML5 • Evolução Wikipedia: bit.ly/wiki-html5
  7. 7. HTML5 • Evolução • Adaptação e compatibilidade Wikipedia: bit.ly/wiki-html5
  8. 8. HTML5 • Evolução • Adaptação e compatibilidade • Multimídia Wikipedia: bit.ly/wiki-html5
  9. 9. HTML5 • Evolução • Adaptação e compatibilidade • Multimídia • Mais semântica Wikipedia: bit.ly/wiki-html5
  10. 10. HTML5 • Evolução • Adaptação e compatibilidade • Multimídia • Mais semântica • Menos plugins Wikipedia: bit.ly/wiki-html5
  11. 11. Tags
  12. 12. Tags • <article> • <footer> • <header> • <menu> • <nav> • <section> • <time>
  13. 13. Tags • <article> • <footer> • <header> • <menu> • <nav> • <section> • <time> • <meter> • <video> & <audio> • <canvas> • SVG • Prefetch • @font-face • { ... }
  14. 14. Tags
  15. 15. Tags: header <header>
  16. 16. Tags: header > nav <header> <nav>
  17. 17. Tags: section <section>
  18. 18. Tags: section > article <article>
  19. 19. Demo http://slides.html5rocks.com/#slide27 SVG
  20. 20. Formulários
  21. 21. Formulários • type: email • type: url • type: tel • type: search • type: number • type: range • type: color • speech!
  22. 22. Formulários • type: email • type: url • type: tel • type: search • type: number • type: range • type: color • speech! • Seletores temporais • date • month • week • time • datetime • datetime-local
  23. 23. Demo
  24. 24. Demo
  25. 25. Demo
  26. 26. Demo
  27. 27. Demo
  28. 28. JavaScript API
  29. 29. JavaScript API • WebStorage
  30. 30. JavaScript API • WebStorage • Web SQL DB
  31. 31. JavaScript API • WebStorage • Web SQL DB • Application Cache
  32. 32. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location
  33. 33. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location • Web Workers
  34. 34. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location • Web Workers • Web Sockets
  35. 35. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location • Web Workers • Web Sockets • Notifications
  36. 36. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location • Web Workers • Web Sockets • Notifications • Drag & Drop
  37. 37. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location • Web Workers • Web Sockets • Notifications • Drag & Drop • Orientation
  38. 38. JavaScript API • WebStorage • Web SQL DB • Application Cache • Geo Location • Web Workers • Web Sockets • Notifications • Drag & Drop • Orientation • { ... }
  39. 39. Demo danielfilho.info/p/ig/html5/speech.html Fala Que Eu Te Escuto (speech)
  40. 40. Demo danielfilho.info/p/ig/html5/acelera.html Orientation + CSS 3
  41. 41. Canvas chromeexperience.com Demo
  42. 42. Demo html5readiness.com Compatibilidade
  43. 43. HTML5 Rocks Slides slides.html5rocks.com Demo
  44. 44. Perguntas? Não que eu vá saber responder. Mas toda apresentação termina assim.
  45. 45. Daniel Filho danielfilho twitter.com flickr.com facebook.com foursquare.com/user /linkedin.com/in

×