ZedBlog

Gettext es uno de los sistemas mas utilizados para internacionalizar aplicaciones. Básicamente, un programa (xgettext) analiza el codigo fuente de los archivos de la aplicación, extrae las cadenas  y genera un catálogo que permite al usuario realizar la traducción usando una aplicación, como por ejemplo Poedit. Luego el catálogo (archivo .po) se compila y se crea un archivo binario con extensión .mo, el cual posee todas las traducciones en un formato optimizado.
Lamentablemente, el comando xgettext carece de soporte para Javascript. El intérprete de Python es lo mas cercano posible, pero a mi no me ha funcionado correctamente porque no analiza bien las expresiones regulares y algunas cadenas.

Hasta ahora la forma mas común de internacionalizar una aplicación en Javascript era identificar cada una de las frases con una clave o variable, pero el problema de esta técnica es que hay que agregar las frases manualmente.

He decidido desarrollar un pequeño script en PHP que se utiliza en conjunto con Poedit y facilita esta tarea. Éste funciona como intérprete Javascript y analiza el codigo fuente para extraer las cadenas y generar un catálogo,  luego se utiliza otro script para convertirlo a formato JSON, el cual se incluye en nuestra página como un archivo externo. De esta manera tenemos disponible las frases traducidas en una variable global.

El intérprete es lo suficientemente inteligente para detectar cadenas con o sin comillas escapadas y excluir las expresiones regulares y comentarios.

Para utilizarlo, primero debemos instalar Poedit. Abrimos la aplicación, vamos a Archivo -> Nuevo catálogo y completamos los datos:

Cambiamos a la solapa Rutas y agregamos la ruta de la carpeta que contiene nuestros archivos Javascript:

Cambiamos a la última solapa y agregamos los nombres de las funciones que usaremos para invocar una traducción. En este caso usamos el guión bajo y como alias “jsgettext”:

La magia ocurre cuando agregamos el nuevo intérprete. Vamos a Editar -> Preferencias, seleccionamos la solapa de intérpretes y hacemos click en “Agregar”:

Luego simplemente debemos actualizar el catálogo haciendo click en el botón “Actualizar catálogo” y nos aparecerán las frases extraídas de los archivos JS. Nos tomamos el trabajo de traducirlas y guardamos el catálogo.
Descartamos el archivo .mo que nos genera el programa ya que a continuación vamos a transformar el archivo .po en un .js usando la utilidad po2json.php:

php /ruta/a/jsgettext/po2json.php -i catalog.po -o l10n.js -k l10n

Eso nos genera un archivo con la variable global “l10n”, cuyo valor es un objeto que contiene las frases traducidas.
Podemos acceder a una traducción usando la función “_”:

function _(s) {
return typeof l10n[s] != 'undefined' ? l10n[s] : s;
}
alert(_("Hello world"))


El código esta alojado en Google Code: http://code.google.com/p/jsgettext/
Pueden reportar bugs o enviar alguna sugerencia o mejora

Creo que para muchos ha sido un desafío implementar un upload de archivos con barra de progreso ya que se debía enviar el formulario a un iframe oculto y mientras tanto revisar el progreso haciendo peticiones AJAX en pequeños intervalos. A esto había que sumarle todo el proceso del lado del servidor para calcular el porcentaje, y no todos los lenguajes nos proveen esa información.

Si bien la posibilidad de leer archivos ya existía en Firefox 3, combinado con las nuevas características de la última versión de este navegador, se pueden implementar funcionalidades mas avanzadas.

Con la nueva API podemos leer archivos del lado del cliente y de este modo enviar el contenido binario mediante una petición usando el nuevo método sendAsBinary() del objeto  XMLHttpRequest.

Para acceder a los archivos, tenemos la propiedad files disponible en los elementos input de tipo file y ademas en el objeto DataTransfer (accesible en las operaciones de drag & drop). Esta propiedad es un objeto de tipo FileList que representa una colección de objetos de tipo File. Un objeto File dispone de propiedades que proveen información básica del archivo, como el nombre, el tipo y el tamaño.

Gecko 1.9.2 imlementa el objeto FileReader, el cual nos permite leer archivos en forma asincrónica y asi evitar que el navegador no responda durante la operación de lectura.

Si bien tenemos la posibilidad de enviar el contenido de un archivo como binario, para enviar múltiples archivos debemos generar el POST tal cual lo haría un formulario con el atributo enctype="multipart/form-data".

