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.

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

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

Pausas en la presentación

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

    (es decir, tres puntos separados por espacios)

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

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

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

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

Revealjs: Slide background

• Las slides mejoran bastante estéticamente si en alguna de ellas cambiamos el fondo. La documentación está aquí

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

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

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

## Slide Title {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

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

Slide Backgrounds: ejemplo 1 (color)

Para poner un color de fondo:

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

Slide Backgrounds: ejemplo 2 (imagen)

Para poner una imagen de fondo:

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

Revealjs: Tabsets

::: {.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}
---

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

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

Revealjs: tunear con themes

• Podemos cambiar la apariencia de las slides usando los themes.

• Listado de themes aquí.

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

Revealjs: la primera slide

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

  • En ese caso, la 1ª slide contendrá los metadatos: title, subtitle, author, institute, date

Revealjs: tuneando 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"
---

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

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

::: {.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: Transiciones

• Documentación oficial aquí

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

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: 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**

## {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: Más cosas

• Puedes ocultar una slide:

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

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

::: {style="text-align: right;"}

<h2>Right aligned!</h2>

### Right aligned  tb!
:::

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

::: r-fit-text
NO

QUIERO!!
:::

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
:::

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}

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

Revealjs: Imágenes

• Por defecto se alinean a la izquierda

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

Imágenes: Stack layout

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

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

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"}

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")

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}

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

Revealjs: tunear con themes

• Podemos cambiar la apariencia de las slides usando los themes.

• Listado de themes aquí.

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

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

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

::: {.big-text}
    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

Revealjs: Trucos para usar durante una presentación

Por ejemplo:

Revealjs: EXTRAS

Documentación aquí y aquí

• Navigation menu

• Chalkboard

• Multiplex

• Speaker view

• Revealjs Plugins. Por ejemplo fullscreen

Beamer slides

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

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

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

Beamer slides (documentación)