Cómo crear espectaculares presentaciones usando HTML y CSS

Muchas veces en cursos o conferencias que presenciamos nos hemos encontrado con una novedosa manera de ver el contenido o la información que nos es presentada. Esta forma es mediante el navegador web, que ofrece grandes ventajas respecto a los métodos tradicionales de creación de diapositivas como PowerPoint o Prezi.

Crear este tipo de presentaciones es relativamente fácil y genera un gran impacto en nuestra audiencia. No necesitamos grandes conocimientos técnicos ni nada por el estilo, simplemente necesitamos la decisión de hacer las cosas diferentes y de aprender algo nuevo. Así que manos a la obra: en este post aprenderemos a crear presentaciones usando HTML y CSS sobre un framework hecho en JavaScript que nos facilita el trabajo, reveal.js.

Dicho en pocas palabras, reveal.js nos permite construir presentaciones completas con HTML y verlas en cualquier navegador. El propio equipo de reveal.js mantiene una presentación de demostración (en inglés) que puedes ver en revealjs.com y cuyo código vive en el repositorio oficial en github.com/hakimel/reveal.js.

Instalando reveal.js

Lo primero que necesitamos es traer reveal.js a nuestro proyecto. En 2022 la recomendación era descargar el zip desde GitHub y copiar carpetas a mano, pero hoy es mucho más sencillo. Tenemos dos caminos.

La forma recomendada es instalarlo con npm. Crea una carpeta para tu proyecto y dentro ejecuta:

npm install reveal.js

Si prefieres no instalar nada y trabajar con un solo archivo HTML, también puedes usar el CDN de jsDelivr enlazando directamente los archivos desde cdn.jsdelivr.net/npm/reveal.js. Más abajo te muestro el código para esta opción, que es la más rápida para empezar.

Nota: En reveal.js 4.x y 5.x el archivo lib/ ya no existe. Los estilos y el core viven bajo dist/ (dist/reveal.css, dist/reset.css, dist/reveal.js), los temas bajo dist/theme/ y los plugins bajo plugin/. Si vienes de la versión 3.x, esta es la diferencia más importante a tener en cuenta.

Sugiero darle a tu proyecto la siguiente estructura, por cuestiones de manejabilidad y escalabilidad:

una carpeta dist/ y otra plugin/ (las trae reveal.js)
una carpeta images (o imagenes) donde guardaremos las imágenes que usemos en la presentación
un archivo .html con el nombre de nuestra presentación; en mi caso se llamará tutorial.html
opcionalmente, un archivo mi-estilo.css para nuestros estilos personalizados

Creando nuestra primera presentación

Bien, ahora que tenemos listo nuestro folder y nuestro archivo, vamos a crear nuestra presentación. Abriremos nuestro archivo tutorial.html (o cualquiera que sea el nombre que le hayas puesto) con un editor de texto y vamos a copiar las siguientes líneas:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <!-- Aquí puedes poner el título de la presentación -->
    <title>El tutorial de reveal</title>
    <meta
      name="description"
      content="Una descripción para que algunos buscadores indexen la presentación según lo que tú quieras"
    />
    <meta name="author" content="Sebastián Gómez" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Reset y estilos base de reveal.js -->
    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <!-- Tema de la presentación: cambia este archivo para cambiar de tema -->
    <link rel="stylesheet" href="dist/theme/black.css" id="theme" />
    <!-- Tema para el resaltado de código (lo provee el plugin highlight) -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
  </head>
  <body>
    <div class="reveal">
      <!-- Cada etiqueta section dentro de <div class="slides"> representa una diapositiva -->
      <div class="slides">
        <section>
          <h1>Hola</h1>
          <!-- Adentro puede ir cualquier código HTML que se mostrará como diapositiva -->
        </section>
      </div>
    </div>

    <!-- El siguiente código carga los archivos requeridos por reveal.js para funcionar correctamente y nos deja una serie de configuraciones con las que podemos jugar más adelante -->
    <script src="dist/reveal.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
      // Lista completa de opciones de configuración en:
      // https://revealjs.com/config/
      Reveal.initialize({
        controls: true,
        progress: true,
        hash: true,
        center: true,
        transition: 'slide', // none/fade/slide/convex/concave/zoom
        // En reveal.js 4.x y 5.x los plugins se registran aquí,
        // ya no se usa el antiguo array "dependencies".
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom],
      });
    </script>
  </body>
