O que são os Padrões W

eb?

o um co nj un to de no rm as , di retr izes,
Padrões Web sã ins de
es, nota s, ar ti gos, tu toriai s e af
recomendaçõ
te r té cnico, pr od uz id os pe lo W 3C.
cará

fabr ic an te s, de se nv olve do re s e
É destinado a orientar ili te m a
us o de pr át ic as que po ss ib
projetistas para o
dos.
criação de uma Web acessível a to
 A Web sem padrões...

Código
if ic u da d e de Incompreensíve
D l
vo l v i m ento Para máquinas
Desen
ção
E Manuten

Excesso de código
Sem signi
ficado

çã o e
m at a
Fo r j un tas <table>
r u tura
Est
Div isão em Camadas...

Javascript

XHTML

CSS
CSS
CSS
Anotem isso...

Trabalhar com Web Standards

não é uma questão de
trocar tabelas por div's,
é um a q u e st ã o d e S e m â n tic a !
 Tableless Vs Web Stand
ards

bl el es s é um te rm o qu e ficou m ui to po pu lar no
Ta
il, e qu e ac ab a po r co nf un dir m ui ta ge nt e.
Bras
nific a um sit e de se nv ol vi do se m o uso
Tableless sig
s ta be las pa ra or ga ni za r o la yo ut , e sim us ando
da
CSS.
ia r um si te Ta bl eles s nã o sig ni fic a qu e es teja
Cr
gu indo os Pa dr õe s W eb , qu e vã o m uito além de
se
có digo vá lid o, e te m pr eocu pa çõ es m aiores
um
como a Semântica e a Acessibilidade
 Caso

Mike Davidson foi o responsável pelo Rede

sign
do 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ês
730 Terabytes/ano
 Caso

do s pr im eiros sites aces síve is produzidos

Um
por uma empresa comercial

sign foi base ad o na s Di re ti va s para

Todo o Rede
b ili da de de co nt eú do da W eb , da W3C
a acessi

conv er são au m en ta ram 30 0% ,

Com isso, as taxas de m na tu ral
çã o ca ír am 66 % , lis ta ge
custos de manuten rr eg am en to
% , e o te m po de ca
nas buscas aumentou 50
da página caiu 75%
Estrutura...

f o r ma ção , com o
m a estr utu ra d e in ont er
U m HTM L , de ve c
s es cr ito s e
documento devido
r c a ç õ e s c o m
apenas ma r ca çõe s s e m
o ar ma
signifi cad . A dicion
r co mp ara d o a
o em u mode se
sit e p r o
significa d r an co a u m liv
er s as p á g inas emb
adicionar div
Um código Semântico.
..

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”
Compreensivel para humanos e máquinas

Isso possibilitaria que informações

úteis em diferentes sistemas fossem
integradas para facilitar a vida das
pessoas.

Interoperabilidade
 Marcação Semântica

>< /ta bl e> ap en as pa ra da do s ta bu la res

Usar <tab le

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
 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 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>
Para referência sobre todas as tag's
http://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 trabalho

http://www.whatwg.org/
 Muito Obrigado :)

ar te on lin e, tr ab al ha co m pr ojetos de
Agni é diretor de çã o.
in te rf ace, w eb st an da rd s e cr ia

www.twitter.com/eduagni

www.formspring.me/eduagni

g n i . ar t . b r
www.a