HTML 5 - A mudança da Web

HTML 5a mudança da web

V SoliscFlorianópolis/SC23/10/2010

PALESTRANTE

Paulino Michelazzo

Consultor WebFone: (11) 8715-2228paulino@michelazzo.com.brTwitter : @pmichelazzo

O QUE É HTML 5

O QUE É O HTML 5E PORQUE ELE É NECESSÁRIO

a nova geração da HTML

a atualização da XHTML 1.0

a unificação das linguagens de marcação da web

a documentação dos padrões web

html

ATUALIZAÇÃO DA XHTML 1.0

html XhtmlXhtml Xhtml 2

XML

DOCUMENTAÇÃO

DOC “X” DOC “Y”

DOCUMENTAÇÃO

DOCUMENTAÇÃO PADRÃO

UNIFICAÇÃO DAS LINGUAGENS

HTML XHTML

HTML 5

HTML 4 HTML 5

evolução

revolução

O QUE É O W3C

uma comunidade internacional de trabalhovoltada ao desenvolvimento de padrões web

para levá-la a atingir o máximo de seu potencialcomposta de organizações e pessoas

ESPECIFICAÇÕES

CSS HTML

PNG

XML

SOAP SVG

http://www.w3.org/TR/

HISTÓRIA DO HTML

1990 1992 1994 1996 2002 2004 2006 2008 2010

HTML 2formalização da sintaxee as principais regras implementadas

HTML 3.2ignorada pelos produtores de browsersque criavam suas próprias tag’s

HTML 2 HTML 2

Web Standards Projectforça a adoção de padrõesdá força as recomendações do W3Cpromove o uso de navegadores padrão

HTML 4estabilização da linguagem HTMLtorna-se padrão para web

XHTML 1.0 - XHTML 2.0levar a HTML para perto da XML

20001998

Fork W3COpera, Apple, Mozilla, Tim Bernes-LeeWeb Hypertext Application TechnologyWorking Group - WHATWG

WHATWG = HTML5

Fim XHTML 2.0Apple e Google adotam HTML5Cresce o interesse no padrão

SUPORTE A HTML 5

novas tags 4.0* x 3.6* 10.1* 4.0*

canvas 4.0* x 3.5* 9* 3.0*

elemento de vídeo 4.0 x 3.0 10.5 3.2

armazenamento local 4.0 8 3.0 10.5 4.0

aplicações off-line 4.0 8* 3.6 x 4.0

formulários HTML5 4.0* x x 10.1* 5.0*

drag-n’-drop 4.0 7* 3.5 x 4.0* parcialmente

COMPATIBILIDADE RETROATIVA

HTML 5

HTML 4.01HTML 3HTML 2

XHTML 2XHTML 1

WEB SEMÂNTICA

A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos

publicados na Internet de modo que seja perceptível tanto pelo humano como pelo

computador.

Fonte: Wikipedia - http://pt.wikipedia.org/wiki/Web_sem%C3%A2ntica

<div><div><h1>Título</h1><p>Texto</p>

</div></div>

<div id=secao><div id=artigo><h1>Título</h1><p>Texto</p>

</div></div>

<section><article><h1>Título</h1><p>Texto</p>

</article></section>

isso é semântica!

ORGANIZAÇÃOnovos elementos semânticos

article usado para indicar uma área da página que contenha textos e outros elementos que formam um artigo

aside agrupa informações relacionadas ao conteúdo onde se encontra(um artigo ou a uma página)

footer usado para indicar o rodapé de uma página e seus elementos

header usado para indicar o header de uma página e seus elementos

hgroup usado para agrupar títulos (H1...H6) em múltiplos níveis

nav usado para a indicar áreas de navegação da página (links de menus e etc)

section usado para indicar seções dentro de uma página

OUTROS ELEMENTOS• video e audio

• embed

• mark

• progress

• meter

• time

• ruby, rt e rp

• wbr

• canvas

• command

• detais

• datalist

• keygen

• outputlist

http://www.w3.org/TR/2010/WD-html5-diff-20100624/

FORMULÁRIOS EM HTML 5

TIPO INPUT

• tel - números de telefones

• email - endereços de email

• url - endereços web

• search - campos de busca

• range - seletor numérico entre valores

NOVOS ATRIBUTOS

• autocomplete

• autofocus

• datalist

• max

• min

• multiple

• pattern

• placeholder

• required

• step

• maxlenght*

NOVIDADEPSEUDO-ELEMENTOS

• First-letter

• First-line

• Before

• After

p::first-letter{ font-size: 60px;}

FONTES

em CSS3 qualquer fonte vira “família”

@font-face{ font-family: 'zapfino'; src: url('zapfino.ttf') format ('truetype');}

p.zap{ font-family: zapfino;}

COLUNAS

• Elementos

• Número de colunas (obrigatório)

• Distância entre colunas (obrigatório)

• Design da coluna (opcional)

-moz-column-count: 4;-moz-column-gap: 1em;-webkit-column-count: 4;-webkit-column-gap: 1em;-moz-column-rule: 1px solid #222;-webkit-column-rule: 1px solid #222;

ROUNDED CORNERS

• Elementos

• -moz-border-radius

• border

style=“-moz-border-radius: 10px;-webkit- border-radius: 10px;border: 4px solid #FF0000;”

MAIS NOVIDADES

• Canvas

• Armazenamento local

• Georeferenciamento

OBRIGADO