AWS Builder Center

Builder Center

Crear presentaciones también puede sentirse como programar

Crear presentaciones también puede sentirse como programar

Aprendé a crear presentaciones como código usando Markdown, Marp y Kiro. Desde el prompt inicial hasta el preview, el diseño, Git y la exportación a PDF o PPTX, con un flujo simple, práctico y pensado para developers.

Hacer una presentación técnica suele empezar igual:
Si sos developer, hay otra forma:
hacer la presentación como código.
  • Markdown para escribir.
  • Marp para convertirlo en slides.
  • Kiro para ayudarnos con IA.
  • Git para versionarlo.
En este ejemplo vamos a crear una presentación simple sobre Docker.
1
2
3
4
5
6
7
Kiro
↓
Markdown
↓
Marp
↓
PDF / PPTX / HTML

Primero: preparar Marp

Podemos usar Marp de dos formas:
1
2
Marp Extension → preview
Marp CLI → exportar

Extensión

En Kiro o VS Code buscá:
Repo marp-vscode 
1
Marp for VS Code
Con eso vas a poder ver las slides mientras editás el Markdown.

CLI

No hace falta instalar nada globalmente.
Repo: marp-cli 
Podés usar:
1
npx @marp-team/marp-cli --version
Y después exportar con:
1
npx @marp-team/marp-cli docker.md --pdf
o:
1
npx @marp-team/marp-cli docker.md --pptx
Listo.
Ya tenemos el entorno.

Ahora sí: pedirle a Kiro que cree la presentación

En lugar de empezar escribiendo slides manualmente, podemos darle el brief directamente.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Quiero crear una presentación utilizando Marp.

Tema:
Introducción a Docker.

Audiencia:
Personas que nunca utilizaron contenedores.

Duración:
20 minutos.

Objetivo:
Que puedan explicar qué es una imagen,
qué es un contenedor
y ejecutar su primer docker run.

Creá docker.md.

Requisitos:

- formato 16:9
- aproximadamente 10 slides
- una idea principal por slide
- máximo 5 bullets
- evitar párrafos largos
- incluir diagramas simples
- incluir una demo con nginx

Generá solamente el Markdown.
Acá está una de las primeras lecciones:
el brief importa más que decir “haceme una presentación”.
Audiencia, duración y objetivo cambian completamente el resultado.

¿Qué genera Kiro?

Después del prompt, Kiro crea un archivo llamado:
docker.md
Ese archivo contiene toda la presentación en Markdown.
Por ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
---
marp: true
paginate: true
size: 16:9
---

# 🐳 Introducción a Docker

De cero a tu primer contenedor

---

## ¿Qué es una imagen?

- Plantilla de solo lectura
- Incluye código y dependencias
- Se utiliza para crear contenedores

---

## ¿Qué es un contenedor?

- Una imagen en ejecución
- Aislado
- Portable
- Descartable

---

## Demo: nginx

```bash
docker run -d \
--name web \
-p 8080:80 \
nginx
1
2
3
4
5
6
7
8
9
10
11

Lo importante es entender dos cosas.

Primero, estas líneas del inicio configuran Marp:

```yaml
---
marp: true
paginate: true
size: 16:9
---
  • marp: true activa Marp.
  • paginate: true agrega el número de página.
  • size: 16:9 define el formato de la presentación.
Segundo, cada vez que aparece:
1
---
Marp entiende que comienza una nueva diapositiva.
Es decir:
1
2
3
4
5
6
7
8
9
10
11
12
13
# Portada

---

## ¿Qué es una imagen?

---

## ¿Qué es un contenedor?

---

## Demo
se convierte en:
1
2
3
4
Slide 1 → Portada
Slide 2 → ¿Qué es una imagen?
Slide 3 → ¿Qué es un contenedor?
Slide 4 → Demo
Así de simple.

Ver la presentación mientras trabajamos

Ahora abrimos docker.md en Kiro.
Con la extensión Marp for VS Code instalada podemos abrir el preview y ver las slides directamente desde el editor.
El flujo queda así:
1
2
3
4
5
6
7
Kiro
↓
docker.md
↓
Marp Preview
↓
vemos la presentación
Si modificamos el Markdown, podemos ver inmediatamente cómo cambia la presentación.
No necesitamos generar un PDF cada vez.
Por ejemplo, podemos pedirle a Kiro:
1
2
3
4
5
Agregá una slide después de
"¿Qué es un contenedor?"

Explicá qué es Docker Hub
con máximo 3 puntos.
Kiro modifica docker.md y podemos revisar el resultado directamente en el preview.

Probar una demo real

Como nuestra presentación es sobre Docker, podemos incluir comandos que realmente vamos a ejecutar durante la charla.
Por ejemplo, una slide puede contener:
1
2
3
4
docker run -d \
--name web \
-p 8080:80 \
nginx
Durante la demo abrimos:
1
http://localhost:8080
y mostramos nginx ejecutándose dentro de un contenedor.
Después podemos limpiar el entorno con:
1
docker rm -f web
Esto también es útil si estamos practicando la charla y queremos ejecutar la demo varias veces.
Así, nuestras slides no solo explican Docker:
también acompañan una demo real.

¿Y el diseño?

Marp también permite crear temas usando CSS.
Por ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* @theme docker */

section {
font-family: Arial, sans-serif;
font-size: 30px;
padding: 70px;
}

h1 {
font-size: 70px;
}

h2 {
font-size: 50px;
}
Y en nuestro Markdown:
1
2
3
4
5
6
---
marp: true
theme: docker
paginate: true
size: 16:9
---
También podemos pedirle a Kiro:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Creá un tema CSS para Marp y guardalo en un archivo llamado `docker.css`.

Quiero:

- diseño minimalista
- títulos grandes
- código fácil de leer
- estilo técnico
- formato pensado para proyectar
- buen contraste
- tipografía legible desde una sala
- bloques de código con estilo de terminal
- paleta inspirada en Docker

El archivo debe comenzar con:

```css
/* @theme docker */
```

Generá únicamente el contenido completo de `docker.css`.
Y que genere directamente:
1
docker.css

Ojo con el preview

Hay un detalle que puede hacerte perder un rato.
Tener:
1
theme: docker
no significa automáticamente que la extensión conozca nuestro CSS.
Hay que registrarlo.
Creamos:
1
.vscode/settings.json
con:
1
2
3
4
5
{
"markdown.marp.themes": [
"./docker.css"
]
}
Ahora sí:
1
2
3
4
5
docker.css
↓
Marp Preview
↓
🎨 tema aplicado

Configurar la CLI una sola vez

También podemos crear:
1
.marprc.yml
1
2
3
4
5
6
html: true
theme: ./docker.css
size: 16:9

options:
allowLocalFiles: true
Nuestro proyecto queda así:
1
2
3
4
5
6
7
8
presentacion-docker/
│
├── docker.md
├── docker.css
├── .marprc.yml
│
└── .vscode/
└── settings.json
Y exportar se vuelve simplemente:
1
npx @marp-team/marp-cli docker.md --pdf

Lo mejor: iterar conversando

Como nuestra presentación es texto, podemos seguir trabajando con Kiro.
Por ejemplo:
1
2
3
4
5
6
Revisá docker.md.

Hay demasiado texto.

Dejá máximo 4 puntos por slide
sin eliminar los comandos.
O:
1
2
3
Agregá una slide después de
"Imagen vs Contenedor"
explicando Docker Hub.
O algo mucho más interesante:
1
2
3
4
5
La audiencia nunca utilizó Docker.

Revisá la presentación y detectá
conceptos que estoy explicando
antes de haberlos introducido.
Ahí la IA deja de ser simplemente un generador.
Se convierte en un copiloto editorial.

Presentation as Code

Y esta es la parte que más me gusta.
Nuestra presentación ahora vive en:
1
docker.md
Entonces podemos hacer:
1
2
3
4
git add docker.md docker.css

git commit \
-m "feat: agrega presentación de Docker"
Y ver cambios reales:
1
2
3
- Docker ejecuta aplicaciones.
+ Docker permite ejecutar aplicaciones
+ utilizando contenedores.
  • Podemos tener branches.
  • Pull requests.
  • Code review.
  • Historial.
Incluso CI/CD:
Sí.
CI/CD para presentaciones.

Mi flujo queda así

  • Kiro ayuda a crear e iterar.
  • Markdown mantiene todo simple.
  • Marp genera la presentación.
  • Git guarda la historia.

Conclusión

Durante mucho tiempo pensé las presentaciones como archivos.
Ahora prefiero pensarlas como proyectos.
Porque un proyecto puede tener:
1
2
3
4
5
contenido
diseño
versiones
automatización
revisión
Y la combinación:
Kiro + Markdown + Marp + Git
hace exactamente eso.
Si trabajás todos los días con código, Git y Markdown, vale la pena probar este flujo aunque sea una vez.
Crear presentaciones también puede sentirse como programar. 🚀
Build with fire. Deploy with power. 🔥
Sigueme en mis redes sociales en mi web: roxs.dev
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article