Introducción al paquete xaringan

class: right, middle, inverse, titular
background-image: url(img/jacarandas.jpg)
background-size: contain
background-position: -66% 10%

<img src="img/hex-xaringan.png" width="125px"/>
# Introducción al<br>paquete xaringan 
## **R-Ladies Xalapa**
### Silvia Canelón, Ph.D.
### 17 diciembre, 2020

[<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> bit.ly/xaringan-xalapa](https://bit.ly/xaringan-xalapa)
<br>[<svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z"/></svg> diapositivas ](https://spcanelon.github.io/xaringan-rladies-xalapa/diapositivas/introduccion-xaringan.html)

---
name: saludo
layout: false
class: inverse, middle, center

# Sobre mí

## Silvia Canelón 🇻🇪

### Investigadora Postdoctoral

.fade[University of Pennsylvania<br>Philadelphia, PA, USA]

[<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="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg> silvia.rbind.io](https://silvia.rbind.io)
[<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="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> @spcanelon](https://twitter.com/spcanelon)
[<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> @spcanelon](https://github.com/spcanelon)

---
class: center, middle

# Agradecimientos

----

<img src="img/rladies-xalapa.jpg"
width="150px"
/><br>
## [R-Ladies Xalapa](https://www.meetup.com/rladies-xalapa)

### [📦 xaringan](https://github.com/yihui/xaringan#xaringan): Hoy usaremos el [tema de R-Ladies](https://alison.rbind.io/post/2017-12-18-r-ladies-presentation-ninja/)

### [📦 xaringanExtra](https://github.com/gadenbuie/xaringanExtra/#xaringanExtra): Presiona la tecla "O" para ver todas las diapositivas a la vez 😉

---
name: pregunta
class: inverse, middle, center

---
template: pregunta

----

## Con la ayuda de...

### remark.js

### xaringan

### CSS

---

## remark.js

----

.pull-left[
.center[
### <i class="fab fa-js fa-3x"></i><br>JavaScript

### **y**

### <i class="fab fa-markdown fa-3x"></i><br>Markdown
]
]

.pull-right[
> Una herramienta sencilla para presentaciones de diapositivas basadas en Markdown a traves del navegador web.

---
##  xaringan

----

.pull-left[
.center[
![:scale 30%](img/hex-xaringan.png)

**xaringan** es un paquete que le presenta<br>`remark.js` a R Markdown

![:scale 20%](img/hex-rmarkdown.png)
]]
.pull-right[
<iframe src="https://slides.yihui.org/xaringan" width="100%" height="400px" data-external="1"></iframe>
[https://slides.yihui.org/xaringan](https://slides.yihui.org/xaringan)
]

---
## CSS

----

**CSS** significa **C**ascading **S**tyle **S**heet y es una hoja de estilo que convierte...
.pull-left[
Contenido HTML que es funcional, pero aburrido...

<img src="img/ej-sin-css.png"
alt="imagen de una diapositiva en blanco y negro y con la fuente Times New Roman que viene estándar en páginas web"
width="100%" style="border:2px solid rgba(136, 57, 138, 0.3)"/>
]

.pull-right[
...¡en contenido HTML con estilo! 😎

<img src="img/ej-con-css.png"
alt="imagen de una diapositiva en color y con una fuente personalizada"
width="100%" style="border:2px solid rgba(136, 57, 138, 0.3)"/>
]

???
Remark nos ayuda a:
- crear una diapositiva nueva (usando sintaxis de Markdown y propiedades de la diapositiva);
- formatear la diapositiva (p.ej. con alineación del texto);
- y presentar (usando atajos de teclado)

---
template: pregunta

----

## **Primera opción:** Crear una presentación desde cero

## **Segunda opción:** Usar la plantilla hecha para R-Ladies Xalapa

### <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-de-diapositivas.Rmd](https://github.com/spcanelon/xaringan-rladies-xalapa/blob/master/tutorial/ejemplo-de-diapositivas.Rmd)

---

.pull-left[
### 1\. 📄 New File

### 2\. 📄 New R Markdown

<img src="img/rmd-xaringan-1.png"
alt="el camino dentro de RStudio para crear un nuevo archivo RMarkdown es File > New File, R Markdown"
width="75%"/>
]

.pull-right[
### 3\. 📝 From Template <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="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"/></svg> Ninja Presentation

### 4\. 💾 ¡Ahora guarda tu nuevo documento!
]

---
name: en-vivo
background-color: var(--morado-claro)
class: middle, center, inverse

---
template: en-vivo

## ¡Comencemos!

---

## <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="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg> Usar la plantilla hecha para R-Ladies Xalapa

### YAML

```yaml
---
title: "Título de la Presentación"
subtitle: "Subtítulo de la Presentación"
author: "Nombre de la autora"
institute: "R-Ladies Xalapa"
date: "Fecha"
output:
  xaringan::moon_reader:                 # ¡Ojo -- nuevo tipo de salida!
*   css:
*    - default                           # el archivo CSS del tema predeterminado para xaringan
*    - rladies                           # el archivo CSS del tema R-Ladies
*    - rladies-fonts                     # el archivo CSS de fuentes del tema R-Ladies
    lib_dir: libs                        # crea un directorio para bibliotecas
*   seal: false                          # false: permite crear una diapositiva de título personalizada
    nature:
      highlightStyle: github             # resalta sintaxis para los bloques de código
      highlightLines: true               # true: permite resaltar líneas de código  
      countIncrementalSlides: false      # false: diapositivas incrementales no aumentarán la cuenta
*     ratio: "4:3"                       # proporción: "16:9" para un tamaño de pantalla ancha
---
```

---
## <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="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/></svg> Usar la plantilla hecha para R-Ladies Xalapa

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

```r
library(knitr)                              # paquete que trae funciones utiles para R Markdown
library(tidyverse)                          # paquete que trae varios paquetes comunes en el tidyverse
library(datos)                              # paquete que viene con datos populares traducidos al español :)
library(fontawesome)                               # paquete para iconos
library(emo)                                # paquete para emojis

# opciones predeterminadas
knitr::opts_chunk$set(echo = FALSE,         # FALSE: los bloques de código NO se muestran
                      dpi = 300,            # asegura gráficos de alta resolución
                      warning = FALSE,      # los mensajes de advertencia NO se muestran
                      error = FALSE)        # los mensajes de error NO se muestran
```

---

### ¡Con la función del Moon Reader (_lector de luna?_) podemos ver cambios en tiempo real!

**Primera opción**. Ejecute la función xaringan `infinite_moon_reader()` o `inf_mr()` en tu consola 🚀

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

**Segunda opción**. Accede la función usando el menu en RStudio: **Addins >> XARINGAN Infinite Moon Reader**

---
template: en-vivo

## ¡A generar las diapositivas!

---

# Sintaxis de xaringan

### ¿Qué notas en el código que te parece conocido?

.pull-left[

### Tal vez conocido de **Markdown**

- Encabezados (#, ##, ###)
- **Negrita** y _cursiva_
- Enlaces con `[]()`
- Listas de puntos que se pueden crear con `-`, `+`, or `*`
- Listas enumeradas que se pueden crear con `1.`
]

.pull-right[
### Esto no es tan conocido, y viene de **remark.js**
- La primera diapositiva comienza después del YAML
- Diapositivas se separan una de otra con<br>tres guiones (`---`)
- Diapositivas incrementales se separan con<br>dos guiones (`--`)
- Contenido de la diapositiva se separa de las notas de la presentadora con tres signos de interrogación (`???`)
]

---
template: en-vivo

---
template: pregunta

----

### <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="M296 32h192c13.255 0 24 10.745 24 24v160c0 13.255-10.745 24-24 24H296c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24zm-80 0H24C10.745 32 0 42.745 0 56v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zM0 296v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm296 184h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H296c-13.255 0-24 10.745-24 24v160c0 13.255 10.745 24 24 24z"/></svg>&nbsp;&nbsp; ubicación

---
name: ubicacion
## <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="M296 32h192c13.255 0 24 10.745 24 24v160c0 13.255-10.745 24-24 24H296c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24zm-80 0H24C10.745 32 0 42.745 0 56v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zM0 296v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm296 184h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H296c-13.255 0-24 10.745-24 24v160c0 13.255 10.745 24 24 24z"/></svg> Ubicación

---
template: ubicacion

### Alinear una dispositiva entera

.left-column[

Horizontalmente

```r
left,    # izquierda
*center,  # centro
right    # derecha
```

----

Verticalmente

```r
top,     # arriba
*middle,  # medio
bottom   # abajo
```
]

.right-column[

```r
---

*class: center, middle

# Diapositiva con contenido centrado y en el medio de la diapositiva

Este contenido tambien esta centrado y en el medio de la diapositiva

---
```

.right[.morado-claro[ejemplo en la diapositiva que sigue <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="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"/></svg> ]]
]

---
class: center, middle

# Diapositiva con contenido centrado y en el medio de la diapositiva

Este contenido tambien esta centrado y en el medio de la diapositiva

---
template: ubicacion

### Alinear solo parte del texto

.left-column[
Solamente horizontalmente

```r
*.left[palabras]
.center[palabras]
*.right[palabras]
```
]

.right-column[
```r
---

class: center, middle

# Diapositiva con algo de texto alineado

*.left[Podemos comenzar a escribir una oración a mano izquierda...]

*.right[...y terminar a mano derecha.]

---
```

]

---
class: center, middle

# Diapositiva con algo de texto alineado

.left[Podemos comenzar a escribir una oración a mano izquierda...]

.right[...y terminar a mano derecha.]

---
template: ubicacion

### Jalar el contenido a un lado de la diapositiva

.pull-left[
**La clase `.pull-left[]` (_jalar-izquierda_) jala contenido al 47% izquierdo**

Como el texto arriba y la etiqueta hexagonal de abajo

![:scale 30%](img/hex-rmarkdown.png)
]

.pull-right[
**La clase `.pull-right[]` (_jalar-derecha_) jala contenido al 47% derecho**

Ya has visto hoy el uso de estas clases de contenido 😄
<br>

![:scale 30%](img/hex-xaringan.png)

]

El uso de estas clases no tiene por que ocupar la diapositiva entera. Por ejemplo, puedes decidir que quieres continuar escribiendo texto que no sea jalado para ningun lado.

---
template: ubicacion

### Organizar el contenido en un diseño de dos columnas

.left-column[
**`.left-column[]` (_columna-izquierda_) coloca el contenido en una columna que tiene un 20% de ancho de la diapositiva**

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

.right-column[
**`.right-column[]` (_columna-derecha-) coloca contenido en una columna que tiene un 75% de ancho de la diapositiva**
- Tambien tiene un _poquito_ de relleno por arriba

- Y a diferencia de las clases de contenido `.pull` (_jalar_), estas clases de columnas estan fijas para la diapositiva entera
- Estas clases de columnas estan diseñadas para usarse juntas

.center[
![:scale 15%](img/hex-xaringan.png)]
]

---
template: en-vivo

---
name: imagenes
## <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="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"/></svg> Imagenes

---
template: imagenes

### **Primera opción:** Markdown
.pull-left[

```markdown
!["flores púrpuras"](img/jacarandas.jpg)
```

- opción sencilla
- no es muy flexible
- el tamaño de salida depende del tamaño de la imagen, pero el escalado se puede administrar mediante [macros (funciones JavaScript) personalizados](https://slides.yihui.org/xaringan/#33)
- Foto tomada por [Junel Mujar](https://unsplash.com/@junelmujar)
]

.pull-right[
![](img/jacarandas.jpg)
]

---
template: imagenes

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

.pull-left[

```r
knitr::include_graphics("img/jacarandas.jpg")
```

- bastante flexible
- el bloque de código toma espacio
- permite incluír text alternativo mediante la opción de bloque [`fig.alt`](https://www.rstudio.com/blog/knitr-fig-alt/)
- ofrece [varias opciones](https://www.rdocumentation.org/packages/knitr/versions/1.30/topics/include_graphics)
]

.pull-right[
<img src="img/jacarandas.jpg" width="90%" />
]

---
template: imagenes

### **Tercera opción:** HTML
.pull-left[

```html
<img src="img/jacarandas.jpg" width="90%"
alt="flores púrpuras"/>
```
- la opción más flexible
- no tiene apariencia agradable
- toma un poco de tiempo acostumbrarse [al sintaxis](https://www.w3schools.com/html/html_images.asp)
- 👀 **Ojo:** Para insertar un avatar:

```html
<img src="https://enlaceweb.aqui" 
width="150px" 
alt="foto de la presentadora"
style="border-radius: 50%;"/>
```
]

.pull-right[
<img src="img/jacarandas.jpg" width="90%"/>
]

---
template: imagenes

### Rutas de imagenes

Yo recomiendo esta estructura de directorio (p.ej. ruta de archivo: `img/jacarandas.jpg`)

```r
.
*├── img
*   ├── jacarandas.jpg
├── libs
├── introduccion-xaringan.Rmd
└── introduccion-xaringan.html
```

---
template: imagenes

### Background (_fondo_)

Puedes usar la propiedad [background-image ](https://github.com/gnab/remark/wiki/Markdown#background-image) por debajo del separador de diapositivas (`---`)

- `background-image:` (_imagen del fondo_)
  - `url(https://enlaceweb.aqui)` --> imagen del web
  - `url(img/jacarandas.jpg)` --> imagen local, usando rutas de archivos relativas
- `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
- `background-position:`  (_posición de la imagen del fondo_) [experimenta con esta propiedad](https://css-tricks.com/almanac/properties/b/background-position/)

.right[.morado-claro[¡ejemplos de `background-size` en acció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:currentColor;overflow:visible;position:relative;"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"/></svg> ]]

---
background-image: url(img/jacarandas.jpg)
class: middle, center, inverse

# **Sin indicar "background-size"**
**Tamaño de la imagen: 4538x3408**

---
background-image: url(img/jacarandas.jpg)
background-size: cover
class: middle, center, inverse

# **background-size: cover**
### (cubrir)

---
background-image: url(img/jacarandas.jpg)
background-size: contain
class: middle, center, inverse

# **background-size: contain**
### (contener)

---
template: en-vivo

---
template: pregunta

----

### <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="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>&nbsp;&nbsp; gráficos

---
name: tablas
## <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="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"/></svg> Tablas

---
template: tablas

### Salida directa

```r
datos::pinguinos %>% 
  head()
## # A tibble: 6 × 8
##   especie isla   largo_pico_mm alto_pico_mm largo_aleta_mm masa_corporal_g sexo 
##   <fct>   <fct>          <dbl>        <dbl>          <int>           <int> <fct>
## 1 Adelia  Torge…          39.1         18.7            181            3750 macho
## 2 Adelia  Torge…          39.5         17.4            186            3800 hemb…
## 3 Adelia  Torge…          40.3         18              195            3250 hemb…
## 4 Adelia  Torge…          NA           NA               NA              NA <NA> 
## 5 Adelia  Torge…          36.7         19.3            193            3450 hemb…
## 6 Adelia  Torge…          39.3         20.6            190            3650 macho
## # … with 1 more variable: anio <int>
```

.footnote[
> El paquete [`datos` ](https://cienciadedatos.github.io/datos/) provee la traducción al español de conjuntos de datos en inglés originalmente disponibles en otros paquetes de R, como [palmerpenguins](https://allisonhorst.github.io/palmerpenguins/)

> La autora principal del paquete `datos` es "R-Lady" [Riva Quiroga](https://twitter.com/rivaquiroga) 👏
]
---
template: tablas

### Tabla HTML

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

<table>
 <thead>
  <tr>
   <th style="text-align:left;"> especie </th>
   <th style="text-align:left;"> isla </th>
   <th style="text-align:right;"> largo_pico_mm </th>
   <th style="text-align:right;"> alto_pico_mm </th>
   <th style="text-align:right;"> largo_aleta_mm </th>
   <th style="text-align:right;"> masa_corporal_g </th>
   <th style="text-align:left;"> sexo </th>
   <th style="text-align:right;"> anio </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Adelia </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.1 </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 181 </td>
   <td style="text-align:right;"> 3750 </td>
   <td style="text-align:left;"> macho </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelia </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.5 </td>
   <td style="text-align:right;"> 17.4 </td>
   <td style="text-align:right;"> 186 </td>
   <td style="text-align:right;"> 3800 </td>
   <td style="text-align:left;"> hembra </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelia </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 40.3 </td>
   <td style="text-align:right;"> 18.0 </td>
   <td style="text-align:right;"> 195 </td>
   <td style="text-align:right;"> 3250 </td>
   <td style="text-align:left;"> hembra </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelia </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:left;"> NA </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelia </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 36.7 </td>
   <td style="text-align:right;"> 19.3 </td>
   <td style="text-align:right;"> 193 </td>
   <td style="text-align:right;"> 3450 </td>
   <td style="text-align:left;"> hembra </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelia </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.3 </td>
   <td style="text-align:right;"> 20.6 </td>
   <td style="text-align:right;"> 190 </td>
   <td style="text-align:right;"> 3650 </td>
   <td style="text-align:left;"> macho </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
</tbody>
</table>

---
template: tablas

### Tabla [DT](https://rstudio.github.io/DT)

```r
datos::pinguinos %>% 
  head() %>%
  DT::datatable()
```

<div id="htmlwidget-e8a9fc5be07bfaf18ca5" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-e8a9fc5be07bfaf18ca5">{"x":{"filter":"none","data":[["1","2","3","4","5","6"],["Adelia","Adelia","Adelia","Adelia","Adelia","Adelia"],["Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen"],[39.1,39.5,40.3,null,36.7,39.3],[18.7,17.4,18,null,19.3,20.6],[181,186,195,null,193,190],[3750,3800,3250,null,3450,3650],["macho","hembra","hembra",null,"hembra","macho"],[2007,2007,2007,2007,2007,2007]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>especie<\/th>\n      <th>isla<\/th>\n      <th>largo_pico_mm<\/th>\n      <th>alto_pico_mm<\/th>\n      <th>largo_aleta_mm<\/th>\n      <th>masa_corporal_g<\/th>\n      <th>sexo<\/th>\n      <th>anio<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[3,4,5,6,8]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---
template: tablas

### Tabla [GT](https://gt.rstudio.com/index.html)

```r
datos::pinguinos %>% 
  head() %>%
  gt::gt() %>%
  gt::tab_spanner(label = "pico", columns = vars(largo_pico_mm, alto_pico_mm))
```

<div id="qxxhadtvig" style="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;
}

#qxxhadtvig .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;
}

#qxxhadtvig .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;
}

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

#qxxhadtvig .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 0;
  padding-bottom: 4px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

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

#qxxhadtvig .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;
}

#qxxhadtvig .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;
}

#qxxhadtvig .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;
}

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

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

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

#qxxhadtvig .gt_group_heading {
  padding: 8px;
  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;
}

#qxxhadtvig .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;
}

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

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

#qxxhadtvig .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;
}

#qxxhadtvig .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: 12px;
}

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

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

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

#qxxhadtvig .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;
}

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

#qxxhadtvig .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;
}

#qxxhadtvig .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;
}

#qxxhadtvig .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding: 4px;
}

#qxxhadtvig .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;
}

#qxxhadtvig .gt_sourcenote {
  font-size: 90%;
  padding: 4px;
}

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

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

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

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

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

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

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

#qxxhadtvig .gt_footnote_marks {
  font-style: italic;
  font-weight: normal;
  font-size: 65%;
}
</style>
<table class="gt_table">
  
  <thead class="gt_col_headings">
    <tr>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="2" colspan="1">especie</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="2" colspan="1">isla</th>
      <th class="gt_center gt_columns_top_border gt_column_spanner_outer" rowspan="1" colspan="2">
        <span class="gt_column_spanner">pico</span>
      </th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="2" colspan="1">largo_aleta_mm</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="2" colspan="1">masa_corporal_g</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="2" colspan="1">sexo</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="2" colspan="1">anio</th>
    </tr>
    <tr>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">largo_pico_mm</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">alto_pico_mm</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td class="gt_row gt_center">Adelia</td>
<td class="gt_row gt_center">Torgersen</td>
<td class="gt_row gt_right">39.1</td>
<td class="gt_row gt_right">18.7</td>
<td class="gt_row gt_right">181</td>
<td class="gt_row gt_right">3750</td>
<td class="gt_row gt_center">macho</td>
<td class="gt_row gt_right">2007</td></tr>
    <tr><td class="gt_row gt_center">Adelia</td>
<td class="gt_row gt_center">Torgersen</td>
<td class="gt_row gt_right">39.5</td>
<td class="gt_row gt_right">17.4</td>
<td class="gt_row gt_right">186</td>
<td class="gt_row gt_right">3800</td>
<td class="gt_row gt_center">hembra</td>
<td class="gt_row gt_right">2007</td></tr>
    <tr><td class="gt_row gt_center">Adelia</td>
<td class="gt_row gt_center">Torgersen</td>
<td class="gt_row gt_right">40.3</td>
<td class="gt_row gt_right">18.0</td>
<td class="gt_row gt_right">195</td>
<td class="gt_row gt_right">3250</td>
<td class="gt_row gt_center">hembra</td>
<td class="gt_row gt_right">2007</td></tr>
    <tr><td class="gt_row gt_center">Adelia</td>
<td class="gt_row gt_center">Torgersen</td>
<td class="gt_row gt_right">NA</td>
<td class="gt_row gt_right">NA</td>
<td class="gt_row gt_right">NA</td>
<td class="gt_row gt_right">NA</td>
<td class="gt_row gt_center">NA</td>
<td class="gt_row gt_right">2007</td></tr>
    <tr><td class="gt_row gt_center">Adelia</td>
<td class="gt_row gt_center">Torgersen</td>
<td class="gt_row gt_right">36.7</td>
<td class="gt_row gt_right">19.3</td>
<td class="gt_row gt_right">193</td>
<td class="gt_row gt_right">3450</td>
<td class="gt_row gt_center">hembra</td>
<td class="gt_row gt_right">2007</td></tr>
    <tr><td class="gt_row gt_center">Adelia</td>
<td class="gt_row gt_center">Torgersen</td>
<td class="gt_row gt_right">39.3</td>
<td class="gt_row gt_right">20.6</td>
<td class="gt_row gt_right">190</td>
<td class="gt_row gt_right">3650</td>
<td class="gt_row gt_center">macho</td>
<td class="gt_row gt_right">2007</td></tr>
  </tbody>
  
  
</table>
</div>

---
name: graficos
## <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="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg> Gráficos

---
template: graficos

.pull-left[
### Código

```r
datos::pinguinos %>%
  ggplot(aes(x = especie, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = isla))
```

]

.pull-right[

### Salida

😱 ¡Ah! ¿Qué pasó aquí?

![](index_files/figure-html/unnamed-chunk-14-1.png)

]

---
template: graficos
name: grafico-derecha

.pull-left[
### Código

Es común tener que [ajustar el tamaño del gráfico de salida](https://bookdown.org/yihui/rmarkdown-cookbook/figure-size.html) con opciones de bloque ("chunk options") como `fig.height` (_altura de la figura_) y `fig.width` (_ancho de la figura_)

Solución con un ajuste usando `fig.height = 5`:

````
```{r, fig.height = 5}
datos::pinguinos %>%
  ggplot(aes(x = especie, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = isla))
```
````

- **Nota:** La unidad de medida aqui es _pulgadas_
]

.pull-right[

### Salida
😌 ¡Mucho mejor!

]

---
template: pregunta

# ¿Cómo compartimos 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="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"/></svg>

### **Segunda opción:** Alojando tus archivos en un repositorio 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="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>

---

1\. Agregue una línea al YAML

```yaml
---
title: "Título de la Presentación"
subtitle: "Subtítulo de la Presentación"
author: "Nombre de la autora"
institute: "R-Ladies Xalapa"
date: "Fecha"
output:
  xaringan::moon_reader:                 # ¡Ojo -- nuevo tipo de salida!
    css:
     - default                           # el archivo CSS del tema predeterminado para xaringan
     - rladies                           # el archivo CSS del tema R-Ladies
     - rladies-fonts                     # el archivo CSS de fuentes del tema R-Ladies
    lib_dir: libs                        # crea un directorio para bibliotecas
    seal: false                          # false: permite crear una diapositiva de título personalizada
*   self_contained: true                 # true: permite generar un archivo html independiente
    nature:
      highlightStyle: github             # resalta sintaxis para los bloques de código
      highlightLines: true               # true: permite resaltar líneas de código  
      countIncrementalSlides: false      # false: diapositivas incrementales no aumentarán la cuenta
      ratio: "4:3"                       # proporción: "16:9" para un tamaño de pantalla ancha
---
```

2\. "Teje" el documento con el botón Knit de RStudio 🧶

---
template: en-vivo
background: url(https://tenor.com/yPym.gif)

## ¡Vamos a compartir las diapositivas!

---

## <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="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg> Generar un enlace para las diapositivas que se puede compartir

### 1\. Activa GitHub/GitLab Pages para tu repositorio para renderizar tus archivos HTML

### 2\. Determina el enlace que le corresponde a tus diapositivas, por ejemplo:

http://www.github.com/spcanelon/xaringan-rladies-xalapa/blob/master/tutorial/ejemplo-de-diapositivas.html

### se convierte en

**http://spcanelon.github.io/xaringan-rladies-xalapa/tutorial/ejemplo-de-diapositivas.html**

### 3\. ¡Comparte el enlace!

✅ Estos pasos funcionan para cualquier repositorio público y cualquier archivo HTML renderizado

---
class: inverse, middle, left

.pull-left[
> Si quieres aprender más sobre xaringan y te sientes cómoda con el inglés, puedes conseguir más en:

> - El libro [R Markdown](https://bookdown.org/yihui/rmarkdown/xaringan.html)
> - Mi taller extensivo titulado<br>"[Sharing Your Work with xaringan](https://spcanelon.github.io/xaringan-basics-and-beyond)"
]

--
.pull-right[
<img style="border-radius: 50%;" src="https://silvia.rbind.io/authors/silvia/avatar.png" width="170px"/>
# ¡Muchísimas gracias!

### Aqui es donde me puedes conseguir...

.right[
[silvia.rbind.io <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="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>](https://silvia.rbind.io)<br/>
[@spcanelon <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="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>](https://twitter.com/spcanelon)<br/>
[@spcanelon <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>](https://github.com/spcanelon)<br/>
]]

---
template: pregunta

---
# Resaltando los bloques de código

Otras opciones que ofrece **remark.js** para resaltar tu código con [highlightStyle](https://github.com/gnab/remark/wiki/Configuration#highlighting) son:

+ `arta`, `ascetic`, `dark`, `default`, `far`, `github`, `googlecode`,   `idea`, `ir-black`, `magula`, `monokai`, `rainbow`, `solarized-dark`, `solarized-light`, `sunburst`, `tomorrow`, `tomorrow-night-blue`, `tomorrow-night-bright`, `tomorrow-night`, `tomorrow-night-eighties`, `vs`, `zenburn`.

---

# Creando código+gráfico lado-a-lado

Aqui aprovechamos las opciones de los bloques para evitar repetir el código<sup/>1</sup>

1. Código a la izquierda, gráfico a la derecha ([ejemplo](#grafico-derecha-error))

- Bloque 1: `{r grafico-derecha, fig.show = 'hide'}`
  - Bloque 2: `{r ref.label = 'grafico-derecha', echo = FALSE}`

2. Gráfico a la izquierda, código a la derecha
  - Bloque 1: `{r grafico-izquierda, echo = FALSE}`
  - Bloque 2: `{r ref.label = 'grafico-izquierda', fig.show = 'hide'}`

.footnote[
1. Estos consejos y más en la charla de Alison Hill titulada ["Teaching in Production"](https://rstudio-education.github.io/teaching-in-production/slides/index.html#46)
]

---

# Agregando iconos

😄 [📦 emo(ji)](https://github.com/hadley/emo#emoji)

---
# Fuentes de imagenes

👀 **Ojo:**  Puedes utilizar la clase `.footnote[]` para acreditar la fuente de la imagen

.pull-left[
- [unsplash.com](unsplash.com)
- [rawpixel.com](rawpixel.com)
- [pexels.com](https://www.pexels.com/)
]

.pull-right[
> - En el dominio publico<br>(sin necesidad de atribución)
> - Gratis con atribución<br>(p.ej. Foto tomada por [Junel Mujar](https://unsplash.com/@junelmujar))
]

---

.pull-left[
## Para practicar<br><svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg><br>
]

.pull-right[
### Haz una diapositiva para saludar a tu audiencia

----

Piense en incluir detalles como tu<br>
nombre, instituto, ubicación, y/o información de contacto

Aqui hay algunas opciones:
- practique cambiando [la ubicación](#ubicacion) del contenido en la diapositiva
- separa tu contenido con una barra horizontal `----`
- agreque una [imagen](#imagenes) o foto
- agregue un enlace a una página web o red social
]

---
.pull-left[
## Para practicar<br><svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg><br>
]

.pull-right[
### Haz una nueva dispositiva y practique agregando contenido de R

----

Aqui hay unas opciones:
- agregue una [tabla](#tablas)
- agregue un [gráfico](#graficos)
]