www.agni.art.br
Santos
EduardoEduardo Santos

Porque falar de Padrõ
es Web?
● A maior parte da Web e dos
profissionais ainda é obsoleta
● Necessidade de acompanhar a
evolução da Web
● Necessidade de interoperabilidade
● Necessidade de otimização dos sites
● Necessidade (ainda) de
esclarecimentos a respeito
20/01/2009 www.agni.art.br Eduardo Santos

No início de tudo...
A Web é criada em 1989, para ser um padrão
de pub licação e distribuição de textos
científicos e acadêmicos
(URL)
Localizador Uniforme de Recursos
(HTML)
Lingua gem de Marcação de Hipertexto
Protocolo de Tran sferência de Hipertexto (HTTP)
Tecnologia aberta e gratuita
20/01/2009 www.agni.art.br Eduardo Santos

A limitação do HTML.
..
A Web cresce comercialmente, e
veem a
necessidade de publicação de
conteúdo diagramado,
como em revistas e jornais
(algo para o qual o HTML não poss
uia recursos)
Há então a adaptação da linguage
m de forma
equivocada, com uma preocupaçã
o unicamente
visual, esquecendo da qualidade d
o código
20/01/2009 www.agni.art.br Eduardo Santos

A Guerra dos Browser
s...
Aproximadamente entre 1995 e 1999 houve a
chamada “Guerra dos Browsers”, onde a Nets
cape
(e seu Browsers de mesmo nome) e a Microsoft
(com o seu Internet Explorer) disputavam o
mercado de navegadores.
Além de não darem suporte aos padrões do re
cém
criado World Wide Web Consortium (W3C), ai
nda
criavam seus próprios padrões, aumentando a
bagunça.
20/01/2009 www.agni.art.br Eduardo Santos

Editores WYSIWYG...
\"O que você vê é o que você tem\", ou em inglês
o
\"What You See Is What You Get\" (WYSIWYG) sã
programas que lhe permitem ter a visualização
nda
final de um documento, enquanto o mesmo ai
é editado.
Editores H TML WYSIWYG como Go Live,
Front Page e Dream weaver surgiram por volta de
jo e
1996, e são conhecidos por gerar um código su
muito maior que o necessário.
20/01/2009 www.agni.art.br Eduardo Santos

Cursos e Profissionais
Desatualizados
20/01/2009 www.agni.art.br Eduardo Santos

Com tudo isso, as pág
inas...
Cada arquivos de um site acaba sendo um
incompreensível emaranhado de Tags
com tabelas, formatações, scripts...
Tudo muito maior que o necessário.
Dessa forma, para que seja feita alguma
alteração no site, é necessário
alterar todos os arquivos...
um a um!
20/01/2009 www.agni.art.br Eduardo Santos

O resultado de tudo is
so...
Código sujo e
e incompreensíve
D ificudade d l
Desen volv imento
o
E Manutençã
Falta de
padrão
spacer.gi
f
e
tação s
F orma junta <table>
a
Est rutur
20/01/2009 www.agni.art.br Eduardo Santos

O que são os Padrões
Web?
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.
res e
É destinado a orientar fabricantes, desenvolvedo
projetistas para o us o de práticas que possibilitem a
dos.
criação de uma Web acessível a to
20/01/2009 www.agni.art.br Eduardo Santos

Consórcio World Wide
Web (W3C)
Fundada por Tim Berners-Lee em 1994
Desenvolve Recomendações abertas, até
agora mais de 80 padrões...
Engajado em educação, expansão e
desenvolvimento de orientações
Um fórum neutro para construir consenso em
torno de padrões web
20/01/2009 www.agni.art.br Eduardo Santos

W3C: A evolução da Web para seu potencial máximo...

Web Standards Projec
t
O Web Standards Project (WaSP) é um grupo
formado em 1998 com o objetivo de promover os
Padrões Web, assegurando desse modo um acesso
simples e com menos custos para todos.
Vem encorajando e persuadindo os fabricantes de
Browsers a fornecerem suporte aos padrões, como
o XHTML, CSS, ECMAScript (a versão standard do
JavaScript) e o DOM.
20/01/2009 www.agni.art.br Eduardo Santos

Mudança de Conceito
...
Web dividida em três camadas:
●
Conteúdo (XHTML)
● Apresentação (CSS)
●
Comportamento (Javascript)
Devem ser desenvolvidas de
forma independente, porém
uma complementa a outra
20/01/2009 www.agni.art.br Eduardo Santos

Div isão em Camadas..
.
Javascript
XHTML
CSS
CSS
CSS
20/01/2009 www.agni.art.br Eduardo Santos

