Desarrollador Web, Gerente de la unidad de desarrollo de Maxnegocios.com.

Cambiar idioma

| miércoles, 24 de febrero de 2010
Una de las caracteristicas que debería tener un portal que pretenda ser global, es la posibilidad internalicionalizarse adecuadamente, internacionalizar un portal correctamente no solo es traducir a cuantos idiomas queramos, sino tomar en cuenta formatos de fecha, moneda, uso horario etc, en este manual voy a abordar solo el cambio de idioma.

Existen muchas maneras de cambiar un idioma en un portal y no depende de la plataforma sino del método, podemos usar para cada cadena a traducir arreglos, tablas, archivos de textos, etc.

Yo uso Poedit, una aplicacion muy sencilla y con licencia GPL, porque la uso? es portable, centralizada, facil de usar, te advierte sobre problemas de encode, es universal (la puedes usar para php, asp, c++, vbasic, etc), liviana, exporta la cadena a traducir a formatos officce y html ideal para entregar al traductor, te indica sobre parrafos obsoletos o que ya no usas en tu proyecto, te informa sobre nuevos parrafos en tu proyecto para que los traduzcas, etc, etc.

Antes de abordar un proyecto, lo primero que debemos preveer es la posibilidad que sea sujeta a cambio de idioma, este manual lo voy a hacer como lenguaje de referencia php. Si ud cree que su proyecto será sujeto a cambio de idioma, asegurese primero de dos cosas:

1.- que tu php tenga instalada la funcion gettext, como puedes saber esto? corre phpinfo() y busca si gettext esta activada/enable.

2.- para cada cadena que vas a tradudir, asegurate y tomalo como costumbre, imprimirla de la siguiente manera: echo _("Hola mundo"); print _("Hola mundo"); es decir, colocando "_" antes de la cadena como se indica. Tomado como costumbre porque nunca sabes cuando te tocará traducir un portal.

Puedes conseguir Poedit aca:

http://www.poedit.net/download.php

Si el enlace esta roto, buscalo el google "poedit download".

Ahora bien, al punto...

Poedit maneja basicamente dos archivos .po y .mo, y primero corresponde a las cadenas que has de traducir y el segundo es el catálogo compilado. En Poedit los archivos .po se llaman catálogos, cada archivo .po contiene la traducción de las cadenas a un idioma determinado.

Voy a dividir este manual en 3 puntos.

1.- Instalación de Poedit
2.- Preparar el proyecto para traducir
3.- Adecuar el .php para la traduccion

1.- Instalación de Poedit.

Una vez que hayas bajado el Poedit ejecutalo, te aparecerá esta ventana donde te pedirá que elijas tu idioma o el que quieras que tenga la aplicación:



Luego de esto, Poedit te muestra una venta donde te notifica que debes llenar cierta información:





... y finalmente Poedit instalado:



2.- Preparar el proyecto para traducir

Es de suponer que nuestras cadenas a traducir se encuentran enmarcadas con cualquiera de las dos siguientes funciones: echo _(""); ó print _("");

Prepara las carpetas que contendrán la traducción, en el directorio raiz de tu proyecto debes tener un directorio con la siguiente sintaxis:

"locale/xx_XX/LC_MESSAGES", donde:

locale: dejalo tal como está

xx_XX: es el codigo correspondiente al idioma y país elegido (en el caso de este ejemplo será en_GB), los códigos de país a utilizar son los definidos en la norma ISO 639, por ejemplo: ES (España), FR (Francia), DE (Alemania), GB (United Kingdom), IT (Italia), PT (Portugal), etc.

Lo que quiere decir que si vas a traducir tu proyecto a ingles, debes tener en el root el siguiente directorio:

locale/en_GB/LC_MESSAGES

Ahora bien, ya tenemos instalado Poedit, se supone que ya nuestro proyecto ya está listo para traducir puesto que las cadenas las imprimimos con echo _("") y la carpeta contenedora del catálogo a traducir ya esta creada.

El siguiente paso es crear el catalogo, abre Poedit, para crear un nuevo catálogo (osea una nueva traduccion a otro idioma), hay que elegir el menú "Archivo > Nuevo Catálogo..." y completar primero las preferencias del catálogo, como se indica en la siguiente imagen:



En la pestaña "Información del proyecto" deben rellenarse al menos los campos:

"Idioma" (idioma al que se van a traducir las cadenas de texto)
"País" (país en el que se utiliza el idioma a traducir)
"Juego de caracteres" (juegos de caracteres del archivo .po, normalmente iso-8859-1 o utf-8).

Quedará algo como lo que sigue:



Bien ... ahora debes indicarle a Poedit donde se encuentra la carpeta que contendrá el catalogo que estas creando, si notas la siguiente pestaña a "Project info/Información del proyecto" es "Paths/Carpetsa" dale click para indicar donde esta la carpeta en tu disco duro, como se muestra en la siguiente imagen:



Recuerda: debe incluirse en "Directorio raiz" el camino hasta la carpeta en la que se encuentra la página web y en "Carpetas" debe agregarse un punto (.), si un punto, el caracter punto hace que busque en el directorio indicado, para añadir un camino hay dar clic en el botón "Nuevo elemento".

Al pulsar "Aceptar" Poedit te pide que grabes el catalogo:



este archivo debe llamarse "messages.po" no le coloques otro nombre, asi es como trabaja Poedit, si le colocas otro nombre Poedit no lo reconocerá.


Inmediatamente despues, Poedit analiza todos los archivos que se encuentran en los directorios indicados y muestra las cadenas para traducción, como se muestra a continuación en el ejemplo:



Observa que para cada fila, existen abajo dos entradas, una con el texto original y la de abajo en blanco para que agreges la traducción, esto lo debes hacer uno por uno, no existe un proceso automático, si conoces el lenguaje con el que se hara la traduccón haslo enseguida, en el caso que sean varios lenguajes o que no conoces bien el lenguaje a traducir, Poedit te puede exportar todas esas cadenas para enviarlas a un traductor que es lo que yo hago.

Perfecto, que tenemos hasta el momento:
1.- Tenemos Poedit instalado
2.- Tenemos el proyecto preparado con echo _("");
3.- Tenemos el catalogo
4.- Tenemos la traducción

Que nos falta? nos falta que php haga la traducción cuando el usuario seleccione el idioma

3.- Adecuar el .php para la traduccion

Para este paso tambien existen muchas maneras de hacerlo, lo importante es lograr que php localise el archivo de traducción que se esta usando según el idioma traducido.


[php]


$language="en_GB";


putenv("LC_ALL=$language");


setlocale(LC_ALL, $language);


bindtextdomain("messages", "./locale");


textdomain("messages");


print "

[/php]


El primer argumento de las funciones bindtextdomain y textdomain tiene que ser el nombre del archivo po que se haya creado.

Para que el usuario pudiera elegir el idioma de la página se podría, por ejemplo, añadir unos enlaces que llamaran a la página enviando el código del idioma:

[php]



$language=(isset($_REQUEST['language']))?trim(strip_tags($_REQUEST['language'])):"es_ES";


putenv("LC_ALL=$language");


setlocale(LC_ALL, $language);


bindtextdomain("messages", "./locale");


textdomain("messages");


p r i n t "
English -
Español
p r i n t "
[/php]


 
Nota: se han modificado las etiquetas de php para que no se interprete.

En este caso se hace referencia al archivo de traducción al castellano, que no existe, así que las cadenas no se traducen (pero como están en castellano, el resultado es correcto).

Observen como funciona con varios idiomas en: www.maxnegocios.com, fijense que la variable no se pasa por GET como en el ejemplo anterior y el resultado es inmediato, en este caso lo programé para no se viera que idioma se esta pasando.

Espero que me haya explicado bien, si no entienden me escriben, lo mas seguro es que no les conteste si no veo la palabra dinero en el correo.
"._("Esta página está en castellano")."
\n";
\n";

Captcha

