Você está na página 1de 16

Documentação de Referência

Especificação de Interface

Montagem de páginas da web seguindo os


Padrões Web
Versão 0.4

AgênciaClick Página 1 de 16
Interface

1 Histórico do Documento
1.1 Versões
Data Versão Descrição Autor
14/04/2005 0.1 Elaboração do Marco Gomes
Documento (marco.gomes@agenciaclick.com.br)
16/05/2005 0.4 Atualização do Marco Gomes
Documento (marco.gomes@agenciaclick.com.br)

1.2 Aprovadores
Nome Empresa Cargo

AgênciaClick Página 2 de 16
Interface

2 Índice
1 Histórico do Documento ..................................................................................2
1.1 Versões .................................................................................................2
1.2 Aprovadores ..........................................................................................2
2 Índice ............................................................................................................3
3 Introdução .....................................................................................................4
4 Montagem......................................................................................................5
4.1 A montagem tradicional..........................................................................5
4.2 A montagem seguindo os padrões web ...................................................6
4.2.1 Vantagens do XHTML sobre o HTML ....................................................7
4.3 Diferenças na apresentação visual...........................................................8
5 Substituição e alteração de conteúdo ............................................................. 11
6 Uso eficiente do cache dos navegadores ........................................................ 12
7 Acessibilidade ............................................................................................... 13
7.1 Portadores de necessidades especiais.................................................... 13
7.1.1 Deficiência visual .............................................................................. 13
7.1.2 Deficiência motora............................................................................ 13
7.2 Dispositivos alternativos ....................................................................... 13
8 Compatibilidade............................................................................................ 14
9 Exemplos de sites que seguem os padrões web.............................................. 15
9.1 Português ............................................................................................ 15
9.2 Inglês.................................................................................................. 15
10 Links e Referências .................................................................................... 16
10.1 Português ............................................................................................ 16
10.2 Inglês.................................................................................................. 16

AgênciaClick Página 3 de 16
Interface

3 Introdução
Este documento destina-se a explicar as características, vantagens das páginas
montadas seguindo os padrões web, diferenças de montagem usando esta nova
técnica e de páginas HTML tradicionais.

Pretende também dar embasamento técnico para a manutenção e alteração das


páginas que seguem os padrões.

AgênciaClick Página 4 de 16
Interface

4 Montagem
4.1 A montagem tradicional
A técnica tradicional usa tabelas para dividir blocos de conteúdo de uma página.

Toda a configuração visual é colocada na própria página e repetida em todas as


outras páginas que forem semelhantes a essa.

Uma página com três colunas e um rodapé, por exemplo, poderia ser montada da
seguinte maneira:

<table width="500" height="200" border="1">


<tr>
<td>Menu de navegação</td>
<td>Conteúdo principal</td>
<td>Conteúdo secundário</td>
<tr>
<tr>
<td colspan="3">Conteúdo do rodapé</td>
</tr>
</table>

Em um navegador comum este código seria apresentado ao usuário como na figura


abaixo:

Figura 01 – Apresentação e conteúdo não são separados em uma página com layout baseado em
tabelas

É bastante comum também a utilização de tabelas aninhadas, ou seja, colocam-se


várias tabelas umas dentro das outras, normalmente, usa-se este recurso para
facilitar a montagem de caixas com cantos arredondados e cabas com múltiplas
bordas.

AgênciaClick Página 5 de 16
Interface

4.2 A montagem seguindo os padrões web


Na técnica tableless, usa-se divisões para dividir blocos de conteúdo. Tabelas são
usadas apenas para apresentação de dados tabulares, como uma tabela de serviços
e seus respectivos custos e prazos de execução, por exemplo.

No arquivo HTML coloca-se apenas o conteúdo e informação estrutural da página,


toda a informação sobre apresentação visual deve ficar em um arquivo CSS externo
que é reaproveitado em todas as outras páginas semelhantes a essa. Como
apresentação visual, entende-se: cores, imagens de fundo, bordas, formatação de
texto, posicionamento dos blocos de conteúdo e qualquer outra configuração
meramente visual.

Uma página com três colunas e um rodapé, por exemplo, poderia ser montada da
seguinte maneira:

<div id="menu">Menu de navegação</div>


<div id="principal">Conteúdo principal</div>
<div id="secundario">Conteúdo secundário</div>
<div id="rodape">Conteúdo do rodapé</div>

Como podemos notar comparando os dois exemplos demonstrados até agora, o


código que segue os Padrões Web é muito mais fácil de ser lido, mantido e
atualizado.

Em um navegador comum este código seria apresentado ao usuário como na figura


abaixo:

Figura 02 – Informação estruturada de uma página que segue os Padrões

Toda a configuração sobre apresentação visual da página fica em uma folha de


estilos externa (arquivo CSS). A manipulação de cada um dos blocos é possível
graças ao atributo id de cada div, que é um identificador único.

AgênciaClick Página 6 de 16
Interface

Com o documento estruturado como demonstrado acima podemos posicionar seus


blocos de conteúdo como for necessário. Abaixo temos um código CSS que posiciona
os elementos de maneira semelhante à apresentação visual do layout baseado em
tabelas (figura 1).

div { float:left; border:1px solid #CCC; }


#menu, #principal, #secundario { height:100px; }
#menu { width:98px; }
#principal { width:300px; }
#secundario { width:98px; }
#rodape { clear:left; width:500px; }

Aplicando o código CSS acima na página demonstrada na figura 2, teremos a


seguinte apresentação visual:

Figura 03 – Layout seguindo os Padrões Web, apresentação separada do conteúdo.

Como demonstrado, as configurações de apresentação visual da página estão


definidas em uma folha de estilos (arquivo CSS), este é carregado uma única vez
pelo cliente ficando armazenado no cache no navegador. Caso o visitante retorne à
página ou visite páginas que usam o mesmo arquivo CSS, as informações de
apresentação não serão baixadas novamente, economizando o tempo do usuário e
banda do provedor de internet.

4.2.1 Vantagens do XHTML sobre o HTML


A página Padrão, tem o XHTML ao invés do HTML para estruturar seu conteúdo, o
XHTML (Extensible HyperText Markup Language) foi criado dentro do conceito XML,
linguagem de marcação aonde você cria suas próprias tags e atributos para escrever
seu documento web. As tags e atributos do XHTML foram criadas aproveitando-se as
tags e atributos do HTML 4.01 e suas regras. Ela foi escrita para substituir o HTML e
nada mais é do que um HTML "mais claro e limpo".

Vantagens do XHTML

AgênciaClick Página 7 de 16
Interface

• Compatibilidade da linguagem XHTML com as futuras aplicações de usuários.


• Seu código é consistente.
• Tempo de carga de uma página XHTML é mais rápido.
• Maior acessibilidade aos navegadores e aplicações de usuário padrão
incrementando a interopebilidade e a portabilidade dos documentos web.
• Totalmente compatível com todas as aplicações de usuários para HTML
(navegadores), antigas e/ou ultrapassadas.

À medida que mais e mais ferramentas XML são disponibilizadas, tais como o XSLT
para transformação de documentos, será possível perceber mais claramente as
vantagens do XHTML. XForms, por exemplo, permitirá a edição de documentos
XHTML (ou mesmo de qualquer tipo de documento XML) permitindo seu total
controle de maneira bem simples. Aplicações de Semantic Web poderão integrar-se
perfeitamente a documentos XHTML. Se o documento vai além do XHTML 1.0,
incluindo, por exemplo, MathML, SMIL, ou SVG, então sim as vantagens crescerão:
estas vantagens não existem no HTML.

4.3 Diferenças na apresentação visual


Uma página Padrão pode ser montada para que fique visualmente idêntica a uma
página de montagem tradicional. Exemplos:

IBM – Seguindo os Padrões Web

AgênciaClick Página 8 de 16
Interface

IBM – Original

Samsung – Seguindo os Padrões Web

AgênciaClick Página 9 de 16
Interface

Samsung – Original

Mais exemplos na seção "Links e Referências", no final deste documento.

AgênciaClick Página 10 de 16
Interface

5 Substituição e alteração de conteúdo


A substituição de conteúdo em uma página que segue os Padrões é feita de maneira
bastante semelhante a uma página montada da maneira tradicional.

Em um layout baseado em tabelas altera-se o conteúdo que está dentro das tags
<td></td>, em uma página Padrão altera-se o conteúdo que está dentro das tags
<div></div>.

Como foi demonstrado no exemplo da figura 02, a página montada seguindo os


Padrões é muito mais fácil de manter, consome menos banda do servidor e tem seu
código mais legível, portanto, é mais fácil de alterar seu conteúdo.

AgênciaClick Página 11 de 16
Interface

6 Uso eficiente do cache dos navegadores


A cada página que o usuário solicita, é baixado o HTML e todos os arquivos que o
mesmo estiver utilizando como imagens GIF, JPEG e PNG, sons, animações
multimídia e folhas de estilo (arquivos CSS).

Caso estes arquivos já tenham sido baixados, o computador do usuário solicita


apenas o HTML, todos os outros arquivos que já estejam gravados localmente são
reutilizados, reduzindo o tempo de espera do visitante até que este veja a página
completamente carregada, a este recurso, dá-se o nome de cache.

Como em uma página que não segue os Padrões toda a informação de apresentação
é colocada na própria página, toda esta informação precisa ser baixada pelo usuário
a cada troca de página, isso faz com que o tempo de espera aumente muito mais
que o necessário.

Em uma página que segue os Padrões toda a informação sobre apresentação visual
da página está em um arquivo CSS externo, este é carregado uma única vez,
reduzindo drasticamente o tempo de espera entre troca de páginas.

Com o uso eficiente do cache dos navegadores, a experiência do usuário em navegar


pelo website fica muito mais agradável, aumentando as repostas positivas e
reduzindo custos com transferência de arquivos do servidor para o cliente.

AgênciaClick Página 12 de 16
Interface

7 Acessibilidade
A acessibilidade de uma página que segue os Padrões Web normalmente é muito
maior que a mesma página com layout em tabelas.

7.1 Portadores de necessidades especiais


7.1.1 Deficiência visual
Na página que segue os Padrões a informação é estruturada segundo seu nível de
relevância e importância e o conteúdo recebe uma marcação semântica, facilitando a
interpretação por dispositivos sintetizadores de voz, navegadores de texto, Braille
entre outros.

As tabelas de dados devem ter um título e um resumo acerca dos seus dados, estes
campos não precisam ser mostrados ao usuário comum, mas tratam-se informações
bastante úteis a quem não enxerga.

Os campos dos formulários devem ter uma 'etiqueta' que descreve qual informação
deve ser inserida naquele campo.

Todas as imagens devem ter um texto alternativo que descreva o conteúdo daquela
imagem em poucas palavras, ou ainda o atributo 'longdesc' que pode ter um texto
longo acerca da imagem.

As abreviações e acrônimos devem ter seu significado explicado dentro do código


(informação que o usuário comum não vê), essa informação é usada pelos meios
não visuais e por robôs de indexação de conteúdo (ferramentas de busca).

Caso a deficiência não seja grave o usuário pode desabilitar a folha de estilo e
aumentar o tamanho do texto, conseguindo assim ler o conteúdo da página com
maior conforto.

7.1.2 Deficiência motora


Os formulários e botões recebem teclas de atalho que facilitam a acessibilidade de
quem tem deficiências motoras e não consegue utilizar o mouse, por exemplo.

7.2 Dispositivos alternativos


Uma página Padrão pode ser visualizada em um número muito maior de dispositivos,
diferente da página tradicional que só pode ser visualizada com eficiência em
computadores de mesa, e em muitos casos, por apenas um navegador.

Isso é possível porque em uma página que segue os Padrões a informação é


apresentada de maneira estruturada. Mesmo em telas de baixa resolução como as
de celulares, PDA's e aparelhos de televisão, é possível ver o conteúdo de maneira
inteligível sem necessidade de rolagem horizontal e com o texto em qualquer
tamanho que o usuário ache necessário.

AgênciaClick Página 13 de 16
Interface

8 Compatibilidade
Alguns recursos do CSS não são suportados por alguns navegadores, esta
incompatibilidade pode gerar algumas falhas na apresentação visual da página.
Porém, estes recursos podem ser substituídos e manipulados para que a página
possa ser corretamente visualizada pelo usuário.

Abaixo uma tabela com os principais navegadores da atualidade, sistemas em que


podem operar e seu suporte a CSS.

Navegador / versão Sistema(s) em que pode operar Suporta CSS


Microsoft Internet Explorer 5.01 Windows e Mac. Ótimo*
Microsoft Internet Explorer 5.5 Windows e Mac. Ótimo*
Microsoft Internet Explorer 6.0 Windows e Mac. Ótimo*
Mozilla 1.7 Windows, Mac e plataforma Unix, como Excelente
GNU/Linux e BSD.
Mozilla Firefox 1.0 Windows, Mac e plataforma Unix, como Excelente
GNU/Linux e BSD.
Safari Mac. Excelente
Konqueror Plataforma Unix, como GNU/Linux e BSD. Ótimo
Epiphany Plataforma Unix, como GNU/Linux e BSD. Excelente
Opera 7 Windows, Mac, Solaris, OS/2, QNX e Excelente
plataforma Unix, como GNU/Linux e BSD.
Opera 8 Windows, Mac, Solaris, OS/2, QNX e Excelente
plataforma Unix, como GNU/Linux e BSD.
Opera Mobile Telefone celular e PDA que use sistema Nokia, Bom **
Samsung, Sony Ericsson, Windows Mobile,
Siemens, Panasonic, Sendo e Psion.
Palm Web Pro 3.0 Equipamento Tungsten™ T, T2, T3, C e E ou Bom**
Zire™ 71 da PalmOne.
Palm Web Pro 3.5 Equipamento Zire™ 72 da palmOne. Bom**
Pocket Internet Explorer Pocket PC. Bom**
* Algumas funcionalidades não são suportadas, porém, estas podem ser substituídas para que
a página seja corretamente apresentada ao usuário.
** O sistema altera o design da página para que o conteúdo caiba horizontalmente na tela,
praticamente eliminando a necessidade de rolagem horizontal.

Caso o usuário perceba algum problema na apresentação visual de uma página que
segue os Padrões Web, ele pode desabilitar a folha de estilos, navegando apenas
pelo conteúdo.

Um bom exemplo de site que segue os Padrões Web e aconselha aos os usuários
que desabilitem suas folhas de estilo, caso necessário, é o da Justiça Federal
(http://www.justicafederal.gov.br/), parte do seu texto de "Política de Acessibilidade"
diz o seguinte:
"No sítio da JUSTIÇA FEDERAL foram implementadas folhas de estilo para
garantir o reconhecimento das estruturas de conteúdo. As versões do
Internet Explorer (5.0 ou inferior) não suportam totalmente esta
funcionalidade, o que fará com que alguns elementos, como links, sejam
eventualmente apresentados de forma incorreta. Caso isso ocorra, desabilite
as folhas de estilo do seu navegador."

AgênciaClick Página 14 de 16
Interface

9 Exemplos de sites que seguem os padrões web


9.1 Português
Terra
Conhecido portal de notícias e serviços para a web. Faz um ótimo uso de listas
desordenadas (<ul>) e títulos semanticamente ordenados.

9.2 Inglês
ESPN
Consagrado canal americano de esportes. Não faz um bom uso de listas
desordenadas e listas de definição, provavelmente trata-se de uma conseqüência do
pioneirismo do website em adotar aos Padrões Web.

Wired News
Site de notícias da revista de tecnologia e informática mais consagrada do mundo.
Faz ótimo uso de listas desordenadas, listas de definição, blocos de citações e
marcações de títulos.

MSN
Portal da Microsoft Network com notícias, ferramenta de busca, relacionamentos
entre outros. Faz ótimo uso de listas desordenadas, títulos marcados
semanticamente e tabelas apenas para dados.

AgênciaClick Página 15 de 16
Interface

10 Links e Referências
10.1 Português
Tableless.com.br
O principal objetivo é divulgar os web standards aos desenvolvedores web, para que
eles possam primeiramente mudar seu jeito de construir sites, e depois, mudar a
internet.
Estão disponíveis alguns sites "convertidos" do método convencional para o método
tableless. Você poderá compará-los visitando a seção "convertidos".

Porque utilizar tabelas para layout é estupidez


Problemas definidos, soluções oferecidas. A tradução para português de um
excelente documento de defesa dos Padrões Web.

FAQ - Perguntas frequentes sobre HTML e XHTML


Uma ótima referência para esclarecer perguntas sobre as características e diferenças
entre as linguagens.

10.2 Inglês
CSS Zen Garden
Uma demonstração do que pode ser feito com uma página com design baseado em
CSS apenas se mudando a folha de estilo. Escolha um dos itens no menu para ver o
design do site ser completamente modificado através da mudança do CSS.

Cascading Style Sheets - home page


Página oficial da linguagem CSS, informações sobre suas versões, especificações e
guias de referência.

AgênciaClick Página 16 de 16