Apunte 17 — Presentaciones ejecutivas con Quarto Reveal.js

Analítica de Personas · Semestre otoño 2026 · Semana 6 · Prof. René Gempp

1. ¿Por qué Reveal.js desde Quarto y no PowerPoint?

La Tarea 5 pide dos productos distintos: un informe técnico completo y una presentación ejecutiva de 5 slides dirigida a la VP de Personas. Hasta ahora hemos trabajado en Quarto generando documentos HTML. En este apunte aprenderemos a generar, desde el mismo Quarto, un segundo tipo de salida: una presentación en formato Reveal.js.

La pregunta razonable es: ¿por qué no usar PowerPoint? Tres motivos:

2. El header YAML mínimo para una presentación Reveal.js

Un archivo .qmd se convierte en una presentación Reveal.js cuando su header YAML tiene format: revealjs en lugar de format: html. El header mínimo usable para la Tarea 5 es:

---
title: "Engagement 2026"
subtitle: "Presentación a la VP de Personas"
author: "[Tu nombre]"
date: today
format:
  revealjs:
    theme: simple
    slide-number: true
    embed-resources: true
    incremental: false
    fig-width: 9
    fig-height: 5
lang: es
execute:
  echo: false
  warning: false
  message: false
---

Tres claves que conviene entender bien:

2.1 embed-resources: true — el detalle más importante

Por defecto, Quarto genera un .html que depende de una carpeta auxiliar con imágenes, CSS y JavaScript. Si subimos solo el HTML a Canvas, la presentación no se ve cuando alguien más la abre. Con embed-resources: true, Quarto empaqueta todo —imágenes, scripts, CSS— dentro del mismo archivo HTML. Es un archivo más grande, pero autosuficiente: podemos mandarlo por correo, subirlo a cualquier lado, y siempre se verá bien.

2.2 echo: false — presentación, no reporte

En el informe técnico usamos code-fold: true para ocultar el código pero dejarlo disponible. En una presentación ejecutiva no queremos código en absoluto: queremos gráficos y bullets. echo: false evita que aparezcan los chunks en las slides. Los gráficos que producen los chunks sí aparecen.

2.3 theme: simple — el tema más limpio para audiencias ejecutivas

Quarto Reveal.js trae varios temas built-in. Para una presentación dirigida a un VP, tres son especialmente apropiados: simple (fondo blanco, negro suave, máxima sobriedad), serif (con tipografía Georgia, más formal) y default (fondo blanco ligeramente gris). Los temas oscuros (dark, black, blood) son más llamativos pero menos apropiados para presentaciones formales de consultoría interna.

3. Cómo se separan las slides

Esta es la parte que más confunde al principio. Quarto ofrece dos formas distintas de separar slides, y conviene elegir una y ser consistente.

3.1 Opción A — separar con ## (headers de nivel 2)

Cada ## inicia una nueva slide. El texto después del ## es el título de esa slide. Es la opción más intuitiva y la que recomendamos para la Tarea 5.

## Mensaje 1: la caída no es transversal

Desarrollo de Software y Soporte Técnico concentran
el 72% de la caída total de engagement.

## Mensaje 2: liderazgo es el driver más potente

El modelo de regresión atribuye 30% del R² a liderazgo,
seguido por desarrollo (25%).

3.2 Opción B — separar con --- (tres guiones)

Cada línea de tres guiones crea una nueva slide sin título. Es útil para slides sin encabezado —por ejemplo, una slide que solo muestra un gráfico grande. Se puede combinar con la Opción A.

## Cambio 2025 → 2026 por área

Gráfico de comparación año a año:

---

![](engagement_2025_2026.png){.r-stretch}

4. Insertar gráficos generados desde R

La gran ventaja de usar Quarto para la presentación es que podemos incluir chunks de R que se ejecutan al renderizar. Un gráfico de ggplot2 se ve así en la slide:

## Heatmap por departamento × dimensión

