diff --git a/content/examples/revealjs-speakerview.png b/content/examples/revealjs-speakerview.png new file mode 100644 index 0000000..812ecf5 Binary files /dev/null and b/content/examples/revealjs-speakerview.png differ diff --git a/content/examples/tikz-graph.svg b/content/examples/tikz-graph.svg new file mode 100644 index 0000000..9040557 --- /dev/null +++ b/content/examples/tikz-graph.svg @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/images/covers/pts24-talk.jpg b/content/images/covers/pts24-talk.jpg new file mode 100644 index 0000000..d0e37ba Binary files /dev/null and b/content/images/covers/pts24-talk.jpg differ diff --git a/content/tips/presenting.md b/content/tips/presenting.md new file mode 100644 index 0000000..93fcea4 --- /dev/null +++ b/content/tips/presenting.md @@ -0,0 +1,218 @@ +--- +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: + +![The last image from the above code](../examples/tikz-graph.svg "The last image from the above code"){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 + +One nice thing about [pandoc] + [reveal.js] slide making is that, for simple +intends and purpose, there are very little structural codes (contrary to +[beamer] for instance where you have to define several variables before +starting). + +From the following code, you can start making a presentation: + +```yaml +--- +title: Example Presentation +subtitle: It’s all about presenting +author: Fabrice Mouhartem +date: 2025-01-29 +theme: solarized +--- +``` + +Then run: + +```sh +pandoc --standalone -t revealjs -o output.html input.md +``` + +And that’s all… well, it’s just a title slide and an empty slide, but it’s the +beginning of a **wonderful** presentation. + +Then, similarly to [typst] + [touying], a level 1 heading creates a title slide, +and a level 2 heading spawns a new content slide. You can also spawn a new slide +with three hyphens (`---`). + +### 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. + +![Screenshot of the speaker view in reveal.js](/examples/revealjs-speakerview.png "Speaker View") + +### Customisation + +- List of default [reveal.js styles] +- Simple customisation with CSS: + see + + as well for exposed variables. +- However, in standalone mode, changing the font does not work well… +- Create custom theme: + - + +# Presenting Slides {#presenting-slides} + +## wl-mirror + +## pdfpc + +[RSS feed]: /feeds/all.rss.xml +[typst]: https://typst.app/ +[touying]: https://touying-typ.github.io/ +[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/