domingo, 30 de outubro de 2016

Problemas e soluções ao configurar o tipo de caracteres de uma página WEB

O atributo "charset" - usado na tag "meta" do HTML - é usado para informar o navegador o formato dos caracteres que a página em questão está a usar. Se você já desenvolveu algum site, provavelmente em algum momento já deve ter se deparado com caracteres estranhos na tela, que não correspondem, na sua totalidade, ao texto que era suposto ser apresentado. Isso pode ser causado por uma configuração errada da página, em relação ao tipo de caracteres contidos na mesma, ou devido à configuração usada pela aplicação que está fazendo a leitura da mesma.Vamos falar sobre estes problemas e dar dicas de como resolvê-los.

Decidimos criar este artigo após nos depararmos com um erro de caracteres, logo após a criação da página inicial do site da Anima Station. Após a criação da página, e antes de corrigirmos o erro, veja como a mesma aparecia no motor de pesquisa Google:




Como se pode ver pela imagem, a palavra "informações" aparece com caracteres estranhos. Isso ocorreu porque não especificamos explicitamente o tipo de caracteres associados à página. Logo, o programa que usamos para criar a mesma, neste caso usamos o Dreamweaver - utilizou o tipo de caracteres predefinido (utf-8), sendo então a página, internamente, configurada para este formato.

No entanto, devido á falta de informação explicita do tipo de caracteres usado na página, o sistema de indexação de páginas do Google indexou a página com o formato "iso-8859-15". Uma vez que houve um conflito entre o formato interno do arquivo e o formato interpretado pelo motor de pesquisa da Google, o texto então é apresentado de maneira incorreta, como mostra a imagem acima.

Testes e resolução de problemas

Vamos fazer um teste para ver como o navegador se comporta ao omitirmos o sistema de caracteres presente na página. Neste caso, vamos utilizar o navegador Chrome, porém, efetuamos os mesmos testes no Firefox e obtivemos os mesmos resultados. Por isso, vamos apresentar apenas os resultados obtidos no Chrome.

Teste 1:

Primeiramente, criamos uma página simples em HTML e configuramos internamente - através das propriedades do documento - o seu tipo de caracteres. Neste caso escolhemos o formato de caracteres utf-8, modificando as propriedades do documento no Dreamweaver.

<html>
<head></head>
<body>Anima Station. Tecnologia, entretenimento informação.</body>
</html>

Resultado:

Anima Station. Tecnologia, entretenimento e informação.

Neste teste nós desabilitamos a opção do Chrome que detecta automaticamente o sistema de caracteres da página, o que faz com que o navegador possa utilizar um sistema de caracteres diferente do sistema de caracteres da página. Neste caso, o Chrome interpreta a página como se estivesse configurada para "Europeu Ocidental (windows-1252)". Visto que a página está configurada para utf-8, ocorre um erro nos caracteres, tal como ocorreu no motor de pesquisa do Google.

Teste 2:

Agora, habilitamos o sistema de detecção automática do tipo de caracteres da página no Chrome e mantivemos a configuração de caracteres da página como utf-8. Neste teste, utilizaremos o mesmo código utilizado utilizado no teste 1.

<html>
<head></head>
<body>Anima Station. Tecnologia, entretenimento informação.</body>
</html>

Resultado:

Anima Station. Tecnologia, entretenimento e informação.

Com a detecção automática, mesmo que não indicamos explicitamente o tipo de caracteres no código da página, o navegador identifica e interpreta corretamente o tipo de caracteres usados ao aceder às propriedades do documento.

Conclusão:

O problema de caracteres pode não ser causado devido a uma configuração do documento, mas sim, devido às configurações da aplicação que irá executar a página, neste caso o navegador Chrome. Sendo assim, é importante verificarmos se o navegador possui esta opção de detecção automática e se esta está habilitada. O Firefox, por exemplo, não vem com esta opção habilitada. Caso a detecção automática não esteja habilitada, o navegador poderá associar o documento a um tipo de caracteres diferente daquele na qual está foi configurado, gerando assim um erro nos caracteres. Por isso, é muito importante especificar explicitamente o tipo de caracteres da página, para que os navegadores possam apresentar corretamente o documento.

Isso pode ser feito da seguinte forma, com base no HTML5 e seguindo as normas da W3C:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>Anima Station. Tecnologia, entretenimento informaçãoo.</body>
</html>

Nota: Também poderíamos ter usado a função header do php para a configuração do tipo de caracteres do documento. Vamos falar sobre esta função numa outra oportunidade.