Vídeo con la introducción a los plugins en jQuery, explicamos qué son los plugins, las reglas para construirlos y hacemos un práctica con un par de ejemplos de plugin básicos.
Este es el primero de los vídeos que vamos a presentar sobre el desarrollo de plugins, dentro del Videotutorial de jQuery que venimos publicando en DesarrolloWeb.com. Contiene todo aquello que debes saber para crear plugins básicos, con lo que nos permitirá ponernos manos a la obra y comenzar a utilizar esta característica del framework.
Los primeros minutos del vídeo los dedicaremos a explicar la teoría de los plugins, viendo qué son, por qué son tan interesantes y cómo se utilizan en el framework. Luego pasaremos directamente a mostrar un primer ejemplo de plugin ultrasencillo, a través del cual mostraremos la arquitectura básica de un plugins desarrollado en jQuery. Esa estructura del plugin básico no es que sea muy complicada, pero sí que incluye diversas líneas de código fuente que debemos respetar y que nos vendrá bien conocer, para entender bien lo que estamos haciendo a la hora de crearlos.
El primero de los plugins que mostraremos será poco interesante desde el punto de vista de la funcionalidad, pero nos servirá para entender las reglas de desarrollo de plugins y analizar esas normas es justamente lo que haremos a continuación. Repasaremos una por una las reglas básicas para la creación de plugins que los propios creadores de jQuery han publicado en la documentación. La mayoría de ellas están pensadas para que los plugins se puedan reutilizar en otros proyectos sin problemas y para que se puedan ejecutar sobre cualquier tipo de objeto jQuery.
Una vez conocida en detalle cuál es la arquitectura para el desarrollo de plugins, nos dedicaremos a realizar un ejemplo un poco más útil de plugin jQuery. Esta práctica consistirá en la creación de un plugin que, invocado sobre campos INPUT tipo text, permita mostrar una ayuda contextual sobre qué es lo que se tiene que escribir en ese campo INPUT. Este plugin lo podríamos utilizar sobre campos de formulario para incrementar la usabilidad de los mismos.
Básicamente lo que hará el plugin es mostrar un texto de ayuda en el campo INPUT, que supuestamente indicará qué es lo que hay que escribir en él. Al situarse encima del campo INPUT ese texto desaparecerá automáticamente, permitiendo al usuario introducir lo que sea. Además, si el usuario deja el campo vacío y se sale luego, el mismo texto de ayuda aparecerá de nuevo. Por contra, si el usuario llegó a escribir alguna cosa, en el campo permanecerá aquello que se escribió.
En fin, toda una introducción al mundo de los plugins en jQuery, de 38 minutos de duración, que nos dará las primeras pautas para su desarrollo. Con estos conocimientos serás capaz de comenzar a extender jQuery y además crear código fuente que podrás reutilizar en diversos proyectos, tú mismo o incluso otras personas. Confío que te parezca interesante y te ayude a aprender bastante.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...