Reveal.JS es un framework que permite crear presentaciones interactivas utilizando estándares Web
Se puede utilizar libremente código HTML, CSS y JavaScript
Las presentaciones se adaptan al dispositivo en el que se visualicen
La Web oficial es Reveal.JS
Tiene licencia MIT
Su creador es Hakim El Hattab
Existe un editor gráfico que encapsula las tareas más habituales realizadas con Reveal.JS: http://slides.com
Admite HTML5 y Markdown
Diapositivas en sentido vertical (no sólo el clásico horizontal)
Notas para el presentador
Exportación a PDF
Integración con cualquier API mediante el uso de JavaScript
Se puede realizar una presentación con muy poco código
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<!--Hoja de estilos básica para todas las presentaciones realizadas con Reveal.JS--> | |
<link rel="stylesheet" href="css/reveal.css"> | |
<!--Se puede cambiar while.css por otros estilos disponibles--> | |
<link rel="stylesheet" href="css/theme/white.css"> | |
</head> | |
<body> | |
<div class="reveal"> <!--Las diapositivas irán dentro de la clase "reveal" --> | |
<div class="slides"> <!-- Y dentro de "slides" --> | |
<section>Slide 1</section> <!--Cada diapositiva va dentro de una sección--> | |
<section>Slide 2</section> | |
</div> | |
</div> | |
<script src="js/reveal.js"></script> <!--Librería para el uso de Reveal.JS--> | |
<script> | |
Reveal.initialize(); <!--Inicialización del framework--> | |
</script> | |
</body> | |
</html> |
Existen dos formas de instalar y utilizar Reveal.JS
Básicamente consiste en:
index.html
y hacer las modificaciones que se consideren oportunasindex.html
en cualquier navegador Web>> npm install
>> grunt serve
index.html
y hacer las modificaciones que se consideren oportunasindex.html
accediendo a al puerto 8000 de localhost en cualquier navegador WebA Reveal.initialize()
se le pueden pasar diferentes parámetros
Todos ellos tienen un valor por defecto para usos comunes si no se definen
Pueden cambiarse de forma individual en tiempo de ejecución con Reveal.configure()
Veremos algunos ejemplos a continuación
Reveal.initialize({ | |
controls: true, //Display controls in the bottom right corner | |
progress: true, //Display a presentation progress bar | |
slideNumber: true, //Display the page number of the current slide | |
history: true, //Push each slide change to the browser history | |
keyboard: true, //Enable keyboard shortcuts for navigation | |
overview: true, //Enable the slide overview mode | |
center: true, //Vertical centering of slides | |
touch: true, //Enables touch navigation on devices with touch input | |
loop: false, //Loop the presentation | |
rtl: false, //Change the presentation direction to be RTL | |
fragments: true, //Turns fragments on and off globally | |
embedded: false, //Flags if the presentation is running in an embedded mode, i.e. contained within a limited portion of the screen | |
help: true, //Flags if we should show a help overlay when the questionmark key is pressed | |
showNotes: false, //Flags if speaker notes should be visible to all viewers | |
autoSlide: 0, //Number of milliseconds between automatically proceeding to the next slide, disabled when set to 0, this value can be overwritten by using a data-autoslide attribute on your slides | |
autoSlideStoppable: true, //Stop auto-sliding after user input | |
mouseWheel: true, //Enable slide navigation via mouse wheel | |
hideAddressBar: true, //Hides the address bar on mobile devices | |
previewLinks: false, //Opens links in an iframe preview overlay | |
transition: 'concave', //none/fade/slide/convex/concave/zoom | |
transitionSpeed: 'slow', //default/slow/fast | |
backgroundTransition: 'default', //none/fade/slide/convex/concave/zoom //Transition style for full page slide backgrounds | |
}); |
Reveal.initialize()
también se utiliza para indicar dependencias
Por defecto, Reveal.JS no necesita ninguna dependencia
Hay varias que se utilizan habitualmente para potenciar la funcionalidad básica (se mostrarán a continuación)
Reveal.initialize({ | |
//Parameters values... | |
//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, callback: function() { hljs.initHighlightingOnLoad(); } }, | |
{ src: 'plugin/zoom-js/zoom.js', async: true }, | |
{ src: 'plugin/notes/notes.js', async: true } | |
] | |
}); |
Puedes pulsar las flechas IZQUIERDA y DERECHA para desplazarte por las diapositivas en sentido horizontal
Pulsa ESC para mostrar una vista general de todas las diapositivas a las que puedes acceder
...Vuelve a pulsar ESC para seguir con tu presentación
Pulsa ALT al mismo tiempo que sobre cualquier elemento para ampliar su tamaño (gracias a la librería zoom.js)
...Vuelve a pulsar ALT sobre cualquier otro elemento para volver al tamaño normal
Pulsa F para mostrar la presentación a pantalla completa
...Pulsar ESC para salir del modo de pantalla completa
Pulsa INICIO (HOME) para ir a la primera diapositiva
Pulsa FIN (END) para ir a la primera diapositiva
Pulsa B o . durante la presentación para pausarla
...Vuelve a pulsar B o . para seguir con tu presentación
Por ejemplo, enlaces entre diapositivas como este
<section> | |
<h2>Cualquier código HTML/JavaScript/CSS es posible</h2> | |
<p>Por ejemplo, enlaces entre diapositivas como <a href="#/1">este</a></p> | |
</section> |
Por defecto, cada diapositiva se identifica a través de la URL con número correspondiente a su posición
Sin embargo, esta diapositiva tiene como identificador custom_id
<section id="custom_id"> | |
<h2>Identificación del nombre de la diapositiva</h2> | |
<p>Por defecto, cada diapositiva se identifica a través de la URL con número correspondiente a su posición</p> | |
<p>Sin embargo, esta diapositiva tiene como identificador <code>custom_id</code></p> | |
</section> |
<section> | |
<h2>Listas desordenadas</h2> | |
<ul> | |
<li>Gijón</li> | |
<li>Oviedo</li> | |
<li>Madrid</li> | |
<li>Avilés</li> | |
</ul> | |
</section> |
<section> | |
<h2>Listas ordenadas</h2> | |
<ol> | |
<li>Harina</li> | |
<li>Canela</li> | |
<li>Levadura</li> | |
<li>Huevos</li> | |
</ol> | |
</section> |
El objetivo de la WWF es:
Build a future where people live in harmony with nature
- Ojalá tengan éxito
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries.
<section> | |
<h2>Citas</h2> | |
<p>El objetivo de la WWF es: | |
<q cite="http://www.wwf.org">Build a future where people live in harmony with nature</q> | |
- Ojalá tengan éxito</p> | |
<blockquote cite="http://www.worldwildlife.org/who/index.html"> | |
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, | |
WWF works in 100 countries. | |
</blockquote> | |
</section> |
Ciudad | Año de fundación | Población |
---|---|---|
Gijón | Siglo V a. C. | 274290 |
Oviedo | 761 | 221870 |
<section> | |
<h2>Tablas con información</h2> | |
<table> | |
<thead><tr> | |
<th>Ciudad</th> | |
<th>Año de fundación</th> | |
<th>Población</th> | |
</tr></thead> | |
<tbody><tr> | |
<td>Gijón</td> | |
<td>Siglo V a. C.</td> | |
<td>274290</td> | |
</tr> | |
<tr> | |
<td>Oviedo</td> | |
<td>761</td> | |
<td>221870</td> | |
</tr></tbody> | |
</table> | |
</section> |
<section> | |
<h2>Y por qué no un video?</h2> | |
<video width="320" height="240" controls> | |
<source src="videos/mov_bbb.mp4" type="video/mp4"> | |
<source src="videos/mov_bbb.ogg" type="video/ogg"> | |
</video> | |
</section> |
public void sort(int[] elements) {
for (int i = 1; i < elements.length; i++) {
for (int j = elements.length - 1; j >= i; j--) {
if (elements[j-1] > elements[j])
Util.interchange(elements, j-1, j);
}
}
}
(Gracias a la librería highlight.js)
<section> | |
<h2>Inserción de código fuente</h2> | |
<pre><code class="hljs" data-trim contenteditable> | |
public void sort(int[] elements) { | |
for (int i = 1; i < elements.length; i++) { | |
for (int j = elements.length - 1; j >= i; j--) { | |
if (elements[j-1] > elements[j]) | |
Util.interchange(elements, j-1, j); | |
} | |
} | |
} | |
</code></pre> | |
<p>(Gracias a la librería <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>)</p> | |
</section> |
Pulsa S para abrir la ventana vista de Presentación
<section> | |
<h2>Vista de Presentación</h2> | |
<p>Pulsa <strong>S</strong> para acceder a la vista de Presentación</p> | |
<aside class="notes"> | |
Se pueden escribir notas ocultas para todo el mundo excepto para el presentador, | |
al estilo de Power Point cuando trabajamos con dos monitores | |
</aside> | |
</section> |
Además de la secuenciación izquierda-derecha, también podemos trabajar en el sentido vertical arriba-abajo
Pulsa las flechas ARRIBA y ABAJO para desplazarte por las diapositivas en sentido vertical
También puedes pulsar N o ESPACIO para avanzar a la siguiente diapositiva, ya sea vertical u horizontal
Este tipo de ordenación es útil para mostrar detalles adicionales de alguna idea o concepto
Tiempo de volver atrás...
Para volver a la diapositiva anterior también puedes pulsar P, ya sea en sentido vertical u horizontal
<section> | |
<section> | |
<h2>Diapositivas anidadas</h2> | |
<p>Además de la típica secuenciación izquierda-derecha, también podemos trabajar en el sentido vertical arriba-abajo</p> | |
<p>Pulsa <strong>Espacio</strong> para moverte por todas las diapositivas anidadas</p> | |
<p>También puedes pulsar las flechas <strong>ARRIBA</strong> y <strong>ABAJO</strong> para desplazarte por ellas</p> | |
<a href="#" class="navigate-down"> | |
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> | |
</a> | |
</section> | |
<section> | |
<h2>Contenido interno</h2> | |
<p>Este tipo de ordenación es útil para mostrar detalles adicionales de alguna idea o concepto</p> | |
</section> | |
<section> | |
<h2>Diapositivas anidadas</h2> | |
<p>Tiempo de volver atrás...</p> | |
<br> | |
<a href="#/10"> | |
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" | |
alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"> | |
</a> | |
</section> | |
</section> |
Existen estilos que ya vienen incluidos en Reveal.JS:
Cada estilo se corresponda con una hoja de estilos independiente
La forma de cambiar el estilo es modificándolo por su nombre en la hoja de estilos de la página
Por ejemplo, para utilizar el estilo Sky habría que configurar la página de la siguiente forma:
<link rel="stylesheet" href="css/theme/sky.css" id="theme">
Existen diferentes tipos de transiciones en Reveal.JS:
Se puede cambiar mediante código:
Reveal.configure({ transition: 'concave' })
La velocidad de cambio entre transiciones también se puede controlar
Se puede cambiar mediante código:
Reveal.configure({ transitionSpeed: 'slow' })
Se pueden mostrar avances parciales en la diapositiva a través de fragmentos
Avanza...
... un paso más ...
... esto es una diapositiva fragmentada
Se pueden crear con la clase fragment
:
Opcionalmente data-fragment-index
determina el orden de aparición
<p class="fragment" data-fragment-index="6">... un paso más ...</p>
Algunas posibilidades:
grow
shrink
fade-out
visible only once
<p class="fragment grow" data-fragment-index="4">grow</p>
<p class="fragment shrink" data-fragment-index="5">shrink</p>
<p class="fragment fade-out" data-fragment-index="6">fade-out</p>
<p class="fragment current-visible" data-fragment-index="7">visible only once</p>
Más posibilidades:
blue only once
highlight-red
highlight-green
highlight-blue
<p class="fragment highlight-current-blue" data-fragment-index="4">blue only once</p>
<p class="fragment highlight-red" data-fragment-index="5">highlight-red</p>
<p class="fragment highlight-green" data-fragment-index="6">highlight-green</p>
<p class="fragment highlight-blue" data-fragment-index="7">highlight-blue</p>
Los estilos para los fragmentos se pueden combinar de forma secuencial
Basta con anidar unos estilos con otros
Aparezco, me pongo verde y desaparezco<span class="fragment fade-in" data-fragment-index="3">
<span class="fragment highlight-green" data-fragment-index="4">
<span class="fragment fade-out" data-fragment-index="5">
Aparezco, me pongo verde y desaparezco
</span>
</span>
</span>
Es posible crear contenido utilizando Markdown
Es utilizado en plataformas como GitHub, reddit, Diaspora, Stack Echange, OpenStreetMap o SourceForge
Más información aquí
<section data-markdown>
## Soporte para Markdown
Es posible crear contenido utilizando *Markdown*
Es utilizado en plataformas como GitHub, reddit, Diaspora,
Stack Echange, OpenStreetMap o SourceForge
Más información [aquí](http://daringfireball.net/projects/markdown/)
</section>
<section data-markdown> | |
<script type="text/template"> | |
## Soporte para Markdown | |
Es posible crear contenido utilizando *Markdown* | |
Es utilizado en plataformas como GitHub, reddit, Diaspora, Stack Echange, OpenStreetMap o SourceForge | |
Más información [aquí](http://daringfireball.net/projects/markdown/) | |
``` | |
<section data-markdown> | |
## Soporte para Markdown | |
Es posible crear contenido utilizando *Markdown* | |
Es utilizado en plataformas como GitHub, reddit, Diaspora, Stack Echange, OpenStreetMap o SourceForge | |
Más información [aquí](http://daringfireball.net/projects/markdown/) | |
</section> | |
``` | |
</script> | |
</section> |
Es posible cargar dinámicamente Markdowns externos:
<section data-markdown="ejemplo.md"> | |
</section> |
# Ejemplo | |
Markdown incluido dinámicamente | |
#### Más información sobre Reveal.JS: | |
- [Web oficial de Reveal.JS](http://lab.hakim.se/reveal-js/#/) | |
- [Repositorio GitHub con el código fuente](https://github.com/hakimel/reveal.js) | |
- [Hakim El Hattab - creador de Reveal.JS](http://hakim.se/) |
Con data-background
se puede cambiar el color de fondo de una diapositiva concreta
Se soportan todos los colores de CSS
<section data-background="#666666"> | |
<h2>Color de fondo</h2> | |
<p>Con <code>data-background</code> se puede cambiar el color de fondo de una diapositiva concreta</p> | |
<p>Se soportan todos los colores de CSS</p> | |
</section> |
También se puede cambiar la imagen de fondo de una diapositiva
Esta imagen puede estar contenida localmente o en otro servidor de Internet
<section data-background="imagen.png">
Si la imagen de fondo es muy pequeña, se puede utilizar la opción de repetición
<section data-background="imagen.png" data-background-repeat="repeat" data-background-size="100px">
<section data-background-video="video.mp4,video.webm">
<section data-background="imagen.gif">
Reveal.configure({ | |
parallaxBackgroundImage: 'images/parallax.jpg', //Parallax background image | |
parallaxBackgroundSize: '', //CSS syntax, e.g. "2100px 900px" //Parallax background size | |
parallaxBackgroundHorizontal: 100, //Number of pixels to move the parallax background per slide (horizontal) | |
parallaxBackgroundVertical: 100 //Number of pixels to move the parallax background per slide (vertical) | |
}); |
Se puede cambiar el tipo de transición para una diapositiva individual
En este ejemplo se utiliza el tipo de transición zoom
<section data-background-transition="zoom">
También se puede cambiar mediante código:
Reveal.configure({ backgroundTransition: 'zoom' })
Incluyendo data-state="VALOR"
se pueden cambiar algunos estilos de la diapositiva:
<section data-state="testingDataState"> | |
<h2>Estado global</h2> | |
<p>Incluyendo <code>data-state="VALOR"</code> se pueden cambiar algunos estilos de la diapositiva:</p> | |
<p>Podria complementarse con el siguiente estilo:</p> | |
</section> |
Podria complementarse con el siguiente estilo:
.testingDataState { | |
border: dashed; | |
margin: 10px; | |
background-color: green; | |
} |
Incluyendo data-state="VALOR"
también se generan eventos
Los eventos se capturan y tratan como cualquier otro evento JavaScript:
Reveal.addEventListener('myEvent', function() {
console.log('"myEvent" has fired'); //o cualquier otro código
} );
Con Chrome es posible imprimir/exportar la presentación a PDF
Se debe utilizar, en la URL, el atributo ?print-pdf
Después, sólo tendrás que ir a Opciones -> Imprimir y seleccionar la impresora deseada en el navegador
La salida se visualizará correctamente
Haz clic aquí para probarlo