Monografia Acessibilidade na Web - Valério Farias

UNIVERSIDADE DO ESTADO DO RIO GRANDE DO NORTE
FACULDADE DE CIÊNCIAS EXATAS E NATURAIS
DEPARTAMENTO DE INFORMÁTICA
CURSO DE ESPECIALIZAÇÃO EM INFORMÁTICA APLICADA

ACESSIBILIDADE NA WEB: UM ESTUDO DE CASO NO PORTAL UERN

VALÉRIO FARIAS DE CARVALHO

MOSSORÓ – RN
2008



Monografia apresentada ao Departamento de
Informática da Faculdade de Ciências Exatas e
Naturais da Universidade do Estado do Rio
Grande do Norte, como parte dos requisitos
para conclusão do Curso de Especialização em
Informática Aplicada.
Orientador: Prof. Dr. Idalmir de Souza
Queiroz Júnior.

MOSSORÓ-RN
2008

Catalogação da Publicação na Fonte

Carvalho, Valério Farias de.
Acessibilidade na Web: um estudo de caso no portal UERN. /
Valério Farias de Carvalho. - Mossoró, RN, 2008.

39 f.

Orientador: Prof. Dr. Idalmir de Souza Queiroz Junior.

Monografia (Especialização em Informática Aplicada). Universidade
do Estado do Rio Grande do Norte. Faculdade de Ciências Exatas e
Naturais.

1. Web - Acessibilidade - Monografia. 2. Padrões Web - Monografia.
3. Arquitetura da informação - Monografia. I. Queiroz Junior, Idalmir de
Souza. II. Universidade do Estado do Rio Grande do Norte. III. Título.

UERN/ BC CDD 004.6

Bibliotecária: Jocelania Marinho Maia de Oliveira CRB 4 / 1303



Monografia apresentada ao Departamento de
Informática da Faculdade de Ciências Exatas
da Universidade do Estado do Rio Grande do
Norte, como parte dos requisitos para
conclusão do Curso de Especialização em
Informática Aplicada.
Orientador: Prof. Dr. Idalmir de Souza
Queiroz Júnior.

BANCA EXAMINADORA

__________________________________________________________________________
Prof. Dr. Idalmir de Souza Queiroz Júnior

__________________________________________________________________________
Prof. Dr. Everton Notreve Rebouças Queiroz Fernandes

__________________________________________________________________________
Prof. M. Sc. Jéssica Neiva de Figueiredo Leite

Data de Aprovação: __/__/__

Dedico este trabalho à minha mãe, Ana e às minhas irmãs, Patrícia e Isabelli.

AGRADECIMENTOS

Agradeço a Deus por colocar no meu caminho pessoas que tomei como referência para
chegar onde estou.
Agradeço agora a cada uma dessas pessoas pelos seus valores morais e íntegros:

Carlinhos, que escolhi para ser meu padrinho, pois eu me identificava com suas
qualidades: acessível, simples, competente e comprometido.
Ascenção Barbosa, minha madrinha, uma pessoa rara, que faz coisas para o próximo sem
querer nada em troca.
Idalmir de Souza, além de ser meu orientador e ótimo professor, foi devido às aulas dele
de programação no CEFET em 1998 que decidi continuar a me dedicar à área de informática.
Haroldo Paulino, pela sua iniciativa, facilidade de tomar decisões, ousadia e persistência.
Ernani Junior, pela sua capacidade extraordinária de gerenciar coisas em paralelo além
de ser muito persistente.
Carlos Moisés, por sua dedicação e bom senso em momentos de pressão que poucos
conseguem e também pelo seu esforço por manter a organização.
Veras Junior, além de ser uma pessoa competente, aprendi com ele a importância de dar
atenção ao lazer.
Ricardo Júlio, dedicado, eclético e com ele aprendi as primeiras noções de programação
para web.
Leonard de Sousa, que me ajudou bastante, concedendo a entrevista e participando do
teste de usabilidade. O pouco tempo que passei com ele, já deu para notar sua garra e vontade de
vencer.

Agradeço também a todos aqueles que tiveram paciência nos momentos que eu precisei
estar ausente por está me dedicando a este trabalho.

RESUMO

Neste trabalho mostraremos a evolução do Portal UERN entre 2004 e 2007, além das
técnicas e tecnologias utilizadas para prover acessibilidade e aprimoramento à interface, baseado
em princípios de usabilidade e na utilização adequada dos Padrões Web com objetivo de torná-la
enxuta, útil e confortável. Partimos de uma estrutura inicial simples e flexível, que permitiu
modificações rápidas. À medida que detectamos as verdadeiras necessidades dos principais
usuários, aperfeiçoamos a página para permitir o acesso à informação com o mínimo de
dificuldades possível. As impressões dos usuários foram obtidas por meio de um formulário de
contato, que apesar de simples, foi muito efetivo para apontar mudanças na interface que fossem
realmente úteis para as pessoas que a utilizavam. O trabalho é finalizado com um teste de
usabilidade.

PALAVRAS-CHAVE: Acessibilidade, Usabilidade, Padrões Web, Arquitetura da informação.

ABSTRACT

This work talk about the Portal UERN evolution ( 2004 – 2007 ), beyond the techniques
and technologies used to provide accessibility and utilized to upgrading the interface, based in
principles of usability and in the appropriate application of Web Standards, with objective of
become the page clean, helpful and comfortable. We started with a inicial, simple and flexible
structure. This factor was very important because we could change the page faster. At the
moment that we detect the truth user’s necessities, we improve the page to allow the access to
information with least possible dificulty. The users’s feedback was by contact form, despite
simple way, was effetive to appoint helpful changes in the interface. We concluded with a
usability test.

KEYWORDS: Accessibility, Usability, Web Standards, Information Arquitecture

SUMÁRIO

1. INTRODUÇÃO ....................................................................................................................... 13
1.2 OBJETIVOS ........................................................................................................................ 14
1.2.1 Geral ............................................................................................................................. 14
1.2.2 Específicos .................................................................................................................... 15
1.3 METODOLOGIA ................................................................................................................ 15
1.3.1 Tipo de Pesquisa ........................................................................................................... 15
1.3.2 Universo/Amostra......................................................................................................... 15
1.3.3 Coleta de Dados ............................................................................................................ 16
1.3.4 Analise de Dados .......................................................................................................... 16
1.4 ORGANIZAÇÃO ................................................................................................................ 17
2. REFERENCIAL TEÓRICO .................................................................................................. 18
2.1 REALIDADE DAS PÁGINAS WEB ................................................................................. 18
2.2 ÁREAS DO CONHECIMENTO E TECNOLOGIAS ENVOLVIDAS ............................. 19
2.2.1 Tecnologias utilizadas .................................................................................................. 19
2.2.2 Áreas do conhecimento para embasamento.................................................................. 20
2.2.3 Metodologia “Acessibilidade de Verdade” .................................................................. 23
2.2.4 Detalhamento da Metodologia “Acessibilidade de Verdade” ...................................... 23
2.3 ORGANIZAÇÃO DO CONTEÚDO .................................................................................. 27
2.3.1 Sistema de Organização................................................................................................ 29
2.3.2 Sistema de Navegação .................................................................................................. 31
2.3.3 Sistema de rotulação ..................................................................................................... 36
2.3.4 Sistema de Busca .......................................................................................................... 38
2.4 UTILIZAÇÃO DOS PADRÕES WEB ............................................................................... 39
2.4.1 A importância da padronização .................................................................................... 39
2.4.2 Padrões Web: Definição e Vantagens .......................................................................... 41
2.4.3 Marcação Válida e Marcação Semântica: evitando distorções .................................... 44
2.4.4 Principais tags do XHTML .......................................................................................... 48
2.4.5 Exemplo de utilização de marcação semântica ............................................................ 49
2.4.6 Entendendo o box model............................................................................................... 50
2.4.7 Centralizando elementos na tela com CSS ................................................................... 52
2.4.8 Quirks Mode, Strict Mode, hacks e Comentários Condicionais ................................... 54
2.4.9 Exemplo de Página com Layout 3 colunas ................................................................... 57
2.4.9.1 Criação do código XHTML da página .................................................................. 57
2.4.9.2 Usando a propriedade float para criação do layout ............................................. 59
2.4.9.3 Usando a técnica de Image Replacement .............................................................. 61
2.4.9.4 Tratamento de listas .............................................................................................. 63
2.4.9.5 Código CSS completo ............................................................................................ 64
2.4.9.6 Resultado final: interface do Blog Now ................................................................ 65
2.5 DIRETIVAS DE ACESSIBILIDADE ................................................................................ 67
2.5.1 Fornecer alternativas ao conteúdo sonoro e visual ....................................................... 68
2.5.2 Não recorrer apenas à cor ............................................................................................. 72
2.5.3 Utilizar corretamente marcações e folhas de estilo ..................................................... 72

