Comunicando seus resultados:

class: center, middle, inverse, title-slide

# Comunicando seus resultados:
## Criando apresentações com R
### Beatriz Milz e Haydee Svab - R-Ladies São Paulo
### 20 de maio de 2019 <br> (Atualizado em: 15/04/2019)

---

class: split-two with-border
.column.bg-main1[.content[
# Instrutoras
## Beatriz Milz

<img src="img/foto_bia.jpg" width="90%" style="display: block; margin: auto;" />
]]
.column.bg-main2[.content[

- Doutoranda em Ciência Ambiental no PROCAM/IEE/USP

- Co-organizadora do R-Ladies São Paulo

- Assessora Editorial na <a href="http://scielo.br/asoc">Revista Ambiente e Sociedade</a> 
- Bacharel em Gestão Ambiental (EACH/USP)

- Mestre em Ciências no PPG-Análise Ambiental Integrada (UNIFESP/Diadema)

- Email: <a href="mailto:beatriz.milz@hotmail.com">beatriz.milz@hotmail.com</a>

- Página: https://beatrizmilz.github.io/

- Github: <a href="http://github.com/beatrizmilz">@beatrizmilz</a>

- Twitter: <a href="http://twitter.com/beatrizmilz">@BeaMilz</a>

]]

---
class: split-two with-border
.column.bg-main1[.content[
# Instrutoras
## Haydee Svab

<img src="img/foto_haydee.JPG" width="90%" style="display: block; margin: auto;" />
]]
.column.bg-main2[.content[

- Consultora local do Banco Mundial

- CEO da ASK-AR (consultoria em análise de dados)

- Membro do Conselho Deliberativo da AEAMESP (Associação dos Engenheiros e Arquitetos de Metrô)

- Co-fundadora dos grupos RLadies - São Paulo, do [PoliGNU](https://polignu.org/) e da [PoliGen](https://poligen.polignu.org/)

- Doutoranda em Smart Cities (IME-USP)

- Mestra em Engenharia e Planejamento de Transportes (Poli-USP)

- Especialista em Democracia Participativa, Repúblicas e Movimentos Sociais (UFMG)

- Formação em Engª Civil/Arquitetura pela USP (Programa Poli-FAU USP)

- Email: <a href="mailto:hsvab@hsvab.eng.br">hsvab@hsvab.eng.br</a>

]]

---
class: middle
# Cronograma

1 - O que é o R-Ladies?

2 - Linguagem de marcação Markdown e arquivos do tipo RMarkdown

3 - Como criar uma apresentação utilizando o pacote Xaringan

4 - Hospedagem da apresentação utilizando o Github Pages

<img src="img/seruff.png" width="40%" style="display: block; margin: auto;" />
---
class:  center, middle
# O que é o R-Ladies?

R-Ladies é uma organização mundial que promove a diversidade de gênero na comunidade da linguagem R.
R-Ladies São Paulo integra, orgulhosamente, a organização R-Ladies Global, em São Paulo.

## Como?

Através de meetups e mentorias em um ambiente seguro e amigável.

Nosso principal objetivo é promover a linguagem computacional estatística R compartilhando conhecimento, assim, quem tiver interesse na linguagem será bem-vinda, independente do nível de conhecimento.

Fonte: [About us - R-Ladies](https://rladies.org/about-us/), [Meetup R-Ladies São Paulo](https://www.meetup.com/R-Ladies-Sao-Paulo/)

---
class:   center, middle
## Para quem?

Nosso principal público-alvo são as pessoas que se identificam com o gênero feminino, portanto, mulheres cis, mulheres trans, bem como pessoas não-binárias e queer.

## Missão

Como uma iniciativa de diversidade, a missão das R-Ladies é alcançar uma representação proporcional de pessoas de gêneros atualmente sub-representados na comunidade R, incentivando, inspirando e caacitando-as.

Fonte: [About us - R-Ladies](https://rladies.org/about-us/), [Meetup R-Ladies São Paulo](https://www.meetup.com/R-Ladies-Sao-Paulo/)

---
class:   center, middle
## Como o R-Ladies começou?
<img src="img/gabriela.jpeg" width="20%" style="display: block; margin: auto;" />

**[Gabriela de Queiroz](https://github.com/gdequeiroz)** fundou o R-Ladies no dia **1 de outubro de 2012**. Ela queria retribuir à comunidade depois de ir a vários encontros e aprender muito de graça. O primeiro encontro R-Ladies foi realizado em ** San Francisco, Califórnia (Estados Unidos) **. Nos anos seguintes, mais capítulos do R-Ladies começaram em todo o mundo.

Fonte: [About us - R-Ladies](https://rladies.org/about-us/history/)

---
class:center, middle

Fonte: [R-Ladies Shiny App](https://gqueiroz.shinyapps.io/rshinylady/)  (13/04/2019)
---
class:   center, middle
## Código de conduta

O R-Ladies dedica-se a proporcionar uma experiência livre de assédio para todas as pessoas partcicipantes, desta forma, não é tolerada nenhuma forma de assédio.

[Código de conduta - R-Ladies](https://github.com/rladies/starter-kit/wiki/Code-of-Conduct#portuguese)

---
class:   center, middle
## R-Ladies no Brasil

Atualizado em: 13/04/2019. Fonte: [R-Ladies Shiny App](https://gqueiroz.shinyapps.io/rshinylady/)

<div id="htmlwidget-0085284adac4abb69489" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-0085284adac4abb69489">{"x":{"filter":"none","autoHideNavigation":true,"data":[["1","2","3","4","5","6","7","8","9","10"],["Florianópolis","Salvador","Niterói","Curitiba","Belo Horizonte","São Paulo","Porto Alegre","Natal","Americana","Rio de Janeiro"],["2019-04-07","2018-07-23","2018-06-04","2018-05-29","2018-04-20","2018-02-10","2017-10-30","2017-09-25","2017-06-24","2017-02-27"],[22,114,289,151,509,343,218,135,28,394]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>city<\/th>\n      <th>dt_created<\/th>\n      <th>members<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":3},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---
class:  center, middle
## Como saber mais?

Website RLadies Global: [https://rladies.org/](https://rladies.org/)

Twitter: [@RLadiesGlobal](https://twitter.com/rladiesglobal), [@RLadiesSaoPaulo](https://twitter.com/RLadiesSaoPaulo)

Instagram: [@RLadiesSaoPaulo](http://instagram.com/RLadiesSaoPaulo)

Facebook: [@RLadiesSaoPaulo](http://facebook.com/RLadiesSaoPaulo)

MeetUp: [https://www.meetup.com/pt-BR/R-Ladies-Sao-Paulo](https://www.meetup.com/pt-BR/R-Ladies-Sao-Paulo)

R-Ladies LATAM Blog (Latin America) - Em breve!

### Não tem capítulo na sua cidade e quer abrir um?

<center> Saiba como em <a href="https://rladies.org/about-us/help/"> R-Ladies - How do get involved </a> </center>

---
class: middle, center

# Linguagem de marcação markdown e arquivos do tipo RMarkdown

---
class: center
## Por que apresentações são importantes?

É uma das formas de comunicar os resultados!

Fonte: [R for Data Science](http://r4ds.had.co.nz/)

---
class: center
## Por que apresentações são importantes?

É uma das formas de comunicar os resultados!

Fonte: [R for Data Science](http://r4ds.had.co.nz/)

### O que vocês utilizam em apresentações?

---
class: middle
## Formas de criar apresentações no R

* Pacote **Xaringan** - Utiliza RMarkdown e a biblioteca remark.js do JavaScript para criação de apresentações.

* Outros:

* output: **beamer_presentation** ->  beamer (pdf)
      
      * output: **ioslides_presentation** -> ioslides (HTML) 
      
      * output: **slidy_presentation** ->  slidy (HTML)
      
      Obs.: para separar entre um slide e outro, usar três *

### Foco de hoje
Praticar como criar uma apresentação utilizando o R e o pacote Xaringan

---
class: middle

## RMarkdown

* Arquivos **.Rmd** são reprodutíveis.

* É um tipo de arquivo que suporta códigos em R, texto, markdown e outros formatos.

* Apresenta os seus códigos, seus resultados, e também seus comentários.

* São interessantes para trabalhar em equipe, para comunicar seus resultados, e para desenvolver seus códigos em R.

* Apresentação Yihui: [Advanced R Markdown](https://slides.yihui.name/2017-rstudio-conf-rmarkdown-Yihui-Xie.html)

* Dica de livro: [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/)

---
class: middle

## RMarkdown

* Possibilita exportar diferentes tipos de arquivos.

---
class: middle
## Markdown

* O RMarkdown utiliza a linguagem de marcação Markdown.

* Markdown é uma linguagem de marcação simples.

* Elaborada para ser fácil de ler, fácil de escrever.

* Dica rápida: [Rmarkdown Cheatsheet 2.0](http://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf) e [Rmarkdown Cheatsheet](https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf).

---
## Markdown

**Negrito**: `**bold**`

_Itálico_: `_italics_`

**Adicionar títulos**

`# Título 1`

`## Título 2`

`### Título 3`

# Título 1
## Título 2
### Título 3

---
class: middle
## Fazendo uma lista

Você pode fazer uma lista escrevendo com hífens ou asteriscos, como a seguir:

`* negrito com asteriscos duplos`

`* itálico com underline`

`* fonte do tipo código com crase`

ou desta forma:

`- negrito com asteriscos duplos`

`- itálico com underline`

`- fonte do tipo código com crase`

Cada um vai aparecer como:

- negrito com asteriscos duplos
- itálico com underline
- fonte do tipo código com crase

Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)

---
class: middle
## Fazendo uma lista enumerada
Você pode fazer uma lista numerada usando somente números. Você pode usar o mesmo número quantas vezes quiser:

`1. negrito com asteriscos duplos`

`1. itálico com underline`

`1. fonte do tipo código com crase`

Isso irá aparecer como:

1. negrito com asteriscos duplos
1. itálico com underline
1. fonte do tipo código com crase

Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)

---
class: middle
## Um pouco mais de Markdown

Você pode fazer um hiperlink dessa forma: `[**texto para mostrar**](http://the-web-page.com)`.

Você pode incluir arquivo de imagem dessa forma: `![**título**](http://url/for/file)`

Se você sabe como escrever equações em LaTeX, ficará feliz em saber que pode usar `$$` para inserir equações matemáticas, como:

```r
# $$y = \mu + \sum_{i=1}^p \beta_i x_i + \epsilon$$
```

`$$y = \mu + \sum_{i=1}^p \beta_i x_i + \epsilon$$`

Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)

---
class: middle
## Mais sobre Markdown

Não esqueça que você pode consultar:

- [RMarkdown Cheatsheet](https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf)

- [R Markdown from RStudio](https://rmarkdown.rstudio.com/lesson-1.html)

- [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/)

- [R for Data Science - Cap 27: R Markdown](https://r4ds.had.co.nz/r-markdown.html)

- [Software Carpentry - Producing Reports With knitr ](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/)

---
class: middle, center

# Como criar uma apresentação utilizando o pacote Xaringan

---
class: middle
## Introdução sobre o Xaringan

- É um pacote do R para criar apresentações usando o  [remark.js](http://remarkjs.com) através do RMarkdown.

- Mais sobre o xaringan:

- [Apresentação da documentação](http://slides.yihui.name/xaringan/) 
    - [Livro R Markdown (Capítulo 7)](https://bookdown.org/yihui/rmarkdown/xaringan.html)
    - [Remark.js Wiki](https://github.com/gnab/remark/wiki)
    - [Xaringan Wiki](https://github.com/yihui/xaringan/wiki)
---
class: middle

## Curiosidade sobre o Xaringan

Como pronuncia Xaringan?

- Veja a [resposta do autor do pacote](https://yihui.name/en/2019/01/rstudio-conf/)

- [Video](https://naruto.fandom.com/wiki/Sharingan?jwsource=cl) (1 minuto e 04 segundos)

---
class: middle
## Criador do Xaringan

- O pacote foi criado por [**Yihui Xie**](https://yihui.name/), que é desenvolvedor de software na RStudio.

- [**Yihui Xie**](https://yihui.name/) também desenvolveu os seguintes pacotes: [knitr](https://yihui.name/knitr/), [animation](https://yihui.name/animation/), [bookdown](https://bookdown.org/), [blogdown](https://github.com/rstudio/blogdown), [pagedown](https://github.com/rstudio/blogdown) e [tinytex](https://yihui.name/tinytex/).

_<center> Thanks Yihui for this amazing package! </center>_
---
## Estrutura da apresentação
- No xaringan, utilizamos o arquivo `.Rmd` para escrever a apresentação, e é compilado para um arquivo `.html`

- Esse arquivo `.html` é interpretado pelo navegador (ex. Chrome), utilizando também os arquivos `.css` e `.js`
<img src="img/html-css-javascript.jpg" width="20%" style="display: block; margin: auto;" />
- **HTML** (HyperText Markup Language - Linguagem de Marcação de Hipertexto) - é uma linguagem de marcação, é usado para estruturar a página.

- **CSS** (Cascading Style Sheets - Folha de Estilo em Cascata) - é usado para estilizar os elementos escritos no HTML.

- **Javascript** - é uma linguagem de programação, roda no navegador e permite que as páginas sejam dinâmicas.

- Se quiser aprender mais sobre, existem muitos materiais gratuitos na internet. Ex: [FreeCodeCamp](https://www.freecodecamp.org).
---
class: middle

## Pré-requisitos

- [R](https://www.r-project.org/)

- [RStudio](https://www.rstudio.com/)

- Pacote [RMarkdown](https://rmarkdown.rstudio.com/)

_(O R instala esse pacote automaticamente quando necessário)_

- Pacote [Xaringan](https://github.com/yihui/xaringan)

- Pacote [knitr](http://yihui.name/knitr/)

- Google Chrome ou Chromium

---
class: middle

## Instalar o Xaringan
- Existem duas formas de instalar:

Pelo CRAN:

```r
install.packages("xaringan")
```

Pelo Github:

```r
devtools::install_github("yihui/xaringan")
```

---
class: middle

## Primeiros Passos

- Inicie o RStudio:

- Instale os pacotes:

```r
install.packages("rmarkdown")
install.packages("knitr")
devtools::install_github("yihui/xaringan")
```

---
class:  middle

## Crie um novo arquivo RMarkdown

---
class: middle

## Selecione o template Ninja Presentation
<img src="img/2.PNG" width="100%" style="display: block; margin: auto;" />

Dica: para facilitar posteriormente, crie a sua apresentação com o nome de `index.Rmd`

---
class: middle

## Será criado um RMarkdown com o Ninja Presentation

---
class: middle

## yaml - metadados do documento

- **y**et **a**nother **m**arkup **l**anguage 
- Cuidado com a **identação**
- Controla muitas das configurações do documento

- title: título
- subtitle: subtítulo
- author: autor
- date: data
- output: formato (Ex: html_document, pdf_document, etc). No caso do Xaringan, o output é **xaringan::moon_reader**  
   - libs_dir: pasta onde colocará bibliotecas necessárias (ex. remark-latest.min.js)

Leia também: [Output Formats - R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/output-formats.html)

---
class: middle

## Quais são os temas disponíveis?
- Depende da versão do Xaringan que está usando:

```r
names(xaringan:::list_css())
```

```
##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"   
##  [4] "default"          "duke-blue"        "fc-fonts"        
##  [7] "fc"               "hygge-duke"       "hygge"           
## [10] "kunoichi"         "lucy-fonts"       "lucy"            
## [13] "metropolis-fonts" "metropolis"       "middlebury-fonts"
## [16] "middlebury"       "ninjutsu"         "rladies-fonts"   
## [19] "rladies"          "robot-fonts"      "robot"           
## [22] "rutgers-fonts"    "rutgers"          "shinobi"         
## [25] "tamu-fonts"       "tamu"             "uo-fonts"        
## [28] "uo"               "uol-fonts"        "uol"
```

Alguns exemplos de disponíveis: [xaringan themes](https://github.com/yihui/xaringan/wiki/Themes)
---
class: middle
## Colocar o tema RLadies

```r
output:
  xaringan::moon_reader:
    css: ["rladies", "rladies-fonts"]
```
- Criado por/Made by: [Alison Presmanes Hill](https://alison.rbind.io/post/r-ladies-slides/)

---
class: middle
## Outro tema RLadies: Kunoichi
- É esse tema que estamos usando :)

```r
output:
  xaringan::moon_reader:
    css: [kunoichi, ninjutsu, rladies-fonts]
```

- Criado por/Made by: [Emi Tanaka](https://github.com/emitanaka/ninja-theme)
---
class: middle
## CSS
- Utilizando o CSS, é possível adaptar os temas e também criá-los :)

- No yaml, no atributo: `output: xaringan::moon_reader: css:` (onde definimos o nome dos temas), aponte o arquivo `.css` que deseja utilizar (entre aspas).

- Para manter o diretório organizado, é aconselhável criar uma pasta chamada css e colocar os arquivos `.css` nessa pasta.

- Exemplo:

```r
output:
  xaringan::moon_reader:
    css: ["css/rladies.css", "css/rladies-fonts.css"]
```

---
class: middle
## CSS
- Para adaptar algum tema (alterar estilos específicos):

1 - Copie os arquivos originais do tema para a sua pasta `/css` (procure no seu diretório a pasta que contém os arquivos originais, geralmente estão em `libs/remark-css-0.0.1`);
  
2 - Especifique no `yaml` o nome e pasta dos arquivos novos. Exemplo:

```r
output:
  xaringan::moon_reader:
    css: ["css/rladies.css", "css/rladies-fonts.css"]
```
  
3 - Altere o código `.css` dos novos arquivos para personalizar a apresentação.
  
Dica: No navegador, o atalho `ctrl + shift + c` pode ajudar a inspecionar os elementos.

---
class: middle
## JavaScript - RemarkJS

- O Xaringan utiliza o seguinte arquivo javascript: https://remarkjs.com/downloads/remark-latest.min.js

- Por padrão, a apresentação só funcionará online!

- Como deixar o RemarkJS offline?

```r
xaringan::summon_remark() # o xaringan irá fazer o download
# da versão mais recente do remark e salvar na pasta /libs
```
O yaml deve conter as seguintes linhas:

```r
output:
  xaringan::moon_reader:
    chakra: libs/remark-latest.min.js
    lib_dir: libs
```

---
class: middle
## Encoding

Para evitar problemas de codificação, adicione o encoding no yaml:

```r
encoding: "UTF-8"
```

Leia o texto do blog do Yihui: [My Biggest Regret in the knitr Package
UTF-8, and UTF-8 only, or we cannot be friends](https://yihui.name/en/2018/11/biggest-regret-knitr/)

---
## Exemplo de yaml desta apresentação

```r
---
title: "Comunicando seus resultados: "
subtitle: "Criando apresentações com R"
author: "Beatriz Milz e Haydee Svab - R-Ladies São Paulo"
date: "20 de maio de 2019  <br> (Atualizado em: `r format(Sys.Date(), format='%d/%m/%Y')`)"
encoding: "UTF-8"
output:
  xaringan::moon_reader:
    chakra: libs/remark-latest.min.js
    css: ["css/kunoichi.css", "css/ninjutsu.css", 
          "css/rladies-fonts.css"]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---
```

---
class: middle
## Chuncks de Código R

- É um campo onde podemos inserir código de R em um arquivo RMarkdown:

- É uma boa ideia dar a cada chunck um nome, pois ele podem ajudar a corrigir erros, e, se quaisquer gráficos são produzidos, os nomes dos arquivos serão baseados no nome do chunck de código que os erros produzirem.

---
class: middle
## Como criar um chunck de código?

<img src="img/8.PNG" width="100%" style="display: block; margin: auto;" />
 
Dica: Atalho do teclado para criar chunks:  `Ctrl + ALt + I`.

---
class: middle
## Como as coisas são compiladas?

- Ao pressionar o botão “Knit HTML”, o documento RMarkdown é processado pelo knitr e um documento Markdown é produzido (como, também, um potencial conjunto de arquivos de figuras): o código em R é executado e se figuras são produzidas, links para essas figuras serão incluídos.

- A seguir, os documentos  Markdown e de figuras são processados pela ferramenta pandoc, que converte o arquivo .md em um arquivo .html, com as figuras anexadas.

Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)

---
class:  middle

## Exemplo do yaml

- Aperte o Knit e...
---
class:  middle

## Resultado:

- O knit exportará um arquivo do tipo html

- Agora o tema da apresentação está configurado!

- Aperte H ou ? para conferir a lista de atalhos do Xaringan

---
class: middle
## DEU ERRO NO KNITR!

### Calma!

É bem comum dar erro ao compliar o arquivo pois **qualquer** código errado causa isso. Algumas coisas pra se observar:

- **Yaml header** - se algo estiver errado, vai dar erro ao compilar. 
Muito cuidado com a identação!

- **Código nos chunks** - teste o _Run All Chunks_ e veja se dá erro em algum específico.
Se descobrir, tente verificar o que há de errado no código (pode ser a falta de um parênteses, vírgula, entre outros).

---
class: middle
## Opções de chunck

Há uma variedade de opções que podem afetar como os chuncks de código são tratados.

- `echo=FALSE` -> evitar que o próprio código apareça

- `results="hide"` -> evitar que qualquer resultado seja impresso

- `eval=FALSE` -> mostrar o código, mas ele não é avaliado

- `warning=FALSE` e `message=FALSE` -> ocultar qualquer messagens de avisos produzidas

- `out.width` -> controlar o tamanho de figuras produzidas (Ex: `out.width = "100%"`)

Assim, você pode escrever:

<img src="img/chunk_load_libraries.png" width="90%" style="display: block; margin: auto;" />
 
Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)
 
---
class: middle
## Opções globais de chunck
Muitas vezes, haverá algumas opções que você irá querer repetir seu uso.

Para isso, você pode configurar as opções globais de chunck, como:

A opção `fig.path` define onde as figuras serão salvas.

A `/` é importante, pois sem ela, as figuras seriam salvas no local padrão, com nomes começando com Figs.

Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)

---
class: middle
## Código R no texto

Você pode fazer com que todo número em seu relatório seja reproduzível.

```r
# Use `r e ` para um in-line code chunk . 
# O código será executado e
# substituído com o valor do resultado.
```

```r
`r code`

Ex:

`r round(3.14159265359, 2)`
```

3.14

Não deixe que esse chunck _in-line_ seja separado através das linhas.

---
class: middle

## Código em R no texto

Outro exemplo:

```r
# O dataframe mtcars possui `r nrow(mtcars)` carros. 
```

Exemplo: O dataframe mtcars possui 32 carros.

Referência: [Software Carpentry](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/index.html)

---
class: middle

## Exemplo: adicionando um gráfico

- Crie um chunk e escreva o código que você utiliza para criar um gráfico :)

```r
library(tidyverse)
ggplot(data = mtcars, mapping = aes(x = wt, y = mpg)) + geom_point() + 
  stat_smooth(method = 'lm') + facet_grid(am ~ cyl)
```

Fonte do exemplo: http://stcorp.nl/R_course/tutorial_ggplot2.html

---
class: middle
## Exemplo: adicionando uma tabela

```r
DT::datatable(rladies_br)
```

<div id="htmlwidget-466b693cff51199821da" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-466b693cff51199821da">{"x":{"filter":"none","data":[["1","2","3","4","5","6","7","8","9","10"],["Florianópolis","Salvador","Niterói","Curitiba","Belo Horizonte","São Paulo","Porto Alegre","Natal","Americana","Rio de Janeiro"],["2019-04-07","2018-07-23","2018-06-04","2018-05-29","2018-04-20","2018-02-10","2017-10-30","2017-09-25","2017-06-24","2017-02-27"],[22,114,289,151,509,343,218,135,28,394]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>city<\/th>\n      <th>dt_created<\/th>\n      <th>members<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":3},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
---
class: middle
## Adicionando imagens usando o Knitr

Função: `knitr::include_graphics()`

Exemplo:

```r
knitr::include_graphics("https://www.r-project.org/Rlogo.png")
```

<img src="https://www.r-project.org/Rlogo.png" width="50%" style="display: block; margin: auto;" />
---
class: middle
## Adicionando imagens usando Knitr: opções de Chunk

**Tamanho da imagem**
- `out.width = "50%"`

- [Opções do KnitR](https://yihui.name/knitr/options/#chunk-options)

---
class: middle
## Adicionando imagens usando Knitr: opções de Chunk

**Alinhamento da figura**
- `fig.align = 'center', 'default', **'left'**,'right'`

- `fig.align = 'center', 'default', 'left', **'right' **`

---
class: middle
## Adicionando imagens usando Knitr: opções de Chunk

**Legenda de figura**

- `fig.cap="Logo R"`

---
class: middle
## Preview da apresentação

```r
xaringan::inf_mr("index.Rmd")
```

- Pode não funcionar com o tema Kunoichi :(

- Post do Yihui sobre isso: https://yihui.name/en/2019/02/ultimate-inf-mr/

---
## Salvar a versão em PDF

- O autor do pacote disse que a forma mais confiável é abrir no Google Chrome ou Chromium, e salvar como PDF - não dá certo com o Mozilla Firefox. Então, uUsando o navegador Chrome ou no Chromium, imprima para arquivo (Ctrl + P).

- Existe a função **chrome_print** do pacote `pagedown`:

- É recente e ainda está em desenvolvimento, portanto, pode apresentar instabilidade
    - Precisa ter o Chrome instalado

```r
remotes::install_github('rstudio/pagedown')
```

```r
pagedown::chrome_print("index.html")
```

Referência: [Apresentação do Yihui na RStudio Conf 2019: pagedown - Creating beautiful PDFs with R Markdown and CSS](https://resources.rstudio.com/rstudio-conf-2019/pagedown-creating-beautiful-pdfs-with-r-markdown-and-css)

---

class: middle, center

# Hospedagem da apresentação utilizando o Github Pages

---
class: middle
## Compartilhando sua apresentação

- Já vimos que é possível exportar um PDF
<img src="img/thats-rigth.gif" width="40%" style="display: block; margin: auto;" />

- O formato que utilizamos para exportar uma apresentação elaborada com o Xaringan é **.html** -> é necessário apertar o botão Knit (mostrado anteriormente).

- O knit gera um **arquivo .html** -> para que ele funcione, depende de outros arquivos locais (salvos na pasta do projeto).

- É possível hospedar o seu arquivo de apresentação em sites como o [Github Pages](https://github.com/) e [Netlify](https://www.netlify.com/).

---
class: middle
## Passo a passo: Como hospedar sua apresentação utilizando o Github Pages?

1) Crie uma conta gratuita no github: https://github.com/

2) Na sua conta do Github, crie um novo repositório (New repository)

* Dica: [Esse post do @w_oliveiras](https://medium.com/trainingcenter/plano-para-estudar-git-e-github-enquanto-aprende-programa%C3%A7%C3%A3o-f5d5f986f459) é sobre como usar git e github utilizando o terminal/linha de comando e pode ajudar!

---
## Compartilhando a apresentação via Github Pages

3) Coloque um nome e descrição no novo repositório e deixe-o público

---
## Compartilhando a apresentação via Github Pages
4) Repositório criado!

---
## Compartilhando a apresentação via Github Pages
5) Githubpages e pasta DOCS

- Para o Github Pages funcionar, é preciso adicionar o conteúdo em uma pasta chamada `docs` -> antes de fazer upload no seu computador/workingdirectory/projeto crie uma pasta com o nome `docs` e coloque todos os arquivos da sua apresentação nessa pasta

- De preferência, a sua apresentação deve se chamar index.html (após compilado)

---
## Compartilhando a apresentação via Github Pages

- Área de upload do seu repositório do Github (essa não é a única forma de realizar upload, também é possível através do Github desktop e pelo terminal de comando)

---
## Compartilhando a apresentação via Github Pages

6) Faça o upload da pasta docs INTEIRA no seu repositório do Github

---
## Compartilhando a apresentação via Github Pages

7) Coloque uma mensagem no _commit_, para deixar registrado que alteração foi feita

---
## Compartilhando a apresentação via Github Pages

8) No seu repositório, clique em Settings...

<img src="img/github7.jpg" width="100%" style="display: block; margin: auto;" />
---
## Compartilhando a apresentação via Github Pages

8) ... e na seção Github Pages, selecione **master branch /docs folder**:.

**Resultado**: https://beatrizmilz.github.io/teste/

---
class:  center, middle
## Agora é só enviar o link da sua apresentação!

<center> Última dica: Você pode criar URL mais curtas com o <a href="https://bitly.com/"> Bitly </a> </center>

---
class:  middle

## Obrigada!
Apresentação elaborada com [Xaringan](https://github.com/yihui/xaringan) e [Kunoichi](https://github.com/emitanaka/ninja-theme)

Agradecimentos especiais:
- [Yihui Xie](https://github.com/yihui) - Pelo pacotes, livros, blogposts, vídeos 
- [Bruna Wundervald](http://brunaw.com/) - Por ajudar na apresentação
- [Julio Trecenti](https://github.com/jtrecenti), [Curso-R](https://www.curso-r.com/) e [13 aMostra de Estatística - IME  USP](https://www.ime.usp.br/~amostra/) pelo mini-curso de RMarkdown