En general, perdemos mucho tiempo en dar forma a las presentaciones. Que si las imágenes, que si el fondo, que si esto aquí, o aquello allá. Creo que perdemos demasiado tiempo. Y sin embargo, lo que es realmente importante, el que debería ser el protagonista prácticamente no recibe atención, me refiero al contenido. Así, al igual que hablamos sobre como ser productivos cuando escribimos, también podemos ser productivos al hacer presentaciones. Y la solución la vamos a encontrar de la misma forma, hacer presentaciones con Markdown.

Hace un tiempo, di una charla sobre Markdown en GNU/Linux Valencia. Mientras preparaba esta charla, pensé que lo suyo, y como un claro ejemplo de las posibilidades de Markdown, sería hacer la presentación también en Markdown. Así que, de una sola vez, resolví dos temas interesantes. No solo como ser mas productivos a la hora de escribir, sino también como hacer presentaciones con Markdown y además presentaciones eficaces.

Presentaciones con Markdown

Para realizar presentaciones con Markdown me apoyé en el proyecto Remark. Un proyecto que, es de 2.012, y que sigue en plena vigencia a dia de hoy.

¿Que características tienes remark?

• Formateo de Markdown con pequeñas y simples extensiones.
• Modo de presentación. Este modo permite que el ponente tenga sus notas en una vista clonada y separada de la vista principal. De esta manera, mientras que en una pantalla se muestra la presentación, en la otra, el ponente, puede ver sus notas en conjunto con la presentación.
• Permite el resaltado de sintaxis. Esto es realmente cómodo para hacer presentaciones que necesiten mostrar código en la misma.
• Escalado de la presentación. Esta interesante característica consigue que la presentación se vea muy similar con independencia del tamaño de la pantalla en la que se esté mostrando.
• Soporta plantillas. Esta característica es realmente interesante, porque permite tener varias plantillas y utilizarlas según la necesidad. Así, puedes tener una plantilla para títulos y otra para hoja normal, permitiendo romper con la presentación. En particular, esta característica me ha llamado mucho la atención, porque me ha permitido, partir la presentación, y darle un ritmo mucho mas dinámico.
• Para el caso de móviles y tabletas, permite tanto gestos como toques para el desplazamiento entre las diferentes hojas de la presentación.

Ventajas de las presentaciones con Markdown

Solo para empezar, ya presenta las mismas ventajas que cualquier otro documento confeccionado con Markdown, pero va mas allá, por supuesto,

• Al ser texto simple o sin formato, permite que realicemos un control de versiones, utilizado Git o cualquier otro.
• Podemos hacer tratamiento masivo de documentos, mediante las herramientas que pone a nuestra disposición la línea de comandos de Linux, y de otros sistemas operativos. Así, por ejemplo, podemos cambiar la fecha de todos los documentos de una sola vez.
• Por supuesto, Markdown en general, y Remark, en particular, te permite que te centres en el contenido, y te olvides del diseño de la prentación.
• Permite colaborar de forma sencilla con otros. Simplemente utilizando un sistema de control de versiones con Git y un repositorio como GitLab nos puede ayudar a realizar una presentación perfecta.
• Igualmente, es muy sencilla de compartir y mostrar a cualquier persona en cualquier momento.
• No necesitas mas que un navegador como Firefox o Chrome (aunque probablemente esté soportado por otros). Ya no te tienes que preocupar de en que ordenador vas a hacer la presentación, ¿que sistema operativo tendrá?, ¿tendrá la aplicación que necesito?. No te tienes que preocupar de esas nimiedades*.
• Puedes guardarlo en cualquier sitio, ya sea un servicio de almacenamiento como Google Drive, Dropbox, o cualquier otro. O incluso en repositorios como GitLab o GitHub.
• Permite personalizar las presentaciones con Markdown utilizando CSS. Tan sencillo como eso. Con unos conocimientos básicos de CSS, o con alguna que otra búsqueda, conseguirás lo que necesitas.

Uso y funcionamiento

La estructura general de las presentaciones con Markdown, utilizando Remark, se compone de tres partes fundamentales

• una parte de HTML, que en principio es *fija, y que no es necesario alterar.
• los estilos, que podemos tener en el mismo documento, o que podemos tener en un archivo aparte. La recomendación es tenerlo en un archivo separado.
• Nuesto texto en markdown, que podemos tener también en el propio documento en HTML, o bien en un documento aparte.

En el propio documento HTML, tenemos el código JavaScript que se encarga de realizar todo el trabajo. Es posible pasar algunos parámetros, para personalizar nuestra presentación y adecuarla a nuestras necesidades.

El código HTML

Así, el código HTML que necesitamos para nuestra presentación será algo como sigue a continuación,

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <textarea id="source">
        <!-- aquí va la presentación>
    </textarea>
    <script src="remark.js"></script>
    <script>
       var slideshow = remark.create();
    </script>
  </body>
</html>

Utilizando esta plantilla HTML, tendremos la hoja de estilos, stylesheet.css en un archivo separado. Mucho mas fácil de gestionar, editar y modificar. También es posible tener el código de las presentaciones con Markdown, en un documento a parte, pero en ese caso, es necesario que estén alojados en un servidor.

Los estilos

A cada una de las hojas de la presentación le podemos asignar una serie de estilos. Para esto, solo tenemos que poner en el encabezado de la presentación, la palabra clave class seguida de los estilos que queremos aplicar. Así para que esté centrado tanto en vertical como horizontal utilizaremos,

class: middle center

También es posible aplicar estilos a determinadas partes de nuestro texto. Así, para poner un bloque centrado, utilizaremos,

