UNIVERSIDADE DO ESTADO DO RIO GRANDE DO NORTE
            FACULDADE DE CIÊNCIAS EXATAS E NATURAIS
                 DEPARTA...
VALÉRIO FARIAS DE CARVALHO




ACESSIBILIDADE NA WEB: UM ESTUDO DE CASO NO PORTAL UERN




                               ...
Catalogação da Publicação na Fonte

Carvalho, Valério Farias de.
    Acessibilidade na Web: um estudo de caso no portal UE...
VALÉRIO FARIAS DE CARVALHO




ACESSIBILIDADE NA WEB: UM ESTUDO DE CASO NO PORTAL UERN



                                ...
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...
RESUMO

        Neste trabalho mostraremos a evolução do Portal UERN entre 2004 e 2007, além das
técnicas e tecnologias ut...
ABSTRACT

        This work talk about the Portal UERN evolution ( 2004 – 2007 ), beyond the techniques
and technologies u...
SUMÁRIO


1. INTRODUÇÃO .....................................................................................................
2.5.4 Indicar claramente qual o idioma utilizado .................................................................. 73
   ...
LISTA DE ILUSTRAÇÕES


Figura 1: Elementos presentes nas páginas no mundo dos padrões web ...................................
LISTA DE CÓDIGOS-FONTE


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



Tabela 1: Tabela que facilita a manipulação de softwares leitores de tela ...............................
13




1. INTRODUÇÃO


             O conceito de deficiência relacionado à web refere-se ao usuário portador de um ou
mai...
14



aprimoramento, quando for necessário.
       Sabendo que, no desenvolvimento das interfaces com o usuário, as especi...
15




1.2.2 Específicos


      Colher informações acerca do tema acessibilidade, arquitetura da Informação, Usabilidade...
16



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



1.4 ORGANIZAÇÃO

       Para um melhor entendimento de onde queremos chegar, iniciaremos mostrando o nível
das págin...
18



2. REFERENCIAL TEÓRICO


          Nesse momento iremos explanar sobre as técnicas e metodologias que servirão de
em...
19



2.2 ÁREAS DO CONHECIMENTO E TECNOLOGIAS ENVOLVIDAS

       Para termos uma noção da complexidade desse trabalho é mu...
20



2.2.2 Áreas do conhecimento para embasamento


         Na figura abaixo podemos identificar as principais áreas do ...
21



desenvolvimento também se percebe melhorias e é possível efetuar modificações até que se tenha
um produto coerente c...
22



       É bom lembrar também que o conceito de acessibilidade é bem mais amplo que somente
fabricar páginas voltadas ...
23



       Torres (2008) afirmou que acessibilidade não é altruísmo e sim uma ótima estratégia de
ganhar novos clientes,...
24



   3. A utilização e adequação desse conteúdo bem selecionado e bem demarcado às diretrizes
       de acessibilidade...
25



do usuário. A seqüência acima está disposta de forma didática, na criação do produto (site)
podemos estar focados em...
26



tende a ser exagerado em suas declarações, mas também não devemos desprezar totalmente, pois
quando determinada sens...
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...
28




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




       Rose...
29



2.3.1 Sistema de Organização


    Para entendermos o sistema de organização precisamos ter noção de qual contexto d...
30



de compras que já é bem consolidada. A separação por categoria de produtos representando
assuntos diferentes está in...
31




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




       As figura...
32




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



       A resposta “Para onde po...
33



Para tornar flexível temos os dilemas:


          1. É permitido ir para qualquer lugar?
          2. É permitido i...
34




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




Sistema de navegação remoto


   ...
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


 ...
37



que quem contratou o serviço compreenda que a estrutura e rotulação do site não devem ser
orientadas para os integra...
38



2.3.4 Sistema de Busca


       Rosenfeld e Morvile (citado por REIS, 2007a) mostram que o sistema de busca está mei...
39



       O sitegrama é uma forma gráfica de representar toda a estrutura hierárquica do site, o
formato é de uma arvor...
40




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



       Ficou muito claro, co...
41



ao ser humano por exemplo, e atualmente a preocupação com o meio ambiente. Dependendo do
tipo do produto a equipe de...
42




             Figura 18: Processo de desenvolvimento de sites comumente utilizado



       O processo que comumente...
43



por se tratar de etapas distintas feitas de formatos e focos diferentes. Em algumas equipes é
possível verificar con...
44



       Depois de concluído o código do XHTML simplificado, ele é repassado tanto para o
designer quanto para o progr...
45



se preocupam tanto em deixar a página válida quanto em escolher as tags apropriadas para cada
trecho de conteúdo con...
46



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




               Código 2: Renderi...
47




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

       Podemos notar ...
