Artículo

---

5 ¡votar!

Traduce contenido con el API Translate de Google y con JavaScript

Por norma general, todos las aplicaciones webs deberían de permitir a sus visitantes poder visualizar esta en el idioma que más les interese, y no sólo en uno por defecto. Una forma sencilla y económica de poder hacer esta traducción de nuestro sitio, es utilizar el API Translate de Google. De una forma sencilla se puede traducir a otro tipo de idiomas.

Veamos un ejemplo sencillo de como utilizar esta API, para ello partiremos del siguiente código HTML, el cual está por defecto en versión inglesa, pero donde damos al usuario la opción de traducirlo a otros idiomas como es el italiano, francés o el español.

<script src="https://www.google.com/jsapi?key=YOUR_GOOGLE_KEY"></script>
<div id="languages"><p>
<a href="?lang=en" rel="en">English</a> / <a href="?lang=es" rel="es">Spanish</a> / <a href="?lang=it" rel="it">Italian</a> /
<a href="?lang=fr" rel="fr">French</a>
</p></div>
<div id="languageBlock">
<p>Lights go out and I can't be saved <br />
Tides that I tried to swim against  <br />
Brought me down upon my knees  <br />
Oh I beg, I beg and plead </p>
<p>Singin', come out if things aren't said  <br />
Shoot an apple off my head  <br />
And a, trouble that can't be named  <br />
Tigers waitin' to be tamed </p>
<p>Singing, yooooooooooooo ohhhhhh  <br />
Yoooooooooooo ohhhhhh </p>
<p>Home, home, where I wanted to go <br /> 
Home, home, where I wanted to go  <br />
Home, home, where I wanted to go  <br />
Home, home, where I wanted to go</p>
</div>

Nosotros utilizaremos el elemento #languageBlock para enviar a Google el texto para traducir. Otra cosa que debemos de fijarnos, es que para cada enlace de los idiomas, le indicamos el código del idioma hacia donde queremos hacer la traducción.

Veamos ahora como utilizar el API Google Translate con JavaScript. En nuestro ejemplo, utilizaremos la librería MooTools, aunque podríamos utilizar otra cualquiera como jQuery.

// Set the original/default language
var lang = "en";
var currentClass = "currentLang";
// Load the language lib
google.load("language",1);
// When the DOM is ready....
window.addEvent("domready",function(){
// Retrieve the DIV to be translated.
var translateDiv = document.id("languageBlock");
// Define a function to switch from the currentlanguage to another
var callback = function(result) {
if(result.translation) {
translateDiv.set("html",result.translation);
}
};
// Add a click listener to update the DIV
$$("#languages a").addEvent("click",function(e) {
// Stop the event
if(e) e.stop();
// Get the "to" language
var toLang = this.get("rel");
// Set the translation into motion
google.language.translate(translateDiv.get("html"),lang,toLang,callback);
// Set the new language
lang = toLang;
// Add class to current
this.getSiblings().removeClass(currentClass);
this.addClass(currentClass);
});
});

El primer paso en el proceso, es usar google.load para cargar el API de Google. Cuando el API esté cargado, recuperaremos el DIV que será traduccido. Luego tendremos que definir un retorno de llamada con los datos devueltos por Google. Esta llamada, lo único que hará será modificar el contenido del DIV que hemos traducido, con los nuevos valores.

Lo último que hacemos, es añadir un manejador de eventos cuando se pulse en el link del idioma. A la llamada de google.language.translate se enviará el contenido para su traducción. Cuando retorna la llamada, el valor devuelto será el que se mostrará en nuestra aplicación.

Pueden ver un ejemplo de su funcionamiento en la siguiente dirección de enlace.

Vía: Davidwalsh

Publicado por: Angel Carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios