Introducción a Asciidoc y Asciidoctor (4): crear una presentacion

Este post es la continuación a intro-asciidoctor-3.html

Objetivo

En este post veremos cómo crear una presentación usando sólo un editor de texto (y asciidoctor por supuesto).

El objetivo es poder exponer de forma rápida y sencilla cualquier idea que tengas y quieras transmitir, tanto a un público "cercano", como compañeros, tu jefe, tu profesor, etc o publicarlo en Internet bien como un documento HTML o incluso como un pdf en Slides o similar.
Aquí para ver la versión HTML y aquí puedes ver aquí el fichero para construirlo (texto plano)

Instalación (sólo 1 vez)

En el primer post indicamos algunas de las formas que puedes usar para ejecutar asciidoctor, bien sea usando la versión ruby (la más popular), bien usando la versión java (que puedes integrar en tu aplicación como librería), etc.

Para este ejemplo vamos a usar la versión ruby por lo que tendrás que tener instalada esta versión. Por ejemplo si usas una distribución Linux con apt puedes ejecutar:

$ sudo apt-get install asciidoctor

Lo siguiente, en el directorio que reservemos para nuestras presentaciones crearemos un fichero Gemfile para descargar las dependencias necesarias para poder crear presentaciones:

Gemfile
source 'https://rubygems.org'

gem 'asciidoctor-revealjs'

y preparemos nuestro directorio

$ bundle config --local github.https true
$ bundle --path=.bundle/gems --binstubs=.bundle/.bin
Si por ejemplo optas por usar AsciidoctorJ (Java), existe un plugin para Maven y otro para Gradle que hace que todo esto sea innecesario y mucho más sencillo.
Aún más sencillo. Aunque no tengas conocimientos de programación, si tienes java instalado en tu máquina, puedes descargarte esta plantilla con todo lo necesario para empezar a crear tus presentaciones: https://gitlab.com/jorge-aguilera/presentation-template

Reveal JS

El backend de presentaciones revealjs, como su nombre indica, lo que va a usar es este famoso framework Javascript para , partiendo de un documento .adoc, generar un .html con el javascript necesario incluido en él, pero sin necesidad de tener ningún conocimiento de maquetación, html, css o javascript. Simplemente escribiendo en un fichero de texto y usando los atributos asciidoctor del documento, podremos configurar el resultado, etc

Estructura

La idea básica del backend revealjs es que cada sección del documento corresponderá a una slide y el contenido de cada sección será renderizado en esta, siendo la primera sección reservada a la slide de presentación

Recuerda que una sección se crea comenzando una línea con '=' tantas veces repetidos como nivel de profundidad queramos

Básicamente en una slide insertaremos:

  • Párrafos de textos

  • Listas ordenadas o desordenadas de items

  • image, video

  • tabla con datos

  • una imagen de fondo

Así mismo querremos que nuestra presentación sea un poco amena y que las transiciones entre slides tengan algún efecto

A continuación vamos a ir viendo cada uno de estos elementos paso a paso.

Según vayas practicando a crear presentaciones irás descubriendo que cada vez pierdes menos tiempo en "cómo queda" y más en estructurar y mejorar el contenido.

Primera iteración, la portada

Lo primero que vamos a hacer es crear la primera slide de presentación. Nuestra charla va a ser sobre XXXXXX por lo que crearemos al inicio del documento la primera sección:

= XXXXX : YYYYY
jorge.aguilera@puravida-software.com
#elije uno de: beige, black, league, night, serif, simple, sky, solarized, white
:revealjs_theme: league

y generamos nuestra primera iteración:

bundle exec asciidoctor-revealjs -a revealjsdir=https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0 charla.adoc

(donde charla.adoc es el nombre del fichero que estés creando para tu charla)

Si todo ha ido bien tendrás un fichero HTML que puedes abrir con el navegador, y ver algo así revealjs/uno.html

Prueba a cambiar el atributo revealjs_theme del documento con alguno de los valores indicados y vuelve a generar la presentación. Verás que el tema se aplica y siendo la misma presentación el diseño cambia

Slides y "subslides"

Como hemos mencionado antes, cada slide se define por una sección con '=='. Además RevealJS nos permite crear "subslides", o slides verticales, usando subsecciones con '==='. De esta forma podemos organizar los conceptos a exponer de forma anidada, navegando entre los conceptos principales con las flechas derecha-izquierda y los subconceptos con las flechas arriba-abajo.

= Titulo : subtitulo
:stem:

== Introducción

aqui la introducción

== Concepto 1

Concepto1 lo podemos explicar en subslides

=== Primera parte

Primera parte de concepto 1

- planificar
- definir
- revisar
- morir de inanicción

=== Segunda parte

Segunda parte de concepto 1

stem:[x^2=y^2]

== Concepto 2

.Una tabla
|===
|Column heading 1 |Column heading 2

| Un texto
a|latexmath:[a^2+b^2=c^2].

| Otro texto
a|latexmath:[k_{n+1} = n^2 + k_n^2 - k_{n-1}].
|===

Aquí como se vería esta presentación revealjs/dos.html

prueba a pulsar Esc en la presentación y verás lo que pretendo transmitirte

El contenido de las slides puede ser muy variado. Desde párrafos de textos, listas, tablas, imágenes, e incluso fórmulas matemáticas, como puedes ver en el ejemplo anterior

Funcionalidades

Una vez vista la idea principal de cómo generar slides con asciidoctor + revealjs vamos a enumerar alguna de las funcionalidades que se pueden hacer

Notas para el orador

Podemos añadir notas visibles en una ventana aparte mediante un bloque .notes

== Concepto
Este concepto es muy denso para explicarlo

[.notes]
--
Lo que va entre estos guiones solo lo ve el orador en una venta aparte
--

Slides sin título

Algunas veces queremos que la slide no contenga título, tal vez porque queremos poner una foto a pantalla completa.

Simplemente etiquetamos el título con %notitle

[%notitle]
== Esta slide va sin titulo

Listas animadas

Muchas veces queremos mostrar una lista de pasos a ejecutar, ideas, etc pero queremos ir explicando una a una para que el público nos preste atención y no se pongan a leer todas de una vez. Para ello usaremos %step

== Mis ideas para el 2020
[%step]
- Aparece la primera y no se ven las siguientes
- Al pulsar una tecla aparezco con una animación
- Si sigues pulsando teclas aparezco yo

Más funcionalidades

En esta página encontrarás todas las funcionalidades posibles con este backend: https://asciidoctor.org/docs/asciidoctor-revealjs/#syntax-examples

Ejemplos completos

En esta presentación puedes encontrar (casi) todos los elementos y efectos que puedes hacer con una presentación Asciidoctor (lo cual no quiero decir que haya que hacerlo. Ya sabes, a veces menos, es más):

O esta otra más minimalista:

Follow comments at Telegram channel

2019 - 2020 | Mixed with Bootstrap | Baked with JBake v2.6.4