Awesome
Mejorando el Slider - Un tutorial de jQuery
Este es el código fuente del tutorial de jQuery que dí el jueves 7 de Junio de 2012 en dos partes: primero el tutorial inicial en #mejorandola y luego una versión avanzada en #postmejorandola, el HangOut semanal que hacemos luego de Mejorandola.
Un poco de explicación de ambos ejemplos
Ejemplo simple
Aquí es donde programamos la versión más sencilla (simple.html),
donde llegué a explicar la lógica detrás de la marquesina que
estamos implementando, y ofrecí un pequeño ejemplo de su
funcionamiento (que se puede ver en demostracion.html) aplicando
la técnica de sliders que agregan elementos al final para hacer la
transición más relajada.
Video : Plugin de jQuery parte 1
Ejemplo avanzado
En esta parte del tutorial, que se dió más tarde en Post Mejorando.la
trabajamos el mismo concepto de marquesina, pero enfocados a la
Programación Orientada a Objetos con Javascript, creando un objeto
Slider que se encargue de la funcionalidad, y sobre este una capa
de código jQuery que realize la unión entre los distintos elementos
de la interfaz.
Además, ofrecimos algunas sugerencias en cuánto a buenas prácticas y
un método para que nuestro código sea más extensible, tanto por
nosotros o por otros programadores, exponiendo la API de nuestro
objeto Slider al resto de la página, y dando soporte para funciones
callback. Esto pueden encontrarlo en avanzado.html.
Video : Plugin de jQuery parte 2
Sorpresa final
Incluyo además dentro de js/sorpresa.js el código que utilicé al
finalizar la charla de la parte avanzada, demostrando como es de
sencillo extender o modificar la funcionalidad del objeto Slider y
realizar variaciones en las animaciones de cada slide.
Si tienen dudas o comentarios, siempre pueden contactarse conmigo de varias formas:
No olviden de sintonizar Mejorando.la y Post Mejorando.la](http://post.mejorando.la) todos los jueves, así como dejar sus ideas para el Hangout o nuevas Tutorías.