```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
if (!require("knitr")) {
   install.packages("knitr")
   library(knitr)
}
if (!require("pander")) {
   install.packages("pander")
   library(pander)
}
if (!require("plotly")) {
   install.packages("plotly")
   library(plotly)
}
if (!require("ggplot2")) {
   install.packages("ggplot2")
   library(ggplot2)
}
knitr::opts_chunk$set(
                  fig.width=3, 
                  fig.height=3, 
                  fig.retina=12,
                  out.width = "100%",
                  cache = FALSE,
                  echo = TRUE,
                  message = FALSE, 
                  warning = FALSE,
                  hiline = TRUE
                  )
```

```{r xaringan-themer, include=FALSE, warning=FALSE}
library(xaringanthemer)
  style_duo_accent(primary_color = "#1F4257",
          secondary_color = "#380F2A",
          # fonts
          header_font_google = google_font("Martel"),
          text_font_google = google_font("Lato"),
          code_font_google = google_font("Fira Mono"))
```

name:toc
class:inverse1, top

# Table of Contents
<!--h1 align="center"> Table of Contents</h1-->
<BR>

<!--[<img src="linksymbol.png" width=50 height=50>](#Presentclear) -->
<table align="center", width = "50%">
<tr>
<td style="text-size:50px; line-height: 1.5; font-variant:small-caps">

 <font size = 6><img src="ram.png" width=30, height=25> <b> Make slides clear and readable. </b></font>
 <br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Keep slides simple and consistent. </b></font> <br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Effectively using visuals. </b></font><br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Effectively using web technologies. </b></font><br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Using graphics effectively. </b></font><br>
 <font size = 6><img src="ram.png" width=30, height=25> <b> Using colors cautiously. </b></font><br>
<font size = 6><img src="ram.png" width=30, height=25> <b> Effectively delivering presentation. </b></font><br>
<font size = 6><img src="ram.png" width=30, height=25> <b> Avoiding common mistakes. </b></font>
</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#toc0) 
[<img src="next.png" width=60, height=18, align="right">](#storytelling)

---
class:inverse middle center
name:storytelling


# Presentation is all about storytelling! 

[<img src="previous.png" width=60, height=18, align="left">](#toc) 
[<img src="next.png" width=60, height=18, align="right">](#Presentclear)


---
name:Presentclear

# <font color="#70384A"> Make Presentation Clear </font>
<br>

<table align="center", width = "60%">
<tr>
<td style="line-height: 1.5; font-variant:small-caps; text-color:#70384A;">
<font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Overall: concise, simple and relevant.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Content in logical structure.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> One theme per slide. </font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Using keywords and phrases.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use less sentences, avoid paragraphs.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Aesthetics of tables and graphics.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Using LaTex equations if necessary. </font>
</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#story-telling) 
[<img src="next.png" width=60, height=18, align="right">](#readable) 


---
name:readable

<h1 align="center"><font color="#70384A"> Make Slides Readable </font></h1>
<br>

<table align="center", width = "60%">
<tr>
<td style="text-size:50px; line-height: 1.5; text-color:#70384A; font-face: 'Trebuchet MS', sans-serif;">
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use web safe fonts.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use readable font size. </font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use consistent font face.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid blocks of text.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid capitalized text.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Highlight aesthetics of visuals.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Use LaTex equations if necessary. </font><br>

</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#Presentclear) 
[<img src="next.png" width=60, height=18, align="right">](#overdesign)  
 

---
name:overdesign

<h1 align="center"><font color="#70384A"> Avoiding Over-design </font></h1>
<br>

<table align="center", width = "60%">
<tr>
<td style="line-height: 1.5;  font-face: 'Trebuchet MS', sans-serif;">

<font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoiding cluttering information.</font><br>

 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoiding unnecessary information.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid crowding slides by splitting.</font><br>
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid distracting background.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid over decoration.</font><br> 
 
 <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid too many animations.</font><br> 
 
  <font size = 6 color = "#70384A"><img src="ram0.png"  width=40, height=33> Avoid text-heavy slides.</font><br>
  
</td>
</tr>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#readable) 
[<img src="next.png" width=60, height=18, align="right">](#overusetech)


---
name:overusetech

<h1 align="center"><font color="#70384A"> Overusing Technology</font></h1>
<br>

<table align="center", width = "70%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Aim to communicate not tech showcase.<br>

<img src="ram0.png"  width=40, height=33> Use animations sparingly.<br> 
 
<img src="ram0.png"  width=40, height=33> Use sound and video only if needed.<br>
 
<img src="ram0.png"  width=40, height=33> Avoid using sound if possible.<br>
 
<img src="ram0.png"  width=40, height=33> Use video only if needed.<br>
 
<img src="ram0.png"  width=40, height=33>Avoid using sound and video the same time.<br> 
 
<img src="ram0.png"  width=40, height=33>Avoid switching to different tech platform<br> 
 </font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#overusetech) 
[<img src="next.png" width=60, height=18, align="right">](#consistency)



---
name:consistency

# <font color="#70384A"> Consistent Design Presentation Slides </font> 
<br>

<table align="center", width = "70%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Choose a theme and stick to it.<br>

<img src="ram0.png"  width=40, height=33> Maintain the key design elements.<br> 
 
<img src="ram0.png"  width=40, height=33> Use of dominant and secondary colors. <br>
 
<img src="ram0.png"  width=40, height=33> Font and background consistency. <br>
 
<img src="ram0.png"  width=40, height=33> Consistency of bullets point and alternatives.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#overusetech) 
[<img src="next.png" width=60, height=18, align="right">](#visuals)



---
name:visuals

# <font color="#70384A"> Use and Create Visual Contents </font> 
<br>

<table align="center", width = "70%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A">Visual contents: tables and graphs<br>

<img src="ram0.png"  width=40, height=33> Visuals for communication not decoration.<br>

<img src="ram0.png"  width=40, height=33> Use of complementary and analogous colors. <br>
 
<img src="ram0.png"  width=40, height=33> Controlling size of tables and graphs<br>
 
<img src="ram0.png"  width=40, height=33> Visuals must be readable.<br>

<img src="ram0.png"  width=40, height=33> No more than two visuals per slide.<br>

<img src="ram0.png"  width=40, height=33> Right visual for right information.<br>


</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#consistency) 
[<img src="next.png" width=60, height=18, align="right">](UsingColors)

---
name:UsingColors

# <font color="#70384A"> Use Colors Effectively </font> 
<br>

<table align="center", width = "70%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Color contrast. <a href="https://accessibleweb.com/color-contrast-checker/" target="_blank" 
     onclick="window.open('https://accessibleweb.com/color-contrast-checker/','name',
                   'width=1200,height=1000)"> [Color contrast checker 
                   <img src="img/linkicon.png" width=50 height=50>]</a> <br>

<img src="ram0.png" width=40, height=33><font size = 6 color = "#70384A"> Color meanings. <a href="img/ColorEmotion.png" target="_blank" 
     onclick="window.open('img/ColorEmotion.png','name',
                   'width=1400,height=800)"> [Color psychology 
                   <img src="img/linkicon.png" width=50 height=50>]</a> <br>


<img src="ram0.png"  width=40, height=33> Avoidance of color combination.<br>

<img src="ram0.png"  width=40, height=33> Dark background with light text and graphics. <br>
 
<img src="ram0.png"  width=40, height=33> Light background with dark text and graphics<br>
 
<img src="ram0.png"  width=40, height=33> Using background graphics with caution.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#visuals) 
[<img src="next.png" width=60, height=18, align="right">](#DeliveryPresentation01)



---
name:DeliveryPresentation01

# <font color="#70384A"> Delivering A Good Presentation I </font> 
<br>

<table align="center", width = "55%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Know your audience.</font><span><img src="img/1knowAudience.png" width = "700", height="100" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Think about an impressive start.</font><span><img src="img/2StartStrong.png" width = "550", height="100" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Speak with passion.</font><span><img src="img/3Passion.png" width = "550", height="70" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Keep it simple and short.</font><span><img src="img/4KeepItSimpleShort.png" width = "650", height="120" /></span></a>
</div>
 
</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#UsingColors) 
[<img src="next.png" width=60, height=18, align="right">](#DeliveryPresentation02)



---
name:DeliveryPresentation02

# <font color="#70384A"> Delivering A Good Presentation II </font> 
<br>

<table align="center", width = "50%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Effective use of voice.</font><span><img src="img/5UseVoice.png" width = "650", height="120" /></span></a>
</div>
 
<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Maintain eye contact.</font><span><img src="img/6eyeContact.png" width = "650", height="100" /></span></a>
</div>
 
<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Use body language.</font><span><img src="img/7bodyLanguage.png" width = "650", height="150" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Deal with nervousness.</font><span><img src="img/8DealNervousness.png" width = "400", height="150" /></span></a>
</div>


</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#DeliveryPresentation01) 
[<img src="next.png" width=60, height=18, align="right">](#CommonMistakes)


---
name:CommonMistakes

# <font color="#70384A"> Common Mistakes </font> 
<br>

<table align="center", width = "75%">
<tbody >
<tr style= "line-height: 1.5; font-face: 'Trebuchet MS', sans-serif;">
<td>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Ignoring the audience.</font><span><img src="img/0ignoringAudience.png" width = "650", height="150" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Expecting visuals to do presentation for you.</font><span><img src="img/1Visual.png" width = "650", height="100" /></span></a>
</div>
 
<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Spending more time on slides than presentation.</font><span><img src="img/2SpendingTimeOnSlide.png" width = "500", height="150" /></span></a>
</div>

<div class="hover_img"><img src="ram0.png"  width=40, height=33>
     <a href=""><font color="#70384A" size= 6>Reading directly from slides.</font><span><img src="img/3ReadingDlides.png" width = "650", height="150" /></span></a>
</div>
 
<font color="#70384A" size= 6> 
<img src="ram0.png"  width=40, height=33> Inadequate preparation and rehearsal.<br>
 
<img src="ram0.png"  width=40, height=33> Turning all the lights off.<br>

<img src="ram0.png"  width=40, height=33> <font color="#70384A" size= 6>Hiding in the corner.<br>

</font>
</td>
</tr>
</tbody>
</table>

[<img src="previous.png" width=60, height=18, align="left">](#DeliveryPresentation02) 
[<img src="next.png" width=60, height=18, align="right">](#Thanks)



---
name:Thanks
class: inverse1 center, middle

# Thanks!

Slides created using R packages:

[**xaringan**](https://github.com/yihui/xaringan)<br>
[**gadenbuie/xaringanthemer**](https://github.com/gadenbuie/xaringanthemer)<br>
[**knitr**](http://yihui.name/knitr)<br>
[**R Markdown**](https://rmarkdown.rstudio.com)<br>
via <br>
[**RStudio Desktop**](https://posit.co/download/rstudio-desktop/)
