Diapositivas Markdown

¿Por qué usar Markdown para las diapositivas?

PowerPoint y Keynote son excelentes en el diseño de diapositivas y malos en casi todo lo demás. Son difíciles de controlar por versiones, difíciles de comparar, difíciles de editar en un teléfono, difíciles de mantener coherentes en un equipo e imposibles de filtrar con grep. Markdown resuelve «todo lo demás» sin intentar competir en el diseño visual, y para el contenido técnico (muestras de código, salida de terminal, tutoriales de línea de comandos, listas de viñetas) es más rápido de crear que cualquier herramienta gráfica.

El formato es texto plano, así que vive de forma nativa en git, se abre en cualquier editor, se edita en cualquier herramienta desde VS Code hasta vim o una app de notas del teléfono, y sobrevive a 30 años de rotación de software. La contrapartida: renuncias al control de diseño perfecto al píxel. Para las reuniones generales de desarrolladores, las charlas de conferencias, las presentaciones explicativas de README, el material de aula y las charlas relámpago, es un gran trato. Para los argumentos de venta y las presentaciones de marketing, PowerPoint o Figma probablemente sigan ganando.

La convención de ---

Tres guiones en su propia línea es la sintaxis existente de Markdown para una línea horizontal, definida ya en CommonMark y reutilizada como separador de diapositivas en todo el ecosistema de Markdown-diapositivas: reveal.js, Marp, Slidev y la mayoría de las herramientas más pequeñas la usan todas. La convención es inequívoca (una línea horizontal de verdad sigue funcionando dentro de una sola diapositiva; el --- solo divide cuando está en su propia línea) y fácil de escribir. Escribes la presentación como un documento Markdown continuo y la herramienta la vuelve a segmentar visualmente.

El ecosistema de Markdown-diapositivas en 2026

• reveal.js (Hakim El Hattab, desde 2011), la pionera biblioteca de presentaciones basada en el navegador. Cuadrículas de diapositivas verticales y horizontales, transiciones, notas del orador (sintaxis Notes:), código fuente Markdown mediante el atributo data-markdown. El nombre más conocido; slides.com lo aloja como SaaS.
• Marp: el proyecto de Markdown a diapositivas dedicado más popular. Basado en CommonMark, viene con una CLI, una extensión de VS Code y Marp Core. Excelente exportación a PDF. Frontmatter para el tema y la relación de aspecto.
• Slidev (Anthony Fu), más nuevo (2021), basado en Vue, moderno. Diseñado para las charlas de desarrolladores: resaltado de código integrado, incrustación de código en la diapositiva, vista del presentador, dibujar en las diapositivas durante la charla.
• remark.js (Ole Petter Bang), minimalista, de incrustación en un solo archivo. Apreciado por no imponer criterios.
• HackMD: variante de edición colaborativa. Basado en el navegador, requiere cuenta, se sincroniza entre dispositivos.

Esta herramienta ocupa un nicho diferente: sin instalación, sin cuenta, sin subida. Pega, presenta, cierra la pestaña. Es la elección adecuada cuando estás preparando una charla relámpago de 5 minutos en un portátil prestado, ultimando diapositivas en un vuelo o redactando en una sala de reuniones y no quieres arrancar Marp ni iniciar sesión en slides.com.

Las relaciones de aspecto explicadas

Las presentaciones modernas son 16:9 por defecto, todos los proyectores de conferencias construidos en la última década son una superficie 16:9, y el 16:9 coincide con todas las pantallas de portátil y los televisores modernos. El viewport de aquí renderiza en 16:9 para que coincida. Las presentaciones más antiguas usan 4:3 (la relación original de un proyector CRT); los portátiles más antiguos a veces vienen en 16:10. El valor por defecto de PowerPoint ha sido 16:9 desde la versión 2013; Google Slides usa 16:9 por defecto al crear; el valor por defecto de Keynote también es 16:9.

Casos de uso comunes

• Reuniones generales de desarrolladores y días de demostración. Guía a un equipo por un cambio de código, una nueva arquitectura o una retrospectiva de incidentes.
• Charlas de conferencias y meetups. Especialmente las charlas para un público técnico donde la presentación necesita muestras de código que se comparen limpiamente en los pull requests.
• Recorridos por README. Una introducción de 6 diapositivas a una biblioteca, incrustada en la documentación del proyecto.
• Charlas relámpago. Charlas de 5 minutos y unas 5 diapositivas donde la ceremonia es el enemigo.
• Material de aula. Edita las diapositivas en vivo mientras enseñas; los estudiantes pueden copiar el código fuente Markdown para sus apuntes.
• Formación interna. Presentaciones de incorporación versionadas y revisadas como código junto a la base de código que enseñan.
• Resúmenes previos a la reunión. Lecturas previas de 3 diapositivas enviadas como Markdown que el destinatario puede previsualizar en su editor.

Principios de diseño de diapositivas que importan incluso en Markdown

