Slides conferencia jQuery

  • Por
Slides de la conferencia de jQuery de Mejorando la Web, día 19 de noviembre de 2011, por Miguel Angel Alvarez.
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

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

GunsAndMe

02/12/2011
Enlaces caidos
Hola Miguel Ángel, he intentado obtener las diapositivas sobre jQuery y al parecer no están disponibles. Y tendría interés en verlas ya que estoy empezando con HTML5 y demás.

Un saludo.

GunsAndMe

02/12/2011
Enlaces funcionando
Parece ser que era problema de ellos.

Un saludo y disculpas emitidas :)

cKristhoff

02/12/2011
Excelente
Excelente Miguel Angel, gracias por hacernos todo muy facil.

carlos

02/12/2011
videos
no hay videos??

miguelgoma

02/12/2011
Gracias por compartir!
Muy buenos ejemplos de jQuery ojalá y vengan a México pronto!

Juan David Rendon

02/12/2011
Gracias
Hola miguel, el sabado no alcance a ver tu presentacion,pero muchas gracia spor las diapositivas.

midesweb

05/12/2011
Linkx comprobados
Hola,

El link para descarga de las diapositivas está comprobado. Si no te funciona en un momento dado prueba unos minutos más tarde, que debe ser un error temporal. Ya muchas personas me han comentado que las están viendo perfectamente.
Saludos!

alejandro__saa_garcia

06/12/2011
Gracias por compartir.
Buenas tardes, segun mi pais y buenos días, creo, en españa, vi la presentacion vía streaming y me parecio genial, ahora con los ejemplos que acabas de compartir me he motivado aún más para hacer algunas pruebas para dispositivos moviles.
Una mas vez más, gracia por compartir.
PD: el compartir me salio estilo taringa.

FutuzorMekkla

07/12/2011
¡Buen trabajo!
El otro día me bajé los slides de la conferencia, y la verdad es que te los has currado de muerte. Desde ese día te he admirado aún más con tus grandes conocimientos de JQuery.

Alraul

14/12/2011
link de la charla
La charla estuve genial y se puede ver todavia aqui:
http://www.youtube.com/watch?v=XN4jwxA5SOE

Conclusión: Me voy a poner a estudiar JQuery a fondo

paranoicmania

20/1/2012
ya murio
el link ya murio junto con megaupload :(

William

20/1/2012
Slides
Hola, alguien podria porfavor resubir los archivos de las diapositivas a otro servidor como rapishare, como sabran megaupload ya no esta disponible.

midesweb

25/1/2012
Subí de nuevo el archivo de los slides
Hola!
Eso es, estamos de luto por la muerte de Megaupload. Y aun las personas que lo usábamos para fines totalmente legales tenemos que buscarnos la vida para encontrar otro servicio.

Bueno, de momento he subido el archivo a mi Dropbox y lo he hecho público. De modo que lo tenéis disponible de nuevo. He actualizado el link en el texto del artículo.

Saludos y gracias a todos por vuestros comentarios!