Localización e Internacionalización de nuestro Blog y Paginas Web

Recuerde que..

Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

Preparándonos para poder atender consultas de amigos extranjeros, especialmente de algunos de habla inglesa que conocemos, y con quienes compartimos la idea de preparar estas practicas tipo "Developer Codelabs", hemos recurrido nuevamente a la Tecnología Google para tratar de internacionalizar nuestro Blog...

Google Traductor

Google Traductor es una herramienta interesante para evitarnos una traducción pagina por pagina de nuestros desarrollos, aún no lo hemos probado integrado a ExtJs, pero consideramos que no debe haber ningún inconveniente, por cuanto, si han revisado el Code Playground de Google, ya deben haber identificado, y tal vez probado, algunas opciones de Traducción utilizando el API language que nos ofrece Google.

NOTA IMPORTANTE: desde el 01 de Diciembre del 2011, Google ha cerrado definitivamente el uso de la API language v.1 (incluso ya no se encuentra disponible en el Google Playground como tal vez han podido comprobar). Ahora Google propicia el uso de la API language v.2 que es un servicio de paga (y ahora no hay cuotas libres, algo extraño con Google pero esa es la situacion actual).. asimismo, propicia el uso del gadget de Google Traductor, desarrollado en Javascript asi que se puede implementar en cualquier pagina web y que Google indica que siempre será una versión de uso libre, y cuyas opciones pueden revisar en el siguiente link

A la brevedad adecuaremos nuestro codigo a opciones de traducción como hemos realizado, de "emergencia" en nuestro blog... antes daremos revisión a algunos proyectos opensources respecto al tema para una mejor presentación.

En esta oportunidad utilizamos el  Website Translator Gadget, mediante el cual insertado un código Javascript, Google nos permite que nuestros usuarios y lectores seleccionen el idioma que les sea más familiar para leer nuestras paginas web.. más aún, dependiendo del idioma predeterminado de nuestro navegador y del idioma en que esté hecha las páginas web, Google podría hacer una traducción automática (solo se cambia un parámetro "style"; pero como no me convenció su desempeño, he preferido mantener la web en su fuente original (el español), y que Uds. amigos, seleccionen el idioma que más les convenga... además creemos que es importante que se reconozca que nuestra lengua materna es el español.

Nos conviene utilizar esta herramienta por cuanto, en primer lugar, mejoraremos nuestra redacción, por cuanto mientras mejor escribamos mejor será la traducción; en segundo lugar, porque si no nos convence la traducción podremos remitir nuestras propias trducciones las que son utilizadas por Google para que vaya mejorando su herramienta de traducción automatica, y en tercer lugar, porque en nuestro proceso de aprendizaje de diversos idiomas, Google nos ofrece la opción de escuchar su pronunciación (disponible para inglés, español, portugues, frances, coreano, chino, entre otras y Google va adicionando poco a poco más idiomas, y aunque los parrafos aún deben ser cortos, son lo suficiente para que esta herramienta nos sea sumamente útil... interesante no?

Como lo hicimos?

Este Blog es Blogger (que es de Google también), y al seleccionar la opción acceder/personalizar/diseño añadimos un Gadget HTML/Javascript (que nos permite digitar directamente nuestros propios códigos para lo que queramos).

Y alli ingresamos el siguiente código:

<!-- Google Translate Element -->
<id="google_translate_element" style="display:block">
</div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "es"}, "google_translate_element");
};
</script>
<p>Source: Español (Spanish)</p>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

El código es tan corto que realmente hay poco por explicar...
tal vez indicar que es indispensable indicar el idioma original de nuestra pagina ("pageLanguage"); y que si indicamos style="display:none", el manual indica que la traducción sería automática respecto al idioma predeterminado de nuestro navegador.. pero he encontrado foros con dudas y mejoras del código porque esa opción no parece funcionar muy bien... bueno, pero tambien podemos hacer que aparezcan solo algunos idiomas.. por que conviene que revisen el link de la pagina que indicamos en la nota agregada referido al tema, aunque como siempre, hay para investigar y probar para mayor detalle...

Que es esto ?

Go to OpenstreetMaps

Go to OpenstreetMaps

