• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

HTML 5 - Semana da Computação - UFF

  • 1,827 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,827
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
0

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. 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. CSS 3 HTML 5 JavaScript XML APIs 4
  • 5. Breve histórico HTML HTML 4 XHTML HTML 5 1990 1997 2000 2010+ 5
  • 6. Princípios básicos Simplicidade Adaptação Enxergar o futuro Compreender o passado Tradição 6
  • 7. PQP PM 7
  • 8. O que podemos implementar com HTML5? 8
  • 9. Implementação Aproximadamente Segura Utilizáveis Sem muita Experimentos compatibilidade 9
  • 10. Implementação Segura doctype áudio e vídeo charset atributos data-* selfclose tags drag n drop atributos sem aspas contenteditable elementos semânticos 10
  • 11. Aproximadamente Utilizáveis canvas http://goo.gl/Ft8TZ geolocation http://goo.gl/koygK web sockets http://goo.gl/TS7I5 autofocus .focus() placeholder .clearField() cache Google Gears 11
  • 12. Sem muita compatibilidade form inputs meter/progress 12
  • 13. Experimentos web sql database indexDB webstorage web workers 13
  • 14. Shims, Fallbacks e Polyfills @rem // Remy Sharp http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills http://goo.gl/KQDB 14
  • 15. DOCTYPE 15
  • 16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1- transitional.dtd"> 16
  • 17. <!DOCTYPE html> 17
  • 18. <html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”> <html lang=”pt-BR”> 18
  • 19. charset 19
  • 20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset=utf-8 > 20
  • 21. selfclose tags <img src=”weeeee.jpg” /> <img src=”weeeee.jpg”> 21
  • 22. <br /> <br> 22
  • 23. atributos sem aspas <meta charset=utf-8 > 23
  • 24. Elementos Semânticos 24
  • 25. header section#container section#content aside article article article footer 25
  • 26. article header h1 com título do artigo algum texto aqui, o próprio conteúdo do artigo footer algumas informações nesse rodapé do artigo, sobre o 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. <!--[if lt IE 9]>   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style>   article, aside, figure, footer, header, hgroup,   menu, nav, section { display: block; } </style> 30
  • 31. Atributos data-* <div data-meta=”address”> </div> 31
  • 32. Drag n Drop jQuery UI Draggable http://jqueryui.com/demos/draggable/ 32
  • 33. contentEditable 33
  • 34. 34
  • 35. Áudio e Vídeo http://mediaelementjs.com/ 35
  • 36. <video controls> <source type="video/mp4" src="video.mp4" /> Esse browser não toca esse vídeo super legal </video> <video controls> <source type="video/mp4" src="video.mp4" /> <source type="video/ogg" src="video.ogg" /> <source type="video/webm" src="video.webm" /> <object><embed> // Muito flash no meio disso </embed></object> </video> 36
  • 37. HTML 5 vai matar o Flash? 37
  • 38. HTML 5 vai matar o Flash? ainda não 37
  • 39. HTML 5 vai matar o Flash? ainda não mas já podem andar lado a lado 37
  • 40. 38
  • 41. dúvidas? 39