Xaringan-Parte1.Rmd

---
title: "Xaringan"
author: "Miriam Lerma"
date: "Abril 2021"
output:
  xaringan::moon_reader:
    css: Rmd-themer-darker.css
    seal: false
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: true
---
```{r metathis, include = FALSE}
#Con esta libreria puedo poner informacion que saldra en el titulo, en los buscadores y demas, como de titulo y fechas. Asi como elegir la imagen que saldra de inicio.

library(metathis)
meta() %>%
  meta_name("github-repo" = "MiriamLL/Curso_CIAD") %>%
  meta_social(
    title = "Xaringan",
    description = paste0(
      "Introduccion a Rmd",
      "Curso de R"),
    url = "https://github.com/MiriamLL/Curso_CIAD/blob/main/Clase11.html",
    image_alt = paste0(
      "Introduccion a R y RStudio",
      "Curso de R"),
    og_type = "website",
    og_author = "Miriam Lerma",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@MiriamLL",
    twitter_site = "@MiriamLL")
```

```{r include = FALSE}
#Paquetes
library(xaringanExtra)
library(kableExtra)
options(knitr.table.format = "latex")
```

class: title-slide, center, middle
background-image: url(https://images.unsplash.com/photo-1484291470158-b8f8d608850d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80)
background-size: cover

### `r text_spec("Presentar tus resultados usando", background = "#1d3557", color = "white", bold = T)`
# `r text_spec("Xaringan", background = "#1d3557", color = "white", bold = T, font_size=120)`

<br>
<h2>`r text_spec("Miriam Lerma", background = "#264653", color = "white", bold = T)`</h2>

<h3>`r text_spec("Abril 2021", background = "#0A121F", color = "white", bold = T)`</h3>


---
class: inverse

# Intro

- [Que es Xaringan](#intro)  
- [Como agregar fondos](#fondos)
- [Como agregar imagenes](#imagenes)
- [Como agregar tablas](#tablas)
- [Como agregar graficas](#graficas)  


```{r, echo=FALSE}
library(emo)
library(fontawesome)
ColorEnlace<-'#4cc9f0'
ColorEnlaceInverso<-"#74c69d"

#CincoColores InverseFondo#020A0C, InverseText #D9D3D3, InverseLink #0FA5A6
xaringanExtra::use_clipboard()
```

```{r xaringan-panelset, echo=FALSE}
xaringanExtra::use_panelset()
```

## Ustedes

- Tienen conocimientos básicos Rmd o md.   
- Quieren poder hacer una presentación desde RStudio.

## Responder en el chat 💬
- En que programa realizan sus presentaciones?
- Han escuchado de Xaringan? A que les suena ?

---

class: inverse

# Créditos y recursos

- Desarrolladores<br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Xaringan por Yihui Xie](https://github.com/yihui/xaringan)<br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Xaringan-themer por Garrick Aden-Buie](https://www.garrickadenbuie.com/)<br>

- Tutoriales en español<br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Introduccion a Xaringan por Silvia Canelon](https://silvia.rbind.io/talk/2020-12-17-introduccion-xaringan/)<br>

- Tutoriales en inglés<br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Xaringan avanzado por Silvia Canelon](https://spcanelon.github.io/xaringan-basics-and-beyond/)<br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Xaringan por Alison Hill](https://alison.rbind.io/talk/2019-rsc-xaringan/)<br>

- Básicos de <br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Que es CSS](https://www.w3.org/Style/CSS/Overview.en.html)<br>
[`r fa("external-link-alt", fill = ColorEnlaceInverso)` Trucos de CSS](https://css-tricks.com/almanac/)

- El paquete [datos](https://cienciadedatos.github.io/datos/) por [Riva Quiroga](https://twitter.com/rivaquiroga)

- Portada de [unsplash](https://unsplash.com/)

---
name: intro

## 1.1. Xaringan

Xaringan fue desarrollado por **[`r fa("external-link-alt", fill = ColorEnlace)` Yihui Xie](https://github.com/yihui/xaringan)** <br>

La principal **ventaja** de usar Xaringan es que podemos hacer presentaciones mostrando código.

También que podemos hacer nuestros análisis y presentar nuevos resultados sin tener que salir de RStudio.

Ademas, si hay conexión de Internet olvídense de necesitar una USB. 

El nombre **Xaringan** proviene de una caricatura.

<br>
.right[
```{r echo=FALSE, out.width=150}
knitr::include_graphics('https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg')
```
]

---

## 1.2. Instalar el paquete

Para instalar el paquete hay dos opciones:

- En RStudio
```{r eval=FALSE}
install.packages('xaringan')
```

- Desde [Github](https://github.com/yihui/xaringan) 
```{r eval=FALSE}
devtools::install_github("yihui/xaringan")
```

---

## 1.3. Como funciona?

- La primera diapositiva comienza después del **YAML**
- Las diapositivas se separan una de la otra con usando tres guiones **(---)**
- Diapositivas increméntales se separan con dos guiones **(--)**

--- 

**Nota** <br>
Es importante no tener espacios después de los guiones. Si no aparecerá una raya.

--- 


---

## 1.4. Texto

Para escribir texto se usa lo mismo que en Rmd. <br>
Para recordar como escribir texto en [`r fa("external-link-alt", fill = ColorEnlace)` Rmd](https://miriamll.github.io/Curso_CIAD/Rmd-Parte1)

- Encabezados usando numerales (#, ##, ###)<br>
- Negrita y cursiva usando asteriscos (*)<br>
- Enlaces con corchetes y paréntesis [ ] ( ) <br>
- Listas de puntos que se pueden crear con -, +, o con *<br>

---

## 1.5. Mover contenido

Para seleccionar donde aparecerá el contenido se puede escribir **class** antes del contenido y después de los tres guiones.

```{r, eval=FALSE}
--- 
class: center, middle
```

Para mover el contenido de manera **horizontal** `r fa("arrows-alt-h", fill = ColorEnlace)` se debe especificar en la clase  
```{r,eval=FALSE}
- left
- center
- right
```

Para mover el contenido de manera **vertical** `r fa("arrows-alt-v", fill = ColorEnlace)` se debe especificar en la clase
```{r,eval=FALSE}
- top
- middle
- bottom
```

Estas instrucciones se basan en [`r fa("external-link-alt", fill = ColorEnlace)` CSS: Cascading Style Sheets](https://www.w3.org/Style/CSS/Overview.en.html)

---

## 1.5. Mover contenido

Para mover contenido especifico dentro de la dispositiva se puede usar
```{r, eval=FALSE}
.left[]
.right[]
.center[]
```
Se debe escribir un punto antes y el contenido entre corchetes [ ].  
Aplica para texto, imágenes, gráficos u otros. <br>

--- 

<br>
.left[El contenido aparece a la izquierda usando **left**...]
.right[...y a la derecha usando **right**]

<br>

.center[El contenido aparece en el centro cuando el texto esta entre corchetes despues de un punto y de la palabra **center**]


---

## 1.5. Alinear por columnas

Si queremos que el texto aparezca en la misma linea <br>
Se puede mover por columnas regulares <br>
Poniendo un punto antes y el contenido entre corchetes [ ].

```{r, eval=FALSE}
.pull-left[]
.pull-righ[]
```


--- 

<br>

.pull-left[Este contenido esta dentro de **pull - left**]

.pull-right[Y este contenido esta dentro de **pull - right**]

---

## 1.5. Alinear por columnas

Si queremos que el contenido aparezca en la misma linea <br>
Se puede mover por columnas irregulares <br>
Poniendo un punto antes y el contenido entre corchetes [ ].

```{r, eval=FALSE}
.left-column[]
.rigth-column[]
```

--- 
<br>

.left-column[Este contenido esta dentro de **left - column**]

.right-column[Este contenido esta dentro de  **right - column**]


---

name: fondos

## 1.6. Fondos

Para agregar imágenes que **no** estén en su computadora existen paginas web que tienen contenido que puede ser usado sin atribucion y sin fines de lucro.

Algunas son:
- [`r fa("external-link-alt", fill = ColorEnlace)` Unsplash](www.unsplash.com)
- [`r fa("external-link-alt", fill = ColorEnlace)` Rawpixel](www.rawpixel.com)
- [`r fa("external-link-alt", fill = ColorEnlace)` Pexels](www.pexels.com)

---

## 1.6. Fondos

Para agregar fondos se agrega la ruta de la imagen después de los guiones y especificando **background-image**

```{r, eval=FALSE}
--- 
background-image: enlace_a_la_imagen.jpg
```

Si no ponemos nada utiliza el tamaño de la imagen como fondo, pero el tamaño se puede ajustar usando:
```{r, eval=FALSE}
background-size: cover
background-size: contain
```

Para que la imagen aparezca fuera del centro se puede usar **background-position**
```{r, eval=FALSE}
background-position: -10% 
```

---
class: title-slide, center, middle
background-image: url(https://images.unsplash.com/photo-1544817287-d26f7ed1e4d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

<h1> Sin especificar </h1>

---

class: title-slide, center, middle
background-image: url(https://images.unsplash.com/photo-1544817287-d26f7ed1e4d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)
background-size: cover

<h1> Cover</h1>

---
class: title-slide, center, middle
background-image: url(https://images.unsplash.com/photo-1544817287-d26f7ed1e4d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)
background-size: contain

<h1> Contain</h1>

---
class: title-slide, center, middle
background-image: url(https://images.unsplash.com/photo-1544817287-d26f7ed1e4d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)
background-position: -5%

<h1> background-position </h1>


---
name: imagenes

## 1.7. Imagenes

Para agregar imágenes se usa signo de admiración y corchetes, y dentro de paréntesis la ruta de la imagen.
```{r, eval=FALSE}
![](Folder/nombre_de_la_imagen.jpg)
```

También se pueden agregar imagenes dentro de un chunk.
```{r, eval=FALSE}
knitr::include_graphics("Folder/nombre_de_la_imagen.jpg")
```

O usando [html HyperText Markup Lenguage](https://es.wikipedia.org/wiki/HTML)
```{r, eval=FALSE}
<img src="Folder/nombre_de_la_imagen.jpg" width="90%"/>
```

No necesitan saber html para poder hacer presentaciones! <br> .right[...pero conocer un poco les ayudara a hacer más cosas en Xaringan. ]

---

## 1.7. Imagenes

Se pueden agregar pie de foto para dar credito usando:
```{r, eval=FALSE}
.footnote[]
```

```{r, echo=FALSE, out.height=350}
knitr::include_graphics("https://images.unsplash.com/photo-1544817287-d26f7ed1e4d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80")
```

.footnote[Texto dentro de footnote, imagen por Eamonn Maguire]

---

## 1.8. Tamaño de la imagen

Para ajustar el tamaño de la imagen  
En knitr se puede usar **out.height**.
```{r, eval=FALSE}
{r, out.height=400}
knitr::include_graphics("Folder/nombre_de_la_imagen.jpgg")
```

Con html se puede ajustar el **porcentaje**
```{r, eval=FALSE}
<img src="Folder/nombre_de_la_imagen.jpg" width="20%" />
```

.right[... pero hay muchas otras formas]

---

class: center, middle, inverse

# Ejercicios `r fa("pencil-alt", fill = '#FFFFFF')`

---

## 1.9. Ejercicios

- Instalar y cargar el paquete Xaringan
- Cambiar el YAML
- Cambia tu nombre, y titulo de tu proyecto
- Colocar texto en la dispositiva
- Poner fondo a la diapositiva
- Darle knit

.panelset[
.panel[.panel-name[Instalar]
Instalar paquete
```{r, eval=FALSE}
devtools::install_github("yihui/xaringan")
```
]

.panel[.panel-name[YAML]
Cambiar el YAML
```{r, eval=FALSE}
output:
  xaringan::moon_reader
```
]

.panel[.panel-name[Nombre]
Crea una diapositiva con tu nombre y titulo de tu proyecto.
```{r, eval=FALSE}
---  
title: "Pingüinos de Adelia"
author: "Miriam Lerma"
date: "Abril 2021"
```
]

.panel[.panel-name[Texto]
Agregar texto 
```{r, eval=FALSE}
# ¿Son los machos más pesados que las hembras en pingüinos de Adelia?
```
]

.panel[.panel-name[Fondo]
Poner imagen de fondo a las diapositiva<br>
[`r fa("external-link-alt", fill = ColorEnlace)` Unsplash](www.unsplash.com)<br>
[`r fa("external-link-alt", fill = ColorEnlace)` Imagen pingüino de Adelia](https://images.unsplash.com/flagged/photo-1569491256135-fc0dc118333c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80)

```{r, eval=FALSE}
---
class: title-slide, center, middle
background-image: url(Elige una imagen)
background-size: cover
```
]
]

---

class: title-slide, inverse, center, middle

# Tablas y Gráficas
<h1>👩🏽‍🏫📈</h1>

---
name: tablas

## 2.1. Tablas

Para agregar tablas se pueden usar diferentes opciones.

Existen paquetes como:
```{r, eval=FALSE}
library(DT)
library(gt)
```
Pero por hoy usaremos **knitr::kable**

Practiquemos con los datos de pinguinos.<br>
Para cargar tus datos:
```{r, message=FALSE}
library(datos)
Pingus<-datos::pinguinos
```

---

## 2.1. Tablas

Para crear una la tabla con los pesos de pinguinos de Adelia por sexo
```{r, message=FALSE, warning=FALSE}
library(tidyverse)
Peso_sexo_Adelia<-Pingus%>%
  filter(especie=='Adelia')%>%
  group_by(sexo)%>%
  summarise(peso=mean(masa_corporal_g))%>%
  drop_na()
```

usando knitr::kable
```{r}
Peso_sexo_Adelia %>% 
  head()%>%
  knitr::kable(format = "html")
```

---

name: graficas

## 2.2. Gráficas

Cuando creamos una gráfica hay que ajustar el tamaño <br>
De lo contrario puede aparecer fuera de limites de la dispositiva.

Por ejemplo:
```{r plot01, echo=FALSE, warning=FALSE}
Pingus %>%
  filter(especie=='Adelia')%>%
  ggplot(aes(x = sexo, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = sexo))+
  theme_classic()
```


---

## 2.2. Gráficas

Para ajusta el tamaño, hay varias maneras, uno de las maneras es agregar **fig.height** y un valor en el chunk.

```{r, eval=FALSE}
#{r, fig.height = 5}
```

Ahora aparece asi.  
```{r, echo=FALSE, fig.height = 5, warning=FALSE}
Pingus %>%
  filter(especie=='Adelia')%>%
  ggplot(aes(x = sexo, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = sexo))+
  theme_classic()
```

---

## 2.2. Gráficas

Para ajusta el tamaño, otra manera es especificando  **out.width**

Por ejemplo
```{r, eval=FALSE}
#{r,  out.width="40%"}
```

Ahora aparece así.  
```{r, echo=FALSE, out.width="40%", warning=FALSE}
Pingus %>%
  filter(especie=='Adelia')%>%
  ggplot(aes(x = sexo, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = sexo))+
  theme_classic()
```

---

## 2.2. Gráficas

Para no reescribir todo, se puede especificar nombres de los graficos en el chunk.

En un chunk a la **izquierda** se pueden dar las instrucciones, pero no aparecera el gráfico.
```{r,eval=FALSE}
#.pull-left[
# ` ` `{r NombreDelPlot, eval=FALSE}
Pingus %>%
  filter(especie=='Adelia')%>%
  ggplot(aes(x = sexo, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = sexo))+
  theme_classic()
# ` ` `
# ]
```

Y en un chunk a la **derecha** aparecerá el gráfico pero no las instrucciones.
```{r}
#.pull-right[
#` ` ` {r NombreDelPlot, ref.label='NombreDelPlot', warning=FALSE,echo=FALSE, out.width="80%"}
# ` ` `
# ]
```

---

## 2.2. Gráficas

Dando este resultado 

.pull-left[
```{r plot05, eval=FALSE}
Pingus %>%
  filter(especie=='Adelia')%>%
  ggplot(aes(x = sexo, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = sexo))+
  theme_classic()
```
]

.pull-right[
```{r plot05-out, ref.label='plot05', warning=FALSE,echo=FALSE, out.width="80%"}
```
]


---

class: center, middle, inverse

# Ejercicios `r fa("pencil-alt", fill = '#FFFFFF')`

---

## 2.3 Ejercicios 

- Agregar una tabla <br>
- Crear una figura

.panelset[
.panel[.panel-name[Cargar datos]
No te olvides de cargar primero las librerias
```{r, eval=FALSE}
library(tidyverse)
library(datos)
Pingus<-datos::pinguinos
```
]

.panel[.panel-name[Crear tabla]
Para crear una tabla
```{r, eval=FALSE}
Peso_sexo_Adelia<-Pingus%>%
  filter(especie=='Adelia')%>%
  group_by(sexo)%>%
  summarise(peso=mean(masa_corporal_g))%>%
  drop_na()
```
]

.panel[.panel-name[Agregar tabla]
Agregar tabla
```{r, eval=FALSE}
Peso_sexo_Adelia %>% 
  head()%>%
  knitr::kable(format = "html")
```
]

.panel[.panel-name[Figura]
Realizar una figura con estos datos y agregala en las dispositivas.  
Ejemplo de figura
```{r, eval=FALSE}
Pingus%>%
  filter(especie=='Adelia')%>%
  ggplot(aes(x = sexo, y = masa_corporal_g)) +
  geom_boxplot(aes(fill = sexo))+
  theme_classic()
```
]

.panel[.panel-name[Notas]
**Nota** 
- Puedes agregar echo=FALSE en el chunk para que no muestre el código
- Puedes agregar warning=FALSE en el chunk para que no muestre los warnings
- Puedes agregar fig.height=5 en el chunk para que ajuste el tamaño de la figura

Si quieres que los contenidos aparezcan lado a lado 
1. Pon el codigo para la tabla dentro de . pull - left  entre los corchetes 
2. Pon el codigo de la figura dentro de .pull - right entre los corchetes
]
]

---

class: inverse

# Recapitulando

Esta clase:  
- [Que es Xaringan](#intro)  
- [Como agregar fondos](#fondos)
- [Como agregar imagenes](#imagenes)
- [Como agregar tablas](#tablas)
- [Como agregar graficas](#graficas)  

.right[
### Contacto

```{r, echo=FALSE}
library(fontawesome)
```

Para dudas, comentarios y sugerencias:<br>
 Escríbeme a miriamjlerma@gmail.com

Este material esta accesible y se encuentra en <br>
 mi [`r fa("external-link-alt", fill = ColorEnlaceInverso)`github](https://github.com/MiriamLL/Curso_CIAD/)
y mi [`r fa("external-link-alt", fill = ColorEnlaceInverso)`página](www.miriam-lerma.com) 
]

<h1>
.center[
```{r, echo=FALSE}
library(fontawesome)
```
[`r fa("home", fill = ColorEnlaceInverso)` Volver](www.miriam-lerma.com/materiales.html)
]</h1>