2.5.4 Indicar claramente qual o idioma utilizado .................................................................. 73
2.5.5 Criar tabelas passíveis de transformação harmoniosa .................................................. 74
2.5.6 Assegurar que as páginas dotadas de novas tecnologias sejam transformadas
harmoniosamente ................................................................................................................... 75
2.5.7 Assegurar o controle do usuário sobre as alterações temporais do conteúdo ............... 76
2.5.8 Assegurar a acessibilidade direta de interfaces do usuário integradas ......................... 76
2.5.9 Projetar páginas considerando a independência de dispositivos .................................. 76
2.5.10 Utilizar soluções de transição ..................................................................................... 77
2.5.11 Utilizar tecnologias e recomendações do W3C .......................................................... 79
2.5.12 Fornecer informações de contexto e orientações. ....................................................... 79
2.5.13 Fornecer mecanismos de navegação claros ................................................................ 80
2.5.14 Assegurar a clareza e a simplicidade dos documentos. .............................................. 82
2.6 TÉCNICAS DE USABILIDADE ....................................................................................... 83
2.6.1 Avaliação Heurística..................................................................................................... 83
2.6.2 Padrões de Design (design patterns) ............................................................................ 84
2.6.3 Testes de Usabilidade ................................................................................................... 86
2.7 ACOMPANHANDO AS TENDÊNCIAS .......................................................................... 90
2.7.1 Microformatos .............................................................................................................. 90
2.7.1.1 Microformato hcard .............................................................................................. 90
2.7.1.2 Microformato hcalendar ....................................................................................... 91
2.7.1.3 Microformato Geo ................................................................................................. 92
2.7.1.4 Outros Microformatos .......................................................................................... 92
3. A EVOLUÇÃO DO PORTAL UERN 2004 a 2007 .............................................................. 94
3.1 METODOLOGIA ................................................................................................................ 94
3.2 A ESTRUTURA DO ANTIGO PORTAL E PROPÓSITO INICIAL ................................ 95
3.2 DESENVOLVIMENTO DA 1ª VERSÃO DO PORTAL UERN - 2005 ........................... 98
3.3 DESENVOLVIMENTO DA 2ª VERSÃO DO PORTAL UERN - 2006 ......................... 102
3.4 DESENVOLVIMENTO DA 3ª VERSÃO DO PORTAL UERN – 04/07/2007 .............. 106
3.4.1 Preparado para o futuro com Microformatos ............................................................. 108
3.5 RESULTADOS ................................................................................................................. 110
4. ENTREVISTA E TESTE COM USUÁRIO ....................................................................... 112
4.1 METODOLOGIA .............................................................................................................. 112
4.2 ENTREVISTA .................................................................................................................. 113
4.3 TESTE DE USABILIDADE ............................................................................................. 118
4.4 RESULTADOS ................................................................................................................. 119
5. CONSIDERAÇÕES FINAIS ................................................................................................ 121
5.1 COMO NÃO DEVEMOS INTERPRETAR ESSE TRABALHO .................................... 121
5.2 COMO DEVEMOS INTERPRETAR ESSE TRABALHO.............................................. 124
5.3 CONCLUSÕES ................................................................................................................. 125
5.4 TRABALHOS FUTUROS ................................................................................................ 128
6. REFERÊNCIAS .................................................................................................................... 130
ANEXOS .................................................................................................................................... 132
Heurísticas para avaliação de usabilidade de portais corporativos ...................................... 132

LISTA DE ILUSTRAÇÕES

Figura 1: Elementos presentes nas páginas no mundo dos padrões web ...................................... 19
Figura 2: Àreas do conhecimento que dão suporte ao desenvolvimento web ............................... 20
Figura 3: CSS específico para cada contexto (tela, dispositivo móvel, impressora) ..................... 22
Figura 4: Metodologia Acessibilidade de Verdade ....................................................................... 24
Figura 5: Ambiente de informação planejado e não planejado. Fonte: REIS, 2007b, p. 03 ......... 27
Figura 6: Equilíbrio entre conteúdo, contexto e público alvo. Fonte: REIS, 2007b, p. 04 ........... 28
Figura 8: Exemplos de esquema de organização ambígua ............................................................ 29
Figura 7: Esquemas de organização da informação. Fonte: REIS, 2007b, p. 13 .......................... 29
Figura 9: Esquema de organização exata: ordem alfabética. Fonte: cifraclub.com.br .................. 30
Figura 10: Esquema de organização exata: seqüência. Fonte: clifraclub.com.br .......................... 31
Figura 11: As perguntas de básicas que um site deve responder .................................................. 32
Figura 12: Elementos do sistema de navegação embutido ............................................................ 34
Figura 13: Mapa do site - Elemento de navegação remoto ........................................................... 35
Figura 14: Índice remissivo - Elemento de navegação remoto ..................................................... 36
Figura 15: Wireframe. Fonte: fatorw.com ..................................................................................... 38
Figura 16: Sitegrama. Fonte: Reis, 2007c ..................................................................................... 39
Figura 17: plugs e tomadas variadas e padrão ABNT. (fonte: Inmetro) ....................................... 40
Figura 18: Processo de desenvolvimento de sites comumente utilizado ....................................... 42
Figura 19: Processo que utiliza os padrões web de forma adequada............................................. 43
Figura 20: Página do acesso digital que utiliza marcação semântica ............................................ 50
Figura 21: Blog Now: Renderização do código no navegador ...................................................... 59
Figura 22: Blog Now - renderização do CSS – parte 01 ............................................................... 61
Figura 23: Blog Now - Renderização da imagem no lugar do texto ............................................. 62
Figura 24: Blog Now - renderização de uma lista de links ........................................................... 63
Figura 25: Blog Now - Renderização Final ................................................................................... 66
Figura 26: Exemplo vídeo com legendas. Fonte: charges.com.br ................................................. 71
Figura 27: Padrão de design - busca no site. ................................................................................. 84
Figura 28: Formato padrão para menu horizontal. ........................................................................ 84
Figura 29: Formato padrão para menu vertical. ............................................................................ 85
Figura 30: Formato padrão para menu L invertido....................................................................... 85
Figura 31: Antigo portal UERN - 2004 ......................................................................................... 96
Figura 32: Análise de Acessibilidade do antigo portal UERN ...................................................... 99
Figura 33: 1ª versão do Portal UERN 2006 ................................................................................. 100
Figura 34: Comparando Portal 2004 e o Novo Portal (1ª versão - topo e navegação principal) . 101
Figura 35: Comparando Portal 2004 e o Novo Portal (1ª versão - navegação secundária) ......... 101
Figura 36: Análise de acessibilidade da 1ª versão do Portal UERN ........................................... 102
Figura 37: Análise de Usabilidade da 1ª versão do Portal UERN – parte 1 ................................ 103
Figura 38: Análise de Usabilidade da 1ª versão do portal UERN – parte 2 ................................ 104
Figura 39: Análise de Usabilidade da 1ª versão do portal UERN – parte 3 ................................ 104
Figura 40: 2ª versão do Portal UERN - 2006 .............................................................................. 105
Figura 41: 3ª versão do Portal UERN – Julho de 2007 ............................................................... 107
Figura 42: Análise de Acessibilidade do Portal UERN – Julho de 2007 .................................... 108
Figura 43: Plugin operator localizando as coordenadas geográficas da UERN .......................... 110
Figura 44: Vista do Campus Central - UERN – Mossoró-RN – Google maps .......................... 110

LISTA DE CÓDIGOS-FONTE

Código 1: Renderização inicial das tags de título h1 a h6 no navegador ...................................... 45
Código 2: Renderização das tags de título h1 a h6 modificadas pelo CSS ................................... 46
Código 3: Renderização das tags de título h1 a h6 com posicionamento aleatório....................... 47
Código 4: Detalhamento do box model junto com exemplo de borda diagonal ........................... 52
Código 5: Centralização de elementos com CSS – parte 01 ......................................................... 53
Código 6: Centralização de elementos com CSS – parte 02 ......................................................... 53
Código 7: Centralização de elementos com CSS – final ............................................................... 54
Código 8: Renderização em Quirks e em Strict Mode. ................................................................. 55
Código 9: Resolvendo o problema do box model – parte 01 ........................................................ 56
Código 10: Resolvendo o problema do box model – parte 02 ...................................................... 57
Código 11: Blog now: código XHTML ........................................................................................ 58
Código 12: Blog Now: CSS parte 01 ............................................................................................ 60
Código 13: Blog Now: aplicando Image Replacement ................................................................. 62
Código 14: Blog Now: CSS de tratamento de listas..................................................................... 63
Código 15: Blog Now: CSS completo – Parte 1 .......................................................................... 64
Código 16: CSS completo – Parte 2 .............................................................................................. 65
Código 17: Descrição redundante com imagem transparente. ...................................................... 69
Código 18: Descrição redundante sem imagem transparente. ....................................................... 69
Código 19: Descrição redundante com imagem transparente. ...................................................... 70
Código 20: Identificação do idioma do conteúdo .......................................................................... 73
Código 21: Utilização do atributo title em abreviações e acrônimos. ........................................... 74
Código 22: Utilização correta de labels em formulários. .............................................................. 78
Código 23: Separando links por listas não ordenadas ou colchetes. ............................................. 78
Código 24: Lista separada por optiongroup. ................................................................................. 79
Código 25: Descrição da seção de sucos utilizando a tag de título h3. ......................................... 80
Código 26: Exemplo de RDF ....................................................................................................... 81
Código 27: Exemplo de meta tags. ................................................................................................ 81
Código 28: Microformato hcard. ................................................................................................... 91
Código 29: Microformato hcalendar. ............................................................................................ 91
Código 30: Microformato geo. ...................................................................................................... 92
Código 31: Microformato rel-licence. ........................................................................................... 92
Código 32: Microformato hcard implementado no Portal UERN ............................................... 109
Código 33: Microformato Geo implementado no Portal UERN ................................................. 109

LISTA DE TABELAS

Tabela 1: Tabela que facilita a manipulação de softwares leitores de tela .................................... 74
Tabela 2: Tabela que prejudica a manipulação de softwares leitores de tela ................................ 75
Tabela 3: Comparando Teste de Usabilidade tradicional e simplificado. Fonte: Krug, 2000. ...... 88

13

1. INTRODUÇÃO

O conceito de deficiência relacionado à web refere-se ao usuário portador de um ou
mais problemas: visual, auditivo, motor ou cognitivo, dificultando o uso dos dispositivos de
entrada e saída tradicionais. No Decreto Lei nº 5.296 de 02/12/2004 em seu artigo 8º prevê
acessibilidade nos sistemas de comunicação, contextualizando-se com o ambiente da web. Esse
decreto prevê que em Instituições Públicas seja obrigatório pelo menos o nível básico de
acessibilidade em suas páginas web.
As Recomendações para a acessibilidade do conteúdo da Web versão 1.0, produzida
pelo WAI (Web Accessibility Initiative), organização ligada ao consórcio W3C (World Wide Web
Consortium), responsável pelo desenvolvimento de estratégias, recursos e guias de orientações
para a acessibilidade na Web para auxiliar pessoas com deficiência, baseiam-se em duas
diretivas:

 Assegurar uma transformação harmoniosa e;
 Tornar o conteúdo compreensível e navegável.

