Linux Sin Humo (Publicaciones sobre presentaciones)

Presentaciones con Backslide

sebelk — Mon, 10 Jun 2019 18:01:46 GMT

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

![](assets/imgs/clase1-LiOp.jpg)

---

## 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.

MarkDeck o hay vida más allá del pagüerpoin

sebelk — Fri, 31 May 2019 23:41:14 GMT

El modelo de software de oficina de los '90 relegan la importancia del contenido frente a la sobreabundancia de herramientas.

Por ejemplo, supongamos que queremos o necesitamos a hacer una presentación. La interfaz del programa podría abrumarnos o distraernos. Aplicaciones como Impress de LibreOffice es de gran ayuda como alternativa a PowerPoint, pero podemos pensar en maneras alternativas de hacer una presentación. Podemos centrarnos en escribir el texto, seleccionar imágenes, gráficos, etc. sin resignar un buen "look and feel".

Asi es como en la actualidad tenemos distintos proyectos de software libre que tienen este enfoque. Uno de ellos se llama MarkDeck creado por Arne Hilmann. Este software convierte markdown a html5 con un aspecto atractivo, sin necesidad de subirla a internet en ningún momento. Solamente usando markdown usando nuestro editor de textos preferido (neovim en mi caso :wink: )

Bases

Como es habitual en el desarrollo de software libre MarkDeck está subido a los hombros de otros proyectos preexistentes, los cuales son:

Markdown: Un LML para crear HTML.
Pandoc: Es una librería escrita en Haskell que sirve para convertir entre distintos formatos de procesadores y lenguajes de marcado de texto.
reveal.js: Se trata de un framework para crear presentaciones en HTML.
PlantUML: Una herramienta basada en java para crear diagramas
Ditaamini: Librería de la extensión de diagramas para asciidoctor
ASCIIToSVG: Programa para convertir arte ascii en diagramas en formato svg
Graphviz: Es un programa para hacer diagramas a partir de archivos de textos escritos (principalmente) en el lenguaje DOT.
asciinema: Un grupo de herramientas para grabar y reproducir sesiones de terminal
DeckTape: Exportador de archivos PDF a partir de páginas web
vega-lite: Genera gráficos interactivos a partir de archivos json
mathjax-pandoc-filter: Filtro de pandoc para convertir fórmulas matemáticas de LaTeX en en SVG embebido
font-awesone: Es un grupo de íconos y CSS para la web

Instalación

Un requisito para usar MarkDeck es tener instalado docker y docker-compose ya que utiliza una serie de containers para lanzar los servicios que nos permiten tanto editar la presentación como reproducirla. Otro detalle a tener en cuenta es que al usar docker necesitamos privilegios mayores a los de un usuario común, para ello es conveniente agregar nuestra cuenta a la del grupo docker. Para que quede así por ejemplo:

grep docker /etc/group
docker:x:1001:sergio

Luego podemos crear un directorio en el cual estarán los archivos de nuestra presentación y los de MarkDeck y entrmos en el mismo:

$ mkdir new-ppts1 && cd new-ppts1

A continuación descargamos el archivo scaffold con nuestra herramienta preferida:

$ http -d https://raw.githubusercontent.com/arnehilmann/markdeck/master/scaffold

El archivo scaffold.txt es un script de bash que define y ejecuta los containers de Docker usando docker-compose. Arrancamos el servicio de docker si no está activo: $ sudo systemctl start docker

Y luego ejecutamos el script:

./scaffold.txt

Podemos comprobar además los containers que están corriendo:

Archivos de MarkDeck

El script start para arrancar los containers
El script stop para detener los containers
El script update-mardeckque vuelve a descargar y ejecutar el archivo scaffold
El directorio deck que guarda los archivos de la presentación renderizada
El directorio assetses donde ponemos los archivos que queremos que sean permanentes, tales como imágenes, hojas de estilo en cascada, sesiones de terminal, etc.
En el directorio deck podremos encontrar un archivo pdf generado a partir de la presentación.

Editando y reproduciendo la presentación

Hay que editar el archivo slides.md
La presentación se ve en http://localhost:8080

Tiene una serie de recursos útiles en http://localhost:8081
Un archivo de presentación comienza con una sección de configuración del tipo y luego cada slide comienza con un encabezado de primer nivek en markdown:

---
title: Introducción a Linux - Clase 1
variant: impress
pdf: intro_linux-clase1.pdf
slideNumber: true
controls: true
controlsTutorial: true
asciinema: true
standalone: slides.html
---

# Slide 1

- item 1
- item 2
- item 3

# Slide 2

- item 4
- item 5
- item 6

Una configuración importante es standalone: slides.html la cual sirve para generar un archivo web con todos los objetos de la página embebidos (podremos encontrar el archivo en deck/slides.html) y poder transportarla a otra computadora.

Hay varias maneras de enriquecer la presentación con:

Fondos de diapositivas (colores, gradientes, imágenes)
Íconos de font-awesome
emojis
resaltado de código
Diagramas con asciiart
Equaciones matemáticas
Sesiones de terminal
Nube de palabras (en realidad es una herramienta externa)

Conclusión

Nos guste o no hoy casi toda la informática gira en torno a un navegador web. La ofimática se ha movido de aplicaciones faraónicas a la web. Por eso tiene sentido trabajar en su lugar con pequeñas aplicaciones que hagan bien una determinada tarea, al mejor estilo UNIX. Teniendo nuestra aplicación en HTML neutraliza el problema de los formatos cerrados de software monopólico.

Linux Sin Humo (Publicaciones sobre presentaciones)

Presentaciones con Backslide

Funcionalidades

Bases

Instalación

Creación de dispositivas

Edición y reproducción

Exportación

Conclusión

MarkDeck o hay vida más allá del pagüerpoin

Bases

Instalación

Archivos de MarkDeck

Editando y reproduciendo la presentación

Conclusión

Enlaces