A software engineer's approach to presentation slides

Vor kurzem bekam ich die Chance, zum ersten Mal eine Vorlesung als externer Dozent zu halten. Kleinere Vorträge habe ich sowohl im Studium als auch im Berufsleben schon gehalten – Vorträge über mehrere Stunden und eine Gesamtanzahl von Folien im dreistelligen Bereich waren allerdings neu für mich. Statt mit Code hätte ich mich nun wieder intensiver mit PowerPoint beschäftigen müssen…

Glücklicherweise erhielt ich einen bereits existierenden Foliensatz, auf dem ich aufbauen konnte. Diese Folien lagen jedoch nicht im PowerPoint-Format, sondern als ORG-Dateien vor (Text-basiertes Format des Texteditors Emacs).

Die Idee von textbasierten Folien, ähnlich zu Read Me-Dateien in Markdown, gefiel mir, das ORG-Format allerdings nicht. Im Folgenden möchte ich euch mein Setup zur Erstellung textbasierter Präsentationsfolien, bei dem ich schließlich gelandet bin, vorstellen.

Wieso nicht PowerPoint?

PowerPoint bietet meiner Meinung nach einen vergleichsweise starken WYSIWYG-Editor zur Erstellung von Präsentationsfolien. Dennoch bleibt es ein WYSIWYG-Tool und besitzt entsprechende Schwächen. Wer hat nicht schon mal versucht Textboxen und Grafiken in PowerPoint mithilfe der Maus pixelgenau auszurichten?

Von meinem Standpunkt aus bietet ein Text-basierter Ansatz folgende Vorteile gegenüber WYSIWYG-Editoren wie PowerPoint:

• Schnelligkeit, Gewohnheit und Effizienz

  • Aus meiner täglichen Arbeit bin ich es gewohnt mit Text und Code zu arbeiten.
  • Für die Gestaltung der Folien kann ich CSS nutzen, anstelle mich tiefergehend in PowerPoint / Tool XY einzuarbeiten.

• Wartbarkeit & Wiederverwendung

  • Gemeinsam genutzte Ressourcen, wie globale Grafiken & Styles, kann ich zentral organisieren und einfach austauschen (Ja, ich kenne auch den Folienmaster bei PowerPoint, an dieser Stelle greift allerdings wieder der vorherige Punkt…).

• Versionskontrolle

  • Textbasierte Folien lassen sich mit einem beliebigen VCS, bspw. Git, problemlos versionieren, vergleichen und mergen.
  • PowerPoint-Präsentationen können ohne weiteres nur als ganzes Artefakt versioniert werden, da es sich dabei um ein binäres Format (ZIP) handelt.

Das richtige Tool finden

Nach einer kurzen Recherche stellte sich heraus, es gibt eine ganze Reihe an Frameworks und Tools zur Erstellung Text-basierter Präsentationsfolien. Für eine Auswahl an Optionen siehe hier und hier.

Ich entschied mich schließlich für Marp. Warum Marp?

• Visual Studio Code Integration
• Export in PDF & PowerPoint
• Markdown für den Inhalt & CSS für das Styling
• Wird aktiv weiterentwickelt; 2,4k Stars auf GitHub

An die Arbeit

Im Folgenden leite ich euch durch das Setup eines Beispielprojekts. Unser Ziel ist es, zwei Folien aus der SYNDIKAT7-Unternehmenspräsentation nachzubauen:

Let's go!

Vorrausetzungen:

• Visual Studio Code
• Erweiterung: Marp for VS Code
• Zusätzliche empfehle ich für ein besseres Handling von Markdown die Erweiterung Markdown All in One

Setup

Zunächst erstellen wir einen neuen Ordner für unser Projekt:

mkdir sndk7-marp-demo && cd sndk7-marp-demo 

Anschließend erstellen wir eine Markdown-Datei für unsere Präsentation und öffnen diese in VS Code:

touch presentation.md && code presentation.md 

Jetzt können wir Markdown für unsere erste Folie schreiben:

---
marp: true
---

# SYNDIKAT 7

## HERE TO CREATE. 

Wenn wir die Vorschau öffnen, sollte unsere Folie jetzt so aussehen:

Marp kann über den ersten Abschnitt (eingebettet in ---) aktiviert und konfiguriert werden. Alle weiteren --- trennen die Folien voneinander.

Nicht schlecht für den Anfang, aber noch sind wir nicht am Ziel.

Themes

Die Folien können in Marp über CSS gestyled werden. Dabei liefert Marp bereits 3 vorgefertigte Themes. Wir wollen aber ein eigenständiges Design, dementsprechend erstellen wir ein neues Theme, dass auf dem Standard („default“) aufbaut. Dazu legen wir einen neuen Ordner für unsere statischen Assets an und erstellen darin eine Datei theme.css:

mkdir assets && cd assets && touch theme.css

Zuerst müssen wir unserem Theme einen Namen geben, in diesem Fall “sndk7”. Durch das import-Statement können wir auf dem default Theme aufbauen, was meiner Meinung nach eine gute Basis bietet.

/*!
 * @theme sndk7
*/

@import "default";

In unserem Theme nehmen wir einige Anpassungen vor:

• Wir definieren einen neuen Hintergrund für alle Folien:

    section {
       background: rgb(65, 65, 65);
       background: radial-gradient(
          farthest-corner at 25% 35%,
          rgba(65, 65, 65, 1) 0%,
          rgba(40, 40, 40, 1) 35%,
          rgba(15, 15, 15, 1) 100%
       );
    }

  Hinweis: Jede Folie wird in Marp strukturell von einem section-Tag umgeben.

