Sistema multi-Idioma simple con JavaScript

El codigo que esta en GitHub esta actualizado y es totalmente diferente al de esta pagina, pero los pasos para crear los archivos de traduccion y para asignar las clases en el HTML son los mismos.

DEMO | DESCARGAR

Tanto si estas desarrollando una webapp (web con cierto aire a aplicacion movil, que se puede acceder desde el navegador del movil) o una aplicacion hibrida (aplicacion nativa desarrollada en HTML5, CSS3 y JavaScript) quizas quieras expandir el publico de tu aplicación creando un soporte multi-idioma para que personas con idiomas distintos al tuyo puedan usarla. Por eso en este pequeño tutorial vamos a aprender a crear un soporte sencillo para crear cuantos idiomas quieras en tu aplicacion.

Archivos

Vamos a necesitar crear ciertos archivos, estos son:

• El/Los archivos de traduccion: /locale/bd-identificador-idioma.js
• Por supuesto, el archio index.html donde incluiremos el HTML y el JavaScript

Para los archivos de traducción tienes que escribir un nombre apropiado para ellos. Se divide en tres secciones, el nombre de la aplicacion (esto no cambiara), el identificador (a eleccion, lo veremos mas adelante), y el idioma, que recomendamos que se adecue a el estándar ISO 639-1, de dos letras.
Para empezar, vamos a crear este archivo de traduccion: murodev-index-es.js.

Sistema de traduccion

Antes de nada, tendremos que cargar los archivos de traduccion en la pagina, y para eso deberemos escribir un HTML con la etiqueta script.  Para eso, crearemos una funcion llamada initTranslation:

Como podemos ver en el codigo, existe un parametro en la funcion llamado sectionID. Este parametro se encarga de llamar al identificador del archivo de traduccion, como explicamos antes. En este caso, ya que lo vamos a utilizar sobre el archivo index.html, vamos a usar de identificador index.

initTranslation('index');

Dentro de la funcion, y como ya dice en el comentario, existe una variable que especifica el idioma. La forma de conseguir esta informacion, es cosa vuestra, de momento usaremos una variable.

El código que vemos mas abajo, comprueba si se ha inicializado la función, y si es así, crea una etiqueta <script> antes de que termine llamando al archivo de traducción murodev-index-es.js, alojado en la carpeta /locale/, y espera dos segundos antes de llamar la siguiente función.

Despues de crear esta funcion, tendremos que llamar a la funcion translateApp(); que traduce los textos de nuestra aplicacion. En esta funcion podemos ver que comienza con una variable llamada translateIDs, un array que contienen los identificadores de cada elemento que se debe traducir de nuestra aplicacion, identificadores que luego pondremos en nuestro HTML. Hay que tener en cuenta, que por mucha traduccion que hagamos, si no inicializamos los elementos, no se traducira nada. Como podemos ver en el ejemplo, se separan por comas.

El codigo siguiente es un simple ciclo de iteracion for que traduce todos los elementos.

Archivos de traduccion

Una vez hemos aprendido como se identifican y llaman los archivos de traduccion, vamos a incluir las traducciones en los mismos. Es bastante sencillo:

Archivo de traduccion en español (bd-index-es.js):

var localization = {

            title: "MuroDev: Español",

            description: "Un sencillo sistema de traduccion por JavaScript.",

            translate: "Translate to English"

};

Archivo de traduccion en ingles (bd-index-en.js):

var localization = {

            title: "MuroDev: English",

            description: "A simple system of translation via JavaScript.",

            translate: "Traducir al español"

};

HTML

Ya que tenemos preparado nuestro script y nuestros archivos de traduccion, vamos a identificar cada elemento a traducir en nuestra pagina HTML. Para eso pondremos una clase que se construira asi:

<h1 class="lang__identificador">
MuroDev: Español</h1>

Mientras que el prefijo lang__ queda fijo, lo unico que tendremos que cambiar sera el identificador, que debe coincidir con el que escribimos en el archivo de traduccion. En este caso, asi queda nuestro HTML:

<!html DOCKTYPE>
<html>
  
<head>
    
<title>MuroDev: Español</title>
  
</head>
  
<body>
    
<h1 class="lang__title">MuroDev: Español</h1>
    
<p class="lang__description">Un sencillo sistema de traduccion por JavaScript.</p>
    
<button onclick="" class="lang__translate">Translate to English</button>
    
<script>
      
// Codigo JavaScript
    
</script>
  
</body>

</html>

Y ya tendriamos lista toda la parte de codigo. Lo demas solo seria llamar a la funcion initTranslation, y en este caso lo hemos echo desde un evento onclick en un boton.