Sebastian Gomez
AboutConferencias
Feb 26, 2022

Como 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 esto crea 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 como crear presentaciones usando HTML, CSS bajo un framework hecho en Javascript para facilitar nuestro trabajo en la creación de presentaciones: .

Palabras mas palabras menos reveal.js se resume en la siguiente presentación hecha por el team mismo de Reveal.js solamente que se encuentra en inglés: Bien, lo primero que necesitamos hacer entonces es descargar reveal.js, esto es bastante sencillo puesto que solo debes ir al siguiente enlace (es una pagina de github)  y descargar como zip (veras esta opción en la parte derecha). Una vez descargado este archivo lo vamos a descomprimir y vamos a crear una nueva carpeta donde crearemos nuestras presentaciones. Esta carpeta sugiero que quede con la siguiente estructura (por cuestiones de manejabilidad y escalabilidad):

Bien, ahora que tenemos listo nuestro folder y nuestro archivo vamos a crear nuestra presentación. Abriremos entonces nuestro archivo tutorial.html (O cualquiera que sea el nombre que le hayas puesto a tu archivo) con un editor de texto (en mi caso uso  pero notepad++ o incluso bloc de notas funciona bien) y vamos a copiar las siguientes líneas:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charSet="utf-8" />
    <!--Aca tu puedes poner el titulo de la presentación-->
    <title>El tutorial de reveal</title>
    <meta
      name="description"
      content="Una descripción para que algunos buscadores indexen o cambien la descripción de la presentación según lo que tu quieras"
    />
    <meta name="author" content="Sebastian Gomez" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
    />
    <link rel="stylesheet" href="css/reveal.css" />
    <link rel="stylesheet" href="css/theme/black.css" id="theme" />
    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css" />
    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )\[0\].appendChild( link );
    </script>
    <!--\[if lt IE 9\]>
    <script src="lib/js/html5shiv.js"></script>
    <!\[endif\]-->
  </head>
  <body>
    <div class="reveal">
      <!-- Ninguno de los elementos anteriores es necesario que lo modifiques si no es necesario -->
      <!-- Cada etiqueta section que se encuentre adentro del <div class="slides"> representará a una diapositiva  de la presentación -->
      <div class="slides">
        <section>
          <h1>Hola</h1>
          <!--Adentro puede ir cualquier codigo html que será mostrado como diapositiva-->
        </section>
      </div>
    </div>
    <!--El siguiente codigo son los archivos requeridos por reveal.js para funcioanr correctamente, ademas provee una serie de configuraciones con las cuales se puede jugar un poco más adelante-->
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>
    <script>
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: true,
      transition: 'slide', // none/fade/slide/convex/concave/zoom
      // Optional reveal.js plugins
      dependencies: \[
      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '\[data-markdown\]' ); } },
      { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '\[data-markdown\]' ); } },
      { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
      { src: 'plugin/zoom-js/zoom.js', async: true },
      { src: 'plugin/notes/notes.js', async: true }
      \]
      });
    </script>
  </body>
</html>

Si abres el archivo tutorial.html en tu navegador deberias ver algo similar a esto: Como podemos observar el encabezado de nuestro archivo no va a cambiar mucho. Solamente cambiara el titulo de presentación que se encuentra adentro de las etiquetas title, el footer del archivo (desde la linea ### hasta el final) tampoco va a cambiar demasiado salvo que seamos ya expertos y queramos hacer alguna modificación custom. La parte importante se encuentra dentro de las etiquetas section, cada etiqueta section representa una diapositiva y todo lo que pongamos adentro va a mostrarse en una diapositiva, así que creemos unas cuantas diapositivas mas usando las etiquetas básicas de html.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charSet="utf-8" />
    <!--Aca tu puedes poner el titulo de la presentación-->
    <title>El tutorial de reveal</title>
    <meta
      name="description"
      content="Una descripción para que algunos buscadores indexen o cambien la descripción de la presentación según lo que tu quieras"
    />
    <meta name="author" content="Sebastian Gomez" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
    />
    <link rel="stylesheet" href="css/reveal.css" />
    <link rel="stylesheet" href="css/theme/black.css" id="theme" />
    <!--Si queremos cambiar el tema simplemente debemos de cambiar aca el archivo .css usado-->
    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css" />
    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )\[0\].appendChild( link );
    </script>
    <!--\[if lt IE 9\]>
    <script src="lib/js/html5shiv.js"></script>
    <!\[endif\]-->
    <link rel="stylesheet" href="css/mi-estilo.css" />
    <!--aca puedo tener mis propios estilos css-->
  </head>
  <body>
    <div class="reveal">
      <!-- Ninguno de los elementos anteriores es necesario que lo modifiques si no es necesario -->
      <!-- Cada etiqueta section que se encuentre adentro del <div class="slides"> representará a una diapositiva  de la presentación -->
      <div class="slides">
        <section>
          <h1>Hola, esta sería la diapositiva 1</h1>
          <!--Adentro puede ir cualquier codigo html que será mostrado como diapositiva-->
          <h2>
            Usualmente en esta diapositiva colocamos el tema y la información
          </h2>
          <h3>Sebastián Gomez</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>
    <!--El siguiente codigo son los archivos requeridos por reveal.js para funcioanr correctamente, ademas provee una serie de configuraciones con las cuales se puede jugar un poco más adelante-->
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>
    <script>
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: true,
      transition: 'slide', // none/fade/slide/convex/concave/zoom
      // Optional reveal.js plugins
      dependencies: \[
      { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '\[data-markdown\]' ); } },
      { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '\[data-markdown\]' ); } },
      { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
      { src: 'plugin/zoom-js/zoom.js', async: true },
      { src: 'plugin/notes/notes.js', async: true }
      \]
      });
    </script>
  </body>
