Presentaciones

class: title-slide, middle, center
background-image: url(data:image/png;base64,#imagenes/rladies_logo.jpeg) 
background-position: 10% 50%
background-size: 15%

####Fernanda, Sofía, Haydeé 
#### 2023/05/16
]

.left[.footnote[R-Ladies Theme[R-Ladies Theme](https://www.apreshill.com/project/rladies-xaringan/)]]

---
background-image: url(data:image/png;base64,#imagenes/rladies_logo.jpeg) 
background-position: 10% 10%
background-size: 10%
class: middle, center

# Sobre nosotras
----

### <img src="imagenes/acorn.png" width="40px"> Sofía

Estudiante de maestría en Ciencias Biológicas

Áreas: Genética de poblaciones, Filogeografía, Ecología

[<svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg> sofiazorrilla](https://github.com/sofiazorrilla)

]

### <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#181818;overflow:visible;position:relative;"><path d="M416 0c17.7 0 32 14.3 32 32c0 59.8-30.3 107.5-69.4 146.6c-28 28-62.5 53.5-97.3 77.4l-2.5 1.7c-11.9 8.1-23.8 16.1-35.5 23.9l0 0 0 0 0 0-1.6 1c-6 4-11.9 7.9-17.8 11.9c-20.9 14-40.8 27.7-59.3 41.5H283.3c-9.8-7.4-20.1-14.7-30.7-22.1l7-4.7 3-2c15.1-10.1 30.9-20.6 46.7-31.6c25 18.1 48.9 37.3 69.4 57.7C417.7 372.5 448 420.2 448 480c0 17.7-14.3 32-32 32s-32-14.3-32-32H64c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-59.8 30.3-107.5 69.4-146.6c28-28 62.5-53.5 97.3-77.4c-34.8-23.9-69.3-49.3-97.3-77.4C30.3 139.5 0 91.8 0 32C0 14.3 14.3 0 32 0S64 14.3 64 32H384c0-17.7 14.3-32 32-32zM338.6 384H109.4c-10.1 10.6-18.6 21.3-25.5 32H364.1c-6.8-10.7-15.3-21.4-25.5-32zM109.4 128H338.6c10.1-10.7 18.6-21.3 25.5-32H83.9c6.8 10.7 15.3 21.3 25.5 32zm55.4 48c18.4 13.8 38.4 27.5 59.3 41.5c20.9-14 40.8-27.7 59.3-41.5H164.7z"/></svg> Fernanda Cidel

Estudiante de Lic. en Ecología 
ENES Morelia, UNAM

Lab. Genética de la Conservación

]

### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#181818;overflow:visible;position:relative;"><path d="M418.4 157.9c35.3-8.3 61.6-40 61.6-77.9c0-44.2-35.8-80-80-80c-43.4 0-78.7 34.5-80 77.5L136.2 151.1C121.7 136.8 101.9 128 80 128c-44.2 0-80 35.8-80 80s35.8 80 80 80c12.2 0 23.8-2.7 34.1-7.6L259.7 407.8c-2.4 7.6-3.7 15.8-3.7 24.2c0 44.2 35.8 80 80 80s80-35.8 80-80c0-27.7-14-52.1-35.4-66.4l37.8-207.7zM156.3 232.2c2.2-6.9 3.5-14.2 3.7-21.7l183.8-73.5c3.6 3.5 7.4 6.7 11.6 9.5L317.6 354.1c-5.5 1.3-10.8 3.1-15.8 5.5L156.3 232.2z"/></svg> Haydeé

Investigadora Posdoctoral en el CCM UNAM

Áreas: Análisis Topológico de Datos, Teoría Geométrica de Grupos

]

---

<img src="imagenes/rladies_logo.jpeg"
width="55px"
/><br>
## ¿Qué vamos a ver?

----

#### [📦 RLadies](https://www.apreshill.com/project/rladies-xaringan/): Usaremos el [tema de R-Ladies](https://www.apreshill.com/project/rladies-xaringan/)

#### [📦 xaringan <img src="data:image/png;base64,#imagenes/hex-xaringan.png" width="25px"/>](https://github.com/yihui/xaringan#xaringan): Paquete para crear diapositivas con `remarks.js` y R Markdown

#### [📦 xaringanExtra](https://github.com/gadenbuie/xaringanExtra/#xaringanExtra): Opciones de edición en línea, incrustar en otro documento, escribir y otras características 😎

#### <img src="imagenes/quarto.png"; width="100px"> [Quarto revealjs](https://quarto.org/docs/presentations/revealjs/): Nuevo sistema de publicación de documentos que integra  R y otros lenguajes de programación (python, Julia, etc.)

---

----

### remark.js

### xaringan

### CSS

---

## remark.js

### <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg>JavaScript

### **y**

### <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"/></svg> Markdown

Una herramienta para presentaciones de diapositivas basadas en Markdown a través de la web.

]

##  xaringan

Paquete que le presenta `remark.js` a R Markdown

El autor menciona que una presentación debe comunicar .my-red[conocimiento] y una gran presentación debe .my-red[hipnotizar] a la audiencia.

]