Es una aplicacion opensource para poder usar mapas y trabajar geolocalizacion sin interferencias ni restricciones de ningun tipo (incluidas las de Google Adsense).
Para utilizar esta herramienta solo basta ir a la pagina web del proyecto, seleccionar el area a mostrar y elegir la opcion "exportar" (a HTML), el cual nos genera un codigo HTML de un iframe que podemos pegar en nuestra web, y lo que es bastante importante, hasta en nuestras "fan pages" de Facebook (y por eso le hacemos referencia)

Puedes revisar el siguiente link;

http://www.facebook.com/pages/Integration-ourselves-to-Google/120321264650448?sk=app_249347133607

direccionando nuestros "links"..

y para concluir el proceso, hemos abierto varias fans page en facebook, como el caso de nuestra pagina en ingles, así que los seguidores con idioma de navegador diferente del español, sus accesos a facebook serán dirigidos a dicha página (incluido su foro); los seguidores en español son dirigidos a la pagina facebook en español por supuesto..

Como hicimos esto?

Pues similar al caso anterior, agregamos otro gadget HTML/Javascript a nuestro Blog e insertamos el siguiente código:

<script>
wlang=navigator.language;
//document.write(\'Navegador: \'+wlang);
</script>
<script type="text/javascript">

// Choosing facebook wall..
function rut_facebook() {
var wurl_facebook = \'\';
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
if(wlanguage==\'es\'){
wurl_facebook = "http://www.facebook.com/group.php? gid=118999028117456&amp;v=wall";
} else {
wurl_facebook = "http://www.facebook.com/group.php?gid=106728576035212&v=wall";
};
/*
alert(\'wlang: \'+wlang+\'\n\'+\'wlanguage: \'+ wlanguage+\'\n\'+wurl_facebook);
*/
window.open(wurl_facebook,"_blank");
return wurl_facebook;
};

// Choosing facebook forum
function rut_facebook_00() {
var wurl_facebook = \'\';
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
if(wlanguage==\'es\'){
wurl_facebook = "http://www.facebook.com/group.php?gid=118999028117456&v=app_2373072738";
} else {
wurl_facebook = "http://www.facebook.com/group.php?gid=106728576035212&v=app_2373072738";
};
window.open(wurl_facebook,"_blank");
return wurl_facebook;
};
</script>

//our image code..
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="javascript:rut_facebook();" target="_blank"><img style="display:block; margin:0px auto 0px; text-align:center;cursor:pointer; cursor:hand;width: 145px; height: 25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3MkFzl9Ju5nMeLnvyMamsaYLCmdfraIDX2mSaOCM19nYiXEfLkqCa7hv1gqp3h02PJpWVjQofdY69RxcBdfPQVTtyMq2Zlv17s2LkBx3BLFzLniEbnjDx2aJx7wmR_j4tv5VWIENHd1t/s200/inFacebook.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5461327404001030210" /></a>

Las direcciones indicadas apuntan por supuesto a las paginas de facebook en español e ingles según el caso.. y asimismo modifico el parametro "href" del codigo que carga la imagen de facebook insertada en el gadget, pasando como vinculo a la función javascript que nos dirigirá a las rutas que les hemos indicado...

En realidad, en ese mismo gadget hemos cargado hasta 15 funciones, que son las que me dirigen a cada foro al hacer click en los logos de facebook que aparecen en algunos temas (solo basta modificar el vinculo "href" de la imagen que carguemos para que llame a nuestra función), eso nos facilita el mantenimiento de la pagina sin recurrir al head de nuestra pagina html.. y el asunto funciona bien... (lo que podremos aplicar al llegar desarrollo de Gadgets y Widgets), así que así lo dejamos por el momento, hasta ver posibilidades de nuevas mejoras..

..el Boton "Translatethis"

• Considerando una mejora utilizar una traducción empleando medios visuales, también hemos probado la herramienta TranslateThis Button, desarrollada empleando Ajax y el API language de Google, es free, permite varias opciones de configuración (lea la documentación al respecto), y funciona bien para muchos casos; con el siguiente código:

