Palestra proferida no V Solisc realizado em Florianópolis, SC em 23/10/2010.

1. HTML 5
a mudança da web
V Solisc
Florianópolis/SC
23/10/2010

2. PALESTRANTE
Paulino Michelazzo
Consultor Web
Fone: (11) 8715-2228
paulino@michelazzo.com.br
Twitter: @pmichelazzo

3. O QUE É HTML 5

4. O QUE É O HTML 5
E 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

5. html
ATUALIZAÇÃO DA XHTML 1.0
html XhtmlXhtml Xhtml 2
XML

6. DOCUMENTAÇÃO
DOC “X” DOC “Y”

7. DOCUMENTAÇÃO
DOCUMENTAÇÃO PADRÃO

8. UNIFICAÇÃO DAS LINGUAGENS
HTML XHTML
HTML 5

9. HTML 4 HTML 5
evolução
revolução

10. O QUE É O W3C
uma comunidade internacional de trabalho
voltada ao desenvolvimento de padrões web
para levá-la a atingir o máximo de seu potencial
composta de organizações e pessoas

11. ESPECIFICAÇÕES
CSS HTML
PNG
XML
SOAP SVG
http://www.w3.org/TR/

12. HISTÓRIA DO HTML
1990 1992 1994 1996 2002 2004 2006 2008 2010
HTML 2
formalização da sintaxe
e as principais regras implementadas
HTML 3.2
ignorada pelos produtores de browsers
que criavam suas próprias tag’s
Web Standards Project
força a adoção de padrões
dá força as recomendações do W3C
promove o uso de navegadores padrão
HTML 4
estabilização da linguagem HTML
torna-se padrão para web
XHTML 1.0 - XHTML 2.0
levar a HTML para perto da XML
20001998
Fork W3C
Opera,Apple, Mozilla,Tim Bernes-Lee
Web Hypertext Application Technology
Working Group - WHATWG
WHATWG = HTML5
Fim XHTML 2.0
Apple e Google adotam HTML5
Cresce o interesse no padrão

13. 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

14. COMPATIBILIDADE
RETROATIVA
HTML 5
HTML 4.01
HTML 3
HTML 2
XHTML 2
XHTML 1

15. 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

16. <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>

17. <section>
<article>
<h1>Título</h1>
<p>Texto</p>
</article>
</section>
isso é semântica!

18. ORGANIZAÇÃO
novos 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

19. 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/

20. FORMULÁRIOS EM HTML 5

21. 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

22. NOVOS ATRIBUTOS
• autocomplete
• autofocus
• datalist
• max
• min
• multiple
• pattern
• placeholder
• required
• step
• maxlenght*

23. NOVIDADE
PSEUDO-ELEMENTOS
• First-letter
• First-line
• Before
• After
p::first-letter{
font-size: 60px;
}

24. FONTES
em CSS3 qualquer fonte vira “família”
@font-face{
font-family: 'zapfino';
src: url('zapfino.ttf') format ('truetype');
}
p.zap{
font-family: zapfino;
}

25. 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;

26. ROUNDED CORNERS
• Elementos
• -moz-border-radius
• border
style=“-moz-border-radius: 10px;-
webkit- border-radius: 10px;border: 4px
solid #FF0000;”

27. MAIS NOVIDADES
• Canvas
• Armazenamento local
• Georeferenciamento

28. OBRIGADO