Cómo hacer presentaciones con Reveal.js (HTML, JS y CSS)

En uno de los vídeos pasados me habéis preguntado con qué herramientas preparo las presentaciones que utilizo de fondo en mis vídeos de YouTube (@pirobits). En este post te voy a enseñar qué herramienta utilizo, cuáles he probado y cómo puedes configurarlo tú mismo.

Siempre me ha gustado dar charlas y crear presentaciones sobre los diferentes temas del sector al que me dedico. En general me gusta compartir lo que aprendo y ese siempre ha sido el motivo por el que creé tanto este blog como el canal de YouTube.

Cuando empecé con los primeros vídeos de YouTube la verdad no tenía prácticamente idea de los procesos que involucran crear contenido: escribir un guión, grabación y edición, entre otros. Cada una de estas partes a su vez tienen bastante complejidad, tanta como quieras añadir, así que empecé de la forma más simple.

En mi caso, tengo pocos conocimientos sobre edición de vídeo y aunque me encantaría aprender, siendo realistas no tengo tiempo suficiente para crear otro tipo de vídeos a día de hoy. Por lo tanto me hice la pregunta de cómo podría hacer los vídeos de la mejor forma posible, dadas mis restricciones, así que pensé en lo mismo que cuento al inicio del post: siempre me gustó dar charlas y hacer presentaciones así que ahora mismo posiblemente es lo ideal para mi.

En el camino he probado muchas herramientas como PowerPoint / Google Slides / Prezi / Apple Keynote... y la verdad son herramientas muy útiles, que mucha gente utiliza, y que son prácticas.

Cuando las he utilizado me resulta tedioso crear las diapositivas por dos motivos: primero porque dependes de conocer una herramienta concreta, y lo segundo, porque la capa de personalización, creación del tema, reutilizar imágenes... me resulta tedioso.

Así que me puse a investigar y encontré la posibilidad de crear presentaciones utilizando HTML, Javascript y CSS. Básicamente utilizar tecnologías web, que conozco muy bien al ser ingeniero de software, son muy versátiles y me resulta cómodo así que ¿por qué no probar?

Leyendo descubrí varias alternativas y la que encontré que más me llamó la atención fue Reveal.js, que te permite crear presentaciones utilizando HTML. Además tiene algunos puntos que me encanta:

• La configuración por defecto es buena. Trae animaciones y diferentes temas configurados.
• Puedes crear un nuevo tema o hacer un override del actual, y todas tus presentaciones o diapositivas se actualizan.
• Es open source (github/reveal.js), y además ofrecen una herramienta de pago por si quieres mejorar tus presentaciones sin utilizar código.
• Me permite añadir imágenes y GIFs.
• Gestionar las animaciones y los estilos con CSS, cargar tus fuentes, SVGs... es muy fácil.

En resumen, me encanta esta herramienta. Al final reveal.js es como un framework que trae todo lo que necesitas para crear presentaciones sin preocuparte de nada (siempre y cuando conozcas las tecnologías web). Y si quieres personalizarlas, te permite hacer prácticamente cualquier cosa que quieras mediante programación web, que hoy en día todo el mundo seguro que es capaz de escribir algunas líneas con unos pocos conocimientos y algo de ChatGPT.

Para crear una presentación lo único que tienes que hacer es crear y desarrollar un fichero index.html. Lo bueno de esto es que al ser un fichero HTML puedes abrirlo directamente en tu navegador y realizar la presentación, utilizando las flechas del teclado para navegar, o incluso un mando a distancia.

Voy a intentar resumir las cosas que me gustan y que no me gustan de esta herramienta:

• ✅ Me encanta la facilidad de utilizarlo out-of-the-box.
• ✅ Personalizar las plantillas es súper fácil.
• ✅ Escribir HTML es muy cómodo, incluso puedes utilizar un plugin para markdown.
• ✅ Al final lo simple siempre es lo más rápido y cómodo.
• ✅ Animaciones, imágenes, GIFs...
• ❌ La navegación en el eje-y me resulta algo liosa y no me termina de gustar. La solución es no utilizarla en mi caso así que no es una pega.
• ❌ Requiere un tiempo para aprender a utilizarlo y configurarlo. En mi caso hay bastante documentación en la que aún no he profundizado.
• ❌ La gestión de múltiples presentaciones es algo tedioso, aún no he encontrado la mejor forma, así que sigo un método algo rudimentario: gestiono a mano los ficheros.