html 5 - semana da computação - uff
TRANSCRIPT
HTML 5
UFF - SC 2010
1
Leo Balter
Desenvolvedor Front End
@leobalter
2
O que é o HTML 5?
3
XML
APIs
HTML 5CSS 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 tagsatributos sem aspaselementos semânticos
áudio e vídeoatributos data-*drag n dropcontenteditable
Implementação Segura
10
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
form inputsmeter/progress
Sem muita compatibilidade
12
web sql databaseindexDBwebstorageweb workers
Experimentos
13
Shims, Fallbacks e Polyfills@rem // Remy Sharp
http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://goo.gl/KQDB
14
DOCTYPE
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
16
<!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#containerasidesection#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, o próprio conteúdo do artigo
26
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> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>
30
Atributos data-*
<div data-meta=”address”> </div>
31
Drag n Drop
jQuery UI Draggable
http://jqueryui.com/demos/draggable/
32
contentEditable
33
34
<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
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