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).

Videocast 3 versión stream
Videocast 3 versión completa

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

  1. chap

    Estimado: el .mov no tiene audio, queria tener guardado el video. Gracias de todas formas, veré el streaming.
  2. Seba

    Gracias Jorginho, si funciona perfect y si se entiende, o sea, quedo a prueba de dummies!! :D

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

    chap: yo si escucho el mov con audio…
  3. Jorge Epuñan

    @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.
  4. Oropher

    Muy buen videocast, esta muy entendible, ahora me toca probar a mi mismo jeje,, =)
  5. fugazi

    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 :P

  6. Jorge Epuñan

    @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.
  7. fugazi

    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
  8. ralexismf

    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 ;)

  9. stock

    Excelente tutorial, realmente muy bueno.

    saludos
  10. Jorge Mudry

    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!
  11. Jorge Mudry

    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.