Here is an example of presenter notes that only the presenter sees!
Building impressive presentations with modern web technologies
Here is an example of presenter notes that only the presenter sees!
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.
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.
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.
Making presentations should be fun
Sharing presentations should be easy
Making presentations should be fun
Sharing presentations should be easy
I enjoy writing code (and you do too!)
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
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
Disentangle our focus on content and style
Diffable plain-text files
Disentangle our focus on content and style
Diffable plain-text files
Good defaults, fast prototyping, quick victories
Disentangle our focus on content and style
Diffable plain-text files
Good defaults, fast prototyping, quick victories
Easy integration of code and output
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
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
javascript
library that provides...A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS
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
If you already know how to use standard Markdown you are 90% of the way there...
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...
Easy integration of code and output!!
R Markdown
to the rescue
R
languagepython
Easy integration of code and output!!
R Markdown
to the rescue
R
languagepython
{xaringan}
is a R
package that brings it all together by combining {rmarkdown}
and remark.js
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
Use {xaringanthemer} for easy custom themeing of your slides
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
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
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...{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
Tachyons - Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
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
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
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
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
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
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
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 |
o | Tile View: Overview of Slides |
Esc | Back to slideshow |
Building impressive presentations with modern web technologies
Here is an example of presenter notes that only the presenter sees!
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.
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.
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.
Making presentations should be fun
Sharing presentations should be easy
Making presentations should be fun
Sharing presentations should be easy
I enjoy writing code (and you do too!)
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
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
Disentangle our focus on content and style
Diffable plain-text files
Disentangle our focus on content and style
Diffable plain-text files
Good defaults, fast prototyping, quick victories
Disentangle our focus on content and style
Diffable plain-text files
Good defaults, fast prototyping, quick victories
Easy integration of code and output
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
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
javascript
library that provides...A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS
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
If you already know how to use standard Markdown you are 90% of the way there...
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...
Easy integration of code and output!!
R Markdown
to the rescue
R
languagepython
Easy integration of code and output!!
R Markdown
to the rescue
R
languagepython
{xaringan}
is a R
package that brings it all together by combining {rmarkdown}
and remark.js
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
Use {xaringanthemer} for easy custom themeing of your slides
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
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
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...{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
Tachyons - Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
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
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
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
{xaringanthemer}
- Give your xaringan slides some style with xaringanthemer
{xaringanExtra}
- A playground of extensions for xaringan
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
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