---

## CSS

----

**CSS** significa **C**ascading **S**tyle **S**heet y es una hoja de estilo que convierte:
.pull-left[
Contenido HTML funcional pero .my-red["plano"]

<img src="imagenes/ejemplo_sin_css.png"
width="100%" style="border:2px solid rgba(136, 57, 138, 0.3)"/>
]

<img src="data:image/png;base64,#imagenes/ejemplo_css.png" width="100%" style="border:2px solid rgba(136, 57, 138, 0.3)"/>
]

---
background-color: var(--quarto)
class: center, middle

# Otra opción: Quarto

---
background-color: var(--quarto)

# Historia

<br>
![](data:image/png;base64,#imagenes/linea_tiempo.png)<sup>1</sup>

.footnote[
[1] [Giorgi et al., 2020](https://www.mdpi.com/2075-1729/12/5/648)
]
---
background-color: var(--quarto)

# Quarto reveal js

.pull-left[
- Quarto es un sistema open-source de publicaciones científicas y técnicas construido a partir de Pandoc.

**Ventajas**
  - No depende de un lenguaje de programación en particular 
  - Interfaz de línea de comandos
  - Muchas funciones ya vienen listas para usarse 
{{content}}
]

**Rmarkdown**
<img src="imagenes/quarto_rmarkdown.png" width="100%">

--
.right-up[
**Quarto**
<img src="imagenes/quarto_R.png" width="90%">
{{content}}
]

--
<img src="imagenes/quarto_jupyter.png" width="90%">
{{content}}

--
<img src="imagenes/quarto_jupyter2.png" width="90%">

---
### Paquetes necesarios

- Xaringan:

```r
remotes::install_github('yihui/xaringan')
```

- XaringanExtra

```r
# Opción 1
install.packages("xaringanExtra")
# Opción 2
# install.packages("remotes")
remotes::install_github("gadenbuie/xaringanExtra")
```

- Quarto: Preinstalado con RStudio >= v2023.03
  
  - Icons:

```r
remotes::install_github("mitchelloharawild/icons")
devtools::install_github("hadley/emo")
#install.packages("fontawesome")
#download_fontawesome()
```

---

----

## **Opción 1:** Crear una presentación desde cero.

## **Opción 2:** Usar alguna plantilla

### <svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> [tutorial/ejemplo-diapositivas-xaringan.Rmd](https://github.com/HaydeePeruyero/Xaringan_RLadies/tutorial/ejemplo-diapositivas-xaringan.Rmd)

---

## <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm72 208c-13.3 0-24 10.7-24 24V336v56c0 13.3 10.7 24 24 24s24-10.7 24-24V360h44c42 0 76-34 76-76s-34-76-76-76H136zm68 104H160V256h44c15.5 0 28 12.5 28 28s-12.5 28-28 28z"/></svg> Crear una presentación desde cero

### 2\. 📄 New R Markdown

<img src="data:image/png;base64,#imagenes/picture1.png" width="75%"/>
]

.pull-right[
### 3\. 📝 From Template <svg aria-hidden="true" role="img" viewBox="0 0 320 512" style="height:1em;width:0.62em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg> Ninja Presentation

### 4\. 💾 Editar y guardar documento
]

---

background-color: var(--quarto)

# Quarto revealjs

#### 2\. 📄 New R Quarto Document

<img src="data:image/png;base64,#imagenes/quarto_new_file.png" width="80%"/>
]

]

---
background-color: var(--Purple)
class: middle, center, inverse

---

### <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"/></svg> Usar la plantilla de R-Ladies Morelia

#### YAML

```yaml
title: "Título"
subtitle: "Subtítulo"
author: "Nombre autor"
institute: "R-Ladies Morelia"
date: "2023/05/17"
output:
  xaringan::moon_reader:     # Tipo de salida
    css: [xaringan-themer.css, css/mytheme.css, rladies, rladies-fonts ] # Los temas a usar CSS 
    lib_dir: libs           # Crea un directorio para las bibliotecas
    seal: false             # Permite crear diapositiva de título personalizada 
    self_contained: false   
    nature:
      highlightStyle: github   # Resaltar la sintaxis de los bloques de código con estilo github 
      highlightLines: true    # Permite resaltar líneas de código
      countIncrementalSlides: false  # No incrementa el número de diapositiva para diapositivas graduales
      ratio: 16:9               # Proporción de diapositiva: 4:3
      beforeInit: "archivo.js"  # Agregar los macros, el de columnas
      slideNumberFormat: |          # formato de número de página 
```