Dentro dessas duas diretivas existem vários requisitos a serem cumpridos, entre eles
temos:

 Separação entre conteúdo e formatação visual;
 Utilização da linguagem de hipertexto de forma que fique semanticamente harmônica
com o tipo informação que está querendo divulgar na página, utilizando a tag
apropriada em cada caso.

Esta especificação de acessibilidade nos obriga a facilitar o acesso para deficientes e
também a tornar uma página acessível com diversas outras vantagens, como por exemplo, o
acesso através de dispositivos móveis. Neste trabalho faremos uma pesquisa mostrando como
está o nível de acessibilidade atual da página principal do Portal UERN, que estão disponíveis
para o público externo, além de mostrar algumas falhas encontradas e sugestões de

14

aprimoramento, quando for necessário.
Sabendo que, no desenvolvimento das interfaces com o usuário, as especificações de
acessibilidade não são o bastante para garantir a qualidade, mostraremos também técnicas das
áreas de usabilidade e de arquitetura de informação para ampliar sempre que possível o conforto
do usuário e melhorar sua experiência ao procurar por um recurso na página. Essa metodologia
que engloba áreas distintas de desenvolvimento será denominada para esse trabalho de
“Acessibilidade de Verdade”, que segundo a equipe do acesso digital significa Acessibilidade +
Usabilidade + Padrões Web. Nesse trabalho essa metodologia é ampliada pois passa a fazer parte
dela a Arquitetura da informação e o Acompanhamento de Tendências tornando-a dinâmica. Ela
será explicada no item 2.2.3 e detalhada no item 2.2.4.
Toda essa metodologia não teria utilidade se também não tivéssemos mecanismo para
detectar a satisfação do usuário. Escolhemos uma forma simples que estivesse dentro da nossa
realidade e tempo disponível para execução. Decidimos adotar um formulário de contato onde os
usuários podem colocar suas sugestões, críticas, elogios, dúvidas e o que desejar. Essas
mensagens servirão de termômetro para orientar nas tomadas de decisões no caso de futuras
mudanças.

1.2 OBJETIVOS

1.2.1 Geral

Mostrar a evolução que sofreu o Portal UERN entre 2004 e 2007, em termos de
acessibilidade, usabilidade e arquitetura da informação, além de mostrar um pouco das
tecnologias utilizadas nesse processo: XHTML semântico para estruturação e CSS para
formatação. Mostrar também que técnicas simples como um formulário de contato já traz
resultado bastante satisfatório para tomada de decisões nas mudanças de interface. Todo esses
objetivos serão agrupados em uma metodologia inovadora chamada Acessibilidade de Verdade
que será explicada no decorrer do texto.

15

1.2.2 Específicos

 Colher informações acerca do tema acessibilidade, arquitetura da Informação, Usabilidade
e das tecnologias criadas pelo W3C que são conhecidas como padrões web;
 Avaliar o nível de acessibilidade do Portal da UERN comparando com informações
retiradas do W3C.
 Analisar as opiniões dos usuários com relação à interface do portal da UERN através de
formulário de contato, para a partir daí efetuar mudanças mais coerentes; Esse é o ponto
mais importante desse trabalho, em que mostraremos a importância de prestar atenção nas
mensagens dos usuários. Uma tarefa simples que pode dar bons resultados.
 Como complemento, mostrar os procedimentos para fazer um teste de usabilidade com
custos reduzidos, aplicando também um teste para tirar impressões a respeito da interface.
Esse teste tem caráter demonstrativo, não será feito para tirar conclusões minuciosas sobre
a interface.

1.3 METODOLOGIA

1.3.1 Tipo de Pesquisa

A pesquisa que se deseja realizar qualifica-se quanto aos fins como descritiva e
qualitativa; quanto aos meios será documental, bibliográfica e explorativa “in loco” como forma
de levantar todas as informações necessárias para a produção das argumentações.

1.3.2 Universo/Amostra

O universo da pesquisa será a página principal do Portal da UERN que é acessível ao
público externo. As mensagens recebidas pelo formulário de contato localizado no Portal UERN
que servirá de auxílio para tomada de decisões. Não menos importante, porém de forma
complementar, os usuários com necessidades especiais, para aplicação de questionários,

16

entrevistas ou testes de usabilidade com a finalidade de ilustrar um pouco esse universo e se
possível detectar problemas na interface.

1.3.3 Coleta de Dados

A coleta de dados deu-se da seguinte forma: primeiramente foi feito uma pesquisa
bibliográfica para dar embasamento teórico a partir alguns autores que tratam deste tema e
também sites especializados em acessibilidade na web, arquitetura da informação, usabilidade e
padrões web. As impressões dos usuários forma obtidas através das mensagens enviadas pelo
formulário de contato do Portal UERN, que serviram como referência para as principais
mudanças de todas as versões do portal UERN entre 2004 e 2007. Por fim, de forma
complementar e com finalidade ilustrativa foram colhidos dados através de entrevista e teste de
usabilidade com um usuário com necessidade especial.

1.3.4 Analise de Dados

A principal análise realizada foi baseada nas mensagens obtidas pelo formulário de
contato em que os usuários compartilharam suas impressões a respeito da interface, a partir
dessas mensagens é que decidimos o que precisava ser modificado com maior urgência para
resolver os problemas. Essa análise não precisou ser detalhada e as mensagens não precisaram ser
relidas constantemente pois utilizamos uma técnica que será mostrada no item Evolução do Portal
UERN.
A partir dessas necessidades dos usuários utilizamos diversas técnicas e tecnologias para
que o problema da interface fosse resolvido de forma efetiva e que proporcionasse maior conforto
na utilização.
Como complemento é mostrado uma entrevista com um usuário que tenha necessidade
especial para que os leitores conheçam um pouco esse universo e suas particularidades. Também
é mostrado a descrição e as considerações sobre o teste de usabilidade aplicado com esse mesmo
participante da entrevista.

17

1.4 ORGANIZAÇÃO

Para um melhor entendimento de onde queremos chegar, iniciaremos mostrando o nível
das páginas web atualmente. Depois seguiremos com os seguintes tópicos: arquitetura da
informação, utilização adequada dos padrões web, acessibilidade, usabilidade e finalmente a
complementação com o acompanhamento de tendências. Mostraremos em seguida a evolução da
interface do Portal UERN nos últimos anos, além de apresentarmos as técnicas utilizadas nesse
processo e as considerações sobre os resultados. Realizaremos finalmente um teste de usabilidade
simplificado focado no perfil de usuário com deficiência visual para termos uma impressão
complementar sobre a interface. Terminando conseqüentemente com as considerações sobre o
trabalho e a detecção da importância de ficar atento as opiniões dos usuários, mesmo que seja de
uma forma indireta, como é o caso do formulário de contato.

18

2. REFERENCIAL TEÓRICO

Nesse momento iremos explanar sobre as técnicas e metodologias que servirão de
embasamento para o sucesso desse trabalho.

2.1 REALIDADE DAS PÁGINAS WEB

Segundo Jefrey Zeldman (2007), 99% das páginas web são obsoletas. O interessante nessa
afirmação é que ele já havia dito isso em 2004, ano da primeira edição do seu livro Design with
Webstandards e, três anos depois, na segunda edição, ele ainda insiste que o problema ainda
permanece. O fato é que apesar da criação das tecnologias dos padrões web e das renovações e
adequações dos navegadores atuais, muitos desenvolvedores ainda persistem com práticas
ultrapassadas, seja por falta de conhecimento, acomodação, entre outros motivos.
Paralelo a isso tem várias iniciativas de mudanças estruturais nos sites, tomadas por
grandes empresas no Brasil: UOL, Terra, Caixa Econômica, Banco do Brasil. A utilização dos
Padrões Web1 já faz parte da realidade brasileira, já está deixando de ser um diferencial e se
tornando cada vez mais algo imprescindível para um produto de qualidade (site) que possa ser
facilmente adaptado para as novas tecnologias, com facilidade de manutenção, facilidade de
indexação pelos sites de busca, economia de banda devido à ausência de tags desnecessárias,
entre outras vantagens.
Nesse trabalho, a utilização consciente dos Padrões Web, principalmente XHTML
(eXtensible HiperText Markup Language) e CSS (Cascading Style Sheets) serão essenciais para
criação de sites com acessibilidade. Quando necessário, complementaremos com técnicas de
usabilidade para ampliar o conforto dos usuários, porém as ferramentas para criar a interface com
conteúdo voltado para determinados tipos de usuários serão essas duas já citadas, cada uma com
sua especificidade e objetivo. A primeira para organizar, tipificar e hierarquizar o conteúdo, a
segunda para formatar o conteúdo e posicioná-lo de forma que facilite a utilização do usuário.

1
Tecnologias desenvolvidas pelo consórcio W3C ( XHTML, CSS, XML, entre outras)

19

2.2 ÁREAS DO CONHECIMENTO E TECNOLOGIAS ENVOLVIDAS

Para termos uma noção da complexidade desse trabalho é muito importante iniciarmos
com uma visão geral que englobe as áreas e tecnologias envolvidas para a concretização do
mesmo.

2.2.1 Tecnologias utilizadas

Começaremos pelas tecnologias disponíveis, que podemos identificar na figura abaixo:

Figura 1: Elementos presentes nas páginas no mundo dos padrões web

Podemos perceber a clara separação das tecnologias de acordo com suas funções, temos,
por exemplo, o XHTML para estruturar o conteúdo, o CSS para formatá-lo e o DOM (Document
Object Model) manipulado através do javascript para permitir certo nível de dinamismo na página
do lado do cliente. Há uma divisão dos papéis; cada qual fazendo sua parte, o todo fica simples e
organizado.

20

2.2.2 Áreas do conhecimento para embasamento

Na figura abaixo podemos identificar as principais áreas do conhecimento envolvidas nas
boas práticas de desenvolvimento web:

Figura 2: Àreas do conhecimento que dão suporte ao desenvolvimento web

Não existe ordem de importância entre as áreas e por diversas vezes são utilizadas as
técnicas de áreas diferentes em conjunto. O triângulo da imagem é somente para dar uma idéia de
sustentação e equilíbrio. As tecnologias web criadas pelo W3C utilizaram muitos princípios
dessas áreas do conhecimento para que seus produtos fossem realmente úteis (ZELDMAN,
2007).
A arquitetura da Informação, segundo Holzschlag (2005), tem o objetivo de organizar,
mesclar e combinar tópicos em grupos lógicos para facilitar a vida do visitante e também de
otimizar o espaço limitado da tela com a maior quantidade de informações relevantes possível.
Comumente essa atividade de criação da taxonomia do site é feita no começo do
desenvolvimento, depois que se tem o inventário de conteúdo do mesmo. Porém, durante o

21

desenvolvimento também se percebe melhorias e é possível efetuar modificações até que se tenha
um produto coerente com o grupo de usuários que se deseja alcançar.
Usabilidade refere-se à tentativa, a partir da utilização da página pelo usuário, de
aprimorá-la para que proporcione o máximo possível de conforto e facilidade de uso. É um passo
a mais a partir da acessibilidade. Podemos ver uma definição mais intuitiva citada por Amstel
(2008):

Usabilidade é sinônimo de facilidade de uso. Se um
produto é fácil de usar, o usuário tem maior
produtividade: aprende mais rápido a usar, memoriza as
operações e comete menos erros.

Andrade (2008) nos diz que as diretrizes de usabilidade se baseiam em como os usuários
se comportam de maneira geral, na maioria dos sites e como se comportam, em casos específicos,
como em um site de comércio eletrônico por exemplo. Fala também que a quantidade enorme de
pesquisas feitas sobre usabilidade resultou nas chamadas heurísticas que são tidas como base para
garantir conforto ao usuário; porém, como não são tão precisas, é indicada como complemento, a
utilização de testes de usabilidade.
Outro item importante são os padrões de design que junto com as heurísticas2 servirão de
apoio nos diversos projetos de desenvolvimento de sites.
Andrade (2008), também sugere que um projeto com usabilidade em um nível ideal passe
pelas seguintes etapas:
1. Os desenvolvedores se colocando no lugar dos usuários para executar o projeto;
2. A realização de uma avaliação heurística3 e
3. Complementação com testes de usabilidade.

Acessibilidade significa ausência de barreiras. O objetivo da acessibilidade na web é
eliminar o máximo possível, os obstáculos que existam entre determinado conteúdo e
determinado grupo de usuários. É essencial que o desenvolvimento web tenha o foco em
acessibilidade pois deixa a página muito flexível para mudanças rápidas e efetivas.
2
Heurísticas são parâmetros para o desenvolvimento criados através do consenso entre a experiência prática de
vários pesquisadores em testes com usuários. Os resultados que se repetem, podem utilizados para avaliação de
novos projetos.
3
Avaliação heurística é a verificação se o projeto segue os princípios testados e aprovados anteriormente.

22

É bom lembrar também que o conceito de acessibilidade é bem mais amplo que somente
fabricar páginas voltadas para usuários com determinados tipos de deficiência (EIS, 2008). A
acessibilidade envolve também a fabricação de produtos (sites) que possuam conteúdos que
possam ser acessados de diferentes navegadores, em diferentes sistemas operacionais e para os
diferentes dispositivos que existem hoje ou que ainda venham a ser criados.
Uma página acessível acaba sendo boa para todos, pois facilita a vida de usuários que
dependem de leitores de tela e também de outros que acessam as notícias do portal via celular ou
computador de bolso. Determinadas empresas utilizavam a estratégias de fazer páginas web
alternativas apropriadas para dispositivos móveis, ou apropriadas para usuários cegos, por
exemplo. Essa estratégia é em certo ponto falha, pois gera duplicação de conteúdo e também
desperta a sensação de que as páginas específicas não têm todo o conteúdo da página principal.
Podemos ver na imagem a seguir que com a utilização dos Padrões Web resolvemos esse
problema. Pois teremos um único conteúdo que será formatado de maneira adequada para os
respectivos dispositivos usando a folha de estilo compatível com cada interface.

Figura 3: CSS específico para cada contexto (tela, dispositivo móvel, impressora)

23

Torres (2008) afirmou que acessibilidade não é altruísmo e sim uma ótima estratégia de
ganhar novos clientes, que as empresas podem adotar, já que seus produtos poderão ser
comprados de diferentes dispositivos, e também por usuários que tenham algum tipo de
deficiência. Uma pessoa cega pode comprar, por exemplo, um livro em uma loja virtual para
presentear um amigo. Trata-se de clientes em potencial para os diversos produtos que podem ser
vendidos pela web caso a página esteja acessível e seja fácil de usar.
Acessibilidade é muito importante no desenvolvimento web, porém somente
acessibilidade não é suficiente para o aprimoramento efetivo das páginas. Para isso incluiremos
nesse trabalho o auxílio de outras técnicas.
A utilização de todas as técnicas e tecnologias com bom senso, e focadas nos usuários é o
que chamaremos nesse trabalho de Metodologia “Acessibilidade de Verdade”. Logo a seguir ela
será explicada e detalhada.

2.2.3 Metodologia “Acessibilidade de Verdade”

A equipe do Acesso Digital (www.acessodigital.net) propõe uma metodologia relevante
utilizando o slogan “Acessibilidade de verdade”, que é a soma de Acessibilidade + web
Standards + Usabilidade. Essa metodologia leva em conta o contexto social e o resultado é uma
visibilidade muito maior para o produto ou serviço. Para facilitar a compreensão desse trabalho
iremos utilizar esse slogan denominando realmente a metodologia.

2.2.4 Detalhamento da Metodologia “Acessibilidade de Verdade”

Detalhando um pouco mais essa metodologia do Acesso Digital para termos uma noção
das etapas do desenvolvimento. O resultado foi a seguinte seqüência:

1. A organização adequada do conteúdo focada no público alvo do site (Arquitetura da
Informação);
2. A utilização adequada das tags para cada tipo de conteúdo que for mostrado e também a
utilização de cada tecnologia para a qual ela realmente se propõe (Padrões Web de
forma correta);

24

3. A utilização e adequação desse conteúdo bem selecionado e bem demarcado às diretrizes
de acessibilidade do WCAG (Web Content Accessibility Guidelines);
4. A complementação com alterações que facilitem o uso como, por exemplo, a utilização de
um link que sirva de atalho direto para o conteúdo principal; (Usabilidade) e;
5. O acompanhamento das evoluções das tecnologias e tendências que estão aparecendo,
além da utilização das mesmas com bom senso. Como exemplo, temos os microformatos
que expandem a representação do HTML (Hiper Text Markup Language).

Vamos agora chamar esses 5 passos anteriores de recursos. Em seguida colocamos todos
esses recursos disponíveis focados nos usuários. Teremos dessa forma o detalhamento da
metodologia Acessibilidade de Verdade que pode ser visto na figura abaixo:

Recursos = ( Arquitetura da Informação +
Padrões Web +
Acessibilidade +
Usabilidade +
Acompanhamento de Tendências )
Acessibilidade de Verdade = Recursos + Foco no Usuário + Bom Senso

Figura 4: Metodologia Acessibilidade de Verdade

Devemos entender o termo recurso como o conjunto que inclui técnicas, áreas do
conhecimento e tecnologias utilizadas no desenvolvimento web. O conjunto citado acima é uma
base inicial, um alicerce para que o desenvolvedor possa seguir por um caminho melhor
estruturado. Para esse trabalho resolvemos delimitar os recursos nesses cinco. Eles devem pela
definição ser direcionados para problemas reais (foco no usuário). A afirmação de que os
recursos citados são apenas uma estrutura inicial é feita baseando-se na natureza dinâmica do
conhecimento. O que é útil hoje poderá não ser mais útil no futuro, então é preciso visualizar essa
metodologia e aos poucos ir aprimorando e modificando, adicionando ou eliminando itens.
Pela seqüência da metodologia, já dá para perceber que somente a utilização dos padrões
web, apesar de servir de base, não garante a acessibilidade do site. Portanto, esse trabalho se
propõe a utilizar as etapas mostradas na lista anterior (recursos) utilizados de para facilitar a vida

25

do usuário. A seqüência acima está disposta de forma didática, na criação do produto (site)
podemos estar focados em um ou mais dos itens quase que simultaneamente.
Outro quesito importante é o item cinco que mostra que se seguirmos até o item quatro o
site estará acessível no contexto atual. Mas como garantir a acessibilidade daqui a cinco anos, se
terá um novo contexto de inovações tecnológicas? A resposta é simples: Somente com
acompanhamento e aprimoramento. Sem isso, o site corre o risco de no futuro se tornar
parcialmente obsoleto ou criar barreiras em determinados contextos.
É preciso entender que somente os recursos não surtiriam o efeito esperado se o
desenvolvimento não for bem direcionado para os usuários. Aqui é quando percebemos a
importância de termos alguma forma de captar as impressões dos usuários para podermos
direcionar o conjunto de técnicas (recursos) para solucionar problemas reais (foco no usuário).
Outro ponto que precisa ser esclarecido, ainda sobre o foco no usuário é que ele será
abordado de forma indireta na seqüência dos capítulos. No item Arquitetura da informação será
mostrado uma figura que representa uma tentativa de equilibrar usuário, contexto e conteúdo. No
item de Usabilidade será mostrado os testes de usabilidade.
Um dos itens mais importantes da metodologia é o “Bom senso”. Ele foi colocado com a
mesma intensidade dos demais, mas é um elemento que tem que ser sempre levado em conta. O
bom senso para esse trabalho significa aplicar somente o esforço suficiente para resolver
determinado problema, nem demais, nem de menos. Para facilitar a compreensão Allen (2001)
mostra uma comparação da “mente como água”. Quando um objeto cai sobre a água, ela
responde apropriadamente de acordo com a força e a massa do objeto e logo em seguida retorna
ao repouso. Algo semelhante ocorre com a mente quando a mente faz somente o que for preciso,
nada a mais nem a menos. Quando o desenvolvedor reage exageradamente ou é impedido de agir
adequadamente indica que ele está sendo controlado por algo. Isso acaba prejudicando a
qualidade do produto. A solução é a procura pelo equilíbrio. Seguindo esse princípio do bom
senso o desenvolvedor tende a chegar a um meio-termo entre técnicas, tecnologias e usuários.
Quando se tratar de um site simples, não é preciso utilizar todos os recursos apresentados, pois
seria desperdício de tempo e energia para algo que não trará diferenças substanciais. Portanto
nesse caso é suficiente que o site seja estruturado com os Padrões Web, sem preocupações
maiores. É através do bom senso também que o desenvolvedor percebe que não deve levar muito
a sério as entrevistas com usuários com relação a sugestões para modificação, porque o usuário

