3

Tengo una aplicación web pequeña (una sola página con 4-5 vistas que luego paso a Android/iPhone con Cordova) que tiene texto en varios idiomas. En el pasado había controlado la internacionalización con CSS, pero cuando el número de frases creció (hasta unas 60), me pasé a una manera muy básica con JavaScript puro, sin plugins de ningún tipo.

El método es sencillo: tengo las diferentes cadenas en JSON, y la clave para cada cadena coincide con la un data-atributo del elemento que cambiará (marcado con una clase específica), entonces selecciono esos elementos y cambio su contenido. Algo como esto (simplificado):

// JSON con las cadenas traducidas a los diferentes idiomas
frases = {
  "en": {
    "idioma": "Change language:",
    "lan-en": "English",
    "lan-es": "Spanish"
  },
  "es": {
    "idioma": "Cambiar idioma:",
    "lan-en": "Inglés",
    "lan-es": "Español"
  }
}

// función que cambia todos los elementos al nuevo idioma
function cambiarIdioma(lang) {
  var elems = document.querySelectorAll(".intfrase");
  for (var x = 0; x < elems.length; x++)
    elems[x].innerHTML = frases[lang][ elems[x].dataset.id ];
}

// cargar el idioma por defecto
cambiarIdioma("es");
<div>
  <span data-id="idioma" class="intfrase"></span>
  <button onclick="cambiarIdioma('es')" data-id="lan-es" class="intfrase"></button>
  <button onclick="cambiarIdioma('en')" data-id="lan-en" class="intfrase"></button>
</div>

Ahora estoy ampliando y reescribiendo parte de la aplicación para mejorarla, y uno de los puntos que creo podrían ser mejorados es cómo se realiza la internacionalización, especialmente teniendo en cuenta que el número de frases se va a duplicar.

¿Cómo se puede mejorar lo que ya tengo? ¿Qué otros métodos hay para conseguir la internacionalización de una aplicación web? ¿Qué ventajas tienen?

1 respuesta 1

3

Me parece una buena idea la que planteas en tu código, la única desventaja que veo, es que se requiere estar creando identificadores para los textos (mucha imaginación o un estándar para no caer en info desordenada), como Joomla (TEXT_HELLO, TEXT_THANKS).

Otra opción a sugerir es algo parecido a lo tuyo, pero cambia un poco la forma de operar:

/**
 * JSON con las cadenas traducidas a los diferentes idiomas.
 * No hay español, por ser el default.
 */
frases = {
  "en": {
    "Cambiar idioma:": "Change language:",
    "Español": "Spanish",
    "Inglés": "English",
    "Portugués": "Portuguese"
  },
  "pt": {
    "Cambiar idioma:": "Mudar idioma:",
    "Español": "Espanhol",
    "Inglés": "Inglês",
    "Portugués": "Português"
  }
};

/**
 * Función que cambia todos los elementos al nuevo idioma.
 *
 * @param {string} lang
 */
function cambiarIdioma(lang) {
  // Habilita las 2 siguientes para guardar la preferencia.
  // lang = lang || sessionStorage.getItem('app-lang') || 'es';
  // sessionStorage.setItem('app-lang', lang);

  var elems = document.querySelectorAll('[data-tr]');
  for (var x = 0; x < elems.length; x++) {
    elems[x].innerHTML = frases.hasOwnProperty(lang)
      ? frases[lang][elems[x].dataset.tr]
      : elems[x].dataset.tr;
  }
}

window.onload = function(){
  cambiarIdioma();
  
  document
    .getElementById('btn-es')
    .addEventListener('click', cambiarIdioma.bind(null, 'es'));

  document
    .getElementById('btn-en')
    .addEventListener('click', cambiarIdioma.bind(null, 'en'));

  document
    .getElementById('btn-pt')
    .addEventListener('click', cambiarIdioma.bind(null, 'pt'));
}
<div>
  <span data-tr="Cambiar idioma:"></span>
  <button data-tr="Español" id="btn-es"></button>
  <button data-tr="Inglés" id="btn-en"></button>
  <button data-tr="Portugués" id="btn-pt"></button>
</div>

Me baso en como Magento y Yii (entre otros frameworks) lo hacen.

1
  • No entiendo bien cuando dices que Joomla y Magento usan métodos distintos, la verdad yo veo que ambos tienen un nombre de string y un valor para cada idioma. La diferencia que yo veo es que Magento1 tiene varios métodos de traducción según como el contexto (csv, js, inline, db).
    – Shaz
    el 2 sep. 2016 a las 2:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.