Setting the Stage

class: title

<div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">1</div>
<h1>Setting the Stage</h1>
<h2>xaringan</h2>
<div class="conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p>
<p class="talk-date">
<a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a>
</p>
</div>

---
class: inverse, middle, center

# Welcome!

## Let's learn how to make great slides<br> with xaringan (and friends)

### Let's review a few things

---

#  xaringan

.f7.pull-left[
.center[
<img src="https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/xaringan.png" alt="" width="150px">

.pkg[xaringan] introduces <br>.b[remark.js] to .pkg[rmarkdown]

]]
.mt4.pull-right[

<a href="https://slides.yihui.org/xaringan"><img src="assets/img/01/docs-xaringan.png" alt="">xaringan documentation</a>

]

---

# remark.js

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

.f6.b[and]

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

.pull-right[
"A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS."

<a href="https://remarkjs.com"><img src="assets/img/01/docs-remarkjs.png" alt="">remarkjs documentation</a>

]

---
class: f7

## CSS

.f6.mb4[
**CSS** stands for **C**ascading **S**tyle **S**heet, and turns...
]

.pull-left[
functional, but dull HTML (content)...

<img src="assets/img/01-title-slide-no-css.png"
alt="Title slide with no formatting"
width="100%" style="border:2px solid LightGray"/>
]

.pull-right[
...into HTML (content) with style! 😎<br><br>

<img src="assets/img/01-title-slide.png"
alt="Title slide with styling including a background image, cutom fonts, and content placement"
width="100%"/>
]

???
Remark helps us:
- create a new kind of slide using Markdown syntax and slide properties
- format slides (e.g. with content alignment)
- present (using keyboard shortcuts)

---
class: header_background f6

# Let's get started!

Restart your R session  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F10</kbd>

.mt4[
Open `01-introduction/01-start.Rmd`
]

.mt4[
Run `xaringan::infinite_moon_reader()` to preview the slides
]

---
# YAML

```yaml
---
title: "01 - Setting the Stage"
subtitle: "Professional, Polished, Presentable"
author: "Dr. Avahi Cleesei"
institute: "Bemaraha University, Madagascar"
date: "2021-07-07"
output:
  xaringan::moon_reader:              # xaringan output
    nature:
      slideNumberFormat: "%current%"  # slide number format
      highlightStyle: github          # highlighting syntax for code
      highlightLines: true            # code line highlighting
      ratio: 16:9                     # 4:3 for standard size
      countIncrementalSlides: true    # incremental slide counting
---
```

---
# Setup chunk

```r
# suppresses the version number in the subdirectory name
options(htmltools.dir.version = FALSE)

# preset options
knitr::opts_chunk$set(
  fig.retina = 2,             # specifies scaling for retina displays
  warning = FALSE,            # warning messages do not show
  message = FALSE             # informational messages do not show
)

# loads packages
library(fontawesome)          # FontAwesome icon package
library(tidyverse)            # collection of data science packages        
```

---
class: header_background, middle, center, f6

# Activity Time

## <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg> [materials/act-01/01-introduction](/materials/act-01/01-introduction/#activity)

Time for the .pkg[xaringan] scavenger hunt!