Creando presentaciones de diapositivas con Hovercraft

Hovercraft Logo

Hoy vengo a hablar de Hovercraft, una herramienta para crear presentaciones de diapositivas utilizando la librería de Javascript Impress.js sin necesidad de saber nada de Javascript.

Hovercraft combina la potencia de la librería Impress.js y ReStructuredText para crear presentaciones muy visuales, flexibles y sobre todo personalizables, lo que se puede llegar a hacer con Hovercraft es tanto como te imagines, una forma diferente y original de crear presentaciones más allá de programas como pueden ser PowerPoint, Prezi y demás.

¿Qué es Hovercraft según sus autores?

Hovercraft! is a tool to make impress.js presentations from reStructuredText

Cómo ya hemos dicho, se define como una herramienta para realizar presentaciones basadas en Impress.js a partir de un fichero ReStructuredText, tan simple y tan sencillo.

Las ventajas principales de Hovercraft

A mi parecer son:

  • No requiere de software adicional para ver las presentaciones más allá de un navegador web actual.
  • Por tanto, da igual el sistema operativo que vayas o vayan a utilizar, en cualquiera de ellos podrás reproducir tu presentación sin problema.
  • Para crear la presentación puedes utilizar tanto GNU/Linux como Mac OS y en teoría, no tendrías ningún problema tampoco en Windows.
  • Y aun encima sólo necesitas un editor de texto, el que más te guste.
  • Es muy fácil de utilizar una vez conoces las pautas de creación del fichero.
  • Es de código abierto.

Pues bien, una vez dicho esto, vamos a ver cómo quedaría la presentación de este ejemplo una vez terminada

Resultado de la presentación de ejemplo

Si antes de continuar quieres ver cuál será el resultado puedes pinchar en este enlace y verás la presentación terminada.

Si te interesa seguir con el artículo vamos a ver cómo se ha realizado esa presentación y de esta forma nos acercaremos a la creación de presentaciones con Hovercraft.

¿Cómo se crea una presentación en Hovercraft?

Para crear una presentación lo único que necesitamos es:

  • La herramienta, que puedes descargar o ver cómo se instala desde aquí: Hovercraft (Github). Requiere de Python 3.2 o superior. Si usas ArchLinux está en AUR por lo que la puedes instalar con un simple:

yaourt -S hovercraft

  • Tu editor de texto preferido.

Si no sabes cómo funciona un fichero ReStructuredText al principio has de leer la documentación tanto de ReStructuredText como de Hovercraft para hacerte con la sintáxis necesaria para crear el fichero que contendrá la presentación.

Si no quieres leerte la documentación así de primeras puedes seguir este ejemplo para hacerte una idea, pero siempre que quieras mirar algo te recomiendo utilizar la documentación oficial.

Así que veamos nuestra presentación de ejemplo.

Creación de una presentación de diapositivas con Hovercraft

Antes de empezar vamos a crear una carpeta llamada “Hovercraft” en algún lugar de nuestro PC, ésta contendrá todos los recursos necesarios para nuestra presentación. Para este tutorial dentro de ella crearemos también una carpeta llamada “css” y otra llamada “images”.

Puedes descargar la presentación resultante de este artículo pulsando aquí.

En esta misma carpeta crearemos un fichero llamado “Hovercraft.rst” el cuál contendrá el código de nuestra presentación de ejemplo:

 

:css: css/index.css

:title: Hovercraft demo!


**Hovercraft!**
==================

.. image:: images/hovercraft_logo.png
	:target: https://github.com/regebro/hovercraft

*Hablemos un poco de Hovercraft y sus posibilidades*

----

:data-x: r1000

¿Qué es Hovercraft?
=======================

Hovercraft_ es, básicamente, una herramienta para hacer presentaciones utilizando impress.js_ a partir de ReStructuredText_ sin necesidad de saber Javascript. 

Su uso es tan sencillo que,  tras ejecutar con Hovercraft_ un fichero de texto creado siguiendo ciertas pautas, éste te proporcionará una página web que abrirás con el navegador. Allí verás la presentación que has creado

.. _Hovercraft: https://github.com/regebro/hovercraft