• Una idea por diapositiva. La regla clásica. Si una diapositiva tiene dos ideas, divídela.
• Menos texto, más estructura. Si una diapositiva se lee como un párrafo, el orador está leyendo la diapositiva. Redúcela a viñetas y deja que el orador rellene la prosa.
• Fuentes más grandes de lo que crees. Las diapositivas de Markdown usan por defecto un texto de cuerpo de alrededor del equivalente a 24-32 px. Cualquier cosa por debajo de ~18 px es ilegible desde el fondo de una sala de conferencias.
• Un H1 por diapositiva. Varios encabezados de nivel superior en la misma diapositiva crean confusión visual.
• Mantén cortos los bloques de código. Seis líneas es aproximadamente el máximo cómodo en una diapositiva 16:9. Los fragmentos más largos necesitan dividirse o mostrarse resaltados por trozos.
• Haz que cada imagen se gane su lugar. Las fotos de archivo como decoración son relleno. Los diagramas, las capturas de pantalla y las visualizaciones de datos son señal.

Privacidad

Las presentaciones de diapositivas suelen ser confidenciales: presentaciones para inversores, estrategia interna, cifras financieras, demos de producto previas al lanzamiento. Esta herramienta se ejecuta íntegramente en tu navegador: el Markdown permanece en el área de texto, el renderizado ocurre localmente, y la presentación a pantalla completa lee del mismo estado en memoria. No se sube nada, no se requiere cuenta y cerrar la pestaña borra todo. Las alternativas alojadas en servidor (slides.com, HackMD, GitPitch) requieren confiar en las políticas de manejo de datos del operador; esta elimina la cuestión por completo.

Errores comunes

1. Pegar párrafos enteros en una diapositiva. Si el público lo lee, no está escuchando al orador. Divídelo en viñetas.
2. Niveles de encabezado inconsistentes. Una diapositiva titulada con H1 y la siguiente con H2 parece descuidado. Elige un nivel para los títulos de las diapositivas y cíñete a él.
3. Bloques de código demasiado largos para el proyector. Un fragmento de 30 líneas es ilegible desde la última fila. Muestra solo las 5-10 líneas relevantes, con el resto reemplazado por // ....
4. Sin notas del orador. Las diapositivas son la ayuda de memoria del público, no la tuya. Las notas del orador (en las herramientas que las admiten) contienen los puntos a tratar.
5. Olvidar la relación de aspecto del proyector. Si creaste en un portátil 16:10 y el lugar usa un proyector 4:3, el contenido se recorta.
6. Demasiadas transiciones de diapositivas. Las animaciones entre diapositivas parecen pulidas en una demostración y tediosas durante una charla de 30 minutos. Opta por no usar transiciones o un simple fundido.
7. Usar una fuente ingeniosa que falla en la máquina del lugar. Cíñete a las fuentes del sistema, sans-serif para el cuerpo, monoespaciada para el código.

Más preguntas frecuentes

¿Puedo exportar las diapositivas como PDF?

Sí, entra en el modo de pantalla completa, luego usa la función de impresión de tu navegador (Ctrl/Cmd + P) y elige Guardar como PDF. La mayoría de los navegadores imprimen las diapositivas renderizadas una por página de PDF. El resultado es un PDF de texto limpio (no una imagen), así que es pequeño y se puede buscar en él.

¿Qué hay del resaltado de sintaxis para el código?

Los bloques de código delimitados se renderizan con monoespaciado y un fondo ligeramente oscuro, lo que los hace legibles en el tema oscuro a pantalla completa. El resaltado de sintaxis por lenguaje (las palabras clave de Python en un color, las cadenas en otro) requiere un framework de diapositivas más elaborado como reveal.js o Slidev. Para una charla relámpago rápida rara vez se echa de menos; para las charlas largas con mucho código, esas herramientas encajan mejor.

¿Cómo incrusto una imagen?

Sintaxis de imagen estándar de Markdown: ![alt text](https://your-image-url.png). La imagen debe ser accesible desde la web pública (o desde tu máquina local mediante una URL file://, pero las URL de archivo pueden estar bloqueadas en algunos navegadores). Para las imágenes sensibles, usa la sintaxis de enlace de Markdown a un archivo local que sirvas desde un pequeño servidor web local durante la charla.

¿Funcionará sin conexión?

Una vez cargada la página, sí, el renderizado de Markdown y la navegación por las diapositivas se ejecutan localmente. Las imágenes externas no se cargarán sin red, así que incrusta las imágenes como URI de datos o alójalas localmente si vas a presentar sin conexión.

¿Puedo usar el teclado durante la charla?

Sí, las teclas de flecha / la barra espaciadora avanzan, el retroceso vuelve atrás, Escape sale de la pantalla completa, F alterna la pantalla completa. La mayoría de los mandos de presentación (el presentador inalámbrico estándar de Logitech, etc.) emulan las mismas teclas de flecha, así que funcionan sin configuración.

¿Se envía algo a un servidor?

No. El renderizado de Markdown, la segmentación de diapositivas, la presentación a pantalla completa, todo ocurre en tu navegador. El contenido de tu presentación no se sube, registra ni almacena en ningún lugar del lado del servidor. Cerrar la pestaña borra el contenido del área de texto.