Seguramente muchos de vosotros habris visto ya alguna presentacin realizada con esta

librera de Javascript, Reveal.js es eso, una librera y dos hojas de estilo, muy simple de
utilizar, pero sobre todo muy rpido para la gente como yo que se siente ms cmoda 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 echis un vistazo a la demo oficial del creador en caso de que an no la
hayis visto. Es bastante espectacular, y sobre todo podis apreciar que se desarrolla de
forma bastante fluida, cosa de agradecer.
Cmo 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 artculo, que si no luego no aprendis nada.
Por supuesto, lo primero de todo es bajaros la librera 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
presentacin. Para empezar tenemos que asegurarnos de aadir las dos hojas de estilo (la
librera la aadiremos al final, con la inicializacin):

1
2

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

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

Despus, ya en el body vamos a crear el contenedor de toda la presentacin:

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

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

1
2
3
4

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

Y con esto ya tendramos creada nuestra primera diapositiva de la presentacin, pero lo bueno
empieza ahora, por ejemplo, podemos crear una diapositiva que se desplace verticalmente,
anidando dos <section>:

1
2
3
4
5
6
7
8
9
10

<section>
<section>
<h1>Tutorial</h1>
<h3>Podemos desplazarnos tambin de forma vertical</h3>
</section>
<section>
<h1>Tutorial</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 tambin nos lo facilita un poco, dando soporte a
la escritura abreviada a base de marcas (markdown), para ello tenemos que aadir el atributo
data-markdown a la etiqueta <section> y rodear todo con <script type=text/template> (ojo
con la indentacin, no mezclis espacios y tabulaciones):

1
2
3
4
5
6
7

<section data-markdown="">
<script type="text/template">
## Tutorial Reveal JS
Aprende a crear presentaciones de manera muy atractiva y visual con Reveal js
</script>
</section>

Por supuesto, podemos incluir cualquier cdigo html dentro de cada diapositiva, incluso aadir
fuentes externas de google, otras libreras javascript o eventos interactivos.
Y para finalizar, una vez hemos creado todas nuestras diapositivas y cerrado el div con clase
reveal, aadimos la librera y preparamos la configuracin del script:

1
2
3
4
5
6

<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

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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 parmetros de configuracin que ms nos van a interesar son:

controls: Nos muestra abajo a la derecha el cursos de flechas de direccin para navegar por
nuestras diapositivas

keyboard: Habilita el teclado para realizar la navegacin, usando las flechas de navegacin

loop: Permite volver al principio de la presentacin cuando se alcance el final de la misma

autoSlide: Se indica el nmero de milisegundos que debe haber entre cada diapositiva para poder
realizar el cambio de forma automtica

transition: El tipo de transicin 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 introduccin a Reveal.js, con el que podremos crear nuestras
propias presentaciones de forma un poco ms originales y para muchos de nosotros hasta
ms cmodas y controladas. Podis ver la demo que hemos hecho en este tutorial aqu,
podis descargaros este zip y usarlo como base para vuestras presentaciones sin ningn
problema.
Ah! Se me olvidabaexiste 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 librera, pero nos adelanta bastante trabajo si queremos.