+ - 0:00:00
Notes for current slide

Here is an example of presenter notes that only the presenter sees!

Notes for next slide

HTML Presentations or: How I Learned to Stop Worrying and Love the Web

Building impressive presentations with modern web technologies

Matthew T. Warkentin, MSc. Ph.D (c) Lunenfeld-Tanenbaum Research Institute, Sinai Health System
October 21, 2020
1

Here is an example of presenter notes that only the presenter sees!

2

Dr. Strangelove, is a 1964 black comedy film that satirizes the Cold War fears of a nuclear conflict between the Soviet Union and the United States.

3

Dr. Strangelove, is a 1964 black comedy film that satirizes the Cold War fears of a nuclear conflict between the Soviet Union and the United States.

4

Dr. Strangelove, is a 1964 black comedy film that satirizes the Cold War fears of a nuclear conflict between the Soviet Union and the United States.

HTML Presentations, are a 2020 presentation tool that solves the Grad Students' fears of an internal conflict between static presentations and dynamic web technologies.

5

Why, though?

6

Why, though?

  • Making presentations should be fun
7

Why, though?

  • Making presentations should be fun

  • Sharing presentations should be easy

8
  • Sharing: Sharing a web link is easy, it also means you maintain some form of governance over your presentation and future changes

Why, though?

  • Making presentations should be fun

  • Sharing presentations should be easy

  • I enjoy writing code (and you do too!)

9
  • Sharing: Sharing a web link is easy, it also means you maintain some form of governance over your presentation and future changes

Why, though?

  • Making presentations should be fun

  • Sharing presentations should be easy

  • I enjoy writing code (and you do too!)

  • We should try to adhere to the separation of concerns design principle

CSS Zen Garden Example

10
  • Sharing: Sharing a web link is easy, it also means you maintain some form of governance over your presentation and future changes

Separation of Concerns

Separation of content and presentation is the separation of concerns design principle as applied to the authoring and presentation of content. Under this principle, visual and design aspects (presentation and style) are separated from the core material and structure (content) of a document.

Separation of content and presentation - Wikipedia

11

What do we want?

12

What do we want?

  • Disentangle our focus on content and style
13

What do we want?

  • Disentangle our focus on content and style

  • Diffable plain-text files

14

What do we want?

  • Disentangle our focus on content and style

  • Diffable plain-text files

  • Good defaults, fast prototyping, quick victories

15

What do we want?

  • Disentangle our focus on content and style

  • Diffable plain-text files

  • Good defaults, fast prototyping, quick victories

  • Easy integration of code and output

16

What do we want?

  • Disentangle our focus on content and style

  • Diffable plain-text files

  • Good defaults, fast prototyping, quick victories

  • Easy integration of code and output

  • Highly configurable, if desired

17

What do we want?

  • Disentangle our focus on content and style

  • Diffable plain-text files

  • Good defaults, fast prototyping, quick victories

  • Easy integration of code and output

  • Highly configurable, if desired

  • Ability to include dynamic/interactive content

18
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
19
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
20
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
21
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
22
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
23
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
24
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
25
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content
26
PowerPoint/
Keynote
Beamer
HTML
Separation of concerns
Plain-text files
Good defaults
Transportability
Integrate code/output
Highly configurable
Dynamic content

27

remark.js

  • A javascript library that provides...

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

28

remark.js

  • A javascript library that provides...

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

So what does that mean?

Concern 1: Write slide content using simple markdown language*

Concern 2: Customize visual aspect with CSS (defaults are good)

*remark.js handles translating the markdown to HTML and forming the slideshow structure

29

Building on standard Markdown...

If you already know how to use standard Markdown you are 90% of the way there...

30

Building on standard Markdown...

If you already know how to use standard Markdown you are 90% of the way there...

remark.js adds more markdown-like syntax to help out:

  • --- to separate slides

  • -- to reveal content slide-by-slide

  • ??? to add presenter notes

  • class: or .class[] to add CSS classes to slides or content, respectively

  • And a few more easy-to-learn snippets...

31
32

Live Coding Demonstration

33

But what is missing?

34

But what is missing?

  • Easy integration of code and output!!
35

