Funcionalidades
- Generador de plantillas para obtener distintos diseños visuales.
- Servidor de previsualización.
- Exportación de HTML autocontenido.
- Conversión automatizada a formato PDF.
- Soporte de presentaciones múltiples.
Bases
Este software se basa en Remark.js y Markdown. Utiliza DeckTape para exportar la presentación a un archivo PDF.
Para generar estilos usa Sass, el cual es un lenguaje compatible con CSS que permite usar variables y funciones, anidar y mezclar reglas, etc.
Para el servidor de previsualización usa node.
Instalación
La instalacíón se hace sencillamente con el gestor de paquetes de javascript npm:
npm install backslide
En mi caso prefiero instalarlo como usuario común y no como root, no obstante hay que tener en cuenta luego de que esté en la variable PATH. Por ejemplo:
ln -s $HOME/node_modules/backslide/bin/bs $HOME/.local/bin/bsa
Creación de dispositivas
Para comenzar a crear nuestra presentación es necesario ejecutar el siguiente comando:
bs init
Este comando generará un árbol de archivos como el siguiente:
.
├── presentation.md
└── template
├── index.html
├── remark.min.js
└── style.scss
1 directory, 4 files
- El contenido lo generaremos editando el archivo
presentation.md
Por ejemplo:
title: Linux Operador C1
class: animation-fade
layout: true
<!-- This slide will serve as the base layout for all your slides -->
.bottom-bar[
{{title}}
]
---
background-image: url(assets/imgs/a-1644824-unsplash.jpg)
class: impact
# {{title}}
## Permisos, tuberías y redireccionamiento
---
## Otra Slide
- item 1
- item 2
- item 3
---
## Otra Slide
- item 1
- item 2
- item 3
--
- item 4
- item 5
- item 6
El directorio template contiene:
-
styles.scssLa hoja de estilos en Sass
-
remark.min.jsLa copia offline de Remark.js
- El archivo html que invoca los dos archivos de arriba
Edición y reproducción
Entonces, el principal archivo que debemos modificar y adaptar es presentation.md. Algunas cosas para tener en cuenta:
- La primera diapositiva suele tener el atributo
layout: si su valor es truela misma se usará como plantilla para el resto de las diapositivas.
- Cuando se quiere aplicar una clase se usa el siguiente formato:
.NombreDeClase[
contenido
]
Por ejemplo, el siguiente código:
.col-6[
- item 4
- item 5
- item 6]
Será convertido al siguiente HTML:
<div class="col-6"><ul>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
- Si se desea aplicar la clase a toda la diapositiva se debe anteponer el atributo class:
---
class: alt-bg
## Ejemplo
- item 4
- item 5
- item 6
- De hecho, se puede aplicar una imagen de fondo a la diapositiva:
---
background-image: url(superfoto.jpg)
## Ejemplo
- item 4
- item 5
- item 6
- Para hacer aparecer el contenido de manera progresiva se usa el separador
--:
## Ejemplo
- item 1
--
- item 2
--
- item 3
Es decir la idea es crear contenido en presentation.md y los detalles del formato los podemos definir en styles.scss:
Mientras editamos obviamente queremos ver como va saliendo nuestra presentación, en cuyo caso ejecutamos:
bs serve -p 4444
El puerto es opcional, pero es útil si necesitamos trabajar con más de una presentación a la vez, usando obviamente diferentes puertos para cada una.
Exportación
Para exportar se usa:
bs e
Tener en cuenta que cualquier archivo con extensión .md será procesado por bs
En el directorio distestá el html con la preentación completa.
y para convertir a pdf:
bs p
El archivo resultante estará en el directorio pdf.
Conclusión
Me resultó un poco más cómodo trabajar con Backslide que con MarkDeck ya que no es necesario contar con docker para crear y/o probar las presentaciones. La plantilla que viene predeterminada está bastante bien y puede ser modificada a gusto, además los controles para ver las notas del orador y navegar por la presentación son muy útiles.
