Videocast 3: creando un plugin para jQuery ↩ CSSLab

Videocast 3: creando un plugin para jQuery

Ayer se me acerca un colega de trabajo con algunas preguntas relativas a un proyecto de cómo encontrar una solución a una funcionalidad utilizando jQuery. Papel y lápiz en mano, me puse a explicarle cómo imaginaba que sería, pero después pensé en cómo hacerlo mejor aún, con menos líneas de código y en los posible extensible, vale decir, que su mantención o posterior actualización implique poca o nula modificación.

Luego del trabajo salí a trotar y ¡ZAZ! La solución viene a mi cabeza. De vuelta la puse en práctica y decidí grabarla en un videocast, pero además de esa sencilla solución creí pertinente mostrar cómo a partir de una simple funcionalidad (o compleja, dependiendo de lo que hagan) pueden transformarla en un plugin configurable a partir de opciones, para jQuery.

Cuando creé mi primer plugin tuve bastante dificultad al no encontrar una documentación detallada, y espero con este aporte visual poner al alcance de quienes necesiten material didáctico para sus proyectos web. Hago el llamado también a que puedan compartir sus desarrollos libremente; sólo así podremos mejorar la calidad de los sitios web que vemos día a día. Como lo he hecho en otras ocasiones, pongo a disposición este mismo sitio para hacer un review y difundirlos.

Dado los problemas que tuve con ediciones anteriores, esta vez aumenté bastante la calidad y por lo tanto el peso de los archivos de video. Pongo a disposición una versión streaming (.flv, 101mb) y una para que puedan descargar y ver de la tranquilidad de donde mejor quieran (.mov, 47mb comprimido).

Sebastián, espero haber solucionado tu problema, y feliz cumpleaños.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

chap 29 de Enero del 2009 a las 2:42 am
Estimado: el .mov no tiene audio, queria tener guardado el video. Gracias de todas formas, veré el streaming.
Seba 29 de Enero del 2009 a las 11:16 am
Gracias Jorginho, si funciona perfect y si se entiende, o sea, quedo a prueba de dummies!!

Muy buena la forma en que explicas las funcionalidades de jQuery y gracias por la dedicatoria

chap: yo si escucho el mov con audio…
Jorge Epuñan 29 de Enero del 2009 a las 11:34 am
@Chap: El .mov es universal usando Quicktime; aconsejo usar el QT Player para reproducirlo.

@Seba: q bueno q se entiende y q te haya servido, ojala a mas de alguno lo ayude.
Oropher 29 de Enero del 2009 a las 4:23 pm
Muy buen videocast, esta muy entendible, ahora me toca probar a mi mismo jeje,, =)
fugazi 30 de Enero del 2009 a las 1:59 am
hey esta muy bueno el videocast.
pero tengo una pregunta, en que parte haz programado el plugin?
yo soy usario de windows y no se en donde podria practicarlo
Jorge Epuñan 30 de Enero del 2009 a las 9:28 am
@fugazi: puedes utilizar cualquier editor de texto para comenzar a urgar en el codigo fuente; el mas utilizado es Dreamweaver pero hay muchos gratuitos y al parecer muy buenos; he escuchado q Notepad++ para Win anda bien.

exito.
fugazi 30 de Enero del 2009 a las 6:19 pm
muchas gracias, esta mañana lo he practicado en dreamweaver y funciono de maravilla…
ojala no pierdas el espiritu de seguir con estos videocast que son muy interesantes!
a ver si algun dia integras un plugin jquery en el css para aprender tambien!!

saludos
ralexismf 6 de Febrero del 2009 a las 5:14 pm
Magnifico, como dice @seba te quedo a prueba de dummies, y muy buena la recomendacion de compartir nuestros proyectos, muy buen ejemplo nos das compartiendo los tuyos. cia
stock 12 de Febrero del 2009 a las 2:52 pm
Excelente tutorial, realmente muy bueno.

saludos
Jorge Mudry 26 de Marzo del 2009 a las 9:59 pm
Hola Jorge (tocayo), quiero decirte que disfruto enormemente cuando alguien hace un videcast de algun tema en particular, si a eso le sumamos que el tema tratado es mas que interesante, mucho mejor y si encima esta en nuestro idioma…bueno ni que hablar! Asi que ante todo, MUCHAS GRACIAS por el tiempo y esfuerzo =).

Te paso algunas modificaciones sobre el plugin que hiciste las cuales, a mi entender, mejorarian un poco la portabilidad:

(function($){
$.fn.banderas = function(options) {

var
defaults = {
receptor: ‘#paises’
},
settings = $.extend({}, defaults, options);

$(this).click(function(){
$(settings.receptor).toggleClass($(this).attr(‘class’)).text($(this).text());
});

return this;
}
})(jQuery);

Estos son algunas de las ventajas que veo al hacerlo de esta forma:

* Puedo aplicarle el plugin a cualquier elemento, sin respetar la estrcutura ‘container a’. Esto me permite, por ejemplo, usar este plugin con elemntos li en lugar de a
* Al usar toggleClass, evito eliminar cualquier clase que tenga previamente el receptor.
* En lugar de usar el nombre de la clase como texto a mostrar, uso el mismo texto del elemnto. Esto me permite ser independiente del nombre de la clase, no tenes que formatear el texto (ponerle la mayuscula) por medio de CSS y ademas serviria para paises de dos (o mas) palabras como Hong Kong.
* Retorno el objeto jQuery, por lo que el plugin permite el “encadenamiento” con otras funciones. Por ejemplo $(‘#menu a’).banderas().css(‘color’,'red’);

Te mando un fuerte saludo y espero que mi humilde aporte te sirva, tanto a vos, como a los miles de seguidores que tienes.

Bye!
Jorge Mudry 26 de Marzo del 2009 a las 10:20 pm
Perdon, hago una correccion sobre mi codigo. No funciona usarlo con toggleClass, sino como lo has hecho tu:

$(settings.receptor).removeClass().addClass($(this).attr(‘class’)).text($(this).text());

Habria que ver si hay alguna forma de hacerlo sin que elimine las clases que tenia aplicadas anteriormente.

Saludos.