feat(presentations): continue the blog post

- introduction for reveal.js
- draft for customisation
- rewrite some other parts
This commit is contained in:
Fabrice Mouhartem 2025-01-28 23:08:05 +01:00
parent 19dcc79a98
commit 9806dbd95b
Signed by: fmouhart
GPG Key ID: 2C5033B228CFE4E7
2 changed files with 68 additions and 13 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 381 KiB

View File

@ -7,7 +7,7 @@ Tags: presentation, vim, latex
Slug: presenting Slug: presenting
Header_Cover: ../images/covers/pts24-talk.jpg Header_Cover: ../images/covers/pts24-talk.jpg
Summary: Some of the tools I use for making and giving presentations. Summary: Some of the tools I use for making and giving presentations.
Lang: en lang: en
--- ---
# Introduction # Introduction
@ -16,12 +16,13 @@ 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 contexts: internal to the company, for open-source conferences, for business
conferences… conferences…
I use this opportunity to refine a bit my presentation tools, and I just I used these different opportunities to refine a bit my presentation tools, and
summarize them here for curious people. 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 [typst] for slide This page may be updated, for instance if I start using yet another tool for
making. If you have subscribed to this blogs [RSS feed], you will be notified slide making that I think is worth mentioning. If you have subscribed to this
of future updates. blogs [RSS feed], you will be notified of future updates.
# Making Slides # Making Slides
@ -36,14 +37,17 @@ documents, and presentations are not an exception. For this purpose Im using
[beamer]. [beamer].
For this purpose, my [vim setup for LaTeX] proved to be pretty useful, For this purpose, my [vim setup for LaTeX] proved to be pretty useful,
especially with the “on save compilation”. However, the backward search is not especially with the “compilation on save” feature. It allows me to have an
very accurate with beamer slides. 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 ### Overlays and Graphics
The main advantage, besides my familiarity with [LaTeX], lays in the [overlay] 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 system in beamer, that is quite powerful and provides a very precise way to
display elements, especially with [TikZ] to design animated graphics. 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 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 initially, then the bottom, and change the name of the last node for the second
@ -76,17 +80,17 @@ Resulting in:
Moreover, you have access to the whole latex ecosystem, especially those for Moreover, you have access to the whole latex ecosystem, especially those for
neat illustrations such as [tikzpingus]. neat illustrations such as [tikzpingus].
**Note:** I have to say that the above technique is unsafe under fairly **Note:** I feel compelled to say that the above technique is unsafe under fairly
reasonnable assumptions. Long story short you should sign first *then* encrypt 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) and not do both in parallel. Please see [this paper](https://ia.cr/2001/045)
from Crypto01 if you want a more detailed explanation. from the Crypto 2001 conference if you want a more detailed explanation.
### Customisation ### Customisation
It is also quite easy to customise slides with beamer. For instance, with It is also quite easy to customise slides with beamer. For instance, with
[metropolis], from its [metropolis], from its
[documentation](https://ctan.tetaneutral.net/macros/latex/contrib/beamer-contrib/themes/metropolis/doc/metropolistheme.pdf), [documentation](https://ctan.tetaneutral.net/macros/latex/contrib/beamer-contrib/themes/metropolis/doc/metropolistheme.pdf),
section 8 describe where to find specific colours. As for the fonts, if you are 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. using xelatex/lualatex, a simple `\setmainfont` suffices to redefine it.
For instance, if I want to have the alert text in orange: For instance, if I want to have the alert text in orange:
@ -113,6 +117,52 @@ than they are.
settings to generate them are liberally inspired by [Pablo settings to generate them are liberally inspired by [Pablo
Coves](https://pcoves.gitlab.io/blog/pandoc-markdown-revealjs/). 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 dont
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 its 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 LaTeXspecific 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. Thats 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 Ill show later
for PDF slides.
![](/examples/revealjs-speakerview.png "Speaker View")
### 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} # Presenting Slides {#presenting-slides}
## wl-mirror ## wl-mirror
@ -130,3 +180,8 @@ Coves](https://pcoves.gitlab.io/blog/pandoc-markdown-revealjs/).
[TikZ]: https://www.ctan.org/pkg/pgf [TikZ]: https://www.ctan.org/pkg/pgf
[tikzpingus]: https://github.com/EagleoutIce/tikzpingus [tikzpingus]: https://github.com/EagleoutIce/tikzpingus
[reveal.js]: https://revealjs.com/ [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/