Ya sea en el estudio ó trabajo, muchas veces es necesario realizar una presentación. Si Power Point es tu primera opción, déjame decirte que te hace falta conocer otras opciones para realizar presentaciones ;) Hoy en día contamos con diversas herramientas, ya sea para usarlas en el PC, o desde la web. Hacer uso de las tecnologías web, seria lo mas innovador en una presentación. En este articulo, les presentaremos Reveal.js, un framework para crear elegantes presentaciones en HTML de forma fácil.

Reveal.js es una potente herramienta para crear presentaciones en HTML, ya que tiene muchas características avanzadas. Con Reveal.js, puede crear una presentación que soporte gestos móviles para las diapositivas. Tambien se proporciona algunas transiciones y plantillas listas para usar, viene con una multitud de otras características para ayudarle.

Comenzando con Reveal.Js

Antes de comenzar de lleno con el codigo de ejemplo, tendremos que realizar un paso importante, ¿adivina cual? Asi es! Descargar el plugin ;) Para esto, descargamos el archivo desde su repositorio, una vez descargado y descomprimido encontraremos las siguiente carpetas:

css: El estilo básico
js: Dependencias javascript
plugin: Algunos componentes desarrollados como extensión de Reveal.js
lib: Todos los demás archivos de terceros (JavaScript, CSS, fuentes)

Ahora, llamaremos las librerias para usar en el ejemplo. Usaremos el tema por defecto como plantilla:

[html]

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/reveal.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/theme/default.css&quot; id=&quot;theme&quot;&gt;

[/html]

Y antes de cerrar la etiqueta head, los archivos javascript:

[html]

&lt;script src=&quot;lib/js/head.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/reveal.min.js&quot;&gt;&lt;/script&gt;

[/html]

Estructura HTML

Vamos a crear tres diapositivas básicas mediante algunos códigos HTML. Hay tres elementos principales para la creación de las diapositivas de la presentación. Ellos son: <div class=»reveal»>, <div class=»slides»> y <section>.

En la etiqueta <section> es donde se tiene que especificar el contenido de la diapositiva. La diapositiva por defecto se mueve horizontalmente, si desea crear una diapositiva vertical, fácilmente agregar otro <section> interior. Aquí está el ejemplo:

[html]

&lt;div class=&quot;reveal&quot;&gt;
&lt;div class=&quot;slides&quot;&gt;
&lt;section&gt;Esta es una presentacion horizontal&lt;/section&gt;

&lt;section&gt;
&lt;h1 style=&quot;color:#f37720&quot;&gt;Presentacion HostDime Colombia&lt;/h1&gt;
&lt;h3&gt;Hola gente, bienvenidos al ejemplo de reveal.js&lt;/h3&gt;
&lt;/section&gt;

&lt;section&gt;
&lt;section id=&quot;fragments&quot;&gt;
&lt;h2&gt;Esto es un fragmento.&lt;/h2&gt;
&lt;p&gt;Click en la flecha para revelar!&lt;/p&gt;
&lt;p class=&quot;fragment&quot;&gt;Numero Uno&lt;/p&gt;
&lt;p class=&quot;fragment&quot;&gt;Y este es el numero dos&lt;/p&gt;
&lt;p class=&quot;fragment&quot;&gt;No te olvides del tres!&lt;/p&gt;
&lt;/section&gt;
&lt;/section&gt;

&lt;section&gt;
&lt;h2&gt;Que tal esta presentacion?&lt;/h2&gt;
&lt;p&gt;Esta es una de las mas populares frases de &lt;a href=&quot;http://en.wikipedia.org/wiki/Eric_Cantona&quot; rel=&quot;external&quot;&gt;Eric Cantona&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
“When the seagulls follow the trawler, it’s because they think sardines will be thrown into the sea. Thank you very much.”
&lt;/blockquote&gt;
&lt;p&gt;Click &lt;a href=&quot;#&quot;&gt;aqui&lt;/a&gt; para regresar a la pagina inicial.&lt;/p&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;/div&gt;

[/html]

Listo, ya con esto tendremos no solo la estructura, sino el contenido a mostrar ;) Ademas, no sobra recordar, el anterior código, va dentro del body :)

Si ejecutamos el ejemplo, no se vera interacción, por lo que habrá que añadir código JavaScript para iniciar el script de Reveal.Js. Para esto añadimos el siguiente código después del anterior código y justo antes de cerrar el body.

[js]

&lt;script&gt;
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
});
&lt;/script&gt;

[/js]

Esas son las configuraciones básicas que necesitamos para una sencilla presentación, fácil, ¿no?. A continuación puedes encontrar una lista completa sobre otras configuraciones que puedes hacer a tu proyecto para realizar aun mas llamativo y elegante tu presentacion.

Ahora tenemos las siguiente diapositivas, claro, la siguiente será la de presentación ;)

Si pasamos a la siguiente diapositiva veremos lo siguiente:

Finalizando, veremos la ultima presentación, en esta habrá un vinculo para re dirigirnos a la presentación inicial:

Pero bueno, ahí están la presentaciones, pero, ¿Como se navega a través de las presentaciones? Simple, al lado derecho en la parte inferior se encuentran las flechas que hacen posible esto:

Finalmente

Con esta herramienta, puedes crear una gran presentación HTML en su sitio web. Ahora, realizar una gran presentación dependerá de tu creatividad. Créeme, valdrá la pena realizar una maravillosa presentación con esta herramienta. ¿Que esperas para asombrar con tu presentación en HTML?