TiddlyBlog de leoperbo

Esta página es una representación aislada y estática de mi TiddlyBlog, cuya versión dinámica está en https://tiddlyblog.welhaba.mx

Diapositivas sin barreras con reveal.js

19 febrero 2026 a las 8:05

Diapositivas... Ese invento que promete salvarnos de quedarnos en blanco en medio de una exposición o de dejar al público con cara de incógnita al intentar explicarle la relación entre conjuntos de datos. Ese invento, popularmente conocido como PowerPoint, que también puede adoptar el rol de un portal que transporta a una dimensión donde el aburrimiento es implacable.

Esperen, ¿nos gustan o no las diapositivas?

Las presentaciones gráficas mal hechas son como tu compañera de trabajo borracha, apropiándose del micrófono en el karaoke, nadie las pidió, pero están ahí arruinando la fiesta. Cuando abarrotas cada diapositiva con párrafos interminables, ya enviaste al 90% de tu audiencia hacia un viaje mental por el recuento de sus pendientes, como comprar la leche o reservar boletos para un concierto. Si además, decides leer textualmente lo que proyectas (¡sorpresa! todas saben leer), tu público comenzará a sentirse repentinamente mucho más interesado en observar el paulatino crecimiento de sus uñas. Edward Tufte, gurú del diseño de información, parecía muy impactado por las presentaciones en las que se hacía un pésimo uso de las diapositivas cuando dijo:

El PowerPoint es como un virus, corrompe la mente y el discurso.

Pero siendo honestos, las diapositivas son necesarias, en especial en el mundo académico. Posibilitan, por ejemplo, que en vez de soltar un monólogo de hora y media, pongas tres ideas clave, una imagen de un meme relevante (sí, cuenta como recurso pedagógico) y ¡toma chango tu banana!, la audiencia no se duerme. Además, son ideales para quienes sufren de miedo escénico o mala memoria por acumulación de juventud: si te quedas en blanco en un momento inesperado, ahí está tu diapositiva salvavidas, que será útil si (y sólo si) has tenido el cuidado de ponerle únicamente alguna palabra clave, alguna cita corta o alguna imagen que detone tu memoria y te permita continuar con la misión. Bien decía Steve Jobs,:

La simplicidad es la máxima sofisticación.

Asumiendo esta última aproximación a las diapositivas como una herramienta poderosa, cuando se usa con inteligencia y moderación, paso a lo que nos truje...

¿Qué es eso de reveal.js?

Aunque parece el título de un álbum musical, reveal.js es un marco de trabajo, de código abierto, para generar presentaciones digitales en formato HTML... Ya sé...

Meme de la escena en que el científico de los Simpsons intenta explicar algo a la comunidad y le dicen -oye, oye, más despacio cerebrito-

En otras palabras, es una forma en la que cualquiera puede hacer presentaciones que funcionarán en los navegadores convencionales, sin tener que piratear el PowerPoint o similares, ni atenerse a los requisitos y las limitaciones de plataformas freemium como Canva.

Sé que también está la alternativa, igual gratuita, de LibreOffice Impress... Pero la limitante ahí es la distribución con todas las características que se esperan de una presentación gráfica digital, ya que no es posible ejecutarla así (con transiciones, animaciones y otras chuladas) en dispositivos que no tengan instalada esa paquetería ofimática.

Como reveal.js apunta a generar una presentación HTML, esta puede funcionar desde cualquier navegador, accediendo vía Internet (si se cuenta con un sitio al cual subir el resultado) o vía local, preparando los elementos necesarios en una USB o en un comprimido que pueda ser transferido al dispositivo que se usará para la proyección.

¿Qué chuladas incluye reveal.js?

Entre las características más relevantes de reveal.js están:

  • Diapositivas ramificadas: permite organizar la navegación del contenido tanto en forma horizontal como vertical, lo que posibilita profundizar en temas específicos si la dinámica de la clase lo amerita.
  • Soporte Markdown: un lenguaje de marcado muy sencillo de aprender, que facilita estructurar el contenido y darle formato con toda agilidad, usando cualquier simple bloc de notas.
  • Auto-Animate: animaciones-transiciones entre elementos, que brindan un aspecto dinámico, pulido y profesional, además de favorecer ciertas necesidades didácticas asociadas los momentos en que aparece cada parte de información.
  • Exportación a PDF: seguro ya sabes a qué se refiere esto.
  • Notas del orador: anota los puntos clave que serán visibles únicamente para ti durante la presentación.
  • Composición tipográfica LaTeX: asegura que tus ecuaciones y notaciones científicas se rendericen perfectamente.
  • Código con sintaxis resaltada: muestra fragmentos de código con resaltado de sintaxis, muy útil para fines didácticos en todas las áreas.
  • API: bastante nutrida, permite a desarrolladores personalizar e integrar reveal.js con otras aplicaciones web.

No pos guau, ¿puedo ver un ejemplo?

Mirar en otra ventana/pestaña para agrandar

Muy bonito y todo pero... ¿Cómo hago mis presentaciones en reveal.js?

Ahí está la bronca 😅. La verdad es que sí se requiere alfabetización básica en HTML... Pero con eso y una mirada analítica y suspicaz, ya la hiciste 😉.

Lo cierto es que hay una forma muy sencilla de generar tus presentaciones en este formato mediante Sildes.com, que es un editor totalmente visual para trabajar con presentaciones tipo reveal.js, pero (siempre hay un "pero" 😭) para usarlo se necesita una cuenta que, obviamente, requiere pasar por caja, lo que no es necesariamente malo porque apoyaríamos el desarrollo de un buen software de código abierto... Eso nos devolvería al planteamiento inicial en el que no todas las personas se pueden permitir pagar licencias y no todas quieren usar plataformas en línea que conllevan ciertas limitantes.

Hágalo por cuenta propia: la milenaria técnica de editar código

Aunque reconozco que generar una presentación directamente en código HTML es un trabajo que adolece de sencillez, puedo esgrimir el argumento de que el conocimiento abre muchas puertas y la falta del mismo sólo puede compensarse con dinero (a veces con alguna transgresión ética). Honestamente, me parece triste que en pleno siglo XXI haya tantas personas que llegan a la universidad sin haber aprendido las bases de HTML... Me atrevería a decir que es aún más lamentable que no haber aprendido las bases de un segundo idioma.

Como tengo fijado el propósito de ser chido, diseñé el HTML de la presentación expuesta arriba con una estructura y etiquetas que facilitan su comprensión, de manera que hasta puede usarse como plantilla para quien guste realizar sus propias presentaciones a partir de ella (basta con reemplazar los contenidos de reveal.js/index.html guiándose de las etiquetas).

La principal ventaja de hacerlo al estilo de Tank es que se puede preparar el contenido de una bonita presentación incluso desde un celular de gama baja, sin conexión a Internet... Es más, se puede desde una máquina de escribir y hasta en una servilleta o en un rollo de papel higiénico si hay mucho que exponer, luego escaneas, pones el código en el index.html y ¡vámonos!

¿Deseas ayuda para aprender?

Mira que estoy de buenas, solicítalo mediante el mecanismo de comentarios de esta entrada y añadiré "crear un microcurso en Tocetea sobre reveal.js" a una de mis listas de pendientes.



Contenidos derivados
Ordenar

ElementoEtiquetas