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