Hablando de Ajax

JQuery es una de las librerías javascript que más rápidamente se ha estado extendiendo durante el último año. John Resig empezaba a postear en el blog del proyecto a finales de enero del 2006, y desde entonces no ha hecho más que cosechar buenas críticas y conseguir apoyos.

Hace unas semanas, anunciaban en su blog la publicación de la nueva versión 1.1, con unas mejoras de rendimiento espectaculares y algunas nuevas funcionalidades. Este mismo lunes posteaban acerca del acuerdo por el cual JQuery va a poder integrarse con la librería de interfaz EXT. Y hoy mismo leo en su blog que JQuery va a pasar a ser una de las primeras librerías en adherirse al estándar OpenAjax, en la definición del cual están participando, entre otros, Mozilla, IBM, Adobe, Opera...

Si eres desarrollador o trabajas en esto del diseño web estarás conmigo en lo útil que resulta en ocasiones disponer de pequeñas chuletas donde apuntar los patrones más comunes al contruir una query, o los diferentes selectores soportados por CSS2, o un listado con funciones de tratamiento de cadenas de texto para PHP...

A estos efectos, los Cheat Sheets de ilovejackdaniels.com son bastante prácticos ( yo tengo 3 copias plastificadas en el escritorio ) y cubren diferentes áreas o tecnologías. Lo mejor: que van al grano. No pretenden ser pequeños manuales , sino guias de consulta rápida para aquellos que ya tienen ciertos conocimientos ( de hecho suelen ocupar una sóla hoja ).

Ya habían corrido por ahí algunas screenshots, ahora es públicamente accesible:

https://www.yahoo.com/preview

Fijaos en la manera que tienen de presentar las nuevas opciones desde el "Take a quick tour" ( superponen un PNG transparente, o cómo ponen en práctica algunas de los últimos patrones de diseño de su librería en las opciones laterales, "mail", "messenger", "radio"...

Destacable también el uso de CSS Sprites para ahorrar ancho de banda en lo que se refiere al uso de iconos pequeños. Se trata de usar una sola imagen que contiene un grupo de iconos pequeños, y mediante CSS mostrar sólo aquella que corresponde al elemento en cuestión. ( CSS Sprites -> https://www.alistapart.com/articles/sprites/ ). De esta manera la imagen para todo un grupo de iconos sólo se descarga una vez.

Días atrás comenté que había estado trabajando en un pequeño experimento para conseguir implementar un sistema para realizar upload de archivos mediante PHP, que permitiera generar una barra de progreso, con la que controlar el estado de la carga de archivos en todo momento.

A continuación encontraréis disponible para descara el código fuente de dicho experimento y una pequeña descripción del paquete y de los requisitos para su puesta en marcha.

Contenidos del paquete

• /cgi-bin/upload.cgi: este es el CGI perl que se encarga de gestionar el upload, además de ir escribiendo todos los datos POST en un único archivo que nos permite controlar el total de datos cargados en el servidor en un momento determinado.
• /upload.php: es el documento principal, que contiene el código HTML y JS necesario para crear dinámicamente los campos file y el listado de archivos que vamos a cargar al servidor, así como dibujar dinámicamente la barra de progreso a partir de las respuestas recibidas por AJAX.
• /ajax_process.php: es el script PHP que recibirá las peticiones AJAX, comprobará el estado del upload y devolverá una respuesta XML con datos como el tamaño total del archivo, la cantidad de datos cargada, los nombres de los archivos...
• /xml.class.php: un par de clases para crear/parsear datos XML.
• /img: contiene dos imágenes opcionales: un fondo animado para la barra de progreso y un icono "en proceso".

Ejemplo en vivo

Podéis ver un ejemplo real en la URL https://www.obolog.com/upload.php

Aún cuando no he conseguido desentramar el misterio de la antena reaparecida, otra misteriosa casualidad ha roto mi paz interior, esta vez relacionada con el trabajo.

Hoy al llegar a la oficina me he encontrado con una recomendación por mail en qué se citaba un artículo en inglés que habla acerca de un sistema de carga de ficheros con barra de progreso usando técnicas AJAX y PHP+Perl como lenguages de servidor.

Da la casualidad que llevo semanas intentando montar un sistema así para el upload de videos y audio en OboLog , y de hecho hace algunos días que he conseguido una primera versión funcional, y me ha sorprendido que el artículo de Thomas Epineer, "Asynchronous file upload with AJAX progress bar in PHP", se ha basado exactamente en los mismos proyectos que el "mix" en qué he estado trabajando, como apunté días atrás en la lista de correo de JQuery.