HTML 5 - A mudança da Web
-
Upload
paulino-michelazzo -
Category
Technology
-
view
1.791 -
download
1
description
Transcript of HTML 5 - A mudança da Web
![Page 1: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/1.jpg)
HTML 5a mudança da web
V SoliscFlorianópolis/SC23/10/2010
![Page 3: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/3.jpg)
O QUE É HTML 5
![Page 4: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/4.jpg)
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
![Page 5: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/5.jpg)
html
ATUALIZAÇÃO DA XHTML 1.0
html XhtmlXhtml Xhtml 2
XML
![Page 6: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/6.jpg)
DOCUMENTAÇÃO
DOC “X” DOC “Y”
![Page 7: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/7.jpg)
DOCUMENTAÇÃO
DOCUMENTAÇÃO PADRÃO
![Page 8: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/8.jpg)
UNIFICAÇÃO DAS LINGUAGENS
HTML XHTML
HTML 5
![Page 9: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/9.jpg)
HTML 4 HTML 5
evolução
revolução
![Page 10: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/10.jpg)
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
![Page 11: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/11.jpg)
ESPECIFICAÇÕES
CSS HTML
PNG
XML
SOAP SVG
http://www.w3.org/TR/
![Page 12: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/12.jpg)
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
![Page 13: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/13.jpg)
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
![Page 14: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/14.jpg)
COMPATIBILIDADE RETROATIVA
HTML 5
HTML 4.01HTML 3HTML 2
XHTML 2XHTML 1
![Page 15: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/15.jpg)
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
![Page 16: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/16.jpg)
<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>
![Page 17: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/17.jpg)
<section><article><h1>Título</h1><p>Texto</p>
</article></section>
isso é semântica!
![Page 18: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/18.jpg)
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
![Page 19: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/19.jpg)
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/
![Page 20: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/20.jpg)
FORMULÁRIOS EM HTML 5
![Page 21: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/21.jpg)
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
![Page 22: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/22.jpg)
NOVOS ATRIBUTOS
• autocomplete
• autofocus
• datalist
• max
• min
• multiple
• pattern
• placeholder
• required
• step
• maxlenght*
![Page 23: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/23.jpg)
NOVIDADEPSEUDO-ELEMENTOS
• First-letter
• First-line
• Before
• After
p::first-letter{ font-size: 60px;}
![Page 24: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/24.jpg)
FONTES
em CSS3 qualquer fonte vira “família”
@font-face{ font-family: 'zapfino'; src: url('zapfino.ttf') format ('truetype');}
p.zap{ font-family: zapfino;}
![Page 25: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/25.jpg)
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;
![Page 26: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/26.jpg)
ROUNDED CORNERS
• Elementos
• -moz-border-radius
• border
style=“-moz-border-radius: 10px;-webkit- border-radius: 10px;border: 4px solid #FF0000;”
![Page 27: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/27.jpg)
MAIS NOVIDADES
• Canvas
• Armazenamento local
• Georeferenciamento
![Page 28: HTML 5 - A mudança da Web](https://reader034.fdocumentos.tips/reader034/viewer/2022042715/5590b09a1a28abf5058b45ef/html5/thumbnails/28.jpg)
OBRIGADO