Publicado el 14 de noviembre de 2017 por Guillermo en Software libre, Transformación digital
Durante muchos años he utilizado LibreOffice Impress (y, anteriormente, Apache OpenOffice Impress), una alternativa libre a Microsoft Power Point y Prezi, pero perdía mucho tiempo personalizando las presentaciones, nunca quedaban como quería y parte de su contenido se desajustaba cuando las abría en equipos sin LibreOffice. Hace poco descubrí reveal.js, un framework de código abierto para crear presentaciones en HTML, y decidí probarlo para mi presentación en las X Jornadas Archivando sobre los archivos en los videojuegos. Hoy te cuento qué me ha parecido reveal.js y cómo puedes empezar a utilizarlo tú también aunque no sepas HTML.
Como habrás observado si has abierto mi presentación, una de las características de las presentaciones realizadas con reveal.js es que se abren con un navegador y no necesitan la instalación de software adicional. Esto previene posibles problemas de compatibilidad entre programas e, incluso, versiones del mismo programa. ¿Cuántas veces no se ha desplazado el contenido, se ha modificado la fuente o se han perdido funcionalidades de tu presentación al abrirla en un equipo diferente al que usaste para crearla?
Una presentación realizada con reveal.js se compone de un fichero HTML (donde está estructurado todo el contenido) y las imágenes, hojas de estilo y ficheros JavaScript enlazados en el HTML. Una consecuencia de que el navegador pueda leer directamente estos ficheros es la posibilidad de subir la presentación a una página y reproducirla accediendo al enlace del fichero HTML. En otras palabras, reveal.js es una tecnología orientda a crear presentaciones online de manera fácil. Esto es muy útil si realizamos presentaciones fuera de nuestro lugar de trabajo habitual o si tenemos nuestra propia página web y queremos mostrar una presentación a nuestros visitantes, por poner dos ejemplos.
Este framework viene con más de 10 hojas de estilos CSS y admite nuevas hojas de estilos (por ejemplo, podemos desarrollar un tema adaptado a nuestro manual de identidad corporativa). Los estilos proporcionados de serie son limpios y se adaptan fácilmente.
reveal.js permite usar varios tipos de transiciones, anidar diapositivas en vertical, añadir imágenes y colores de fondo, insertar listas, insertar contenido multimedia, hacer zoom y visualizar tablas, fórmulas matemáticas y código fuente. Otras funcionalidades muy interesantes son la exportación a PDF, la compatibilidad con Markdown y la inclusión de notas para el presentador.
Contrariamente a lo que aparenta, crear una presentación en HTML es bastante fácil y permite ahorrar mucho tiempo una vez se conoce el framework. No obstante, reveal.js cuenta con un editor visual online para las personas que no se sientan cómodas escribiendo código.
¿Listo para crear tu primera presentación en HTML? Visita el repositorio oficial del proyecto y descárgalo en ZIP.
El siguiente paso es descomprimir el archivo. Observarás que el framework cuenta con varios ficheros y subdirectorios. Vamos a trabajar sobre el fichero index.html.
El siguiente paso es completar los datos de la cabecera del HTML.
Especificamos en la segunda línea en qué idioma está la presentación (español, en este caso):
<html lang="es">
En la línea del título, cambiamos el texto que trae por defecto por el título de nuestra presentación:
<title>Los archivos en los videojuegos</title>
También podemos añadir la descripción y la autoría:
<meta name="description" content="Los archivos en los videojuegos: La representación de los archivos en Fallout 3 y Guild Wars 2">
<meta name="author" content="Guillermo Castellano">
Otro elemento al que debemos prestar atención es la hoja de estilos a la que está enlazando este fichero. Elegimos el tema que queramos del directorio /css/theme/. Podemos probar estos temas en el fichero demo.html. En este caso, elegimos la hoja de estilos moon.css.
<link rel="stylesheet" href="css/theme/moon.css" id="theme">
Cada diapositiva se abre con <section> y se cierra con </section>. Todo el contenido que escribamos entre ambas etiquetas se mostrará en una única diapositiva:
<section>
<h1>Los archivos en los videojuegos</h1>
<h4>La representación de los archivos en Fallout 3 y Guild Wars 2</h4>
<p>
<small>Guillermo Castellano / <a href="http://twitter.com/guillearch">@guillearch</a></small>
<small>Jornadas Archivando: Retrospectivas de futuro (León, 2017)</small>
</p>
</section>
A continuación vemos un ejemplo de cómo se visualizaría el código anterior en el navegador:
reveal.js ofrece la posibilidad de anidar diapositivas para que naveguemos por ellas verticalmente. Esta funcionalidad resulta muy interesante para estructurar contenido.
Para anidar dos o más diapositivas, únicamente tenemos que insertarlas dentro de las etiquetas </section> y </section>. Por así decirlo, es como si creáramos una diapositiva formada por diapositivas. En el ejemplo a continuación anidamos las cinco diapositivas que forman parte del apartado de conclusiones de la presentación:
<section>
<section>
<h2>Conclusiones</h2>
</section>
<section>
<h2>Archivos</h2>
<p>
Hay un enfoque historicista que subraya la importancia de los archivos para la preservación de la memoria colectiva, pero invisibiliza el trabajo que los archiveros realizan fuera de los archivos históricos. Se echa en falta un tratamiento diferenciado del archivo, la biblioteca y el museo.
</p>
</section>
<section>
<h2>Documentos</h2>
<p>
Un tema que los dos juegos abordan de manera muy lograda es la variedad de soportes que se trabaja en los archivos y los problemas de conservación planteados por cada uno de ellos.
</p>
</section>
<section>
<h2>Archiveros</h2>
<p>
Los archiveros no existen en <i>Fallout 3</i> y, en <i>Guild Wars 2</i>, cumplen bastantes de los estereotipos negativos sobre la profesión. La sociedad continúa viendo a los archiveros como una barrera entre el usuario y el documento y esto se refleja en los videojuegos.
</p>
</section>
<section>
<h2>Algo más que un decorado</h2>
<p>
Los archivos son escenarios elaborados con los que el jugador debe interactuar para avanzar en la trama y para obtener más información sobre el trasfondo del juego. Se muestran ante él como una institución fundamental para comprender mejor su realidad.
</p>
</section>
</section>
Como hemos visto más arriba, los títulos se insertan entre las etiquetas <h> y </h>, más conocidas como “header”.
Para un título principal, podemos utilizar las etiquetas <h1> y </h1>, mientras que para un título secundario o subtítulo podemos utilizar las etiquetas <h2> y </h2> y <h4> y </h4>, respectivamente:
<h1>Los archivos en los videojuegos</h1>
<h4>La representación de los archivos en Fallout 3 y Guild Wars 2</h4>
Te recomiendo que experimentes con varios tamaños de “header” para encontrar el que mejor se ajuste a la diapositiva que quieres construir.
El texto se inserta entre las etiquetas <p> y </p>. El código a continuación muestra una diapositiva compuesta por un subtítulo y un texto:
<section>
<h2>Algo más que un decorado</h2>
<p>
Los archivos son escenarios elaborados con los que el jugador debe interactuar para avanzar en la trama y para obtener más información sobre el trasfondo del juego. Se muestran ante él como una institución fundamental para comprender mejor su realidad.
</p>
</section>
A continuación vemos un ejemplo de cómo se visualizaría el código anterior en el navegador:
También puedes utilizar las etiquetas <small> y </small> para insertar texto más pequeño, como en el ejemplo que hemos visto más arriba.
Para insertar una imagen tenemos que utilizar la etiqueta <img src=””> y escribir la ruta de la imagen entre las dos paréntesis:
<section>
<h2>Un videojuego multijugador masivo</h2>
<img src="img/google-trends-mmorpg.png">
</section>
A continuación vemos un ejemplo de cómo se visualizaría el código anterior en el navegador:
También es posible establecer una imagen como fondo de la diapositiva añadiendo data-background=”” a la etiqueta <section> y escribiendo la ruta de la imagen entre las dos paréntesis:
<section data-background="img/national-archives-fallout-3.jpg">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff;position:relative;top:600px">
<p>Fachada de los Archivos Nacionales</p>
</div>
</section>
A continuación vemos un ejemplo de cómo se visualizaría el código anterior en el navegador:
Una de las ventajas que ofrece reveal.js es que podemos enlazar tanto una imagen que tengamos en nuestro equipo como una imagen disponible en internet. Si insertas una imagen disponible en tu equipo, tienes que copiarla primero en el directorio /img del framework. A la hora de insertar la ruta, indica la ruta relativa (su ruta dentro del framework) en vez de su ruta absoluta (su ruta dentro de tu equipo) para que funcione correctamente cuando subas la presentación a la red.
Para insertar una lista tenemos que crear una lista con las etiquetas <ul> y </ul> e insertar cada elemento de esa lista entre las etiquetas <li> y </li>:
<h2>Conclusiones</h2>
<ul>
<li>La finalidad de los archivos en <i>Fallout 3</i> es preservar la historia de las instituciones: son un "instrumento de hegemonía" (Terry Cook).</li>
<li>Desaparición de las fronteras entre el archivo, la biblioteca y el museo.</li>
<li>Mayor durabilidad de las microformas con respecto al papel y los soportes ópticos o magnéticos.</li>
<li>Funciones propias del archivero como la clasificación, la eliminación y la difusión no están representadas.</li>
</ul>
A continuación vemos un ejemplo de cómo se visualizaría el código anterior en el navegador:
Aunque las presentaciones realizadas con reveal.js se pueden visualizar en local (para ello, únicamente tendremos que abrir el fichero HTML con el navegador), también podemos subir la presentación a una página web vía FTP, utilizando software libre como FileZilla.
Un método alternativo consiste en crear un sitio web dentro de GitHub de manera totalmente gratuita y alojar allí la presentación. Para subir la presentación, deberás usar git o la interfaz gráfica del repositorio remoto.
Lo más importante de este proceso es que, cuando subas la presentación, subas todo el directorio donde está el fichero HTML, incluyendo el contenido enlazado dentro del mismo. Si no tienes muchos conocimientos técnicos, te recomiendo que únicamente modifiques el fichero index.html que viene en el framework, añadas las imágenes necesarias al directorio /img y subas todo el framework con los cambios realizados.
Dijo Julio Cerdá durante su intervención en las X Jornadas Archivando que “hay dos tipos de personas: las que sólo hacen lo que saben hacer y las que sólo hacen lo que no saben hacer”. Como él, me englobo dentro del segundo grupo y te animo sinceramente a probar reveal.js aunque nunca hayas tocado un fichero HTML ni sepas cómo demonios funcionan FTP o git. El resultado merece mucho la pena y, una vez estés acostumbrado a trabajar con este framework libre y de código abierto, verás que te permite ahorrar tiempo y beneficiarte de otras muchas ventajas.
Pese a todo, es posible que no te sientas cómodo en absoluto escribiendo código y prefieras un editor visual. Si es el caso, el desarrollador de reveal.js pone a tu disposición un editor visual online, gratuito a condición de que compartas la presentación. Si la presentación no se puede ver públicamente por cualquier motivo, es posible utilizar el editor desde 5 USD al mes.
Puedes consultar el código completo de la presentación escogida de ejemplo en mi repositorio de GitHub.
Puedes obtener más información sobre reveal.js en la documentación oficial del proyecto.
Espero que esta entrada te haya resultado útil y, como siempre, te animo a compartir en la sección de comentarios tus dudas o sugerencias.
Sos un genio! Tu blog es lo mas!!! Saludos dsd Argentina!