Blogia
Pensando

Juego de caracteres

Juego de caracteres ¿Alguna vez les pasó que abrieron una página web y aparecían algunos caracteres raros? Dichos caracteres suelen ser apóstrofes, acentos, eñes, y similares o cuando la página está escrita en un alfabeto distinto.

Por lo que sé, el problema es por culpa de una falla de comunicación entre el explorador y la página. Cuando uno hace una página web, ésta se compone de un montón de caracteres que el explorador interpreta. Sin embargo, los caracteres se pueden pensar como un número que indica la posición en un "alfabeto" (que llamaremos juego - o mapa - de caracteres) y el explorador debe "adivinar" de qué mapa de caracteres se trata si no está especificado.

El mapa más utilizado y conocido (a mi entender) es el ASCII. Sin embargo éste utiliza sólo 7 bits y las computadoras usan, por lo general 8 bits para cada palabra sobrando más de un centenar de "lugares" para poner caracteres especiales. Mucha gente se dio cuenta de ésto y rellenó los espacios restantes con lo que más le convino. Nacieron diferentes mapas y el más utilizado (especialmente por aquellos que nacimos con DOS) es el ANSI en el que 130 era "é", 160 "á" y así sucesivamente.

Pero el tiempo pasó y se intentó "unificar" lo más posible dichos mapas de caracteres dando lugar a las "code pages". Pero con dicho sistema no podíamos tener - fácilmente - dos lenguajes en la misma PC (Griego y Hebreo por ejemplo). Así nacieron las codificaciones: Windows-1252, ISO-8859-1, UTF entre otros. No me voy a poner muy técnico, si quieren experimentar un poco con eso, intenten cambiar la codificación de su explorador (en Firefox: View --> Character Coding).

¿Por qué me quejo? Porque siempre se dijo que hay que tratar al usuario como idiota, servirle todo en bandeja, y estoy seguro que muchos dejan de visitar páginas porque no se ven bien. Por otro lado, a mí me molesta tener que cambiar dicho parámetro - adivinando - cada vez que se ve mal. Es por eso que, al principio de cada página sería conveniente agregar un meta-tag con lo siguiente (cambiando la variable charset según corresponda):
http-equiv="Content-Type" content="text/html; charset=utf-8"
Para quienes quieran más información al respecto, visiten éste excelente artículo - en inglés - de Joel Spolsky.

Update
Vía 456 Berea Street encuentro una guía rápida de UTF-8 - en inglés - para quienes les interese.

2 comentarios

Matías -

Creo que es mejor el comentario que el post en sí. Yo sólo escribí lo poco que entendía (casi todo gracias al artículo de Splosky citado) pero se nota cuando hablan los que saben.

En cuanto a tu pregunta: uso Bloglines (www.bloglines.com) para leer todos los feeds. Y no me había dado cuenta que sólo ahí se ven "mal", cuando entro a tu página se ven bien. Debe ser que los RSS no tienen esos encabezados... ¿o si los tienen pero no son interpretados?

Rodrigo -

Excelente post Mati ! ! 2 cosas para agregar:

1. Mozilla FireFox no es un explorador, es un navegador. Explorador hay uno solo, y es IE.

2. El meta tag que pones ahi es totalmente correcto, y tenes razon, todas las paginas lo tendrian que tener, ya que es un paso mas para validar, el W3C Validator te lo pide SI o SI para saber en que juego de caracteres esta encodeada la pagina, asi despues valida el source correctamente. De ahi que validar tenga sus ventajas ! :) Para ser mas puristas, y ya que estamos, tambien seria bueno validar (si tenes codigo XHTML) sirviendo como text/xhtml (o algo asi) ... aunque no todos los servers (hosting) puedan servirlo. Es solo un dato, de como se tendrian que hacer las cosas bien, aunque la mayoria no lo hace, en un tiempo la gente de www.interacciones.com.ar lo estaba haciendo.

Veo que usaste mi blog como muestra ... yo tengo el meta tag puesto, a mi me anda bien (FF .9), pero en Feedemon se lee mal, porque no reemplazé los acentos con sus correspondientes &aacutes;. Esto lo estaré corriendo durante el transcurso de la semana. Una pregunta, vos ves mal mi blog desde tu FF o desde algun lector de Feeds ? (FeedDemon, por ejemplo). Me interesaria tu opinion ... gracias !

Saludos !