0
HTML 5
a mudança da web
V Solisc
Florianópolis/SC
23/10/2010
PALESTRANTE
Paulino Michelazzo
Consultor Web
Fone: (11) 8715-2228
paulino@michelazzo.com.br
Twitter: @pmichelazzo
O QUE É HTML 5
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...
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 trabalho
voltada ao desenvolvimento de padrões web
para levá-la a atingir o ...
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 2
formalização da sintaxe
e as principais regras implem...
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
armazen...
COMPATIBILIDADE
RETROATIVA
HTML 5
HTML 4.01
HTML 3
HTML 2
XHTML 2
XHTML 1
WEB SEMÂNTICA
A Web semântica interliga significados de palavras
e, neste âmbito, tem como finalidade conseguir
atribuir um ...
<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>
...
<section>
<article>
<h1>Título</h1>
<p>Texto</p>
</article>
</section>
isso é semântica!
ORGANIZAÇÃO
novos elementos semânticos
article usado para indicar uma área da página que contenha textos e outros elemento...
OUTROS ELEMENTOS
• video e audio
• embed
• mark
• progress
• meter
• time
• ruby, rt e rp
• wbr
• canvas
• command
• detai...
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
• ra...
NOVOS ATRIBUTOS
• autocomplete
• autofocus
• datalist
• max
• min
• multiple
• pattern
• placeholder
• required
• step
• m...
NOVIDADE
PSEUDO-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...
COLUNAS
• Elementos
• Número de colunas
(obrigatório)
• Distância entre colunas
(obrigatório)
• Design da coluna
(opcional...
ROUNDED CORNERS
• Elementos
• -moz-border-radius
• border
style=“-moz-border-radius: 10px;-
webkit- border-radius: 10px;bo...
MAIS NOVIDADES
• Canvas
• Armazenamento local
• Georeferenciamento
OBRIGADO
Upcoming SlideShare
Loading in...5
×

HTML 5 - A mudança da Web

1,792

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,792
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "HTML 5 - A mudança da Web"

  1. 1. HTML 5 a mudança da web V Solisc Florianópolis/SC 23/10/2010
  2. 2. PALESTRANTE Paulino Michelazzo Consultor Web Fone: (11) 8715-2228 paulino@michelazzo.com.br Twitter: @pmichelazzo
  3. 3. O QUE É HTML 5
  4. 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. 5. html ATUALIZAÇÃO DA XHTML 1.0 html XhtmlXhtml Xhtml 2 XML
  6. 6. DOCUMENTAÇÃO DOC “X” DOC “Y”
  7. 7. DOCUMENTAÇÃO DOCUMENTAÇÃO PADRÃO
  8. 8. UNIFICAÇÃO DAS LINGUAGENS HTML XHTML HTML 5
  9. 9. HTML 4 HTML 5 evolução revolução
  10. 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. 11. ESPECIFICAÇÕES CSS HTML PNG XML SOAP SVG http://www.w3.org/TR/
  12. 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. 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. 14. COMPATIBILIDADE RETROATIVA HTML 5 HTML 4.01 HTML 3 HTML 2 XHTML 2 XHTML 1
  15. 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. 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. 17. <section> <article> <h1>Título</h1> <p>Texto</p> </article> </section> isso é semântica!
  18. 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. 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. 20. FORMULÁRIOS EM HTML 5
  21. 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. 22. NOVOS ATRIBUTOS • autocomplete • autofocus • datalist • max • min • multiple • pattern • placeholder • required • step • maxlenght*
  23. 23. NOVIDADE PSEUDO-ELEMENTOS • First-letter • First-line • Before • After p::first-letter{ font-size: 60px; }
  24. 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. 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. 26. ROUNDED CORNERS • Elementos • -moz-border-radius • border style=“-moz-border-radius: 10px;- webkit- border-radius: 10px;border: 4px solid #FF0000;”
  27. 27. MAIS NOVIDADES • Canvas • Armazenamento local • Georeferenciamento
  28. 28. OBRIGADO
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×