Sem padrões | Com
padrões
✗ Extensão da ✔ Acessível de qualquer
Mídia Impressa dispositivo
✗ Layout baseado ✔ Layout baseado
em Tabelas em CSS
✗ Conteúdo, ✔ Separação entre
Apresentação e Conteúdo,
Comportamento Apresentação e
“aninhados” Comportamento
✗ Código ✔ Código
Incompreensível Acessível
20/01/2009 www.agni.art.br Eduardo Santos

Um “menu” a moda a
ntiga...
Item 1 Item 2 Item 3 Item 4
<TABLE CELLSPACING=1 CELLPADDING=1 BORDER=0 WIDTH=400>
<TBODY>
<TR>
<TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100>
<FONT FACE=VERDANA SIZE=1><B><A HREF=item1.html>Item 1</A></B></FONT>
</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100>
<FONT FACE=VERDANA SIZE=1><B><A HREF=item2.html>Item 2</A></B></FONT>
</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100>
<FONT FACE=VERDANA SIZE=1><B><A HREF=item3.html>Item 3</A></B></FONT>
</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100>
<FONT FACE=VERDANA SIZE=1><B><A HREF=item4.html>Item 4</A></B></FONT>
</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100>
<FONT FACE=VERDANA SIZE=1><B><A HREF=item5.html>Item 5</A></B></FONT>
</TD>
</TR>
</TBODY>
</TABLE>
20/01/2009 www.agni.art.br Eduardo Santos

Um “menu” seguindo
os padrões...
Item 1 Item 2 Item 3 Item 4
<ul>
<li><a href=”item1.html” title=”Página 1”>Item 1</a></li>
<li><a href=”item2.html” title=”Página 2”>Item 2</a></li>
<li><a href=”item3.html” title=”Página 3”>Item 3</a></li>
<li><a href=”item4.html” title=”Página 4”>Item 4</a></li>
</ul>
20/01/2009 www.agni.art.br Eduardo Santos

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”
20/01/2009 www.agni.art.br Eduardo Santos

Marcação Semântica
res
Usar <tab le></table> apenas para dados tabula
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
20/01/2009 www.agni.art.br Eduardo Santos

Vantagens da adoção
dos padrões...
● Carregamento mais rápido
●
Menores custos com hospedagem
● Melhor Consistência Visual
● Redesign mais barato e eficiênte
● Melhores resultados nos Mecanismos de
Buscas
● Maior acessibilidade e interoperabilidade
20/01/2009 www.agni.art.br Eduardo Santos

Vantagem: Carregame
nt o mais rápido...
Páginas com menos código,
consequentemente com menos Kbytes
Estando a Apresentação (CSS) e o Comportamento
rão
(Javascript) em arquivos separados, eles se
carregados apenas uma vez. A cada página
do
acessada, esses arquivos já estarão no Cachê
Na vegador, e não precisarão ser carregados
novamente.
20/01/2009 www.agni.art.br Eduardo Santos

Vantagem: Menores c
ustos de hospedagem
...
Páginas com menos Kbytes,
além de mais leves para o usuário,
ocupam menor espaço no servidor,
e com isso se reduz a
Largura de Banda
utilizada
20/01/2009 www.agni.art.br Eduardo Santos

Caso
Mike Davidson foi o responsável pelo Re
design
do site da ESPN, seguindo os Padrões W
eb
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
20/01/2009 www.agni.art.br Eduardo Santos

Melhores resultados n
as buscas
Um dos fatores considerados pelos
Mecanismos de Busca para a ordenação
dos resultados é a Relevância das
páginas encontradas com relação as
palavras-chave buscadas
Usar corretamente as marcações,
como por exemplo <h1></h1> até
<h6></h6> para títulos e
<strong></strong> para Ênfase Forte,
pode aumentar a relevância dos seus
documentos na Web e melhorar o
posicionamento nas buscas.
20/01/2009 www.agni.art.br Eduardo Santos

Maior Acessibilidade
A Camada de Conteúdo (HTML) bem estruturada
Tela
e ordenada, possibilita o acesso através de Leitores de
s
Criando Camadas de Apresentação separadas, podemo
As,
fornecer acesso ao site através de Tvs, Celulares e PD
fornecer versões para impressão, etc
Páginas mais leves facilitam o acesso de conexões
mais lentas (Dial Up)
20/01/2009 www.agni.art.br Eduardo Santos

Conhecendo os Padrões
20/01/2009 www.agni.art.br Eduardo Santos

