HTML presentations

HTML presentations#

When: Thursday 21 March
Presenters: Alexandre Boucaud and Cécile Cavet

Introduction#

HTML presentations are a type of presentations that are displayed on a browser, whose content is usually written using Markdown syntax, and rendered into an HTML file using a dedicated framework written in Javascript which does the layout and adds interactivity to it.

They can even be displayed within an other web page like this (click on the presentation first to be able to control it).

That presentation is accessible in full here.

Frameworks#

Among the HTML presentation frameworks, the most popular are reveal.js and remark.js.

Reveal.js has plenty of functionalities to make it tunable to classic presentation needs. Remark is a more simple, straight-to-the-point framework.

The choice of framework is really personal. Have a look at the examples to make a selection, and in any case with a little bit of tweaking of the .css style files you should be able to obtain the desired feeling.

If putting your hands in the code is not really your thing, there are simpler methods to get started. We selected two below : Quarto and the Jupyter Notebooks.

Tools to create these presentations#

Quarto#

The Quarto tool is an open-source publishing system which allows to provide documentation, scientific publication, static web site et online presentation. The software was developed since 2020 by Posit (ex-RStudio) and version 1.0 was achieved in July 2022.

The main file *.qmd is a Markdown file with Quarto specifications: YAML header, Markdown syntax and Pandoc attributes.

For HTML presentations, the reveal.js Javascript framework is used, styled with Bootstrap 5 and opinionated defaults. An example of a Quarto presentation can be found here.

Jupyter notebooks with the RISE plugin#

Jupyter notebooks are now ubiquitous in research, especially among Python users. They are used for teaching, for code demonstration or even scientific analysis.

A notebook is made of cells which can either represent code that can be executed, or text written with the Markdown syntax.

Every notebook can also be displayed in the form of a presentation by using the RISE plugin, which converts the notebook into a live reveal.js slide deck. This plugin adds for each cell the possibility to select how the cell should be displayed: slide, sub-slide, fragment, or skip to be ignored. Keyboard shortcuts can be used to accelerate that process.

Entering/exiting the presentation mode uses one key-press, and moving between slides is done with the spacebar and not the arrow keys.

It is better to start and run the entire notebook before entering presentation mode for a better display experience (especially plots).

Live code changes

If the notebook is running a kernel in the background (a Python kernel for instance), you can modify and (re)execute the code cells live which can be useful to add interactivity to your lectures/tutorials.

The presentation can then be exported in a .html file directly from the menu
File > Save and Export Notebook As... > Reveal.js slides

Displaying and interacting with slides#

Viewing slides locally#

You will need to start a web server locally to visualize the slides. This can be through a IDE plugin like VSCode Live Preview, or using your terminal with this Python oneliner

python -m http.server -d /path/to/presentation/directory

to spawn a simple web server accessible at http://localhost:8000/ and then selecting the presentation.

Publishing online#

Hosting the presentations online is a similar process to the one of creating Static websites, seen in the last café.

The .html file and any static content (images, GIFs, videos) must be stored on a GitHub/GitLab/lab server and a specific web server setup.

Exporting to PDF#

There are a few ways to export the presentation to PDF (minus the animations).

  1. The framework may have an option to do it,

  2. Printing from the browser directly (result not guarantied),

  3. Adding ?print-pdf at the end of the browser address (e.g. http://localhost:8000/my-pres.html?print-pdf),

  4. Using a dedicated tool called decktape.

Happy presentations !

Contents