Con mucha frecuencia necesitamos presentar y/o explicar un tema, ya sea en el trabajo, en el colegio o la universidad, pero luego lo más seguro es que queramos «subir» la presentación a Internet para compartirla con otras personas o grupos, de tal manera que la puedan visualizar o revisar posteriormente o porque no «al mismo tiempo que la presentamos», desde el móvil o una tablet.
Probablemente, la opción más tradicional es utilizar Power Point para crear la presentación o tal vez usemos otras herramientas en línea como: KeyNote, Google Docs o Prezi. Cada una tiene sus ventajas y desventajas, como por ejemplo en la mayoría de las anteriores exige tener instalado algún complemento o programa para poderse visualizar de manera correcta o la presentación no se adapta a la pantalla del dispositivo donde se visualiza.
Una opción alternativa es compartir la presentación como un PDF a SlideShare o SpeakerDeck, pero esta le quita la «gracia» a la misma, ya que en esencia pierde las animaciones y transiciones. Es por eso que mi recomendación es utilizar un framework para crear las diapositivas basadas en la tecnología nativa de Internet: HTML, CSS y Javascript. Y de eso se trata este artículo.
Las razones por las que sugiero las presentaciones web son las siguientes:
- Las presentaciones son RESPONSIVE, esto quiere decir que se adaptan al tamaño del dispositivo desde el que las visualizo: PC, Móvil o Tablet.
- En material impreso puedo crear un código QR que al ser escaneado permita la navegación a la URL de la presentación interactiva en línea.
- Permite el uso de transiciones y animaciones para hacer diapositivas interactivas.
- Permite el uso de enlaces a formularios interactivos para registro de información de los interesados.
- Permite incluir videos: Youtube, Vimeo o propios.
- Permite incluir código Javascript para interactuar con otras diapositivas u otras páginas.
- Configurar la navegación fácilmente entre diapositivas o personalizar su funcionamiento usando el teclado o los toques de pantalla.
- Edición fácil de las diapositivas o corrección de errores desde el código fuente.
- Los navegadores modernos soportan dicha tecnología por tanto no se necesita instalar ni configurar nada adicional.
- La presentación puede ser actualizada y cualquiera que la referencia ve los cambios.
- Puedo incluirla la presentación como parte de un tema en cualquier herramienta LMS (Learning Management System) como por ejemplo Moodle.
- El tráfico que se genera por las personas que se interesan en los contenidos de la presentación son para nuestro sitio y no donde lo hospede si uso herramientas externas.
Desarrollar una presentación con estas herramientas desde cero podría ser algo complejo para algunos, por eso existen varias «librerías» Javascript que facilitan dicha tarea, simplificándolo considerablemente hasta el punto de sólo necesitar saber HTML. A continuación nombro los frameworks que mas me llaman la atención para esta labor, en orden alfabético:
1. Deck.js
Es muy sencillo y bastante personalizable. En su wiki puede encontrar algunos temas, extensiones y herramientas para agregar mas funcionalidades. Necesita de jQuery y Modernizr para funcionar, los cuales vienen incluidos en el frmaework.
- Autor: www.imakewebthings.com
- Código: GitHub
- Ayuda y documentación: Docs
- Ejemplo: Ejemplo 1, Ejemplo 2
2. Flowtime.js
Permite crear presentaciones con un flujo similar al de Reveal.js (lo miramos más adelante) pero con algunos valores agregados como imágenes superpuestas o soporte Parallax nativo. También soporta fragmentos (estilo Power Point para mostrar textos y parrafos completos animados) para ir avanzando poco a poco en la misma diapositiva o resaltado de código.
- Autor: www.marcolago.com
- Código: GitHub
- Ayuda y documentación: Wiki
- Ejemplo: Ejemplo 1, Ejemplo 2
3. Impress.js
Permite crear llamativas presentaciones pudiendo utilizar efectos 2D/3D para movernos entre diapositivas, simplemente indicando con clases las diferentes diapositivas y utilizando algunas opciones y parámetros para movernos en los diferentes ejes X, Y y Z o utilizar otros efectos de transformaciones. Está pensado para aquellos que están familiarizados con Prezi.
- Autor: www.openlife.cc
- Código: GitHub
- Ayuda y documentación: Wiki
- Ejemplo: Ejemplo 1, Ejemplo 2, Ejemplo 3
4. Reveal.js
Es muy sencillo y práctico, tiene un flujo de diapositivas muy intuitivo, muestra botones de dirección en la esquina inferior derecha donde puede ver hacia donde se puede mover en la presentación. Puede ir avanzando diapositivas en horizontal (hacia la derecha), pero también permite colocar diapositivas en vertical, y así poder organizar mejor los temas de la presentación.
- Autor: www.hakim.se
- Código: GitHub
- Ayuda y documentación: Instructions
- Ejemplo: Ejemplo 1, Ejemplo 2
5. Stack.js
Es una librería minimalista que permite hacer presentaciones basadas en scroll vertical o con teclado, pasando entre diapositivas cuando la barra lateral llega a la parte superior. Permite diseños que se adaptan al tamaño del navegador, ejecutar eventos cuando una diapositiva está visible, entre otras cosas. Ideal para presentaciones sencillas y elegantes.
- Autor: bost.ocks.org/mike/
- Código: GitHub
- Ayuda y documentación: No tiene
- Ejemplo: Ejemplo 1
En conclusión, la dificultad número uno de este tipo de herramientas es que aún no se encuentran programas editores que permitan crear las diapositivas sin tener que saber de HTML, aunque algunos de ellos tienen una versión de pago que si lo facilita. Pero por otro lado, los resultados son muy atractivos para navegación web y móvil, permitiendo difundir nuestros contenidos en Internet, tanto, que vale la pena aprender un poco de HTML (les dejo en el enlace el mejor curso en línea GRATIS) para quienes no lo conocen.
Si te ha gustado mi artículo, compártelo en tus redes sociales con tu grupo de amigos. Si haz utilizado algún otro framework para crear tus dispositivas déjame tus comentarios y enlaces para revisarlos y compartir experiencias.