0

Creando diapositivas profesionales con reveal.js usando HTML5

Posted by Gabriel on 13 diciembre, 2014 in Programación, Programas, Utilidades, Web |

En esta oportunidad escribiré una introducción sobre este proyecto llamado reveal.js de código abierto [https://github.com/hakimel/reveal.js] el cual estoy usando actualmente para mis diapositivas personales, presentando los trabajos como si estuviera usando PowerPoint, sólo que con mejores efectos y fluidez directamente desde un browser como Chrome, Firefox, entre otros, utilizando HTML5, CSS3, etc. haciéndolo multiplataforma. Debido a que mis trabajos no pueden ser expuestos públicamente, al utilizar datos e información sencible, me impide usar otros servicios online donde quedan publicadas libremente y aunque algunos ofrecen una membresía para poder tenerlos privados, en mi caso no se justifica dicha inversión para poder usarlo de modo privado. Por lo cual llegué a encontrar este framework sencillo y fácil de realizar, sobre todo si programas o programaste alguna vez, ya que todo esta muy bien explicado en el propio repositorio y en el código ejemplo en el mismo index.html en la raíz del framework.

Este proyecto permite realizar presentaciones con diferentes transiciones, muy buenas por cierto, que dan un toque muy profesional al trabajo y lo mejor de todo es que es sencillísimo de realizar. Para su propio convencimiento pueden verlo andando en este link: http://lab.hakim.se/reveal-js/#/

A continuación detallo los pasos a seguir para instalar y hacer sus propias diapositivas con la herramienta:

1) Para comenzar deben bajar el código del repositorio de git clonándolo en tu local o puedes descargarlo en un zip desde el mismo sitio directamente. Para descargarlo de git deben presionar el botón Download Zip (o haciendo click directamente en este link: https://github.com/hakimel/reveal.js/archive/master.zip) ya que como dije, se puede usar directamente el archivo index.html (editándolo como si fuera una página web común y corriente) realizando nuestra propia presentación partiendo del ejemplo que éste archivo tiene.

2) Al descomprimir el zip tendremos las carpetas css, js, lib, plugin usadas para contener los archivos que sus nombres indican, css para las hojas de estilo, la carpeta js para los javascript, lib para las librerias propias o de terceros y por último los plugins en plugin. Para quienes quieran instalarlo completo pueden seguir los pasos explicativos en el repositorio (https://github.com/hakimel/reveal.js#full-setup). Si sientes que no entiendes nada de lo que explique de las carpetas no hay problema porque al usar el ejemplo que tiene tendrás lo que necesitas a mano hasta que tomes confianza, te animes, y agregues tus propios estilos (que es lo mejor que tiene el framework) y plugins.

3) Es necesario tener un editor de código para modificar el archivo, cada uno puede usar el editor que mas le guste, en mi caso voy a nombrar uno que lo recomiendo sobre todo porque esta orientado a desarrollo web y en este caso particular ayuda mucho su opción de ejecutar la página en nuestro navegagor viendo los cambios que hacemos del código en vivo en el browser, en tiempo real, sin tener que actualizar la página web constantemente. Para quienes directamente instalaron el proyecto completo en su local, no les hace falta esto ya que utiliza nodejs y express por lo que al ejecutarlo pueden tambien ver esto instantáneamente.

Dado que quiero hacer simple el uso de reveal.js, con instalar Brackets (pueden descargarlo del sitio oficial http://brackets.io/  haciendo click en el botón central Download en la página, está disponible para Linux, Windows y Mac). Pueden ver los requisitos necesarios en https://github.com/adobe/brackets/wiki/Troubleshooting.

4) Como dije anteriormente, es posible ver en vivo los cambios en el código con un simple click, y para ello, teniendo instalado Brackets debemos agregar la carpeta descomprimida o la carpeta donde clonamos el proyecto desde FILE > Open Folder… o pulsando CTRL+ALT+O. Una vez realizado, localizamos el archivo index.html en la raiz del directorio y podemos modificarlo o crear uno nuevo a partir de éste y renombrarlo como querramos.

5) A fines practico voy a usar el mismo index.html y para poder editarlo y ver al mismo tiempo como va quedando la diapositiva. Haciendo doble click para abrir el archivo index.html y visualizanado su código en Brackets (programa situado a la izquierda de la imagen mas abajo), debemos pulsar el botón de la esquina superior derecha tiene forma de N (Ver circulo rojo en la imagen) y ¡listo!, se abrirá el navegador que tenemos por defecto mostrando el contenido de la primer diapositiva. Si colocamos las ventanas de las aplicaciones una al lado de la otra al modificar el código en Brackets se debe visualizar al instante en el navegador (Chrome, Firefox etc.) tal como lo muestra la siguiente imagen:

Brackets - reveal.js

Eso es todo, pueden ir viendo la estructura del código, por ejemplo, pueden ver que las diapositivas están separadas por las etiquetas <section>…</section> dentro de la etiqueta padre <body>…</body>, por lo tanto para que tengamos diapositivas hacia abajo y accederlas pulsando la tecla direccional abajo, debemos colocar dichas diapositivas siguiendo estas estructura (donde los puntos suspensivos indican que hay líneas de códigos respectivas que no convienen en este ejemplo citarlas):

...

<section>

<section>....</section>

<section>....</section>

<section>....</section>

</section>
...

Como se puede observar este ejemplo muestra que esta sección tiene tres diapositivas en su interior por lo que podrá ser navegada con los direccionales tanto hacia abajo como luego hacia arriba.

Para no hacer mas largo este post introductorio, pueden seguir los ejemplos del archivos editándoles el texto a mostrar en pantalla. Además si leen las explicaciones en git sobre lo que se puede hacer con esta herramienta, podrán tener andando fácilmente sus propias presentaciones en minutos y de forma totalmente elegante, ya que pueden hasta poner videos de youtube (si el lugar donde lo presentan tiene wifi para visualizar el streaming claro), videos, fotos, audios, etc… Por último con comprimir el directorio completo o guardarlo directamente en un pendrive puden pasarlo a otra pc y con hacer doble click en el archivo index.html éste debería abrirse en un navegador y podrán ver su presentación andando. Para visualizarlo en pantalla completa deben pulsar la tecla F de su teclado, y para quitarlo deben pulsarlo otra vez. Para poder ver las diapositivas que está siendo vista en el proyector o en pantalla, la diapositiva que continúa luego, y las notas que pusieron a cada una como así también el tiempo transcurrido, deben pulsar la tecla S y verán que se habre otra ventana para que pueden tenerlo en la pantalla de su notebook por ejemplo y la otra donde esta la presentación en pantalla completa en el proyector con una pantalla extendida, cabe aclarar que esta funcionalidad no muestra las imagens cuando se habre directamente el archivo en el navegador, por lo que si usan la opción descripta de Brackets para cargar el sitio en vivo en el browser podrán ver las imágenes de las diapositivas al pulsar S.

Espero les sea útil este intento de corto post pero que da para mucho mas, por lo que les dejo encargado seguir leyendo del sitio original para sacarle el mayor de los provechos a esta gran herramienta.

Saludos!!

 

Share on Facebook0Share on Google+0Tweet about this on Twitter0Pin on Pinterest0Share on Tumblr0Share on LinkedIn0Print this pageEmail this to someone

Etiquetas: , , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Doce − Nueve =

Copyright © 2011-2017 En Mi Tiempo Libre All rights reserved.
This site is using the Desk Mess Mirrored Child Child-Theme, v1.0, on top of
the Parent-Theme Desk Mess Mirrored, v2.5, from BuyNowShop.com