Eine Alternative zu PowerPoint
Als Dozent und Trainer arbeite ich in der Regel mit einem Mix aus Präsentationen, Live-Codings und Übungen. Für die Präsentationen habe ich dabei zunächst den Klassiker PowerPoint verwendet, aber das fühlte sich schnell nicht mehr richtig an. Zu oft habe ich mich dabei ertappt, wie ich zu viel Zeit mit der Formatierung von Inhalten verbracht habe. Ein weiteres Problem lag in der Darstellung von Code in PowerPoint. Ich hatte das Gefühl, dass nur Bilder bzw. Screenshots von Code wirklich gut aussahen, aber das brachte ein großes Problem mit sich: Bilder müssen immer wieder neu erstellt werden, wenn sich im Code Änderungen ergeben und das ist sehr zeitaufwändig.
Slidev
Daher habe ich mich auf die Suche nach einer Alternative zu PowerPoint begeben und bin mit slidev fündig geworden. Slidev ermöglicht mir die Beschreibung meiner Präsentationsinhalte in Markdown. Das bedeutet, dass ich Präsentationen ähnlich schreiben kann wie Code - großartig! Darüber hinaus bietet slidev für mich viele nützliche Funktionen, wie zum Beispiel:
- Eine super Darstellung von Code. Für viele gängige Programmiersprachen existiert ein Syntax-Highlighting.
- Der Inhalt und die Formatierung bzw. Darstellung der Präsentation sind getrennt. Es stehen sehr viele verschiedene Layouts und Themes zur Verfügung, um die Erscheinung der eigenen Präsentation an die persönlichen Bedürfnisse anzupassen.
- Eine slidev-Präsentation wird im Browser gestartet und kann bei Bedarf über eine eigene Presenter-Ansicht gesteuert werden. Dabei kann auch zwischen einem Dark- und Light-Mode gewechselt werden.
- Die Präsentation kann als PDF exportiert werden. So kann ich die Inhalte sehr einfach Teilnehmer:innen meiner Kurse zur Verfügung stellen.
Eine sehr umfangreiche Dokumentation erleichtert zudem den Einstieg.
Inhalte wiederverwenden
Die Vorlesungen und Kurse, die ich als Dozent bzw. Trainer gebe, befassen sich in der Regel mit der Entwicklung von Apps mit React Native, Expo und JavaScript. Dabei gibt es eine große Schnittmenge bei den Inhalten, die ich sowohl in den Vorlesungen als auch in den Kursen verwende. Zunächst habe ich sowohl ein slidev-Projekt für die Vorlesung als auch ein slidev-Projekt für die Kurse angelegt und Inhalte dupliziert - keine gute Idee! Wie auch in der Entwicklung, sollte man auch bei Präsentationsinhalten Doppelungen vermeiden, weil es den Wartungsaufwand unnötig erhöht.
Auf der Suche nach einem Ansatz zur Wiederverwendung, fiel mir auf, dass slidev für Grafiken Symlinks unterstützt und dass einzelne Abschnitte von Präsentationsinhalten aus Ordnern außerhalb des aktuellen Projektverzeichnisses eingebunden werden können. Symlinks und externe Abschnitte erlauben es mir eine Art Multi-Module-Projekt für verschiedene slidev-Präsentationen anzulegen:
teaching-react-native-and-expo/
├── common/
│ └── public/
│ └── some-image.png
│ └── sections/
│ └── common-topic-a.md
├── lecture/
│ └── public/
│ └── some-image.png <-- Symlink
│ └── sections/
│ └── lecture-specific-topic-b.md
├── course/
│ └── public/
│ └── some-image.png <-- Symlink
│ └── sections/
│ └── course-specific-topic-b.md
Der Ordner common enthält Grafiken (im Ordner public) und Abschnitte von Präsentationsinhalten (im Ordner sections), die sowohl in Vorlesungen als auch in Kursen verwendet werden. In den Ordnern lecture und course befinden sich die konkreten slidev-Projekte für die Vorlesung und den Kurs, die dann wiederum die Grafiken und Abschnitte aus dem Ordner common einbinden können.
Symlinks für Grafiken
In den regulären slidev-Projekten kann ich die Grafiken aus dem Ordner common/public über Symlinks einfügen und somit die Ordner-Struktur von slidev-Projekten problemlos einhalten.
cd teaching-react-native-and-expo/
cd lecture/public/
ln -s ./../../common/public/some-image.png some-image.png
cd ../..
cd course/public/
ln -s ./../../common/public/some-image.png some-image.png
Die erzeugten Symlinks in den Ordnern lecture/public und course/public zeigen auf das Originalbild im Ordner common/public. Die Grafik in Form des Symlinks kann ganz normal in slidev verwendet werden. Beispielsweise als Bild in einer konkreten Seite:
<div class="flex flex-col justify-center items-center m-4">
<img src="/some-image.png" class="h-65"/>
</div>
Externe Abschnitte
Abschnitte von Präsentationsinhalten aus dem Ordner common/sections können im konkreten slidev-Projekt ganz normal in Verbindung mit src verwendet werden:
---
<!-- Abschnitt innerhalb des Projektes -->
src: ./sections/lecture-specific-topic-b.md
---
---
<!-- Abschnitt außerhalb des Projektes -->
src: ./../common/sections/common-topic-a.md
---
Fazit
Die Erstellung meiner Präsentationen für Vorlesungen und Kurse ist durch den Einsatz von slidev eine große Freude für mich. Insbesondere die Darstellung von Code ist super und meiner Meinung nach viel besser gelöst, als bspw. in PowerPoint. Die Pflege und Wiederverwendung von Präsentationsinhalten kann u.a. mit Hilfe von Symlinks auf eine einfache Art und Weise erreicht werden.