.center[El texto que queremos que aparezca centrado]

Además podemos encadenar estilos. Por ejemplo, si queremos que el color del texto sea blanco, definiremos en la hoja de estilos,

.blanco{color: white;}

Así, si queremos un texto blanco y centrado, utilizaremos lo siguiente,

.center[.blanco[El texto que queremos en blanco y centrado]]

El contenido

Una presentación realizada con Markdown se compone de pequeños trozos de texto en Markdown que se convierte en hojas de la presentación.

Separación entre hojas de la presentación

¿Como se separan esos pequeños trozos? Cada una de las hojas de la presentación está separada por tres guiones consecutivos. Esto Markdown se utiliza para introducir una línea horizontal. Sin embargo, para hacer presentaciones con Markdown se utiliza para marcar la división entre cada una de las hojas de la presenteción.

Así, por ejemplo, dos hojas de la presentación sería,

# Hoja 1

Esto es el contenido de la primera hoja
---
# Hoja 2

Este es el contenido de la segunda hoja

También permite presentaciones incrementales, es decir, donde cada presentación añade contenido a la anterior. Es decir, la segunda hoja de la presentación hereda el contenido de la primera hoja. Para conseguir esto, separamos las hojas por dos guiones en lugar de separarlos por tres. Por ejemplo,

# Hoja 1

* punto 1
--
# Hoja 2

* punto 2

Esto sería equivalente a,

# Hoja 1

* punto 1
---
# Hoja 2

* punto 1
* punto 2

Propiedades de las hojas de la presentación en Markdown

Las primeras líneas de cada una de las hojas de la presentación nos permiten definir las propiedades de esas hojas. Algunas de estas propiedades son,

• name permite identificar la hoja de la presentación. Esto nos permite ir a ella, desde un enlace, utilizando [enlace](#nombre) o con slideshow.gotoSlide('nombre').
• class nos permite definir los estilos que se aplicarán a la hoja.
• backgroun-image nos servirá para indicar la imagen de fondo que utilizaremos en la hoja.
• count es útil para indicar que esa hoja no se contabilice.
• template define la hoja de la presentación que se utilizará como plantilla para esa hoja.
• layout define que la hoja no se mostrará en la presentación, y sirve como plantilla para las siguientes hojas.
• exclude oculta una hoja de la presentación.

Notas en la presentación con Markdown

Para añadir tus notas a cada una de las hojas de la presentación, y luego poder verlas en modo presentación, solo tenemos que añadir una línea con tres interrogantes ???. Así por ejemplo,

# Hoja 1

El contenido de la presentación

???
Las notas de la presentación

Clases extra…

En mi caso particular, me gusta personalizar las presentaciones, y darles un toque propio. Eso si, no me gusta dedicarle un tiempo excesivo a este trabajo. Es decir, me gusta tener una o dos plantillas preparadas y personalizadas, con todas las características que necesito.

Una de las limitaciones con las que te puedes encontrar cuando hagas la presentación con Markdown, es que te encuentres que te faltan estilos para personalizarla. Sin embargo, puedes añadir los estilos que necesites, dentro de la hoja de estilos para su posterior uso.

¿Y como utilizar los estilos en la presentación con Markdown?

Para utilizar los estilos, simplemente tenemos que hacerlo con corchetes, anteponiendo el nombre de la clase del estilo que hemos definido. Esto que parece tan complicado, se resume a continuación. Por ejemplo, esto es lo que escribiríamos,

.footnote[.red.bold[*] Una nota importante]

Y esto es lo que veríamos,

<span class="footnote">
  <span class="red bold">*</span> Una nota importante
</span>

Resaltado de sintaxis

Aunque Markdown tiene una fuerte relación con el código HTML, su ámbito de actuación es mucho mayor. Sin embargo, no es difícil entender que los desarrolladores, se sentirán fuertemente atraídos por este lenguaje de marcado ligero. Así, realizar una presentación con Markdown sobre código, también está especialmente pensado para los desarolladores, puesto que puedes definir claramente cual es el lenguaje que utilizas. Así, por ejemplo, cuando escribimos ésto,

```python
# This function adds two numbers
def add(x, y):
   return x + y

# This function subtracts two numbers
def subtract(x, y):
   return x - y

Veremos

# This function adds two numbers
def add(x, y):
   return x + y

# This function subtracts two numbers
def subtract(x, y):
   return x - y

Conclusiones

Aunque al principio te pueda resultar complejo, te puedo asegurar que es realmente productivo, porque al final te centras en lo importante, te centras en el contenido. En ocasiones queremos adornar tanto nuestra presentación, con transiciones, desplazamientos, etc, que conseguimos el efecto contrario, es decir, conseguimos distraer al oyente.

Si eres un habitual de las presentaciones, hacer tus presentaciones en Markdown, sin lugar a dudas es toda una ventaja, puesto que una vez tengas las plantillas preparadas, el resto es coser y cantar.

Por otro lado, quería insistir en el aspecto de que esto es útil para todos, tanto los que se dedican al desarrollo, como la gente que escribe. A lo mejor, puedes pensar que no es así, pero te equivocas, te puedo asegurar que te equivocas. Simplemente Markdown, y en particular, las presentaciones en Markdown, probablemente sean lo mas productivo que aprendas si te lo propones. No tienes que dedicarle mucho tiempo a aprenderlo, y sin embargo, el resultado es espectacular.

Así que como dice aquel, permíteme que insista, aprende Markdown y comienza a realizar presentaciones con Markdown cuanto antes. Cuanto antes empieces mas tiempo ganarás.

Más información

• Remark
• Remark en GitHub