source 'https://rubygems.org'
gem 'asciidoctor-revealjs'| Este post es la continuación a intro-asciidoctor-3.html |
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. |
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:
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 |
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
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. |
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: leaguey 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
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
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
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
--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 tituloMuchas 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 yoEn esta página encontrarás todas las funcionalidades posibles con este backend: https://asciidoctor.org/docs/asciidoctor-revealjs/#syntax-examples
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:
2019 - 2024 | Mixed with Bootstrap | Baked with JBake v2.6.7