.. _reStructuredText: http://docutils.sourceforge.net/rst.html

.. _impress.js: http://github.com/bartaz/impress.js

----

:data-y: r500

Características principales
=============================

- Sólo necesitas un editor de texto para crear tu presentación (y la librería Hovercraft instalada claro!)
- Para ver la presentación sólo necesitas un navegador actual (Firefox, Google Chrome, etc)
- Por tanto, tu presentación será visible en cualquier sistema operativo
- Posicionamiento automático de diapositivas
- Es de código abierto
- Cómodo y sobre todo, muy potente

*El límite es tu imaginación*

-----

:data-x: 2000

Efectos
===========

Con Hovercraft_ puedes dotar de múltiples efectos a tus diapositivas, de esta forma se puede remarcar la importancia de una diapositiva respecto a otra de forma visual, los efectos disponibles son...

.. _Hovercraft: https://github.com/regebro/hovercraft

----

:data-rotate: 45

....rotaciones....
====================

----

:data-y: r1000

....movimientos de cámara....
=================================

----

:data-x: r0
:data-y: r600
:data-scale: 3

....zoom....
======================

----

:data-scale: 1
:data-y: r500

Y más
==================

Con Hovercraft_ también puedes:

- Establecer un posicionamiento de las diapositivas en 3 dimensiones
- Crear una ruta SVG para aplicar al posicionamiento de las diapositivas
- Poner tus propias tipografías de texto
- Resaltar sintáxis de código fuente
- Crear y aplicar tu propio estilo a los textos, imágenes y colores de las diapositivas utilizando CSS

.. _Hovercraft: https://github.com/regebro/hovercraft

----

:data-y: r500

Mucho más...
==============================

Puedes ver todo lo que puedes hacer con Hovercraft_ en su propia documentación_

.. _Hovercraft: https://github.com/regebro/hovercraft

.. _documentación: https://hovercraft.readthedocs.org/en/1.0/

 

Veamos de principio a fin las marcas puestas para ver qué hace cada una.

La primera línea, como vemos indica de dónde se ha de obtener el fichero CSS que contiene los estilos de nuestra presentación, que es el siguiente:

 

body {	
	background-color: #0f0f0f;	
	font-size: 130%;
	color: #adadad;
} 
 
h1 {
	color: #dddddd;
}
 
a{
	color: #353535;
}

 

Este fichero debe estar dentro de la carpeta “css” con nombre “index.css”, si le cambiamos el nombre tendremos que cambiarlo también en la línea correspondiente del fichero “Hovercraft.rst”.

Lo único que hace nuestro fichero CSS en este caso es poner los colores del fondo, tamaño y color del texto, color de los textos cabecera y color de los enlaces, pero teniendo en cuenta que se usa CSS3 vemos que podemos añadir muchas más cosas para dar el estilo que queramos a nuestra presentación y sus componentes.

La segunda línea del fichero “Hovercraft.rst” pone el título para la página en la que se reproducirá la presentación.

En la línea siguiente vemos el siguiente texto:

**Hovercraft!**
==================

Los dobles asteriscos le dan énfasis al texto, en concreto si son dobles el texto se pone en negrita, mientras que los símbolos de igual (“=”) que hay debajo del texto indica que esto será un texto de cabecera y por tanto más grande, se usa para poner ese texto como título. Los símbolos de igual deben cubrir todo el largo del texto de arriba (“**Hovercraft!**”), si no dará error.

Las líneas correspondientes a:

.. image:: images/hovercraft_logo.png
:target: https://github.com/regebro/hovercraft

(Nótese el tabulado en “target”, si no lo ponemos dará error y es porque esa cláusula pertenece a la de “image”)

Indican que ahí habrá una imagen que se encuentra en la carpeta “images” creada anteriormente y que el destino del enlace de la imagen (en este caso también es enlace, si no pusiéramos el “target” simplemente se vería la imagen, sin enlace ninguno al pinchar en ella) es la página en cuestión.

Puedes ver la imagen para descargar pinchando aquí.

