Creando un sitio web tipo presentación con reveal.js

Día 21 del reto #30díasdeblog y para hoy, domingo de #Tech, he decidido contarles sobre un proyecto que recién estoy terminando y está pronto a ser lanzado, un sitio web desarrollado utilizando reveal.js.

Introducción

Desde hace unos meses soy colaborador del equipo de Comunicación de Amistad Cristiana Madrid y con la situación del COVID-19, como iglesia hemos necesitado aprovechar lo que la tecnología nos ofrece, además de utilizar la creatividad y talentos del equipo para mantener las operaciones de la iglesia y seguir en contacto con las personas del barrio y de la comunidad, ya que la iglesia aún no puede abrir para tener reuniones.

Quiero hacer un reconocimiento y una mención especial a los miembros del equipo: Jailida, Ahmed, Carol, Dan, Dave (el Champs) y para este proyecto en especial a Hefzi y Loida quienes aportaron con el desarrollo de la historia y la edición del texto respectivamente.

El sitio web (a.k.a. web de alcance)

Una de las iniciativas que surgió, para poder seguir en contacto con la comunidad, ha sido crear una campaña que pueda ayudar a las personas del barrio a encontrar Esperanza y Paz en estos tiempos tan difíciles e inciertos. La idea para esta campaña es promocionar el mensaje desde el escaparate de la iglesia, un sitio web y haciendo promoción en redes sociales.

Me ofrecí a trabajar en el desarrollo de un sitio web, al que llamamos web alcance, que permitiera llevar el mensaje de una forma creativa, fresca y diferente. Para ello sugerí crear el sitio web como una presentación de diapositivas interactiva, que incluyera ilustraciones llamativas, el mensaje que queremos enviar y al menos una manera en que la persona que viera la web, pudiera contactar a la iglesia si así lo deseaba o necesitaba. Sugerí hacerlo de esta forma porque tenía mucho interés en crear algo de ese tipo utilizando reveal.js.

El proceso creativo

Para poder crear el sitio web aprovechamos cada uno de los talentos de las personas del equipo. Luego de una serie de ideas que surgieron de distintos miembros del equipo y que decidimos presentar el contenido en un formato tipo historia narrativa ilustrada, Ahmed y Hefzi se pusieron manos a la obra.

Ahmed es un crack en temas de diseño (entre otras cosas), todo la parte visual, ilustraciones, colores, formatos, etc. fue creado por él junto con su equipo. La narrativa de la historia fue creada por Hefzi.

Cuando ya estaba desarrollado el primer MVP de la historia en formato de presentación, era el momento de ponerse manos a la obra y crear el website.

Desarrollando el sitio web con reveal.js

reveal.js, es un framework open source para crear presentaciones en formato HTML. Es una herramienta que permite a cualquier persona con conocimientos de HTML y CSS crear presentaciones originales. A diferencia de una presentación en Powerpoint, una presentación hecha con reveal.js, como es HTML, puede ser alojada en cualquier servidor de hosting e incluso tener su propia URL, para que sea fácilmente compartida y vista desde cualquier dispositivo con conexión de Internet, al igual que cualquier otro sitio web.

Para un proyecto como el que queríamos desarrollar, existen 2 formas para instalar reveal.js:

• Configuración básica: para principiantes o desarrolladores sin mucho conocimiento técnico, es la forma más fácil de comenzar, sólo requiere que tengas un navegador, no es necesario configurar ninguna herramienta de compilación.
• Configuración completa: para desarrolladores más experimentados, requiere que instales y configures un servidor web, además de las herramientas de compilación necesarias para realizar cambios en el código fuente de revelar.js.

Al iniciar, decidí utilizar la configuración básica para poder hacer rápidamente un MVP. Posteriormente tuve que evolucionar a la configuración completa para finalizar algunos ajustes del sitio web de alcance.

Para la configuración básica sólo necesitas descargar el código fuente de reveal.js, que puedes descargar desde aquí, descomprimir el contenido y abrir el archivo index.html para verlo desde tu navegador. Puedes hacer cambios en el contenido de los slides e irlos previsualizando en el navegador.

reveal.js tiene por defecto muchos temas que puedes usar de inmediato simplemente cambiando la hoja de estilo principal en la línea 11 del archivo index.html.

11 <link rel="stylesheet" href="dist/theme/black.css" id="theme">

Dependiendo de como quieres crear tu presentación, puedes seleccionar de los temas por defecto que trae reveal.js o crear el tuyo personalizado.

Para crear la web de alcance era necesario personalizar el tema, si te encontraras en una situación similar, simplemente hay que duplicar uno de los temas de la carpeta `css / theme / source` y agregar/modificar los estilos según lo necesitas, incluyendo tipos de fuente, colores, etc.

A partir de ahí ya depende del diseño que quieras para tu presentación, agregar las diapositivas y sus contenidos respectivamente en el archivo index.html, todo utilizando HTML y CSS.

Para agregar un slide, utilizas el tag <section>.

<section>Contenido de la Slide</section>

Cuando inicié a escribir este artículo no tenía pensado escribir una guía completa, sin embargo tenía la intención de brindar una pincelada de como empezar con reveal.js además de contarles sobre mi experiencia y mostrarles el resultado final de la web de alcance.

Si tienes conocimientos básicos en HTML y CSS, te invito a experimentar cuando prepares tu próxima presentación y así sorprendas a tu audiencia cuando tu presentación no sea un Power Point.  

No puedo terminar este artículo sin compartirles el resultado final de la web de alcance, les confieso que estoy muy satisfecho con el resultado, es una de esas veces dónde es justo lo que imaginaba o incluso mejor de lo que pensaba que podía ser cuando propuse la idea en un principio. Puedes visitarla a través del enlace que coloco debajo de la imagen.

Espero que con lo que he compartido sobre reveal.js y mi experiencia, te animes a probarlo.

Y así, completo el día 21 del reto #30díasdeblog✍️.

Un abrazo!

P. D.: Este artículo tiene 1039 palabras.