Como quizás sabrás, y si no lo sabes te lo cuento, el día 19 de noviembre de 2011 tuvimos una gran conferencia organizada por el equipo de Mejorando la Web, en Santiago de Chile y retransmitida por streaming para todo el mundo. Fue todo un éxito, ya que además de llenar el auditorio en la Torre Telefónica durante las 5 horas de la conferencia se conectaron para asistir en vivo a las charlas más de 36.000 personas.

El evento trataba sobre el futuro de la web y entre otras charlas Miguel Angel Alvarez -el que os escribe- abordó el mundo de jQuery. La charla se titulaba “Todo lo que no te contaron sobre jQuery” y aunque podría parecer pretencioso decir “todo lo que no te contaron...”, me sirvió de estímulo para intentar concentrar en 50 minutos mucho contenido interesante. Mi objetivo fue ofrecer explicaciones, bajo un enfoque didáctico, de cada uno de los proyectos en los que trabaja el equipo de desarrollo de este interesante framework Javascript.

Hace solo un par de semanas del evento, pero después de una semana de mucha actividad por Chile preparando e impartiendo un par de cursos de jQuery y otra semana ya en casa intentando poner al día mi trabajo en DesarrolloWeb.com, parece que ya ha pasado un buen tiempo. No obstante, las personas aun me siguen preguntando ¿Dónde están las diapositivas de tu conferencia?

Slides en jQuery

Los slides, diapositivas o transparencias (como lo queráis llamar), de la charla estaban hechas 100% en HTML5 y mucho jQuery. En si eran una demostración sobre las capacidades de jQuery para hacer páginas altamente dinámicas y cómo se puede utilizar HTML5 para hacer unas diapositivas diferentes que integrasen varios tipos de contenido.

Pues bien, durante la charla me comprometí a publicar las transparencias y ponerlas a disposición de aquel que lo desease. Contienen varias informaciones que son interesantes sobre los proyectos de la familia jQuery y además pienso que son una buena práctica para el que le apetezca aprender algunos truquitos jQuery a partir de un trabajo ya realizado.

Como lo prometido es deuda, escribo este artículo para poner a la disposición de todo el mundo estos slides. Pero además quiero decir que hice las diapositivas a toda marcha, debido al tiempo limitado del que disponía. Por ello internamente el código no era muy bonito. Hoy, antes de publicarlo, le he dado un pequeño lavado de cara, pero aun sigue siendo un trabajo medianamente tosco. No obstante, espero que se me disculpen errores que los entendidos puedan apreciar.

Ver en local y a pantalla completa

Otra cosa importante que decir es que las diapositivas fueron pensadas para ver en local, es decir, no fueron creadas para publicar en la Web. Por ello utilicé diversas imágenes que no están optimizadas para que ocupen menos espacio en disco, así como vídeos que tienen dimensiones un poco mayores de lo que se podría desear. Con ello el trabajo quedó un poco pesado como para publicar directamente en nuestros servidores y lo he subido en un zip a MegaUpload Actualizado: Mataron a Megaupload, por lo que lo he hecho público a través de Dropbox, para no gastar nuestro ancho de banda.

Por último, también quiero comentar que se utiliza un vídeo que se incluye con la etiqueta VIDEO de HTML5. El codec que utilicé hace que no se pueda ver en Firefox, al menos en la versión 8, por lo que recomiendo Google Chrome. También os recomiendo verlo a pantalla completa (tecla rápida F11), porque tiene unas dimensiones que sobrepasan el espacio disponible por el navegador en modo normal, en muchas de las pantallas de ordenador.

Navegación por los temas de la conferencia

Por simplificarme la vida, dividí en varias páginas las diapositivas de la conferencia. Todas esas páginas se pueden navegar a través de los enlaces que hay en la parte de arriba de la página, en unos círculos numerados del 1 al 5.

Las distintas páginas trataron sobre los bloques de la charla:

1. Introducción a la conferencia jQuery
2. El framework Javascript jQuery
3. Plugins jQuery
4. jQueryUI y otras librerías jQuery
5. jQuery Mobile Framework

Plugins utilizados en las diapositivas

Quizás lo más interesante de estas diapositivas es apreciar la cantidad de plugins que se utilizaron para crear el contenido sin apenas código fuente realizado por mi propia cuenta. A continuación muestro un listado de los plugins que utilicé, con enlaces a los artículos dentro de DesarrolloWeb.com donde hablo sobre ellos (en el caso que los haya, si no, coloco enlace directo a plugin).

Plugin SlideDeck:
Este es el plugin que hace todo el sistema de las transiciones entre las diapositivas, osea, el motor de las slides de esta conferencia. Tiene una versión gratuita que es la que utilicé para la charla y otra de pago que no sé que añadidos tiene. Al final no me quedé 100% satisfecho con el plugin, porque no funcionó bien con la rueda de mi ratón y me tocó pasar las transparencias con el cursor del teclado.

jQueryUI: Utilicé varios plugins de estas librerías cuando explicaba las capacidades de jQueryUI. Mención especial al Datepicker, que está localizado al español tal como se explica en el artículo Datepicker de jQuerUI.

Skitter:
Utilicé el Skitter un plugin gratuito muy impactante para hacer presentaciones por diapositivas. Con él presenté los bloques de mi conferencia en la parte de introducción.

qTip2:
Un plugin para hacer tips basante bonitos, que utilizo en el navegador de bloques en la cabecera de las transparencias.

Plugin “Vermas” y “parpadea”:
Son los dos únicos plugins que están realizados por mi. Plugins simples cuyo código están en las propias diapositivas y que los utilicé para explicar la anatomía de los plugins jQuery. En DesarrolloWeb.com, cuando se habla de plugins en el Manual de jQuery se utiliza el plugin parpadea como ejemplo. El plugin Vermas lo tengo que publicar explicado en breve.

Easing:
Este es un plugin que sirve para hacer efectos. Expliqué que es muy fácil de usar y se obtiene un gran desempeño en las animaciones jQuery.

Lightbox:
Un clásico de los plugins, que permite mostrar ampliaciones de imágenes en cajas modal (que hacen una transparencia para oscurecer el fondo de la página y dejar ver mejor la imagen ampliada).

jQuery Form:
Este plugin también lo utilicé para mostrar lo sencillo de hacer con jQuery un formulario que envía los datos por Ajax.

jQuery Mobile:
Para hacer el par de demos sobre las páginas básicas jQuery Mobile y las páginas multipágina.

Además, a lo largo de las diapositivas se verá que se nombran otra serie de plugins interesantes que no se explicaron ni se construyeron ejemplos, pero que también quedan ahí para el que quiera investigar un poco más.

Descarga de las diapositivas jQuery

Así que dicho todo eso, os dejo por fin el link para la descarga de estos slides jQuery, que espero podáis utilizar para documentaros y ver cómo se puede utilizar jQuery para hacer presentaciones dinámicas en HTML5.

http://dl.dropbox.com/u/11590992/slides-conferencia-jquery.zip