Präsentationen in YAML mit Dinghy: Reveal.js und Zoom-Funktionen nutzen

Präsentationen gehören zum Arbeitsalltag vieler Tech-Teams – doch wie oft verschwinden sie nach einem Vortrag im digitalen Nirgendwo? Dinghy ändert das mit dem Slide Builder, einer Lösung, die Folien wie Quellcode behandelt: nachvollziehbar, wiederverwendbar und in einem einzigen, selbständigen HTML-Dokument gebündelt.

In diesem Leitfaden erfahren Sie, wie der Slide Builder von Dinghy funktioniert, welche Vorteile die Arbeit mit YAML und Reveal.js bietet und wie die einzigartige Zoom-Funktion Präsentationen auf das nächste Level hebt.

Von der Keynote zum Code: Präsentationen strukturiert gestalten

Foliensätze werden meist als einmalige Artefakte erstellt – oft ohne Versionskontrolle oder Review-Prozess. Der Slide Builder von Dinghy setzt hier einen Gegenentwurf um: Präsentationen werden als Sammlung von Quelldateien in einem Repository verwaltet, ähnlich wie Code. Die Kernidee basiert auf drei Säulen:

• Reveal.js als Fundament: Die Open-Source-Bibliothek übernimmt das Rendering und die Navigation der Folien.
• YAML als Struktursprache: Schlüsselpaare definieren Aufbau und Inhalte der Folien, während unbekannte Schlüssel direkt in HTML-Elemente umgewandelt werden.
• Markdown- und HTML-Integration: Beide Formate werden automatisch erkannt und in die Präsentation eingebunden.

Der Vorteil liegt auf der Hand: Änderungen an wiederkehrenden Elementen – etwa Firmenlogos oder Titelfolien – müssen nur einmal vorgenommen werden und wirken sich auf alle Präsentationen aus, die diese Elemente enthalten.

YAML, Markdown und HTML: Flexible Inhalte ohne Grenzen

Der Slide Builder unterstützt drei verschiedene Ansätze zur Erstellung von Folien – je nach Bedarf und Vorlieben.

1. Strukturierte Folien mit YAML

YAML eignet sich besonders für komplexere Folien mit hierarchischer Struktur. Beispiel:

sections:
  - badge: Show Case
    title: Slide Builder
    subtitle: author
    ul:
      - YAML DSL mappt Schlüssel auf HTML-Elemente
      - Selbstständige HTML-Ausgabe
      - Live-Reload während der Entwicklung

Spezielle Schlüssel wie badge, title oder subtitle werden automatisch in die entsprechenden HTML-Tags umgewandelt. Alle anderen Schlüssel – etwa p, h3 oder ul – entsprechen direkt dem gleichnamigen HTML-Element. Mehrere YAML-Dateien in einem Ordner werden nacheinander verarbeitet und ergeben eine zusammenhängende Präsentation.

2. Schnelle Erstellung mit Markdown

Für einfache Folien oder schnelle Änderungen eignet sich Markdown. Eine Folie lässt sich mit wenigen Zeilen beschreiben:

## Slide Builder

- YAML DSL mappt Schlüssel auf HTML-Elemente
- Selbstständige HTML-Ausgabe
- Live-Reload während der Entwicklung

Markdown-Dateien werden automatisch erkannt und in die Präsentation integriert. Die Kombination aus YAML, Markdown und HTML ermöglicht es, für jeden Abschnitt das passende Format zu wählen – ohne Kompromisse.

3. Volle Kontrolle mit HTML

Für Entwickler, die maximale Flexibilität benötigen, steht die direkte Integration von HTML zur Verfügung. Ob benutzerdefinierte CSS-Klassen oder spezielle JavaScript-Funktionen – alles ist möglich und wird ohne weitere Anpassungen übernommen.

Ein HTML, überall einsatzbereit: Die Vorteile der Ausgabe