26

tende a ser exagerado em suas declarações, mas também não devemos desprezar totalmente, pois
quando determinada sensação se repetir para outros usuários poderá ser um sinal para analisar
mais detalhadamente. De forma resumida podemos dizer que bom senso nunca é demais, pois é o
item da fórmula responsável pela harmonia do conjunto, pelo balanceamento das tarefas
executadas pelo desenvolvedor. Talvez a grande diferença entre os desenvolvedores mais
experientes e os iniciantes seja a facilidade em lidar com as situações diversas usando o bom
senso, é algo que não vem do dia para a noite, nem cai do céu, mas é algo que tem que ser
buscado, pois realmente faz a diferença. Um complemento a esse elemento bom senso será
mostrado nas considerações finais no item “como não devemos compreender esse trabalho”. Em
seu conteúdo serão ilustrados os paradigmas que foram tomados como referência para o
desenvolvimento do Portal UERN.
Explicada a metodologia já é possível compará-la com os objetivos: mostrar a evolução
do portal UERN entre 2004 e 2007 e a utilização dos Recursos (técnicas e tecnologias) no
decorrer das versões para aprimorar a interface, junto com um feedback simples com um
formulário de contato (foco no usuário). Finalmente, o bom senso é o que vai fazer todas essas
técnicas tenderem ao equilíbrio. É possível detectar também que todos aqueles pontos que
pareciam soltos nos objetivos na verdade estão integrados, são peças que interagem entre si para
que algo seja construído de forma estruturada.
A partir daqui detalharemos cada um dos cinco tópicos da metodologia “Acessibilidade de
Verdade” equivalente aos Recursos na fórmula, que são essenciais para construção de sites que
realmente facilitam a vida do usuário, eliminado as barreiras e colocando informações relevantes
em locais estratégicos.

27

2.3 ORGANIZAÇÃO DO CONTEÚDO

A partir do momento que dispomos de um inventário do que conterá o site no caso do
desenvolvimento de um primeiro site, ou então para fazer modificações em um site que já existe é
preciso entrar numa etapa de seleção, organização e hierarquização das informações.
As técnicas necessárias abordadas nesse problema pertencem à área de Arquitetura da
Informação que segundo Toub (apud por REIS 2007a): “é a arte e a ciência de estruturar e
organizar ambientes de informação para ajudar as pessoas a satisfazerem suas necessidades de
informação de forma efetiva.”
Para entendermos um pouco vamos ver na figura abaixo a diferença entre ambientes com
conteúdo planejados e os que não deram importância suficiente a esse quesito:

Figura 5: Ambiente de informação planejado e não planejado. Fonte: REIS, 2007b, p. 03

Para conseguirmos um resultado mais próximo possível do segundo quadro é necessário
balancear as características e necessidades dos usuários, do conteúdo e do contexto. Podemos ter
uma noção mais detalhada com a próxima imagem:

28

Figura 6: Equilíbrio entre conteúdo, contexto e público alvo. Fonte: REIS, 2007b, p. 04

Rosenfeld e Morvile (apud REIS 2007a) dividem a arquitetura da informação de web sites
em quatro etapas:

1. Sistema de Organização: composto pelo agrupamento e categorização do conteúdo
informacional;
2. Sistema de Navegação: Especifica as maneiras de navegar, de se mover pelo espaço
informacional e hipertextual;
3. Sistema de rotulação: Estabelece as formas de representação, de apresentação, da
informação definindo signos para cada elemento informativo e
4. Sistemas de busca: Determina perguntas que o usuário pode fazer e o conjunto de
respostas que irá obter.

29

2.3.1 Sistema de Organização

Para entendermos o sistema de organização precisamos ter noção de qual contexto deveremos
utilizar as seguintes estratégias:

Figura 7: Esquemas de organização da informação. Fonte: REIS, 2007b, p. 13

Alguns exemplos de esquemas organização:

Figura 8: Exemplos de esquema de organização ambígua

Esse exemplo do magazineluiza.com é interessante, pois apesar de reunir formas
diferentes de organização ele ainda consegue ser bem consistente. Ele usa a metáfora do carrinho

30

de compras que já é bem consolidada. A separação por categoria de produtos representando
assuntos diferentes está inclusive realçada por cores distintas. O item de público alvo “bebê”,
apesar de se configurar numa organização por assunto, está bem colocado, pois se trata de um
tipo de produto bem definido, organizado sobre o formato de abas que sugere ao usuário
percorrê-las até encontrar o produto desejado.
O problema de siglas foi bem resolvido, como no caso do link de “Utilidades domésticas”,
já que em outros sites como submarino.com utiliza a sigla UD que pode deixar os usuários
confusos. A parte superior do topo está “recheada” das diversas tarefas de prontidão para os
usuários resolverem suas necessidades, complementada com o telefone de vendas em local
estratégico.
O que não ficou tão claro são os itens – “Vendas corporativas” e “lista de casamento” -
orientados à público alvo, mas apresentado de uma forma que não se diferencia dos outros itens
orientados a tarefas, podendo confundir os usuários.
Uma olhada rápida no “fale conosco”, pode dar a entender que as demais opções tratam
da resolução de problemas, e no caso do usuário não estar interessado nisso, é possível que os
itens orientados para “vendas corporativas” e para “noivos” passem despercebidos.
Portanto, a estética, o jogo de cores, os formatos e posicionamentos podem ajudar ou
prejudicar a consistência da página, vai depender da maneira que foi colocada. A utilização de
abas foi o exemplo de sucesso, enquanto que a mistura de itens de propósitos diferente, com uma
mesma estética, não foi tão adequada para os usuários.
Esses equívocos no design podem levar à diminuição de vendas, já que existem outros
concorrentes que possivelmente mostram essas informações de forma mais clara, a somente um
endereço ou clique de distância.
Veremos agora alguns exemplos de esquemas de organização exatos:

Figura 9: Esquema de organização exata: ordem alfabética. Fonte: cifraclub.com.br

31

Figura 10: Esquema de organização exata: seqüência. Fonte: clifraclub.com.br

As figuras 8 e 9 foram retiradas do cifraclub.com.br que nos dá ótimos exemplos de
organização exata, no caso da escolha de músicas por ordem alfabética e também no quadro do
top cifras representando a organização em seqüência.
Esse é também uma ótima utilização do conceito de Faced Classification que se trata de
organizar um mesmo conjunto de informações de formas diferentes otimizando a área útil da tela
no sentido de possibilitar mais recursos e facilidades para os usuários. No caso do cifra club
podemos tentar achar uma música que comece com a letra “a” (ordem alfabética), ou podemos
fazer a busca pelo nome da música, artista e ainda no caso de esquecimento do nome da música é
possível fazer a busca por trechos da música. E o top 10 não deixa de ser outra forma de chegar a
determinadas músicas que são mais procuradas.

2.3.2 Sistema de Navegação

Para se ter um bom sistema de navegação, segundo Nielsen (2000), é preciso que a
interface responda a três perguntas básicas:
1. Onde estive?
2. Onde estou?
3. Onde posso ir?

Na figura a seguir, mostraremos em que locais de uma página são encontradas as
respostas para as perguntas acima.

32

Figura 11: As perguntas de básicas que um site deve responder

A resposta “Para onde posso ir?” são todos os links de navegação da página. Decidimos
colocar somente um trecho para destacar melhor sem confundir com as outras respostas. Como
podemos perceber, trata-se de uma área limitada (tela) onde teremos que colocar informações de
forma organizada para que o usuário não se perca. Portanto, uma forma que serve de base para
construção da interface é deixar o máximo possível flexível, desde que não se torne confuso.

33

Para tornar flexível temos os dilemas:

1. É permitido ir para qualquer lugar?
2. É permitido ir rapidamente de um ponto a outro?
3. Fornece muitos atalhos?

Para evitar que a página se torne confusa temos que agir de bom senso, pois informação
demais poderá prejudicar o usuário. Ele pode demorar a decidir em que link clicar ou até desistir
de utilizar a página.

Os sistemas de navegação podem ser divididos em:

Sistema de navegação embutido

É onde se encontra os links que são mostrados juntos com o conteúdo que tem a função de
criar um contexto e flexibilizar o movimento. São formados por: Logotipo, Barra de navegação
global, Navegação local, Bread Crumb, Cross Content. Sendo que Bread Crumb é uma lista de
elementos geralmente na horizontal que indica de forma hierárquica o caminho da estrutura raiz
do site até a página atual, permitindo facilmente que o usuário mude para outro nível através dos
links disponíveis. O Cross Content trata-se de links localizados próximos ao texto no qual tem o
objetivo de complementar o conteúdo da página atual com informações relacionadas para o
usuário se aprofundar no assunto em questão. Esses dois sistemas serão ilustrados nas figuras a
seguir.

34

Figura 12: Elementos do sistema de navegação embutido

Sistema de navegação remoto

É independente da hierarquia do site e serve como um caminho complementar para se
chegar a determinados conteúdos ou tarefas. São formados por mapa do site e índice remissivo. O
mapa do site tenta mostrar toda a estrutura do site possibilitando acesso rápido a qualquer página.
O índice remissivo é equivalente aos que são encontrados no final de livros. Trata-se de listas de
palavras chaves organizadas em ordem alfabética que são relacionadas ao conteúdo do website.

35

Figura 13: Mapa do site - Elemento de navegação remoto

36

Figura 14: Índice remissivo - Elemento de navegação remoto

2.3.3 Sistema de rotulação

Segundo Rosenfeld e Morville (apud REIS 2007a) o objetivo do rótulo é comunicar o
conceito de forma eficiente. De maneira que não precise muito esforço cognitivo para a
compreensão. Eles são empregados principalmente nos títulos de páginas, nos links do sistema de
navegação e nos links contextualizados.
Os rótulos podem ser textuais, formados por uma ou mais palavras ou não-verbais como
os ícones.
A criação do projeto de rotulação do site pode passar por algumas dificuldades, como a de
conseguir falar a linguagem do usuário. O usuário comum vive em um ambiente distinto do que o
desenvolvedor está acostumado. O ambiente do usuário pode está repleto de gírias ou dialetos
diferentes e é difícil compreender essa linguagem para deixar o texto do site amigável. O outro
ponto é que empresas gostam de interferir nessa nomenclatura querendo deixá-la de acordo com a
estrutura interna, suas linguagens técnicas e suas gírias. Isso é um problema e é preciso fazer com

37

que quem contratou o serviço compreenda que a estrutura e rotulação do site não devem ser
orientadas para os integrantes nem para o dono da empresa e sim para os clientes da empresa.
Outro dilema é a dificuldade de obter feedback já que ele vem através de medição de acesso às
páginas, e-mails no formulário de contato, e do log de busca que não ocorrem em tempo real,
então é preciso paciência, pois não tem como saber se a interface está sendo compreendida de
forma satisfatória pelos usuários. O outro problema é evitar ambigüidade nos rótulos o que é
difícil, porém quando for inviável é interessante que os links sejam duplicados, ou seja, repete o
link em todas as categorias que geram dúvidas. Por último o desenvolvedor precisa manter a
consistência dos rótulos e segundo Rosenfeld e Morvile (apud REIS, 2007a), ela é dividida nos
seguintes níveis:

 Estilo: manter o mesmo formato de caixa-alta, caixa baixa e pontuação em todo o site.
 Apresentação: é preciso uma boa escolha das fontes, tamanho da fonte, cores da letra e
background e espaços em branco que auxiliam no agrupamento dos rótulos de mesma
orientação;
 Sintaxe: é preciso manter a sintaxe uniforme (grau, número, gênero, tempo verbal, etc.).
Quando iniciar um padrão deve mantê-lo como, por exemplo, usar somente verbos no
infinitivo.
 Granularidade: agrupar somente rótulos de abrangência semelhante. Evitar que fiquem
no mesmo nível rótulos com o significado mais geral (ex: automóveis) com rótulos mais
específicos (ex: carros europeus).
 Completude: mostrar todo o escopo de rótulos, para evitar que o usuário sinta falta de
algum produto ou assunto.
 Audiência: não misturar rótulos de públicos diferentes, não misturar linguagens técnicas
com linguagem popular. Para sites com mais de uma audiência é importante a criação de
um sistema de rótulos diferentes.

38

2.3.4 Sistema de Busca

Rosenfeld e Morvile (citado por REIS, 2007a) mostram que o sistema de busca está meio
que consolidado e padronizado, ou seja, é algo a parte que pode ser encaixado a qualquer
momento no site sem precisar de esforço maior como os sistemas anteriores. Sites como
Google.com e Yahoo.com possuem tutoriais demonstrando como adicionar os respectivos
sistemas de busca nos sites. Portanto é uma tarefa que não requer maior esforço de análise.

2.3.5 Principais Documentos

O Wireframe tem o objetivo de estruturar o conteúdo das principais interfaces do site,
geralmente página principal e página interna. Nele são organizados os elementos que devem
compor a interface, a hierarquia entre eles e os agrupamentos.

Figura 15: Wireframe. Fonte: fatorw.com

39

O sitegrama é uma forma gráfica de representar toda a estrutura hierárquica do site, o
formato é de uma arvore em que existe um nó inicial que representa a home-page e a partir dele
são criadas ramificações equivalentes aos diversos níveis de conteúdo do site.

Figura 16: Sitegrama. Fonte: Reis, 2007c

2.4 UTILIZAÇÃO DOS PADRÕES WEB

Antes de entrarmos especificamente nas tecnologias conhecidas por Padrões Web
iniciaremos com uma breve explicação sobre a importância da padronização.

2.4.1 A importância da padronização

Começaremos mostrando um caso real e os problemas que causa a falta de padronização.
É sobre as tomadas elétricas. Não existe um padrão internacional para plugs elétricos. Cada país
desenvolveu seu próprio padrão. Na parte A da figura 17 podemos perceber a variedade de
adaptadores elétricos, que as pessoas que viajam com freqüência para outros países, têm que se
preocupar em levar, para poder utilizar o laptop, recarregar um celular ou mp3 player. Na parte B
podemos notar a variedade de plugs disponíveis no Brasil, são mais de 10 tipos no total. Tudo
isso causa problemas, pois geralmente tentamos forçar determinados plugs em tomadas que não
foram feitos para eles, gerando desperdício de energia e risco de choque elétrico. Pensando
nesses problemas a ABNT criou o padrão nacional para plugs e tomadas. Que pode ser visto no
item C. Esse modelo padrão é compatível com 80% dos aparelhos elétricos atuais e está sendo
implementado de forma gradativa.

40

Figura 17: plugs e tomadas variadas e padrão ABNT. (fonte: Inmetro)

Ficou muito claro, com o exemplo dos plugs e tomadas, que a padronização diminui a
complexidade, elimina diversas barreiras, aperfeiçoa os serviços ou produtos e garante a
segurança. Ficou evidente também que a falta de padronização gera problemas complexos muito
mais difíceis de serem revertidos. Podemos notar também que a padronização está muito ligada
às áreas dos conhecimentos citadas nesse trabalho, já que ela permite uma organização melhor,
pois os componentes são bem conhecidos e não há mudança neles. Permite um conforto maior do
usuário final, pois ele não precisa se preocupar se o aparelho irá ou não encaixar na tomada, nem
vai se preocupar com os riscos do choque elétrico. Conseqüentemente também elimina as
barreiras já que o aparelho elétrico que seguir o padrão funcionará corretamente em qualquer
tomada que também siga o padrão.
É importante ter ciência também que o processo de criação do padrão é árduo, pois são
pensadas todas as variáveis envolvidas em determinado produto, incluindo economia na sua
criação, produtividade no processo, preocupações com o tipo de material que não pode ser tóxico

41

ao ser humano por exemplo, e atualmente a preocupação com o meio ambiente. Dependendo do
tipo do produto a equipe de padronização precisará de uma ou mais dessas variáveis citadas.

2.4.2 Padrões Web: Definição e Vantagens

Existe um consórcio de empresas (W3C) que ano após ano estão trabalhando arduamente
para garantir que suas tecnologias sejam desenvolvidas de forma que quando forem utilizadas
pelos desenvolvedores, fique bem clara a utilidade e o ganho com organização e produtividade
que eles possam ter. O termo Padrões Web é justamente o nome que se dá a essas tecnologias
criadas pelo W3C. As principais tecnologias são utilizadas nesse trabalho é a linguagem de
marcação XHTML e a linguagem de formatação CSS, cada uma criada para uma finalidade
específica.
Mostraremos agora as vantagens de utilizar os Padrões Web. Começaremos identificando
na próxima figura as metodologias comumente usadas em equipes de desenvolvimento de
sistemas web.

42

Figura 18: Processo de desenvolvimento de sites comumente utilizado

O processo que comumente se encontra em equipes de desenvolvimento de sites é
principalmente o caminho do lado esquerdo começando pelo design, depois inserindo a
programação. Porém em equipes de desenvolvimento de sistemas pode-se encontrar o processo
representado pelo caminho da direita onde começa a programação dos formulários de cadastro,
consulta, alteração e, só depois a aparência é aperfeiçoada por um Designer. Podemos detectar
que, independente do caminho que a equipe seguir (esquerdo ou direito), o processo anterior se
caracteriza por ser seqüencial em que o programador só dará continuidade quando o design
estiver pronto e vice-versa. A outra questão é o alto nível de dependência de ambos profissionais
quando for necessária alguma modificação. Já que é provável que o código por trás do design não
esteja muito organizado, complicando a vida do programador e por outro lado a codificação
avançada poderá deixar o designer perdido gerando dessa forma uma crise no desenvolvimento

43

por se tratar de etapas distintas feitas de formatos e focos diferentes. Em algumas equipes é
possível verificar conflitos maiores inclusive de um profissional jogando a culpa para o outro,
pois não falam a mesma língua, não tem um ponto em comum para unir seus pontos de vista.
Conseqüentemente a equipe pode se desgastar e perder um pouco a motivação e é bem claro que
o produto final (site) poderá ficar comprometido com relação à qualidade técnica.
Vejamos agora outra forma de processo quando utilizamos os Padrões Web para os
propósitos que foram concebidos:

Figura 19: Processo que utiliza os padrões web de forma adequada

Depois de concluído o levantamento de conteúdo o primeiro passo é a criação da Página
em XHTML. Essa página é criada em conjunto entre o designer e o programador, nessa etapa
haverá a utilização adequada das tags de acordo com o tipo de conteúdo que se deseja mostrar
além da hierarquização da página com os títulos (h1 a h6), para que facilmente diversos tipos de
usuários, inclusive robôs de busca, possam localizar o conteúdo mais importante da página e
conseqüentemente seus respectivos subordinados em ordem descendente.

44

Depois de concluído o código do XHTML simplificado, ele é repassado tanto para o
designer quanto para o programador que em paralelo irão desempenhar suas respectivas funções:
O designer depois de criar o layout baseado no conteúdo irá formatar o código XHTML através
das folhas de Estilo (CSS) que no final do projeto ficará em um arquivo a parte. Já o programador
irá disponibilizar as rotinas de consulta a banco de dados buscando o conteúdo que será mostrado
naquela estrutura XHTML criada inicialmente.
Outro ponto interessante para se notar é que o trabalho do programador e do designer
nesse modelo é independente, portanto com um pedido de modificação do layout, o designer fica
livre para fazer a modificação. O programador também se sentirá à vontade para inserir novas
funcionalidades, pois existe uma linguagem universal entre eles que é o XHTML utilizado da
maneira para a qual realmente foi feita que é representar conteúdo. Nesse modelo acabaram os
conflitos entre programador e designer e os dois passaram a se entender melhor. É perceptível o
ganho em consistência e qualidade.

2.4.3 Marcação Válida e Marcação Semântica: evitando distorções

Vamos agora tentar entender a diferença entre dois conceitos básicos: Marcação válida e
marcação semântica. Zeldman (2007) mostra que marcação válida é quando não contém erros de
sintaxe (ex: esquecer de fechar tags) e não contém tags ou atributos ilegais (ex: o atributo height
que não é permitido em tabelas). Em seguida afirma que marcação semântica é quando as tags
representam o tipo de conteúdo para qual foram projetadas, por exemplo, quando colocamos a
tag de título h1 marcando o trecho de conteúdo mais importante da página é uma prática de
marcação semântica. Colocando o h1 para um trecho somente para deixá-lo um pouco maior
visualmente sem ter a certeza de que o trecho é realmente mais relevante não é uma prática de
marcação semântica.
Uma página web pode ser válida sem ser semanticamente estruturada que é o caso dos
layouts de tabela em que as marcações das células da tabela são usadas para criar uma aparência
visual e não para representar o conteúdo, porém elas não apresentam nenhum erro de sintaxe ou
de atributos ilegais e, portanto são válidas. O inverso também é possível como uma tabela
representando um calendário (marcação semântica) só que com algumas tags sem fechar (não
válido). Os profissionais que tentam criar páginas baseadas nas boas práticas dos Padrões Web

45

se preocupam tanto em deixar a página válida quanto em escolher as tags apropriadas para cada
trecho de conteúdo conseguindo também uma marcação semântica.
O que ainda muitos desenvolvedores confundem e inclusive instrutores que repassam de
forma distorcida é com relação ao conceito do código HTML voltado para a sensação visual,
provavelmente devido à herança das práticas do layout de tabela que era utilizada quando o
código CSS ainda não era suportado nos principais navegadores. Outro complicador é o fato da
percepção do ser humano ser voltada de forma muito intensa para o sentido da visão. Então
poderá acontecer que alguns profissionais falarão que é melhor usar a tag h3 já que a tag h1 fica
grande demais no navegador e a tag h6 ficar quase ilegível (concepção presa na formatação).
Só que o pensamento correto é: podemos usar h1 para o título que realmente for o mais
importante da página e sucessivamente nos demais quando forem menos relevantes que o
principal. Na figura 12 podemos notar uma renderização dos títulos disponíveis variando de h1 a
h6 e podemos perceber que há uma formatação prévia com mudanças significativas de tamanho
entre eles. Só que essa renderização no navegador é só uma intenção de mostrar a relevância de
cada um. Eles podem e devem ser modificados pelo CSS em tamanho, cor e efeitos dependendo
da necessidade.

Código 1: Renderização inicial das tags de título h1 a h6 no navegador

46

Fazendo pequenas modificações no CSS no mesmo arquivo temos o resultado abaixo:

Código 2: Renderização das tags de título h1 a h6 modificadas pelo CSS

Como podemos perceber na figura acima, uma simples inclusão no arquivo com um bloco
de formatação em CSS, já serviu para inverter visualmente o Código 1, deixando dessa vez o
título h1 com o menor tamanho e o h6 com tamanho maior. Esse exemplo simples já derruba
qualquer argumento superficial de explicação de tags de representação de conteúdo com
conceitos de formatação. Fica bem claro a partir de agora o papel do XHTML e que, quando o
desenvolvedor estiver criando, deve pensar no arquivo independente de como ele ficará depois
com o CSS.
Para termos uma noção de como fica uma página construída sem essa prática de deixar o
XHTML semanticamente e hierarquicamente organizado, construímos uma nova versão do
arquivo de títulos agora com localizações aleatórias, sendo do mesmo tamanho:

47

Código 3: Renderização das tags de título h1 a h6 com posicionamento aleatório

Podemos notar no resultado da renderização da figura anterior que falta uma seqüência
lógica entre os títulos, provocando uma sensação de desorganização, de falta de ordem. Não
existe começo, meio e fim. Todos os títulos estão em um mesmo nível e aleatoriamente
espalhados. Não tem como saber qual o mais importante visualmente.
Essa é uma tentativa de criar uma analogia aos problemas que robôs de busca,
dispositivos móveis e usuários com deficiência visual passam para poder captar, entender ou
indexar o conteúdo de páginas que não seguem a linha dos padrões web de separação entre
conteúdo e formatação. Essas páginas são popularmente chamadas de “sopa de tags”, por se
tratar de uma mistura de vários tipos de conteúdo onde não conseguimos ver as partes se
encaixando ou se diferenciando. Não conseguimos separar o essencial do supérfluo. Quando
temos uma estrutura que não se consegue obter a informação prioritária, devido ela estar perdida
entre diversas outras, podemos dizer que é uma estrutura pobre com relação aos requisitos de
acessibilidade que estamos buscando. O trabalho da acessibilidade visa fugir desses paradigmas
superficiais que podem causar problemas no produto final. A página poderá, ao ser finalizada, já
ser considerada obsoleta, caso seja feita sem preocupação com a marcação semântica. Uma
empresa pode querer uma expansão do site para que usuários com necessidades especiais

48

consigam acessar e comprar os produtos sem problemas. Pode também querer ampliar o alcance
da página para que possa ser acessada via dispositivos móveis. Nesses dois casos, se a página for
feita baseando nas técnicas e conceitos e tecnologias envolvidas nos Padrões Web, essa expansão
será uma etapa simples de ser realizada. Por outro lado ser for utilizada técnicas que não tenham
preocupação maior com a organização e hierarquização do conteúdo, é muito provável que seja
preciso criar uma nova página para poder expandir o site conquistando o objetivo desejado. Só
que outra página significa mais tempo e dinheiro, no caso do cliente. No caso do desenvolvedor,
ter que fazer um novo site devido o primeiro não se adequar às diretivas de acessibilidade, mostra
que ele está precisando se atualizar para as necessidades do mercado, pois, atualmente
desenvolvimento de páginas utilizando Padrões Web já não é mais visto, nos principais centros
como diferencial e sim algo que já espera ser feito.

2.4.4 Principais tags do XHTML

É importante começarmos diferenciando os elementos em bloco dos elementos inline:

1. Em bloco: podem conter elementos inline e outros elementos de bloco
2. Inline: devem conter apenas dados (textos) e outros elementos inline.

A diferença é que elementos de bloco criam uma estrutura maior que os elementos inline.

Para blocos de conteúdo

div e span - essas duas marcações são utilizadas em conjunto com os atributos id e class
oferecendo um mecanismo genérico de adicionar estruturas ao documento. O span define
conteúdo do tipo inline, enquanto o div define conteúdo em bloco. O div (divisão) será bastante
utilizado para separar a página em seções de conteúdos definidos por ids (atributo id) como:
cabeçalho, menu, conteúdo, rodapé, etc. Já o span servirá para demarcar trechos do texto.
p - parágrafos.
Listas – serão muito utilizadas para os menus de links (lista de links)

49

ul, ol, li – listas enumeradas e não enumeradas.
dl, dd, dt - listas de definição (representar por exemplo um dicionário)

Tags com significado específico

h1, h2, h3, h4, h5, h6 – títulos que podem ser classificados em seis níveis de importância,
quanto menor o número que acompanha o h, maior a relevância na página.
strong – texto forte, usado quando se quer destacar determinados trechos de palavras
como mais relevantes que os demais, a formatação padrão é deixar em negrito.
em – texto enfatizado, a formatação padrão é em itálico
acronym - acrônimo
abbr - abreviatura
q – citação curta, utilizada em uma mesma linha
blockquote – citação longa, um bloco.
pre – texto pre-formatado, é mostrado o texto do jeito que foi digitado no código.
code - para mostrar código de computador

2.4.5 Exemplo de utilização de marcação semântica

Na figura a seguir é possível notar as diversas tags do XHTML sendo utilizadas no
contexto ao qual foram criadas. Com esse exercício fica fácil para o desenvolvedor seguir o
princípio da marcação semântica que é de escolher a tag apropriada para cada trecho de conteúdo.
Lista ul para links. Hieraquizar o conteúdo com tags de títulos h1-h6, entre outras.

50

Figura 20: Página do acesso digital que utiliza marcação semântica

2.4.6 Entendendo o box model

Toda marcação HTML é apresentada no navegador com o formato de uma “caixa”
retangular cuja formatação pode ser modificada pelo CSS. Essas caixas são colocadas em
seqüência uma após a outra. Elas são formadas por margens, bordas, espaçamentos e o conteúdo
propriamente dito. Uma divisão <div>, um título <h1>...<h6> ou um parágrafo <p> criam uma
caixa quando são exibidos. Se uma marcação for colocada no interior de outra marcação, então
sua caixa será exibida dentro da caixa do elemento em que está contida. Por exemplo, um
parágrafo <p> se for codificado dentro de uma divisão <div> visualmente pertencerá a esse bloco
div e não a outro.

51

No exemplo seguinte será possível compreender as noções de espaçamento e já aprender
uma técnica de borda, com um efeito na diagonal, que poderá utilizar no dia-a-dia do
desenvolvimento. Nele teremos como resultado visual duas caixas: a) div geral e a b) título h1.
sendo que o título está contido dentro do div. Vamos agora a definições importantes:

 Espaçamento (padding): é o espaço entre a borda do elemento e o conteúdo
(interno).
 Margem (margin): espaço externo a partir da borda