48



consigam acessar e comprar os produtos sem problemas. Pode também querer ampliar o alcance
da página para que possa ...
49




       ul, ol, li – listas enumeradas e não enumeradas.
       dl, dd, dt - listas de definição (representar por ex...
50




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




2.4.6 Entendendo o box ...
51



       No exemplo seguinte será possível compreender as noções de espaçamento e já aprender
uma técnica de borda, co...
52




      </html>

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


       Por...
53




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



       Nessa segunda figura veremo...
54




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


2.4.8 Quirks Mode, Strict Mode, hack...
55



       Para resolver esse problema, nos exemplos seguintes não será permitida a utilização do
Prolog XML no início d...
56



         Porém, caso seja necessário, podemos utilizar o seguinte hack em um arquivo isolado.
Uma vez retirado o hac...
57




   <!--[if IE]>
     <link rel="stylesheet" type="text/css" href="iehacks.css" />
   <![endif]-->




   <!--[if IE...
58



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
59




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




2.4.9.2 Usando a propriedade ...
60



div { border:1px solid black; }

body {
      text-align:center;
      font:13px Arial, "Trebuchet MS", Tahoma, Helv...
61




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




2.4.9.3 Usando a técnica de Image Repl...
62



               Na tag escolhida colocamos a imagem de fundo usando background:
                url(logomarca.jpg) n...
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Monografia Acessibilidade na Web - Valério Farias
Próximos SlideShares
Carregando em…5
×

Monografia Acessibilidade na Web - Valério Farias

12.422 visualizações

Publicada em

O acessodigital divulgou a idéia da Acessibilidade de verdade, que é a soma de Acessibilidade, padrões web e usabilidade.

Nessa monografia eu amplio mais essa idéia criando a seguinte fórmula didática:

Recursos = (Arquitetura da Informação + Padrões Web + Acessibiidade + Usabilidade + Acompanhamento de Tendências )

Acessibilidade de Verdade = Recursos + Foco no Usuário + Bom senso

Cada tópico da "fórmula" é aprofundado e complementado com um estudo de caso que mostra minha experiência na construção das várias versões do Portal UERN.

Entenda a palavra fórmula como um recurso didático para criar uma sensação de unidade entre áreas tão diversificadas presentes no desenvolvimento Web. Não é receita de bolo, repito é só um recurso didático para facilitar a compreensão.

Boa leitura!"

Publicada em: Educação, Tecnologia, Negócios
1 comentário
5 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
12.422
No SlideShare
0
A partir de incorporações
0
Número de incorporações
122
Ações
Compartilhamentos
0
Downloads
410
Comentários
1
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Monografia Acessibilidade na Web - Valério Farias

  1. 1. 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
  2. 2. VALÉRIO FARIAS DE CARVALHO ACESSIBILIDADE NA WEB: UM ESTUDO DE CASO NO PORTAL UERN 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
  3. 3. 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
  4. 4. VALÉRIO FARIAS DE CARVALHO ACESSIBILIDADE NA WEB: UM ESTUDO DE CASO NO PORTAL UERN 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: __/__/__
  5. 5. Dedico este trabalho à minha mãe, Ana e às minhas irmãs, Patrícia e Isabelli.
  6. 6. 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.
  7. 7. 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.
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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.
  16. 16. 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,
  17. 17. 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.
  18. 18. 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.
  19. 19. 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)
  20. 20. 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.
  21. 21. 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
  22. 22. 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.
  23. 23. 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)
  24. 24. 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);
  25. 25. 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
  26. 26. 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
  27. 27. 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.
  28. 28. 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:
  29. 29. 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.
  30. 30. 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
  31. 31. 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
  32. 32. 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.
  33. 33. 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.
  34. 34. 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.
  35. 35. 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.
  36. 36. 35 Figura 13: Mapa do site - Elemento de navegação remoto
  37. 37. 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
  38. 38. 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.
  39. 39. 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
  40. 40. 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.
  41. 41. 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
  42. 42. 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.
  43. 43. 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
  44. 44. 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.
  45. 45. 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
  46. 46. 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
  47. 47. 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:
  48. 48. 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
  49. 49. 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)
  50. 50. 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.
  51. 51. 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.
  52. 52. 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;
  53. 53. 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.
  54. 54. 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.
  55. 55. 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"?>).
  56. 56. 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.
  57. 57. 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*/ } <!--[if IE]> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> 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.
  58. 58. 57 <!--[if IE]> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> <!--[if IE 5]> <link rel="stylesheet" type="text/css" href="iehacks-5.css" /> <![endif]--> 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.
  59. 59. 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.
  60. 60. 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).
  61. 61. 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
  62. 62. 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:
  63. 63. 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

×