Plataforma multi-idioma
Os voy a hablar de cómo hemos implementado en www.sortea2.com la plataforma multi-idioma, es un sistema bien simple, pero totalmente funcional.
Lo primero que debemos tener en cuenta es las cosas que necesitamos:
- Detectar el idioma del usuario para mostrarle el idioma que mejor le convenga.
- Tener los textos escritos en todos los idiomas que necesites utilizar.
- Darle la opción al usuario de que pueda cambiar de idioma en el momento en que quiera.
Detectar idioma del usuario
Para detectar el idioma del usuario, en www.sortea2.com decidimos detectar el idioma del navegador, porque era una de las maneras más simples y útiles. Para ello, con utilizar simplemente la siguiente variable de servidor ya podemos obtener el idioma del navegador.
El problema es que habitualmente, en casi todos los navegadores, lo que se nos devuelve por esa variable de servidor es el idioma y su derivación, algo del tipo: «es-es», a nosotros lo que nos interesa son únicamente las dos primeras letras, que son las que nos dicen el idioma propiamente dicho.
Para ello, podemos realizar un simple parseo de las dos primeras letras, tal y como se muestra a continuación:
Bien, ahora tenemos en la variable $idioma una cadena que será algo así como «es» o «en». Ya hemos obtenido el idioma del navegador.
Tener los textos escritos en todos los idiomas que se necesiten
Hay varias opciones para tener los textos escritos en algún lugar para poder acceder a ellos dependiendo de qué idioma se necesite. Se podría hacer mediante base de datos o como nosotros optamos: con archivos de constantes de php. Este método es más eficiente que el de las conexiones a base de datos, porque optimiza los recursos del servidor y porque los archivos de constantes se guardan el la memoria del servidor y no hace falta estar llamandolos continuamente.
Hace falta tener tantos archivos de constantes como idiomas se desee poder utilizar. Estos archivos tienen que tener esta estructura:
Archivo es.php
define (SORTEOS_Y_APUESTAS_ENTRE_COLEGAS, «Sortea2 sorteos y apuestas entre colegas»);
define (VER_SORTEOS_PUBLICOS, «ver sorteos públicos»);
define (AVANZADOS, «sorteos avanzados»);
?>
Archivo en.php
define (SORTEOS_Y_APUESTAS_ENTRE_COLEGAS, «Sortea2: Raffles and betting with colleagues»);
define (VER_SORTEOS_PUBLICOS, «public raffles»);
define (AVANZADOS, «advanced raffles»);
?>
Hacer que se abra un archivo de idioma u otro dependiendo del navegador
Esta es la parte más simple. Lo único que hay que hacer es que si $idioma es «es», que se abra el archivo de idioma es.php, y si es «en», que se abra en.php
En nuestro caso, como nuestra página solo está disponible en español y en inglés, lo que hemos hecho es que si el idioma del navegador no es español, entonces que se abra el archivo de idiomas inglés. En caso de tener la necesidad de dividir los idiomas en varios archivos, porque se necesitan para lugares independientes, o por lo que sea, se puede pasar como parámetro opcional la variable $string, que se puede utilizar para usar archivos de idioma del tipo «es-sorteos.php» o «en-sorteos.php», si la variable está vacía, entonces se abrirá el archivo «es.php», lógicamente.
{
require_once(PHPPATH.«/langs/es».$string.«.php»);
}
else
{
require_once(PHPPATH.«/langs/en».$string.«.php»);
}
Todo se debería tener en una función en un archivo que se suela llamar en todas lás páginas de su web. Por ejemplo, una función que se llamase of_idioma() que devolviese la variable $idioma, por si se tiene que utilizar en algún momento, en alguna página de su web.
Método de utilizarlo
Una vez llamada la función of_idioma(), podemos llamar a los textos refiriéndose a ellos por medio del nombre de la constante. O osea, para escribir «Sortea2 – sorteos y apuestas entre colegas», en vez de escribir la frase directamente, hay que escribir la constante, que dependiendo del archivo de idioma que se haya abierto, tendrá un significado u otro.
echo «Sortea2 – sorteos y apuestas entre colegas»;//No funcionaría
echo SORTEOS_Y_APUESTAS_ENTRE_COLEGAS; //Sí funcionaría
Resumen
Así, lo que hay que tener en cuenta es lo siguiente:
a) El idioma en principio lo capturamos del navegador.
b) En función del idioma, incluimos un fichero de constantes u otro. Si la página es muy extensa, podemos usar distintos ficheros de constantes y siempre haremos una de esas distinciones: si el idioma es español, carga las constantes en español, si es inglés, las constantes en inglés.
c) Para escribir los textos, usamos en lugar de literales los valores de las constantes. Como regla nemotécnica es bueno que los nombres de las constantes sean parecidos a los textos que representan.
Mejorando la experiencia del usuario. Cookie de idioma
Puede y suele ocurrir que el idioma del navegador no sea el que prefiera el usuario. Para ello en sortea2 incluimos al pie de todas las páginas un link para cambiar de idioma. Si la página está en español, el link dice «Read this web in English». Si está en inglés «Ver esta página en español».
Cuando un usuario realiza la selección de idioma, clickeando en dicho link, lo que hacemos es crear una cookie. Mediante dicha cookie que se guarda en el disco del ordenador del usuario que visita la página, almacenamos la preferencia de selección de idioma.
Por ello, en lugar de usar siempre el idioma del navegador hacemos lo siguiente:
a) Si el usuario tiene la cookie guardada, ese idioma prevalece.
b) De lo contrario, usamos el idioma del navegador.
Guardar la cookie es algo relativamente sencillo y de lo que pueden encontrarse numerosos ejemplos en la web. Como nosotros hemos empleado Jquery y el plugin de jquery.cookie, el código es peculiar aunque también ilustrativo:
$(«a[name=’cooken’],a[name=’cookes’],a[name=’cookde’]»).
click(function(event)
{
var cookiename = ‘lan’;
var lang = $(this).attr(«name»);
language = lang.substr(lang.length -2, 2);
event.preventDefault();
cookieval = $.cookie(cookiename,language,{ expires: 7 , path: ‘/’});
window.location.href=window.location.href;
});
});
Con este código, cuando se pulsa uno de los links de idioma, primero impedimos que se desplace a la ruta que indica ese link (preventdefault).
Luego seleccionamos las últimas letras del nombre de dicho link, nos servirán para determinar el idioma a guardar. Observar que el ejemplo también está preparado para el idioma «de», por si queremos traducirla al alemán.
Con esas dos letras, generamos una cookie, que se llama «lan» y durará 7 días.
Y tras realizar todo esto, recargamos la ventana. Esta vez tendremos la cookie ya guardada y al recargarse lo reconoceremos y lo haremos en el idioma del usuario. Y como la cookie permanece en el sistema, su selección de idioma permanecerá.
Determinando el valor de la cookie
Ya hemos recorrido todo el camino. Ahora basta con juntar las piezas. El proceso es muy sencillo.
1. Cargamos la página.
2. ¿Tenemos cookie? Si es así, tomamos el idioma.
3. Si no hay cookie, tomamos el idioma del navegador.
4. Con ese valor de idioma cargamos un fichero de constantes u otro.
5. Nos referimos siempre a los literales con valores de constantes.
El código final es realmente simple:
if ($idioma == «»)
{
$idioma = $_SERVER[‘HTTP_ACCEPT_LANGUAGE’];
$idioma = substr($idioma, 0, 2);
}
if ($idioma == «es»)
{
require_once(PHPPATH.«/langs/es».$string.«.php»);
}
elseif ($idioma == «en»)
{
require_once(PHPPATH.«/langs/en».$string.«.php»);
}
¿Algo no te ha quedado claro? Pregúntanoslo en los comentarios y te trataremos de ayudar.