2005/02/08

Traducción Automática

He agregado enlaces que ofrecen una traducción automática de esta bitácora al inglés y al francés, para las personas que no sepan español. La traducción al inglés la procesa Google y la francesa está a cargo del servicio Babel Fish de Altavista. A continuación te cuento cómo implementar esta funcionalidad en tu bitácora Blogger.Primero conviene aclarar por qué uso dos servicios distintos de traducción. Google sólo ofrece traducciones del Español a Inglés mientras de Babel Fish ofrece además traducir al francés, con lo cual podría haber usado sólo este último servicio, pero quise usar los dos, para agregar variedad de opciones y demostrar cómo se pueden implementar ambos.

Aunque he tratado de ser lo más genérico posible a la hora de indicar la ubicación de cada bloque de código, el resultado final dependerá de la plantilla que utilices en tu bitácora. Heres libre de experimentar con distintos formatos y estilos.

Como resultado de agregar los siguientes códigos a tu plantilla se mostrarán dos pares de enlaces: uno junto al título de la bitácora en la página de inicio, traducirá todo el texto allí presente, mientras que otro par de enlaces aparecerá bajo el texto de cada entrada, a continuación de los enlaces a comentarios y trackback, y servirá para traducirla individualmente.

Lo primero será agregar algunos estilos para asegurar una buena presentación. Una vez que ingresas al escritorio de tu bitácora, en la ventana de edición de tu plantilla, agrega los siguientes estilos preferentemente luego del bloque Blog Header:
/* Traducción
----------------------------------------------- */
#tradu {
color: gray;
float:right;
background:0;
padding:0;
margin:0;
}
#tradu a:link,
#tradu a:visited,
#tradu a:hover {
color: white;
text-decoration:none;
}
.iform {display: inline;}

Luego de la división <div id="header"><div> y antes de la etiqueta <h1 id="blog-title"> agrega lo siguiente:
<MainPage>
<!-- Traducir la Página de Inicio -->
<span id="tradu">
<!-- al Inglés -->
[<a href="http://translate.google.com/translate?u=<$BlogURL$>&langpair=es%7Cen&hl=en&ie=UTF-8&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools" title="Translate">EN</a>
|
<!-- al francés -->
<form class="iform" action="http://babelfish.altavista.digital.com/babelfish/tr" method="post" name="frmTrURL">
<input name="doit" value="done" type="hidden">
<input name="tt" value="url" type="hidden">
<input name="intl" value="1" type="hidden">
<input name="trurl" value="<$BlogURL$>" type="hidden">
<input name="lp" value="es_fr" type="hidden">
</form>
<a href="javascript:document.frmTrURL.submit()" title="Traduir">FR</a>]
</span>
</MainPage>

Dentro de las etiquetas <div class="post"></div>, luego de la división <div class="post-body"></div> pega lo situiente:
<!-- Datos para traducir al francés -->
<form style="display:none" action="http://babelfish.altavista.digital.com/babelfish/tr" method="post" name="post<$BlogItemNumber$>">
<input name="doit" value="done" type="hidden">
<input name="tt" value="url" type="hidden">

<input name="intl" value="1" type="hidden">
<input name="trurl" value="<$BlogItemPermalinkURL$>" type="hidden">
<input name="lp" value="es_fr" type="hidden">
</form>

Dentro de las etiquetas <p class="post-footer"></p>, entre </BlogItemCommentsEnabled> y <$BlogItemControl$> agrega esto:
<!-- Traducir Entrada -->
<!-- al Inglés -->
<a href="http://translate.google.com/translate?u=<$BlogItemPermalinkURL$>&langpair=es%7Cen&hl=en&ie=UTF-8&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools" title="Translate">EN</a>
|<!-- al francés -->
<a href="javascript:document.post<$BlogItemNumber$>.submit()" title="Traduir">FR</a>

Por último, guarda la plantilla, reconstruye toda tu bitácora y prueba los nuevos enlaces. Verás que luego de cargar la primer página traducida, podrás seguir navegando por el sitio con traducción automática de los enlaces.

Publicando tu bitácora Blogger en un servidor externo que soporte código PHP, podrías implementar esta funcionalidad de forma mucho más sencilla, usando un sólo bloque de código que serviría para trucidir tanto la página de inicio como los archivos mensuales e individuales, pero por esta vez te dejaré el placer de descubrir la técnica por ti mismo ;)