---

background-color: var(--quarto)

# Quarto revealjs: YAML

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:900px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/crear_diapositivas.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

#### El bloque de configuración ("Setup")

```r
# Setup chunk
# Paquetes a usar
#options(htmltools.dir.version = FALSE)
library(knitr)
library(tidyverse)
library(xaringanExtra)
library(icons)
library(fontawesome) 
library(emo) 
library(gt)

# set default options de knitr
opts_chunk$set(collapse = TRUE, 
               dpi = 300,  # resolución de los gráficos
               warning = FALSE, # no mostrar mensajes de advertencia
               error = FALSE, # No mostrar mensajes de error en las diapositivas
               comment = "#") # comentarios
```

El contenido de la primera diapositiva comienza debajo de los tres guiones `---` después del `YAML`.

---

# Configuración de los Chunks

En los chunks algunas cosas que se pueden especificar son: `{r setup1, include = FALSE, echo= FALSE, eval=FALSE}`:

- `include = FALSE`: no muestra el código. 
  - `echo = FALSE`: no muestra el resultado en el documento final.
  - `warning = FALSE`: no muestra los warnings.
  - `error = FALSE`: no muestra los mensajes de error.
  - `message = FALSE`: no muestra los mensajes.
  - `collapse = TRUE`: de ser posible colapsa la fuente y outputs de los bloques de código.
  - `eval = FALSE`: no evalúa los códigos, sirve para mostrar bloques de código sin que emita resultados.
  - `fig.dim = c(n,m)`: vector numérico para el tamaño de los plots.
  - `fig.cap:"message"`:para colocar un caption a los plots.
  - `highlight.output=c(n, m)`: resaltar líneas n,m del código.

Otras opciones para los chunks están [aquí](https://yihui.org/knitr/options/#chunk-options).

---

background-color: var(--quarto)

# Quarto revealjs: opciones de chunks

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:900px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/chunks.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

# <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg> Moon Reader

🧶 Para generar las diapositivas tenemos que usar la opción de knit `Moon Reader` o desde la consola 
.left[

```r
xaringan::inf_mr()
```
]

---

background-color: var(--Purple)
class: middle, center, inverse

---

# Sintaxis de Xaringan

Xaringan ocupa tanto código RMarkdown como código de `remarks.js` y `css`.

### RMarkdown:

- Títulos: 
    - `# Título principal`
    - `## Subtítulo`
    - `### Título de 3er nivel`
  - Cursiva: *italic* o _italic_
  - Negrita: **bold** o __bold__
  - Superscript: ^2
  - Tachado: ~~tachado~~
  - Listas: con `*` o `-` y numéricas con `1`
    - `* item 1`
    - `* item 2`
  - Links: `[link](dirección)`
  - Imágenes: `![caption](direccion_imagen)`
  
]

## `remark.js`

- La primera diapositiva comienza después del `YAML` y los `---`
  - Cada diapositiva va después de tres `---`.
  - Diapositivas graduales con `--`
  - Separar encabezado de texto con `----`
  - Notas de orador con `???`

]

---
background-color: var(--quarto)

# Quarto revealjs: Sintaxis

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:900px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/sintaxis.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

# Diapositiva de título

En el `YAML` inicial, se configuró la opción `seal = FALSE` lo cual nos permite configurar nuestra diapositiva de título, si se quita esta opción, entonces la diapositiva de título será la de default del tema.

```r
class: title-slide, middle, center
background-image: url(imagenes/rladies_logo.jpeg) 
background-position: 10% 50%
background-size: 15%

####`r rmarkdown::metadata$author` 
#### `r rmarkdown::metadata$date`

]

---
background-color: var(--quarto)

## Quarto revealjs: diapositiva de título

- Para omitir la diapositiva de título, no se agrega la opción `title` en el YAML y se puede configurar como cualquier diapositiva.
- Para configurar desde el YAML:

```r
---
title: "Titulo de la presentación"
subtitle: "Subtítulo"
title-slide-attributes:
  data-background-image: GOPR0710.JPG
  data-background-size: contain
  data-background-opacity: "0.85"
  
format: 
    revealjs:
        theme: [default, ../custom.scss]
---
```
]

.pull-right[
<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:500px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/diapo_titulo.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

]

---

background-color: var(--Purple)
class: middle, center, inverse

---
class: middle, center
background-color: var(--my-pink)
# <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg> Ubicación de texto
----

Para definir la **alineación** de los elementos de la diapositiva tenemos varias opciones:

### Alinear diapositiva entera
```{{r}}
#class: middle, center

#left,izquierda ; center,centro ; right,derecha

