Reveal.js: Cómo hacer nuestras presentaciones en HTML5

revealjs

Seguramente muchos de vosotros habréis visto ya alguna presentación realizada con esta librería de Javascript, Reveal.js es eso, una librería y dos hojas de estilo, muy simple de utilizar, pero sobre todo muy rápido para la gente como yo que se siente más cómoda delante de un editor de texto html que delante del PowerPoint (aunque he de reconocer que usando Keynote se me pasan las tardes de forma muy amena).

Lo primero es que echéis un vistazo a la demo oficial del creador en caso de que aún no la hayáis visto. Es bastante espectacular, y sobre todo podéis apreciar que se desarrolla de forma bastante fluida, cosa de agradecer.

¿Cómo podemos hacer nosotros la nuestra? Bueno, pues tenemos dos maneras, la primera es la que os voy a explicar en este tutorial, la segunda es la mejor pero me la guardo hasta el final de este artículo, que si no luego no aprendéis nada.

Por supuesto, lo primero de todo es bajaros la librería del repositorio de github (efectivamente, está en github como todo lo bueno en este mundo). Una vez descomprimida, o hecho el git clone, vamos a crear el archivo html que nos servirá como inicio y contenedor de nuestra presentación. Para empezar tenemos que asegurarnos de añadir las dos hojas de estilo (la librería la añadiremos al final, con la inicialización):

<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">

Después, ya en el body vamos a crear el contenedor de toda la presentación:

<div class="reveal"></div>

Y ya dentro del div con clase slides, vamos a añadir todas nuestras diapositivas con la etiqueta <section>:

<section>
    <h1>Tutorial Hardcoconut.com</h1>
    <h3>Presentaciones con Reveal.js</h3>
</section>

Y con esto ya tendríamos creada nuestra primera diapositiva de la presentación, pero lo bueno empieza ahora, por ejemplo, podemos crear una diapositiva que se desplace verticalmente, anidando dos <section>:

<section>
    <section>
        <h1>Tutorial Hardcoconut.com</h1>
        <h3>Podemos desplazarnos también de forma vertical</h3>
    </section>
    <section>
        <h1>Tutorial Hardcoconut.com</h1>
        <h3>Y movernos desde aquí a la siguiente.</h3>
    </section>
</section>

Esto está quedando muy bien, pero si tenemos doscientas diapositivas que crear, lo mismo acabamos hartos de tanta etiqueta, Reveal.js también nos lo facilita un poco, dando soporte a la escritura abreviada a base de marcas (markdown), para ello tenemos que añadir el atributo “data-markdown” a la etiqueta <section> y rodear todo con <script type=”text/template”> (ojo con la indentación, no mezcléis espacios y tabulaciones):

<section data-markdown="">
    <script type="text/template">
        ## Tutorial HardCoconut.com

        Apúntate a nuestros cursos online de HTML5 [link](http://www.hardcoconut.com/curso-online-de-html5-javascript-y-css3/).
    </script>
</section>

Por supuesto, podemos incluir cualquier código html dentro de cada diapositiva, incluso añadir fuentes externas de google, otras librerías javascript o eventos interactivos.

Y para finalizar, una vez hemos creado todas nuestras diapositivas y cerrado el div con clase “reveal”, añadimos la librería y preparamos la configuración del script:

<script type="text/javascript" src="lib/js/head.min.js"></script>
<script type="text/javascript" src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				keyboard: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/zoom-js/zoom.js', condition: function() { return !!document.body.classList; } },
					{ src: '/socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
					{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } }
				]
			});

		</script>

Los parámetros de configuración que más nos van a interesar son:

  • controls: Nos muestra abajo a la derecha el cursos de flechas de dirección para navegar por nuestras diapositivas
  • keyboard: Habilita el teclado para realizar la navegación, usando las flechas de navegación
  • loop: Permite volver al principio de la presentación cuando se alcance el final de la misma
  • autoSlide: Se indica el número de milisegundos que debe haber entre cada diapositiva para poder realizar el cambio de forma automática
  • transition: El tipo de transición que se va a utilizar para pasar las diapositivas. Los posibles valores son: default/cube/page/concave/zoom/linear/none

Y así finalizamos este tutorial de introducción a Reveal.js, con el que podremos crear nuestras propias presentaciones de forma un poco más originales  y para muchos de nosotros hasta más cómodas y controladas. Podéis ver la demo que hemos hecho en este tutorial aquí, podéis descargaros este zip y usarlo como base para vuestras presentaciones sin ningún problema.

Ah! Se me olvidaba…existe ya un editor online bastante chulo para crear las diapositivas de forma visual y no tener que andar metiendo tanto html :-) Lo teneis aquí, en realidad es un wysiwyg sobre un html con la librería, pero nos adelanta bastante trabajo si queremos.

Si queréis seguir profundizando en el desarrollo HTML5, puedes hacerlo apuntándote a nuestro curso de HTML5, CSS3 y Javascript.

5 Comentarios

  1. Esto es compatible con Internet Explorer 8? porque a mi no me sale bien, no se si hay que cambiar algo en el codigo…

  2. Hola Admin, no consigo ver el código que carga las funciones de HTML5 para que funcione en IE8, me lo puedes facilitar?

    muchas gracias

Escribe un comentario