</html>

Y se vería de esta manera: 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 transmisiones tal y como lo podemos observar a continuación.

<div class="reveal">
  <!-- Ninguno de los elementos anteriores es necesario que lo modifiques si no es necesario -->
  <!-- Cada etiqueta section que se encuentre adentro del <div class="slides"> representará a una diapositiva  de la presentación -->
  <div class="slides">
    <section data-background="#4d7e65">
      <h1>Hola, esta sería la diapositiva 1 con otro fondo</h1>
      <!--Adentro puede ir cualquier codigo html que será mostrado como diapositiva-->
      <h2>Usualmente en esta diapositiva colocamos el tema y la información</h2>
      <h3>Sebastián Gomez</h3>
      <p>
        Adicionalmente la siguiente diapositiva hará una transición tipo zoom
      </p>
      <p></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>

Y se vería de ésta manera: Es posible también anidar sections o diapositivas que permitirá crear subsecciones de la presentación bajando o subiendo de nivel

<div class="reveal">
  <!-- Ninguno de los elementos anteriores es necesario que lo modifiques si no es necesario -->
  <!-- Cada etiqueta section que se encuentre adentro del <div class="slides"> representará a una diapositiva  de la presentación -->
  <div class="slides">
    <section data-background="#4d7e65">
      <h1>Hola, esta sería la diapositiva 1 con otro fondo</h1>
      <!--Adentro puede ir cualquier codigo html que será mostrado como diapositiva-->
      <h2>Usualmente en esta diapositiva colocamos el tema y la información</h2>
      <h3>Sebastián Gomez</h3>
      <p>
        Adicionalmente la siguiente diapositiva hará una transición tipo zoom
      </p>
      <p></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 que inicia con
          la diapositiva 2, por esto está anidada
        </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>123 3245</h2>
      <p>
        Y esta sería finalmente la diapositiva 4, aquí quedan los enlaces a los
        distintos temas que se pueden usar para nuestras presentacones y que
        vienen por defecto:<br />


        <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;"
          >Black (default)</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;"
          >White</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;"
          >League</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;"
          >Sky</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;"
          >Beige</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;"
          >Simple</a
        >
        <br />
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;"
          >Serif</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;"
          >Blood</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;"
          >Night</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;"
          >Moon</a
        >
        -
        <a
          href="#"
          onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;"
          >Solarized</a
        >
      </p>
    </section>
  </div>
</div>

Es posible también customizar un poco los estilos de nuestra presentación creando modificando el archivo mi-estilo.css de nuestra carpeta css (como he mostrado co la clase letra-roja. Las imágenes que usemos las podemos guardar en nuestra carpeta images y las podemos mostrar en nuestra presentación sin ningún problema simplemente las linkeamos en el src de la etiqueta img, y así podremos crear y tener control de nuestras presentaciones. Eso es todo ahora los invito a crear espectaculares presentaciones con esta simple pero poderosa manera de crear contenido y presentaciones.

Sebastian Gomez

Sebastian Gomez

Sebastian Gomez ayuda a desarrolladores a alcanzar su máximo potencial

Leave a Reply

Related Posts

Categories