Slides con Quarto

(Web del curso aquí)

Intro

Quarto puede hacer slides de varios tipos (ppt, beamer, slidy, …)

… pero nos centraremos en el formato Revealjs

Revealjs is highly recommended unless you have specific requirements for Office or LaTeX output

Presentaciones con Quarto

Las slides se escriben en QMD … así que ya sabemos 😉. Solo hay algunas especificidades que vamos a ver ahora

Veremos primero aspectos comunes a todos los formatos de slides

Documentación oficial aquí

Creación de unas nuevas transparencias

Has de seguir la siguiente ruta de menús:
File > New File > Quarto Presentation.
Se abrirá una interfaz gráfica donde podrás elegir entre 3 formatos de slides (Revealjs, Beamer y ppt). También podrás poner título y autor.

En imágenes:

Creación de una nueva slide

Los títulos de primer nivel crean una nueva slide (y tb una nueva sección)
Los títulos de segundo nivel crean una nueva slide.

También se puede crear una nueva slide usando 3 o mas guiones cortos: ---

Extensión: modificar la generación de nuevas slides

Hay que usar slide-level: en el YAML. Por ejemplo:

---
title: "Mis slides"
format: revealjs 
---

Por defecto, los títulos de primer(#) y segundo nivel (##) crean nuevas slides

---
title: "Mis slides"
format: 
  revealjs:   
  slide-level: 3
---

Con este yaml, los títulos de tercer nivel (con ###) también crearían una nueva slide

Pausas en la presentación

Por defecto, los elementos de una slide se muestran todos de golpe

⚠️ Para crear pausas en la presentación has de usar las siguientes marcas: . . .

    (es decir, tres puntos separados por espacios)

Por ejemplo:

## Una nueva slide

Contenido nº 1

. . . 

Contenido nº 2

(para ver el Contenido nº 2 habrá que dar al avance página)

Listas incrementales

Por defecto las listas se muestran de golpe

Si quieres que se muestren elemento a elemento, puedes controlarlo desde el YAML:

title: "My Presentation"
format:
  revealjs:
    incremental: true

Se puede ir intercalando listas incrementales, y no-incrementales, con los siguientes fenced div’s:

Lista incremental :

::: {.incremental}
- First we take Manhatan,
- then we take Berlin
:::

Lista no-incremental :

::: {.nonincremental}
- First we take Manhatan,
- then we take Berlin
:::

Columas multiples

Como puedes ver, se puede generar contenido en varias columnas. Para ello hay que usar “un fenced div con clase columns”

To put material in side by side columns, you can use a native div container with class .columns, containing two or more div containers with class .column and a width attribute. – Documentacion oficial de Quarto

Por ejemplo:

:::{.columns}

::: {.column width="40%"}
Mi contenido en la primera columna
:::

::: {.column width="60%"}
Contenido en la segunda columna
:::

:::

Revealjs slides

Una vez vistos los elementos cómunes a todos los formatos de slides, ahora veremos especificidades para el formato Reveal.js

reveal.js es un open source HTML presentation framework

A mi me gustan, en mi opinión tienen unas cuantas ventajas

Documentación oficial aquí
Listado (extenso) de opciones aquí

Revealjs slides (elementos básicos)

Elementos “básicos”, que mejoran bastante las slides

Revealjs: Slide background

Las slides mejoran bastante estéticamente si en alguna de ellas cambiamos el fondo. Documentación oficial aquí

Se pueden usar (de fondo) los siguientes elementos: color, imagen, vídeo e iframe.

Por ejemplo, con el color del fondo:

Guía de colores aquí


## Título de la slide {background-color="aquamarine"}

## Título de la slide {background-color="#A9339A"}

Extensión: Opciones más complejas

## Slide cubierta con video {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}


## Slide cubierta con imagén {background-image="https://images.pexels.com/photos/4860589/pexels-photo-4860589.jpeg" background-size="500px" background-repeat="repeat"}


## Slide cubierta con iframe {background-iframe="https://www.uv.es"}

Slide Backgrounds: ejemplo 1 (color)

Para poner un color de fondo has de escribir:

## Slide Backgrounds: ejemplo 1 (color) {background-color="aquamarine"}

Slide Backgrounds: ejemplo 2 (imagen)

Para poner una imagén de fondo has de escribir:

Fíjate que puedes controlar la opacidad

## Slide Backgrounds: ejemplo 2 (imagen) {background-image="imagenes/perro_blanco.jpg" background-size="cover"  background-opacity="0.7"}

Se pueden hacer cosas muy chulas como:

Slides de Emi Tanaka
Parallax background. Documentación aquí
Quarto iFrame. El repo

Revealjs: Tabsets

Por ejemplo este tabset

Adivinanza
Solución

Oro parece, plátano es …

😀

se ha creado con este código:

::: {.panel-tabset}
## Adivinanza

Oro parece, platano es ...

## Solución

😀
:::

Revealjs: Numeración de las slides

Por defecto las slides están numeradas

---
format:
  revealjs:
    slide-number: true #- {true, false}
---

Puedes hacer cosas más “elaboradas”. Documentación oficial aquí

---
format:
  revealjs:
    slide-number: c/t   #- current/total {c/t, c, ...}
---

Puedes hacer que una slide no se cuente:

## Título de la slide  {visibility="uncounted"}

Revealjs: tunear con themes

Podemos cambiar la apariencia de las slides usando los themes.
Listado de themes aquí.

Para ello tenemos que incluir en el YAML el theme que queremos:

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

Hay extensiones para tunear

Además disponemos de muchos otros themes en extensiones en la web de Quarto y en Awesome Quarto
Por ejemplo: los themes 4 estaciones, Inversa, Insper, … Revealjs Earth theme impresiona.

Revealjs slides (más elementos)

“Más elementos”, que no son imprescindibles

Revealjs: la primera slide

La primera slide se crea automáticamente si pones un título en el YAML

La 1ª slide contendrá los metadatos: title, subtitle, author, institute, date

La apariencia de la primera slide dependerá del tema elegido. Listado de themes aquí

Tenemos muchas opciones para personalizar las slides y, en concreto, para tunear la primera slide

Aquí tienes algunas opciones en el YAML para la primera slide

---
title: "Mys slides"
format:
  revealjs: 
    theme: default
    center-title-slide: true                       #- centrado vertical
title-slide-attributes:
  data-background-color: "#562457"                 #- color del backgroung
  data-background-image: imagenes/my_imagen.jpg    #- ruta a imagén
  data-background-size: cover                      #- {cover, contain}
  data-background-opacity: "0.4"
---

Extensión: modificar el aspecto de la primera slide manualmente

# My slides {background-image="imagenes/my_imagen.jpg" background-size="cover" background-color="#4f6952" background-opacity="0.5"}

<h2>Tuneando la primera slide</h2>

<h3>Pedro J. Pérez \| 2023-04-04</h3>

Rvealjs: el Footer

Podemos incorporar contenido en el píe de página de las slides.

El footer habitual de estas slides se haría así:

---
title: "My slides"
format: 
  revealjs:
    footer: "[https://go.uv.es/pjperez/intro.to.quarto](https://go.uv.es/pjperez/intro.to.quarto)"
---

Pero si te fijas, he cambiado el footer específicamente para esta slide. Lo he hecho con:

::: {.footer}
<https://www.uv.es>
:::

Rvealjs: Logo

También podemos poner un logo. Por defecto se colocará en la esquina inferior-izquierda. La numeración pasaría a estar en la esquina superior-izquierda

---
title: "My slides"
format: 
  revealjs:
    footer: "[https://go.uv.es/pjperez/intro.to.quarto](https://go.uv.es/pjperez/intro.to.quarto)"
    #logo: imagenes/economia.gif
    logo: "https://upload.wikimedia.org/wikipedia/commons/8/8c/Esuni.GIF"
---

Hay extensiones que permiten incorporar más elementos y dar más flexibilidad al footer y al header de nuestras slides. Por ejemplo esta extensión permite hacer slides como estas

Revealjs: Content overflow

Si el contenido que queremos poner es mucho y no se ajusta, no cabe en la slide, tenemos varias posibilidades:

Usar la .smaller class al crear la slide:


## Título de la slide {.smaller}

Modificar el YAML para hacer las slides “scrollables”:

---
title: "My Presentation"
format:
  revealjs:
      scrollable: true
---

Revealjs: Transiciones

---
title: "Mi Presentación"
format:
  revealjs:
    transition: slide         #- transiciones de las slide: {none, fade, slide, convex, concave, or zoom}
    transition-speed: fast    #- {default, fast, slow}
---

Documentación oficial aquí

Transition	Description
`none`	No transition (switch instantly)
`fade`	Cross fade
`slide`	Slide horizontally
`convex`	Slide at a convex angle
`concave`	Slide at a concave angle
`zoom`	Scale the incoming slide so it grows in from the center of the screen.

Revealjs: Transiciones

Las transiciones se pueden fijar para una slide:

## Título de la slide {transition="convex" transition-speed="slow"}

y hacerlas más complejas

## Título de la slide {transition="fade-in slide-out"}

Revealjs: Imágenes

Por defecto se alinean a la izquierda

![](imagenes/imagen_ababol.jpg){fig-align="center"}

Imágenes: Posición absoluta

![](imagenes/perro_goya.jpg){.absolute top=500 left=0 width="250" height="100"}

![](imagenes/perro_blanco.jpg){.absolute top=50 right=50 height="250"}

![](imagenes/imagen_ababol.jpg){.absolute bottom=30 right=-100 width="300" height="300"}

Imágenes: con o sin Stretch

Por defecto, Revealjs hace que las imágenes se ajusten al espacio vertical que queda en la slide.

Puedes desactivar esta opción en el YAML y/o en slide o imagen concreta. Documentación aquí

En el YAML

format: 
  revealjs:
    auto-stretch: false

En una slide o imagen concreta

## Nueva slide {.nostretch}

![](imagenes/imagen_ababol.jpg){.nostretch}

Imágenes: Stack layout

::: {.r-stack}
![](imagenes/perro_blanco.jpg){.fragment width="350"}

![](imagenes/perro_goya.jpg){.fragment width="400"}
:::

Revealjs: Fragments

Los fragments se usan para resaltar o mostrar poco a poco algunos elementos de una slide: cada elemento con clase .fragment aparecerá sólo cuando avancemos a la siguiente slide. Documentación aquí. Hay muchas clases de fragments

::: {.fragment}
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: {.fragment .fade-in-then-out}
Fade in, then out
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

Fade in

Fade out

Highlight red

Fade in, then out

Slide up while fading in

Revealjs: Fragments en spans

El uso más directo que veo a los fragments es usarlos con spans para hacer esto:

Esto es muy [importante!!]{.fragment .highlight-red}

Esto es muy importante!!

Otro ejemplo:

Los datos indican que [Quarto]{.fragment .highlight-green} mientras que [Rmarkdown]{.fragment .fade-in} va desapareciendo

Los datos indican que Quarto crece mucho, mientras que Rmarkdown va desapareciendo

Revealjs: Alineación de los títulos

Los títulos de primer nivel (#) aparecen verticalmente centrados

Los títulos de segundo nivel (##) aparecen en el margen superior

Todo se puede cambiar con CSS, o …

Si quieres alinear un título a la derecha, una posibilidad es:

::: {style="text-align: right;"}
### Este título estará Right aligned!!

Este texto también
:::

::: {style="text-align: center;"}
### [Pero este título estará centrado (y en azulito)]{style="color: #AABBCC;"}
:::

Revealjs: Más cosas

Puedes ocultar una slide:

## Título de la slide  {visibility="hidden"}

Tamaño de las slides. Documentación oficial aquí

Revealjs: Auto-animaciones

Se puede auto-animar 2 slides próximas. Documentación aquí


## {auto-animate=true}

¿Esto te gusta?

## {auto-animate=true}

¿Esto te gusta?

Sí, esto me gusta

## {auto-animate=true}

Sí, esto me gusta **MUCHO**

Se pueden usar las siguientes propiedades CSS: position, font-size, line-height, color, background-color, padding y margin.

## {auto-animate=true}

::: {style="margin-top: 100px;"}
Contenido auto-anímado
:::

## {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: red;"}
Contenido auto-anímado
:::

Revealjs: Auto-animaciones (chunks)

También se puede auto-animar chunks de código. Documentación aquí

## {auto-animate="true"}

```r
#######- Hagamos un ggplot
library(ggplot2)
ggplot(iris) +
```

## {auto-animate=true}

```r
#######- Hagamos un ggplot
library(ggplot2)
ggplot(iris) +
  geom_point(aes(x = Sepal.Length, 
                 y = Petal.Length, 
                 color = Species))
```

Revealjs: Asides

Los “asides” son similares a las notas al píe de página, pero no llevan numeración.

Su sintaxis es:

::: aside
El contenido de un aside se colocará al final de la slides, justo encima de las notas al píe
:::

Revealjs: ajustar texto con “r-fit-text”

QUIERO!!

::: r-fit-text
NO

QUIERO!!
:::

Revealjs: Código

Documentación aquí

Chunks: code line-highlighting

Podemos hacer que se enfaticen ciertas lineas de los chunks. Para ello has de poner ciertas opciones dentro de los chunks:

#| code-line-numbers: "3"

library(ggplot2)
mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")

#| code-line-numbers: "|4"

library(ggplot2)
mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")

#| code-line-numbers: "|3|5|"

library(ggplot2)
mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")

Documentación oficial aquí. Un buen post sobre el tema, con otras opciones de sintáxis.

Chunks: Output location

La opción: #| output-location: nos ayuda a colocar el código y los resultados side-by-side. Tiene los siguientes valores: {column-fragment, column, fragment, slide}

La opción que más me gusta es: #| output-location: column-fragment, porque coloca el chunk y el resultado side-by-side y los separa por una pausa. Documentación oficial aquí. Mine Çetinkaya-Rundel lo explica aquí

```{r}
#| output-location: column-fragment
library(ggplot2)
mtcars |> 
  ggplot(aes(x = disp, y = mpg)) +
  geom_point() +
  geom_smooth(method = "loess", formula = "y~x")
```

Revealjs: tuneando las slides

Lo mejor es elegir un “theme”
Hay otras opciones

Revealjs: tunear con themes

Podemos cambiar la apariencia de las slides usando los themes.
Listado de themes aquí.

Para ello tenemos que incluir en el YAML el theme que queremos:

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

Hay extensiones para tunear

Además disponemos de muchos otros themes en extensiones en la web de Quarto y en Awesome Quarto
Por ejemplo: los themes 4 estaciones, Inversa, Insper, … Revealjs Earth theme impresiona.

Revealjs: Ejemplos de presentaciones

Some good practices for research with R de Etienne Bacher, el repo aquí
Debugging de Shannon Pileggi, el repo aquí
The Genesis of Experimentation de Emi Tanaka, el repo aquí
ggdensity: Improved density visualization in R de James Otto y David Kahle, el repo aquí
Extending ggplot2 with custom Geoms and Stats de James Otto, el repo aquí
Quarto/RMarkdown - What’s Different?, de TED Laderas. Vídeo
An Antarctic Tour of the Tidyverse de Silvia Canelon, el repo aquí
Hello Quarto de Mine Çetinkaya-Rundel y Julia Stewart Lowndes, el repo aquí, más cosas
Reproducible authoring with Quarto de Mine Çetinkaya-Rundel, el repo aquí [veamos ,un poco, estas slides]
What can I do with Quarto? de Nicola Rennie, su web aquí
Reproducible Publications w/ Python and Quarto de Thomas Mock
Improvements in text preprocessing using textrecipes de Emil Hvitfeldt
The Happiest Notebooks on Earth de Allison Hill
Quarto Presentations by Quarto team, el repo aquí. Documentación oficial aquí
Intro to Quarto de Isabella Velásquez, el repo aquí
Un buen post sobre Revealjs slides de Meghan Hall
Data Science Portfolio with Quarto de Deepsha Menghani, el repo aquí. Vídeo aquí
05 - Presentations Making Slides with Code y 02 - Authoring Quarto de Thomas Mock. Slides que pertenecen al siguiente taller Get started with Quarto
Creating your data science portfolio, de Nicola Rennie. Sus talks aquí, el repo aquí

Revealjs: otras opciones de tuneado

Podemos cambiar la apariencia con CSS …
… y con Sass

Tunear con CSS: ejemplo 1 (fenced divs), sacado de aquí

1) Si incluyes este trozo de CSS, que define la clase “.big-text” en un archivo .css o .scss

  .big-text {
  font-size: 88px;
   }

2) y lo referencias en el yaml de las slides con

- theme: [default, assets/my_styles.scss] o con

- css: assets/my_styles.css

3) Entonces, puedes usar el siguiente fenced div con clase “.big-text”:

::: {.big-text}
    Un párrafo con el texto muy grande
:::

Para conseguir que lo que escribas dentro del fenced div se vea muy grande, tal como ves abajo:

Un párrafo con el texto muy grande

Tunear con CSS: ejemplo 2 (spans)

Ejemplo 2 (sacado de aquí)
Para tunear un elemento dentro de una frase tenemos que usar spans

La sintaxis es: [span]{.class}

De forma que,
- si escribes esto: Esta mañana ha llovido [mucho]{.big-text}

verás esto: Esta mañana ha llovido mucho

Revealjs: “truquillos”

Revealjs: Trucos para usar durante una presentación

Por ejemplo:

Tenemos el “hamburger menu” para movernos por las slides

Podemos hacer ZOOM en cualquier elemento o trozo de las slides. Solo hay que mantener presionada la tecla ALT y clickar en el ratón. En Linux es la tecla CTRL

O: permite hacer una overview de las slides. Para moverte por las slides en modo overview “usa las flechitas”

F: slides a pantalla completa

CTRL-SHIFT-F : permite buscar palabras dentro de las slides. Dando a ENTER avanzas a la siguiente coincidencia. Además, Si lo haces mientras las slides están en overview te marcará todas las coincidencias

B : permite “apagar” las slides

Revealjs: EXTRAS

Documentación aquí y aquí

Navigation menu
Chalkboard
Multiplex
Speaker view
Revealjs Plugins. Por ejemplo fullscreen

Otros formatos

Beamer
Power Point
Slidy

Beamer slides

Beamer es un formato de slides, basadas en Latex, muy popular en el mundo académico

Quarto puede hacer Beamer slides. Sólo hay que usar los menús o este yaml:

---
title: "My Presentation"
format: beamer
---

La apariencia visual de las slides vendrá determinada por el theme y el colortheme. Aquí y aquí tienes ayuda para elegirlos. Por ejemplo:

---
title: "Presentation"
format: 
  beamer: 
    aspectratio: 32
    navigation: horizontal
    theme: metropolis
    colortheme: lily
---

---
title: "Presentación Profesional en Beamer"
subtitle: "Estructuras avanzadas y diseño con Quarto"
author: "Tu Nombre"
date: today
date-format: "MMMM YYYY"
format:
  beamer:
    theme: Madrid
    colortheme: whale
    navigation: horizontal # Añade una barra de navegación arriba
    toc: true              # Genera el índice automático
    slide-level: 2         # Los títulos de nivel 2 (##) crean nuevas diapositivas
---

# 1. Introducción y Conceptos Básicos

## Estructura de Bloques en Beamer
El tema `Madrid` con color `whale` es chulo, pero Metropolis me gusta más!!!

::: {.block}
### Bloque 
Este es un bloque para destacar conceptos importantes.
:::

Beamer slides (documentación)

User Guide oficial de Beamer
Documentación oficial Beamer de Quarto aquí
Opciones de YAMl de Beamer en Quarto aquí
Beamer en RMD
Beamer en StackOverflow. Por ejemplo:
- Numeración de las slides como en Revealjs
- Justificar texto

Más de slides

Puedes ver algunos truquillos sobre Revealjs slides aquí