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.
HTML 5
UFF - SC 2010
1
Leo Balter
Desenvolvedor
Front End
@leobalter
leo@balter.com.br
2
O que é o HTML 5?
3
XML
APIs
HTML 5
CSS 3
JavaScript
4
Breve histórico
HTML HTML 4 XHTML HTML 5
1990 1997 2000 2010+
5
Princípios básicos
Simplicidade Adaptação
Enxergar o futuro
Compreender o passado
Tradição
6
PQP PM
7
O que podemos
implementar com
HTML5?
8
Implementação
Segura
Sem muita
compatibilidade
Aproximadamente
Utilizáveis
Experimentos
9
doctype
charset
selfclose tags
atributos sem aspas
elementos semânticos
áudio e vídeo
atributos data-*
drag n drop
content...
canvas
geolocation
web sockets
autofocus
placeholder
cache
Aproximadamente Utilizáveis
http://goo.gl/Ft8TZ
http://goo.gl/k...
form inputs
meter/progress
Sem muita
compatibilidade
12
web sql database
indexDB
webstorage
web workers
Experimentos
13
Shims, Fallbacks e Polyfills
@rem // Remy Sharp
http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
htt...
DOCTYPE
15
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//
EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-
transitional.dtd...
<!DOCTYPE html>
17
<html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”>
<html lang=”pt-BR”>
18
charset
19
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset=utf-8 >
20
selfclose tags
<img src=”weeeee.jpg” />
<img src=”weeeee.jpg”>
21
<br /> <br>
22
atributos sem aspas
<meta charset=utf-8 >
23
Elementos Semânticos
24
header
footer
section#container
asidesection#content
article
article
article
25
article
h1 com título do artigo
header
algumas informações nesse rodapé do artigo, sobre o artigo
footer
algum texto aqui,...
Temos um Problema
Estrutural
27
É muito simples
resolver...
28
Desde antes do HTML
5 podemos criar
elementos “novos”
document.createElement(‘article’);
article { display: block }
29
<!--[if lt IE 9]>
  <script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  art...
Atributos data-*
<div data-meta=”address”> </div>
31
Drag n Drop
jQuery UI Draggable
http://jqueryui.com/demos/draggable/
32
contentEditable
33
34
Áudio eVídeo
http://mediaelementjs.com/
35
<video controls>
<source type="video/mp4" src="video.mp4" />
Esse browser não toca esse vídeo super legal
</video>
<video ...
HTML 5 vai matar o
Flash?
37
HTML 5 vai matar o
Flash?
ainda não
37
HTML 5 vai matar o
Flash?
ainda não
mas já podem andar
lado a lado
37
38
dúvidas?
39
Upcoming SlideShare
Loading in …5
×

HTML 5 - Semana da Computação - UFF

2,127 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

HTML 5 - Semana da Computação - UFF

  1. 1. HTML 5 UFF - SC 2010 1
  2. 2. Leo Balter Desenvolvedor Front End @leobalter leo@balter.com.br 2
  3. 3. O que é o HTML 5? 3
  4. 4. XML APIs HTML 5 CSS 3 JavaScript 4
  5. 5. Breve histórico HTML HTML 4 XHTML HTML 5 1990 1997 2000 2010+ 5
  6. 6. Princípios básicos Simplicidade Adaptação Enxergar o futuro Compreender o passado Tradição 6
  7. 7. PQP PM 7
  8. 8. O que podemos implementar com HTML5? 8
  9. 9. Implementação Segura Sem muita compatibilidade Aproximadamente Utilizáveis Experimentos 9
  10. 10. doctype charset selfclose tags atributos sem aspas elementos semânticos áudio e vídeo atributos data-* drag n drop contenteditable Implementação Segura 10
  11. 11. canvas geolocation web sockets autofocus placeholder cache Aproximadamente Utilizáveis http://goo.gl/Ft8TZ http://goo.gl/koygK http://goo.gl/TS7I5 .focus() .clearField() Google Gears 11
  12. 12. form inputs meter/progress Sem muita compatibilidade 12
  13. 13. web sql database indexDB webstorage web workers Experimentos 13
  14. 14. Shims, Fallbacks e Polyfills @rem // Remy Sharp http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills http://goo.gl/KQDB 14
  15. 15. DOCTYPE 15
  16. 16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1- transitional.dtd"> 16
  17. 17. <!DOCTYPE html> 17
  18. 18. <html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”> <html lang=”pt-BR”> 18
  19. 19. charset 19
  20. 20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset=utf-8 > 20
  21. 21. selfclose tags <img src=”weeeee.jpg” /> <img src=”weeeee.jpg”> 21
  22. 22. <br /> <br> 22
  23. 23. atributos sem aspas <meta charset=utf-8 > 23
  24. 24. Elementos Semânticos 24
  25. 25. header footer section#container asidesection#content article article article 25
  26. 26. article h1 com título do artigo header algumas informações nesse rodapé do artigo, sobre o artigo footer algum texto aqui, o próprio conteúdo do artigo 26
  27. 27. Temos um Problema Estrutural 27
  28. 28. É muito simples resolver... 28
  29. 29. Desde antes do HTML 5 podemos criar elementos “novos” document.createElement(‘article’); article { display: block } 29
  30. 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. 31. Atributos data-* <div data-meta=”address”> </div> 31
  32. 32. Drag n Drop jQuery UI Draggable http://jqueryui.com/demos/draggable/ 32
  33. 33. contentEditable 33
  34. 34. 34
  35. 35. Áudio eVídeo http://mediaelementjs.com/ 35
  36. 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. 37. HTML 5 vai matar o Flash? 37
  38. 38. HTML 5 vai matar o Flash? ainda não 37
  39. 39. HTML 5 vai matar o Flash? ainda não mas já podem andar lado a lado 37
  40. 40. 38
  41. 41. dúvidas? 39

×