UTF8 y estandares web matrimonio perfecto para la internacionalización

Primero vamos a definir estos conceptos:

UTF8 es una manera de codificar documentos en Unicode que permite representar todos los caracteres de los distintos alfabetos (latino, árabe, cirilico, chino, …) sin que aparezcan caracteres extraños

Estándares web sirven entre otras cosas para separar completamente el contenido de un sitio web de la presentación (Contenido vs diseño) siguiendo unas recomendaciones dadas por la W3C.

A la hora de crear una aplicación web nos solemos plantear que es lo queremos para hoy pero también tenemos que pensar en las posibilidades que se puedan dar en un futuro. Una de esas posibilidades puede ser añadir nuevos idiomas (Internacionalización).

Si no tenemos previsto una serie de factores desde un primero momento, puede ser una auténtica pesadilla el adaptar un sitio para un idioma como el Árabe, por ejemplo, que se escribe de Derecha a Izquierda.

Este planteamiento me lo hice antes de empezar a desarrollar Nireblog, y el resultado es el siguiente Versión en Español y Versión en Árabe.

Lo primero que hay que hacer es utilizar la codificación UTF-8 para todos los documentos, de esta manera nos evitamos el tener que utilizar una codificación distinta para cada alfabeto (Europeo Ocidental ISO-8859-1, Árabe ISO-8859-6, Chino big5, …), teniendo que duplicar todos nuestros archivos por cada idioma nuevo que añadamos. Con UTF-8 lo único que cambiarán serán las cadenas de texto el resto será igual para todos los idiomas.

Ahora viene la parte más divertida como hacer que una página en Español y otra en Árabe se vean de distinta manera sin tocar los archivos HTML (excepto 3 letras), vamos a ilustralo con 2 imagenes:

Pantallazo de la versión en Árabe

Pantallazo de la versión en Español

La única diferencia entre un docmento y el otro es la siguiente linea:

En Arabe

<html lang="ar" dir="rtl” xmlns=’http://www.w3.org/1999/xhtml&#8217; xml:lang=”ar”>

Ponemos dir=”rtl” Right to Left

En Español

<html lang="es" dir="ltr” xmlns=’http://www.w3.org/1999/xhtml&#8217; xml:lang=”es”>

Ponemos dir=”ltr” Left to Right

Para cambiar el resto se ha modificado el archivo CSS y muy poco también, algún float, text-align y font-size.

Imagínense que lo hubieramos diseñado a la vieja usanza, utilizando tablas para posicionar los ditintos elementos de la página, seguramente tendríamos que tener un archivo para los idiomas que se escribe de Derecha a Izquierda y otro para los que se escriben de Izquierda a Derecha.

Por supuesto la diferencia entre uno y otro sitio serán las cadenas de texto que estarán en un fichero distinto según el idioma.

La idea saqué de Minid

Esta entrada fue publicada en Autobombo, Internet, Trabajos, Trucos. Guarda el enlace permanente.

3 respuestas a UTF8 y estandares web matrimonio perfecto para la internacionalización

  1. fajro dijo:

    ¿Piensan agregar herramientas para hacer blogs multilingues? (blogs con posts en diferentes idiomas o blogs paralelos de distintos idiomas)

  2. Dominero dijo:

    lo que deberias hacer es comprar el dominio internacional o idn en japonés, árabe o el idioma que te gusta, y redirijirlo si te gusta o si puedes bueno tambien desarrollar contenido. creo te dará más facilidades de SEO

    Utf-8 es ciertamente el mejor encoding a la hora de trabajar en sitios multilingue. recuerda que igual puedes comprar dominios como español.com diseñoweb.com que se basan en lo mismo unicode y bueno versión punycode.

    suerte!

  3. ignazio dijo:

    Muy buena la previsión del UTF8.

    By the way, English translation is completed.

    Y otra cosa, algo pasa con tu feed, no me lo pilla ni el Bloglines ni el GoogleReader.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s