#top,arriba ; middle,medio ; bottom,abajo
```
--
Donde **middle** define la posición vertical y **center** la posición horizontal

---
class: middle, center
# Ubicación de texto

### Alinear solo parte del texto
----

]
--
.right[
Pero para usar toda la diapositiva, completamos a la derecha
]

```r
#.left[Inserta aquí] Añade texto a la **izquierda**
#.center[Inserta aquí] Añade texto al **centro**
#.right[Inserta aquí] Añade texto a la **derecha**
```
----

--
.center[También podemos agregar texto en el centro, 
aunque para esta opción podemos usar solo una de las alineaciones]

---
background-color: var(--Purple)
class: middle, center

# Ubicación de texto

### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg> Columnas con `pull-left` y `pull-right`
--

Generamos clases para organizar por columnas, donde:

```r
#.pull-left[Insertas tu texto]
```

* Abarca el 47% izquierdo de la diapositiva

{{content}}
]

--
* Puede contener imágenes

```r
#.pull-right[Insertas tu texto]
```

* Abarca el otro 47%
]

----
.center[.morado-claro[Puede incluir otras alineaciones y no se empalma 😄]
]

---
class: middle, center

# Ubicación de texto

### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg> Columnas con `left-column` y `right-column`

----

--
Divide el texto de la diapositiva en dos columnas

--
.left-column[

```r
#.left-column[] coloca  una columna a la _izquierda_
```

* Tiene un 20% de ancho de la diapositiva

* **Y el texto es un poco más claro**
]

```r
#.right-column[]` _columna-derecha_ coloca la columna derecha
```

- Tiene un 75% de ancho de la diapositiva
{{content}}
]
--

- Estan fijas para la diapositiva entera
--

----

Estas clases de columnas estan diseñadas para usarse juntas

]

---
class: middle, center
# Ubicación de texto

---

background-color: var(--quarto)

# Quarto revealjs: alineación

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:900px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/alineacion.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

background-color: var(--Purple)
class: middle, center, inverse

---

# Imágenes

Existen tres formas de poner imágenes en una diapositiva.

## Primera opción: Markdown

```markdown
![Logo de RLadies](imagenes/rladies_logo.jpeg)
```

- Es la forma estándar de poner imágenes en Markdown.
  - No es muy flexible 😿 .
  - El tamaño de salida de la imagen depende de la imagen. 
  - Se puede cambiar el tamaño de la imagen con  [macros personalizados](https://slides.yihui.org/xaringan/#33) o con las opciones `{width='500px'}` 😏

]
.pull-right[

]

---

# Imágenes

## Segunda opción: Knit

```r
knitr::include_graphics("imagenes/rladies_logo.jpeg")
```

- Bastante flexible 🙋 .
  - El bloque de código toma espacio.
  - Permite incluir texto alternativo.
  - Se puede configurar dimensión, posición con los atributos del chunk 😏.
  
]
.pull-right[

```r
knitr::include_graphics("imagenes/rladies_logo.jpeg")
```

<div class="figure">
<img src="data:image/png;base64,#imagenes/rladies_logo.jpeg" alt="Logo de R-Ladies Morelia"  />
<p class="caption">Logo de R-Ladies Morelia</p>
</div>

]

---

# Imágenes

## Tercera opción: HTML

```html
<img src="imagenes/rladies_logo.jpeg" width="50%"
alt="logo-rladies"/>
```

- Es la opción más flexible.
  - No tiene apariencia agradable su código
  - Referencia de la [sintaxis](https://www.w3schools.com/html/html_images.asp)

]

.pull-right[
<img src="data:image/png;base64,#imagenes/rladies_logo.jpeg" width="75%"/>
]
---
class: middle, center

## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg> Imagenes

También hay varias formas de seleccionar una imagen de fondo.

----

- `url(https://enlaceweb.aqui)` --> imagen del web
  - `url(img/jacarandas.jpg)` --> imagen local, usando rutas de archivos relativas
  
---

# **"background-image"**
**sin indicar tamaño**

```r
background-image: url("imagenes/rladies_logo.jpeg")
```

----

.right[.morado-claro[ejemplo de `background-image` <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> ]]

---
background-image: url("data:image/png;base64,#imagenes/rladies_logo.jpeg")
class: middle, center, inverse

---
class: middle, center

**Opciones:**

- `background-size:` (_tamaño de la imagen del fondo_)

--
- `cover` --> (_cubrir_) cambia la escala y recorta sin que quede espacio en blanco

--
- `contain` --> (_contener_) cambia la escala solamente

----
.right[.morado-claro[ejemplo de `background-size` <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> ]]

---
background-image: url("data:image/png;base64,#imagenes/rladies_logo.jpeg")
background-size: cover
class: inverse

---
background-image: url("data:image/png;base64,#imagenes/rladies_logo_v.jpeg")
background-size: contain
class: inverse, center, middle

---
class: middle, center

- `background-position:`  (_posición de la imagen del fondo_) [experimenta con esta propiedad](https://css-tricks.com/almanac/properties/b/background-position/)

---
background-image: url("data:image/png;base64,#imagenes/rladies_logo.jpeg")
background-position: left
class: inverse

---
background-image: url("data:image/png;base64,#imagenes/rladies_logo.jpeg")
background-position: right
class: inverse

---
class: inverse, middle, center

# Elementos de <svg aria-hidden="true" role="img" viewBox="0 0 581 512" style="height:1em;width:1.13em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:steelblue;overflow:visible;position:relative;"><path d="M581 226.6C581 119.1 450.9 32 290.5 32S0 119.1 0 226.6C0 322.4 103.3 402 239.4 418.1V480h99.1v-61.5c24.3-2.7 47.6-7.4 69.4-13.9L448 480h112l-67.4-113.7c54.5-35.4 88.4-84.9 88.4-139.7zm-466.8 14.5c0-73.5 98.9-133 220.8-133s211.9 40.7 211.9 133c0 50.1-26.5 85-70.3 106.4-2.4-1.6-4.7-2.9-6.4-3.7-10.2-5.2-27.8-10.5-27.8-10.5s86.6-6.4 86.6-92.7-90.6-87.9-90.6-87.9h-199V361c-74.1-21.5-125.2-67.1-125.2-119.9zm225.1 38.3v-55.6c57.8 0 87.8-6.8 87.8 27.3 0 36.5-38.2 28.3-87.8 28.3zm-.9 72.5H365c10.8 0 18.9 11.7 24 19.2-16.1 1.9-33 2.8-50.6 2.9v-22.1z"/></svg>

---

## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg> Tablas

```r
data(iris)
head(iris)
#   Sepal.Length Sepal.Width Petal.Length Petal.Width Species
# 1          5.1         3.5          1.4         0.2  setosa
# 2          4.9         3.0          1.4         0.2  setosa
# 3          4.7         3.2          1.3         0.2  setosa
# 4          4.6         3.1          1.5         0.2  setosa
# 5          5.0         3.6          1.4         0.2  setosa
# 6          5.4         3.9          1.7         0.4  setosa
```
]

```r
iris %>%
  head() %>%
  knitr::kable(format = "html")
```

<table>
 <thead>
  <tr>
   <th style="text-align:right;"> Sepal.Length </th>
   <th style="text-align:right;"> Sepal.Width </th>
   <th style="text-align:right;"> Petal.Length </th>
   <th style="text-align:right;"> Petal.Width </th>
   <th style="text-align:left;"> Species </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 5.1 </td>
   <td style="text-align:right;"> 3.5 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.9 </td>
   <td style="text-align:right;"> 3.0 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.7 </td>
   <td style="text-align:right;"> 3.2 </td>
   <td style="text-align:right;"> 1.3 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.6 </td>
   <td style="text-align:right;"> 3.1 </td>
   <td style="text-align:right;"> 1.5 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.0 </td>
   <td style="text-align:right;"> 3.6 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.4 </td>
   <td style="text-align:right;"> 3.9 </td>
   <td style="text-align:right;"> 1.7 </td>
   <td style="text-align:right;"> 0.4 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
</tbody>
</table>
]

```r
iris %>%
  head(3)%>%
  DT::datatable()
```

<div class="datatables html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-1e889f91243b921b3f1c" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-1e889f91243b921b3f1c">{"x":{"filter":"none","vertical":false,"data":[["1","2","3"],[5.1,4.9,4.7],[3.5,3,3.2],[1.4,1.4,1.3],[0.2,0.2,0.2],["setosa","setosa","setosa"]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>Sepal.Length<\/th>\n      <th>Sepal.Width<\/th>\n      <th>Petal.Length<\/th>\n      <th>Petal.Width<\/th>\n      <th>Species<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
]
]

---

### [`library(gt)`](https://gt.rstudio.com/index.html)

```r
iris %>% 
  head() %>%
  gt::gt() %>%
  gt::tab_spanner(label = "Petalo", columns = vars(Petal.Length,Petal.Width)) %>%
  gt::tab_spanner(label = "Sepalo", columns = vars(Sepal.Length,Sepal.Width))
```

<div id="mlzhsvabzg" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
}

#mlzhsvabzg .gt_table {
  display: table;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  color: #333333;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  background-color: #FFFFFF;
  width: auto;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #A8A8A8;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #A8A8A8;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
}

#mlzhsvabzg .gt_heading {
  background-color: #FFFFFF;
  text-align: center;
  border-bottom-color: #FFFFFF;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#mlzhsvabzg .gt_caption {
  padding-top: 4px;
  padding-bottom: 4px;
}

#mlzhsvabzg .gt_title {
  color: #333333;
  font-size: 125%;
  font-weight: initial;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 0;
}

#mlzhsvabzg .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 0;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

