Videotutorial sobre los plugins en jQuery

  • Por
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.
Los plugins son la herramienta que sirve para extender jQuery y por tanto tienen gran importancia para sacarle el partido al framework. Por eso en DesarrolloWeb.com hemos incidido bastante sobre cómo crearlos y ese vídeo es una de las pruebas de ello. Se trata de un videotutorial básico sobre la creación de plugins en jQuery, que explica tanto la teoría como la práctica.

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.

Nota: Los artículos que se encuentran en el Manual de jQuery que tienen que ver con los temas relatados en este vídeo son: Los plugins en jQuery y las reglas básicas para el desarrollo de plugins.

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.

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

joseppo87

01/2/2013
problema
Primero gracias por los tutoriales son fantasticos.
Ahora, me da un error y no se porque es, el codigo es este:
<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Page Title</title>
<script type="text/javascript"src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">

jQuery.fn.muevete=function(){
this.each(function(){
elem=$(this);
elem.css({
'position':'relative'.
'top':'200px' <------------en esta linea komodo me dice textualmente:missing name after operator

});
});
return this;
}

$(document).ready(function)(){
$("h1").muevete();
$("h1").muevete();

})
</script>

</head>

<body>
<h1>titulo de mi primer pluggin</h1>

</body>
</html>

Me podrías dar alguna idea de porque es, gracias.