4.3 HTML: juego de caracteres

4.3 HTML: juego de caracteres

El juego de caracteres, también llamado codificación de caracteres, es la pesadilla de la mayoría de los informáticos porque es una fuente de problemas inagotable.

En el siguiente vídeo se muestran ejemplos reales de problemas con el juego de caracteres y se proporcionan los consejos más importantes para trabajar con el juego de caracteres:

• Utiliza siempre el mismo juego de caracteres.
• Utiliza UTF-8 sin BOM.
• Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
• Cómo se indica el juego de caracteres en HTML (etiqueta meta).
• Diferencias entre HTML4, XHTML1 y HTML5.

¿Alguna vez el nombre de un fichero o su contenido no lo has podido ver bien al moverlo de un sistema operativo a otro? ¿Alguna vez has instalado un programa y no se visualizaban correctamente algunos caracteres? ¿Alguna vez te han dado un justificante, un extracto bancario o un recibo en el que no se mostraban correctamente algunos caracteres? ¿Alguna vez has entrado en una página web y te aparecían caracteres chinos cuando la página no estaba en chino?

Si alguna vez has sufrido un problema parecido y te has sentido solo porque pensabas que eras el único al que le pasaba, no te preocupes, porque no estabas solo, mucha gente como tú, sufre estos problemas todos los días. Sin duda alguna, en el campo de la informática, el juego de caracteres es de las cosas más simples que más problemas ocasiona. Mapa de caracteres, ASCII, ISO-8859-1, Latin-1, ANSI, UTF-8, UTF-8 sin BOM, Unicode, Cotejamiento. ¡Menudo lío! ¿Qué significa todo esa sopa de términos?

A muchos experimentados informáticos, las palabras “juego de caracteres” les produce horribles pesadillas. Para que a ti tampoco te produjese pesadillas y entendieses correctamente qué es el juego de caracteres, tendría que empezar por el principio, por la primera descripción conocida de un sistema de numeración binario que se debe a un matemático hindú del siglo tercero antes de nuestra era. Después te tendría que explicar que el sistema binario moderno fue documentado en su totalidad por el gran matemático Leibniz, en el siglo XVII. Leibniz utilizó el 0 y el 1, al igual que el sistema de numeración binario actual. Y después te tendría que contar muchas otras cosas más. Pero este no es el momento, ya te las contaré en otro vídeo. En este vídeo sólo te voy a dar la solución fácil.

La regla más importante es muy fácil de recordar: utiliza siempre el mismo juego de caracteres en todo lo que hagas. ¿Qué significa esto en una aplicación web? Significa que todos los ficheros que compongan tu sitio web, deben estar almacenados en el mismo juego de caracteres: tus ficheros HTML, CSS, JavaScript, de texto, etc.

Pero también tus páginas PHP. Y cualquier fichero de texto que leas desde PHP. Y también los datos que estén almacenados en tu base de datos. Y también la conexión que establezcas con tu base de datos. Y si invocas a un servicio web que te devuelve datos en formato XML o JSON, pues lo mismo, los datos que te devuelva también tienen que estar en el mismo juego de caracteres.

Sencillo, ¿verdad? Pues no es tan sencillo, porque esto muchas veces es imposible de lograr, no porque no se pueda, sino porque no depende de nosotros. Lo normal es que en un escenario real nos encontremos con algo parecido a esto, un escenario en el que NO puedes utilizar el mismo juego de caracteres en todos los elementos de tu sistema. Y normalmente, el problema suele convertir en algo muy grave,  con solución, pero muy costosa.

En ese momento es cuando te toca llamar al informático para que te solucione el problema, pero no a un informático que se dedica a instalar el Windows o a cambiar tarjetas gráficas, no, a un informático de verdad. ¿Qué juego de caracteres debo usar? Yo te recomiendo, UTF-8 sin BOM, es la solución a todos los problemas, y te permite mezclar en un mismo documento textos en cualquier idioma, es decir, te permite mezclar caracteres de  cualquier alfabeto, pero absolutamente sin ningún problema.

Si no puedes utilizar UTF-8 sin BOM por alguna razón, entonces te recomiendo ISO-8859-1, también llamado Latin1. Después de UTF-8, es el mejor juego de caracteres para los idiomas de Europa occidental, incluido el español. Pero si necesitas escribir el símbolo del euro €, entonces debes utilizar ISO-8859-15, también llamado Latin9.

Latin1 y Latin9 se diferencian únicamente en 8 caracteres que han cambiado, y el único realmente importante para el español es la sustitución de un carácter que seguramente nunca has usado por el símbolo del euro.

¿Cómo indico el juego de caracteres en HTML? Se realiza mediante una etiqueta <meta>, que se escribe en el <head> de la página web, pero depende de la versión de HTML que estés utilizando. Si estás utilizando HTML4, debes utilizar esta sintaxis.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Si estás utilizando XHTML 1, debes utilizar alguna de estas dos sintaxis.

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>

Además, si empleas un juego de caracteres diferente a UTF-8, también tendrás que indicar el juego de caracteres mediante la declaración de documento XML al principio de la página web.
<?xml version="1.0" encoding="ISO-8859-1"?>

Y por fin llegamos a HTML5. ¿Cómo será en HTML5? ¿Más fácil? ¿Más complicado? Bueno, en HTML5 se ha intentado hacer el lenguaje HTML más sencillo, así que han simplificado la forma de indicar el juego de caracteres y ahora es algo tan sencillo como esto o esto.
<meta charset="utf-8">
<meta charset="utf-8"/>

Bueno, después de este vídeo no espero que ya no veas el juego de caracteres como un lío, en realidad no te he explicado las razones de que sea un lío, pero sí que te he dado dos consejos:

• Utiliza siempre el mismo juego de caracteres en todo lo que hagas.
• Y si puedes, utiliza el juego de caracteres UTF-8 sin BOM.

Actividad

1. En cuanto al juego de caracteres, lo más importante es...

a) Utilizar siempre UTF-8 con BOM.
b) Utilizar juegos distintos en cada fichero, para que el servidor no los confunda.
c) No utilizar UTF-8, pues la mayoría de servidores no lo aceptan.
d) Ser consistente en todos tus ficheros.

¡Correcto! Es la regla de oro para evitar problemas en un desarrollo web.

2. ¿Qué es el BOM?

a) Un caracter Unicode que indica la ordenación de los bytes.
b) Un caracter Unicode que indica si se admite el uso de caracteres especiales como las letras acentuadas.
c) Un caracter Unicode que indica la extensión del fichero.
d) Un caracter Unicode equivalente a la letra "e" mayuscula acentuada (É).¡Correcto! Byte Order Mark (BOM) es un carácter que indica la ordenación de los bytes en un flujo de caracteres Unicode.