#mlzhsvabzg .gt_bottom_border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#mlzhsvabzg .gt_col_headings {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#mlzhsvabzg .gt_col_heading {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
}

#mlzhsvabzg .gt_column_spanner_outer {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 4px;
  padding-right: 4px;
}

#mlzhsvabzg .gt_column_spanner_outer:first-child {
  padding-left: 0;
}

#mlzhsvabzg .gt_column_spanner_outer:last-child {
  padding-right: 0;
}

#mlzhsvabzg .gt_column_spanner {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  display: inline-block;
  width: 100%;
}

#mlzhsvabzg .gt_group_heading {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  text-align: left;
}

#mlzhsvabzg .gt_empty_group_heading {
  padding: 0.5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: middle;
}

#mlzhsvabzg .gt_from_md > :first-child {
  margin-top: 0;
}

#mlzhsvabzg .gt_from_md > :last-child {
  margin-bottom: 0;
}

#mlzhsvabzg .gt_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  overflow-x: hidden;
}

#mlzhsvabzg .gt_stub {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
}

#mlzhsvabzg .gt_stub_row_group {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

#mlzhsvabzg .gt_row_group_first td {
  border-top-width: 2px;
}

#mlzhsvabzg .gt_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#mlzhsvabzg .gt_first_summary_row {
  border-top-style: solid;
  border-top-color: #D3D3D3;
}

#mlzhsvabzg .gt_first_summary_row.thick {
  border-top-width: 2px;
}

#mlzhsvabzg .gt_last_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#mlzhsvabzg .gt_grand_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#mlzhsvabzg .gt_first_grand_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: double;
  border-top-width: 6px;
  border-top-color: #D3D3D3;
}

#mlzhsvabzg .gt_striped {
  background-color: rgba(128, 128, 128, 0.05);
}

#mlzhsvabzg .gt_table_body {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#mlzhsvabzg .gt_footnotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#mlzhsvabzg .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding-left: 4px;
  padding-right: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#mlzhsvabzg .gt_sourcenotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#mlzhsvabzg .gt_sourcenote {
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#mlzhsvabzg .gt_left {
  text-align: left;
}

#mlzhsvabzg .gt_center {
  text-align: center;
}

#mlzhsvabzg .gt_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#mlzhsvabzg .gt_font_normal {
  font-weight: normal;
}

#mlzhsvabzg .gt_font_bold {
  font-weight: bold;
}

#mlzhsvabzg .gt_font_italic {
  font-style: italic;
}

#mlzhsvabzg .gt_super {
  font-size: 65%;
}

#mlzhsvabzg .gt_footnote_marks {
  font-style: italic;
  font-weight: normal;
  font-size: 75%;
  vertical-align: 0.4em;
}

#mlzhsvabzg .gt_asterisk {
  font-size: 100%;
  vertical-align: 0;
}

#mlzhsvabzg .gt_indent_1 {
  text-indent: 5px;
}

#mlzhsvabzg .gt_indent_2 {
  text-indent: 10px;
}

#mlzhsvabzg .gt_indent_3 {
  text-indent: 15px;
}

#mlzhsvabzg .gt_indent_4 {
  text-indent: 20px;
}

#mlzhsvabzg .gt_indent_5 {
  text-indent: 25px;
}
</style>
<table class="gt_table">
  
  <thead class="gt_col_headings">
    <tr>
      <th class="gt_center gt_columns_top_border gt_column_spanner_outer" rowspan="1" colspan="2" scope="colgroup" id="Sepalo">
        <span class="gt_column_spanner">Sepalo</span>
      </th>
      <th class="gt_center gt_columns_top_border gt_column_spanner_outer" rowspan="1" colspan="2" scope="colgroup" id="Petalo">
        <span class="gt_column_spanner">Petalo</span>
      </th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="2" colspan="1" scope="col" id="Species">Species</th>
    </tr>
    <tr>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Sepal.Length">Sepal.Length</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Sepal.Width">Sepal.Width</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Petal.Length">Petal.Length</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Petal.Width">Petal.Width</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td headers="Sepal.Length" class="gt_row gt_right">5.1</td>
<td headers="Sepal.Width" class="gt_row gt_right">3.5</td>
<td headers="Petal.Length" class="gt_row gt_right">1.4</td>
<td headers="Petal.Width" class="gt_row gt_right">0.2</td>
<td headers="Species" class="gt_row gt_center">setosa</td></tr>
    <tr><td headers="Sepal.Length" class="gt_row gt_right">4.9</td>
<td headers="Sepal.Width" class="gt_row gt_right">3.0</td>
<td headers="Petal.Length" class="gt_row gt_right">1.4</td>
<td headers="Petal.Width" class="gt_row gt_right">0.2</td>
<td headers="Species" class="gt_row gt_center">setosa</td></tr>
    <tr><td headers="Sepal.Length" class="gt_row gt_right">4.7</td>