</html>

Nota sobre el resaltado de código: En la versión 3.x se solía llamar a hljs.initHighlightingOnLoad() manualmente. Eso ya no es necesario: el plugin RevealHighlight se encarga del resaltado automáticamente, y de hecho initHighlightingOnLoad está obsoleto en las versiones modernas de highlight.js (donde se reemplazó por hljs.highlightAll()).

Si usas el CDN en lugar de npm: Reemplaza las rutas locales por las del CDN, por ejemplo https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css para los estilos y https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js para el core.

Si abres el archivo tutorial.html en tu navegador deberías ver una primera diapositiva sencilla con el texto "Hola".

Añadiendo más diapositivas

Como podemos observar, el encabezado de nuestro archivo no va a cambiar mucho. Solamente cambiará el título de la presentación, que se encuentra dentro de las etiquetas title. El bloque de scripts del final tampoco va a cambiar demasiado, salvo que ya seamos expertos y queramos hacer alguna modificación personalizada. La parte importante se encuentra dentro de las etiquetas section: cada section representa una diapositiva y todo lo que pongamos adentro se mostrará en ella. Así que creemos unas cuantas diapositivas más usando las etiquetas básicas de HTML.

<div class="reveal">
  <div class="slides">
    <section>
      <h1>Hola, esta sería la diapositiva 1</h1>
      <!-- Adentro puede ir cualquier código HTML que se mostrará como diapositiva -->
      <h2>Usualmente en esta diapositiva colocamos el tema y la información</h2>
      <h3>Sebastián Gómez</h3>
    </section>
    <section>
      <h2>Podemos añadir imágenes de manera tan simple como:</h2>
      <img src="images/mi-imagen.jpg" alt="mi-imagen" />
    </section>
    <section>
      <h2>Esta sería la diapositiva 3</h2>
      <p>Esta diapositiva tendría un párrafo con letra normal</p>
      <p class="letra-roja">Este es un párrafo con letra roja</p>
    </section>
  </div>
</div>

Para usar tus propios estilos, recuerda enlazar tu hoja mi-estilo.css en el head, justo después del tema:

<!-- Aquí puedo tener mis propios estilos CSS -->
<link rel="stylesheet" href="mi-estilo.css" />

Fondos y transiciones

También se puede cambiar el background de toda la presentación o de cada diapositiva, y jugar un poco con los efectos y las transiciones, tal y como lo podemos observar a continuación. Usamos el atributo data-background para el color de fondo y data-background-transition para la transición.

<div class="reveal">
  <div class="slides">
    <section data-background="#4d7e65">
      <h1>Hola, esta sería la diapositiva 1 con otro fondo</h1>
      <h2>Usualmente en esta diapositiva colocamos el tema y la información</h2>
      <h3>Sebastián Gómez</h3>
      <p>Adicionalmente la siguiente diapositiva hará una transición tipo zoom</p>
    </section>

    <section data-background="#000" data-background-transition="zoom">
      <h2>Podemos añadir imágenes de manera tan simple como:</h2>
      <img src="images/mi-imagen.jpg" alt="mi-imagen" />
    </section>
    <section>
      <h2>Esta sería la diapositiva 3</h2>
      <p>Esta diapositiva tendría un párrafo con letra normal</p>
      <p class="letra-roja">Este es un párrafo con letra roja</p>
    </section>
  </div>
</div>

Diapositivas anidadas (subsecciones)

Es posible también anidar section o diapositivas, lo que nos permite crear subsecciones de la presentación bajando o subiendo de nivel. Cuando una section contiene otras section adentro, esas diapositivas internas se convierten en una pila vertical.

