HTML 5 - Semana da Computao - UFF

  • Published on
    13-Jun-2015

  • View
    1.866

  • Download
    1

Transcript

  • 1. HTML 5 UFF - SC 2010 1

2. Leo Balter Desenvolvedor Front End @leobalter leo@balter.com.br 2 3. O que o HTML 5? 3 4. XML APIs HTML 5 CSS 3 JavaScript 4 5. Breve histrico HTML HTML 4 XHTML HTML 5 1990 1997 2000 2010+ 5 6. Princpios bsicos Simplicidade Adaptao Enxergar o futuro Compreender o passado Tradio 6 7. PQP PM 7 8. O que podemos implementar com HTML5? 8 9. Implementao Segura Sem muita compatibilidade Aproximadamente Utilizveis Experimentos 9 10. doctype charset selfclose tags atributos sem aspas elementos semnticos udio e vdeo atributos data-* drag n drop contenteditable Implementao Segura 10 11. canvas geolocation web sockets autofocus placeholder cache Aproximadamente Utilizveis http://goo.gl/Ft8TZ http://goo.gl/koygK http://goo.gl/TS7I5 .focus() .clearField() Google Gears 11 12. form inputs meter/progress Sem muita compatibilidade 12 13. web sql database indexDB webstorage web workers Experimentos 13 14. Shims, Fallbacks e Polylls @rem // Remy Sharp http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polylls http://goo.gl/KQDB 14 15. DOCTYPE 15 16. 16 17. 17 18. 18 19. charset 19 20. 20 21. selfclose tags 21 22.

22 23. atributos sem aspas 23 24. Elementos Semnticos 24 25. header footer section#container asidesection#content article article article 25 26. article h1 com ttulo do artigo header algumas informaes nesse rodap do artigo, sobre o artigo footer algum texto aqui, o prprio contedo do artigo 26 27. Temos um Problema Estrutural 27 28. muito simples resolver... 28 29. Desde antes do HTML 5 podemos criar elementos novos document.createElement(article); article { display: block } 29 30. 30 31. Atributos data-*

31 32. Drag n Drop jQuery UI Draggable http://jqueryui.com/demos/draggable/ 32 33. contentEditable 33 34. 34 35. udio eVdeo http://mediaelementjs.com/ 35 36. Esse browser no toca esse vdeo super legal // Muito flash no meio disso 36 37. HTML 5 vai matar o Flash? 37 38. HTML 5 vai matar o Flash? ainda no 37 39. HTML 5 vai matar o Flash? ainda no mas j podem andar lado a lado 37 40. 38 41. dvidas? 39