Crear presentaciones dinámicas con RStudio en HTML5

El lenguaje de programación R no deja de sorprenderme. Muchos comenzamos en R porque sabíamos que era increíblemente útil para realizar análisis de datos y estadística. Pero con los años, uno descubre que es un lenguaje increíblemente versátil. De hecho, los análisis estadísticos son solo una parte de este maravilloso mundo de la programación. Hace relativamente poco tiempo descubrí una nueva función que viene incorporada dentro de RStudio, una interfaz de programación de R (aunque no la única). Entre otras opciones, y gracias a la combinación de R y Markdown, podemos crear presentaciones dinámicas con RStudio, y nada menos que en HTML5.

Quiero leer...

Crear presentaciones dinámicas con RStudio

En esta entrada os voy a mostrar cómo crear presentaciones dinámicas con RStudio. El resultado será un archivo HTML5 (.html), que contendrá la presentación y que podréis abrir en cualquier navegador.

Creamos un archivo de presentación (.Rpres)

Para comenzar a desarrollar nuestra presentación en RStudio, tenemos que crear un archivo específico que llevará la extensión .Rpres.

Para ello vamos a File -> New File -> R Presentation

Crear presentaciones dinámicas con RStudio en HTML5

Después de escoger el nombre de la presentación (en nuestro caso le hemos dicho que sea Presentación de vivaelsoftwarelibre.com) nos aparece una plantilla preestablecida.

Presentación de vivaelsoftwarelibre.com
========================================================
author: 
date: 
autosize: true

First Slide
========================================================

For more details on authoring R presentations please visit <https://support.rstudio.com/hc/en-us/articles/200486468>.

- Bullet 1
- Bullet 2
- Bullet 3

Slide With Code
========================================================

```{r}
summary(cars)
```

Slide With Plot
========================================================

```{r, echo=FALSE}
plot(cars)
```

Vamos a ir estudiándola paso a paso.

Diapositiva de presentación y título

El título de la presentación es lo primero que aparece en nuestro archivo de .Rpres. Vemos que hay un conjunto de símbolos de igual (======…) que marcan la diferencia entre el título (situado por encima) y varias opciones (situadas por debajo).

Presentación de vivaelsoftwarelibre.com 
========================================================
author: Viva el Software Libre
date: 11 de febrero de 2019
autosize: true

Esas opciones situadas por debajo son:

  • author: ponemos nuestro nombre.
  • date: ponemos la fecha
  • autosize: true/false. Le indicamos si se ajusta o no automáticamente al cambiar el área de la presentación.

Obviamente, hay más opciones, que iremos descubriendo a lo largo de este artículo.

Añadir diapositivas nuevas

La creación de nuevas diapositivas sigue un patrón muy similar a la diapositiva de la presentación. Por un lado tenemos el conjunto de iguales (======…), que separa el título de la diapositiva (arriba) y el contenido de la misma (debajo).

First Slide 
========================================================
For more details on authoring R presentations please visit <https://support.rstudio.com/hc/en-us/articles/200486468>. 

- Bullet 1 
- Bullet 2 
- Bullet 3

Slide With Code
========================================================

```{r} 
summary(cars) 
```

Slide With Plot 
========================================================

```{r, echo=FALSE} 
plot(cars) 
```

Además, como podemos ver, la ventaja de trabajar en RStudio con RMarkdown es que podemos incorporar códigos de R en el interior, que serán ejecutados cuando se convierta en una diapositiva. Así podemos ver las dos últimas diapositivas del código anterior a continuación.

Crear presentaciones dinámicas con RStudio en HTML5. Chunks de R

Jerarquía de las diapositivas (type)

Cuando tenemos una gran cantidad de diapositivas, nos puede interesar tenerlas organizadas en diferentes categorías siguiendo una estructura jerárquica. En las presentación de R podemos definir hasta 4 estructuras organizadas jerárquicamente, organizadas de mayor a menor así:

  • section
  • sub-section
  • prompt
  • alert

Cada tipo de diapositiva tiene su propia apariencia. Estos argumentos se sitúan debajo de la fila de iguales (=====…)

Diapositiva 1
========================================================
type: section

Diapositiva 2
========================================================
type: sub-section

Diapositiva 3
========================================================
type: prompt

Diapositiva 4
========================================================
type: alert

Crear presentaciones dinámicas con RStudio en HTML5. Tipos de diapositivas

Transición de las diapositivas (transition y transition-speed)

Existen diferentes tipos de transición de las diapositivas, que tienen que añadirse con el argumento transition:

  • none
  • linear
  • rotate
  • fade
  • zoom
  • concave

Además, también podemos modificar la velocidad de las mismas con otro argumento, transition-speed:

  • default
  • fast
  • slow

Podemos hacer que la transición escogida esté presente como el comportamiento general de toda la presentación, o bien podemos aplicarlas específicamente a diapositivas específicas.

Si queremos que todas las diapositivas tengan el mismo tipo de transición, lo añadimos en la cabecera de la presentación:

Presentación de vivaelsoftwarelibre.com 
========================================================
author: Viva el Software Libre
date: 11 de febrero de 2019
autosize: true
transition: rotate
transition-speed: slow

O si queremos aplicarla específicamente a una diapositiva en concreto, añadimos qué transición queremos debajo de su línea de iguales. A continuación lo veremos en la diapositiva 2.

Presentación de vivaelsoftwarelibre.com 
========================================================
author: Viva el Software Libre 
date: 11 de febrero de 2019 
autosize: true 
transition: rotate
transition-speed: slow

Diapositiva 1 con transición general
========================================================

Diapositiva 2 con otra transición
========================================================
transition: fade
transition-speed: fast

Dividir en dos el área de una diapositiva (***)

Si queremos dividir el área de una diapositiva en dos zonas, izquierda y derecha, tenemos que añadir tres asteriscos (***):

  • Lo que esté por encima de los tres asteriscos será lo que aparezca en la parte izquierda de la diapositiva.
  • Lo que esté por debajo de los tres asteriscos será lo que aparezca en la parte derecha de la diapositiva.
División de las diapositivas
========================================================
type: section

Esto aparece en la zona izquierda

***

Esto aparece en la zona de la derecha

Crear presentaciones dinámicas con RStudio en HTML5. Dividir en dos una diapositiva

Omitir el nombre de una diapositiva (title)

En algunas ocasiones nos puede interesar que una diapositiva no tenga título. Esto sucede, entre otras, cuando queremos que aparezca solo una imagen.

Para ello, vamos a usar el argumento title: false. Obviamente, no hace falta que pongamos el título de la diapositiva.

========================================================
type: section 
title: false

Esto aparece en la zona izquierda 

*** 

Esto aparece en la zona de la derecha

Guardar la presentación en HTML

Una vez tenemos ya toda nuestra presentación realizada, vamos a guardarla en un archivo HTML para poder abrirla en cualquier navegador. Este proceso requiere dos pasos:

  1. Damos a Preview.
  2. Y luego a More -> Save As Web Page…

Guardar una presentación en HTML

Si queréis ampliar información, os recomiendo leer los tutoriales de cómo distribuir y mostrar presentaciones y cómo comenzar nuestra primera presentación.

Deja un comentario