|
El siguiente artíclo trata sobre el método anti spam Captcha, hace días me dediqué a estudiar como se fabrican y realmente es muy, muy, muy sencillo crear nuestro propio captcha, lo complicado viene cuando nos ponemos creativos a añadir funcionalidades.

Como siempre, el artículo completo esta hospedado en t35, pueden verlo aca

Notas de jQuery

| viernes, 19 de febrero de 2010
Ha nacido mi hijo, y he estado un poco desconectado del blog, de vuelta por aca, colocaré algunas anotaciones que he realizado cuando me dediqué a aprender jQuery.

jQuery, es un framework de Javascript que permite simplificar la manera de interactuar con los documentos web, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con las tecnologías AJAX a páginas web necesitando mucho menos tiempo y código para hacerlo.

Este apunte esta dividido en varios capitulos por llamarlo de alguna manera.

Cap #1.- Empezamos a ver los selectores: Acceder a partes concretas del DOM con selectores; El DOM; La Función Factoría $ ( ); Selectores CSS; Selectores XPath.

Cap #2.- Veremos como trabajar con selectores CSS, en este ejercicio trabajaremos con tablas y la manera como podemos cambiar el estilos de sus elementos.

Cap #3.- Eventos y Gestores de Eventos. Como hacer que el Código vigile y responda: Ejecutar tareas cuando se carga una página; Ejecutar múltiples scripts con un único selector; Abreviaturas de Código; Eventos iniciados por el Usuario; uso del método .bind( ) y el evento click; Uso de la palabra clave this; Uso de la iteración implícita de jQuery.

Cap #4.- En esta practica empezamos con una introducción al uso de efectos y vemos y trabajamos con el método .CSS: Modificar CSS inline; Uso del método .CSS como Getter y Setter; Uso de los métodos parseFloat( ) y .slice( ).

Cap #5.- Seguimos viendo los Eventos y gestores de eventos: Iteración implícita; Creación de colas y encadenamientos; Atajos de Evento; Eventos Complejos; .toggle( ) y .hover( ); Mostrar y ocultar elementos del DOM; Personalizar aspecto del cursor sobre distintos elementos.

Proximamente...

Cap #6.- Como cambiar aspecto y contenido de la página con comandos. Manipulación de atributos; Modificar varios atributos a la vez; El función loop .each; Los métodos .attr( ) y .removeAttr( ); Crear Código html con la función factoría $ ( ); Metodos para insertar código enpáginas web.

Cap #7.- Manipulación del DOM: Mover elementos. Crear un sistema de notas al pie; Uso de .append( ); .appendTo( ) y wrap( ).

Cap #8.- Métodos AJAX de jQuery. Las tecnologías AJAX; Cargar datos de modo asíncrono; AHAH(Asynchronous HTTP y HTML), añadir HTML; El método .load( ); Trabajar con Objetos JavaScript; La sintaxis JSON; Funciones jQuery globales; Uso de la función global $.getJSON( ); Ejecutar un Script; Acceder directamente a un script desde jQuery; uso de la función global $.getscript( ).

Cap #9.- Trabajo con AJAX y XML en JQuery. Cargar un documento XML; La función $.get( ); Uso de la sintaxis XPath en jQuery; Elegir un formato de datos: ventajas e inconvenientes de cada uno.

Cap #10.- Pasar Datos al Servidor. Ejecutar una petición GET; Ejecutar una petición POST; Uso de Serialize( ); Los métodos .ajaxStart( ) y .ajaxStop( ); Creación de un throbber; La función de bajo nivel $.ajax( ); Ajax y Eventos; Determinar el alcance de los eventos. Usar Event Bubbling.

Este curso lo tomé de videotutoriales.com dictado por Jesús Conde, se los recomiendo, estos apuntes no son más que la documentación de mis practicas del año pasado y este año y que me parecieron importante tenerlas a la vista, vayan a la fuente original si es preciso detallar mas a fondo.

01022010

| lunes, 1 de febrero de 2010
Dato curioso, hoy la fecha es palindroma, se lee igual al derecho y al reves. No ocurría esto desde hace 891 años, estaba yo pequeño recuerdo cuando sucedió por última vez.