El misterioso mundo del encoding

La desesperación que surge al ver nuestras páginas web con símbolos extraños se potencia al desconocer las causas. ¿Cómo arreglarlas?

Mauro Gullino Buenos Aires
Followers:
29
Comments:
17
Votes:
53
Compartir:

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

Qué es el encoding

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.

Dos encodings famosos

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:

  • el navegador del autor trabaja con cierto encoding, por lo que al ingresar texto en un formulario, ese texto se convertirá en números de acuerdo a ese encoding.
  • el lenguaje de programación (por ejemplo, PHP) que «vive» en el servidor y recibe el texto que el autor creó, también trabaja con cierto encoding y trata a los textos según ese encoding.
  • la base de datos que almacena y recupera el texto lo hace con cierto encoding.
  • la página web que se envía de vuelta al lector también tiene su propio encoding.

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.

El ejemplo de la eñe

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.


El editor de texto Notepad++ y su menú de selección de encoding. «ANSI» se corresponde con ISO.

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.


Encoding UTF-8 correctamente identificado por Mozilla Firefox.

Si fuerzo al navegador para que interprete este archivo según otro encoding, entonces el resultado es el de nuestras pesadillas:


Un texto UTF siendo interpretado con el encoding erroneo, ISO.

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.


Caso inverso: un archivo ISO decodificado con UTF. Aparece el signo de «caracter desconocido» definido en UTF porque la secuencia de números encontrados no es válida en este encoding.

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.

El navegador y los encodings

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:

  • utilizar una etiqueta meta con los atributos «http-equiv» o «charset» en la sección «head» del documento HTML.
  • configurar nuestro servidor HTTP (por ejemplo, Apache) para que sirva los documentos con la cabecera Content-Type adecuada (esta es una configuración del hosting, y puede no ser accesible para los desarrolladores).
  • en documentos XHTML se puede utilizar el atributo «encoding» de la etiqueta xml.

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:

  • El navegador interpreta erróneamente el encoding del documento. Lo más probable es que alguna indicación (etiqueta meta, cabeceras HTTP, etiqueta xml) sea incorrecta. Solución: corregir las indicaciones.
  • El navegador no cuenta con la información de qué encoding se trata y adivina, haciéndolo incorrectamente. Solución: agregar las indicaciones.
  • El contenido se está almacenando en una base de datos con un encoding que no coincide con el de la página. Cuando el documento llega al navegador es interpretado con un encoding que, en la parte donde ese contenido aparezca, no será el correcto. Solución: corregir el almacenamiento en la base de datos.

Conclusión

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.

Followers:
29
Comments:
17
Votes:
53
Compartir:

17 Comments

Comment
  1. El modo de cálculo sería muy extenso de explicar, y probablemente poco útil a nuestros fines. Puede encontrarse detallado aquí.

 

 

This article does not express the opinion of the editors and managers of FOROALFA, who assume no responsibility for its authorship and nature. To republish, except as specifically indicated, please request permission to author. Given the gratuity of this site and the hyper textual condition of the Web, we will be grateful if you avoid reproducing this article on other websites. Published on 15/08/2012.

Mauro Gullino

More articles by Mauro Gullino in Spanish

Idioma:
ES
Title:

¿Cuál es el mejor formato de imagen?

Synopsis:

No los distinguen solo sus extensiones: JPG, GIF y PNG. Sabemos que están ahí pero, ¿cuándo utilizar cada uno de ellos?

Share:
Idioma:
ES
Title:

Aprender a programar

Synopsis:

Dos enfoques que permiten pensar la enseñanza de la programación. Cuál es mejor para cada perfil y su relación con los profesionales del diseño.

Share:

You may be interested

Joaquín Eduardo Sánchez Mercado
Idioma:
ES
Author:

Joaquín Eduardo Sánchez Mercado

Title:

Software libre para diseñar

Share:
Interactions:
Votes:
222
Comments:
192
Followers:
516
Angel Sánchez
Idioma:
ES
Author:

Angel Sánchez

Title:

Diseñar la interfaz de usuario antes de comenzar con el código

Share:
Interactions:
Votes:
63
Comments:
12
Followers:
138
Ernesto Antonio Santos León
Idioma:
ES
Author:

Ernesto Antonio Santos León

Title:

Diseñar videojuegos

Share:
Interactions:
Votes:
24
Comments:
7
Followers:
27
Emmanuel Pravia
Idioma:
ES
Author:

Emmanuel Pravia

Title:

El diseño web es artesanal

Share:
Interactions:
Votes:
126
Comments:
96
Followers:
39
Anita Chalu
Idioma:
PT
Author:

Anita Chalu

Title:

O Designer no ambiente VUCA

Translations:
Share:
Interactions:
Votes:
4
Followers:
50
Fernando Rapa Carballo
Idioma:
ES
Author:

Fernando Rapa Carballo

Title:

Leonardo da Vinci usaba Mac

Share:
Interactions:
Votes:
70
Comments:
55
Followers:
7
My opinion:

Login with your account to comment on this article. If you do not have it, create your free account now.

0
Marcos Carro
Oct 2014

Enhorabuena por este fantástico artículo

0
Reply
0
Julio Ruiz
Aug 2012

Excelente articulo fácil de comprender

0
Reply
0
Sergio Ariel Minutoli
Aug 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)

0
555
FOROALFA
Aug 2012

Sergio, gracias por advertir del error de programación. Ya está corregido. Ya se puede responder a todos los comentarios.

0
Reply
1
Cesar Romero
Aug 2012

Muy buena información para tomar en cuenta al crear nuestros sitios y asi crear una mejor experiencia a los usuarios y nuestros clientes

0
Reply
2
Anselmo Jose Vezzosi
Aug 2012

¿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

0
Reply
0
Marcelo Bordas
Aug 2012

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.

0
Reply
5
Alfredo Texis Michicol
Aug 2012

EXCELENTE artículo, gracias por hacerlo simple!

0
Reply
12
Diego Ordoñez
Aug 2012

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.

0
Reply
0
Manuel Pascual
Aug 2012

Buen artículo! y para tener en cuenta, el tema se amplía mucho más cuando se programa en PHP.

0
Reply
2
Rafael Ayesa
Aug 2012

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

0
Reply
0
José Morales
Aug 2012

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.

0
0
Fernando Muñoz
Aug 2012

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.

0
0
José Morales
Aug 2012

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

0
Reply
0
Juan Heraldo
Aug 2012

EXCELENTE artículo, gracias por hacerlo simple!

0
Reply
1
Gonza Frexas
Aug 2012

Más que foroalfa es tutoalfa. Lo siento, inadecuado artículo para lo que estoy acostumbrado.

1
0
Fernando Muñoz
Aug 2012

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.

0
Reply

Upcoming online courses

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 weeks
6 Agosto

Branding Corporativo

Branding Corporativo

Cómo se planifica, construye y gestiona la marca de empresas e instituciones

4 weeks
17 Septiembre

Estrategia de Marca

Estrategia de Marca

15 claves para programar el diseño de símbolos y logotipos de alto rendimiento

4 weeks
29 Octubre

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

4 weeks
28 Enero 2019

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 weeks
22 Junio 2019