Reveal.js

Presentaciones multimedia

Web - Repositorio GitHub

Vicente García Díaz

Introducción

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

Información básica

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

Algunas características

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

Hola Mundo

Se puede realizar una presentación con muy poco código

Ver ejemplo funcionando

Instalación

Existen dos formas de instalar y utilizar Reveal.JS

Instalación básica

Es suficiente en la mayoría de los casos

Instalación completa

Para personas con conocimientos más avanzados
Para realizar computación en el lado del servidor
Da acceso a un servidor Web local
Algunas funcionalidades avanzadas como los markdowns externos lo necesitan
Sin embargo, podría utilizarse cualquier otro servidor Web en caso de disponer de él

Instalación básica

Básicamente consiste en:

Acceder a la última versión del framework en el repositorio
Descargar y descomprimir el archivo (por ejemplo 3.2.0.zip
Editar index.html y hacer las modificaciones que se consideren oportunas
Abrir index.html en cualquier navegador Web

Instalación avanzada

Instalar el entorno de ejecución para JavaScript Node
Instalar el gestor de tareas para JavaScript Grunt
Clonar el repositorio GitHub de Reveal.JS
Instalar las dependecias del proyecto desde la carpeta del mismo con

>> npm install

Iniciar el servidor Web embebido ejecutando desde la carpeta del proyecto

>> grunt serve

Editar index.html y hacer las modificaciones que se consideren oportunas
Abrir index.html accediendo a al puerto 8000 de localhost en cualquier navegador Web

Configuración

A 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

Algunos parámetros

Algunas dependencias

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)

Desplazamiento horizontal

Puedes pulsar las flechas IZQUIERDA y DERECHA para desplazarte por las diapositivas en sentido horizontal

Vista general

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

Zoom en ciertos elementos

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

Pantalla completa

Pulsa F para mostrar la presentación a pantalla completa

...Pulsar ESC para salir del modo de pantalla completa

Principio y final

Pulsa INICIO (HOME) para ir a la primera diapositiva

Pulsa FIN (END) para ir a la primera diapositiva

Tómate un descanso

Pulsa B o . durante la presentación para pausarla

...Vuelve a pulsar B o . para seguir con tu presentación

Cualquier código HTML/JavaScript/CSS es posible

Por ejemplo, enlaces entre diapositivas como este

Identificación del nombre de la diapositiva

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

Listas desordenadas

Gijón
Oviedo
Madrid
Avilés

Listas ordenadas

Harina
Canela
Levadura
Huevos

Citas

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.

Tablas con información

Ciudad	Año de fundación	Población
Gijón	Siglo V a. C.	274290
Oviedo	761	221870

Y por qué no un video?

Código fuente


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)

Vista de Presentación

Pulsa S para abrir la ventana vista de Presentación

Diapositivas anidadas

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

Contenido interno

Este tipo de ordenación es útil para mostrar detalles adicionales de alguna idea o concepto

Diapositivas anidadas

Tiempo de volver atrás...

Para volver a la diapositiva anterior también puedes pulsar P, ya sea en sentido vertical u horizontal

Diapositivas anidadas - Código

Estilos

Existen estilos que ya vienen incluidos en Reveal.JS:

Black (por defecto)
White
League
Sky (el inicial en esta presentación)
Beige
Simple
Serif
Blood
Night
Moon
Solarized

Hojas de estilos

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:

Transiciones

Existen diferentes tipos de transiciones en Reveal.JS:

None
Fade
Slide
Convex
Concave (el inicial en esta presentación)
Zoom

Se puede cambiar mediante código:


    Reveal.configure({ transition: 'concave' })

Velocidad

La velocidad de cambio entre transiciones también se puede controlar

Default
Slow (el inicial en esta presentación)
Fast

Se puede cambiar mediante código:


    Reveal.configure({ transitionSpeed: 'slow' })

Fragmentos

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


... un paso más ...

Estilos para fragmentos

Algunas posibilidades:

grow

shrink

fade-out

visible only once


grow
shrink
fade-out
visible only once

Estilos para fragmentos

Más posibilidades:

blue only once

highlight-red

highlight-green

highlight-blue


blue only once
highlight-red
highlight-green
highlight-blue

Fragmentos múltiples

Los estilos para los fragmentos se pueden combinar de forma secuencial

Basta con anidar unos estilos con otros

Aparezco, me pongo verde y desaparezco



    
        
            Aparezco, me pongo verde y desaparezco

Markdown - Código

Markdown externo

Es posible cargar dinámicamente Markdowns externos:

Color de fondo

Con data-background se puede cambiar el color de fondo de una diapositiva concreta

Se soportan todos los colores de CSS

Imagen de fondo

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">

Fondo "azulejado"

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">

Fondo con video

<section data-background-video="video.mp4,video.webm">

Fondo con video animado con GIFs

<section data-background="imagen.gif">

Fondo desplazable

En sentido horizontal

Un poco más...

Ahora en sentido vertical

Un poco más

Esta es una forma de configurarlo:

Transiciones de fondo específicas

Se puede cambiar el tipo de transición para una diapositiva individual

Ejemplo

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' })

Estado global para estilos

Incluyendo data-state="VALOR" se pueden cambiar algunos estilos de la diapositiva:

Podria complementarse con el siguiente estilo:

Estado global para eventos

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
} );

Imprimir/Exportar a PDF

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