```{r}
#| fig-width: 10
#| fig-height: 5

ggplot(heatmap_data, aes(dimension, departamento, fill = puntaje)) +
  geom_tile(color = "white") +
  scale_fill_gradient2(midpoint = 3,
                        low = "#B85042",
                        high = "#0D9488") +
  labs(title = "Engagement promedio por área y dimensión",
       x = NULL, y = NULL) +
  theme_minimal(base_size = 14)
```

4.1 Ajustar el tamaño del gráfico al slide

Los options del chunk (fig-width, fig-height) controlan el tamaño del gráfico que R genera. Para una slide Reveal.js estándar (widescreen 16:9), algo como fig-width: 10, fig-height: 5 suele funcionar bien. Si el gráfico se ve chico, se puede agregar la clase .r-stretch después del chunk:

```{r}
#| fig-width: 10
#| fig-height: 5
#| classes: r-stretch

ggplot(...) + ...
```

.r-stretch es una clase especial de Reveal.js que hace que el elemento ocupe todo el espacio vertical disponible en la slide.

5. Layouts: columnas, bullets incrementales, backgrounds

5.1 Dos columnas con :::: {.columns}

Para una slide con texto a la izquierda y un gráfico a la derecha, el patrón es:

## Liderazgo es el driver más potente

:::: {.columns}

::: {.column width="45%"}
- Explica el **30%** del R² del modelo
- Su efecto es consistente entre departamentos
- Cualquier intervención debe partir aquí
:::

::: {.column width="55%"}
```{r}
plot(importancia)
```
:::

::::

5.2 Listas incrementales

Reveal.js permite que los bullets aparezcan uno por uno con clicks del teclado. Se activa con la clase .incremental:

::: {.incremental}
- Primer mensaje: la caída no es transversal
- Segundo mensaje: liderazgo es el driver más potente
- Tercer mensaje: el eNPS está en zona crítica
:::

Útil para slides donde queremos "dosificar" la información y evitar que la audiencia lea toda la slide mientras hablamos del primer punto. Para una presentación ejecutiva de 5 slides, es preferible no abusar de esto: una slide con 3 bullets incrementales se convierte en 4 "clicks" y puede fragmentar el ritmo.

5.3 Slide con fondo de color o imagen

Para darle énfasis visual a una slide de transición (por ejemplo, la portada o el cierre), Reveal.js permite poner un fondo de color o una imagen como background:

## Las tres palancas {background-color="#1B2A4A"}

1. Programa de mentoría en Soporte Técnico
2. Nuevo marco de 1:1 para jefaturas
3. Revisión de carga en Desarrollo de Software

La opción background-color va entre llaves después del título. Con fondos oscuros, el tema se adapta automáticamente y el texto aparece en blanco. También existen background-image, background-size y background-opacity.

6. Speaker notes

Las speaker notes son anotaciones privadas que nosotros vemos en nuestra pantalla pero que la audiencia no ve en la proyección. En Reveal.js se activan con la clase .notes:

## Mensaje 1: la caída no es transversal

Desarrollo de Software y Soporte Técnico concentran
el 72% de la caída total de engagement.

::: {.notes}
Recordarle al VP que la cifra de 72% viene de sumar
las caídas absolutas de esos dos departamentos
dividido por la caída total. Si pregunta por el cálculo
exacto, está en el apéndice técnico del informe.
:::

Para verlas durante la presentación, presiona la tecla S mientras la presentación está abierta en el navegador. Se abre una ventana separada con las notas y un timer.

7. Personalización mínima del estilo

El tema simple es apropiado tal como viene. Pero si queremos alinear los colores con la identidad de InnovaCo (terracotta, navy, sage, teal), podemos agregar un pequeño archivo de estilos personalizado. Se hace en dos pasos:

Paso 1: crear un archivo custom.scss en la misma carpeta del .qmd:

/*-- scss:defaults --*/

$presentation-heading-color: #1B2A4A;
$presentation-heading-font: "Georgia", serif;
$body-color: #1E293B;
$link-color: #B85042;

/*-- scss:rules --*/

.reveal .slide-number { color: #B85042; }
.reveal blockquote { border-left: 4px solid #B85042; }

Paso 2: referenciarlo desde el YAML del .qmd:

format:
  revealjs:
    theme: [simple, custom.scss]

Reveal.js combina las dos hojas: primero aplica simple y después sobreescribe con lo que declaramos en custom.scss. Así mantenemos la sobriedad del tema base pero adaptamos los colores.

8. Renderizar y exportar

Desde RStudio: el botón Render genera el archivo .html. Desde el terminal:

quarto render mi_presentacion.qmd

El resultado es un único archivo mi_presentacion.html (gracias a embed-resources: true) que se puede abrir en cualquier navegador, mandar por correo, o subir a Canvas.

8.1 Navegar la presentación

8.2 Exportar a PDF

Si necesitamos entregar la presentación como PDF (para imprimir o para subirla a un sistema que no acepta HTML), abre la presentación en Chrome, agrega ?print-pdf al final de la URL y luego imprime desde el navegador (Ctrl+P) eligiendo "Guardar como PDF". Cada slide ocupa una página del PDF.

9. La disciplina del límite: 5 slides como restricción creativa

La Tarea 5 pide exactamente 5 slides de contenido, sin contar portada ni cierre. No es capricho: es la restricción que convierte el ejercicio en formación profesional. Cuando tenemos todo el espacio del mundo, comunicamos todo lo que sabemos. Cuando tenemos 5 slides, comunicamos lo que importa.

Una estructura que funciona bien para esta tarea:

Slide 1 — Mensaje 1: ¿Dónde está el problema?
          (responde la pregunta 1 del CEO)
          + 1 visualización: heatmap por área × dimensión

Slide 2 — Mensaje 2: ¿Por qué bajó?
          (responde la pregunta 2 del CEO)
          + 1 visualización: importancia relativa de drivers

Slide 3 — Mensaje 3: ¿Qué tan urgente es?
          (contextualización: eNPS + comparación año a año)
          + 1 visualización: dumbbell 2025 vs 2026

Slide 4 — Las tres palancas (acciones concretas con costo)

Slide 5 — Próximos pasos y timeline (qué empezar el lunes)

10. Checklist antes de entregar

Antes de subir la presentación a Canvas, recorre esta lista:

• El header YAML tiene embed-resources: true.
• El archivo .html resultante abre correctamente haciendo doble click, sin necesidad de una carpeta auxiliar.
• Hay exactamente 5 slides de contenido (sin contar portada ni cierre).
• Cada slide tiene un título que es un mensaje, no una categoría. (Mal: "Resultados". Bien: "Liderazgo es el driver más potente".)
• Cada slide tiene al menos una visualización o una cifra grande; no hay slides de solo bullets.
• Los gráficos son legibles desde la última fila: ejes grandes, títulos descriptivos, leyendas claras.
• No hay código R visible en ninguna slide.
• Las tres palancas son concretas y accionables, con un rango de costo estimado.
• Cronometraste el ensayo y duró entre 4:30 y 5:30 minutos.
• El nombre del archivo sigue la convención Apellido_Nombre_presentacion.html.

11. Resumen: el flujo de trabajo completo

1. Termina primero el informe técnico. La presentación se alimenta del informe, no al revés. Sin el análisis hecho, no hay mensajes que comunicar.
2. Escribe los tres mensajes clave en un post-it o en un papel, antes de abrir Quarto. Una frase cada uno. Esas tres frases son los títulos de las slides 1, 2 y 3.
3. Crea un nuevo archivo .qmd con el header YAML de format: revealjs que vimos en la sección 2.
4. Reutiliza los chunks del informe que producen los gráficos relevantes. Cópialos al .qmd de la presentación. Ajusta base_size para que sean legibles en slide.
5. Arma cada slide con ## + título-mensaje + gráfico o bullets breves. Nada más.
6. Renderiza, cronometra, ajusta. Itera hasta que la presentación dure entre 4:30 y 5:30 minutos.
7. Revisa la checklist de la sección 10 y entrega.