Como Traducir con la API de Google

Publicado pornax 4 comentarios en Como Traducir con la API de Google

No hace muchos días un compañero del Team Programmers de LH me pidió ayuda para
orientarle con la traducción de su web a diferentes idiomas.

Le propuse un método parecido al que utiliza SMF.

Pero hoy me puse a revisar el funcionamiento de la Google API Translate y voy a explicarlo
para aquellos a los que les pueda ser de ayuda.

El objetivo de este script será el conseguir que la API de Google Translate nos consiga
traducir un <div> con un texto en un idioma desconocido.

Recomiendo altamente leer la documentación de Google después de leer este tutorial con el objetivo de ampliar conocimientos y proponer otros proyectos y alternativas.

Primero que nada hemos de saber que debemos incluir el cargador de API AJAX de Google

Lo haremos con el siguiente código:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Una vez que tenemos el cargador empezamos nuestro script y lo primero que le tenemos que indicar es que aplicación de toda la API de Google queremos usar, ese es el traductor de lenguaje y se lo indicamos así:

<script type="text/javascript">

google.load("language", "1");

El primer parámetro corresponde a la API y el segundo a la versión.

La función javascript que vamos a utilizar es la siguiente:

<script type="text/javascript">

google.load("language", "1");

function initialize() {

var lang = window.location.search.substring(1).split("&");
var lang = lang[0].split("=");

var text = document.getElementById("texto").innerHTML;
var texto = document.getElementById('texto');

google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, lang[1],
function(result) {
if (result.translation) {
texto.innerHTML = result.translation;
google.language.getBranding('branding');
}
});
}
});
}
google.setOnLoadCallback(initialize);


</script>

Y es la fusión de un ejemplo de la documentación google con alguna idea mía.

Este script está pensado para no utilizar ajax.
la función initialitze() es la que hace todo el trabajo.
La primera parte son solo declaraciones, la primera y segunda linea lo que haces es tomar la querystring y de la primera variable el primer valor (pensado para algo como: lang=es, tomaría es) y ese será el idioma al cual traducir.

      var text = document.getElementById("texto").innerHTML;
	  var texto = document.getElementById('texto');

google.language.detect(text, function(result) {

Ahora usamos la función de google para detectar el idioma.

if (!result.error && result.language) {

Esta linea solo comprueba que no haya errores y que se detecte el idioma, en caso afirmativo proseguimos con la función de traducción:

google.language.translate(text, result.language, lang[1],
function(result) {
if (result.translation) {
texto.innerHTML = result.translation;
google.language.getBranding('branding');
}
});

esta función lleva 4 parámetros:
– text: El texto a traducir
– result.language: el lenguaje original
– lang[1]: el lenguaje final
– function(result) … : esto creo entender que es el proceso a realizar en caso de traducción correcta, lo que hace básicamente es insertar el texto traducido en el contenedor y mostrar un «Powered By Google».

google.setOnLoadCallback(initialize);


esta sentencia no la encontré en la documentación de google, pero parece ser algoa sí como el proceso que inicializa al cargar.
Por otro lado lo he visto en google maps y otras api.

Con la explicación en mente solo queda ver el code entero:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Translate with Google Api</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function initialize() {

var lang = window.location.search.substring(1).split("&");
var lang = lang[0].split("=");

var text = document.getElementById("texto").innerHTML;
var texto = document.getElementById('texto');

google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, lang[1],
function(result) {
if (result.translation) {
texto.innerHTML = result.translation;
google.language.getBranding('branding');
}
});
}
});
}
google.setOnLoadCallback(initialize);


</script>
</head>

<body>
<div id="lang">
<a href="<?php echo $_SERVER['PHP_SELF'] ?>?lang=es">Español</a> |
<a href="<?php echo $_SERVER['PHP_SELF'] ?>?lang=en">Inglés</a> |
<a href="<?php echo $_SERVER['PHP_SELF'] ?>?lang=ca">Catalán</a> |
<br /><br /><br />
</div>

<div id="texto">
Hola, ¿que tal?<br />
Todo bien
</div>

<br /><br /><br />
<div id="autor" style="vertical-align: middle; font-family: arial,sans-serif; font-size: 11px;">Coded By Nax</div>
<div id="branding"></div>
</body>
</html>

Si revisais más atras la explicación podeis encontrar esta linea:

google.language.getBranding('branding')

Lo que hace es poner el «con la tecnología de Google» en div branding.
Creo que está bien atribuir el mérito al creador, así que espero que la pongan por algún lugar.

Para finalizar el mismo script pero adaptado a AJAX:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Translate with Google Api</title>
<style>
pre {
float: left;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("language", "1");

function initialize(lang) {

var text = document.getElementById("texto").innerHTML;
var texto = document.getElementById('texto');
var brand = document.getElementById('branding').innerHTML = '';

google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, lang,
function(result) {
if (result.translation) {
texto.innerHTML = result.translation;
google.language.getBranding('branding');
}
});
}
});
}
google.setOnLoadCallback(initialize);


</script>
</head>

<body>
<div id="lang">
<pre onClick="initialize('es')">Español</pre> <pre>|</pre>
<pre href="" onClick="initialize('en')">Inglés</pre> <pre>|</pre>
<pre href="" onClick="initialize('ca')">Catalán</pre> <pre>|</pre>
<br /><br /><br />
</div>

<div id="texto">
Hola, ¿que tal?<br />
Todo bien
</div>

<br /><br /><br />
<div id="autor" style="vertical-align: middle; font-family: arial,sans-serif; font-size: 11px;">Coded By Nax</div>
<div id="branding"></div>
</body>
</html>

como veis, los cambios son mínimos, pero aveces la palabra AJAX asusta a la gente 😛

Las dos demos:
Traducción sin AJAX
Traducción CON AJAX

4 respuestas a «Como Traducir con la API de Google»

  1. hola amigo. tengo un problemita con esta api. la aplico a una frese y funciona bien, pero cuando quiero traducir un parrafo no me llo traduce. debe ser algun espacio que corta esto o no sé. ej me funciona bien de esta manera
    Hola mundo
    pero si quiero hacer lo siguiente:

    Hola mundo
    hoy cumplimos 200 años desde la revolucion

    ** esto no lo hace.

  2. he probado y lo traduce perfectamente.

    Tanto con como sin negritas..

    fijate que el ejemplo traduce:

    Hola, ¿que tal?
    Todo bien

  3. Quedé loco por lo del php y el AJAX, claro do slenguajes que debe poseer el servidor (host), entonces encontré éste extraordinario gadget en Translateth.is

Los comentarios están cerrados.

No usamos Cookies para rastrear nada, navega tranquilo...
Seguir Navegando
x