- introduction for reveal.js - draft for customisation - rewrite some other parts
7.6 KiB
Title | Date | Author | Category | Tags | Slug | Header_Cover | Summary | lang |
---|---|---|---|---|---|---|---|---|
Tools for making and giving presentations | 2024-11-03 | Fabrice | Tips | presentation, vim, latex | presenting | ../images/covers/pts24-talk.jpg | Some of the tools I use for making and giving presentations. | en |
Introduction
Over the past year, I have to give quite a few presentations in different contexts: internal to the company, for open-source conferences, for business conferences…
I used these different opportunities to refine a bit my presentation tools, and I just summarize them here for curious people. Please note that this blog post will only cover the tooling needed to produce slides, not what to put inside.
This page may be updated, for instance if I start using yet another tool for slide making that I think is worth mentioning. If you have subscribed to this blog’s RSS feed, you will be notified of future updates.
Making Slides
For slide making, I prefer using tools that separate the content from the actual design. I’m thus not using fancy WYSIWYG tools for that. If you are not interested in that, you can already skip to the presenting slides section.
LaTeX Beamer
As explained in the typst article, I’m mostly using LaTeX to produce/typeset documents, and presentations are not an exception. For this purpose I’m using beamer.
For this purpose, my vim setup for LaTeX proved to be pretty useful, especially with the “compilation on save” feature. It allows me to have an already set up text editor for LaTeX without having to fiddle and twiddle with multiple setups. However, the backward search is not very accurate with beamer slides.
Overlays and Graphics
The main advantage, besides my familiarity with LaTeX, lays in the overlay system in beamer, that is quite powerful and provides a very precise way to display elements. This overlay mechanism also compounds well with TikZ to design animated graphics.
For instance in the example below, I can show the top part of the graph initially, then the bottom, and change the name of the last node for the second slide. That can be easily adjusted to have more steps in the process.
…
\usetikzlibrary{positioning}
…
\begin{tikzpicture}
\tikzstyle{node} = [draw, rectangle, fill=blue!40, minimum height=2em]
\tikzstyle{arrow} = [->, >=stealth, very thick]
\node[node] (start) {Data};
\node[node, right=1cm of start] (a1) {Enc($\cdot$)};
\node<2->[node, below=5mm of a1] (a2) {Sig($\cdot$)};
\node<1>[node, right=1cm of a1] (stop) {Encrypted Data};
\node<2->[node, right=1cm of a1] (stop) {Encrypted and Signed Data};
\draw[arrow] (start) -- (a1);
\draw<2->[arrow] (start) -- (a2);
\draw[arrow] (a1) -- (stop);
\draw<2->[arrow] (a2) -- (stop);
\end{tikzpicture}
Resulting in:
Moreover, you have access to the whole latex ecosystem, especially those for neat illustrations such as tikzpingus.
Note: I feel compelled to say that the above technique is unsafe under fairly reasonable assumptions. Long story short you should sign first then encrypt and not do both in parallel. Please see this paper from the Crypto 2001 conference if you want a more detailed explanation.
Customisation
It is also quite easy to customise slides with beamer. For instance, with
metropolis, from its
documentation,
section 8 describes where to find specific colours. As for the fonts, if you are
using xelatex/lualatex, a simple \setmainfont
suffices to redefine it.
For instance, if I want to have the alert text in orange:
\setbeamercolor[alerted text]{fg=orange}
Drawbacks
However, LaTeX starts to slow down quickly, especially with a lot of TikZ
drawings… On documents, it’s not really an issue as it is possible to cache the
drawings with the externalize
tikz library. However, when mixing overlays and
TikZ, it starts to need some
tweaks.
I never included them in my workflow as they make TikZ drawings more complicated
than they are.
Typst Touying
Pandoc and reveal.js
reveal.js is a javascript framework to produce clean and dynamic slides. My settings to generate them are liberally inspired by Pablo Coves.
Pandoc on the other hand is a document converter tool that supports a very extensive spectrum of formats and syntaxes. My most use case is to convert markdown to some other reflowable format (usually HTML, and sometimes EPUB).
Using both in conjunction allows for quick and dynamic presentations which don’t require accuracy in placements. That may be the case for lightning talks for instance. The main advantage compared to the two above solutions is that reveal.js takes advantage of web browser capabilities to produce dynamic transitions. Those are otherwise hard to get from PDFs (some people made custom PDF reader for that).
I know that it’s also possible to use pandoc to produce directly beamer slides for instance, thus benefiting from the simpler Markdown syntax while having LaTeX as an engine. I however find this approach too rigid. It is indeed easy to feed some LaTeX‑specific commands via the YAML header, e.g., for styling. Unfortunately, when the need arises to do some specific positioning on a slide for example, then we end up with some markdown-TeX mix that I found deeply inelegant. That’s why I usually stick to LaTeX (or more recently typst) to produce PDFs, as these tools are designed with an awareness of the page layout (which blends well into the language). This property is not the case with Markdown, which is a markup language for text formatting (not typesetting).
Ease of use
Speaker view
One of the advantage of reveal.js is the built-in speaker view. It spans a pop-up with useful pieces of information for the speaker: a chronometer, a preview of the upcoming slide and notes if there are any.
Its behaviour is similar to what you can have with pdfpc
that I’ll show later
for PDF slides.
Customisation
- List of default reveal.js styles
- Simple customisation with CSS: https://gist.github.com/jsoma/629b9564af5b1e7fa62d0a3a0a47c296#styling see https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss as well for exposed variables.
- However, in standalone mode, changing the font does not work well…
- Create custom theme: https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md