Padrões Web são um conjunto de normas, diretrizes,
recomendações, notas, artigos, tutoriais e afins de
caráter técnico, produzidos pelo W3C.
É destinado a orientar fabricantes, 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 os Padrões Web?
A Web sem padrões...
<table>
Sem significado
Código IncompreensívelPara máquinas
Formatação e
Estrutura juntas
Excesso de código
Dificudade de
Desenvolvimento
E Manutenção
Divisão em Camadas...
XHTML
Javascript
CSSCSS
CSS
Anotem isso...
Trabalhar com Web Standards
não é uma questão detrocar tabelas por div's,
é uma questão de Semântica!
Tableless Vs Web Standards
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
Caso
Mike Davidson foi o responsável pelo Redesigndo site da ESPN, seguindo os Padrões Web
Média de redução de 50Kb por página
Com isso, a economia de banda foi de:2 Terabytes/dia
61 Terabytes/mês730 Terabytes/ano
Um dos primeiros sites acessíveis produzidos
por uma empresa comercial
Todo o Redesign foi baseado nas Diretivas para
a acessibilidade de conteúdo da Web, da W3C
Com isso, as taxas de conversão aumentaram 300%,
custos de manutenção caíram 66%, listagem natural
nas buscas aumentou 50%, e o tempo de carregamento
da página caiu 75%
Caso
Estrutura...
Uma estrutura de informação, como
documentos escritos em HTML, deve conter
apenas marcações com devido
significado. Adicionar marcações sem
significado em um site pode ser comparado a
adicionar diversas páginas em branco a um livro
Semântica 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”
Um código Semântico...
Isso possibilitaria que informações úteis em diferentes sistemas fossem integradas para facilitar a vida das pessoas.
Interoperabilidade
Compreensivel para humanos e máquinas
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
Mas não é o
suficiente
● 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 previsão para que se torne uma “recomendação” é para 2012
● Já é compreendido pelas versões mais recentes dos Browsers
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
HTML5
API's para a criação de Gráficos 2D, controle de conteúdo multimídia, melhor depuração de erros e aprimoramento do uso offline são algumas das novidades da nova versão
HTML5
Novos elementos para identificar melhor os conteúdos,
como <header> e <footer> para cabeçalho e rodapé, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.
HTML5
<header>
Para definir onde será o cabeçalho da página
<footer>
Para definir onde será o rodapé da página ou da sessão
HTML5
<aside>
Informações relativas ao conteúdo principal, como um menu ou campo de busca
<dialog>
Será usada para descrever dialogos, usando tags de termos de definição
HTML5
<figure>
Para a inserção de imagens com legenda
<figure id="1">
<img src="imagem.jpg" alt="descrição">
<legend>Legenda da Imagem</legend>
</figure>
HTML5
<audio>
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>
HTML5
<video>
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>
HTML5
<nav>
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>
HTML5
<menu>
Serve para gerar um menu, com o auxílio da marcação <li>.
<menu>
<li><input type="checkbox" />Vermelho</li>
<li><input type="checkbox" />Azul</li>
</menu>
HTML5
Para referência sobre todas as tag'shttp://www.w3schools.com/html5/html5_reference.asp
Recomendo a leitura de “Refletindo sobre Semântica” http://tinyurl.com/beervb
Acesso aos canais de participação dos grupos de trabalhohttp://www.whatwg.org/
Agni é diretor de arte online, trabalha com projetos de
interface, web standards e criação.
www.twitter.com/eduagni
www.formspring.me/eduagni
Muito Obrigado :)
www.agni.art.br
Top Related