Y el texto siguiente también estará remarcado aunque en este caso al tratarse de un único asterisco el texto se verá en cursiva.

Aquí ya vemos el primer efecto/transición:

:data-x: r1000

Esto lo que hace es colocar la diapositiva siguiente 1000 pixels a la derecha (número positivo) en relación a la diapositiva anterior.

Las transiciones, lógicamente, se aplican entre diapositivas por tanto los cuatro guiones juntos que vemos después:

– – – –

Le dicen a Hovercraft que a partir de ahí es una diapositiva nueva.

Esto es lo básico que hay que conocer de Hovercraft para poder crear nuestras diapositivas, y ya con estos pequeños detalles y la documentación de la misma seríamos capaces de crear nuestra presentación, pero vamos a ver las otras sentencias que se pueden ver en el fichero de ejemplo.

Justo la primera línea de la segunda diapositiva empieza con un enlace a una página web:

Hovercraft_

Eso en el texto marca un enlace, pero para decirle a dónde tiene que ir, tenemos que, fuera del texto, en cuestión poner la sentencia:

.. _Hovercraft: https://github.com/regebro/hovercraft

(Nótese el espacio entre los dos primeros puntos “..” y la barra baja “_”)

De esta forma la palabra Hovercraft servirá de enlace si se pulsa en ella mientras se ve la presentación.

También podemos observar un “movimiento de cámara” vertical que sigue las pautas del horizontal sólo que en el eje “y” (vertical):

:data-y: r500

Más adelante podemos obervar una lista “desordenada”, es decir una lista sin números, que se crea poniéndole un guión al texto de cada uno de los elementos de la lista.

– Sólo necesitas un editor de texto para crear tu presentación (y la librería Hovercraft instalada claro!)
– Para ver la presentación sólo necesitas un navegador actual (Firefox, Google Chrome, etc)

….

Más efectos como rotaciones y zoom:

 :data-rotate: 45   (Rotación)

:data-scale: 3   (Zoom)

En el caso del ejemplo el zoom va a acompañado también de movimiento, por eso tiene dos sentencias junto a él.

Y eso es todo lo que hay que explicar del fichero, como digo hay muchas cosas más que puedes hacer como por ejemplo posicionamiento de diapositivas en tres dimensiones, rutas SVG para marcar la trayectoria de las mismas, etc.

Una vez te hayas afianzado un poco con lo básico, en la documentación tienes todo lo demás, que combinado con las posibilidades de CSS3 harán tu presentación muy visual y atractiva.

Lo único que nos faltaría una vez tenemos todo sería crear la presentación, para ello se usaría el siguiente comando, según nuestro ejemplo:

hovercraft Hovercraft.rst hovercraft

Lo que hace es:

  • hovercraft: Ejecución del programa en sí
  • Hovercraft.rst: Fichero creado con las pautas para la presentación
  • hovercraft: Nombre de la carpeta destino que contendrá nuestra presentación y los ficheros necesarios: 
    • Una carpeta “css”
    • Una carpeta “images” (si nuestra presentación incluye imágenes, como es el caso del ejemplo)
    • Una carpeta “js”
    • Un fichero “index.html” que es el que debemos abrir en el navegador web para reproducir nuestra presentación

Una vez tenemos abierta la presentación en el navegador usaremos las flechas de nuestro teclado para movernos por las diapositivas:

  • Podemos avanzar en la presentación presionando “Espacio”
  • Para ir a la siguiente diapositiva presionaremos la flecha hacia la derecha o la flecha abajo
  • Para ir a la diapositiva anterior pulsaremos la flecha hacia la izquierda o la flecha arriba
  • Para abrir la ayuda presionamos la tecla “H”

Y esto es todo, como vemos es muy fácil crear presentaciones visualmente atractivas, diferentes a las creadas comunmente y que podrán ser visualizadas en casi cualquier ordenador sin necesidad de software adicional, en un principio.

Espero que te haya gustado y si has creado alguna presentación con Hovercraft que quieras compartir no dudes en hacerlo utilizando los comentarios de abajo o la sección de contacto.

He publicado un vídeo con el resultado, si quieres echarle un vistazo:

Relacionado: