Una manera ultrafácil de implementar la traducción automática de cualquier software

Esta tarde estaba intentando estudiar (un curso maravilloso por cierto, tengo ya 2/3 completados y estoy disfrutando como un loco) pero uno de mis chimpanvecinos estaba con la música a toda mecha y era imposible. Para aprovechar el rato me puse a adelantar trabajo futuro, y me hice un minisistema facilón para que de aquí en adelante cuando tenga cualquier software (en cualquier plataforma) pueda traducirlo de manera superrápida y sin cambiar nada en el código en sí. Mis lectores habituales no suelen interesarse por estas cosas, pero ya verán que simplemente como concepto intelectual lo van a disfrutar y seguramente esto ayudará a los que aterricen en esta entrada desde Google. Vamos allá.

La idea es la siguiente: imagínense que yo tengo cualquier aplicación (por ejemplo un blog como este) y tengo una serie de botones y menús, que están en español y dicen "inicio", "contacto" y demás. En la programación supongamos que esto se viera así:


(Nota: en realidad esto no está bien hecho, es solo un ejemplo de lo que es meter el texto que nos interesa dentro de otros contenidos técnicos).

Si yo a un traductor le doy esto nos vamos a volver locos los dos: yo para decirle qué cosas tiene que traducir entre toda esa maraña de palabras raras, y él tratando de que no se le escape nada. ¿Qué es lo mejor que puedo hacer? Darle una lista más limpia donde estén solo los textos bien claros y separados, él sustituye cada cosa por su equivalente en el otro idioma, y listos. Le podría dar algo así:


Esto ya es otra cosa, ¿verdad? Le digo "sustitúyeme los textos entre comillas en español por los tuyos en tu idioma" y para él será infinitamente más fácil que lo anterior. A partir de aquí entra mi trabajo como programador, para hacer que la aplicación sea capaz de saber que eso son los contenidos en un nuevo idioma que se añadirá a los existentes.

Los pasos que voy a seguir son:

1) Meter la lista de palabras en un "cartucho", escribir por fuera del cartucho el nombre una etiqueta con el nombre del idioma que hay dentro, y para ponerlo todo más ordenadito antes de la lista voy a ponerle un título a la lista (como si escribo "lista de la compra" y debajo van las cosas que voy a comprar, que en este caso sería la lista de palabras traducidas).

2) Meter el cartucho en "la caja de los cartuchos de idiomas" con todos los demás.

3) Decirle a mi programa: "cuando el usuario te pida cambiar de idioma lo coges de la caja de los cartuchos, cargas el cartucho correspondiente en tu memoria y a partir de ese momento todos los textos que van en los elementos que él verá los sacarás de la lista de textos que hay en el cartucho del idioma que te ha pedido".

Y así, cuando en cualquier momento alguien me traduzca mi programa a un nuevo idioma, no tengo que tocar mi programa para nada: sino simplemente meter la lista de palabras del traductor en un cartucho y guardar el cartucho en la caja de los cartuchos. Luego ya cuando el programa vaya a buscarlo allí estará. Mucho mejor así y más fácil para todos, ¿verdad?

A partir de ahora les voy a enseñar cómo se hace esto en JavaScript, el idioma que me gusta a mí, aunque la estructura de la idea valdría igual para cualquier otro lenguaje de programación. Primero les enseño dos ejemplos de "cartuchos" en JS:


Esto de "var" viene a ser como "cartucho": como ven el cartucho tiene escrito el nombre del idioma, y al principio de la lista he puesto una especie de "clave" que hace de título. después viene la lista de palabras que me ha dado el traductor, yo simplemente he tenido que copiar y pegar en un segundo (en realidad hay formas mejores de automatizar este proceso, pero la idea básicamente es coger los textos y meterlos en el cartucho de la forma que sea).

Una vez que tenemos el cartucho preparadito, brillante y lustroso, ya empieza la parte de programación.Primero vamos a decirle al programa que cree un cajón para los cartuchos: para este ejemplo lo vamos a hacer en JavaScript simplemente así...


Y con esta simple línea el cajón de los cartuchos está fabricado (nota para los programadores que vengan de Google: en el ejemplo estoy usando soluciones supersimples para que las entiendan mejor mis lectores, ustedes quédense con la idea general y ya para lo que es cada detalle busquen maneras mejores).

Y cuando tengamos nuevos cartuchos ¿cómo se meten en el cajón con los que ya haya antes? Vamos a meter en JS estos dos que tenemos y verán qué fácil es:



Hombre, estas cosas hay que aprendérselas pero ya ven que esto cuando te lo van explicando no es tan difícil, ¿verdad? Ya tenemos fabricado el cajón de los cartuchos de idiomas, con un par de cartuchos dentro preparados para que cuando nuestro superprograma tenga que poner los contenidos en la pantalla del usuario vaya a buscar el idioma que necesite (de momento solo tenemos estos dos pero ya ven qué fácil sería meter más).

Llegados a este punto le podríamos decir al ordenador que cada vez que tenga que mostrar un texto en la pantalla se vaya al cajón, encuentre el cartucho, lea el texto que necesita y lo escriba en la pantalla: pero eso es un coñazo y en programación cuanto menos haya que trabajar mucho mejor. Así que lo que se me ha ocurrido esta tarde es un truco para ahorrarnos tener que ir al cajón a mirar una y otra vez:

1) Le decimos al programa que cree un cartucho vacío.

2) Cuando el usuario decida en qué idioma quiere ver las cosas, el programa va al cajón (solo una vez), encuentra el cartucho, y guarda una copia del cartucho en su cartucho vacío (y que se quede con la copia para no tener que molestarse en ir más a buscar el original, al menos hasta que el usuario cambie de idea y elija otro idioma).

3) A partir de ese momento, cada vez que haya que mostrar algún texto en la pantalla el programa simplemente mirará su copia (con los contenidos en el idioma elegido) e irá escribiendo lo que lea desde ahí más cómodamente.

Esto en JS se hace así: primero creamos el cajón vacío, si se fijan es como los otros de español e inglés pero este no tiene nada dentro de las llaves...


Y ahora le decimos lo que hay en el punto 2 anterior: que vaya al cajón de los cartuchos, encuentre el del idioma que el usuario quiere y haga la copia en el cartucho vacío para leerlo a partir de ahora. El código JS es un poco más lioso y no vamos a perder el tiempo con esto, básicamente es lo que les he dicho así que confíen en mí y no se compliquen con los detalles:


Y ya está. El programa ya sabe que tiene un cajón de los cartuchos donde están los cartuchos de idiomas, y ahora cuando el usuario le pida un idioma ya puede instantáneamente irse a mirar en el cajón, localizar el cartucho que le interesa, y hacerse una copia para trabajar directamente con ella y no tener que irse más a mirar en el cajón.

Solo como curiosidad para los programadores, la manera de cambiar en la práctica un idioma (por ejemplo fijar que a partir de ahora aparezca todo en español) sería que cuando se pulse el botón correspondiente o el usuario diga de la manera que sea que eso es lo que quiere simplemente se ejecute esta línea:


Y a partir de ahí el programa irá leyendo los elementos que va a colocar en la pantalla directamente de su copia del cartucho. Simplemente como ejemplo para que vean qué fácil queda todo con este sistema, vean cómo en cuatro líneas puedo cambiar dos veces el idioma y encontrar el texto que me interesa para mostrarlo automatizadamente ya en el idioma correcto:


El resultado de esas cuatro líneas en la pantalla (mostrado en plan básico para no liarlo más) sería este:


¿Qué pasa si un día quiero añadir el italiano a los idiomas de mi programa? Magia:



Booom. Ya cada vez que lo usemos será igual de fácil:



¿A que es bonita la programación? :-D

Ya a modo de resumen final y para ayudar a los paracaidistas de Google, aquí tienen todo el código JavaScript ordenado con el output correspondiente: