Videotutorial de introducción a jQueryUI

  • Por
Videotutorial en el que mostraremos qué se debe hacer para comenzar a usar las librerías para la creación de interfaces de usuario enriquecidas jQueryUI.
Uno de los proyectos más interesantes que están basados en el framework Javascript jQuery es jQueryUI, unas librerías para la creación de interfaces de usuario avanzadas que nos ofrecen los propios creadores de jQuery. En este videotutorial mostraremos hasta qué punto es sencillo dar los primeros pasos con estas librerías y comenzar a utilizarlas en páginas web.

Las librerías jQueryUI nos ofrecen una serie de componentes, también llamados widgets, que están listos para usar e implementan muchas de las necesidades más típicas a la hora de construir una página web, como seleccionadores de fecha, sistemas de autocompletado, pestañas, acordeón, etc. Pero además contiene algunas herramientas que permiten asignar funcionalidades avanzadas a elementos de la página, como arrastrar y soltar. Todo ello se ofrece por medio de plugins jQuery que resulta extremadamente sencillos de usar.

No hace falta dar más introducciones porque, a estas alturas, el que quiera aprender jQuery ya debe conocer el Manual de jQuery de DesarrolloWeb.com, así como los videotutoriales de jQuery ya publicados en este sitio. Por su parte, el que quiera aprender jQueryUI quizás ya conozca el Manual de jQueryUI que venimos publicando también desde hace tiempo. De hecho, este vídeo sirve para dar un soporte adicional a los estudiantes que están dando los primeros pasos en jQueryUI ayudados por este último manual.

Normalmente, cuando publicamos un videotutorial, acompañamos el mismo con diversas explicaciones para que los interesados puedan conocer de antemano qué es lo que vamos a trata. Sin embargo, en esta ocasión está un poco de más, dado que el guión del vídeo es directamente el que podemos encontrar en el artículo Primeros pasos con jQuery UI. Así pues, en el vídeo iremos recorriendo todos los puntos tratados en ese artículo y que nos pueden dar una idea de la facilidad de uso de jQueryUI (creo que incluso sin saber jQuery cualquier desarrollador que vea este vídeo sería capaz de implementar las funcionalidades principales de estas librerías) y de la cantidad de componentes que pone a disposición de los creadores de aplicaciones web.

El videotutorial mostrará entonces cómo descargar jQueryUI, cómo incluir las librerías en una página web y seguidamente cómo implementar algunos de los componentes más esenciales. En concreto se mostrará cómo hacer un selector de fechas (también llamado datepicker), como implementar una funcionalidad de arrastrar y cómo crear una interfaz de acordeón. Todo ello, para el asombro quizás de los más nóveles, con únicamente una línea de código Javascript!!

Nota: Para no decepcionar a nadie, cabe aclarar que, si bien se utilizará una línea de código por cada componente que vamos a probar en este vídeo, en realidad hay que colocar dos líneas adicionales de código jQuery para poder iniciar las funcionalidades solo cuando el navegador esté listo para ejecutarlas. Por supuesto, también habrá que incluir las librerías correspondientes, que es donde realmente está toda la infraestructura que permitirá la creación de estas interfaces casi sin esfuerzo.

Para vídeos siguientes, o para leer en el Manual de jQueryUI dejamos todas las opciones de configuración de los widgets. Es decir, nosotros en este videotutorial mostraremos simplemente como inicializar los componentes con las opciones por defecto, pero es bueno saber que cada uno de ellos tiene una cantidad importante de opciones de configuración que nos ayudarán a personalizarlos todavía más, aparte de eventos y métodos que nos permitirán ir un poco más allá cuando estamos definiendo la interacción con el usuario.

Así pues, os dejamos con el vídeo que espero sea ameno para todos y sirva para quitarse el miedo a usar unas de las librerías más atractivas que nos podemos encontrar en estos momentos para la creación de páginas enriquecidas del lado del cliente.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Francisco Sutch

07/10/2011
Saber más de jQueryUI
Fantástico! pero me he quedado con ganas de mas!

Jorge

16/10/2011
draggable + input
¿¿ El componente draggable se puede combinar con un elemento input text, de manera que se pueda usar a modo de post-it ?? , seria bastante interesante, a ver si lo podéis incluir en el manual. Graciass

cesar

20/10/2011
JQuery
Exelente muy facil el uso de esta maravilla JQueryUI

osber00

17/2/2012
Gracias!!
Muy buen artículo... Gracias por publicar la información precisa y clara... Gracias nuevamente

Christian

07/3/2012
Curso de Jquery
Cuando van a dar otro curso de jquery en mexico, no pude ir al anterior, saludos!!!!

henry_garcia_o

20/11/2013
Muy interesante
Muchas gracias por un video tutorial sencillo y de tanta calidad, pero como alguien comento anteriormente, "quedamos iniciados".

Los títulos que salen en inglés como se pueden cambiar a español y bueno, depronto tiene enlaces donde expliquen un proyecto donde interactuen varias tablas donde se hagan cálculos y en o posible POO.

Muchas gracias por dar parte de su conocimiento y un saludo fraternal desde Colombia.

FherAbba

09/8/2014
Muy buen Manual
me parece super el tutorial. Gracias

Araceli Mora

12/10/2014
Gracias¡¡
Gracias por compartir es genial :)