Nach der Erstellung wird die Präsentation in einem einzigen HTML-Dokument gebündelt. Alle Abhängigkeiten – von Schriftarten über Bilder bis hin zu CSS-Dateien – werden inline eingebettet. Das Ergebnis:

• Keine externen Abhängigkeiten: Die Präsentation funktioniert offline und ohne Internetverbindung.
• Einfache Weitergabe: Per E-Mail, Chat oder Dateiübertragung – überall einsatzbereit.
• Plattformunabhängig: Ob Browser auf Desktop, Tablet oder Smartphone, die Darstellung bleibt konsistent.

Diese Eigenschaft ist besonders wertvoll für Vorträge an Orten mit instabiler Internetverbindung. Statt auf eine Cloud-Präsentation angewiesen zu sein, präsentieren Sie mit einem einzigen, zuverlässigen Dokument.

Prezi-ähnliche Zoom-Effekte: Dynamische Folien gestalten

Eine der innovativsten Funktionen des Slide Builders ist die Zoom-und-Pan-Funktion, die an die dynamische Navigation von Prezi erinnert. Statt zwischen einzelnen Folien zu wechseln, zoomt die Präsentation in vorher definierte Regionen eines Bildes hinein – ideal für Architekturdiagramme oder komplexe Visualisierungen.

Ein Beispiel zeigt, wie das funktioniert:

id: dinghy-proxy-project
img: imgs/dinghy-proxy-project.png
width: 1562
height: 1398
sections:
  - id: dinghy-proxy-title
    x1: 71
    y1: 842
    x2: 954
    y2: 1132
  - id: dinghy-proxy-ruby
    title: ❤️
    x1: 1052
    y1: 119
    x2: 1550
    y2: 293

Der Nutzer bewegt sich nicht von Folie zu Folie, sondern zoomt in Echtzeit in die gewünschten Bereiche hinein. Diese Technik nutzt intern die data-auto-animate-Funktion von Reveal.js, vereinfacht jedoch die Definition der Zoom-Bereiche durch eine koordinatenbasierte Syntax. Ohne Dinghy müsste der Nutzer die notwendigen CSS-Transformationen manuell berechnen.

Warum sich die Arbeit mit YAML und Reveal.js lohnt

Die Entscheidung, Präsentationen als Quellcode zu verwalten, bringt langfristige Vorteile mit sich:

• Versionskontrolle: Jede Änderung wird dokumentiert und kann nachvollzogen werden.
• Wiederverwendung: Gemeinsame Elemente wie Logos oder Titelfolien lassen sich zentral pflegen.
• Kollaboration: Mehrere Autoren können gleichzeitig an einer Präsentation arbeiten.
• Langfristige Verfügbarkeit: Keine Abhängigkeit von proprietären Formaten oder Cloud-Diensten.

Für Tech-Teams, die regelmäßig Präsentationen erstellen, rechnet sich der Aufwand bereits nach wenigen Folien. Die initiale Einarbeitung in YAML und die Einrichtung des Slide Builders wird durch die Zeitersparnis und Flexibilität mehr als ausgeglichen.

Fazit: Präsentationen neu denken mit Dinghy

Der Slide Builder von Dinghy zeigt, wie Präsentationen durch strukturierte Erstellung, moderne Tools und innovative Funktionen aufgewertet werden können. Durch die Integration von YAML, Markdown und HTML entsteht ein System, das sowohl Entwicklern als auch Designern gerecht wird. Die einzigartigen Zoom-Effekte erweitern die Möglichkeiten von Reveal.js und ermöglichen dynamische, interaktive Präsentationen.

Wer Präsentationen bisher als lästige Pflichtübung betrachtet hat, sollte diesen Ansatz ausprobieren. Die Investition in eine strukturierte Arbeitsweise zahlt sich spätestens dann aus, wenn die nächste Folie nicht mehr neu gezeichnet, sondern einfach angepasst werden muss.