Alexandre Araujo Rafael Mazariolli Rogrio Lima Thiago Furtado

Roteiro
Histria Transio HTML 4.0 para HTML 5 HTML 5 Diferenas Nosso trabalho Dvidas

Histria do HTML
Tim Berners-Lee criou o HTML;

Histria do HTML
Usou uma estao NeXTcube: Resoluo de problemas de comunicao e disseminao das pesquisas dele com um grupo de colegas. Cenrio propcio (internet era emergente); Ganhou fora em 1990 pela popularidade do Mosaic (browser).

Histria do HTML
Incio do HTML: Flexibilidade; Padronizao: HTML+, HTML2.0 e HTML3.0 entre 1993 e 1995. Reconhecido padro em 1997 (W3C HTML 3.2); Interoperabilidade.

Histria do HTML
1997 criado HTML 4.0 com 3 variaes: Estrito Elementos obsoletos proibidos De transio Elementos obsoletos permitidos Conjunto de frames Conjunto de frames eram permitidos

Transio
HTML 4.01 no era atualizado desde 2001; XHTML 2.0 estava sendo criado (W3C); HTML 4 foi retomado pelo grupo WHATWG (2004); Boa aceitao do HTML 5; Verso de testes desde 2008; Verso final prevista para 2012.

Transio
Discusses sobre funcionalidade do HTML; Descontinuao de programas como Adobe Flash. Padronizao nos navegadores

HTML 5
O que Nova verso do HTML 4 Adio de elementos estrutura contedos dinmicos (API canvas) Facilidade para trabalhar com JavaScript e CSS Elementos estruturais de pginas estabelecidos

O Que H de Novo
Elementos de marcao ou estruturao: <article> <aside> <section> <nav> <header> <footer>

O Que H de Novo
Elementos de marcao ou estruturao:

Elementos de mdia
Elementos de mdia (idia de padronizar como acontece nas imagens): <audio> <video> <source> <embed>

O Que H de Novo
Elemento grfico <canvas> Objetos grficos 2D; Renderizao de contedos visuais dinmicos Aplicaes como jogos, efeitos dinmicos em interfaces de usurio, editores de cdigo, editores grficos, aplicaes, efeitos 3D, etc.

O Que H de Novo
Elementos de formulrio <datalist> <keygen> <output>

O Que H de Novo
Elementos de entrada: <tel> <search> <email> <data> <time> <datetime> <range> <color>

O Que H de Novo
Web Storage anteriormente armazenamento em Cokies localStorage - sem limite de tempo (se a pgina for fechada, na prxima abertura os dados ainda estaro l). sessionStorage - armazena dados durante a sesso HTML5 usa JavaScript para armazenar e acessar os dados.

O que h de novo
Drag-n-Drop Elementos agora tem atributo draggable Comunicao usando eventos (objeto arrastado):
dragstart drag dragend

O que h de novo
Drag-n-drop Comunicao usando eventos (objeto que recebe o drop - target):
dragenter dragleave dragover drop

Nosso trabalho
Tecnologias aplicadas: HTML5 CSS JavaScript JQuery JSON XML

Nosso trabalho
Pgina em html5

?Dvidas?