Vamos a seguir por un tema que, probablemente, muchas personas no consideren suficientemente importante.
Y, sin embargo, nosotros creemos que, al menos para algunos, sí que lo es.
Se trata de los caracteres propios de nuestro idioma. Propios del español.
Ya hemos declarado al comienzo del documento, en la etiqueta <html> que nuestro idioma es el español. Y en el <head> nuestro primer elemnto <meta> es el juego de caracteres utf-8.
Con esto conseguimos que nuestra página se vea bien en todos los ordenadores que tengan esos juegos de caracteres en sus sistemas.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8">
Pero ¿qué ocurre en los países que tienen idiomas muy diferentes a los occidentales? ¿Qué ocurre por ejemplo si nuestra página se ve desde China?
Probablemente, muchos pensarán que qué demonios hace un chino leyendo una web que está diseñada por españoles y para un entorno más o menos, geográficamente o lingüisticamente, cercano.
Pero... igual mi web es una web pensada para un comercio internacional con países no occidentales...
O, por poner un ejemplo personal: Administro un sitio web que es muy visitado por estudiantes de español. La gran mayoría de nuestro entorno europeo o americano más cercano. Pero, el español es un idioma estudiado también en países como China. En concreto, es el segundo idioma extranjero estudiado después del inglés. ¿Cómo se verá mi Antología Poética Multimedia en este país?
El navegador Chrome tiene una extensión que se llama Charset. Cargamos la página, y elegimos uno de los charsets.
El chino tradicional, por ejemplo. Este es el resultado:
Para evitar esta situación, además de hacer las declaraciones de idioma y conjunto de caracteres, es necesario sustituir los caracteres especiales por su correspondiente traducción universal. En lenguaje html se les denomina "entidades". La mayoría de las veces es el signo & seguido del carácter y acute; para los acentos y tilde; para la ñ.
De todas formas, aquí debajo he puesto un listado de bastantes caracteres especiales con su traducción a las entidades correspondientes. Puedes hacer scrolling vertical para seguir viendo más:
Entidad | Carácter | Descripción / Ejemplo |
---|---|---|
ñ | ñ | ñ - ñ minúscula |
Ñ | Ñ | Ñ - Ñ mayúscula |
á | á | á - a minúscula con acento |
é | é | é - e minúscula con acento |
í | í | í - i minúscula con acento |
ó | ó | ó - o minúscula con acento |
ú | ú | ú - u minúscula con acento |
Á | Á | Á - A mayúscula con acento |
É | É | É - E mayúscula con acento |
Í | Í | Í - I mayúscula con acento |
Ó | Ó | Ó - O mayúscula con acento |
Ú | Ú | Ú - U mayúscula con acento |
ü | ü | ü - u minúscula con diéresis |
Ü | Ü | Ü - U mayúscula con diéresis |
¿ | ¿ | ¿ - Apertura de interrogación |
¡ | ¡ | ¡ - Apertura de exclamación |
" | " | " - Comillas |
' | ' | ' - Apóstrofo o comilla simple |
º | º | º - Orden masculino / En 2º lugar |
ª | ª | ª - Orden femenino / Ana acabó la 2ª |
° | ° | ° - Grados / La temperatura era de 20°C |
² | ² | ² - Potencia al cuadrado / El piso ocupa 90 m² |
³ | ³ | ³ - Potencia cúbica / En la piscina caben 200 m³ de agua |
½ | ½ | ½ - Medio / ½ k de pimientos |
¼ | ¼ | ¼ - Cuarto / Llegará en un ¼ de hora |
¾ | ¾ | ¾ - Tres cuartos / Póngame ¾ de k de boquerones |
± | ± | ± - Más menos |
™ | ™ | ™ - "Trade Mark" |
© | © | © - Copyright |
® | ® | ® - Marca registrada |
| - Espacio vacío que no se puede romper al final de una línea | |
& | & | & - Para escribir el ampersand y verlo en pantalla |
< | < | < - El comienzo de la etiqueta de un elemento de html |
> | > | > - La segunda parte del símbolo de la etiqueta de html |
€ | € | € - El símbolo del euro |
£ | £ | £ - El símbolo de la libra |
$ | $ | $ - El símbolo del dólar |
Cuando se ha hecho esto, la visualización ya no presenta ningún problema. Es lo que ocurre en el primer documento de este sitio web.
Se ve perfecto desde cualquier "charset".
Puedes comprobarlo cargando la página y abriendo con la extensión de Chrome de los charsets.
La verdad que es un poco latoso el tema. Y siempre parece que nos dejamos alguna eñe o algún acento. Para comprobar que no nos dejamos nada, lo vamos abriendo en Chrome con los charsets de árabe o chino...
Nota: He intentado editar el blog que he puesto de ejemplo cambiando los acentos, eñes y otros caracteres, por sus correspondientes entidades. Pero, Blogger no lo permite. Su editor modifica constantemente mi escritura para cargar su modelo predeterminado. Lo mismo ocurre con otros muchos temas HTML. Por ejemplo, apenas admite unos pocos scripts de JavaScript. Lo que produce un poco de fustración, pero así son las cosas en esta plataforma de blogs, por otro lado excelente y muy sencilla de utilizar.
Para acabar este segundo documento vamos a insertar el vídeo que he creado en Youtube con las primeras ideas del curso: