madsondias.net
Desenvolvimento web<html5>
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
#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...
HTML
madsondias.net
Divisão em camadas
javascript
xhtml css
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!
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
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.
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
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
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
madsondias.net
Marcação Semântica
Mas não é o Suficiente
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
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
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
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.
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
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.
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>
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>
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>
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>
madsondias.net
Obrigado!
Madson Dias
Professor de Informática em escolas
profissionalizantes.
@omadson
madsondias.net
Top Related