Presentaciones chulas, chulas con Reveal.js
Para crear presentaciones con software libre la solución más conocida es la herramiente Impress de LibreOffice (u OpenOffice), muy recomendable para los usuarios habituados a usar Powerpoint.
Yo considero mucho más productivo usar herramientas en las que el contenido y la presentación estén completamente separados. Quiero preocuparme únicamente de redactar el contenido y dejar que sea el software el que se preocupe, de la forma más automátizada posible, de generar el resultado final con los formatos y efectos de visualización correspondientes.
Una alternativa que he descubierto hace no mucho es Reveal.js, una web desarrollada por Hakim El Hattab que con HTML, CSS y JavaScript acaba siendo un framework cojonudo para hacer de forma sencilla espectaculares presentaciones. El resultado final es una web que podemos abrir desde un navegador. Además, podemos exportar el resultado a pdf, para compartirla más facilmente en plataformas como Slideshare o Speakerdeck.
Lo mejor en estos casos es ver una demo, así que allá van:
- La propia web del producto, donde podemos ver un rápido resumen de sus posibilidades
- Mi primera presentación, con un aspecto más “corporativo”
- Resultado en PDF de la exportación de mi presentación
- Y muchas más que podemos ver en su página de Github …
Como utilizar Reveal.js
Es realmente sencillo:
- Descargamos el zip con el código (la versión original de Hakim o la mía)
- Ponemos el HTML (o Markdown, lo que resultará seguramente bastante más legible) que corresponda a cada diapositiva entre etiquetas
<section>dentro después de<div class="slides"> - Visualizamos el resultado con un navegador
Como ejemplo, el código que corresponde a las dos primeras diapositivas de mi demo sería
<section>
<h2>Instalación y arranque de la máquina virtual de Tegnix</h2>
<div class="autor">
<p>@ José M. Ciges - <a href="http://www.ciges.net">Ciges.net</a></p>
<p style="font-size: small;">Licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Reconocimiento-CompartirIgual 3.0</a></p>
<img style="border: 0 none" src="images/logoCC.png">
</div>
</section>
<!-- ------------------ Diapositiva ------------------ -->
<section>
<h3>Pasos a seguir</h3>
<ul>
<li>Descargar el paquete OVA con la máquina virtual desde <a href="https://miservidor.com/files/Aula_Tegnix.ova"><code style="font-size: 60%;">https://miservidor.com/files/Aula_Tegnix.ova</code></a>
<li class="fragment">Instalar VirtualBox (u otro) desde <a href="http://www.virtualbox.org"><code>www.virtualbox.org</code></a>
<li class="fragment">Importar el servicio virtualizado
<li class="fragment">Arrancar la máquina e iniciar sesión con el usuario <em>estudiante</em> y clave <em>estudiante</em>
</ul>
</section>
Mas información sobre sintaxis y creación de efectos en la demo de Hakim y en readme de su repositorio en Github
Mejorando la exportación a PDF
Yo he hecho algunas modificaciones sobre el código para mejorar la exportación a PDF, en particular centrar verticalmente las diapositivas y permitir la inserción de una cabecera en todas las páginas.
Podeis descargar el fork desde este repositorio en Github
Comentarios
Otra opción es escribir un fichero en markdown y convertirlo a Reveal.js con pandoc (en las últimas versiones de pandoc, en las anteriores hay menos tipos de diapositivas html).
En [1] puedes ver como con:
pandoc -s —mathjax -i -t revealjs SLIDES -o example16d.html
produces esta [2] presentación en reveal.js (Más detalles en [3])
Para dar un aspecto “corporativo” veo en [4]
Styling the slides
For reveal.js, themes can be used by setting the theme variable, for example:
-V theme=moon
Or you can specify a custom stylesheet using the —css option.
Si pruebas esto último, ya contarás.
[1] http://johnmacfarlane.net/pandoc/demos.html
[2] http://johnmacfarlane.net/pandoc/demo/example16d.html
[3] http://johnmacfarlane.net/pandoc/demo/example9/producing-slide-shows-with-pandoc.html
[4] http://johnmacfarlane.net/pandoc/README.html
He visto, en un comentario de barrapunto, markdownslides. Opción bastante interesante. En la repositorio nos describe: “ MarkdownSlides es un generador de slides Reveal.js, Deck.js y PDF a partir de ficheros MARKDOWN, que también genera documentos HTML, ODT y DOCX”
Lo que no he visto es si hay posibilidad de darle un aspecto “corporativo”
impress.js es otra herramienta basada en CSS3 transforms e inspirada en prezi.com
Las diapositivas están situadas en un plano y el foco se desplaza y gira hacia donde se encuentren (incluso en 3D)
Es bastante vistoso
Añadir comentarios ...