¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Traduciendo aplicaciones de jQuery Mobile

Estos días he vuelto al desarrollo de BuSeViCi. Me ha animado mucho el ver que, en apenas unos meses, ya cuenta con 1700 usuarios únicos. Soy de los que les gusta enredar en las estadísticas de Google Analytics y pronto me di cuenta de que el 70% de las visitas de la página, usaban la aplicación con el navegador en Inglés.

Eso significa, que la mayoría de los usuarios de la aplicación, ¡son extranjeros! La internacionalización de la aplicación estaba en la lista así que es lo primero a lo que me he decidido a meterle mano, al menos en concepto.

Sorprendentemente, hay muy poca información en la red de lo que yo quería lograr, que era deshacerme por completo de PHP ya que quiero hacer la aplicación nativa con PhoneGap, que no soporta PHP. Así que la internacionalización ha de ser completamente con JavaScript.

Tras probar un par de plugins que había visto, finalmente me quedo con jquery-localize, el cual podéis encontrar en GitHub. Su sintaxis me pareció la más correcta y además intenta traducir de manera automática según el idioma del navegador del usuario, que es justo lo que quería conseguir.

En este pequeño tutorial, aprenderás cómo traducir tus aplicaciones de jQuery Mobile, a cualquier idioma, de forma automática.

Primero, crearemos nuestro código HTML que contendrá unas pocas palabras y frases para traducir, en una estructura de página básica, de jQuery Mobile. Si queréis aprender a usar este joven pero potente Framework, os recomiendo el libro de Domine las aplicaciones web móviles con jQuery Mobile.

index.html

<!doctype html>  
<html>  
    <head>
        <title>Prueba de traducción</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
        maximum-scale=1">
        <link rel="stylesheet" href="jquery.mobile-1.1.0-rc.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.1.0-rc.1.min.js"></script>
        <script type="text/javascript" src="jquery.localize.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1 rel="localize[header]">Texto en Castellano</h1>
            </div>
            <div data-role="content">
                <div style="text-align: center;">
                    <h2 rel="localize[subheader]">Esto es un subheader</h2>
                </div>
                <p rel="localize[wellcome]">Bienvenidos a mi maravillosa página</p>
            </div>
            <div data-role="footer" data-position="fixed" data-id="nav">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" rel="localize[home]">Inicio</a></li>
                        <li><a href="#products" rel="localize[products]">Productos</a></li>
                        <li><a href="#contact" rel="localize[contact]">Contacto</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>  

Como puedes comprobar, el marcado es realmente sencillo y no tiene mucha historia. En este caso estamos usando jQuery 1.7.1, jQuery Mobile 1.1 RC 1 y jQuery Localize. Tenemos nuestro header, una zona central con contenido, y nuestro footer con barra de navegación incluída.

Voy a destacar todos los atributos que vemos dentro del atributo rel, allá donde hay texto. jQuery Localize se vale de éstos para traducir la página. La sintaxis es rel=”localize[identificador]“ y en la parte de identificador podemos poner cualquier cosa.

Ahora vamos a crear nuestro archivo de diccionario para inglés, llamado index-en.json. Si quisiéramos traducir por ejemplo al italiano también, tendríamos que crear un archivo llamado index-it.json que contuviera las palabras.

index-en.json

{  
  "header": "Text in English",
  "subheader": "This is a Subheader",
  "wellcome": "Wellcome to my marvellous page",
  "home": "Home",
  "products": "Products",
  "contact": "Contact me"
}

Si te has fijado, verás que solo tiene un objeto cuyas claves no son otras que las que hemos indicado dentro de cada parte rel.

Por último, vamos a la parte de jQuery Mobile en la que inicializamos el plugin:

(function($) {  
  $(document).on('pagecreate', '#home', function(event) {    
    $("[rel*=localize]").localize("index", {
      skipLanguage: /^es/
    });  
  });
})(jQuery);

Lo que hacemos es crear una función que espera a que ocurra el evento pagecreate. Este evento ocurre cuando jQuery Mobile ha preparado todo el código de la página, pero aun no ha sido mejorado. Es importante que la magia ocurra en ese evento porque, posteriormente, jQuery Mobile inserta mucho código en el DOM para que todo tenga la apariencia que después vemos.

Si os fijáis, a la función le pasamos el nombre del archivo “index”. El plugin intentará descargar index-en.json si el navegador está en inglés y no intentará cargar nada si está en castellano porque le hemos dicho que evite los que empiecen por es.

Es posible (y recomendable) cargar más de un archivo. Así, por ejemplo podéis cargar traducciones comunes para headers y footers, que no van a variar, y luego meterle el código específico de la página en cuestión. Podéis hacer algo así:

(function($) {  
  $(document).on('pagecreate', '#home', function(event) {    
    $("[rel*=localize]").localize("header").localize("contenido").localize("footer");  
  });
})(jQuery);

Si todo ha ido bien (seguro que sí), deberíais ver algo así dependiendo del idioma del navegador que estéis usando:

Et voilá! La aplicación se traducirá de manera automática según el idioma del navegador.

Recientemente he publicado un nuevo plugin en Github el cual creo que está más optimizado y tiene más opciones que el comentado en este artículo. Te recomiendo que le eches un vistazo.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!