¿Quién no ha visitado alguna vez un sitio web con signos extraños reemplazando las eñes, las letras con acento u otros caracteres especiales? Como desarrolladores, ¿cuántas veces hemos encontrado que al subir contenido de texto a nuestros sitios aparecen esos caracteres raros? Si uno no los puso allí, ¿por qué aparecen?
La mayor dificultad para resolver los problemas de encoding es que no hay una solución universal y única. Se debe comprender el mecanismo del codificación de textos en las computadoras y el funcionamiento de varios elementos de la web para poder diagnosticar el problema y llegar a una solución. Es un tema muy complejo, pero trataremos de desglosarlo para conocerlo un poco más.
El encoding («codificación» en inglés) es el proceso a través del cual se transforma información textual humana (caracteres alfabéticos y no alfabéticos) en un conjunto más reducido, para ser almacenado o transmitido. Podemos nombrar el Código Morse como un sencillo ejemplo que clarificará el concepto de encoding: cada letra tiene su correspondencia en forma de sonidos, y todas las letras se codifican con combinaciones de dos signos, el punto y la raya. El conjunto de información se transforma, se reescribe, con un código de solo dos signos, lo que hace posible una transmisión óptima en canales donde, por ejemplo, sería imposible la transmisión de la voz humana.
En el mundo de las computadoras el encoding asocia nuestros signos alfabéticos y no alfabéticos con ciertos números. Todos los signos que utilizamos al componer un texto en la computadora deben traducirse a estos números si queremos almacenarlos. «Almacenar» en una computadora es una operación fundamental, porque se almacena cuando algo debe mostrarse en pantalla, cuando queremos guardar un archivo y también almacenamos cuando queremos transmitir algo a través de una red. Por lo tanto, para la computadora en realidad todos nuestros signos serán números y nada más que números. Recordemos que la computadora no es más que una gran calculadora, que solo «entiende» dos signos: el uno y el cero.
Entonces el problema surge cuando una computadora tiene un conjunto de números que sabe representan a un texto y necesita mostrarlos. En ese momento acude a una tabla de encoding para reinterpretar de qué caracteres se trataban antes de convertirlos en números.
Veamos un primer ejemplo de tabla de encoding: el extendido ISO-8859-1 (más conocido como Latin1, y prácticamente coincidente con Windows-1252). Este tipo de encoding utiliza números de 8 bits para representar todos los signos. Es decir que todos los signos se transforman en un número entre el 0 y el 255 a partir de una especie de tabla predefinida. En este encoding nuestra letra eñe se transforma en el número 241 (que en lenguaje de computadora es 11110001; nosotros lo representamos en decimal 241 para hacerlo más manejable).
Otro de los encodings más utilizados, fuertemente recomendado y que se ha convertido en un estándar, es el UTF-8. Este encoding es distinto del anterior ya que no tiene una cantidad fija de bits para representar los caracteres. Utiliza un sistema de largo variable para lograr mayor flexibilidad. UTF-8 puede representar todos los caracteres de Unicode, un estándar creado a fines de los ochenta para codificar todos los caracteres de todas las lenguas escritas del mundo: un total de más de 100 mil signos. En UTF-8 la eñe se representa con el número hexadecimal C3B1.1
Cuando un autor crea los contenidos de su blog está ingresando texto en algún formulario desde su computadora. Ese texto viaja hacia el servidor para ser almacenado en la base de datos. Luego, cuando alguien quiere acceder al artículo, el texto se recupera de la base de datos, se coloca en la página y la página se envía de vuelta a otra computadora.
Este relato parece sencillo, pero debemos identificar el rol de los encodings en cada etapa:
Los problemas ocurren cuando alguno de estos encodings no coincide con el resto, o cuando alguno de estos sistemas cree que está tratando con textos en cierto encoding cuando realmente se trata de otro. Estos errores son los que llevan a los «caracteres extraños» en nuestras páginas.
Utilizando nuestro editor favorito crearemos una simple página web que contenga un texto con eñe. El editor de texto también trabaja con un determinado encoding, por lo que indicaré que deseo trabajar en UTF-8.
Almacenaremos esta página web de prueba y la abriremos en un navegador. El navegador reconocerá que el archivo está en UTF-8 y mostrará correctamente la eñe.
Si fuerzo al navegador para que interprete este archivo según otro encoding, entonces el resultado es el de nuestras pesadillas:
Si observamos detenidamente este caso, veremos que este comportamiento tiene absoluto sentido para la computadora. En ISO-8859-1, el byte «C3» se corresponde con el signo «Ã» y el byte «B1» con el signo «±». Recordemos que «C3B1» era la representación de eñe en UTF-8. Lo que ocurre es que se están decodificando los números con una tabla distinta a la que se utilizó para codificarlos. Facil, ¿verdad?
También se puede probar el caso inverso: crear una página con una eñe utilizando el editor en modo ISO-8859-1 y abrirla en un navegador web indicando, erróneamente, que se trata de un archivo codificado en UTF-8.
Además podemos confirmar que el editor crea documentos en distintos encodings porque el archivo en UTF-8 ocupa 67 bytes en disco, mientras que los mismos caracteres en ISO-8859-1 ocupan 66 bytes. En este caso de prueba la diferencia la hace la eñe. Esto es así porque los restantes caracteres presentes en el documento se representan con un solo byte tanto en ISO como en UTF.
Es importante notar que el navegador web no pregunta al usuario qué encoding desea utilizar. Deberá deducir el encoding a partir de la información que la página provea y, en el peor de los casos, deberá adivinar de qué encoding se trata. Las formas de indicar cuál es el encoding de un documento son las siguientes:
Si tenemos en cuenta estas posibilidades y los distintos sistemas que listamos más arriba, vemos claramente que son muchas cosas las que pueden salir mal. La respuesta rápida ante un problema de visualización de una página web es que alguna etapa está tratando los textos con un encoding erroneo. Resolverlo es más dificil que enunciarlo, porque hay que investigar dónde está el problema. Para resumir podemos decir que la mayor parte de las veces lo que ocurre es:
Los encodings son una característica fundamental de las computadoras. Desde el inicio de la informática los ingenieros debieron representar con números nuestros signos de escritura. Los desarrolladores y diseñadores web serán interpelados por estos conceptos, ya que el futuro de Internet es decididamente multilenguaje, multicultural y multiplataforma.
Publicado el 15/08/2012
Anselmo, si entiendo bien, tu deseo es no usar anglicismos. Me parece que es más perjudicial traducir en estos casos, porque luego los programas y los manuales, los tutoriales, toda la información que pulula va a decir palabras como «web» «encoding» «hash code» «tag»... No creo que un botánico británico patalee por usar los nombres en latín de las clasificaciones, es parte del lenguaje que se utiliza... (el foro no me deja responder directamente a anselmo, no tengo forma de guardar, mi navegador es un chrome corriendo en mac)
Sergio, gracias por advertir del error de programación. Ya está corregido. Ya se puede responder a todos los comentarios.
Muy buena información para tomar en cuenta al crear nuestros sitios y asi crear una mejor experiencia a los usuarios y nuestros clientes
¿Alguien me puede comunicar dónde informarme de los aportes de nos,los INDOLATINOAMERICANOS,que son incorporados en Internet al proceso del «multilenguaje,multicultura y multiplataforma»?.Solo aparecen palabras ,que representan ideas del mundo occidental y cristiano. Ya expuse mi parecer ,por otros compartidos,de traducir encoding por codificación en TODO. Aún añoramos nuestros orígenes europeos.¿Qué opina de los Argentinos?«Todavía se consideran italianos» Menchu Quesada
Buen artículo, muy bien explicado.
Dicho esto, aprovecho para ver si me ayudan: tengo un problema que no es exactamente este, pero es similar.
Trabajo con Mac. Hace unos meses me cansé de la lentitud de Safari y de Firefox, y me pasé a Chrome, que les dá mil vueltas (en velocidad y otras cosas). Pero desde ese momento empecé a tener graves problemas de sustitución de fuentes, al punto de que muchas páginas me salen en caracteres extrañísimos. He visitado esas páginas con otros navegadores y sin problemas. ¿Alguna idea? Desde ya, muchas gracias.
Coincido con Gonzalo Frexas, aunque el artículo en si no deja de ser interesante, ya que muchas veces tuve ese mismo problema y después de investigar mucho, aprendí lo que era y como solucionarlo, muchos años atras. Sin embargo, sigue siendo útil para muchos desarrolladores noveles, que al ver que todo está y se ve bien desde su computador, creen que es igual en todos.
Buen artículo! y para tener en cuenta, el tema se amplía mucho más cuando se programa en PHP.
Interesante artículo. Pero sería bueno saber si existe una manera más automática de que esto no suceda. Tal vez con una configuración en nuestros navegadores.
Saludos
Es irónico, pero FOROALFA tiene problemas de encoding. Los avisos de nuevos artículos que llegan a mi correo, aparecen con signos extraños. Gracias por aterrizar un lenguaje complicado.
Eso puede ser porque tu correo tenga el problema. Si tu correo lee los mensajes en modo no automático y forzado a hacerlo en iso o utf siendo el envío distinto, obtendrás errores de decodificación.
En cuanto le puse «enviar» a mi opinion, me di cuenta que tambien mi equipo o servidor podría ser la razón, gracias por opinar Fernando
Más que foroalfa es tutoalfa. Lo siento, inadecuado artículo para lo que estoy acostumbrado.
Lamentablemente en el caso del encoding es como en las tablas de multiplicar, o las sabes o no las sabes, no hay intermedio ni tampoco explicación fácil. O más fácil, el artículo está súper claro.
IMPORTANTE: Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web. En cambio, sugerimos y valoramos la reproducción parcial, incluyendo además del nombre del autor, el título y la fuente (FOROALFA), un enlace a esta página (http://foroalfa.org/articulos/el-misterioso-mundo-del-encoding) en un lugar claro y visible, que invite a completar la lectura.
Adobe Flash Player 11 y AIR 3 permiten por primera vez trabajar con escenarios en tres dimensiones. FarmVille 2 de Zynga es el primero en utilizar esta tecnología. La transformación ha comenzado.
Es posible producir, en el mismo proceso, maquetas y prototipos en 3D con todas sus superficies perfectamente impresas.
Muchos diseñadores agregan la coletilla UX/UI a sus perfiles en twitter o linkedin, pero ¿se sabe bien qué es lo que implica ser un diseñador UX/UI?
Cuánto tiene que ver el diseño interior de una casa con lo que siente el que la habita. Qué agrega la intervención profesional en un ámbito donde se expresa la intimidad personal.
La empresa familiar en su concepción es, en muchos casos, un cúmulo de expectativas de alto sentido emocional. Las esperanzas de su éxito son altas, falta darle forma.
Cómo darse cuenta cuando a uno le toca diseñar un producto que es un verdadero «bodrio».
Alguna vez debimos tropezar y caer para aprender a caminar. El mundo animal es claro y cruel: si no te pones de pié al nacer, no estás apto para ser de la especie. Tu, ¿estás apto?
¿Quieres que tu cliente te respete? Como mínimo debes presentarle tu trabajo en forma profesional.
¿Cuáles son los elementos que componen a la marca?
La provocación y la vulgaridad: el Mr. Hide de las reflexiones sobre el diseño.
Es importante replantearse los objetivos y metas del diseño a futuro con la ayuda de la experiencia del pasado y la comprensión del panorama actual.
El diseñador gráfico debe aprender a adelantarse a las necesidades de sus clientes, guiándolos por el buen camino.
La pausa para el café durante los eventos académicos internacionales: espacio para vincular diálogos y proyectos de vida entre diseñadores y diseñadoras.
