feat(presentations): continue the blog post
- introduction for reveal.js - draft for customisation - rewrite some other parts
This commit is contained in:
		
							
								
								
									
										
											BIN
										
									
								
								content/examples/revealjs-speakerview.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								content/examples/revealjs-speakerview.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 381 KiB  | 
@@ -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 blog’s [RSS feed], you will be notified
 | 
					slide making that I think is worth mentioning. If you have subscribed to this
 | 
				
			||||||
of future updates.
 | 
					blog’s [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 I’m 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 Crypto’01 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 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}
 | 
					# 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/
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user