<div class="reveal">
  <div class="slides">
    <section data-background="#4d7e65">
      <h1>Hola, esta sería la diapositiva 1 con otro fondo</h1>
      <h2>Usualmente en esta diapositiva colocamos el tema y la información</h2>
      <h3>Sebastián Gómez</h3>
      <p>Adicionalmente la siguiente diapositiva hará una transición tipo zoom</p>
    </section>

    <section data-background="#000" data-background-transition="zoom">
      <h2>Podemos añadir imágenes de manera tan simple como:</h2>
      <img src="images/mi-imagen.jpg" alt="mi-imagen" />
    </section>

    <section>
      <section>
        <h2>Esta sería la diapositiva 3</h2>
        <p>Esta diapositiva tendría un párrafo con letra normal</p>
        <p class="letra-roja">Este es un párrafo con letra roja</p>
      </section>
      <section>
        <h2>
          Esta sería la diapositiva 3.1, ya que es una subsección anidada dentro
          de la diapositiva 3
        </h2>
        <p>Esta diapositiva tendría un párrafo con letra normal</p>
        <p class="letra-roja">Este es un párrafo con letra roja</p>
      </section>
      <section>
        <h2>Esta sería la diapositiva 3.2</h2>
        <p>Esta diapositiva tendría un párrafo con letra normal</p>
        <p class="letra-roja">Este es un párrafo con letra roja</p>
      </section>
    </section>

    <section>
      <h2>Temas disponibles</h2>
      <p>
        Y esta sería finalmente la diapositiva 4. Aquí dejamos los enlaces a los
        distintos temas que vienen por defecto para nuestras presentaciones. Para
        cambiar de tema basta con apuntar el enlace del tema a otro archivo bajo
        <code>dist/theme/</code>, por ejemplo <code>dist/theme/white.css</code>,
        <code>dist/theme/league.css</code>, <code>dist/theme/sky.css</code>,
        <code>dist/theme/beige.css</code>, <code>dist/theme/serif.css</code>,
        <code>dist/theme/blood.css</code>, <code>dist/theme/night.css</code>,
        <code>dist/theme/moon.css</code> o <code>dist/theme/solarized.css</code>.
      </p>
    </section>
  </div>
</div>

Personalizando estilos

Es posible también personalizar un poco los estilos de nuestra presentación creando o modificando el archivo mi-estilo.css (como he mostrado con la clase letra-roja). Las imágenes que usemos las podemos guardar en nuestra carpeta images y mostrarlas en la presentación sin ningún problema, simplemente las enlazamos en el src de la etiqueta img. Así podremos crear y tener control total de nuestras presentaciones.

Ejercicios propuestos

Instala reveal.js con npm install reveal.js y crea tu archivo tutorial.html con la diapositiva inicial "Hola". Confirma que se ve correctamente en el navegador.
Crea una presentación de al menos cinco diapositivas sobre un tema que te guste, usando títulos, párrafos y una imagen propia guardada en la carpeta images.
Añade una subsección anidada (diapositivas verticales) y prueba al menos dos fondos distintos con data-background y la transición zoom.
Crea un archivo mi-estilo.css, define tu propia clase (por ejemplo letra-azul) y aplícala a un párrafo. Luego prueba a cambiar el tema enlazando otro archivo de dist/theme/.

Resumen en 3 puntos

reveal.js nos permite crear presentaciones completas con HTML y CSS que corren en cualquier navegador; instálalo con npm install reveal.js o úsalo desde el CDN de jsDelivr.
En las versiones 4.x y 5.x los archivos viven bajo dist/ y los plugins se registran con plugins: [...] dentro de Reveal.initialize, ya no con el antiguo array dependencies.
Cada section es una diapositiva; puedes anidarlas para crear subsecciones, cambiar fondos con data-background y personalizar todo con tu propio archivo CSS.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente. Ahora los invito a crear espectaculares presentaciones con esta simple pero poderosa manera de generar contenido.

Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo. ¡Buena suerte!

Cómo crear espectaculares presentaciones usando HTML y CSS

Instalando reveal.js

Creando nuestra primera presentación

Añadiendo más diapositivas

Fondos y transiciones

Diapositivas anidadas (subsecciones)

Personalizando estilos

Ejercicios propuestos

Resumen en 3 puntos

Sebastian Gomez

Leave a Reply

Advertisements

Related Posts

Categorias