Fabrice Mouhartem
9806dbd95b
- introduction for reveal.js - draft for customisation - rewrite some other parts
188 lines
7.6 KiB
Markdown
188 lines
7.6 KiB
Markdown
---
|
||
Title: Tools for making and giving presentations
|
||
Date: 2024-11-03
|
||
Author: Fabrice
|
||
Category: Tips
|
||
Tags: presentation, vim, latex
|
||
Slug: presenting
|
||
Header_Cover: ../images/covers/pts24-talk.jpg
|
||
Summary: Some of the tools I use for making and giving presentations.
|
||
lang: 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.
|
||
|
||
```latex
|
||
…
|
||
\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:
|
||
|
||
{width=66%}
|
||
|
||
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](https://ia.cr/2001/045)
|
||
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](https://ctan.tetaneutral.net/macros/latex/contrib/beamer-contrib/themes/metropolis/doc/metropolistheme.pdf),
|
||
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:
|
||
|
||
```latex
|
||
\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](https://tex.stackexchange.com/questions/78955/use-tikz-external-feature-with-beamer-only).
|
||
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](https://pcoves.gitlab.io/blog/pandoc-markdown-revealjs/).
|
||
|
||
[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>
|
||
- <https://github.com/Chouhartem/reveal.js/tree/cryptpad-theme>
|
||
|
||
# Presenting Slides {#presenting-slides}
|
||
|
||
## wl-mirror
|
||
|
||
## pdfpc
|
||
|
||
[RSS feed]: /feeds/all.rss.xml
|
||
[typst]: https://typst.app/
|
||
[typst article]: {filename}../software/typst.md
|
||
[presenting slides]: #presenting-slides
|
||
[LaTeX]: https://www.latex-project.org/
|
||
[beamer]: https://ctan.org/pkg/beamer
|
||
[vim setup for LaTeX]: {filename}../software/nvim-latex.md
|
||
[overlay]: https://www.overleaf.com/learn/latex/Beamer_Presentations%3A_A_Tutorial_for_Beginners_(Part_4)%E2%80%94Overlay_Specifications
|
||
[TikZ]: https://www.ctan.org/pkg/pgf
|
||
[tikzpingus]: https://github.com/EagleoutIce/tikzpingus
|
||
[reveal.js]: https://revealjs.com/
|
||
[reveal.js styles]: https://revealjs.com/themes/
|
||
[pandoc]: https://pandoc.org/
|
||
[metropolis]: https://github.com/matze/mtheme
|
||
[markdown]: https://en.wikipedia.org/wiki/Markdown
|
||
[speaker view]: https://revealjs.com/speaker-view/
|