• Wir importieren eine Font unserer Wahl und setzen Schrift & Farbe:

    @font-face {
       font-family: "BrownStd";
       src: url("./assets/BrownStd-Regular.otf") format("opentype");
    }
    @font-face {
       font-family: "BrownStd Light";
       src: url("./assets/BrownStd-Light.otf") format("opentype");
    }
    section {
       font-family: "BrownStd", sans-serif !important;
    }
    section * {
       color: #ffffff !important;
    }

• Wir definieren eine “lead”-Klasse für besondere Styles unserer Titelfolie:

    section.lead * {
       text-align: center;
    }
  
    section.lead h1 {
       font-size: 86px;
       letter-spacing: 15px;
       margin-bottom: 0;
       padding-bottom: 0;
    }
  
    section.lead h2 {
       font-family: "BrownStd Light", sans-serif !important;
       letter-spacing: 3px;
       font-size: 14px;
    }

Um unser neu erstelltes Theme zu verwenden, müssen wir den Namen im Markdown für die Folien referenzieren:

---
marp: true
theme: sndk7
---

<!-- _class: lead -->

# SYNDIKAT 7

## HERE TO CREATE.

Zusätzlich haben wir durch <!-- _class: lead --> unserer ersten Folie (bzw. deren section-Element) die Klasse „lead“ zugewiesen.

Allerdings müssen wir Marp zuerst noch mitteilen, wo es unser sndk7-Theme finden kann. Da wir Marp for VS Code verwenden, können wir dies über lokale VS Code Settings steuern. Wir legen einen neuen Ordner .vscode an und erstellen dort eine settings.json-Datei:

mkdir .vscode && cd .vscode && touch settings.json

mit folgendem Inhalt:

{
  "markdown.marp.themes": ["./assets/theme.css"],
  "markdown.marp.enableHtml": true
}

Durch das zusätzliche enableHtml können wir nun auch ganz normales HTML innerhalb unserer Markdown-Folien schreiben.

Anschließend sollte das Ergebnis in etwa so aussehen:

Fertigstellung

Nachdem wir die Titelfolie erstellt haben, müssen wir schließlich noch die zweite Folie mit Inhalt füllen. Dazu passen wir zunächst unser Theme weiter an. Wir ergänzen die Schriftgröße für normale Absätze und ändern die Darstellung für hervorgehobenen Text (Text der in Markdown in '**' eingebettet ist):

section p {
  font-size: 21px;
}

b,
strong {
  color: #0fc !important;
}

Anschließend wechseln wir wieder in die Markdown-Datei. Da wir jetzt auch herkömmliches HTML verwenden können, können wir die Textblöcke als div-Element strukturieren und entsprechend platzieren. Mithilfe eines <style scoped>-Tags können wir spezielles CSS, nur für diese eine Folie schreiben. Hier der vollständige Markdown-Code:

---
marp: true
theme: sndk7
---

<!-- _class: lead -->

# SYNDIKAT 7

## HERE TO CREATE.

---

<style scoped>
.bottom-right {
    position: absolute;
    right: 70px;
    bottom: 25px; 
}
.bottom-right p {
    font-size: 38px;
    font-weight: bold;
}

.sndk7-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 100%;
    background-image: url(./assets/sndk7-banner.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.content {
    margin-left: 75px;
}
</style>

<div class="sndk7-banner"></div>

<div class="content">
<div style="max-width: 400px; padding-bottom: 50px;">

# DONE IS BETTER THAN PERFECT.

</div>
<div style="max-width: 650px">

Fast progress is one of our major principles. But we treat even reliability, sustainability, maintainability, robustness, future security, and reusability at least equivalent.<br /><br />

To ensure these big goals for all customer projects you need a high competence density, methodical approach and traceable transparency in the processes lived.<br /><br />

**We ensure that.**

</div>
</div>
<div class="bottom-right">

METHODICAL

PROCEDURE

ENSURES **SUCCESS**

</div>

Export

Über das Marp-Icon können wir unser Ergebnis jetzt als PDF, PowerPoint oder HTML-Präsentation exportieren:

Unser Ergebnis

Wir haben die zwei Vorlagefolien nicht zu 100% pixelgenau nachgebaut, allerdings sind wir bereits sehr nah daran gekommen.

Ziel:

Ergebnis:

Mit etwas mehr Zeitaufwand im CSS-Bereich ließe sich sicherlich noch ein genaueres Ergebnis erzielen. Sollten mehr Folien im Layout-Stil der zweiten Folie erstellt werden, ließen sich die scoped styles auch ins theme verlagern und somit wiederverwenden.

Fazit

Sobald man einmal ein Theme via CSS eingerichtet hat, lassen sich mit Marp sehr schnell und effektiv Präsentationsfolien erstellen. Auch komplexere Layouts, die von den anderen Folien abweichen, sind via scoped styles möglich. Weichen allerdings alle Folien stark voneinander ab und enthalten sehr außergewöhnliche Designs und/oder Animationen, ist man meiner Meinung nach mit PowerPoint vermutlich schneller und besser bedient. Letztendlich gilt es, wie auch im Software-Bereich, stets die Tradeoffs zwischen den Optionen, in diesem Fall WYSIWYG vs Tools wie Marp, zu evaluieren und deren Implikationen auf das eigene Vorhaben zu bewerten.

Ich hoffe, ich konnte euch hiermit einen kleinen Einblick in eine Alternative Möglichkeit zur Erstellung von Präsentationsfolien geben. Für meine eigenen Folien werde ich in Zukunft vermutlich häufiger Marp in Erwägung ziehen.

Cheers
MK