html-slideshow

¿Qué hace html-slideshow?

Una presentación responsiva empaquetada en un único archivo .html autocontenido y minificado. El autor escribe las diapositivas en HTML; el motor (assets/base.css + base.js) junto con una compilación de Bun produce el archivo final. Requiere Bun.

Flujo de trabajo

1. Verificar el entorno de ejecución — bun --version (instalar desde bun.sh si falta; verificado con 1.4.0).
2. Copiar la plantilla — copiar assets/base.html, assets/base.css y assets/base.js a una carpeta de presentación en el espacio de trabajo del usuario (juntos). El .html se puede renombrar libremente (ej. mi-presentacion.html); base.css y base.js se referencian mediante ruta relativa desde el .html, por lo que renombrarlos requiere actualizar esas referencias.
3. Establecer título — en el .html, editar <title>. La presentación se muestra en modo oscuro por defecto; la impresión cambia automáticamente a una paleta clara forzada.
4. Agregar diapositivas — en <main id="deck">, un <section class="slide"> por diapositiva:

   <section class="slide">
     <h2>Resultados trimestrales</h2>
     <ul><li>Ingresos aumentaron un 24%</li></ul>
   </section>
   

5. CSS/JS personalizados — solo archivos enlazados, nunca en línea. No agregue bloques <style> o <script> al .html — este contiene solo el esqueleto de la página y el contenido de las diapositivas; la compilación incorpora los archivos enlazados en el archivo final autocontenido, lo que mantiene la fuente editable y el motor con una única fuente de verdad. Dos lugares autorizados para código personalizado: editar base.css / base.js directamente, o — para estilos/comportamientos específicos de la presentación aislados del motor — agregar <link rel="stylesheet" href="extra.css"> / <script src="extra.js" defer></script> (la compilación los incorpora; mantenga base.* sin modificar cuando sea posible — consulte references/bundling-assets.md). (Las recetas en references/slide-patterns.md siguen esto.)
6. Dimensionar con unidades de contenedor — nunca px. Cada diapositiva es un contenedor de consulta CSS, por lo tanto use cqw/cqh/cqmin y clamp() y el contenido se escala a cualquier pantalla. px/pt rompen la adaptabilidad — no los use (el marco exterior usa svh). Esta es la única regla que los agentes suelen incumplir; guía completa en references/responsive-units.md. Las vistas verticales se manejan automáticamente: las diapositivas se renderizan en su lienzo apaisado y se escalan para ajustarse, por lo que las tablas/grids anchos nunca desbordan una pantalla de teléfono (--slide-w/--slide-h en :root, por defecto 16/9).
7. Compilar — ejecutar el script de compilación de la habilidad: bun scripts/build.js mi-presentacion.html (envuelve bun build --compile --target=browser --minify mi-presentacion.html --outdir dist; funciona en cualquier sistema operativo que soporte Bun) → dist/mi-presentacion.html: un único archivo minificado, autocontenido, con el CSS, JS y cualquier activo referenciado incorporado. Este es el archivo que se distribuye.
8. Verificar el archivo compilado en una herramienta de navegador (una URL file:// a dist/mi-presentacion.html. Pasos: los controles se renderizan; Flecha derecha avanza el contador a "2 / N" y establece location.hash en #2; una ventana de aproximadamente 400×800 aún muestra una diapositiva completamente visible con letterbox; O alterna la vista general; la emulación de medio de impresión produce una diapositiva por página. Las señales están documentadas en references/using-the-deck.md. Si no hay ninguna herramienta de navegador disponible, indique que la verificación visual se omitió.
9. Limpiar — no se crea nada más allá del resultado de la compilación; mantenga mi-presentacion.html, base.css y base.js (la fuente editable) junto a dist/mi-presentacion.html (el archivo que se distribuye). Si el usuario desea solo el único archivo, mueva dist/mi-presentacion.html a donde sea que espere la presentación y mantenga la carpeta de la presentación como su fuente.

Índice de referencias

Cargar bajo demanda — no todo de una vez:

• references/using-the-deck.md — configuración, el contrato de las diapositivas, navegación completa, enlaces profundos (#5 abre la diapositiva 5; #some-id abre la diapositiva que contiene ese id; usar para citas → fuentes), la compilación e impresión.
• references/slide-patterns.md — recetas de diapositivas listas + guía de autoría.
• references/responsive-units.md — la guía de dimensionamiento fluido sin px.
• references/bundling-assets.md — activos SVG en línea / data-URI (la compilación también incorpora referencias relativas).
• references/engine-anatomy.md — mapa del motor (base.html / base.css / base.js) para modificarlo.
• examples/quickstart.html — una presentación completa (fuente; compílela para obtener un archivo autocontenido).
• examples/README.md — las dos formas de la presentación de ejemplo (fuente legible vs compilada independiente) y cómo recompilar la independiente después de ediciones.

Cuándo usar

Cuando la salida debe mostrarse una pantalla completa a la vez: una charla, lección, demostración, informe de estado o propuesta. No para texto con desplazamiento o documentos.