HTML: HyperText Mark
up Language
Criada por Tim Berners-Lee, baseada no
SGML (Standard Generalized Markup
Language)
Primeira especificação formal publicada em
1993, como uma aplicação formal para
SGML
Desde 1996 tem suas especificações
mantidas pela W3C
Apesar de ser uma “Linguagem de
Marcação”, possui algumas Tags para
formatação
Não possui uma sintaxe rigorosa.
HTML
20/01/2009 www.agni.art.br Eduardo Santos

HTML: Hype rText Markup Language
O HTML sofreu várias mudanças em suas
diferentes versões, com o objetivo de estender a
linguagem para que pudesse acompanhar a
evolução da Web e das tecnologias nela
inseridas.
A última versão especificada
foi o HTML 4.1
Existe atualmente um grupo de trabalho
desenvolvendo o HTML 5
20/01/2009 www.agni.art.br Eduardo Santos

XML: eXtensible Marku
p Language
Criada para suprir a falta de flexibilidade do HTML
Separação do conteúdo da formatação
Simplicidade e Legibilidade, para humanos e
computadores
Criação de arquivos para validação de estrutura
(DTD, posteriormente também o padrão Schema)
Interligação de bancos de dados distintos
Concentração na estrutura da informação
20/01/2009 www.agni.art.br Eduardo Santos

XML: eXtensible Markup Language
O desenvolvedor tem a possibilidade de
criar suas próprias marcações
Isso dá a ele flexibilidade e liberdade na hora da
implementação do documento
Por outro lado, fica a cargo do desenvolvedor a
tarefa de definir o significado dos elementos que
ele utiliza (através de DTDs ou Schemas)
20/01/2009 www.agni.art.br Eduardo Santos

Exemplo:
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<agenda-telefonica>
<contato tipo=”pessoa”>
<nome>João Aurélio</nome>
<endereco>Rua XV de Novembro, 1234</endereco>
<telefone>1234-5678</telefone>
</contato>
<contato tipo=”pessoa”>
<nome>Ana Maria</nome>
<endereco>Avenida São João, 111</endereco>
<telefone>4321-8765</telefone>
</contato>
<agenda-telefonica>
20/01/2009 www.agni.art.br Eduardo Santos

XHTML: eXtensible Hy
perText Markup Langua
ge
Uma reformulação da linguagem de
marcação HTML baseada em XML
Pode ser interpretado por qualquer dispositivo,
independentemente da plataforma utilizada, pois as
marcações possuem sentido semântico para as
máquinas
XHTML deverá ser o sucessor do HTML
20/01/2009 www.agni.art.br Eduardo Santos

HTML vs XHTML: Princ
ipais diferenças
●
As marcações devem ser escritas em
letras minúsculas
● As marcações devem estar corretamente
aninhadas
●
Os documentos devem ser bem formados
●
Marcações de fechamento são
obrigatórias
●
Elementos orfãos devem ser fechados
● Diferenças para os atributos.
20/01/2009 www.agni.art.br Eduardo Santos

HTML vs XHTM L: Principais diferenças
As marcações devem ser escritas em letras minúsculas...
Exemplo errado:
<P>Meu texto vem aqui!</P>
Exemplo correto:
<p>Meu texto vem aqui!</p>
20/01/2009 www.agni.art.br Eduardo Santos

HTML vs XHTML: Princ
ipais diferenças
As marcações devem estar corretamente aninhadas...
Exemplo errado:
<p>Meu texto vem <strong>aqui!</p></strong>
Exemplo correto:
<p>Meu texto vem <strong>aqui!</strong></p>
20/01/2009 www.agni.art.br Eduardo Santos

HTML vs XHT ML: Principais diferenças
Os documentos devem ser bem formados...
Todos os elementos XHTML devem estar corretamente
aninhados seguindo a estrutura básica conforme abaixo:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
20/01/2009 www.agni.art.br Eduardo Santos

HTML vs XHTML: Princ
ipais diferenças
Marcações de fechamento são obrigatórias...
Exemplo errado:
<p>Um parágrafo.<p>Outro parágrafo.
Exemplo correto:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
20/01/2009 www.agni.art.br Eduardo Santos

HTML vs XHT ML: Principais diferenças
Elementos orfãos devem ser fechados...
Exemplo errado:
<br>
<img src=\"imagem.gif\" alt=\"minha imagem \">
Exemplo correto:
<br />
<img src=\"imagem.gif\" alt=\"minhaimagem \" />
20/01/2009 www.agni.art.br Eduardo Santos

