| | 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 asciidoctorpor supuesto).
| | El objetivo es poder exponer de forma rápida y sencilla cualquier idea que tengasy quieras transmitir, tanto a un público "cercano", como compañeros, tu jefe, tu profesor, etco 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 integraren 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 Gemfilepara 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 Gradleque 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 necesidadde tener ningún conocimiento de maquetación, html, css o javascript. Simplemente escribiendo en un fichero de textoy 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 decada 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 profundidadqueramos |
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" ymá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 loque 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íhttps://jorge.aguilera.soy/blog/2020/revealjs/uno.html
Prueba a cambiar el atributo revealjs_theme del documento con alguno de los valores indicados y vuelve a generarla 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 conceptosa exponer de forma anidada, navegando entre los conceptos principales con las flechas derecha-izquierda ylos 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 https://jorge.aguilera.soy/blog/2020/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 enumeraralguna 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 fotoa 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 explicandouna a una para que el público nos preste atención y no se pongan a leer todas de una vez. Para ellousaremos %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 conuna presentación Asciidoctor (lo cual no quiero decir que haya que hacerlo. Ya sabes, a veces menos, es más):
https://bentolor.github.io/java9to13/#/
O esta otra más minimalista:
https://puravida-software.gitlab.io/slides/doc-as-code.html#/
Top comments (0)