Pueden ver en acción un ejemplo muy sencillo – basado en jQuery – que permite seleccionar multiples archivos y enviarlos en una sola petición. Se puede ver el progreso mediante una barra. Del lado del server, con PHP hago un print_r() con el contenido de la variable $_FILES. Lo pueden ver con el Firebug.

Veamos paso a paso el código Javascript del ejemplo.

upload = [];

j(function() {
	j('#upload-progressbar').progressbar();

	j('#files').bind('change', function(e) {
		var files = e.target.files;
		var fileCount = 0;
		j.each(files, function(k, v) {
			fileCount++;
			reader = new FileReader();
			reader.onloadend = function(e) {
				upload.push({
					name : v.name,
					type : v.type || 'text/plain',
					bin : e.target.result // el contenido del archivo
				});
				if (upload.length == fileCount) uploadFiles();
			};
			reader.readAsBinaryString(v);
		});
	});
});

Al cargar la página, agregamos el evento change para el input. Cuando el usuario selecciona los archivos, iteramos por cada uno de ellos y leemos su contenido usando el metodo readAsBinaryString() del objeto FileReader. Al ser asincrónico, debemos utilizar el evento onloadend para detectar cuando terminó la operación. Dentro de esta función creamos un objeto con algunas propiedades del archivo y guardamos una referencia en un array global. Cuando detectamos que se han leído todos los archivos, procedemos a enviar el formulario:

function uploadFiles() {
	var xhr = new XMLHttpRequest();

	j('#upload-progressbar').show();

	xhr.upload.addEventListener('progress', function(e) {
		if (e.lengthComputable) {
			var perc = Math.round((e.loaded * 100) / e.total);
			j('#upload-progressbar').progressbar('value', perc);
		}
	}, false);
	xhr.upload.addEventListener('load', function(e) {
		j('#upload-progressbar').progressbar('value', 100);
	}, false);

	xhr.open("POST", '/es/demos/ajax-upload');

	var BOUNDARY = '---------------------------1966284435497298061834782736';
	var rn = "\r\n";
	var req = '';
	j.each(upload, function(k, v) {
		req += "--" + BOUNDARY + rn + "Content-Disposition: form-data; name=\"files[]\"";
		req += '; filename="' + v.name + '"' + rn + 'Content-type: ' + v.type;
		req += rn + rn + v.bin + rn;
	});
	req += "--" + BOUNDARY + '--';

	xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
	xhr.sendAsBinary(req);
}

Creamos un objeto XMLHttpRequest. Aquí vemos que xhr.upload hace referencia a un objeto que contiene información sobre el proceso de upload y nos ofrece algunos eventos útiles. Abrimos una conección para enviar el formulario por POST y luego generamos el contenido binario que recibiremos en el servidor. Debemos establecer que el Content-Type es de tipo multipart/form-data, y como indica el nombre, quiere decir que la petición esta formada por múltiples partes. Para separarlas se utiliza una cadena que no aparezca dentro del contenido de los archivos (si estan aburridos pueden leer mas detalles aquí). En este caso es la variable BOUNDARY. Finalmente, la magia ocurre en el método sendAsBinary(). Pueden ver mas detalladamente el contenido del POST con el Firebug.

Esta técnica nos permite, por ejemplo, hacer una vista previa de las imágenes en el cliente o redimensionarlas antes de subirlas.

Quizas piensen en la seguridad como yo e intenten hacer esto:

j('#files').val('/etc/passwd');

Pero desgraciadamente afortunadamente nos encontramos con un error de seguridad

No he investigado mucho en cuanto a compatibilidad en distintos navegadores. Si alguien tiene información al respecto es bienvenida.

UPDATE: El comportamiento en Firefox 3.6.2 sobre Ubuntu es algo inestable. A veces envía la petición pero se queda esperando una respuesta indefinidamente, y al seleccionar varios archivos se cierra el navegador de forma inesperada.

Veamos el caso de una aplicación Web donde se realizan búsquedas en base a cierta información ingresada por el usuario, y para generar los resultados, el sistema debe consultar varios servicios web, los cuales tardan varios segundos en responder. Habría que buscar una forma de minimizar el tiempo de búsqueda para que al cliente le lleguen los resultados antes que la muerte.
La solución que propongo fue aplicada en un sistema de búsqueda y reserva de vuelos y hoteles.

Se pueden utilizar varias técnicas, yo tuve en cuenta las siguientes:

• Acceder a los web services en forma concurrente utilizando CURL: Se podría buscar y generar la página de resultados directamente, o hacerlo mediante AJAX, lo cual nos permitiría hacer un polling e ir obteniendo resultados parciales.
  Sería la solución mas elegante, pero hay que tener en cuenta que desgraciadamente no todos los web services son de tipo REST y algunos usan SOAP, por lo tanto se hace dificil implementarlo usando esta librería porque habría que generar el XML e interpretar la respuesta manualmente. Mucho trabajo a mi parecer.
• Implementar threads: Quizás piensen en el suicidio antes de tener en cuenta esta opción.
• Buscar la solución en el lado del cliente y enviar una petición AJAX por cada web service: Aún así tenemos el problema de los límites de conección por host que imponen algunos navegadores como IE 6 y 7.

En principio opté por la última opción, pero me vi forzado a descartar el uso de AJAX debido a que algunos browsers imponen un límite de 2 conecciones concurrentes por host y yo necesito consultar 6 servicios web. Para evitar este límite tenemos que engañar al navegador creando al menos 3 subdominios, los cuales nos permitiría realizar 6 peticiones en paralelo, 2 por cada uno.
Quizás la solución no es muy elegante pero es muy usada para agilizar la descarga de los distintos componentes de la página. Tal es el caso de Google Maps, que utiliza subdominios mt0.google.com, mt1.google.com, mt2.google.com, etc.
Si bien no podemos enviar una petición a otro subdominio usando AJAX (hasta el momento), podemos inyectar un script en el documento y cumpliría la misma función, siempre y cuando la respuesta sea en formato JSON. Aca va un ejemplo usando jQuery:

$(function() {
    var webServices = [1,2,3,4,5,6]; // id's de los webservices
    var count = 1, host;
    for (var i = 0; i < webServices.length; i++) {
        // generamos un host
        host = 'http://ws' + count + '.' + location.host + '/search?ws=' + i;
        if ((i+1)%2 == 0) count++;
        // enviamos el request, jQuery inyecta el script en el documento al detectar otro dominio
        $.getJSON(host, function(json) {
            // actualizamos los resultados...
            $('#results').html(json.results);
        });
    }
});

Aunque en el título menciono a PHP, mas bien nos limita en vez de darnos una solución práctica.

Una de las nuevas características de los navegadores actuales que introdujeron soporte para HTML5 es la API de Geolocalización, la cual nos permite obtener las coordenadas de la posición actual del usuario. Actualmente solo Firefox 3.5  y Opera 10 beta lo implementan en forma nativa, pero el servicio también está disponible instalando Gears.

La API hace transparente al programador la forma en que se obtiene la posición del usuario. Hay varias formas de determinarla y éstas dependen de la plataforma y el dispositivo del usuario. Si se accede desde un dispositivo con GPS, se podrá obtener las coordenadas en forma casi exacta. Si se accede desde una PC o móvil sin GPS, el navegador envía una solicitud al servicio de geolocalización de Google con información sobre los puntos de acceso WiFi cercanos, aunque en este último, la exactitud de la posición obtenida deja mucho que desear en algunos casos.

A continuación les dejo un código de prueba que usé para determinar la localización con Firefox 3.5.
Irónicamente, a pesar de estar ubicado en el barrio de Recoleta, las coordenadas resultantes me ubican en Puerto Madero a metros de las oficinas de Google.

if (navigator.geolocation) {
    // nos aseguramos de que el browser soporte la API
    navigator.geolocation.getCurrentPosition(function(position) {
    	var latitude = position.coords.latitude;
    	var longitude = position.coords.longitude;
        // aca podemos ubicar el punto en un mapa
        // o hacer una geocodificación inversa para obtener la dirección
    }, function(error) {
	// error es un objeto con las siguientes propiedades:
    	// - code: código de error
    	// - message: mensaje de error
    });
}

Al método getCurrentPosition() se le envía como primer parámetro un callback que recibirá un objeto con las propiedades de la posición. El segundo parámetro es opcional y es un callback que se llamará si ocurre algún error en el proceso.

Si usamos la API de Gears, el proceso es el mismo, salvo que tenemos algunas opciones adicionales, incluso el objeto position ya nos devuelve la dirección luego de hacer una geocodificación inversa.

Enlaces útiles:

• W3C Geolocation API
• Mozilla Developer Center: Using Geolocation