JQuery cumple su primer año

JQuery celebra su primer cumpleaños y lo hace liberando una nueva versión: la 1.1.
Las novedades más interesantes:

  • Aumento de velocidad
  • Más facilidad de uso tras simplificar su API

Además han corregido un montón de errores y han mejorado la documentación, que ahora puede encontrarse en docs.jquery.com, con una referencia de su API, plugins y tutoriales variados. Tambien estrenan nueva interfaz en su web.

sitio web de jquery

Desde que empecé a usarla con el thickbox, me he ido acostumbrando a este «framework» realmente sencillo y ligero.
Si áun no le has dado una oportunidad, quizá este sea un buen momento para integrarla en uno de tus proyectos.

Las tres C de la optimizacion AJAX

  • Combina – Siempre que sea posible agrupa los ficheros de imagenes, css y javascript. Cuando se trabaja con AJAX, mientras menos peticiones al servidor, mejor. El resultado es que puedes obtener imagenes agrupadas como esta de la pagina home de Yahoo!, que usa CSS para mostrar la seccion apropiada de la imagen.
  • Comprime – Usa la compresion para ahorrar ancho de banda y reducir el tiempo de las descargas. Se pueden usar las herramientas JSMin o ShrinkSafe junto con el mod_gzip de Apache.
  • Cache – ¿por que recargar contenido estatico si el navegador puede tenerlo en cache? Se pueden usar plugins de FireFox como el TamperData para asegurarnos de que el cacheado se esta haciendo como deberia.

Paginas sin fin

La tecnología AJAX, cuando es bien usada, nos está permitiendo cambiar el concepto de funcionamiento de la web. Al menos esto es lo que nos proponen desde unspace con su artículo «endless pageless«, que se podría traducir por «paginás sin fin, sin paginación».
La idea es usar la tecnología AJAX para ir obteniendo nuevos resultados conforme el usuario vaya necesitándolos, en vez de presentar los enlaces «siguiente página» o «más» a los que estamos acostumbrados. Podeis ver un ejemplo de esto en el humanized reader. Vereis que conforme vais llegando al final de la página se cargan más y más posts de forma que parece que la página es inacabable y sin haber tenido que pulsar ningún enlace, sino que la acción que realizamos es simplemente la de «llegar al final» de la página.
Quizá en este caso concreto no creo que sea demasiado útil (aunque seguro que hay gente a la que le encanta ;) ) pero a mí se me ocurren varias ideas para usarlo.

Dojo 0.4 ya está aquí

dojo 0.4 ejemplos

Los chichos del Dojo toolkit nos traen una nueva versión de sus herramientas javascript y vienen cargaditos de nuevas funcionalidades:

  • dojo.a11y: la fundación para la accesibilidad (a11y), ha implementado algunos de los widgets de esta versión e implementará algunos más para la siguiente (0.5). Dojo empieza a ofrecer funcionalidad completa desde teclado e integración con modos de alto contraste así como lectores de pantalla para las personas discapacitadas.
  • dojo.charting: Un motor de creación de gráficas que implementa distintas posibilidades usando gráficos vectoriales.
  • dojo.gfx: una API para gráficos vectoriales en 2D que funciona de forma nativa en los navegadores como SVG o VML (internet explorer)
  • dojo.i18n: un paso más para dar soporte completo multiidioma a todo el toolkit.
  • dojo.lfx: importantes mejoras como las animaciones «encadenables».
  • dojo.namespaces: soporte para espacios de nombres extensibles y para la carga automática de widgets.
  • dojo.widget: nuevos widgets como el Clock, FilteringTable, ProgressBar, y mejoras al Editor2 y el AccordionContainer. Traducción a varios idiomas del DatePicker y algunos.
  • AOL contribuye con un «linker for Javascript». Una especie de compresor, que ademaÅ› genera documentación de forma inteligente.

Lo que más me ha llamado la atención: el ejemplo de la gfx con el reloj analógico (podeis tirar de las manillas para cambiar la hora).

Podeis encontrar el anuncio y más información en blog del dojo toolkit

Documentando nuestro codigo javascript

Hasta ahora, conocía bastantes utilidades para documentar el código PHP, Java, C++… pero no conocía muchas para javascript.
Como cada día este lenguaje va tomando importancia en nuestras aplicaciones y empezamos a escribir clases y librerías completas, creo que es importante contar con una de estas herramientas.
En concreto me refiero a Natural Docs.

Con esta herramienta y 10 o 15 minutos dedicados a formatear un poco nuestros comentarios, conseguiremos disponer de documentación clara y estructurada en html.
Además incluye tooltips y una utilidad de búsqueda.

Podes ver un ejemplo de como queda en: http://people.apache.org/~jkuhnert/

Aplicaciones colaborativas con Comet

Diego Gomez Deck recopila un par de ejemplos de uso de la tecnología Comet para construir aplicaciones colaborativas. Podeis leerlos en:

Y tambien puedes ver los videos que ha preparado:

Merece la pena echarles un vistazo, aunque peligra el estado de inactividad de vuestro cerebro ;). Viendo estos ejemplos ¡se te ocurren miles (o millones) de posibilidades!

Aplicaciones con Comet

Usando el widget dojo ComboBox

Uno de los controles de interfaz que siempre he echado en falta en HTML ha sido el control ComboBox (o caja combinada), que une la funcionalidad de un campo de texto simple con una lista de elementos. El equipo de dojo ha desarrollado su equivalente usando javascript y el DOM y dándole funcionalidad AJAX. Además se han preocupado de que funcione en los principales navegadores (IE, Mozilla, KHTML/Safari y Opera).
A pesar de llevar ya un tiempo y disponer de una comunidad que va rápidamente en aumento, uno de los problemas del Toolkit Dojo es su carencia de buena documentación y ejemplos de uso. Ésta es la razón por la que me gustaría contribuir con este artículo a dar un ejemplo de uso real de este «widget». En el ejemplo me voy a centrar exclusivamente en el lado cliente (XHTML + CSS + AJAX).

Durante el desarrollo de Casarus, estoy poniendo en práctica muchas de las novedades de la programación en lado cliente, ya que creo que contribuyen a mejorar la experiencia del usuario y ayudan a que consiga lo que quiere de forma más fácil y más rápida. En este caso, he usado el control ComboBox para ayudar en la introducción de la población en un formulario de búsqueda, de forma que una vez elegida la provincia, al ir escribiendo en el cuadro de la población se va autocompletando el nombre de la misma desde la lista de poblaciones de la provincia elegida. Una imagen vale más que mil palabras:

Dojo ComboBox

Lo que queremos conseguir es que cuando el usuario seleccione una provincia, el control comboBox se llene con las poblaciones de esa provincia, de forma que ayuden al usuario a autocompletar el nombre que busca.
Lo primero que tendríamos que tener es una base de datos donde se relaciona las poblaciones con su provincia correspondiente y un script que dada una provincia genere una respuesta JSON (es el único tipo de datos que acepta el dojo ComboBox por el momento). En nuestro caso ese script es http://www.casarus.es/ajax/poblaciones/json/29. Donde el 29 del final indica el código de la provincia elegida (en este caso Málaga). Esto generaría una salida como:

[
  ["Albaicin","24343"],
  ["Alcaucin","24344"],
  ["Alcorrin","24345"],
  ["Alfarnate","24346"],
  ["Alfarnatejo","24347"],
  ["Algarrobo","24348"],
  .
  .
  .
]

Como veis se trata de un array javascript que en cada posición contiene otro array con dos campos: el nombre que aparecerá en la lista, y el valor que tiene ese nombre para el sistema (seria el equivalente a lo que va entre las etiquetas «option» y lo que va dentro del «value» de la misma «option»).

Crear el control ComBoBox es bastante sencillo. Incluimos dojo:

<script type="text/javascript" src="public/js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require('dojo.widget.ComboBox');
</script>

Creamos el control en el lugar adecuado (dentro de nuestro form) como si se tratara de un control de tipo input normal:

<input dojoType="ComboBox"
  dataUrl="http://www.casarus.es/ajax/poblaciones/json/1" 
   style="width: 300px;" autoComplete="true" name="poblacion" id="comboPoblaciones" />

Esta sentencia, creará el control ComboBox y lo llenará con los valores obtenidos desde la dirección que hemos especificado en la propiedad «dataUrl» (las poblaciones de Ávila). Y automágicamente nuestro control ComboBox ya estará funcionando.

Lo siguiente es conseguir que cuando se cambie la provincia, el control combobox se actualice con las poblaciones de esta nueva provincia. Supongamos que la lista de provincias es:

<select name="provincia" id="provincia" onchange="actualizaPoblaciones (this.value);">
	<option value="1" selected>Alava</option>
	<option value="2">Albacete</option>
               .
               .
               .
<select>

Hemos capturado el evento «onchange» para que se llame a nuestra funcion javascript «actualizaPoblaciones» pasándole el valor de nuestra elección en la lista. El código de esta función sería:

function actualizaPoblaciones (prov)
{
	var url = 'http://www.casarus.es/ajax/poblaciones/json/' + prov;
        var combo = dojo.widget.byId('comboPoblaciones');
	dojo.io.bind({ 
			url: url, 
			load: function(type, data, evt) { 
				combo.dataProvider.setData(data)
			},
        		mimetype: "text/json"
    	});
}

En resumen, lo que hace la funcion es crear un evento AJAX que carga los datos de la nueva URL y se los pasa al ComboBox para que se actualice. Aquí se nos presenta un problema común a todas las aplicaciones AJAX que es el de las múltiples llamadas casi concurrentes, pero os dejo a vosotros el encontrar una solución.

Os dejo un ejemplo simple del uso del dojo ComboBox.

Otra interesante lista de ejemplos.