Anda di halaman 1dari 26

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