XHTML: Recomendaçõ
es
Aplicamos “Itálico” em um texto para dar ênfase...
Ao invés da marcação <i></i>,
use <em></em>, ou então <cite></cite>
o)
se for uma citação (de um livro, por exempl
Para uma ênfase forte, ao invés de <b></b>,
Use a marcação <strong></strong>
20/01/2009 www.agni.art.br Eduardo Santos

XH TML: Recomendações
Um menu nada mais é
● L ink 1
do que uma lista de opções... ink 2
● L
● L ink 3
Então, use as marcações de ● L ink 4
Lista não-ordenada ● L ink 5
<ul>
<li><a href=”pagina1.html” title=”Página 1”>Link 1</a></li>
<li><a href=”pagina1.html” title=”Página 1”>Link 1</a></li>
<li><a href=”pagina1.html” title=”Página 1”>Link 1</a></li>
<li><a href=”pagina1.html” title=”Página 1”>Link 1</a></li>
<li><a href=”pagina1.html” title=”Página 1”>Link 1</a></li>
</ul>
20/01/2009 www.agni.art.br Eduardo Santos

CSS: Cascading Style S
heets
Cascad ing Style Sheets (ou simplesmente CSS) é
uma lin guagem de estilo utilizada para definir a
a
apresentação de documentos escritos em um
linguagem de marcação, como HTML ou XML.
Seu principal benefício é prover a separação entre
o formato e o conteúdo de um documento.
Pode-s e definir apresentações especificas para
,
diferentes dispositivos (Tvs, Celulares e PDAs
Impressoras, etc) apenas criando
folhas de estilo alternativas.
20/01/2009 www.agni.art.br Eduardo Santos

CSS: Cascading Style S
heets
Pode mos inserir código CSS diretamente dentro de
uma marcação (inline) ou entre as marcações
<head></head> (Interno).
Porém, a forma mais correta é criar um link
(ligação) para uma página que contém os estilos,
procedendo de forma idêntica para todas as
páginas do site.
s\" />
<link href=\"estilo.css\" rel=\"stylesheet\" type=\"text/cs
20/01/2009 www.agni.art.br Eduardo Santos

Exemplo da Sintaxe C
SS
seletor { propriedade: valor; }
seletor: Marcação HTML ou identificador
propriedade: O que será alterado
valor: O valor de alteração
body {
font-family: Arial, Verdana, sans-serif;
background-color: #FFF;
margin: 5px 10px;
}
20/01/2009 www.agni.art.br Eduardo Santos

Caso: CSS Zen Garden www.cssze ngarden.com
r
O Zen Garden tem como alvo entusiasmar, inspira
e encorajar a sep aração do Conteúdo (HTML) da
Apresentação (CSS)
r
Mostrar as eno rmes possibilidades de se obte
belos Layouts através do CSS
Como exem plo, podemos Acessar os links e
o
visualizar diversos Layouts diferentes. O códig
HTML permane ce o mesmo, a única coisa que
muda é o arquivo CSS externo.
20/01/2009 www.agni.art.br Eduardo Santos

20/01/2009 www.agni.art.br Eduardo Santos

20/01/2009 www.agni.art.br Eduardo Santos

20/01/2009 www.agni.art.br Eduardo Santos

Web Content Accessib
ility Guidelines
doras
Acessibilidade à Web significa que pessoas porta
de necessidades especiais (incluindo as visuais,
s),
au ditivas, físicas, de fala, cognitivas e neurológica
pesoas idosas, usuários de diferentes Sistemas
,
Oper acionais, browsers antigos ou conexões lentas
sejam capazes de usar a Web.
Co mo guia de desenvolvimento acessível, a W3C
fornece as Diretivas para a acessibilidade de
conteúdo da Web
20/01/2009 www.agni.art.br Eduardo Santos

Algumas Recomendações de Acessibilidade
Fornecer conteúdo textual para imagens
<img src =”imagem.png” alt=”descrição da imagem” />
Fornecer equivalente textual para scripts
<noscript>Equivalente textual</noscript>
navegação
Links com título, tecla de atalho e ordem de
o”
<a href=”pagina.html” title=”titulo informativ
a>
accesskey=”m” tabindex=”1”>Página de destino</
lo
Associar cada controle do formulário ao rótu
<label for=\"nome\">Nome:</label>
\"nome\" />
<in put type=\"text\" value=\"Entre com o nome\" id=
20/01/2009 www.agni.art.br Eduardo Santos

Exemplos de Tecnolog
ia Assistiva
●
Dispositivos apontadores alternativos
● Teclados alternativos
● Ponteiras de cabeça
●
Sistema para entrada de voz
● Ampliadores de telas
● Leitores de tela com síntese de voz
●
Linhas braile
● Impressoras braile
Ponteira de cabeça Impressora Braile Sistema Operacional DOSVOX
20/01/2009 www.agni.art.br Eduardo Santos

4
Decreto n° 5.296 de 2 de dezembro de 200
de
Art. 47 . No prazo de até doze meses a contar da data
sibilidade nos
pu blicação deste Decreto, será obrigatória a aces
blica na rede
portais e sítios eletrônicos da administração pú
ssoas
mundial de computadores (internet), para o uso das pe
s o pleno acesso
po rtadoras de deficiência visual, garantindo-lhe
às informações disponíveis.
ções: qualquer
Art. 8 – II – d. Barreiras nas comunicações e informa
são ou
entrave ou ob stáculo que dificulte ou impossibilite a expres
sitivos,
o recebim ento de mensagens por intermédio dos dispo
massa, bem
meios ou sistemas de comunicação, sejam ou não de
o acesso à
como aqueles que dificultem ou impossibilitem
informação.
20/01/2009 www.agni.art.br Eduardo Santos

Caso
duzidos
Um dos primeiros sites acessíveis pro
por uma empresa comercial
a
Todo o Redes ign foi baseado nas Diretivas par
da W3C
a acessibilidade de conteúdo da Web,
Com isso, as taxas de conversão aumentaram 300%,
ral
custos de manut enção caíram 66%, listagem natu
nas buscas aumentou 5 0%, e o tempo de carregamento
da página caiu 75%
20/01/2009 www.agni.art.br Eduardo Santos

20/01/2009 www.agni.art.br Eduardo Santos

DTD: Document Type D
efinition
Um padrão que define as partes de um
documento, e descrevem como eles
po dem ou não ser usados, o que pode
ser colocado em seus interiores, e se
são ou não elementos obrigatórios do
documento
As diversas declarações de
co mponentes determinam como o
documento será estruturado.
20/01/2009 www.agni.art.br Eduardo Santos

XHTML 1.0 - Exemplo de DOCTYPE:
Strict
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
Transitional
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
Frameset (fuja disso!)
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Frameset//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd\">
20/01/2009 www.agni.art.br Eduardo Santos

Validadores
Validador de HTML, XHTML, XML e
outras linguagens de marcação
http://validator.w3.org
Validador de Folhas de Estilo CSS
http://jigsaw.w3.org/css-validator/
Validador de Acessibilidade
http://www.dasilva.org.br/
Outros validadores e ferramentas
http://www.w3.org/QA/Tools/
20/01/2009 www.agni.art.br Eduardo Santos

Tableless Vs Web Stand
ards
Tableles s é um termo que ficou muito popular no
e.
Br asil, e que acaba por confundir muita gent
e
Tableless significa (resumidamente) um sit
las para
desenvolvido sem o antiquado uso das tabe
organizar o layout, e sim usando CSS.
teja
Criar um site Tableless não significa que es
de um
segu indo os Padrões Web, que vão muito além
como a
código válido, e tem preocupações maiores
Semântica e a Acessibilidade
20/01/2009 www.agni.art.br Eduardo Santos

Então, daqui por diante...
Estude, estude e estude...
e depois disso, estude mais um
pouco
Utilize os padrões XHTML e CSS
Separe as camadas de Conteúd
o,
Apresentação e Comportamen
to
Valide seu código
Se preocupe com a Semântica
e a Acessibilidade
Participe de comunidades e list
as:
Discuta, aprenda e ensine
20/01/2009 www.agni.art.br Eduardo Santos

Referências...
www.w3.org - site oficial da W3C – Inglês
www.w3c.br - site do escritório no Brasil
www.webstandards.org - Inglês
www.webstandardsgroup.org - Inglês
www.maujor.com
www.revolucao.etc.br
www.brunotorres.net
www.tableless.com.br
20/01/2009 www.agni.art.br Eduardo Santos

+ Referências...
www.bengalalegal.com
www.serpro.gov.br/acessibilidade/
www.acessibilidadelegal.com
www.acessobrasil.org.br/
pt.wikipedia.org/wiki/XHTML
pt.wikipedia.org/wiki/Cascading_Style_Sheets
www.plasmadesign.com.br/stupidtables/index.html
br.groups.yahoo.com/group/webstandards-br - Lista
20/01/2009 www.agni.art.br Eduardo Santos

Muuuuito obrigado!
Eduardo Santos
eduardo@agni.art.br
www.twitter.com.br/edu_agni
Cel: 11 7309-7303
20/01/2009 www.agni.art.br Eduardo Santos