Curso de Slidev: Presentaciones con Markdown y Vue para empresas

Sintaxis básica de Slidev (`---`, `---theme`)

Encabezados, listas, imágenes y enlaces

Separación de slides (`---`)

Metadatos de la presentación

Práctica: estructura mínima funcional

Comentarios para speaker

Layouts por defecto

Colores, iconos y emojis

Sugerencias de estilo y orden

Buenas prácticas de modularidad

Aplicación de temas predefinidos

Customización con Tailwind CSS

Práctica: aplicar y modificar un tema

Variables de color y fuentes

Override de layouts y estilos

Tipografías personalizadas

Transiciones y animaciones básicas

Responsividad automática

Temas oscuros y claros

Creación de temas propios

Bloques de código con resaltado (` ```js `, ` ```html `)

Integración con Shiki para resaltado semántico

Práctica: insertar fragmento de Vue, Python y Bash

Copiado automático desde código

Numeración y líneas destacadas

Código embebido desde archivos externos

Animaciones dentro del bloque de código

Demo live con Vue en una slide

Editor vs código embebido

Buenas prácticas en formateo

Fragmentos con `:::` y `<!-- .element: className -->`

Paso a paso en listas y texto

Transiciones entre slides

Animaciones CSS y Vue

Práctica: presentación de 5 pasos revelando contenido

`appear`, `fade-in`, `zoom-in`, `slide-left`

Uso de emojis animados

Coordinación entre fragmentos y código

Demos interactivas

Animaciones condicionales

Uso de `layout: image-left`, `center`, `statement`, etc.

Crear un layout personalizado

Práctica: layout con header y pie de página

Uso de `slot` y `#default`

Separación de contenidos y estructura

Custom `layouts/` folder

Inyección dinámica de contenidos

Layout para títulos de sección

Loop de slides con data externa

Layouts condicionales por entorno

Importación de componentes Vue

Directivas reactivas: `v-if`, `v-for`, `v-model`

Práctica: crear componente contador dentro de Slidev

Reutilización de componentes en varias slides

Estados reactivos con `ref` y `reactive`

Comunicación entre slides

Componente global con setup

Integración con librerías externas (Chart.js, ECharts)

Inyección de propiedades

Composición API en presentaciones

Acceder al speaker view (`/presenter`)

Añadir notas a cada slide

Controles de navegación

Práctica: uso de dual screen (proyector + notas)

Vista de tiempo restante

Integración con atajos de teclado

Acceso remoto desde móvil o tablet

Herramientas de anotación

Navegación programada

Posibilidades de grabación con notas

Exportar a PDF y a HTML estático

Opciones: con transiciones, sin código, solo contenido

Práctica: exportar PDF para formación

Despliegue en GitHub Pages

Exportar como SPA para Netlify/Vercel

Generar ZIP autoejecutable

Empaquetado offline

Exportar a vídeo con OBS

Integración con CI para actualizar automáticamente

Repositorio de recursos compartibles

Presentación de una REST API simulada

Diseño con tema técnico y bloques de código

Explicación paso a paso con fragmentos

Inserción de JSON de ejemplo

Slides interactivas con botones

Diagrama generado con Mermaid

Exportación final a HTML y PDF

Inserción de video de demostración

Revisión colaborativa por Git

Envío de versión web embebida

Uso de componentes como Chart.js y ECharts

Incrustar gráficos con Vue directamente

Uso de datos JSON o JS externos

Práctica: gráfico de líneas con datos dinámicos

Animación de gráficos por slide

Diagramas con Mermaid.js (` ```mermaid `)

Visualización de procesos y flujos

Diapositivas con datos en tiempo real (WebSocket/API)

Formato de presentación para dashboards

Integración con tablas dinámicas

Componentes interactivos con `v-model`

Práctica: formulario embebido que muestra resultados en vivo

Botones, toggles, sliders y selectores

Cambios reactivos en tiempo real

Simulación de preguntas/respuestas

Mostrar/ocultar bloques de contenido

Validación de entradas básicas

Envío de datos a consola o almacenamiento

Slides como prototipos funcionales

Casos de uso: encuestas, testing, demos

Incrustar vídeos locales y de YouTube

Práctica: slide con video + subtítulos personalizados

Integración de audio con controles

Visualización de iframes de forma segura

Slides con mapas, simuladores o IDEs en línea

Presentaciones con contenido externo sincronizado

Control de reproducción automática

Performance de multimedia en exportación

Posibilidades con Twitch, Loom, Vimeo

Mejores prácticas para compatibilidad

Introducción al ecosistema de plugins

Instalación de plugins con NPM

Práctica: uso de plugin para código interactivo

`slidev-plugin-zoom`, `slidev-theme-default-plus`, etc.

Plugins para animaciones personalizadas

Plugins para quizzes, polls y ejercicios

Desarrollo de un plugin propio

Compatibilidad y versiones

Gestión de dependencias en `package.json`

Recomendaciones de la comunidad

Usar Slidev con control desde móvil/tablet

Control remoto mediante WebSockets o OBS

Sincronización multiusuario con URLs específicas

Práctica: control remoto desde navegador móvil

Compartir enlace de solo lectura

Presentación en streaming con baja latencia

Embed en iframe o portales internos

Sincronización con OBS para grabaciones

Limitaciones de ancho de banda

Formatos de emisión y grabación

Estructura ideal de repositorio con Slidev

Gestión de ramas para versiones de contenido

Práctica: control de cambios entre versiones de presentación

Commit de cambios parciales por slide

Uso de `.slidev` y configuración por rama

Colaboración con pull requests y revisión de contenido

GitHub Pages para presentación en vivo

Documentar versiones con etiquetas

CI para validación automática

Casos de flujos en entornos educativos o técnicos

Uso de Slidev en pipelines de documentación

Práctica: despliegue automático en Netlify/Vercel

Integración en entornos GitOps

Slidev como output de documentación de proyecto

Automatizar exportaciones a PDF en CI

Embebido en documentación técnica interna

Compartición interna en empresas o universidades

Uso con monorepos y Turborepo

Tests de estructura y contenido

Notificación en cambios de presentación

Cargar contenido desde archivos `.md` externos

Sincronización con carpetas de documentación

Práctica: generar slide desde archivo de notas de Obsidian

Presentaciones basadas en notas personales

Plugins para sincronizar Markdown de Notion

Presentaciones para blogs técnicos

Conversión de artículos a presentaciones

Mantenimiento colaborativo de contenido

Slides para newsletters o contenido interno

Uso con editores Markdown enriquecidos

Creación de estructura base para empresa o equipo

Práctica: crear plantilla con tema, layout y logo

Slide de introducción y cierre estandarizadas

Separadores, branding y lineamientos de estilo

Reutilización de componentes personalizados

Estructuras de navegación fija o dinámica

Uso de shortcodes personalizados

Exportación de plantillas para terceros

Organización de librería interna

Sistema de bloques reusables por proyecto

Elección de temática técnica o corporativa

Diseño visual usando temas y personalización

Uso de código interactivo, datos y gráficos

Integración de fragmentos, animaciones y layouts

Inclusión de vídeo, audio y secciones interactivas

Configuración del speaker view

Exportación a PDF y HTML

Control remoto desde dispositivo móvil

Publicación en GitHub Pages o Netlify

Evaluación completa del trabajo por el formador