En otra entrada de este blog ya hablé de la creación de materiales para algunos cursos de formación del profesorado que estoy impartiendo (Diseño de materiales y Moodle para cursos del CEFIRE). En esta me voy a centrar en un flujo de trabajo que he diseñado para crear diapositivas automáticamente en los dos tipos de presentaciones que uso habitualmente: Keynote y RevealJS (dentro de Joplin).

Esta entrada no va de que la IA haga por nosotros el contenido de la presentación (que también podría ser, pero no es mi estilo); si no de que a partir del contenido (o un contenido aproximado) automáticamente nos la formatee en estas dos aplicaciones antes mencionadas. Es por tanto, una forma personal de trabajar a la hora de crear presentaciones, que aquí comparto por si a alguien le sirve parte o la totalidad de este flujo de trabajo.

El esquema general de trabajo es:

• Partir de un contenido.
• Transformar ese contenido en un esquema de texto separado por diapositivas y que indique el formato deseado.
• Obtener ese contenido en el código adecuado para introducir en Keynote o RevealJS/Joplin.

A continuación, empezamos la explicación para Keynote, pero si lo que te interesa es solo el ejemplo de RevealJs/Joplin, salta a la siguiente sección.

Flujo de trabajo para Keynote

Hay unos prerequisitos que tenemos que tener en cuenta antes de seguir la explicación:

• Keynote solo funciona en Mac
• Necesitamos utilizar AppleScripts (solo disponible en sistemas Apple de escritorio) para «poblar» automáticamente una plantilla con el contenido. Le introduciremos un código creado con IA y en un segundo creará toda la presentación.
• Podemos tener nuestra propia plantilla de Keynote, pero debemos utilizar correctamente los elementos por defecto de la misma para que funcione.

Creando/Editando una Plantilla de Keynote

Si queremos dar un toque personal a nuestra plantilla, en lugar de utilizar una por defecto, podemos editar la plantilla de Keynote. Y lo más importante a tener en cuenta, según mi experiencia, para que funcione el flujo correctamente es:

• Tener claro qué título de plantilla indicamos (y recordar ese nombre para cuando vayamos a crear el Applescript).
• Tener claro los nombres que ponemos a los diferentes tipos de modelos de diapositivas dentro de la plantilla (ibídem).
• Utilizar siempre los textos de «Título» y «cuerpo de texto» por defecto de cada modelo de diapositivas. Cada diapositiva, solo puede tener un contenedor de texto de cada uno de los anteriores. Lo ideal es empezar desde un modelo básico y de ahí crear una plantilla nueva.

En la imagen, muestro los elementos a tener en cuenta:

1. Primero (1) se debe entrar en el modo de editar las diapositivas maestras. Sabremos que lo estamos haciendo cuando veamos esa franja azul debajo.
2. A la izquierda (2), tenemos todos los nombres de los modelos de diapositivas dentro de ese tema. Esos nombres, que podemos modificar a nuestro gusto, son los que debemos recordar más adelante.
3. A la derecha (3), tenemos los conmutadores para que una diapositiva tenga o no los elementos de texto de Título y Contenido. Si los marcamos, esos elementos aparecerán en nuestra diapositiva y los podremos editar a nuestro gusto.
4. Cualquier otro elemento de texto (4) que exista en la diapositiva (y que no sea o el título o el cuerpo de texto que aparecen y desaparecen con los conmutadores), bien sea por que lo hemos creado nosotros o incluso porque venga predefinido en la plantilla no funcionará, y el código de AppleScript no podrá editarlo. Así que debemos decidir si borrarlo, o si lo dejamos, recordar que más adelante lo deberemos de editar manualmente.

De contenido a esquema

Sea cuál sea nuestra forma de llegar al contenido con el que queremos «poblar» la diapositiva, recomiendo trabajar primero con una etapa intermedia sobre lo que exactamente creará el AppleScript para poder visualizar el contenido más cómodamente sin todas las etiquetas de código.

En mi caso, he creado este ejemplo de plantilla para diapositiva para usar como esquema:

TYPE: Title // Title & Bullets // Section // Quote // Info // Blank
TITLE: 
CONTENT: 
NOTES:

• En «Type»; tengo escritos todos los tipos de diapositiva que maneja mi plantilla, y simplemente se trata de elegir uno de ellos.
• En «Title» y «Content» vendría el texto a introducir en cada uno de esos elementos de plantilla.
• En «Notes» se indicarían las notas del presentador que queremos que se introduzcan en la generación automática.

Podemos crear manualmente nosotros el esquema o pedirle a una IA que nos rellene este esquema para cada diapositiva con un simple prompt, que podría ser algo así como:

[A partir de este contexto] Crea un esquema de las diapositivas de una presentación en la que en cada diapositiva elijas el tipo de diapositiva y completes el contenido siguiendo esta plantilla:
TYPE: Title // Title & Bullets // Section // Quote // Info // Blank
TITLE: 
CONTENT: 
NOTES:

En contexto le podemos indicar un tema, pasar unos apuntes completos o un esquema a medio hacer para que lo arregle y complete.

De esquema a código

Ahora empieza la magia.

Una vez tenemos el esquema, le vamos a pedir a la IA que lo transforme en el código necesario para ser utilizado en AppleScript.

Partimos de un ejemplo de esquema creado por IA:

# Diapositiva 1
**TYPE:** Title  
**TITLE:** Innovación en la Era Digital: Transformando el Futuro  
**CONTENT:** Subtítulo: "Estrategias para el éxito empresarial en el siglo XXI"  
**NOTES:** Diapositiva de apertura. Mantener el foco en el título principal. Presentación personal breve del ponente.

# Diapositiva 2
**TYPE:** Title & Bullets  
**TITLE:** ¿Por qué la Innovación Digital es Crucial?  
**CONTENT:**  
• Acelera los procesos empresariales en un 70%
• Mejora la experiencia del cliente significativamente
• Reduce costos operativos hasta un 40%
• Permite acceso a nuevos mercados globales
• Facilita la toma de decisiones basada en datos

**NOTES:** Enfatizar cada punto con ejemplos concretos. Usar estadísticas actuales para reforzar los argumentos.

# Diapositiva 3
**TYPE:** Section  
**TITLE:** CASOS DE ÉXITO  
**CONTENT:** 
**NOTES:** Diapositiva de transición hacia los ejemplos prácticos. Pausa dramática antes de continuar.

# Diapositiva 4
**TYPE:** Quote  
**TITLE:** La innovación distingue entre un líder y un seguidor  
**CONTENT:** - Steve Jobs  
**NOTES:** Conectar la cita con los casos de éxito que se presentarán. Reflexión sobre liderazgo empresarial.

# Diapositiva 5
**TYPE:** Info  
**TITLE:** 15% anual  
**CONTENT:**  
Crecimiento del e-commerce
**NOTES:** Presentar datos de forma visual con gráficos. Explicar la relevancia de cada estadística para la audiencia.

# Diapositiva 6
**TYPE:** Blank  
**TITLE:**
**CONTENT:**  
**NOTES:** Momento de reflexión silenciosa. Poner una imagen que ayude a la reflexión.

Conviene fijarse en unos pequeños detalles:

• En la diapositiva de sección, aunque el ejemplo original creado por IA tenía contenido en el apartado «Content», se lo que quitado ya que en mi plantilla, los títulos de secciones aparecen solos, sin nada más.
• La Diapositiva Blank es una diapositiva comodín, para cuando planeo incluir algo que no va a poder automatizarse, pero quiero dejar un espacio ya preparado para el ajuste fino al final del proceso, y mantengo notas del presentador para recordarme qué quería hacer en esa diapositiva.

Una vez tenemos este esquema, hay que transformarlo en código. Para ello yo utilizo este Prompt, en el que le doy unas indicaciones generales, le pongo un ejemplo de sintaxis (si no lo haces es muy probable que se equivoque en algo y no funcione) así como el esquema a utilizar.

Crea un AppleScript para generar una presentación Keynote a partir del esquema que tienes al final con estas especificaciones exactas:

• Tema: “CEFIRE”
• Tipos de diapositivas disponibles: Title, Title & Bullets, Section, Quote, Info, Blank
• Transiciones; en cada diapositiva debes indicar: set transition properties to {transition effect:dissolve, transition duration:1.0}
• Title & Bullets: NO incluir símbolos de bullet (•) en el texto, ya que el tema los añade automáticamente

---

A continuación tienes un ejemplo de sintaxis:

— Diapositiva 1: Title

tell slide 1

set object text of default title item to «Título»

set object text of default body item to «Cuerpo»

set presenter notes to «Diapositiva de apertura.»

set transition properties to {transition effect:dissolve, transition duration:1.0}

end tell

— Diapositiva 2: Title & Bullets

make new slide with properties {base slide:master slide «Title & Bullets» of myPresentation}

tell slide 2

set object text of default title item to “Título de la diapositiva“

set object text of default body item to “Contenido”

set presenter notes to “Notas al presentador”

set transition properties to {transition effect:dissolve, transition duration:1.0}

end tell

---

A continuación tienes el esquema que debes transformar en código.

[INTRODUCIR ESQUEMA]

Evidentemente, debes revisar algunos aspectos de este prompt según tu caso: el título de tema, los nombres de las diapositivas, y los bullets points según tu caso de plantilla, y las transiciones que quieres aplicar a cada cambio de diapositiva (por desgracia, no se puede automatizar la animación de elementos individuales). Fíjate como en la primera diapositiva no hay que crearla, ya que ya está creada; éste es un error frecuente de la IA, si no le indicas la sintaxis adecuada de la primera diapositiva.

Si quieres saber más sobre qué se puede y que no se puede hacer con Keynote y AppleScript conviene que consultes: https://iworkautomation.com/keynote/

Una vez tengas el código generado por la IA, debes abrir un nuevo documento de AppleScript, copiar el código (en la zona 1) y ejecutarlo (2), tal y como se indica en la imagen.

Y, cruzando los dedos, ya tendrás tu presentación de diapositivas completa en menos de un segundo:

Lógicamente, para una presentación tan pequeña, no merece la pena todo este esfuerzo. Pero si estamos hablando de 20 o incluso 100 diapositivas, ahí es cuando esta forma de trabajar ahorra mucho tiempo.

Flujo de trabajo para RevealJS (Joplin)

Aunque soy muy fan de Keynote, recientemente he empezado a utilizar Joplin como repositorio Markdown de notas, así como herramienta principal para crear el contenido de texto de mis cursos. Joplin y Markdown pueden utilizarse con un entorno para crear presentaciones llamado RevealJS, mediante un plug-in. Si bien, RevealJS tiene muchas funciones, no todas están disponibles dentro de Joplin; pero me bastan. La función de la IA aquí será similar, a partir del mismo esquema de diapositivas explicado en el punto anterior, crear el tipo de código necesario para que funcione.

Se requiere un conocimiento mínimo de Markdown para usar este sistema. Si ya tienes unas nociones básicas de Markdown, leyendo el prompt puedes entender cómo funciona el sistema:

• Se crearán las diapositivas en Markdown, con sus sintaxis habitual
• Se añadirán los efectos con comentarios debajo de cada sección siguiendo este ejemplo:

[FX: Nombre de FX]: #

Y luego el código Markdown se introducirá en una IA con el siguiente Prompt.

Debes mantener casi intacto el Markdown.

Solo añade para revealjs  los bakcgrounds y los efectos.

Usarás al principio esta hoja de estilo:

<style> .reveal { –r-main-color: black; –r-heading-color: black; –r-background-color: #93b9ff; } .reveal .backgrounds { background-color: #93b9ff; } body { background-color: #93b9ff; } .fragment.blur { filter: blur(8px); transition: filter 0.5s; } .fragment.blur.visible { filter: none; } </style>

El nivel # será el título de la presentación, el texto será en inline code y tendrá el fondo: dark grey

Cada vez que haya un nuevo encabezado, se cambiará de diapositivas y para ello se separarán con:

—-

El nivel ## será siempre un título de sección y tendrá el fondo: #cdffd8

Para ello usarás:

<section data-background-color=»#cdffd8″>

</section>

Con el nivel ## si hay contenido dentro, en la primera diapositiva indicar solo el encabezado con ## y en la siguiente se repite el encabezado con el contenido ya sin color específico de background.

Y en esos casos también añadirás el efecto de movimiento automático de esta forma:

• Primera diapositiva: <section data-background-color=»#cdffd8″ data-auto-animate> con solo el título

• Segunda diapositiva: <section data-auto-animate> con el título repetido y el contenido

Pero evitarás realizarlo cuando la segunda diapositiva incluya animación de código.

Si a partir de ## hay algun nivel sin contenido antes del siguiente encabezado (sea del nivel que sea) funcionará como nueva sección.

Los posibles efectos a aplicar se indicarán en el markdown con comentarios justo debajo del encabezado. Estos comentarios desaparecerán en la versión que crees.

Los posibles efectos son:

La presentación de fit se hará con:

 <p class=»r-fit-text»>BIG</p>

La presentación de fragmentos se hará con:

<div class=»fragment fade-up»><p>texto</p></div>

La presentación de blur se hará con:

 <p class=»fragment custom blur»>One</p>

La presentación de columnas con:

<div style=»display: flex; justify-content: space-around;»>

  <div class=»fragment» style=»flex: 1; margin: 10px;»>

    <h4>Columna 1</h4>

    <p>Contenido de la primera columna con información relevante</p>

  </div>

  <div class=»fragment» style=»flex: 1; margin: 10px;»>

    <h4>Columna 2</h4>

    <p>Contenido de la segunda columna con datos adicionales</p>

  </div>

 </div>

El efecto de Movimiento Automático se indicará en todas las secciones que comparten contenido con:

<section data-auto-animate> Texto </section> 

El efecto de destacar se hará con:

<p class=»fragment grow»>Test 1</p>

El efecto de animación de código se hará con:

<pre><code data-trim data-line-numbers=»1-2|4-6|8-12|14-20|1-21″>

En este caso se han configurado solo unos efectos básicos y se han decidido unos colores básicos de fondos de diapositivas para hacerlo mas acorde a la imagen corporativa de CEFIRE, pero en la hoja de estilos se puede cambiar al gusto de cada uno.

El resultado se introduce en una nueva nota de Joplin, y ya se puede utilizar la presentación.

Te dejo un ejemplo creado automáticamente con este sistema:

Si tienes el plugin de RevealJS instalado en Joplin y copias el siguiente código a una nueva nota, cuando inicies la presentación, lo podrás ver.

<style>
    :root > body {
        --r-main-color: black;
        --r-heading-color: black;
        --r-background-color: #93b9ff;
    }

.fragment.blur {
  filter: blur(8px);
  transition: filter 0.5s;
}
.fragment.blur.visible {
  filter: none;
}

</style>

# <section data-background-color="darkgrey">`Presentación de Ejemplo RevealJS`</section>

---

<section data-background-color="#cdffd8" data-auto-animate>

## Introducción a RevealJS

</section>

---

<section data-auto-animate>

## Introducción a RevealJS

Esta es una presentación de demostración que muestra todos los efectos disponibles para traducir markdown a RevealJS.

</section>

---

### Efecto Fit Text

<!-- fit -->

<p class="r-fit-text">Este texto se ajustará automáticamente al tamaño de la diapositiva usando la clase r-fit-text.</p>

---

### Fragmentos con Fade

<!-- fragments -->

Estos elementos aparecerán uno por uno:

<div class="fragment fade-up"><p>- Primer elemento</p></div>
<div class="fragment fade-up"><p>- Segundo elemento</p></div>
<div class="fragment fade-up"><p>- Tercer elemento</p></div>

---

### Efecto Blur

<!-- blur -->

Este contenido tendrá un efecto de desenfoque que se aplicará progresivamente a cada elemento de la lista:

<p class="fragment custom blur">- Elemento uno con blur</p>
<p class="fragment custom blur">- Elemento dos con blur</p>
<p class="fragment custom blur">- Elemento tres con blur</p>

---

<section data-background-color="#cdffd8" data-auto-animate>

## Diseño y Layouts

</section>

---

<section data-auto-animate>

## Diseño y Layouts

### Columnas

<!-- columns -->

<div style="display: flex; justify-content: space-around;">
  <div class="fragment" style="flex: 1; margin: 10px;">
    <h4>Ventajas del Sistema</h4>
    <ul>
      <li>Fácil de usar</li>
      <li>Altamente personalizable</li>
      <li>Compatible con múltiples formatos</li>
    </ul>
  </div>
  <div class="fragment" style="flex: 1; margin: 10px;">
    <h4>Características Técnicas</h4>
    <ul>
      <li>Basado en HTML5</li>
      <li>Soporte para markdown</li>
      <li>Extensible con plugins</li>
    </ul>
  </div>
</div>

</section>

---

<section data-auto-animate>

### Movimiento Automático - Parte 1

<!-- auto-animate -->

#### Conceptos Básicos

Este es el primer slide de una secuencia animada.

**Lista inicial:**

- Elemento A
- Elemento B

</section>

---

<section data-auto-animate>

### Movimiento Automático - Parte 2

<!-- auto-animate -->

#### Conceptos Básicos

Este es el segundo slide donde los elementos se mueven suavemente.

**Lista expandida:**

- Elemento A
- Elemento B
- Elemento C (nuevo)
- Elemento D (nuevo)

</section>

---

### Efecto Destacar

<!-- highlight -->

Estos elementos crecerán cuando aparezcan:

<p class="fragment grow"><strong>Punto importante 1:</strong> La presentación es responsive</p>

<p class="fragment grow"><strong>Punto importante 2:</strong> Soporta múltiples temas</p>

<p class="fragment grow"><strong>Punto importante 3:</strong> Incluye navegación táctil</p>

---

<section data-background-color="#cdffd8" data-auto-animate>

## Sección de Código

</section>

---

<section data-auto-animate>

## Sección de Código

### Animación de Código

<!-- code-animation -->

<pre><code data-trim data-line-numbers="1-2|4-6|8-12|14-16|1-16">
// Función para calcular factorial
function factorial(n) {
    // Caso base
    if (n === 0 || n === 1) {
        return 1;
    }
    
    // Caso recursivo
    let result = 1;
    for (let i = 2; i <= n; i++) {
        result *= i;
    }
    
    // Retornar resultado
    return result;
}

// Ejemplo de uso
console.log(factorial(5)); // 120
console.log(factorial(10)); // 3628800
</code></pre>

</section>

---

<section data-background-color="#cdffd8" data-auto-animate>

## Combinación de Efectos

</section>

---

<section data-auto-animate>

## Combinación de Efectos

### Múltiples Efectos

<!-- fragments -->

<!-- highlight -->

Esta diapositiva combina varios efectos:

<div class="fragment fade-up">
  <p class="highlight-red">1. <strong>Fragmentos:</strong> Los elementos aparecen secuencialmente</p>
</div>
<div class="fragment fade-up">
  <p class="highlight-red">2. <strong>Destacado:</strong> Algunos elementos crecen al aparecer</p>
</div>
<div class="fragment fade-up">
  <p class="highlight-red">3. <strong>Transiciones:</strong> Suave movimiento entre diapositivas</p>
</div>

</section>

---

### Ejemplo con Listas y Blur

<!-- blur -->

<!-- fragments -->

#### Proceso de Desarrollo:

<p class="fragment custom blur">1. Planificación del proyecto</p>
<p class="fragment custom blur">2. Diseño de la arquitectura</p>
<p class="fragment custom blur">3. Implementación del código</p>
<p class="fragment custom blur">4. Pruebas y debugging</p>
<p class="fragment custom blur">5. Despliegue a producción</p>

---

<section data-background-color="#cdffd8">

## Sección Final

</section>

---

### Resumen

<!-- columns -->

<div style="display: flex; justify-content: space-around;">
  <div class="fragment" style="flex: 1; margin: 10px;">
    <h4>Lo que aprendimos:</h4>
    <ul>
      <li>Uso de efectos fit text</li>
      <li>Implementación de fragmentos</li>
      <li>Aplicación de blur</li>
      <li>Creación de columnas</li>
    </ul>
  </div>
  <div class="fragment" style="flex: 1; margin: 10px;">
    <h4>Próximos pasos:</h4>
    <ul>
      <li>Practicar con ejemplos reales</li>
      <li>Personalizar estilos</li>
      <li>Crear presentaciones complejas</li>
      <li>Compartir conocimiento</li>
    </ul>
  </div>
</div>

---

<section data-auto-animate>

### Cierre con Animación

<!-- auto-animate -->

# Gracias

</section>

---

<section data-auto-animate>

### Cierre con Animación

<!-- auto-animate -->

# Gracias

**Contacto:** ejemplo@email.com

**GitHub:** github.com/usuario

</section>

---

<section data-background-color="#cdffd8">

## Sección Extra

</section>

---

### Código con Highlighting Progresivo

<!-- code-animation -->

<pre><code data-trim data-line-numbers="1-3|5-10|12-13|15-17|1-17">
# Importar librerías necesarias
import numpy as np
import pandas as pd

# Crear un DataFrame
data = {
    'nombre': ['Ana', 'Juan', 'María'],
    'edad': [25, 30, 28],
    'ciudad': ['Madrid', 'Barcelona', 'Valencia']
}

df = pd.DataFrame(data)

# Filtrar datos
mayores_27 = df[df['edad'] > 27]

# Mostrar resultados
print(mayores_27)
print(f"Personas mayores de 27: {len(mayores_27)}")
</code></pre>

---

### Efecto Fit para Títulos Grandes

<!-- fit -->

<p class="r-fit-text">IMPACTO VISUAL MÁXIMO</p>

---

<section data-background-color="#cdffd8">

## Fin de la Presentación

</section>