Talk template

class: middle, title-slide

<div class="lab-logo"></div>

# Title of my talk template

## My talk subtitle

### Willian Vieira, .small[PhD candidate <br> + Collaborators]

<br><br><br><br><br>
[<i class="fa fa-github fa-lg" style="color:#e7e8e2"></i> WillVieira/talkTemplate](https://github.com/willvieira/talkTemplate)

[<i class="fa fa-twitter fa-lg" style="color:#e7e8e2"></i> @WillVieira90](https://twitter.com/willvieira90)

---

# Introduction

- How to setup
- Content
- `xaringanExtra` extensions
- JS libraries

---
class: middle, center, inverse

# How to use it?
<hr width="100%" align="left" size="0.3" color="orange"></hr>

---
class: middle, center, inverse-old

# How to use it?
<hr width="100%" align="left" size="0.3" color="orange"></hr>

---
# Workflow

It is recomended to install all (R packages 📦) dependencies:

```make
make install
```
.font90[If you use other R packages for your presentation, add them to the `requeriments.yml` file]

<br>

Once dependencies are solved, you can server your presentation on local to be automatically updated while editing:

```make
make server
```

Finally, publish your final `html` presentation with:

```make
make
```

---
class: middle, center, inverse

# Content
<hr width="100%" align="left" size="0.3" color="orange"></hr>

---
# Sections

Slides are separeted by `---`:

.code70[

```markdown
---
# My slide title

Content here

---
```
]

Title sections, like the previous slide, needs to specify the following classes:

.code70[
```markdown
---
class: middle, center, inverse

# Title of my section
<hr width="100%" align="left" size="0.3" color="orange"></hr>

---
```
]

.font80[
You can use one of these classes in any slide if you want to:
- Vertical center the content (`middle`)
- Horizontal center the content (`center`)
- Or inverse the background and text colours (`inverse`)
]

---
# Tables

.pull-left[
You can simply insert a markdown table:

.font70[
| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |
]]

.pull-right[
Or you can use the `DT` R package for dynamic tables:

.font70[

```r
DT::datatable(head(cars))
```

<div class="datatables html-widget html-fill-item" id="htmlwidget-89586a6d5ab0e3f4dbc6" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-89586a6d5ab0e3f4dbc6">{"x":{"filter":"none","vertical":false,"data":[["1","2","3","4","5","6"],[4,4,7,7,8,9],[2,10,4,22,16,10]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>speed<\/th>\n      <th>dist<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,2]},{"orderable":false,"targets":0},{"name":" ","targets":0},{"name":"speed","targets":1},{"name":"dist","targets":2}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
]]

---
# Figures

Insert an image:

```md
![](images/model1.svg)
```
.center[
  ![:scale 70%](images/model1.svg)
]

---
# Figures

Scale the size of an image:

```md
![:scale 60%](images/model1.svg)
```
.center[
  ![:scale 40%](images/model1.svg)
]

---
# Figures

Or simply code it:

```r
plot(cars$speed, cars$dist)
```

---
# Figures

Use the code chunck options to change the size of a plot :

````
```{r, fig.width = 4, fig.height = 2.5}
plot(cars$speed, cars$dist)
```
````

.font90[
  *You can check a full list of chunck options [here](https://yihui.org/knitr/options/)*
]

---
# Columns

50/50 columns can be created with:

.code90[

```markdown
.pull-left[
  Content 1
]
.pull-right[
  content 2
]
```

.pull-left[
For left larger columns:

```markdown
.pull-left1[
  Content 1
]
.pull-right1[
  content 2
]
```
]
.pull-right[
Or right larger columns:

```markdown
.pull-left2[
  Content 1
]
.pull-right2[
  content 2
]
```
]
]

---
# Text position

Instead of using columns, you can define the content position with:

.left[
Left aligned

```markdown
.left[text here]
```
]

.center[
Center aligned

```markdown
.left[text here]
```
]

.right[
Right aligned

```markdown
.left[text here]
```
]

---
# Text size

And also text size:

```markdown
.fontX[
  Content here
]
```

Where `X` can be anything between `10` (.font10[very small]) and `200` (.font200[HUGE]) by an increent of `10`:

.code70[

```r
print(seq(10, 200, 10))
#  [1]  10  20  30  40  50  60  70  80  90 100 110 120 130 140 150 160 170 180 190
# [20] 200
```
]

---
# Animation

Using `--` between lines

--
- you

--
- can

--
- animate

---
# Math

`$\LaTeX$` math expressions can be writen between `$$`:

```markdown
$$
  \bar{X}=\frac{1}{n}\sum_{i=1}^nX_i
$$
```

$$
  \bar{X}=\frac{1}{n}\sum_{i=1}^nX_i
$$

---
# Citation

This macro is just to easily insert text on the bottom of the slide:

.code70[

```markdown
.cite[Talluto et al. [2017](https://link) Nat. Ecol. Evol.]
```
]

.center[![:scale 70%](images/Talluto1.png)]

.cite[Talluto et al. [2017](https://www.nature.com/articles/s41559-017-0182) Nat. Ecol. Evol.]

---
# Icons

You can use both [Font awesome](https://fontawesome.com/) and [Academicons](https://jpswalsh.github.io/academicons/) icons

.pull-left[
Font awesome icons (`faic`)

```markdown
![:faic](pagelines)
```
![:faic](pagelines) 
]
.pull-right[
Academic icons (`acid`)

```markdown
![:acic](orcid)
```
![:acic](orcid)
]

<br>
You can also ajust their size with the following argument:

```markdown
![:faic 2](pagelines)
```
![:faic 2](pagelines)

---
class: middle, center, inverse

# 📦 `{xaringanExtra}`
<hr width="100%" align="left" size="0.3" color="orange"></hr>

---
# `{xaringanExtra}`

This awesome R package provides enhancements for xaringan such as

> - Add an overview of your presentation with tile view
> - Make your slides editable
> - Announce slide changes with a subtle tone
> - Animate slide transitions with animate.css
> - Add tabbed panels to slides with panelset
> - Add a logo to all of your slides with logo
> - Use the Tachyons CSS utility toolkit
> - Add a live video feed of your webcam
> - Fit your slides to fill the browser window
> - Add extra CSS styles

Take a look in their full documentation [here](https://pkg.garrickadenbuie.com/xaringanExtra/#/)

I added some examples in the following slides...

---
# `{xaringanExtra}` tile view

Press the letter "o" 😲

---
# `{xaringanExtra}` Editable slides

Just use the following class:

```markdown
.can-edit[ ... ]
```

What do you think?

.can-edit[
  -
]

---
# `{xaringanExtra}` Panelset

.panelset[
.panel[.panel-name[Code]

```r
x = rnorm(100, 10, 4)
y = rnorm(100, 2, 1)
```
]

.panel[.panel-name[Plot]

```r
plot(x, y)
```

<img src="index_files/figure-html/unnamed-chunk-21-1.png" width="504" style="display: block; margin: auto;" />
]

.panel[.panel-name[How?]

```markdown
.panelset[
  
  .panel[.panel-name[Code]
    ...
  ]

.panel[.panel-name[Plot]
    ...
  ]
]
```
]
]

---
class: middle, center, inverse

# ![:faic](js) libraries
<hr width="100%" align="left" size="0.3" color="orange"></hr>

---
# `Gifffer`

> [Gifffer](https://github.com/krasimir/gifffer) prevents the autoplaying of the animated Gifs

Instead of adding a gif with the same syntax of an image (which plays automatically), you can use the `giffer` JS macro:

```markdown
![:giffer 80%](images/RCP6_enrich.gif)
```

Where `80%` is the width of the gif

.center[
  ![:giffer 80%](https://github.com/willvieira/talk_STM-BScUdeS/raw/master/images/RCP6_enrich.gif)
]

---
# More ressources

You can check the `xaringan` presentation (which this template relies on):

https://slides.yihui.org/xaringan/#1

And also check all remark.js fonctionalities available in this template:

https://remarkjs.com/#1

---
class: inverse

.pull-left1[
<br>

# Key message here

**Special thanks to**

Nice people
]

.pull-right1[
<br>
![:scale 90%](images/logo.png)
]