Cargando



Crear Slider y Presentaciones con Reveal.js

Reveal.js es un framework desarrollado en Javascript, que se utiliza para la creación de presentaciones utilizando HTML.


mar 04 2016 15:12
Avanzado
mar 04 2016 21:42

Muchas veces cuando necesitamos realizar un slider o una presentación de diapositivas utilizamos software como Powerpoint o Prezi, actualmente existen muchos frameworks que nos permite realizar este tipo de presentaciones utilizando tecnología Html5, Jquery y Css 3.

 

La ventaja es que puede verse en cualquier navegador, en cualquier sistema operativo, e incluso utilizarlo en aplicaciones para dispositivos móviles.

 

Reveal es un framework desarrollado en Javascript que brinda funcionalidades para crear slider y presentaciones con características que permiten gestionar y manipular diapositivas, exportación de PDF, posibilidad de controlar tiempo, navegación y efectos de cada dispositiva.

 

Reveal es una librería gratuita y tiene como gran ventaja que podemos programar, conectar a bases de datos o incluir en cualquier aplicación que soporte Html y Javascript algo que los software más conocidos no pueden hacer.

 

Desarrollar con Reveal es fácil y solo debemos conocer Html y Js, para comenzar a crear una presentación debemos descargar la librería Reveal.js de la pagina oficial.

 

panta01.jpg

 

A continuación descomprimimos el archivos zip para comenzar el tutorial. Iniciaremos con un ejemplo sencillo para probar Reveal.js.

 

Desde el directorio que descomprimimos, copiamos las carpetas css, js, plugins y lib a nuestra carpeta de Ejemplo01. Estas carpetas contienen son todas las librerías necesarias para crear nuestra presentación.

 

panta02.jpg

 

A continuación crearemos un slider con dos imágenes y texto, donde se podrá navegar de forma automática o mediante teclado. Quedará de la siguiente manera:

 

gifa8.gif

 

El código fuente es el siguiente:

<html lang="es">
<head>
<meta charset="utf-8">
<title>Reveal.js Ejemplo 01</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Añadimos soporte para Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<!-- Iniciamos una capa div con la clase reveal para contener toda la presentación. -->
<div class="reveal">
  <!-- Utilizamos la clase slides para contener las dispositivas -->
  <div class="slides">

   <!-- Cada section es una dispositiva -->
   <!-- Dentro podemos añadir contenido html, imagenes, videos, etc -->
   <section>
    <h1>AUDI R8</h1>
    <p>Automóvil deportivo</p>
    <p><img src="audi-r8-fsi.png"></p> 
   </section>

   <section>
    <h1>AUDI R8</h1>
    <p><img src="audi_r8.png"></p>
    <p>Visite nuestra web <br> <a href="http://www.demo.com">CONSULTAR</a><p>
   </section>

   </div>
</div>
<script src="lib/js/head.js"></script>
<script src="js/reveal.js"></script>

<script>
  Reveal.initialize({
autoSlide: 3000,
loop: true
});
</script>
</body>
</html>
El framework Reveal nos provee varios temas o diseño css que podemos encontrar en la carpeta css y cambiando la linea de theme, podemos cambiar el diseño.
<link rel="stylesheet" href="css/theme/black.css" id="theme">
Aplicamos el tema Beige y visualizamos con el emulador de dispositivo móvil en Firefox y podemos observar que la librería se encarga de realizar un diseño adaptable.

 

 

panta04.jpg

 

El funcionamiento del slider lo provee el código Javascript:

<script>
  Reveal.initialize({
autoSlide: 3000,
loop: true
});
</script>
Si queremos que el slider se mueva en forma automática, indicaremos el tiempo de transición en milisegundo con el parámetro autoSlide, en caso de no utilizarlo entonces se deberá mover con las flechas mediante teclado o mouse.

 

Los desarrolladores web están utilizando este tipo de librería para dejar de lado los gif, flash y otros formatos de animación, este tipo de framework incluso permite que el slider pueda utilizarse para seo ya que el texto es indexable. Además podemos utilizarlo tanto en forma online como offline para mostrar nuestra presentación desde un pendrive o un móvil, utilizando cualquier navegador.

 

El framework Reveal.js consiste en un único archivo JavaScript y dos archivos de hojas de estilo. La primera hoja de estilos, reveal.css define algunos estilos comunes, mientras que la segunda contiene el diseño de un tema estándar, podemos ademas añadir una tercera hoja de estilos con nuestras propias clases.

 

Este tema define el aspecto de las partes importantes de sus presentaciones, ya que hay texto, imágenes y enlaces.

 

Podemos utilizar junto con Reveal.js otras librerías como CSS 3D o WebGL.

 

El framework Reveal permite utilizar varios parámetros de configuración y plugin para mejorar la experiencia de usuario. Los parámetros de configuración que más nos van a interesar son:

 

controls
Este parámetro indica que se muestren las flechas de dirección para navegar por nuestras diapositivas, si no indicamos nada aparece por defecto. Puede adoptar el valor true o false.

 

progress
Muestra una barra de progreso mientras transcurre la presentación. Puede adoptar el valor true o false.

 

slideNumber
Muestra el numero de dispositiva actual. Puede adoptar el valor true o false.

 

keyboard
Activa o desactiva la interacción mediante teclado. Puede adoptar el valor true o false.

 

touch
habilita o deshabilita el uso de pantallas táctiles en caso de tenerla. Puede adoptar el valor true o false.

 

loop
indica que al llegar al final vuelva al principio y continué sin detenerse, si ponemos false se detendrá al llegar al final.

 

Puede adoptar el valor true o false.

 

autoSlide
es el tiempo en milisegundo para cambiar de una diapositiva a otra automáticamente.

 

transition
tipo de transicion entre diapositivas. Puede adoptar el valor defaul,none,fade,slide,convex,concave o zoom.

 

Un ejemplo muy interesante es la demo oficial que se puede utilizar para practica y descargarla también desde la pagina oficial de Reveal.js.

 

Si deseamos añadir Slider verticales debemos crear secciones anidadas de la siguiente manera:

  <section>
		    <section>Diapositiva vertical 1</section>
		    <section>Sub diapositiva vertical 1.1</section>
            <section>Sub diapositiva vertical 1.2</section>
 </section>
A continuación haremos un Ejemplo02 donde incluiremos otras características como los fragmentos que son listas en html que se van mostrando a medida que se pulsa una tecla avanza la presentación

 

La presentación será un Curso de Hacking, con diapositivas informáticas.

 

panta05.jpg

 

El código fuente será el siguiente:

<html> <head> <meta charset="utf-8">
<title>Curso de Hacking Etico</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
</head>
<body>
  <!-- Iniciamos el contenedor con la clase reveal -->
  <div class="reveal">
   <!-- Iniciamos el contenedor de diapositivas con la clase slides -->
   <div class="slides">
    <section>
	 <h1>Curso de Hacking Etico</h1>
	 <h3>Aprende Seguridad Informática Defensiva‎</h3>
    </section>
   
    <!-- En esta seccion indicamos una lista
    y mediante la clase fragment designamos los fragmentos -->
    <section>
	 <h1>Temario</h1>
    <ul>
	 <li class="fragment">Detección y Control de Vulnerabilidades</li>
    <li class="fragment">Penetration Testing: Métodos.</li>
    </ul>
    </section>
    <!-- Anidamos las secciones para crear diapositivas verticales -->
<section> 
			   <section>Seguridad en Redes</section>
				 <section>Administración de Servidores Linux </section>
				 <section>Administración de Servidores Windows/section>
			 </section>
  
   </div>
   </div>
	 
	  <script src="lib/js/head.js"></script>
<script src="js/reveal.js"></script>
<!-- Configuramos el tiempo de avance automático y el tipo de transición -->
<script>
  Reveal.initialize({
autoSlide: 3000,
loop: true,
transition: 'concave'
});
</script>
	 
</body>
</html>
Los fragmentos indican que cada ítem de la lista se mostrará a medida que avance la presentación, si no se indica la clase fragment la lista se mostrará completa y no uno a la vez.

 

 

panta06.jpg

 

Además hemos indicado secciones verticales, que son sub diapositivas, para mostrar otras diapositivas dentro de una sección determinada.

 

panta07.jpg

 

El framework Reveal.js es una de las opciones más populares para la creación de presentaciones utilizando HTML, ya que puede utilizarse en cualquier dispositivo y no requiere tener instalado un software para diseñar o programar.

 

Nos fijamos en algunas de sus características básicas en este artículo, pero hay muchos más disponibles.

 

Google esta experimentando con la tecnología WebRtc, una tecnología que vimos en el tutorial WebRTC Comunicación de Audio y Vídeo desde un Navegador y Reveal.js para que se puede realizar los movimiento de las dispositivas mediante gestos con la mano a través de una webcam. Calibrando la webcam mediante WebRtc y mediante un simple movimiento de la mano en el aire podemos cambiar la diapositiva.

 

panta08.jpg

 

Podemos ver el proyecto de Google que está en fase beta Google Chrome con Gestures + Reveal.JS, donde se ven unos vídeos demostrativos que prueban la tecnología.


¿Te ayudó este Tutorial?


2 Comentarios


David Sanz
mar 04 2016 22:54

Buen javascript, lo tengo ya guardado, necesitaba para realizar un slider interesante. gracias.


Pablo Santos
mar 10 2016 11:44

Es interesante forma, este framework es de las más interesantes.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X