A técnica consiste em utilizar a borda inferior com contraste relevante com relação ao
plano de fundo, nesse caso optamos pela cor preta e a borda lateral utilizará a mesma cor do
fundo, deixando-a imperceptível e criando uma curva diagonal na extremidade da borda inferior.
Nesse caso, para dar o espaçamento do elemento interno com relação ao externo, ao invés
de criar uma margem interna, utilizamos um padding externo.
As bordas podem variar nas seguintes formas:

 border - coloca a borda circundando completamente o elemento
 border-top, border-right, border-bottom, border-left - respectivamente as bordas
no topo, direita, em baixo e na esquerda independentes uma da outra.

Utilizamos também um recurso de redução de código para o espaçamento que segue o
padrão - padding: topo direita baixo esquerda;

52

</html>

Código 4: Detalhamento do box model junto com exemplo de borda diagonal

Por mais que o desenvolvimento dos navegadores seja baseado nas especificações do
W3C, ainda existem algumas diferenças de renderização entre, por exemplo, o Firefox e o
Internet Explorer.

2.4.7 Centralizando elementos na tela com CSS

Na seqüência de imagens abaixo mostraremos uma técnica para conseguir o mesmo efeito
de centralização em ambos os navegadores.
Na primeira figura notaremos que o Internet Explorer quando utilizamos a propriedade
text-align:center ele centraliza todos os elementos dentro do div. E não somente o texto como
ocorre no Firefox.

53

Código 5: Centralização de elementos com CSS – parte 01

Nessa segunda figura veremos uma forma de centralização no Firefox utilizando o
margin:0 auto. O Zero anula a margem superior e a inferior. O auto indica que a margem
esquerda será do mesmo tamanho que a margem direita, centralizando, portanto o div interno. Só
que esse valor auto não funciona no Internet Explorer.

Código 6: Centralização de elementos com CSS – parte 02

Finalmente na próxima figura conseguiremos o resultado desejado de centralizar os
elementos em ambos os navegadores. Utilizando as duas técnicas anteriores com o text-
align:center no div mais externo e complementa com margin:0 auto; no div mais interno.

54

Código 7: Centralização de elementos com CSS – final

2.4.8 Quirks Mode, Strict Mode, hacks e Comentários Condicionais

Quirks Mode e Stric Mode são as formas que os browsers podem usar para interpretar o
CSS. O Netscape 4 e o Explorer 4 implementaram CSS de forma particular sem seguir as
especificações do W3C. O IE5 eliminou muitos bugs, porém ainda permaneceu o problema do
box model que renderizava de forma diferente.
Com o passar do tempo os padrões foram ficando importantes e essa renderização dentro
da especificação ficou conhecida como Strict Mode (modo estrito) diferente do Quirks Mode
(modo peculiar). Como os navegadores não podiam simplesmente deixar de lado o Quirks Mode
então desenvolveram técnicas que ativariam um ou outro modo para manter compatibilidade com
as páginas antigas. A solução foi o uso de ativação de modo strict por doctype. Caso a página
possua o doctype correto o navegador irá interpretar o CSS no modo strict. Caso contrário eles
vão trabalhar Quirks Mode, que é o caso do Internet Explorer e do Ópera. A exceção dessa regra
vai para o Mozilla Firefox e o Safari que sempre trabalham em Strict Mode.
Para a versão 6 do Internet Explorer, a Microsoft implementou uma forma de a página ser
validada pelo W3C e ao mesmo tempo trabalhar em Quirks Mode. A solução era utilizar um
prólogo XML antes do Doctype. (<?xml version="1.0" encoding="iso-8859-1"?>).

55

Para resolver esse problema, nos exemplos seguintes não será permitida a utilização do
Prolog XML no início do documento, ele deve ser deixado de lado. Além disso, deveremos
colocar o doctype para que os navegadores modernos renderizem todos em Strict Mode.
Atualmente, dependendo do público alvo do site, o desenvolvedor poderá tomar a decisão
de se preocupar somente com a renderização da página em Strict Mode. O site ficaria bem
renderizado no Firefox, Opera, Internet Explorer 6 e 7, mas teria problemas para Internet explorer
5 ou menor. Na figura abaixo será mostrada a diferença entre a renderização do CSS no Quirks
Mode e no Strict Mode.

Código 8: Renderização em Quirks e em Strict Mode.

56

Porém, caso seja necessário, podemos utilizar o seguinte hack em um arquivo isolado.
Uma vez retirado o hack da folha de estilos principal ele será colocado em iehacks.css e deverá
ser chamado através de um link utilizando Comentários Condicionais CCs conforme mostrado
abaixo (JOHN, 2005):

iehacks.css
#topo {
width: 770px;
width: 750px; /* hack: essa linha é ignorada no IE5 e IE5.5*/
}



Código 9: Resolvendo o problema do box model – parte 01

A segunda propriedade com o caractere de "escape" dentro dela faz com que os
navegadores IE5 e IE5.5 para windows ignorem a letra "t", dessa forma a propriedade é ignorada
e a renderização ocorre com o width de 770px. Já os navegadores IE6 e IE7 não desprezam a
segunda propriedade e conseqüentemente renderizam a página com o width de 750px.
É possível também deixar de lado o uso de hacks e colocar as formatações específicas do
IE5 em um arquivo e as formatações para IE6 e IE7 em outro arquivo e utilizar uma
especificidade dos Comentários Condicionais indicando o tipo de navegador que irá renderizar
determinado arquivo como segue na figura a seguir.

57





Código 10: Resolvendo o problema do box model – parte 02

Na figura anterior teremos o primeiro arquivo que será universal para todos os
navegadores IE e no segundo arquivo teremos a formatação que será renderizada somente para os
IE que iniciam com o número 5, ou seja, vale para o 5.0 e o 5.5.

2.4.9 Exemplo de Página com Layout 3 colunas

A partir de agora mostraremos uma seqüência de criação de uma página simples junto
com as principais técnicas e recursos. O nome do site será Blog now, a idéia é de uma estrutura
simples para se criar um blog.

2.4.9.1 Criação do código XHTML da página

A seguir será mostrado o código XHTML da página limpo sem formatação alguma e logo
em seguida será mostrado sua renderização.

58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout 3 colunas</title>
</head>
<body>
<div id="geral">
<div id="topo">
<h1>Blog Now</h1>
<h2>Faça <span class="enfase">Seu Próprio Site</span>, de forma
automatizada simples, além de contar com suporte técnico de alta
qualidade! </h2>
</div>

<div id="menu">
<h3>Menu</h3>
<ul>
<li><a href="#">Cadastre agora</a></li>
<li><a href="#">Perguntas Freqüentes</a></li>
<li><a href="#">Fale Conosco</a></li>
</ul>
</div>

<div id="propaganda">
<h3>Publicidade</h3>
<p>Lorem ipsum dolor...</p>
</div>

<div id="conteudo">
<h3>Conteúdo</h3>
<p>Suspendisse convallis pellentesque mi...</p>
</div>

<div id="rodape">
<p>Copyright - todos os direitos reservados.</p>
</div>
</div>

</body>
</html>

Código 11: Blog now: código XHTML

Podemos perceber que no código teremos 5 divs principais: topo, menu, conteúdo,
propaganda e rodapé com o objetivo final é de criar um layout 3 colunas. Para facilitar a
centralização do layout, iremos colocar um div adicional com id = “geral” que agrupará todo o
conteúdo internamente. Para esse exemplo o div central deve ser colocado após os divs da
esquerda e direita.

59

Figura 21: Blog Now: Renderização do código no navegador

2.4.9.2 Usando a propriedade float para criação do layout

O float possui é uma propriedade essencial na criação de um layout, pois ele faz o
elemento “flutuar” (posicionar) à direita ou à esquerda. Em conjunto será utilizada a propriedade
clear que poderá cancelar o efeito de uma renderização de um elemento anterior pelo float em um
elemento atual. Ele pode ter os valores: left, right, both (desabilita o float: left e o float: right).

60

div { border:1px solid black; }

body {
text-align:center;
font:13px Arial, "Trebuchet MS", Tahoma, Helvetica, sans-
serif;
}

#geral{
text-align:left;
width:770px;
margin:0 auto;
}

#topo { height:120px; }

#rodape {
height:120px;
clear:both;
}

#menu, #propaganda{ height:412px; }

#menu {
float:left;
width:225px;
}
#propaganda{
float:right;
width:269px;
}

#conteudo{ margin:0 245px; border:0;}

Código 12: Blog Now: CSS parte 01

61

Figura 22: Blog Now - renderização do CSS – parte 01

2.4.9.3 Usando a técnica de Image Replacement

Image Replacement é o nome dado à técnica de substituição de texto por imagem de
fundo. Existem diversos modos e o modo escolhido para esse trabalho utilizará o seguinte
método:

62

 Na tag escolhida colocamos a imagem de fundo usando background:
url(logomarca.jpg) no-repeat;
 Usamos depois atributo text-indent:-5000. Um valor alto que vai fazer com que o
texto se desloque para além da área visual do monitor.
 Para garantir que mesmo em monitores grandes o texto não poderá ser visualizado
finalizamos com a propriedade overflow:hidden; que apaga todo o conteúdo que
ultrapassar a área da caixa.

#topo h1 {
font-size:32px; color:white;
margin:0;

/*image replacement*/

height: 52px;
background: url(logomarca.jpg) no-repeat;
text-indent: -5000px;
overflow: hidden;

}

Código 13: Blog Now: aplicando Image Replacement

O exemplo acima poderia ser feito utilizando imagens também (<img>). A técnica Image-
replacement é indicada mais para elementos que não fazem parte do conteúdo da página como
bordas, sombras. Porém ela permite ampliar as possibilidades visuais como substituir uma lista de
tarefas em texto por uma imagem bem mais amigável.

Figura 23: Blog Now - Renderização da imagem no lugar do texto

Monografia Acessibilidade na Web - Valério Farias

Monografia Acessibilidade na Web - Valério Farias

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Monografia Acessibilidade na Web - Valério Farias

Similaire à Monografia Acessibilidade na Web - Valério Farias (20)

Dernier

Dernier (20)

Monografia Acessibilidade na Web - Valério Farias