O texto escreve-se com letras

  Este título pode parecer óbvio ou mesmo ridículo. É claro que o texto se escreve com letras. Mas ao mesmo tempo, quantos sítios (sites) na Internet não substituem os textos por imagens mais ou menos apelativas e sofisticadas?

  Esta tendência teve o seu auge entre 1997 e 1999 mas mantém-se ainda como uma deformação relevante (um "vício" de Web designer?) da apresentação de conteúdos na Internet. A moda de decoração dos textos, em particular dos cabeçalhos (headers) e das barras de menus, resultou da possibilidade tecnológica, aberta pela generalização do software de criação de títulos e de JavaScript, dispensando qualquer reflexão sobre as vantagens dessas novidades.

  Há mesmo programas, como por exemplo o Adobe Image Styler, que se propõem rejuvenescer uma página, substituindo automaticamente todos os cabeçalhos escritos com texto e delimitados por <H1>...</H1> a <H6>...</H6> e por isso monótonos e banais, por imagens apelativas de acordo com uma estética coerente (um template). O JavaScript também propiciou esta mudança ao oferecer o efeito de roll-over: quando o cursor passa sobre uma imagem ela é trocada por outra de tamanho igual. Usa-se para destacar a opção apontada num menu de várias opções. Serviu também para eliminar o sublinhado (como neste exemplo para voltar ao início) nos links (ponteiros) dos menus, considerados inestéticos e cansativos.

  O objectivo principal destas mudanças era cativar uma audiência cada vez mais numerosa, mas dispersa por inúmeros sítios concorrentes e sedenta de novidades, oferecendo algo diferente que se destacasse da concorrência.

  Em 1998, o aparecimentos dos browsers de geração 4.0, com implementação de Cascading Style Sheets, ofereceu uma alternativa melhor para a formatação de texto: o texto escreve-se com formatação de significado e sem formatação de apresentação e define-se paralelamente uma style sheet (um "modelo") onde se indica como se apresenta cada um dos tipos de texto.

  Note-se que o objectivo inicial das style sheets era diverso: cada utilizador de Internet escolheria o seu conjunto de style sheets ideais e veria todas as páginas de todos os sítios com essa formatação. Para tal, um conjunto de especialistas de apresentação de conteúdos disponibilizaria style sheets optimizadas para os vários ambientes de visualização em "bancos" de style sheets, de acordo com o dispositivo, tamanho do écran, número de cores, entre outros. Nada disso aconteceu, e os Web designers aproveitaram esta nova arma para dizerem ao utilizador como deve ver as páginas por eles criadas.

  Analisarei de seguida as vantagens do uso de texto combinado com style sheets, e depois as vantagens do uso da imagem, ultrapassando as limitações do texto. A exposição em parágrafos segue uma ordem de relevância decrescente.

Vantagens do uso de texto (com style sheets)

1. Economia de largura de banda

Numa época em que o tempo de espera é o principal factor de queixa dos utilizadores da Internet, a utilização de texto com letras em vez de imagens com letras acelera significativamente a navegação e consequentemente a satisfação dos utilizadores. Em páginas pequenas com menus formados por pequenas imagens em mosaicos, a largura de banda associada às imagens pode ser superior à largura de banda associada à própria página. É certo que se os menus se repetirem de forma idêntica em todas as páginas, as imagens ficam em cache, mas mesmo assim desperdiça-se alguma largura de banda ao escrever <IMG SRC="contacto.gif" WIDTH="xx" HEIGHT="yy" ALT="Contacto" BORDER="0"> em vez de "contacto".
 

2. Possibilidade de alterar o tamanho das letras

