JMiur [E]

El traductor de Google no es perfecto pero, suele sacarnos de apuro y además, posee un API que nos permite integrarlo en cualquier sitio. Generalmente, lo utilizamos para dar la opción de traducir la página completa pero también es posible hacerlo parcialmente, es decir, colocar algún texto y dar la opción de traducirlo sin tener que salir de la página.

Para esto, necesitamos agregar el script si es que no lo tenemos ya que en un blog de Blogger, suele estar agregado para multiples tareas.

Como cualquier otro, lo ponemos antes de </head>;
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
Ahora, donde se nos ocurra, vamos a colocar dos DIVs, en uno, agregaremos los enlaces a los idiomas y en el otro, el texto a traducir; en este ejemplo, sería algo así:
<div id="idiomas">
  <a id="L_es" class="lenguajeactual" href="javascript:void(0);" onclick="traduce('es');">Español</a>
  <a id="L_en" class="" href="javascript:void(0);" onclick="traduce('en');">Inglés</a>
  <a id="L_it" class="" href="javascript:void(0);" onclick="traduce('it');">Italiano</a>
  <a id="L_fr" class="" href="javascript:void(0);" onclick="traduce('fr');">Francés</a>
  <a id="L_pt" class="" href="javascript:void(0);" onclick="traduce('pt');">Portugués</a>
</div>

<div id="miejemplo">
  ....... el texto .......
</div>
Un poco de CSS para darle forma:
<style>
  #idiomas {
    background-color: #000;
    border: 1px solid #444;
    margin: 0 auto;
    padding: 5px 10px;
    width: 500px;
  }
  #idiomas a {
    border-radius: 5px;
    color: #DDD;
    display: inline-block;
    font-size: 17px;
    padding: 5px 15px;
  }
  #idiomas a:hover { color: #FFF; }
  .lenguajeactual { background-color: #444; }
  #miejemplo {
    border: 1px solid #444;
    border-top:none;
    color: #EEE;
    font-size: 16px;
    padding: 10px 20px;
    margin: 0 auto;
    width: 480px;
  }
</style>
Y por último, el script con la función:
<script>
  var lenguaje = "es"; // es el lenguaje por defecto
  google.load("language",1); // cargamos el API
  // definimos la función que ejecutará el API
  var callback = function(result) {
    if(result.translation) {
      var translateDiv = document.getElementById("miejemplo");
      translateDiv.innerHTML=result.translation;
    }
  }
  // ejecutamos la función
  function traduce(traducir) {
    document.getElementById("L_" + lenguaje).className = ""; // cambiamos al clase del enlace anterior
    var translateDiv = document.getElementById("miejemplo"); // es el DIV donde está el texto
    google.language.translate(translateDiv.innerHTML,lenguaje,traducir,callback); // ejecutamos la función del API
    lenguaje = traducir;  // preservamos el lenguaje actual
    document.getElementById("L_" + traducir).className = "lenguajeactual";  // cambiamos la clase del actual
  }
</script>

Este es un párrafo en español.

Puede ser traducido haciendo un click en el enlace anterior.

Utilizando el API de Google y es relativamente fácil de implementar.

12 comentarios:

Felipe Calvo Cepeda  

Al menos para divertirse un rato (mientras pienso en algun uso) me parece fantástico y coquetísimo :D

Responder
Pliactom  

Muy bueno, aunque, estoy igual que Felipe, pensando en una utilidad, pero es fantástico lo que haz hecho.

Verdaderamente ingenioso Jmiur, no bueno, con CSS y todo está genial.

Responder
Douss Private Club  

Hola JMiur, espero que no te moleste y se pueda! cuál sería el código para hacer una "caja de texto" como la que usaste para este ejemplo?
Un saludo y de antemano muchas gracias!

Responder
Unknown  

Un encanto, coqueto como dice Felipe :D

Responder
Adrián J. Messina  

Muy original, la primera utilidad que se me ocurre es la de traducir una entrada en su página individual. Aunque puede ser que la API influya en la carga del sitio.
¿Qué dices Jmir?

Responder
Beben Koben  

WOW...this is brand new anymore for featured language :O
hehe my next posted ;) :D
ty master :$

Responder
JMiur  

Puede servir para traducciones cortas. Muchas veces he visto sitios que tienen canciones que incluyen enlaces a traducciones y l hacen saliendo del sitio y entrando a Google; usando algo de esto, se tendría el mismo resultado sin salir de la página.

Ocurre lo mismo con trozos de noticias o artículos cortos ... no tengo la menor idea :-)

Adrián J. Messina:
No sé ahsta donde influye;en este caso, ni siquiera la agregué porque es parte de muchas otras funciones como el buscador. Suele estar en muchos blogs.

Douss Private Club:
No sé a que parte te refieres con exactitud; la base es la indicada en la misma entrada; sól oson enlaces.

Responder
Douss Private Club  

Hola de nuevo! me refiero a cómo puedo hacer una caja de texto como esta, pero que no contenga el mismo texto pero traducido en cada pestaña, sino que contenga el texto que yo quiera en cada pestaña... espero haberme explicado mejor ja! Un saludo y nuevamente gracias!!!

Responder
Beben Koben  

I have tried this hack...
But when we are translating into one language, and when we returned to the default language...any change existing text there...hihihi

but still cool ;)

Responder
JMiur  

Douss Private Club:
Para eso, debes usar alguna clase de esquema que genere pestañas o Tabs.

Responder
Beben Koben  

hehehe...
JMiur ;)

Responder
JMiur  

Good :D

Responder
 
CERRAR