<!-- Begin TranslateThis Button -->
<span class="notranslate">
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div></span>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis({
  fromLang : 'es', // Native language of your site
  busyText: 'Preparing the translation...',
  GA : true, // Google Analytics tracking
//cookie: 'tt-lang', // Name of the cookie, 0 = disable
  ddLangs : [ // Languages in the dropdown
        'es',
        'en',
        'pt-PT',
        'fr',
        'it',
        'ru',
        'ar',
        'zh-CN',
        'ja',
        'ko'
   ],
  noBtn: false, //whether to disable the button styling
  btnImg : 'http://x.translateth.is/tt-btn1.png',
  btnWidth : 148,
  btnHeight : 18,
});
</script>

..el idioma de nuestro navegador

• En nuestros enlaces a Facebook, ahora en 3 idiomas: español, inglés y portugues; hemos hecho variaciones para absolver unas incompatibilidades del Internet Explorer que no reconoce el idioma del navegador empleando la propiedad language del objeto navigator.(sino navigator.browserLanguage), y asimismo que no reconoce directamente a las funciones javascript en las referencias (para lo que hemos utilizado el método "void"), y el código indicado tiene las siguientes variaciones:

--> Para indicar el idioma del navegador hemos utilizado los condiciones de IE y las propiedades navigator.language y navigator.browserLanguage indicadas:


<script>
wlang=navigator.language;
//document.write('Navegador: '+wlang);
</script>
<!--[if IE]>
<script>
wlang=navigator.browserLanguage;
//document.write('Navegador: '+wlang);
</script>
<![endif]-->


--> ...y para las referencias de las imagenes que nos dirigen a cada pagina Facebook, utilizamos el metodo void, como se indica:


<a href="javascript:void(rut_facebook());">myPicture</a>

..nuestra opcion "Contact us"

• Para contartarse con nosotros vía correo GMail, utilizamos el siguiente codigo:

<script type="text/javascript">
function emailForm(){
var daReferrer = document.referrer;
var email = "";
var wlanguage = wlang;
var body_message = "";
wlanguage = wlang.substr(0,2);
switch(wlanguage) {
case 'es':
email= "gicodelab.es@gmail.com";
body_message = "Gracias por contactarse con Integracion Google..%0DFavor considere las normas normales de moderacion, trato cordial y buena redacción";
break;
case 'pt':
email= "igcodelab.pt@gmail.com";
bodu_message = "Obrigado por contactar a Integração Google ..%0DPor favor, considere as regras normais de moderacao, simpatia e boa redacao";
break;
default:
email= "igcodelab.en@gmail.com";
body_message = "Thank you for contacting Google Integration ..%0DPlease consider the normal rules of moderation, friendliness and good drafting";
break;
};
var errorMsg = "error message";
var subject = "Exception Error";
var body_message = "%0D%0D%0D%0D:%0D-----------------------------------------------------------------------%0D"+body_message+"%0D@IG-Codelab Group";
var mailto_link = 'mailto:'+email+'? subject='+subject+'&body='+body_message;
win = window.open(mailto_link,'emailWin');
//window.open('mailto:gicodelab.es@gmail.com')
/* Abre ventana flotante */
if (win && win.open &&!win.closed) win.close();
return mailto_link;
}
</script>

<!-- Form directo OnClick
<div style="border:1px solid black;padding:2px;">
<a href="#" onclick="emailForm();">Contact us</a>
</div>
-->

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="javascript:void(emailForm());"><img style="float:left; display:block; margin:0px auto 0px; text-align:left;cursor:pointer; cursor:hand;width: 148px; height: 37px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitM3auTML0_Qbm9wNJcwkpjoe3FeDFUSNqhZobtX3hMVNM6YudLAgKG4DEDLFFosl-RP49RSuXAR-DP9PjxuZYy_Y4P7PELbMnEMLldUAa9CcPfg6Lmx7i6Nje4tVkdDz5WLzz5fWWcn1V/s1600/IgContactUs.JPG" border="0" alt="" id="BLOGGER_PHOTO_ID_5469673187419347922" /></a>

Nota: En el cuerpo del mail evite en lo posible el uso de caracteres acentuados: áéíóú u otros especiales como dierises, acentos inversos, simbolos u otros, por cuanto "cuelgan" la aplicacion (aún no he encontrado como evitar este efecto y poder utilizar cualquier codigo ascii, habiendo probado incluso utilizando directamente codigos hexadecimales).

..el API language de Google