<td headers="Sepal.Width" class="gt_row gt_right">3.2</td>
<td headers="Petal.Length" class="gt_row gt_right">1.3</td>
<td headers="Petal.Width" class="gt_row gt_right">0.2</td>
<td headers="Species" class="gt_row gt_center">setosa</td></tr>
    <tr><td headers="Sepal.Length" class="gt_row gt_right">4.6</td>
<td headers="Sepal.Width" class="gt_row gt_right">3.1</td>
<td headers="Petal.Length" class="gt_row gt_right">1.5</td>
<td headers="Petal.Width" class="gt_row gt_right">0.2</td>
<td headers="Species" class="gt_row gt_center">setosa</td></tr>
    <tr><td headers="Sepal.Length" class="gt_row gt_right">5.0</td>
<td headers="Sepal.Width" class="gt_row gt_right">3.6</td>
<td headers="Petal.Length" class="gt_row gt_right">1.4</td>
<td headers="Petal.Width" class="gt_row gt_right">0.2</td>
<td headers="Species" class="gt_row gt_center">setosa</td></tr>
    <tr><td headers="Sepal.Length" class="gt_row gt_right">5.4</td>
<td headers="Sepal.Width" class="gt_row gt_right">3.9</td>
<td headers="Petal.Length" class="gt_row gt_right">1.7</td>
<td headers="Petal.Width" class="gt_row gt_right">0.4</td>
<td headers="Species" class="gt_row gt_center">setosa</td></tr>
  </tbody>
  
  
</table>
</div>

---

background-color: var(--Purple)
class: middle, center, inverse

---

## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/></svg> Plots

#### Código

````
```{r plot, echo=TRUE, fig.height=5, fig.show='hide'}
cl <- c("maroon3", "sienna2", "skyblue1")

p <- ggplot(iris, aes(x=Sepal.Length, y=Sepal.Width))+
  geom_point(aes(colour = Species)) +
  scale_colour_manual(values=cl)+
  labs(title = "Longitud y Ancho Sepal",
       subtitle = "Iris data set",
       x = "Longitud Sepal",
       y = "Ancho Sepal",
       caption = "Datos: Iris data set from `data(iris)`",
       fill = "Especies")
p
```
````

]

#### Plot

![](data:image/png;base64,#xaringan_files/figure-html/plot2-1.png)

]

---

background-color: var(--Purple)
class: middle, center, inverse

---

## <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg> Códigos

La forma de incrustar código en tus presentaciones es con los chunks. Existen varias formas de resaltar código.

````
```{r tidy=FALSE, eval =FALSE}
x <- 1
y <- 2
** z <- x+y
```
````

Produciría

```r
x <- 1
y <- 2
* z <- x+y 
```

]

````
```{r tidy=FALSE, eval=FALSE}
x <- 1
y <- 2
{{ z <- x+y }}
```
````

Produciría

```r
x <- 1
y <- 2
* z <- x+y 
```

]

````
```{r tidy=FALSE, eval=FALSE}
x <- 1
y <- 2
z <- x+y #<<
```
````

Produciría

```r
x <- 1
y <- 2
*z <- x+y
```

]
]

Las opciones de los chunks en los 3 casos son solo para ejemplo, recordar que `eval=FALSE` realizará que no se evalúe el código.

---
background-color: var(--quarto)

## Quarto revealjs: resaltar código

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:900px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/codigo_resaltado.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

background-color: var(--Purple)
class: middle, center, inverse

---

# ¿Cómo compartir nuestras diapositivas?

----

### **Primera opción:**

Con "self_contained: TRUE" en el YAML para <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"/></svg>

### **Segunda opción:**

Alojando tus archivos en un repositorio para <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>

---

#### Pasos para compartir tus diapositivas:

1\. Agrega la opción `self_contained: TRUE` en tu YAML.

2\. En tu repositorio de github, activa la opción de github pages.

3\. Copia el link de la página. Si tu repositorio y archivo `html` estaba en el link

https://github.com/user/nombre_repositorio/blob/main/archivo_xaringan.html

El link a compartir será: https://user.github.io/nombre_repositorio/archivo_xaringan.html

---

### **Tercera opción:**

Con el paquete `XaringanExtra` las puedes incrustar en otros documentos como las que has visto en estas diapositivas. Para esto, debes agregar en tu `setup` lo siguiente:

```r
xaringanExtra::use_share_again()
xaringanExtra::style_share_again(
  share_buttons = c("twitter", "linkedin")
)
```
 
--

Y después en tus documentos:

```r
xaringanExtra::embed_xaringan(url = "https://haydeeperuyero.github.io/Xaringan_RLadies/xaringan.html", ratio = "16:9", max_width = 600)
```

O la opción:

