Creando presentaciones en HTML

De un tiempo a esta parte, están surgiendo gran cantidad de proyectos que buscan aprovechar las características que ya incorporan los navegadores modernos y los proyectos de HTML y JavaScript para salirse de la zona de confort. Esto es dejar de utilizarlos solo para hacer aplicaciones web o páginas web y explotar otros usos que se le puedan dar.

Reveal el framework de las presentaciones en HTML

Después de buscar algo más moderno y que se pudiera usar en cualquier plataforma dí con Reveal. Reveal es un proyecto que nos va a permitir crear diapositivas, como las de un Power Point de toda la vida, pero en HTML y esto trae gran cantidad de ventajas:

• Se pueden reproducir sin necesidad de un software auxiliar.
• Se pueden ver desde todo tipo de dispositivos: ordenadores, tablets, móviles etc.
• Permite integrar cualquier cosa que sea posible usar en HTML, por lo que añade elementos que Power Point no tiene, como gráficas dinámicas, iframes, imágenes svg etc.

Bueno muchos pensaréis, todo esto es muy bonito, pero ya sabemos como son estos proyectos, muy bonitos, prometen mucho, pero luego cuando los usas se ven que están todavía muy verdes. En este caso, aunque si es cierto que algunas características no están del todo pulidas, si que puedo decir que es perfectamente usable a día de hoy.

Empezando a crear nuestra presentación

Lo primero que debemos hacer para empezar a crear nuestra presentación es decidir si vamos a usar el editor online de presentaciones, que ya tienen o si preferimos tocar el código.

Si eres de la primera opción ellos recomiendan este servicio

Si por el contrario quieres tocar código, lo único que tienes que hacer es clonar su repositorio de GitHub.
Una vez clonado, verás una presentación ya hecha donde te va enseñando en cada una de las diapositivas, las cosas que se pueden hacer con este framework.

La manera de entender como funciona es sencilla, podemos seguir las instrucciones de su repositorio o abrir las herramientas de desarrollador, e ir viendo el HTML de la presentación:

En este caso vemos que tenemos una etiqueta section y dentro de ella hay tres sections, esto nos permite tener un conjunto de diapositivas dispuestas horizontalmente. Por ejemplo podemos hacer un grupo de diapositivas sobre los inicios con Reveal.

Primera diapositiva:

Ahora si pulsamos la tecla de la flecha hacia abajo, vamos a nuestra segunda diapositiva del grupo:

y una tercera en nuestro grupo horizontal:

Así tendríamos creado nuestro grupo de diapositivas sobre una misma temática en horizontal, ahora si queremos cambiar a otra parte de la explicación, podemos añadir diapositivas a la izquierda.

Con esta entrada no intentamos abordar todo el framework sino enseñar un poco cómo funciona, los fundamentos y demostrar que las tecnologías web cada día están mas presentes, para desbancar al software de escritorio que hemos venido usando los últimos años.