html 5
DESCRIPTION
TRANSCRIPT
![Page 1: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/1.jpg)
madsondias.net
Desenvolvimento web<html5>
![Page 2: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/2.jpg)
madsondias.net
Padrões web são conjunto de normas e
recomendações produzidos pelo W3C.
É destinado a desenvolvedores e projetistas para
o uso de práticas que possibilitem a criação de
uma Web acessível a todos.
O que são padrões web?
XHTMLCSS
HTML
XMLPNG
![Page 3: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/3.jpg)
#Dificuldade de desenvolvimento e Manutenção;
#Sem significado
#Formatação e estruturas Juntas
#Excesso de código
#Código icompreensível para máquinas
madsondias.net
web sem padrões...
![Page 4: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/4.jpg)
HTML
madsondias.net
Divisão em camadas
javascript
xhtml css
![Page 5: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/5.jpg)
Trabalhar com padrões web não é uma questão
de trocar tabelas por div’s
madsondias.net
Anotem isso!
é uma questão de semântica!
![Page 6: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/6.jpg)
Tableless é um termo que ficou muito popular no
Brasil, e que acaba por confundir muita gente.
Tableless significa um site desenvolvido sem o
uso das tabelas para organizar o layout, e sim
usando CSS.
Criar um site Tableless não significa que esteja
seguindo os Padrões Web , que vão muito além
de um código válido, e tem preocupações maiores
como a Semântica e a Acessibilidade.
madsondias.net
Tableless Vs Webstandarts
![Page 7: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/7.jpg)
madsondias.net
Estrutura
Uma estrutura de informação, como
documentos escritos em HTML, deve conter
Adicionar marcações sem
significado em um site pode ser comparado a
adicionar diversas páginas em branco a um livro
apenas marcações com
dev ido significado.
![Page 8: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/8.jpg)
madsondias.net
Um código semântico...
Refere-se ao estudo do significado.
Quando utilizamos cada marcação para o que
ela realmente foi criada, estamos construindo um
“Código Semântico”.
Parar de pensar em “isso vem aqui, isso vai ali...”
e pensar na “Estrutura da Informação”.
Criar uma “Marcação com Significado”
Semântica
![Page 9: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/9.jpg)
madsondias.net
Compreensivel
Isso possibilitaria que i n f o r m a ç õ e s úteis em
diferentes sistemas f o s s e m i n t e g r a d a s
para facilitar a vida das pessoas.
Interopelabilidade
![Page 10: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/10.jpg)
madsondias.net
Marcação Semântica
Usar <table></table> apenas para dados tabulares.
Usar <h1></h1> até <h6></h6> para títulos
Usar <ol></ol> para Listas Ordenadas e <ul></ul> para
Listas Não Ordenadas, seguidos do elemento <li></li>
Usar <em></em> para Enfase, e <strong></strong> para
Enfase Forte
Usar <label></label> para identificar campos em
formulários
![Page 11: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/11.jpg)
madsondias.net
Marcação Semântica
Mas não é o Suficiente
![Page 12: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/12.jpg)
madsondias.net
html5
#Ian Hickson é o editor do HTML5
#Desde 2008 vêm sendo apresentados rascunhos
(Working Draft)
#Espera-se que essa nova versão seja liberada ainda em
2010
#A prev isão para que se torne uma “recomendação” é
para 2012
#Já é compreendido pelas versões mais recentes dos
Browsers
![Page 13: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/13.jpg)
madsondias.net
html5
Browser como o Google Chrome, Firefox 3.5,
Internet Explorer 8 e Safari 4 já dão suporte ao
HTML5, e com isso algumas páginas já vão
aderindo a nova versão
![Page 14: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/14.jpg)
madsondias.net
html5
API’s para a criação de Gráficos 2D,
c o n t r o l e d e c o n t e ú d o m u l t i m í d i a ,
melhor depuração de erros e aprimoramento do
uso offline são algumas das novidades da nova
versão
![Page 15: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/15.jpg)
madsondias.net
html5
N o v o s e l e m e n t o s p a r a i d e n t i f i c a r
m e l h o r o s c o n t e ú d o s ,
coomo <header> e <footer> para cabeçalho e
rodapé, <sect ion> para sessões de uma página
ou <art ic le> para identificar um artigo ou um
post.
![Page 16: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/16.jpg)
madsondias.net
html5
< h e a d e r >
Para definir onde será o cabeçalho da página
< f o o t e r >
Para definir onde será o rodapé da página ou da
sessão
![Page 17: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/17.jpg)
madsondias.net
html5
< a s i d e >
Informações relativas ao conteúdo principal, como
um menu ou campo de busca
< a r t i c l e >
Para definir a informação principal da página,
nela é onde estará o conteúdo em si.
![Page 18: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/18.jpg)
madsondias.net
html5
< f i g u r e >
Para a inserção de imagens com legenda
<figure id=”1”>
<img src=”imagem.jpg” alt=”descrição”>
<legend>Legenda da Imagem</legend>
</figure>
![Page 19: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/19.jpg)
madsondias.net
html5
< a u d i o >
Exibe qualquer elemento de streaming de áudio,
com atributos para exibição de controles ou
execução automatica.
<audio src=”horse.ogg” controls=”controls”>
Seu Navegador não suporta esse recurso
</audio>
![Page 20: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/20.jpg)
madsondias.net
html5
< v i d e o >
Exibe vídeos na página, com exibição de controles
e de uma imagem enquanto o vídeo é carregado.
<video src=”movie.ogg” controls=”controls”>
Seu navegador não suporta esse recurso
</video>
![Page 21: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/21.jpg)
madsondias.net
html5
< n a v >
Sessão de navegação, para links ‘lado a lado’.
<nav>
<a href=”default.asp”>Home</a>
<a href=”tag_meter.asp”>Anterior</a>
<a href=”tag_noscript.asp”>Próximo</a>
</nav>
![Page 22: HTML 5](https://reader034.vdocuments.com.br/reader034/viewer/2022052618/548c911eb47959776d8b4570/html5/thumbnails/22.jpg)
madsondias.net
Obrigado!
Madson Dias
Professor de Informática em escolas
profissionalizantes.
@omadson
madsondias.net