Presentaciones con Reveal.js y HTML5: Mejor que PowerPoint

¿Las presentaciones son de PowerPoint, dices? Bueno, piénsalo de nuevo. La mayoría de las personas que conozco comienzan a bostezar tan pronto como se menciona PowerPoint. No quieres que tus clientes bostecen. Si te gusta hacer una presentación con tu Android o iPad, incluso necesitarás herramientas adicionales para poner en marcha un PPT. Como somos desarrolladores web, ¿por qué no usar el excelente marco de JavaScript Reveal.js, que me llamó la atención? Reveal.js le permite crear sus presentaciones como un sitio web, por lo que todo lo que necesita para presentar es un navegador.

Reveal.js: La presentación de demostración

Revelar.js consta de un solo archivo JavaScript y dos hojas de estilo. La primera hoja de estilo define algunos estilos comunes, mientras que la segunda contiene el diseño de un tema estándar sobre el que puede desarrollar. Este tema define el aspecto de las partes importantes de sus presentaciones, ya que hay texto, imágenes y enlaces. Los temas en Reveal.js se pueden personalizar fácilmente ya que la hoja de estilo está muy bien estructurada y es fácil de comprender. Las transiciones entre diapositivas, si desea utilizar esta magia, se establecen a través de transiciones CSS 3D.

Marcado de diapositivas a través de HTML5

El marcado de las diapositivas de la presentación se realiza mediante el uso de elementos HTML5 del tipo SECCIÓN. Encima de estas secciones tenemos dos contenedores que indican el marco, donde comenzará la parte de presentación dentro del documento HTML:

<div class="reveal">
  div class="slides">
    <section>
      <p>Folie 1</p>
    </section>
    <section>
      <p>Folie 2</p>
    </section>
  </div>
</div>

Dentro de cada sección se permite contenido arbitrario. Navegas usando las teclas de flecha. Incluso puede anidar secciones entre sí. De esa manera podría segmentar aún más su presentación. El uso de las teclas de flecha izquierda y derecha le permite navegar a través de las secciones del primer nivel. Al llegar a una sección anidada, las flechas hacia arriba y hacia abajo se activan y le permiten desplazarse por las secciones del segundo nivel:

<div>
  div>
    <section>
      <p>Folie 1</p>
    </section>
    <section>
      <section>
        <p>Folie 2 a</p>
      </section>
      <section>
        <p>Folie 2 b</p>
      </section>
    </section>
  </div>
</div>

Al presionar ESC se muestra un índice de todas las diapositivas desde donde puede orientar cada diapositiva individualmente.

Reveal.js: navegación extendida posible

Si desea habilitar la navegación con el mouse además del control del teclado, puede hacerlo implementando un pequeño elemento operativo en su presentación. Para lograr la navegación con el mouse, integra un pequeño fragmento de código en el contenedor justo después de la definición de las diapositivas. Verá un elemento de control que muestra las cuatro direcciones simbolizadas por sus respectivas teclas de flecha en la parte inferior derecha de la ventana del navegador. En presentaciones largas, es posible que le guste que se muestre una barra de progreso, solo para asegurarse de no perderse o doblar demasiado su tiempo de conversación. Nuevamente, esto es solo una línea de código. La barra de progreso aparece en la parte inferior horizontal. Su posición representa la posición de la diapositiva activa en toda la presentación.

Reveal.js: capaz de rebajar

Esta es para mi. En lugar de usar HTML para diseñar el contenido de sus diapositivas, también puede usar la sintaxis simple de Markdown. Lo uso todo el tiempo. Este artículo está escrito en Markdown. Reveal.js simplemente traducirá su Markdown a HTML. Ventaja: un contenido en Markdown es mucho más fácil de mantener ya que no tiene que buscar el contenido dentro de todas esas etiquetas de apertura y cierre.

<section>
  ##Heading H2

  Paragraph with https://www.noupe.com/development/presentations-with-reveal-js-html5-better-than-powerpoint-72609.html(https://www.noupe.com)
</section>

Conclusión: Revelar.js es un marco sólido para armar presentaciones basadas en navegador de alto grado. Combinado con la API de pantalla completa de JavaScript, los resultados son más que competitivos para Powerpoint, bostezo …

(dpe)