Creio que a maioria dos web designers profissionais são jovens dotados de boa acuidade visual e monitores de grandes dimensões (com 19" (48cm) ou maiores). Só assim se explica porque desenham páginas com letras tão pequenas, esquecendo-se dos humildes utilizadores que usam televisões ou monitores pequenos e daqueles que têm uma capacidade visual diminuída.
Há dois tipos de razões que levam os designers a usar letras pequenas: a compactação do máximo de palavras num écran (como se usa nos sítios de notícias) e o efeito visual. Está na moda um tipo de web design em que as páginas surgem quase despojadas de texto, com grandes áreas em branco ou com ilustrações, usando apenas uma mão cheia de palavras para aunciar os links; neste contexto, o uso de letras grandes equivaleria a gritar ao utilizador, sobrepondo-se à atmosfera criada pelos outros elementos visuais.
No entanto, muito mais grave do que usar letras pequenas é usar imagens para representar as palavras, porque o tamanho das imagens é fixo enquanto que, na maioria dos browsers, o tamanho das letras pode ser alterado pelo utilizador.
Por razões que me escapam totalmente, uma enorme fracção dos utilizadores desconhece esta possibilidade e continua a queixar-se das letras demasiado miúdas para proporcionarem uma leitura confortável.Talvez se os futuros browsers incluirem os botões de aumento/redução do tipo de letra (fonte) na barra de tarefas (toolbar), as pessoas descubram e tirem partido dessa "novidade".
A possibilidade de aumentar e reduzir o tipo de letra sublinha a desejável preponderância do conteúdo sobre a forma no Web design e recorda umas das principais vantagens da Internet: idealmente, os conteúdos adaptam-se à forma preferida pelo utilizador enquanto nos outros meios de comunicação é o utilizador que se adapta à forma apresentada.
Também é possível apresentar texto de tamanho fixo. Se as style sheets codificarem os elementos em unidades gráficas (p.ex.: a definição P { font-size: 12px; } fixa os parágrafos em 12 pixels de altura), a dimensão das letras não varia com os comandos do browser. Esta codificação deve evitar-se, excepto nos casos em que o rigor da medida seja imprescindível para a compreensão das páginas. Uma forma correcta seria P { font-size: 12pt; } .
 

3. Pesquisa por motores de busca e busca de texto

A actividade principal na Internet é a busca, (cf. a nota Forma e Conteúdo). Como as imagens não são indexadas, a utilização de imagens em cabeçalhos, índices e menus, dificulta ou impede a sua detecção pelos motores de busca. Pode tentar-se minorar este problema recorrendo às META tags, em especial DESCRIPTION e KEYWORDS e desse modo referenciar o conteúdo das páginas. Se o texto contido nas imagens estiver repetido no texto escrito com letras, ele será provavelmente detectado pelos motores de busca.
Frequentemente, a busca é um processo em dois passos: primeiro usa-se um motor de busca para listar as páginas que contêm a expressão (query) indicada e depois usa-se a a busca (search) confinada a uma página para encontrar a expressão dentro dessas páginas. Ora esta facilidade fica também limitada com o uso de imagens substituindo texto.
 

4. As cascading style sheets oferecem um bom controlo tipográfico

No início do HTML, não havia controlo sobre os aspectos tipográficos das páginas: tipo de letra (fonte), tamanho, côr e estilo. As sucessivas versões de HTML foram acrescentando novas tags e novos parâmetros que permitiam essas funcionalidades.
Um novo passo - de gigante - foi dado com as style sheets que permitem separar o conteúdo da forma. O primeiro é guardado na página HTML, incluindo as tags semânticas, enquanto a segunda é guardada num ficheiro de style sheet (normalmente *.css). Em princípio, para apresesentar os mesmos conteúdos em dois ambientes diferentes bastará mudar a style sheet. Na prática nem sempre é assim e a solução mais comum passa por definir uma style sheet básica comum a um sítio completo e depois definir style sheets para cada conjunto de páginas com apresentação igual. Como as páginas a que se aplica a segunda herdam também as características da primeira fala-se de cascata: CSS - cascading style sheets.
Com style sheets é possível controlar quase todos os aspectos da tipografia e da apresentação de textos; as novas versões dos browsers implementam até partes da especificação CSS 2.0, que incluem variações de apresentação de acordo com acções do utilizador: é possível, por exemplo, que um link mude de cor e apareça sublinhado apenas quando o cursor passa sobre ele (teste e demonstração: voltar ao início).
Ainda assim, o número de tipos de letra está limitado àquele que o utilizador tiver instalado no seu browser (o que o autor não pode controlar nem deve inferir) acrescido de um tipo de letra das cinco famílias principais (serif, sans-serif, cursive, fantasy, monospace), embora não o mesmo em todas as plataformas.
 

5. Adaptação a browsers não visuais

Actualmente, a quase totalidade dos utilizadores navega na Internet usando browsers visuais, onde o texto e as imagens se dispõem num écran. Contudo, já há browsers auditivos que permitem ouvir o conteúdo das páginas. Se a classificação dos elementos de uma página visual em menus, conteúdos e legendas é simples, já nos browsers auditivos esta classificação é mais difícil, o que é agravado pelo facto de existirem poucas páginas desenhadas especialmente para browsers auditivos. Mau grado todas estas dificuldades, há deficientes visuais que acolhem estes browsers como uma nova janela aberta para o mundo e se esforçam para tirar o máximo partido deles. Nestes browsers, a "leitura" das imagens depende dos textos indicados em ALT="..." . Também em atenção a estes utilizadores, não se deve substituir texto por imagens, dificultando-lhes ainda mais a interpretação das páginas.
O browser auditivo é mais uma forma de adaptação dos conteúdos aos utilizadores com necessidades especiais.
 

6. Redução do número de ligações ao servidor de HTTP

Quando se visita um sítio na Internet, cada elemento externo chamado por uma página HTML implica a chamada de um novo ficheiro ao servidor HTTP onde todos os ficheiros estão instalados. O uso de pequenas imagens a substituir texto implica um aumento significativo do tráfego no sentido utilizador → servidor. Acresce que o protocolo TCP/IP (o protocolo de comunicação da Internet) envia a informação em pacotes que seguem caminhos diferentes, implicando tempos de "viagem" diversos. Por isso, o carregamento de uma página com um menu de imagens parece um mosaico ou um puzzle que se completa peça a peça. Se se usar texto em vez de imagens o menu surge completo logo que a página base é carregada.
 

7. Indexação

O crescimento dos conteúdos disponíveis na Internet motivou o desenvolvimento de ferramentas de classificação e indexação automática de conteúdos. Sendo o funcionamento semelhante ao dos motores de busca, o resultado é diferente. O que se pretende é criar tábuas de matérias (tables of contents) e índices remissivos que orientem o utilizador na navegação dentro de um determinado sítio. A forma mais conhecida é o mapa do sítio (site map) que lista as páginas de forma hierárquica. Já existem hoje ferramentas que criam automaticamente estas tabelas baseadas nos links entre páginas e na hierarquia de cabeçalhos (headers) dentro de cada página. A utilização de imagens nos cabeçalhos dificultaria também esta função. O texto dentro das imagens não permite ainda fazer copiar-colar (copy-paste) noutro documento.

Vantagens das imagens com texto

1. Possibilidade de efeitos gráficos sofisticados

Mau grado a evolução tipográfica oferecida pelas style sheets, a maioria dos profissionais gráficos continua insatisfeita com as possibilidades tipográficas do HTML e esta é sem dúvida a motivação principal para a substituição do texto por imagens com texto. Efeitos como o da máscara de letras (ver o link do álbum de Alfama, na página de fotografia), as letras sobrepostas a imagens ou com sombras, as frases que seguem um percurso ondulado e muitos outros efeitos que nos habituámos a ver na publicação impressa, continuam a exigir imagens. Serão indispensáveis? Do ponto de vista estritamente funcional talvez não, mas são necessários para enriquecer os conteúdos com páginas visualmente originais e apelativas e são uma janela para a criatividade e inovação dos designers gráficos.
 

2. Coerência da apresentação em vários meios

Nos conteúdos comerciais e publicitários é muito importante manter uma imagem coerente para a comunicação, independentemente do suporte da mensagem. Ora como a edição gráfica é pródiga em efeitos sofisticados e exigentes, é normal que os designers procurem que a comunicação na Internet propague a imagem de marca a que o utilizador se habituou e reconhece como característica daquela marca ou produto. Dadas as limitações tipográficas, a solução é a imagem com texto.
 

3. Fim da restrição dos tipos de letras (fontes) disponíveis

A restrição do número de fontes desagrada aos autores por duas razões: não só não podem enviar novas fontes para o browser do utilizador como também não podem escolher as melhores fontes, de entre aquelas que o utilizador já dispõe.
Se, por qualquer motivo, é provável que uma fonte importante não exista junto do utilizador, a tentação imediata do designer gráfico é criar o texto num programa gráfico, guardá-lo como imagem e apresentá-lo na página desse modo.
Já há soluções para acrescentar novas fontes temporárias a um browser. Infelizmente são diferentes e incompatíveis para os dois principais browsers (Netscape Navigator e MS Internet Explorer), são proprietárias e pagas. Por isso, são muito pouco usadas.
As style sheets permitem criar uma lista de preferências sequencial na escolha de fontes: ao indicar uma lista de fontes diz-se que a primeira é a preferida, se esta estiver indisponível, pretende-se a segunda, depois a terceira, etc. Convém terminar com um dos cinco tipos padrão definidos acima, para limitar as surpresas. Não obstante, as apresentação dos tipos cursive e fantasy varia muito de browser para browser.
 

4. Desenvolvimento de interfaces gráficos complexos

O crescente interesse em interfaces visualmente muito ricos levou ao desenvolvimento de software específico para esta área. Neste contexto, todo o interface é um gráfico com acções, botões e outros efeitos, desenvolvido e testado em formato interno e só no fim é "traduzido" para HTML. Neste processo criativo, é normal que os links associados a palavras sejam tratados da mesma forma que os links gráficos, e que o conjunto seja considerado um enorme mosaico gráfico. A barra de navegação do sítio do LRM (versão de 1999) é um pálido exemplo deste tipo de páginas.

Notas finais

  Pior do que usar imagens para substituir texto em menus e cabeçalhos é substituir blocos de textos e parágrafos completos. Já foi uma prática mais popular, antes do aparecimento do Dynamic HTML. O efeito pretendido era revelar um bloco de texto na sequência de uma acção do utilizador (p. ex.: mover o cursor ou clicar um botão do rato). Hoje usa-se layers para o mesmo fim.

  Na minha página de apresentação de fotografia pretendi obter este efeito e, por razões de retrocompatibilidade, recorri a uma imagem contendo duas linhas de texto. Incoerência? Talvez. Mas em cada página pondero vários critérios contraditórios e neste caso decidi a favor do efeito visual. No entanto, por causa das preocupações mencionadas acima, criei uma segunda página de texto convencional sobre os álbuns fotográficos. Constatei, sem surpresa, que a segunda versão é a mais referida pelos motores de busca e aquela que recebe mais visitas, pois se exibe menos beleza, oferece mais informação.

  Não foi dito especificamente, mas é hoje geralmente aceite que usar imagens incluindo texto sem o texto alternativo ALT="..." é uma prática deplorável. Quem o fizer está a criar problemas adicionais, porventura inultrapassáveis (como no caso dos browsers auditivos) sem quaisquer vantagens justificáveis. Também o uso do ALT="..." para fins diversos de legenda e/ou explicação da imagem deverá ser banido.

Conclusões

  Como em todas as tarefas complexas, projectar e desenvolver sítios para Internet envolve um conjunto de escolhas e ponderação de critérios concorrentes, senão contraditórios. Caberá ao autor e/ou ao seu cliente encontrar o ponto de equilíbrio entre todas as vantagens e inconvenientes de preferir o texto ou as imagens com texto. Normalmente, inclino-me mais para o texto, mas acho perfeitamente natural que outros se inclinem para as imagens com texto.

  O que já não acho natural é que as opções de design se façam ignorando as questões discutidas acima, que decidem o grau de acessibilidade e conforto de utilização, factores críticos de sucesso de um sítio na Internet. Qualquer que seja o objectivo do sítio a criar, haverá decerto concorrentes cumprindo os mesmos objectivos e a fidelidade dos utilizadores jogar-se-á nos factores de qualidade.

  No estado actual da Internet, creio que a utilização de texto deve ser preferida na generalidade dos sítios não comerciais e nos sítios comerciais onde a marca não seja o elemento fidelizador. Devem optar pelas imagens com texto os sítios de vanguarda gráfica (sejam páginas pessoais ou comerciais), aqueles em que o Web design é o objectivo do sítio e os sítios comerciais de marcas muito fortes, onde uma estética mais "pobre" (sóbria) prejudicaria a imagem de marca.

Dezembro 2000