But what is missing?

  • Easy integration of code and output!!

  • R Markdown to the rescue

    • Combines markdown-driven content creation with the power of the R language
    • Native support for over 30 languages, including python
    • Simple document configuration via YAML front-matter
36

But what is missing?

  • Easy integration of code and output!!

  • R Markdown to the rescue

    • Combines markdown-driven content creation with the power of the R language
    • Native support for over 30 languages, including python
    • Simple document configuration via YAML front-matter
  • {xaringan} is a R package that brings it all together by combining {rmarkdown} and remark.js

37

How it all works...

38

39

40

41

Lucky for us...

  • All of the magic happens behind the scenes thanks to {xaringan}

  • From our perspective, we just simply add content to our presentation and all intermediate steps are managed for us

  • RStudio IDE support for live serving and real-time updating

  • Like PowerPoint/Keynote/Beamer, there are many nice templates offered

42
43

{xaringan} Features

  • Embedded code chunks
  • Autoplay
  • LaTeX math support
  • Code highlighting
  • Countdown timers
  • Lots of themes
  • Etc.
44

{xaringan} Features

  • Embedded code chunks
  • Autoplay
  • LaTeX math support
  • Code highlighting
  • Countdown timers
  • Lots of themes
  • Etc.

{xaringanExtra} Features

  • Tile view
  • Editable slides
  • Copy-to-clipboard
  • Slide transitions/animations
  • Webcam support
  • Live broadcasting
  • Etc.

Use {xaringanthemer} for easy custom themeing of your slides

45

Live Coding Demonstration

46

Summary

  • HTML presentations allow us to adhere to the separation of concerns design principle and embrace the full suite of web technologies
47

Summary

  • HTML presentations allow us to adhere to the separation of concerns design principle and embrace the full suite of web technologies

  • remark.js is a javascript library that makes it easy to build HTML presentations using easy-to-learn markdown syntax

48

Summary

  • HTML presentations allow us to adhere to the separation of concerns design principle and embrace the full suite of web technologies

  • remark.js is a javascript library that makes it easy to build HTML presentations using easy-to-learn markdown syntax

  • R Markdown simplifies generating HTML documents and automatically integrating code and output with prose

49

Summary

  • HTML presentations allow us to adhere to the separation of concerns design principle and embrace the full suite of web technologies

  • remark.js is a javascript library that makes it easy to build HTML presentations using easy-to-learn markdown syntax

  • R Markdown simplifies generating HTML documents and automatically integrating code and output with prose

  • {xaringan} combines R Markdown and remark.js

    • {xaringan} + {xaringanExtra} provide most/all of the presentation features you'd expect, and some you didn't realize you needed...
50

Additional Resources

51

Additional Resources

52

Additional Resources

53

Additional Resources

54

Additional Resources

  • {xaringanthemer} - Give your xaringan slides some style with xaringanthemer

  • {xaringanExtra} - A playground of extensions for xaringan

  • remark.js Wiki

  • Tachyons - Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible

  • Google Fonts - Making the web more beautiful, fast, and open through great typography

55

Additional Resources

  • {xaringanthemer} - Give your xaringan slides some style with xaringanthemer

  • {xaringanExtra} - A playground of extensions for xaringan

  • remark.js Wiki

  • Tachyons - Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible

  • Google Fonts - Making the web more beautiful, fast, and open through great typography

  • Unsplash - Free high-resolution photos

56

Additional Resources

  • {xaringanthemer} - Give your xaringan slides some style with xaringanthemer

  • {xaringanExtra} - A playground of extensions for xaringan

  • remark.js Wiki

  • Tachyons - Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible

  • Google Fonts - Making the web more beautiful, fast, and open through great typography

  • Unsplash - Free high-resolution photos

  • {fontawesome} - The web's most popular icon set and toolkit

57

Acknowledgements

All of this made possible by the open-source work of:

  • Ole Petter Bang for remark.js

  • J.J. Allaire et al. for {rmarkdown}

  • Yihui Xie for {xaringan}

  • Garrick Aden-Buie for {xaringanExtra} and {xaringanthemer}

The power of Open Soure is the power of the people. The people rule.

-Philippe Kahn

58
2
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
oTile View: Overview of Slides
Esc Back to slideshow