Añadir iconos de traducción a nuestra web

Desde los primeros días del blog, una de las funcionalidades que quería añadir era la opción de traducción rápida de las entradas a otros idiomas.

Las opciones disponibles son muchas, desde realizar yo mismo la traducción (a través de cualquier medio) y añadirla íntegra al blog, hasta usar un servicio externo que se encargue de ello.

Puesto que integrar una traducción personalizada llevaría mucho tiempo, me he decantado por usar un servicio externo (al igual que hacen la mayoría de webs). Y tras probar los más conocidos, he elegido Google Translate. Éste es, con diferencia, el que conseguía traducciones más fieles y comprensibles, aunque tampoco es ninguna maravilla; aún queda mucho camino que recorrer para que una máquina sea capaz de traducir correctamente entre varios idiomas.

Para añadir la funcionalidad he realizado los siguientes pasos:
NOTA: Google Translate es un servicio externo al blog y como tal hay que sujetarse a sus términos y condiciones de uso.

1. Vamos a Personalizar y luego a Diseño->Edición de HTML y damos a Expandir plantillas de artilugios.
2. En el código buscamos el lugar donde queremos añadir el acceso a la traducción e incluimos el elemento que contendrá el enlace. En mi caso he añadido una imagen de una bandera para cada idioma y las he colocado en la barra de menús.
   Si no tienes barra de menús, un buen lugar podría ser al inicio de la sidebar. Para ello buscamos la siguiente línea en el código:
   

   <b:section class='sidebar' id='sidebar' preferred='yes'>

   Justo a continuación incluimos el código para añadir cada bandera. Tendremos que añadir una línea como ésta por cada idioma:
   

   <img style='cursor: pointer; width: 40px; height: 23px;' alt='DESCRIPCION DE LA IMAGEN' src='URL-DE-LA-IMAGEN' title='MENSAJE DE AYUDA'/>

   Donde:
   
   • URL-DE-LA-IMAGEN es la URL de la bandera a añadir.
   • DESCRIPCION DE LA IMAGEN es una breve descripción que suele mostrarse cuando hay problemas al cargar la imagen.
   • MENSAJE DE AYUDA es un corto mensaje de texto que se muestra al detener el puntero sobre la imagen.
   • 40px corresponde al ancho en píxeles (en este caso 40, pero podemos indicar la anchura que deseemos).
   • 23px corresponde al ancho en píxeles (en este caso 23, pero podemos indicar la anchura que deseemos).
3. Añadimos a cada imagen el enlace al idioma correspondiente. Para ello, las líneas que incluimos antes para cada imagen de cada idioma, las incluiremos dentro de una etiqueta de enlace siguiendo el siguiente formato:
   

   <a target='_blank' rel='nofollow' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=es%7Cen&amp;en=es&amp;ie=UTF8&quot;); return false;' title='Google-Translate-Spanish to English'>
      LINEA_DE_IMAGEN_INSERTADA
   </a>

   Donde:
   
   • LINEA_DE_IMAGEN_INSERTADA es la línea que insertamos anteriormente.
   • es es el código del idioma origen (es=español). Para más idiomas consultar en Google Translate.
   • en es el código del idioma al que se traducirá (en=english). Para más idiomas consultar en Google Translate.

Si tenéis alguna duda preguntad.


salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS