Título: nome da disciplina / conferência

class: center, middle, inverse, title-slide

# Título: nome da disciplina / conferência
### Prof(a). Fulano(a) de Tal
### Departamento de Estatística - UFPB
### </br>14 de outubro de 2019

---

background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Sigam-nos nas redes sociais

</br>
</br>

[<i class="fas  fa-link "></i> **Site do Departamento**: **http://www.de.ufpb.br/**](http://www.de.ufpb.br/)  
[<i class="fas  fa-paper-plane "></i> **fulanodetal@de.ufpb.br**](mailto:fulanodetal@de.ufpb.br)</br>
[<i class="fab  fa-instagram "></i> **@estatisticaufpb**](https://www.instagram.com/estatisticaufpb/)  
[<i class="fab  fa-twitter "></i> **@estatisticaufpb**](https://twitter.com/estatisticaufpb)  
[<i class="fab  fa-github "></i> **@de-ufpb**](https://github.com/de-ufpb)

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Onde estamos no mundo?

.pull-left[
<div id="htmlwidget-712a5eeacf457a98e875" style="width:504px;height:432px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-712a5eeacf457a98e875">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[-7.1404,-34.846199],17,{"maxWidth":150,"minWidth":150,"autoPan":true,"keepInView":false,"closeButton":true,"className":""}]},"evals":[],"jsHooks":[]}</script>
]

???

Uma anotação qualquer. É preciso apertar a tecla **P** para ter acesso ao *modo apresentador*. As anotações podem incluir fórmulas matemáticas:

`$$\int_0^x f(x) dx$$`

.fadeInLeft.animated[

.pull-right[
O mapa ao lado foi produzido facilmente utilizando a biblioteca **leaflet**.

```r
library(leaflet)
leaflet() %>% addTiles() %>% 
  setView(
  -34.846199, -7.140400, zoom = 17,
  options = popupOptions(
    minWidth = 200,
    maxWidth = 340
  )
)
```
]]

---
background-position: 100% 0%
class: center, middle

# Destaque com fundo claro

---
background-position: 100% 0%
class: inverse, center, middle

# Destaque com fundo escuro: Poderá ser utilizado na mudança de seções

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Instalando o `xaringan`

Esse tema foi construído utilizando a biblioteca **xaringan**. Trata-se de um pacote **R** para criar apresentações de slides com o **remark.js** por meio do **R Markdown**.

A biblioteca poderá ser instalada de duas formas:

**Forma 1**:

Instalando diretamente do [**CRAN**](https://cran.r-project.org/web/packages/available_packages_by_name.html). Faça:

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

.zoomIn.animated[
**Forma 2**:

Instalando do [**Github**](https://github.com/yihui/xaringan):

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

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Outras bibliotecas necessárias

Para que você consiga rodar esse exemplo, é interessante que instale alguns pacotes complementares. Esses pacotes são necessários pelo fato de que nesse exemplo de apresentação foram introduzidos alguns elementos interenssantes, como por exemplo, a inserção de mapas que foi possível utilizando a biblioteca **leaflet**. Dessa forma, caso você venha deletar todo o conteúdo desse arquivo, apenas deixando o cabeçalho, essas bibliotecas complementares não são necessárias. Nessa situação, vá aos poucos instalando o que precisa.

### Bibliotecas nesserárias para rodar essa apresentação

.fadeInDownBig.animated[

```r
# Perceba que usando o devtools na Forma 2 apresentada no frame anterior
install.packages(
  c("devtools",
    "leaflet",
    "rmarkdown",
    "xaringan"
    "icon",
    "vembedr"
  )
)
```
]

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Como posso aprender a fazer apresentações assim?

Para entender como fazer uma apresentação usando a biblioteca [**xaringan**](https://github.com/yihui/xaringan) de [**R**](https://www.r-project.org/) é necessário entender o básico de **RMarkdown**. Depois estude o código **index.Rmd** que produz essa apresentação.

</br>

**Você poderá consultar:**

- Um bom livro sobre **RMarkdown** você acessa [**aqui**](https://bookdown.org/yihui/rmarkdown/);

- Um material introdutório sobre **RMarkdown** pode ser acessado [**aqui**](https://prdm0.github.io/aulas_computacional/relatorio-markdown-em-r.html);

- Um bom material sobre **xaringan** pode ser acessado [**aqui**](https://bookdown.org/yihui/rmarkdown/xaringan.html) ou [**aqui**](https://github.com/yihui/xaringan/wiki).

---
class: inverse, middle, center

# Inserindo imagens e gifs

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Inserindo imagens e gifs

</br>

.pull-left[
<div class="figure" style="text-align: center">
<img src="img/gato_espanto.gif" alt="Primeira gif." width="400px" height="250px" />
<p class="caption">Primeira gif.</p>
</div>
]

.fadeInDownBig.animated[
.pull-right[
<div class="figure" style="text-align: center">
<img src="img/102_anos.gif" alt="Segunda gif." width="400cm" height="250px" />
<p class="caption">Segunda gif.</p>
</div>
]]

---
class: inverse, middle, center

# Colocando uma imagem de background

---
background-image: url("img/homem_aranha.jpg")
background-size: cover

</br>
</br>
</br>
</br>
</br>
</br>

.rubberBand.animated[
<img src="img/logo-texto.png" width="400px" height="150px" style="display: block; margin: auto auto auto 0;" />
]

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

</br>

.pull-left[
<div class="figure" style="text-align: center">
<img src="img/batman.png" alt="Esse é apenas o Batman." width="200cm" height="500px" />
<p class="caption">Esse é apenas o Batman.</p>
</div>
]

.flip.animated[
.pull-right[
<div class="figure" style="text-align: center">
<img src="img/super_hemilio.jpeg" alt="Esse é o Super-Hemílio." width="250px" height="500px" />
<p class="caption">Esse é o Super-Hemílio.</p>
</div>
]]

---
class: inverse, middle, center

# Suporte à reprodução de vídeos

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

</br>

Inserir vídeos em **xaringan** é fácil:

```r
library("htmltools")
library("vembedr")
embed_url("https://www.youtube.com/watch?v=WbsC_fGArVc")
```

**Para entender melhor estude o código da apresentação**.

.pull-left[
<iframe src="https://www.youtube.com/embed/WbsC_fGArVc" width="420" height="315" frameborder="0" allowfullscreen=""></iframe>
</br>
**Rush - Leave That Thing Alone.**
]

.flipInX.animated[
.pull-right[
<iframe src="https://www.youtube.com/embed/JcyqIA2eJww" width="420" height="315" frameborder="0" allowfullscreen=""></iframe>
</br>
    **Rush - Tom Sawyer.**
]]

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Uma citação

.pull-left[

<blockquote>
A vingança nunca é plena, mata a alma e a envenena **...**
</blockquote>
.right[-- <cite>**Seu Madruga**</cite>]

]

.fadeInLeft.animated[
.pull-right[
<div class="figure" style="text-align: center">
<img src="img/madruguinha.gif" alt="Seu Madruga." width="350cm" height="200px" />
<p class="caption">Seu Madruga.</p>
</div>

]]

.fadeInRight.animated[
.pull-left[
<img src="img/aplausos.gif" width="300cm" height="200px" style="display: block; margin: auto auto auto 0;" />
]]

---
class: inverse, middle, center

# Com xaringan você poderá inserir códigos grandes no seu slide. Tudo ficará organizado e sem extrapolar o frame.

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Fica tranquilo, código longos não geram problemas

Exemplo de um gráfico produzido usando a biblioteca [**ggplot2**](http://www.ggplot2-exts.org/gallery/). Utilize a barra lateral para visualizar todo o código.

.bounceInUp.animated[
.scroll-box-20[
.code50[

```r
  library(ggplot2)
  library(showtext)
  library(cowplot)
  
  
  showtext_auto()
  font_add_google("Gloria Hallelujah", "gloria")
  
  empirical <- function(x, ...){
  
  domain <- seq(from = floor(min(x)), to = ceiling(max(x)) + 1L, length.out = 1e3L)
  
  test <- function(i) sum(x <= domain[i]) / length(x)
  
  result <- purrr::map_dbl(.x = 1L:length(domain), .f = test)
  
  list(x = domain, y = result)
  }
  
  
  set.seed(0L)
  dados <- rweibull(20L, shape = 2, scale = 1.5)
  
  result <- empirical(dados)
  
  x <- result$x
  y <- result$y
  
  p1 <- ggplot(data = data.frame(x = x, y = y), aes(x = x, y = y))
  
  p2 <- p1  + ggtitle(label = "Função de Distribuição Empírica", subtitle = "Gráfico 04")
  
  p3 <- p2 + scale_x_continuous(breaks = seq(0, 4, by = 0.3)) + scale_y_continuous(breaks = seq(0, 1, by = 0.05))
  
  p4 <- p3 + geom_hline(yintercept = 1, lty = 2, lwd = 1.1, color = "gray40", alpha = 0.6)
  
  p5 <- p4 + stat_function(args = list(shape = 2, scale = 1.5), fun = pweibull, lwd = 1.1, show.legend = TRUE, 
                         aes(color = "Teórica")) + 
      geom_line(lwd = 1.1, aes(colour = "Empírica")) + 
      xlab(label = "x") + ylab(label = "Probabilidade")
  
  p6 <- p5 + scale_colour_manual(breaks = c("Teórica", "Empírica"),
                               values = c("black", "blue"), name = "Curvas")
  
  theme_line <- theme(plot.title = element_text(face = "bold", family = "gloria"),
                    plot.subtitle = element_text(family = "gloria"),
                    axis.title = element_text(face = "bold", family = "gloria"),
                    legend.title = element_text(face = "bold"),
                    legend.spacing.y = unit(2, "mm"),
                    legend.spacing.x = unit(5, "mm"),
                    legend.margin = margin(r = 0.6, l = 0.2, b = 0.2, unit = 'cm'),
                    legend.background = element_rect(fill = "gray95", color = "black"),
                    legend.text = element_text(family = "gloria"))
  
  p7 <- p6 + theme_line
  
  plot_grid(p1, p5, p6, p7, labels = c("A", "B", "C", "D"))
  
  ggsave(filename = "empirical.pdf", width = 10, height = 10)
  ```
]]]

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Aumentando ou diminuindo fontes

.font10[Teste], .font20[Teste], .font40[Teste], .font50[Teste], .font60[Teste], .font70[Teste], .font80[Teste], .font90[Teste], .font100[Teste], .font110[Teste], .font120[Teste], .font130[Teste], .font150[Teste], .font170[Teste], .font180[Teste], .font190[Teste], .font200[Teste]

.fonte150[**Isso foi produzido fazendo:**]

```r
.font10[Teste], .font20[Teste], .font40[Teste], .font50[Teste], .font60[Teste], .font70[Teste], .font80[Teste], .font90[Teste], .font100[Teste], .font110[Teste], .font120[Teste], .font130[Teste], .font150[Teste], .font170[Teste], .font180[Teste], .font190[Teste], .font200[Teste]
```

</br>
</br>

.fadeIn.animated[
<img src="img/espanto.gif" width="300cm" height="200px" style="display: block; margin: auto;" />
]

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Tabelas

```r
knitr::kable(mtcars[1L:6L, ], format = "html", caption = "Título da minha tabela.")
```

<table>
<caption>Título da minha tabela.</caption>
 <thead>
  <tr>
   <th style="text-align:left;">   </th>
   <th style="text-align:right;"> mpg </th>
   <th style="text-align:right;"> cyl </th>
   <th style="text-align:right;"> disp </th>
   <th style="text-align:right;"> hp </th>
   <th style="text-align:right;"> drat </th>
   <th style="text-align:right;"> wt </th>
   <th style="text-align:right;"> qsec </th>
   <th style="text-align:right;"> vs </th>
   <th style="text-align:right;"> am </th>
   <th style="text-align:right;"> gear </th>
   <th style="text-align:right;"> carb </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Mazda RX4 </td>
   <td style="text-align:right;"> 21.0 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 160 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.90 </td>
   <td style="text-align:right;"> 2.620 </td>
   <td style="text-align:right;"> 16.46 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Mazda RX4 Wag </td>
   <td style="text-align:right;"> 21.0 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 160 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.90 </td>
   <td style="text-align:right;"> 2.875 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Datsun 710 </td>
   <td style="text-align:right;"> 22.8 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 108 </td>
   <td style="text-align:right;"> 93 </td>
   <td style="text-align:right;"> 3.85 </td>
   <td style="text-align:right;"> 2.320 </td>
   <td style="text-align:right;"> 18.61 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Hornet 4 Drive </td>
   <td style="text-align:right;"> 21.4 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 258 </td>
   <td style="text-align:right;"> 110 </td>
   <td style="text-align:right;"> 3.08 </td>
   <td style="text-align:right;"> 3.215 </td>
   <td style="text-align:right;"> 19.44 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Hornet Sportabout </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 8 </td>
   <td style="text-align:right;"> 360 </td>
   <td style="text-align:right;"> 175 </td>
   <td style="text-align:right;"> 3.15 </td>
   <td style="text-align:right;"> 3.440 </td>
   <td style="text-align:right;"> 17.02 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 2 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Valiant </td>
   <td style="text-align:right;"> 18.1 </td>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 225 </td>
   <td style="text-align:right;"> 105 </td>
   <td style="text-align:right;"> 2.76 </td>
   <td style="text-align:right;"> 3.460 </td>
   <td style="text-align:right;"> 20.22 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
</tbody>
</table>

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%

# Colocando caixas de anotações

.pull-left[
**Anotação do lado esquerdo:**
.font80[.content-box[
"O **CCEN**, um dos mais importantes Centros da UFPB, universidade pública, gratuita e estatal, sendo referência no ensino, pesquisa e extensão, funcionando com uma boa infra-estrutura e um modelo gerencial democrático e eficiente, adequados às múltiplas transformações e demandas da sociedade, tendo uma relevante atuação voltada ao desenvolvimento científico, tecnológico, cultural e socioeconômico da Paraíba, do Nordeste e do Brasil, visando à melhoria de qualidade da vida".
]]
]

.pull-right[

**Anotação do lado direito:**

.font80[.content-box[
O Curso de Bacharelado em Estatística foi criado no ano **2000**, a partir da **Resolução no 25/2000** do CONSEPE (Conselho Superior de Ensino, Pesquisa e Extensão). Desde a primeira turma de formandos em 2004.1, todos os bacharéis em Estatística da UFPB obtiveram postos de trabalho e/ou ingressaram em programas de pós-graduação de comprovado nível de excelência.
]]
]

</br>

.jello.animated[
.fonte150[Escrevendo mais alguma coisa **...**]
]

.pull-right[
**Outra anotação do lado direito:**
.font80[.content-box[
Mais alguma anotação **...**

`$$\int_{-\infty}^{+\infty} f_{X} dx = 1.$$`
]]]

---
background-image: url("img/logo-texto.png")
background-size: 200px
background-position: 100% 0%
class: middle, center

.wobble.animated[
# Obrigado pela sua atenção!
]