¿Cómo hacer presentaciones en R?

Haydee, Fernanda, Ximena, Sofía

Paquetes y plataformas

Rmarkdown - Xaringan, revealjs
Quarto - reveal js

Crear diapositivas

Yaml: (Yet Another Markdown Language) configura características generales del documento
Todas las opciones YAML

---
title: "¿Cómo hacer presentaciones en R?"
author: "Haydee, Fernanda, Ximena, Sofía"
format: 
    revealjs: 
        slide-number: c # mostrar solo el número de la diapositiva
        show-slide-number: all # mostrar la numeración para todas las vistas
        footer: "Reveal js Quarto" # pie de diapositiva
        menu: 
            side: left # mostrar menu de herramientas a la izquierda
---

## Diapositiva 1 

- Contenido 1 
- Contenido 2 

---

- Contenido 1 
- Contenido 2

Diapositivas graduales

---
title: "Título"
format:
  revealjs:
    incremental: true   
---

:::{.incremental}

- Contenido 1
- Contenido 2

:::

::: {.nonincremental}

- Contenido 1
- Contenido 2

:::

Generen un archivo con 3 diapositivas

Columnas e imagenes

::::{.columns}

::: {.column width="50%"}
Izquierda
:::

::: {.column width="50%"}
![](imagenes/rladies_logo.jpeg){width="50%"}
:::

::::

Ejemplo izquierda

`{.smaller}`

Opciones cambiar el tamaño del texto de toda la diapositiva

---
title: "Título"
format: 
    revealjs:
        smaller: true
---

## Titulo diapositiva {.smaller}

Ejemplo (texto grande)

Contenido 1
Contenido 2

Ejemplo (texto pequeño)

Contenido 1
Contenido 2

Notas y pies de página

## Título de la diapositiva

- Contenido 1 ^[Rladies et al., 2023]
- Contenido 2

:::{.notes}
Buenos días mi nombre es ....
:::

::: aside
Nota inferior
:::

Contenido 1 ¹
Contenido 2

En una diapositiva añadan:

Una descripción breve de ustedes (columna 1)
Una foto suya (columna 2)
Forma de contacto (nota al pie)

Temas

repositorio de css

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

Temas

repositorio de css

---
title: "Presentation"
format:
  revealjs: 
    theme: [default, custom.scss]
---

Cambios personalizados en los temas

Los archivos que definen los temas son de tipo Sass que es un pre-procesador de CSS y le da algunas capacidades de un lenguaje de programación (variables, reglas anidadas, funciones, etc.)
- Wikipedia: ilustra las diferencias con CSS
- Tutorial freecodecamp

/*-- scss:defaults --*/

$body-bg: #191919;
$body-color: #fff;
$link-color: #42affa;

/*-- scss:rules --*/

.reveal .slide blockquote {
  border-left: 3px solid $text-muted;
  padding-left: 0.5em;
}

Lista de variables que se pueden modificar

CSS en la presentación

Algunos estilos específicos se pueden indicar directamente en las diaposivas
CSS - lenguaje para dar estilo a documentos HTML (cómo es que se deben mostrar los elementos del HTML)¹

:::{style="font-size: 40px; color:Tomato"}
- Ejemplo 
:::

Ejemplo

Actividad:

Escoger un tema de la lista y agregarlo a la diapositiva
En un archivo de texto nuevo (con terminación .scss) cambien el valor de una variable de la lista (nota: añadir tanto el archivo del tema escogido como el archivo modificado)
```
theme: [theme, my_theme.scss]
```
En uno de sus elementos de la diapositiva cambien el formato utilizando la propiedad style
```
:::{style="propiedad: valor;"}
- contenido
:::
```

Diagramas y figuras

Dependiendo del área (y el estilo de cada quién) hay algunas figuras (mapas mentales, diagramas de flujo, explicaciones conceptuales) que son más fáciles de hacer manualmente. Las figuras se pueden añadir como svg, png, jpg a la presentación.

Recursos libres

Biorender - más o menos libre
Bioicons
Drawio
Inkscape