```r
knitr::include_url("https://haydeeperuyero.github.io/Xaringan_RLadies/xaringan.html", height = "150px")
```

---

## Ejemplo:

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:600px;" data-exeternal="1">
<iframe src="https://haydeeperuyero.github.io/Xaringan_RLadies/xaringan.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

# LaTeX

Xaringan soporta incluir código Latex para texto matemático en la forma usual. Las expresiones matemáticas se encierran entre `$`, solo se debe tener cuidado de que no queden junto a texto normal porque de lo contrario se procesará bien. Por ejemplo:

`$S = \frac{1}{n-1} \sum_{i=1}^{n} (x_{i} - \bar{x}) (x_{i}-\bar{x}) ^{T}$` producirá:

`$S = \frac{1}{n-1} \sum_{i=1}^{n} (x_{i} - \bar{x}) (x_{i}-\bar{x}) ^{T}$`

Para incluir ecuaciones centradas, la forma de hacerlo es encerrarlas entre doble `$$`. Por ejemplo:

.pull-left[
`$$\left( \begin{matrix}`
`\sigma_1^2 & \sigma_{12} & \cdots & \sigma_{1n} \\`
`\sigma_{21} & \sigma_2^2 & \cdots & \sigma_{2n} \\`
`\vdots & \vdots & \ddots & \vdots \\`
`\sigma_{n1} & \sigma_{n2} & \cdots & \sigma_{n}^2 `
`\end{matrix} \right)$$` producirá:
]

.pull-right[
`$$\left( \begin{matrix}
\sigma_1^2 & \sigma_{12} & \cdots & \sigma_{1n} \\
\sigma_{21} & \sigma_2^2 & \cdots & \sigma_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
\sigma_{n1} & \sigma_{n2} & \cdots & \sigma_{n}^2 
\end{matrix} \right)$$`
]

---

### XaringanExtra

#### Vista previa

Con la tecla "O" permite ver todas las diapositivas.

```r
xaringanExtra::use_tile_view()
```

#### WebCam

Preciona `W` y `shift + W` 😏.

```r
xaringanExtra::use_webcam()
```

#### Copiar chunks

Agrega el boton de copiar los códigos de los chunks.

```r
xaringanExtra::use_clipboard()
```

---

#### Paneles

Crea paneles impresionantes como los usados en el apartado de tablas.

```r
xaringanExtra::use_panelset()
```

#### Funcionalidades de los chunks

Funcionalidades de los chunks, pone un triangulito junto a la línea que se señala.

```r
xaringanExtra::use_extra_styles(
* hover_code_line = TRUE,
* mute_unhighlighted_code = TRUE
)
```

---

#### Diapositivas editables

Para hacer que aparezca el lápiz y goma.

```r
xaringanExtra::use_scribble()
```

Para tener opciones para hacer editable algún chunk.

```r
xaringanExtra::use_editable(expires = 1)
```

Por ejemplo 😏:

```r
---
.can-edit.key-likes[
- Item 1
- Item 2
]
---
```
]

.can-edit.key-likes[
- Item 1
- Item 2
]
]

---
background-color: var(--quarto)

## Quarto revealjs: Navegación

<div class="shareagain" style="min-width:300px;margin:1em auto;max-width:900px;" data-exeternal="1">
<iframe src="Quarto_ejemplos/navegacion.html" width="1600" height="900" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---

# <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg> Referencias
.pull-left[
- [Presentación Rladies Xalapa Xaringan](https://slides.silviacanelon.com/introduccion-xaringan)
  - [Video presentación R Ladies Xalapa sobre Xaringan](https://www.youtube.com/watch?v=uBXEtM-OHlI&ab_channel=R-LadiesXalapa)
- [Curso de Xaringan avanzado](https://spcanelon.github.io/xaringan-basics-and-beyond/)
- [Curso CSS freecodecamp](https://www.youtube.com/watch?v=OXGznpKZ_sA&ab_channel=freeCodeCamp.org)
  - [Repositorio de recursos del curso (CSS)](https://github.com/gitdagray/css_course)
- [Xaringan](https://bookdown.org/yihui/rmarkdown/xaringan.html)
- [Rmarkdown con Latex](https://github.com/HaydeePeruyero/Rmarkdown_and_LaTeX)
- [Presentaciones revealjs](https://quarto.org/docs/presentations/revealjs/)
]

.pull-right[
- [Tema de RLadies Global](https://www.apreshill.com/project/rladies-xaringan/)
- [Xaringan Extra](https://github.com/gadenbuie/xaringanExtra)
- [Icons](https://github.com/mitchelloharawild/icons)
- [Ejemplo de Sydney-Xaringan](https://github.com/garthtarr/sydney_xaringan/tree/master)
- [`fontawesome`](https://fontawesome.com/)
- [Guia de Quarto revealjs](https://quarto.org/docs/presentations/revealjs/)
]