Jquery: 5 plugins interesantes muy recientes (2009)

De vez en vez no es mala idea darse una vuelta por la librería oficial de plugins de Jquery, ya que puedes ver que hay de nuevo y que cambios se han hecho en los plugins que has llegado a usar para tus proyectos. Hoy decidí dar una vuelta por el sitio y seleccione 5 plugins que me resultaron interesantes:

• DataTable: Este plugin transforma un elemento table en un grid con funciones muy útiles. Algunas de las funciones son el ordenamiento de la información cargada en la tabla, filtrado, determinar el estilo de la tabla, agregar o quitar filas en tiempo real, paginación, capacidad de implementar otros idiomas a las etiquetas auto-generadas, iluminar las filas seleccionadas, mandar un submit con elementos de la tabla y algunas otras funciones más. Cuenta con buena documentación, pero no es una solución cuando quieres traer un gran volumen de datos ya que su desempeño dependerá de la capacidad de la maquina del cliente y de su navegador.
• PngFix: Este plugin es una solución ligera y muy practica para resolver los problemas de transparencia con los archivos PNG en el IE5.5 y el IE6x. Aunque existen librerías independientes de Jquery por ahí que solucionan este problema se puede rescatar de este plugin las diversas correcciones del defecto en las distintas formas de implementación de un PNG.
• Simple StarRating: No sólo es una interfaz desarrollada en javaScript para valorar contenido usando una barra de estrellas, además tiene la capacidad de mandar un callback si la comunicación con el servidor fue correcta o incorrecta. De entre sus características están la adaptación de los iconos, establecer valores mínimos, capacidad de usar el evento click, hover o ambos y especificar la url con la que hay que comunicarse (de forma asincrona claro) para guardar el ranking.
• Jquery LightBox: Es una ventana de tipo modal con overlay para visualizar imagenes, de fácil implementación y ocupa los atributos title, src y alter como valores para su funcionamiento. Presenta algunos problemas cuando se visualiza en FF o Safari con el botón de cerrar pero a su favor tiene la simpleza y distintas funciones de las cuales se rescata el ver siguiente imagen.
• Jquery Bookmark: Es un complemento ideal para un blog o CMS, de muy fácil implementación y que cuenta con un repertorio extenso de redes sociales para el envió de tu enlace. Los ejemplos por defecto no son muy atractivos pero el plugin a evolucionado al grado de que puedes personalizar desde el número de redes sociales a mostrar hasta la apariencia del complemento.

Algunos de los plugins listados no son recientes, pero los he agregado por que en los últimos días se han liberado nuevas versiones de los mismos. Espero que le sean de utilidad a alguien esta pequeña lista de recomendaciones de plugins desarrollados en Jquery.

Jquery 1.3 Liberado

A partir del 14 de Enero del presente año el Proyecto Jquery paso de 1.2.x a 1.3. Esto es significativo ya que muchos desarrolladores que usamos este framework, a su vez, usamos plugins para extender las capacidades de nuestros desarrollos y el hecho de que haya una nueva versión no significa que vamos a actualizar el Jquery de nuestros desarrollos previos. Eso es por que puede haber problemas en compatibilidad, los cuales causarían comportamiento anomalo en sistemas ya terminados. Recomiendo el uso de la versión 1.3 para el desarrollo de nuevos sistemas y si deseas actualizar versiones anteriores de Jquery, las cuales estén en sistemas ya en productivo, tomen en consideración lo anterior. Otra cosa importante es que este 21 de Enero se liberó la versión 1.3.1; para que puedan usar la versión más nueva les recomiendo ir directamente al sitio oficial de Jquery.

Cargar un XML con Jquery

Hace unas semanas estaba buscando un código para poder cargar el contenido de un archivo XML en una página de manera dinámica y de modo que esta información se cargará al abrir la página. Hace tiempo usaba una función que usaba un objetoActiveX para leer el contenido de un XML, el objeto tenía el nombre de "Microsoft.XMLDOM". El resultado fue una función un tanto grande y que aunque solucionaba el problema no me tenía convencido. Entonces comence a buscar alguna solución con Jquery, pues me funcionó muy bien para cargar páginas HTML al usar funciones como ajax, load, y get. Después de un rato de investigar y agregar unas cosas por mi mismo construí este código:

function cargarXML(url,blanco,info)
{
$.ajax({
type: "GET",
url: url + Math.random(),
dataType: "xml",
success: function(xml) {
var colem = new Array(); var nact = 0; 
$(blanco).empty();
$(xml).find('actividad').each(function(){
colem[0] = $(this).find('contenido').text();
colem[1] = $(this).find('responsable').text();
colem[2] = $(this).find('url').text(); 
colem[3] = $(this).find('fecha').text();
colem[4] = $(this).find('img_std').text(); 
colem[5] = $(this).find('sistema').text();
nact = nact + 1;

$("").html(colem[0] + colem[1] + colem[3] + colem[4] + colem[5] ).appendTo(blanco);
if(nact == 5) {  return false;   }
}); //close each(

$(info).html("Total de actividades: " + $(xml).find('actividad').length);
              }
   }); //close $.ajax({...})
}

La función cargarXML recibe como parametros la url (la ubicación dentro del servidor del xml), blanco (El objeto DOM donde se cargará el texto que se extraiga del XML) e info (el blanco donde se escribirán el número de elementos del XML leidos). Lo siguiente es usar la función AJAX de jquery para cargar de manera asincrona el archivo xml, es importante ver el uso de la función random, pues con ella creo un valor dummy para evitar problemas de cache. En la función ajax se debe especificar que se va a leer un xml y una vez esto podemos tratar al xml como si fuera un objeto y usar la función find para localizar un nodo en especial en primer lugar y después el método each para leer a todos sus hijos. Para entender mejor la función consideremos la siguiente estructura que muestra únicamente los elementos principales.

function cargarXML(url,blanco,info)
{
$.ajax({
type: "GET",
url: url + Math.random(),
dataType: "xml",
success: function(xml) {

/*Aquí se hace la lectura del XML usando la función each()*/

   }); //close $.ajax({...})
}

Es prudente mencionar que esta es la versión 1.0 de mi código para lectura de XML y posteriormente aclararé más cosas del mismo, actualmente lo tengo implementado en un proyecto en el que estoy trabajando.

AJAX contra sentido común

¿ Desde cuando hemos oído hablar de AJAX ?, en lo personal llevo unos dos años de oír el termino y el mismo tiempo llevo usandolo. Para dejar claro y no gastar líneas definiendo que es AJAX lo dejaré de esta forma: AJAX, es un método para la programación Web donde pueden ejecutarse acciones definidas en JavaScript de forma asincroná apoyandose en el XML y un objeto de nombre XMLhttpRequest. Lo que siempre debemos tener pendiente es que AJAX no es la panacea universal para un sistema cuya plataforma sea la web, asì como con las bebidas alcholicas, debe usarse con responsabilidad y moderación. Por ejemplo si necesitas el uso de varias llamadas asincronas usa un solo objeto XMLhttpRequest, otra buena practica es no tratar de invertar el hilo negro y usa un framework de Javascript como Jquery, ExJS, Prototype, o el que mejor le quede a tu proyecto. Espero que este pequeño consejo le sea de utilidad a alguien, hasta pronto.