Creando presentaciones en HTML

por:

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:
Te ensañamos a crear presentaciones online con reveal reveal.js

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:
Nuestra primera diapositiva en reveal

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

y una tercera en nuestro grupo horizontal:
la tercera diapotiva con reveal

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.

The following two tabs change content below.

Jorge Durán

Administrador, redactor y creador de Somos Binarios
Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL y .Net backend developer en idealista.

2 comentarios en “Creando presentaciones en HTML”

  1. txungo87

    Esta muy bien hasta que ves que para hacer un uso interesante del asunto tienes que pagar mensualmente. Es la norma habitual, lo sé, pero aparte de probarlo, no ves qué uso le puedes dar como usuario, fuera de una empresa, sin querer meterte en suscripciones de esto y lo otro.

    Y conste que me gusta, me gusta mucho su simplicidad, el diseño que puedes implementar lejos ya del Power Point de toda la vida que se te queda corto. Pero atarme a suscripciones no es lo mío por ahora 🙁

    Responder
    • SomosBinarios

      Creo que te refieres al editor online. Siempre puedes hacerlo vía código, clonando el repositorio y haciendo todas las diapositivas que quieras.

      Responder

Deja una Respuesta