Markdown Slides (beta)

Pega tu Markdown. Separa diapositivas con ---. Pulsa Presentar.

# El Arte de Presentar
Diseñando para conectar
---
## ¿Qué hay aquí para tí?
Esta presentación es una **guía práctica** y, una **demostración en vivo** de lo que MDslides puede hacer:
- **Principios atemporales**
- **Tendencias 2026**
- **Layouts y formato**
- **CSS personalizable**
---

## Parte 1
### Los fundamentos
---
## Una idea por diapositiva
La memoria de trabajo solo retiene de **3 a 5 elementos** simultáneamente.
Las diapositivas son un **"medio de vistazo"**, más parecidas a una valla publicitaria que a un documento.
---
## La regla de los 3 segundos
<columns>
<col>
Nancy Duarte propone un test rápido:
**¿Tu audiencia puede captar el mensaje de cada diapositiva en 3 segundos?**
Si no, elimina texto, agranda la tipografía, deja que el espacio en blanco haga su trabajo.
</col>
<col>
![Presentando ideas](https://files.milab.es/files/images/1771077032485_sticker_man_presenting.png)
</col>
</columns>
---
## Carga cognitiva
Procesamos imágenes **60.000 veces más rápido** que el texto. Pero más rápido no significa mejor: la memoria de trabajo tiene límites.
Hay 3 tipos de cargas cognitivas:
1. **Intrínseca** — la complejidad del contenido
2. **Extrínseca** — cómo presentas ese contenido (ruido visual, desorden)
3. **Germinal** — el esfuerzo de conectar lo nuevo con lo que ya sabes
Tu misión es **minimizar la extrínseca** para que la energía se invierta en comprender y recordar.
---
## Jerarquía visual
<columns>
<col>
![Presentando ideas](https://files.milab.es/files/images/1771077032485_sticker_man_presenting.png)
</col>
<col>
Sin jerarquía, tu audiencia tiene que escanear, ordenar y priorizar por su cuenta. Mientras hacen ese trabajo mental, **no te escuchan**.
Usa el:
- **Tamaño** — lo importante, grande
- **Contraste** — un solo color de acento para lo esencial
- **Espacio** — el vacío dirige la atención
</col>
</columns>
---
## El espacio en blanco
Es el ingrediente secreto de las mejores presentaciones porque:
- Da **respiro** al contenido
- Crea **foco** en lo importante
- Transmite **elegancia** y profesionalidad
- Reduce la carga cognitiva extrínseca
La filosofía japonesa del *Ma* (間) — el espacio entre las cosas — es uno de los pilares de Garr Reynolds.
---

## Parte 2
### Tendencias 2026
---
## Menos slides, más impacto
Busca la **brevedad**. Se imponen los decks cortos, visuales y de alto impacto.
La atención media de un ejecutivo sigue reduciéndose. Ganan las presentaciones de **10 minutos** que condensan ideas complejas en mensajes claros.
> "Si no puedes explicarlo de forma sencilla, es que no lo entiendes lo suficiente."
> — Albert Einstein
---

## Fondos oscuros: drama y legibilidad
El *dark mode* ha llegado. Los fondos oscuros reducen fatiga visual en salas oscurecidas y crean un efecto dramático que centra la atención en el contenido.
La clave está en el **contraste**: texto claro sobre fondo oscuro, con un color de acento brillante para los elementos destacados.
---
## Tipografía grande y audaz
Los títulos grandes y llamativos. Un título *splash* captura la atención al instante y da al público un ancla visual antes de absorber los detalles.
En MDslides puedes controlar el tamaño de cada nivel:
| Variable | Uso | Valor por defecto |
|---|---|---|
| `--heading-size-h1` | Título principal | 2.8em |
| `--heading-size-h2` | Subtítulos | 2em |
| `--heading-size-h3` | Tercer nivel | 1.5em |
| `--body-size` | Texto cuerpo | 1.3em |
Aumenta `--heading-size-h1` a `3.5em` o más para un efecto impactante.
---
## Datos
<grid>
<cell>
### 60.000×
El cerebro procesa imágenes 60.000 veces más rápido que texto.
</cell>
<cell>
### 42%
La retención aumenta un 42% al usar elementos visuales en lugar de solo texto.
</cell>
<cell>
### 3 seg
Tiempo máximo que tu audiencia debería necesitar para entender una diapositiva.
</cell>
<cell>
### 3–5
Elementos que la memoria de trabajo puede retener simultáneamente.
</cell>
</grid>
---
## Paletas de color con intención
Tres enfoques dominantes:
- **Gradientes sutiles** — fondos que pasan de un tono a otro, creando profundidad sin distraer
- **Monotono con acento** — una sola familia cromática con un color de contraste para lo importante
- **Alto contraste** — combinaciones audaces que transmiten energía y modernidad
---

## Parte 3
### Principios de diseño
---
## Storytelling visual: cuenta una historia
Las mejores presentaciones no informan, **narran**.
Puedes hacer tu presentación como un viaje:
1. **Apertura** — conecta con una emoción o pregunta
2. **Tensión** — presenta el problema o el reto
3. **Resolución** — ofrece la solución o el aprendizaje
4. **Cierre** — termina con una llamada a la acción memorable
---
## El principio de contraste
<columns>
<col>
El contraste es la herramienta más poderosa del diseño visual.
Aplica en **múltiples niveles**:
- Tamaño de tipografía (grande vs. pequeño)
- Color (oscuro vs. claro)
- Densidad (lleno vs. vacío)
- Ritmo (slides densas vs. slides respiradas)
Alterna diapositivas de contenido con slides de *pausa visual* para mantener la atención.
</col>
<col>
![Presentando ideas](https://files.milab.es/files/images/1771077032485_sticker_man_presenting.png)
</col>
</columns>
---
## Consistencia
Un buen tema aporta consistencia:
- **Tipografía uniforme** — la misma fuente para títulos, misma para el cuerpo
- **Paleta controlada** — máximo 3-4 colores en la presentación
- **Espaciado predecible** — márgenes y paddings idénticos en cada slide
- **Alineación coherente** — los elementos siguen una rejilla invisible
---
## La imagen amplifica, no repite
<columns>
<col>
Una imagen no debe **amplificar**, añadir una dimensión emocional o contextual.
Criterios para elegir imágenes:
- Relevancia con el mensaje
- Alta resolución (nada pixelado)
- Composición limpia, sin ruido visual
- Evitar bancos genéricos
</col>
<col>
![Presentando ideas](https://files.milab.es/files/images/1771077032485_sticker_man_presenting.png)
</col>
</columns>
---
## El test de la valla publicitaria
> "Las presentaciones como una valla publicitaria. Pregúntate si tu mensaje puede procesarse en tres segundos."
> — Nancy Duarte
Si tu diapositiva necesita explicación para ser entendida, tiene demasiado contenido. Las slides son el soporte visual; **tú eres el mensaje**.
---

## Parte 4
### Herramientas MDslides
---
## Lo que incluye cada tema
<grid>
<cell>
### Tipografía
Fuentes para títulos y cuerpo para pantalla y proyección.
</cell>
<cell>
### Paleta
6 colores de acento armoniosos: `--accent-1` a `--accent-6`.
</cell>
<cell>
### Espaciado
Márgenes y paddings calibrados para formato 16:9.
</cell>
<cell>
### Código
Bloques con fondo `--code-bg` y tipografía monoespaciada.
</cell>
</grid>
---
## Layouts automáticos
MDslides detecta el layout óptimo según tu contenido:
| Layout | Cuándo se activa | Uso ideal |
|---|---|---|
| **Cover** | Solo título H1 | Portada y cierre |
| **Section** | Solo título H2/H3 | Divisor de sección |
| **Split** | Columnas con `<columns>` | Texto + imagen |
| **Grid** | Celdas con `<grid>` | Datos, comparativas |
| **Default** | Texto estándar | Contenido general |
También puedes forzar cualquier layout con ``.
---
## Controles básicos
| Tecla | Acción |
|---|---|
| `→` `↓` `Espacio` | Siguiente diapositiva |
| `←` `↑` | Anterior diapositiva |
| `F` | Pantalla completa |
| `W` / `B` | Pantalla blanca / negra |
| `Esc` | Volver al editor |
| `Home` / `End` | Primera / última slide |
También puedes navegar con el **ratón**: clic para avanzar, y mover el cursor a la zona inferior para mostrar la barra de control con flechas, indicador de slide y campo de salto directo.
---
## Personaliza con CSS
Pulsa **Tema** y modifica cualquier variable. Un ejemplo de tema corporativo:
Los 10 temas incluidos cubren desde el minimalismo nórdico hasta la energía vibrante, y el CSS personalizado te da control total.
---
## Los 10 temas disponibles
<columns>
<col>
- **Default** — clásico y limpio
- **Tokyo** — minimalismo japonés
- **Paris** — elegancia serif
- **New York** — negro y audaz
- **Copenhagen** — nórdico funcional
</col>
<col>
- **Berlin** — industrial oscuro
- **Lisboa** — calidez mediterránea
- **Sydney** — corporativo azul
- **Milano** — moda monocromática
- **Mumbai** — vibrante y enérgico
</col>
</columns>
---

## Recapitulación
### 7 reglas de oro
---
## Tu checklist de diseño
1. **Una idea por diapositiva** — si necesitas más espacio, añade otra slide
2. **Test de 3 segundos** — si no se entiende al instante, simplifica
3. **Espacio en blanco** — déjalo respirar, no lo llenes
4. **Jerarquía clara** — tamaño, color y posición guían la mirada
5. **Contraste deliberado** — alterna ritmo, densidad y tono
6. **Imágenes con propósito** — amplifica, no decores
7. **Consistencia total** — un tema, una paleta, una voz visual
---

# Presenta con claridad
Pulsa **Tema**, elige un tema y comprueba cómo estas mismas ideas se transforman con un clic.

Markdown Slides (beta)

Tema y estilos

Compartir presentación

Reiniciar todo

Exportando PDF...