This page is also available in English.
Ein Generator für Briefing-Foliensätze.
Er macht aus einer Markdown-Datei einen Foliensatz im Format 16:9, dessen Folien so viel Text tragen, dass auch wer nicht dabei war ihn für sich allein lesen kann, ohne dass jemand ihn vorträgt. Heraus kommt eine einzige HTML-Datei, in der alles steckt, was die Folien brauchen. Diese Datei öffnet sich in jedem Browser, ohne Internetverbindung und ohne Installation.
Für einen Vortrag, der wirklich gehalten wird, ist psi-slides das passende Werkzeug: eine Markdown-Quelle, und heraus kommen eine Projektion für den Saal, eine Referentenansicht, ein Lesedokument und ein Handout. Was die beiden Werkzeuge trennt, ist die Frage, ob jemand spricht.
Ein Bericht und ein Foliensatz können dasselbe Argument tragen, und welche Form besser ankommt, ist eine Frage der Vorliebe und keine Rangfolge. Manche lesen einen durchlaufenden Text und nehmen ihn so auf. Andere wollen denselben Inhalt in Folien, die sich überfliegen, durchklicken und noch einmal aufsuchen lassen. Es zählt nur, dass die Lesenden die Fassung bekommen, die sie tatsächlich lesen.
psi-briefing gibt es, damit ein Foliensatz ungefähr so viel Zeit kostet wie der Bericht, den man sonst geschrieben hätte. Der Bericht ist der billigere von beiden, weil dafür nur die Sache selbst gesagt werden muss. Folien verlangen dasselbe und obendrein eine zweite Arbeit: die Entscheidung, wie ein Gedanke auf mehrere Folien verteilt und innerhalb einer Folie angeordnet wird.
In dieser zweiten Arbeit steckt die Zeit, und sie geht dabei meist auf eine von zwei Weisen verloren. Entweder verschiebt man Kästen pixelweise, was einen Nachmittag pro Folie verschlingen kann, oder man hört früh auf und behält Folien, die hingeworfen wirken und die Aufmerksamkeit von dem abziehen, was auf ihnen steht. psi-briefing nimmt diese Arbeit ab: Geschrieben wird weiter, die Anordnung ergibt sich aus dem Geschriebenen.
Der erste Foliensatz dieser Art war ein Bericht des Lehrstuhls für Privatsphäre und Sicherheit in Informationssystemen über ein Portal zum Studienstart, das der Lehrstuhl selbst gebaut hatte, geschrieben zum Lesen und nicht zum Vortragen. Er steht als Werkstattbericht Studienstart online. psi-briefing ist die Layout-Maschinerie, die daraus herausgelöst wurde.
psi-briefing ist schnell, weil der Konverter das meiste selbst entscheidet: Der Aufbau des Markdown-Texts wählt die Komponente für jede Folie. Eine Komponente ist eine fertige Folienanordnung, etwa ein Raster aus Karten oder eine Aufteilung in zwei Spalten. Breiten werden nicht gesetzt, Kästen nicht platziert, Vorlagen nicht ausgefüllt, und die Voreinstellungen sind so gewählt, dass gewöhnliche Fälle ohne jede Angabe gut herauskommen.
Aufgegeben wird dafür die Feinkontrolle. Wenn ein Feld genau zwei Zentimeter schmaler sein muss als das daneben, ist psi-briefing das falsche Werkzeug und Keynote das richtige. Die meisten Foliensätze brauchen diese Kontrolle nie, und die, die sie brauchen, sind von Hand schneller gebaut als beschrieben.
Was der Konverter schreibt, ist gewöhnliches HTML, in dem jeder Teil einer Folie benannt ist, deshalb genügt für eine Änderung an einer einzelnen Folie das Bearbeiten einer Textstelle. Damit lässt sich der Foliensatz auch direkt an eine KI-Assistenz übergeben, ohne vorher etwas zu exportieren oder umzuwandeln.
Zwei Dokumente im Repository sind für Maschinen geschrieben und nicht für Menschen. Der Komponentenkatalog ist mit Absicht lang und wiederholt sich, weil ein Sprachmodell, das zwischen Komponenten wählt, jede einzelne ausbuchstabiert braucht; der Skill für Claude Code packt den Katalog und die Prüfungen zusammen, sodass eine KI-Assistenz aus vorhandenen Notizen einen Foliensatz bauen und die eigene Arbeit anschließend an denselben Regeln prüfen kann, die auch ein Mensch anlegen würde.
Nötig ist beides nicht. Wer eine KI-Assistenz auf den Beispiel-Foliensatz und die Tutorial-Quelle ansetzt, kann in aller Regel damit rechnen, dass die Assistenz das Format allein aus diesen beiden erschließt: Die Eingabe ist Markdown, die Ausgabe ist lesbares HTML, und die Klassennamen sagen, was sie sind. Die beiden Foliensätze sind die Spezifikation. Katalog und Skill ersparen der Assistenz nur das Raten.
Der Konverter liest, wie der Markdown-Text aufgebaut ist, und wählt daraus das Layout der Folie. Vier Überschriften derselben Ebene werden zu einem umrandeten Raster, weil sie vier gleich gewichtige Punkte sind. Ein Zitat wird zum hervorgehobenen Band am unteren Rand der Folie, weil dort das Fazit einer Folie steht.
## Four roles on an exam
### Candidates
They sit the exam.
### Examiner
Owns the paper.
### Invigilators
Set up and watch.
### Technical lead
Knows the system.
> Who leads is settled **before**
> the exam day.
Zwei Folien aus dem Beispiel-Foliensatz, so wie sie herauskommen.
Je eine HTML-Datei, und keine Vorschau: Beide Dateien lassen sich speichern und öffnen sich auch dann, wenn das Netzwerk abgezogen ist. Das Beispiel ist der Rückblick auf ein Projekt. Das Tutorial erklärt das Format, indem es selbst in diesem Format geschrieben ist, mit dem Markdown neben dem Ergebnis auf jeder Folie.
Das ZIP-Archiv des neuesten Release herunterladen und entpacken, dann den Konverter auf den eigenen Markdown-Text loslassen. Installiert sein muss nur Node, das Programm, das den Konverter ausführt, in Version 18 oder neuer. Git wird nicht gebraucht.
cd psi-briefing-1.1.0
node tools/md-to-deck.mjs my-deck.md -o my-deck.html
node tools/build-deck.mjs my-deck.html -o send-me.html
Die folgenden Schritte führen von einem Windows- oder macOS-Rechner, auf dem nichts vorbereitet ist, zu einer fertigen Kopie des Beispiel-Foliensatzes Project Aurora.
nodejs.org öffnen. Die Schaltfläche
dort bietet die LTS-Fassung an, also die mit langfristigem Support, in
der Datei, die zum jeweiligen Rechner passt; dieser Download ist der
richtige. Unter macOS kommt eine .pkg-Datei: doppelklicken,
durch den Installer klicken, das Passwort eingeben, wenn danach gefragt
wird. Unter Windows kommt eine .msi-Datei: doppelklicken,
die Voreinstellungen übernehmen und das Häkchen für Werkzeuge zum Bauen
nativer Module unangetastet lassen. Nichts in psi-briefing braucht
diese Werkzeuge.
Wer ohnehin einen Paketmanager benutzt, kommt mit brew install
node unter macOS und winget install
OpenJS.NodeJS.LTS unter Windows zum selben Ergebnis.
Unter macOS Command-Leertaste drücken, terminal tippen,
Return drücken. Unter Windows das Startmenü öffnen und
terminal tippen: Windows Terminal nehmen, falls es
erscheint, sonst PowerShell. Es öffnet sich ein Fenster mit einem
Cursor darin. Man tippt eine Zeile, drückt Return, und das Fenster
antwortet.
node --version
Die Antwort ist eine Versionsnummer. Alles ab v18 funktioniert, und
ein frisch geladenes LTS-Paket liegt deutlich darüber. Kommt stattdessen
command not found oder is not recognized,
hilft es, das Fenster zu schließen und ein neues zu öffnen: Ein
Terminal, das während der Node-Installation schon lief, kennt Node noch
nicht.
Das ZIP-Archiv des
neuesten
Release herunterladen und entpacken wie jeden anderen
Download. Auf beiden Systemen genügt dafür ein Doppelklick. Heraus kommt
ein Ordner mit der Version im Namen, etwa
psi-briefing-1.1.0, und dieser Ordner ist das ganze
Werkzeug. Sonst muss nichts installiert werden, und ein Konto wird
nicht gebraucht.
Den Ordner an eine Stelle legen, die sich wiederfinden lässt, denn das Terminal muss gleich darauf gerichtet werden. Der Benutzerordner oder der Schreibtisch eignet sich gut. Unter Windows das Archiv wirklich entpacken und nicht nur per Doppelklick öffnen: Windows zeigt den Inhalt eines ZIP-Archivs an, als wäre er ein Ordner, aber darin lassen sich keine Befehle ausführen.
Git wird für nichts davon gebraucht. Wer es ohnehin
benutzt, bekommt mit
git clone https://github.com/UBA-PSI/psi-briefing.git
dieselben Dateien unter dem Namen psi-briefing, und alle
folgenden Schritte bleiben bis auf diesen Namen gleich.
cd psi-briefing-1.1.0
node tools/md-to-deck.mjs examples/example-deck.md -o examples/aurora.html
Die erste Zeile richtet das Terminal auf den entpackten Ordner und
muss deshalb benennen, wo dieser Ordner tatsächlich liegt: unter
Windows etwa
cd C:\Users\name\Downloads\psi-briefing-1.1.0. Statt den
Pfad zu tippen, lässt sich der Ordner aus dem Dateimanager in das
Terminalfenster ziehen, nachdem cd und ein Leerzeichen
getippt sind; dann schreibt sich der Pfad von selbst. Die zweite Zeile
ist unter Windows und macOS dieselbe, Schrägstriche eingeschlossen:
Node nimmt sie überall. Der Konverter meldet, was er gebaut hat, und
danach eine Tabelle mit den Folien und dem Hinweis, wie voll jede
geworden ist.
md-to-deck: 13 slides -> examples/aurora.html
Der Beispiel-Foliensatz gehört nach examples/, weil sein
Markdown-Text das Stylesheet dort erwartet: Der Kopf von
example-deck.md nennt die Pfade, und sie sind von diesem
Ordner aus geschrieben. Ein eigener Foliensatz liegt am
einfachsten oben im entpackten Ordner, neben den Ordnern
framework und themes, denn dort sucht ein
Foliensatz die beiden, solange sein Markdown-Text nichts anderes
sagt.
Der eben gebaute Foliensatz braucht die beiden Ordner noch neben sich. Ein weiterer Schritt faltet sie hinein:
node tools/build-deck.mjs examples/aurora.html -o aurora.html
Diese Zeile ist unter Windows, macOS und Linux
dieselbe. Sie faltet das Stylesheet, das Skript und alle Bilder
in die HTML-Datei, prüft danach, ob darin noch etwas nach außen zeigt,
und meldet das Ergebnis. In der README steht außerdem
tools/build-deck.sh: dasselbe unter seinem älteren Namen,
und dafür braucht es eine Shell, die Windows nicht mitbringt. Die Zeile
mit build-deck.mjs braucht nichts außer Node.
aurora.html doppelklicken. Die Datei öffnet sich im
Browser, und mehr braucht sie nicht: Netzwerk abziehen, die Datei an
jemanden schicken, der keines dieser Werkzeuge installiert hat, sie
funktioniert trotzdem.
Der Foliensatz in examples/, der die Ordner noch neben
sich braucht, wird am besten über einen lokalen Webserver angesehen:
Browser gehen unterschiedlich damit um, was eine Seite laden darf, die
direkt aus einem Ordner statt über das Netz geöffnet wurde. Dafür
python3 -m http.server 8000 im Projektordner ausführen und
http://localhost:8000/examples/aurora.html öffnen. Unter
Windows heißt der Befehl meist py -m http.server 8000;
fehlt Python ganz, stattdessen die einzelne Datei bauen und diese
öffnen.
Unter Linux sind alle diese Werkzeuge schon vorhanden.
Distributionspakete hinken manchmal mehrere Versionen hinterher,
deshalb lohnt sich node --version auch dort.
Außer Node selbst ist nichts zu installieren: kein Schritt über einen Paketmanager und keine Bibliotheken, die nachgeladen werden. Am anderen Ende gilt dasselbe, und zwar mit Absicht: Weitergegeben wird genau der Foliensatz, der gebaut wurde, und ihm ist nicht anzusehen, mit welchem Werkzeug er entstanden ist.
Was der Konverter schreibt, ist ein verknüpfter Foliensatz: Er braucht das Stylesheet, das Skript und die Bilddateien, die um ihn herum liegen, und reist deshalb nur als ganzer Ordner. Ein weiterer Schritt faltet all das in den Foliensatz selbst. Das ergibt die in sich geschlossene Fassung, also die eine Datei mit allem darin, und am Ende dieses Schritts steht die Prüfung, ob in der Datei noch etwas nach außen zeigt. Für den Beispiel-Foliensatz gibt der Schritt das hier aus:
$ node tools/build-deck.mjs examples/example-deck.html -o /tmp/deck.html
3/3 verify checking for anything still external
built /tmp/deck.html
0.02 MB linked -> 0.13 MB self-contained
no external references: opens with no server and no network
One check this cannot do without a browser: open the file and confirm
performance.getEntriesByType('resource').filter(e => !e.name.startsWith('data:'))
is empty, and that no image is broken.
Diese letzte Prüfung fällt auch auf dieser Seite leer aus. Jeder Screenshot hier und das Symbol im Browser-Tab stehen in der HTML-Datei selbst und werden nicht von irgendwoher geladen. Für diese Seite hat der Browser also nichts geholt außer der Seite selbst.
Eine Markdown-Datei und ein Befehl. Heraus kommt eine gewöhnliche Webseite, einfach genug zum Bearbeiten von Hand, sodass sich eine einzelne Folie hinterher anpassen lässt.
node tools/md-to-deck.mjs deck.md -o deck.html
python3 -m http.server 8000 # dann ansehen
node tools/build-deck.mjs deck.html # eine Datei zum Verschicken
Der Foliensatz, und ein Bericht darüber, welche Regel auf
welcher Folie gegriffen hat. Jede Zeile des Berichts unten steht für eine
Folie des Beispiel-Foliensatzes: ihre Nummer, wie voll sie geworden ist,
das gewählte Layout und ihre Überschrift. Der Prozentwert sagt ungefähr,
wie viel von der Folie der Inhalt bedeckt, und
die
Markdown-Referenz beschreibt, was jede Regel braucht und wie dieser
Wert gemessen wird. Die Zeilen mit directive: sind Folien, auf
denen der Markdown-Text das Layout ausdrücklich benannt hat, statt es
ermitteln zu lassen.
$ node tools/md-to-deck.mjs examples/example-deck.md -o /tmp/x.html
md-to-deck: 13 slides -> /tmp/x.html
1 – title Project Aurora: shipping a portal in ele
2 89 % single panel What this file is
3 – divider How the timeline went
4 100 % facts grid (bold numbers) The numbers
5~ 84 % gap 11 % timeline from 2-column table Plan against reality
6 100 % directive:chart Commits per week
7 – divider How it was built
8 100 % 4 cards -> .net grid Four areas of work
9 97 % directive:delta What changed for the user
10 93 % flow steps (ordered, bold leads) The weekly rhythm
11 – divider What we learned
12~ 61 % gap 34 % directive:principles Two ways of working
13~ 83 % gap 15 % directive:editorial Three lessons
estimated median row fill: 93 % (target 85 %)
Danach, was der Konverter selbst behoben hat und was er nicht beheben kann:
78 % 2 cards -> two columns How a commit is counted
fix short row (78 %) -> cols--center; balances the gap, does not fill it
typography: 6 marks normalised
layout: 1 correction(s) applied
thin rows - these need content, which no tool can invent.
Der Konverter ordnet Inhalte um und teilt Folien auf. Einen Kasten dehnt er nicht, nur um eine Lücke zu schließen: Das hat einen Foliensatz von 74 % auf 96 % Füllgrad gebracht und ihn schlechter gemacht (§1 des Erfahrungsberichts).
Derselbe Foliensatz behält seine Proportionen auf einem Laptop-Bildschirm und auf dem Beamer im Hörsaal, und jede Farbe darin lässt sich durch das Bearbeiten einer einzigen kleinen Datei ändern. Dies ist der technische Abschnitt; er erklärt, wie beides funktioniert.
Das Layout skaliert mit der Folie, statt fest an ihr zu hängen. Jede
Folie ist ein 16:9-Kasten mit container-type: size, und
alles darin wird in cqw und cqh gemessen –
nie in px, nie in rem.
Jeder Abstand und jede Schriftgröße behält so ihr Verhältnis, deshalb muss nichts nachjustiert werden, wenn der Foliensatz auf ein anderes Anzeigegerät wechselt.
Jede Farbe und jede Schrift ist eine CSS-Eigenschaft mit eigenem
Namen, und der Name nennt eine Bedeutung statt eines Werts:
--accent, --ink,
--highlight.
Ein Theme ist ein :root{}-Block, der diese Werte
überschreibt, und sonst nichts. Die Diagramme, die der Browser
zeichnet, lesen beim Zeichnen dieselben Namen, deshalb wechselt ein
Diagramm die Farben zusammen mit dem Foliensatz, in dem es steht.
Zum Umfärben eines Foliensatzes genügt eine Datei. Vier ihrer Zeilen, aus
themes/bamberg.css:
--accent: #00457D;
--highlight: #FFD300;
--paper: #ffffff;
--ink: #1a1a1a;
Das dunkle Theme, das psi-briefing mitbringt,
themes/midnight.css, setzt dieselben vier Namen auf
#7aa2f7, #e0af68, #16181f und
#e6e8ef und umfasst 50 Zeilen. Eine der beiden Theme-Dateien
kopieren, die Werte ändern und die Kopie nach briefing.css
laden.
psi-briefing passt zu Inhalten, die schon die Form eines Dokuments haben: ein Rückblick, eine Projektdokumentation, eine Zusammenfassung von Forschungsergebnissen, ein Vorlesungsskript, ein Bericht mit Zahlen darin. So etwas kommt mit Abschnitten und Vergleichen an, deren Reihenfolge jemand bereits gewählt hat.
psi-briefing passt schlecht zu einem Vortrag mit sparsamen Folien, also zu der Sorte, die vom Timing lebt und davon, eine Frage aufzubauen, bevor sie beantwortet wird. Eine Konferenz-Keynote wurde einmal so gebaut und sperrte sich gegen beide Behandlungen: dicht gesetzt stritten die Folien mit dem Vortrag, sparsam gesetzt waren sie leere Folien mit einem Satz darauf. Das Argument lag in dem, was der Vortragende sagte, und Folien, die für sich allein gelesen werden sollen, konnten es nicht tragen.
Es gibt außerdem kein Animationsmodell über aufklappbare Felder hinaus und keine Referentenansicht. Für beides ist psi-slides da.
Dass ein Werkzeug das Layout aus einer Markdown-Datei wählt, ist keine Erfindung von psi-briefing. Die Tabelle unten ist die Kurzfassung; der vollständige Vergleich nennt zu jeder Alternative den Fall, in dem sie die bessere Wahl ist.
| Werkzeug | Layout | Das Ergebnis | Referentenansicht |
|---|---|---|---|
| psi-briefing | aus der Form des Inhalts abgeleitet | eine Datei mit allem darin | nein |
| iA Presenter | analysiert und ausgewählt | HTML-Paket, PDF, PPTX | ja |
| reveal.js | selbst angeben | ein Ordner oder ein Server | ja |
| Marp | CSS-Themes | HTML, Medien nicht eingebettet | über Zusatzwerkzeuge |
| LaTeX Beamer | Frames und Vorlagen | mit einer zweiten Datei | |
| PowerPoint / Keynote | selbst platzieren | .pptx / .key | ja |
iA Presenter macht etwas Ähnliches: Das Programm analysiert den Inhalt einer Folie und wählt ein Layout. Der Unterschied liegt in der Voreinstellung. In iA Presenter ist das Dokument ein Skript – ein gewöhnlicher Absatz ist das, was gesagt wird, und ein eingerückter Absatz rückt auf die Folie auf; was das Publikum sieht, ist also die Ausnahme. In psi-briefing spricht niemand, und es gibt nichts zurückzustufen: Alles steht auf einer Folie, und der Konverter fragt, wie der Inhalt aufgebaut ist, statt zu fragen, welcher Teil davon gezeigt wird.
Damit ist iA Presenter näher mit psi-slides verwandt als mit psi-briefing. Für alle, die tatsächlich vor Publikum sprechen, ist iA Presenter ein ausgereiftes und gut gestaltetes Produkt, und psi-briefing ist dafür kein ernsthafter Konkurrent.