JQuery - Desarrollo de Interface Gráfica de Usuario

JQuery es una framework javascript que posibilita la interacción con el DOM(Document Object Model) de una forma simple e independientemente del navegador, es distribuido bajo licencia MIT y GPL. Esta librería cuenta con amplia documentación y la referencia de la API es sumamente útil. La cantidad de complementos y extensiones escritos para extender su funcionalidad básica y crear funciones avanzadas es  simplemente increíble. Es realmente ligero y el conjunto de funciones básicas es relativamente reducido, en realidad esta hecho para "escribir menos, hacer más" tal como lo dice el propio lema de este framework que esta conquistando campo en el desarrollo web.

Este artículo no tiene como objeto ser una referencia, sino abrir sus mentes a las posibilidades de uso. Intentare mostrarles algunos de los usos y extensiones útiles.

Uno de los usos más populares es para el desarrollo de interfaces de usuario, jquery cuenta en esta área con varios proyectos que pueden darles muchas ventajas y además han sido ya ampliamente probados y mejorados.

JQuery UI - provee abstracciones para interacción de bajo nivel y animación, efectos avanzados y widgets tematizables que pueden ser utilizados para construir aplicaciones web altamente interactivas. Construida sobre jquery, JQuery UI incluye un framework CSS robusto diseñado para crear controles personalizados. El framework css incluye un conjunto de clases que cubre las necesidades mas comunes de las interfaces de usuario. Cuenta ya con una librería de temas prediseñados y un editor de temas, que les permite crear su propios estilo de controles.

Además de diversos efectos y control de interacción, entre los controles encontramos acordeones, pestañas, listas de auto completado, botones, selectores de fecha, cuadros de dialogo, controles deslizables y barras de progreso. Cada uno de esos controles cuenta con una conjunto de opciones y métodos que permiten especificar su comportamiento y aspecto, cada documentado y con uso ejemplificado.

Existen también otras extensiones para interfaces de usuario no tan conocidas pero si muy útiles, entre estas:

jQuery MultiSelect Filter UI Widget - crea un control avanzado basado en una lista de selección simple, y provee varias opciones que nos permiten trabajar con los datos seleccionados y realizar acciones en los eventos den control, además se encuentra perfectamente integrado con los estilos del jquery ui en caso de que estemos utilizando varios controles de este framework. Cuenta adicionalmnte con una extensión para crear filtros dinámicos de las opciones.

jqGrid -  Es una de las mejores y más completas extensiones para representación de datos tabulares, se integra perfectamente con los estilos del jquery ui. Tiene un gran variedad de métodos y utilidades, incluyendo formularios y filtros dinámicos, criterios de ordenación, eventos sobre filas columnas, etc. Permite obtener y cargar datos desde diversas fuentes y formatos entre estos json, xml, arrays javascript. Otras extensiones que facilitan el manejo de tablas maestro detalle. Ademas se puede integrar controles JQuery UI a los campos con gran sencillez. Admite la conversión desde tablas html a un grid control, entre otras bondades que uds. mismos pueden explorar mas fondo.

Validación de formularios - Una extensión para validación de formularios que integra una serie de reglas ya definidas vara validar correos, url, numeros, rangos, cantidad de campos, campos requeridos, fechas. Además permite personalizar y traducir los mensajes de errores, declarar nuestras prpopiar reglas y mensajes, agregar nuevos métodos para validar, y realizar validaciones de forma asíncrona.


Sliders con Cycle - este plugin facilita la creación de contenido en forma de presentación, se pueden lograr cosas tan avanzadas como podamos, incluye un buen conjunto de efectos básicos, se pueden definir o utilizar controles para navegación y cargar contenido de forma dinámica.

Es necesario siempre contar con buenas referencias de la APLI y acá les dejo un par que suelo consultar en caso de duda, además claro de la referencia oficial.

Visual JQuery, JQuery Deconstructed

Por acá una lista un poco mas amplia de los plugins que he probado. Uds. pueden buscar y encontrar los que más se adecuen a sus necesidades.

Menús y otras interacciones

Superfish
Menus colapsables
Menus flotante estilo ipod


Selector de color

ColorPicker
Farbastic


Árboles

JQuery Tree
TreeView
Otro menu de arbol
Tree File Explorer


Media

jQuery Media Plugin
jQuery lightBox


Galerías y más

LightBox
Galleriffic
Jcrop
Jcarousel