En lo que respecta a las traducciones de la "alerta" de uso del recuadro de Google Traductor (para seguidores de distintos idiomas), hemos utilizado la API de Google Language y la libreria JQuery (con lo podriamos dar diversos efectos a dicha alerta), utilizando el siguiendo codigo:

<div id="talerta">
</div>
<div id="talerta1">
</div>
<div id="alerta">

<span class="Apple-style-span" style="color: green; font-size: large;"><b>Recuerde que..</b></span></div>
<div id="alerta1">
Este blog esta desarrollado en idioma español pero utilizando <b><span class="notranslate"> Google Traductor </span></b>puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a <span class="notranslate">Integracion Google.</span></div>

y en cualquier otra parte de nuestra pagina html:

<script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
<script>
wlang=navigator.language;
//document.write('Navegador: '+wlang);
</script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("language", "1");
var wlanguage = wlang;
wlanguage = wlang.substr(0,2);
document.write('Navegador: '+wlanguage );
var cadlanguage = ',en,pt,it,fr,de,nl,sv,ja,ru,ko,th,es';
var ltarget = 'en';
var npos = cadlanguage. lastIndexOf(wlanguage);
if (npos>0) {
wlanguage = cadlanguage.substr(npos,2);
} else {
wlanguage = ltarget;
};
function enespanol() {
jQuery("#alerta").hide();
$("#alerta1").hide();
};
function initialize() {
var texto = document.getElementById("alerta").innerHTML;
google.language.translate(texto, 'es', wlanguage, function(result) {
var translated = document.getElementById("talerta");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
var texto1 = document.getElementById("alerta1").innerHTML;
google.language.translate(texto1, 'es', wlanguage, function(result) {
var translated = document.getElementById("talerta1");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
enespanol();
};
if (wlanguage != 'es') {
google.setOnLoadCallback(initialize);
} else {
google.setOnLoadCallback(enespanol);
}
</script>ranslate">Integracion Google.</span></div>

Nota: Este codigo utiliza una API Key de Google, la cual debemos personalizar para nuestras propias paginas web, al igual como hicimos con la API de Google de Maps en nuestros post de Integracion Google 1ra y 2da parte (en este caso nos referimos a la API Key de Google, la cual nos permite emplear las diversas API de Google, entre ellas Google Language y otras Librerias y frameworks), esta ultima que nos permite tener acceso a JQuery, Dojo, Prototype, entre otros)

Geolocalizacion

Es indudable que las diferentes tecnicas de localización son herramientas muy utiles para el desarrollo Web, permitiendonos entre otras cosas, identificar el país de nuestros usuarios, el idioma a utilizar con ellos, elegir la moneda para realizar transacciones, otros. Pero resulta que las tecnicas de geolocalizacion son cada vez mas precisas (especialmente en medios moviles donde incluso de apoyan en servicios de localización GPS), resulta entonces conveniente considerar ambas posibilidades:

Tecnicas de geolocalización "casi exactas"

En este punto resalta las técnicas de geolocalización HTML5, las que realmente tienen una notable precisión, aparte de tenerla disponible en todos los navegadores modernos, y aquí tenemos un enlace que nos mostrará su nivel de precisión, y por supuesto, el código utilizado:

http://html5demos.com/geo

Tal vez vale resaltar que esta técnica tiene como principal requisito que el usuario permita la geolocalización aunque sea una vez (no es de uso "transparente" al usuario), y esto puede de alguna forma ser una limitación..

Otras tecnicas de geolocalizacion..

Vale resaltar como primer punto que estas técnicas si son de uso "transparente" al usuario (no requieren de su autorización), y se basan principalmente en la identificación de la IP del usuario y la ubicación del mismo en tablas prediseñadas; por supuesto, estas técnicas no son precisas como la descrita anteriormente pero tienen un buen rango de eficacia, generalmente a nivel ciudad, lo cual puede resultar bastante conveniente para identificar el país, el idioma y moneda para interactuar con nuestros usuarios y clientes..

Hay varios servicios de geolocalización de este tipo, pero de las que podemos destacar por su vigencia y precisión son:

• Geo Atlas service
• YQL Geo service
• IPinfodb, entre otras.

Saludos
@Mlaynes

Opina sobre las herramientas y API de Google..!