psi-slides · Präsentationssoftware für Lehrende · This page in English
Die Vorlesung einmal schreiben.
Aus einer Markdown-Datei entstehen die Folien für den Saal, ein Cockpit für den eigenen Bildschirm und zwei Handouts für die Studierenden. Alle vier kommen aus dieser einen Datei und können nicht auseinanderlaufen.
Ohne Terminal: die App herunterladen, Neue Vorlesung… wählen, und eine erste Vorlesung zum Umschreiben ist da. Oder erst ansehen: das Tutorial (englisch), eine Vorlesung über das Schreiben von Vorlesungen.
Eine Folie einer echten Vorlesung, zweimal. Einmal so, wie der Raum die Folie sieht, und einmal mit demselben Text vollständig. Dazwischen liegt ein Tastendruck.
Mit dem Schalter in der Titelzeile des zweiten Bildes holt man anstelle des vollen Textes das gedruckte Handout hervor – eine andere Datei aus derselben Quelle. Ein Klick auf ein Bild öffnet es in voller Größe.
Die Kurzfassung in einer Minute
Das Argument dieser Seite als Film: woraus eine Vorlesung besteht, was aus einer Datei entsteht und wie die Stunde im Hörsaal aussieht. Mit Untertiteln. There is an English version, too.
Das Video lädt erst beim Druck auf Abspielen, von einem Server des Lehrstuhls an der Universität Bamberg. Sonst kommt auf den Seiten dieser Website nichts von einem anderen Server.
Eine Vorlesung besteht aus drei Sorten Text
Was auf die Folie kommt, muss aus der letzten Reihe lesbar sein. Das Skript – die Sätze, die wirklich erklären – gehört in ein Handout. Und die Notizen für einen selbst gehören auf den eigenen Bildschirm und sonst nirgendwohin. Folienprogramme bieten für diese drei Texte zwei Orte: die Folie und das Notizfeld darunter. Unten stehen zwei verbreitete Arten, sie unterzubringen, und die, die psi-slides wählt.
nicht ideal: alles auf die Folien
Das Skript kommt auf die Folien, also werden die Folien voll. Spätestens beim dritten Aufzählungspunkt hat die letzte Reihe aufgehört mitzulesen, und zum Verteilen gibt es hinterher trotzdem nichts.
Das ist Death by PowerPoint, und es passiert, wenn eine Vorlesung einen Platz für drei Texte hat.
auch nicht ideal: Folien und ein Skript
Knappe Folien, und das Argument in einem zweiten Dokument daneben. Das trägt, bis man eines von beiden ändert, und das ist meistens noch am selben Nachmittag.
Von da an beschreibt das Handout eine Vorlesung, die man so nicht mehr hält, und die eigenen Notizen haben immer noch keinen Ort.
unser Ansatz
Jeden Absatz einmal schreiben und den einen Satz markieren, der ihn trägt. Die Projektion, also die Folien an der Wand, nimmt diesen Satz. Das Handout nimmt den ganzen Absatz. Die Zeilen hinter > note: bleiben auf dem eigenen Bildschirm.
Die drei Texte stehen in einer Datei und können deshalb nicht auseinanderlaufen.
Dieses Listing ist die ganze Quelle der Folie
Einunddreißig Zeilen Markdown, kein Editor und keine Vorlage. Ein Chunk ist eine Überschrift mit dem Text darunter, und ein Chunk wird zu einer Folie. Die Vorlesung dahinter ist echt: eine Python-Einführung aus 39 Chunks, auf Englisch.
Auf das Fette achten. Das sind die Stellen, die die
Projektion behält; die Prosa darum ist das, was das Handout behält. Das
> note: am Fuß bleibt auf dem eigenen Bildschirm.
Die zwei Absätze, die mit „…“ enden, sind
nur auf dieser Webseite gekürzt, damit das Listing hineinpasst.
::: cards 2 setzt die zwei Punkte darunter als zwei Karten
nebeneinander, auf der Projektion wie im Handout. Auf der Projektion steht
von jeder Karte die fette Kopfzeile; die eingerückten Zeilen darunter
stehen im Handout und kommen mit C auf die Projektion.
Eine solche Quelle kann ein Sprachmodell
entwerfen. psi-slides bringt Skills
im offenen Agent-Skills-Format mit, die einem Assistenten wie Claude Code,
Codex oder Gemini CLI das Format beschreiben. Damit schreibt er aus den
eigenen Notizen eine source.md oder überarbeitet eine
vorhandene.
Gebaut und geprüft wird das Ergebnis wie eine selbst geschriebene.
## free: Why Playwright | the modern web is rendered, not served {.wide #why-playwright}
**A lot of the web is rendered by JavaScript in the browser.**
::: cards 2
- **`requests` and plain `urllib` see only the HTML shell**
- often just `<div id="app"></div>` plus a pile of script tags
- the text, the links and the title are not in it
- **Playwright drives a real browser**
- Chromium, Firefox, or WebKit, over a debugging protocol
- the page renders, scripts execute, the DOM settles, and then you query it
- you see what a human sees
:::
**For a link scanner this matters a lot.** Navigation on many real sites is …
**The cost is weight.** A browser is a hundred megabytes of …
::: footnote
`requests` is still the right tool for an API that answers in JSON. The
browser is for pages meant to be looked at.
:::
> note: Show the difference live if the room is awake: open a JS-heavy site,
> curl it, and let them find the missing text themselves. Ninety seconds, and
> nobody asks again why a scanner needs a browser.Vorlesungen selbst öffnen
Das hier ist das Werkzeug, kein Video davon. Man blättert mit den Pfeiltasten, schaltet mit C zwischen gekürztem und vollem Text um, sieht mit O die ganze Vorlesung auf einmal, sucht mit / und lässt sich mit ? die Tasten auflisten.
Hier anfangen: das Tutorial (englisch)
61 Folien · die Grundlagen
Eine Vorlesung über das Schreiben von Vorlesungen: wie das Format funktioniert, gezeigt an einer Vorlesung, die damit gebaut ist. Sie endet mit der Übergabe an die Vorlesungen zu Abbildungen und Gestaltung weiter unten. Ihre Quelle ist die Vorlage für die eigene Vorlesung. Ein deutsches Muster ist das Kurzbeispiel unten.
Eine echte Vorlesung: python-intro
39 Folien · etwa 25 Minuten
Die Vorlesung, aus der die Folie oben auf dieser Seite stammt: eine Einführung in Python für Leute, die schon einmal Code geschrieben haben. Die Projektion öffnen und C drücken zeigt dieselbe Folie erst gekürzt und dann vollständig. Auf Englisch.
Die drei übrigen Vorlesungen
Das Tutorial und python-intro stehen oben; das hier ist der Rest. Von Decoration sind zwei der vier Ansichten veröffentlicht.
Kurzbeispiel 6 Folien · Deutsch
Ein Ausschnitt aus einer Netzwerk-Vorlesung im ersten Semester. Gut 80 Zeilen Markdown, kurz genug, um sie ganz zu lesen und daneben zu sehen, was daraus wird.
Figures 47 Folien
Jede Konstruktion, die die Abbildungssprache kennt, gezeichnet statt beschrieben, beginnend mit der Sprache in fünf Zeilen und mit Abbildungen aus einer echten Vorlesung.
Decoration 54 Folien
Was etwas anderes als eine Textspalte auf eine Folie bringt: Titelfolien samt Namenszeilen, Trenner, Karten, Hintergrundbilder, ein Foto, das sich mit Leertaste öffnet, und Schrift und Farbe.
Jede der vier Dateien einer Vorlesung trägt ihre Gestaltung, Skripte, Bilder, gesetzten Formeln und Schriften selbst. Auf einen USB-Stick kopiert oder per Mail verschickt, öffnet sie sich aus einem Ordner auf der Festplatte genauso wie von diesem Server, und außer für ein eingebettetes Online-Video braucht sie keine Netzverbindung.
Ein Cockpit, das über einen Link oben geöffnet wird, zeigt zwar das Layout, folgt aber keiner Projektion – ein verbundenes öffnet man mit S in einer Projektion. Die vier Links auf jeder Karte öffnen die vier Dateien dieser Vorlesung, genau so, wie psi-slides sie schreibt.
Die Stunde im Hörsaal
Die Projektion geht an die Wand, das Cockpit auf den Laptop, und die beiden halten sich im Browser gegenseitig auf Stand, ohne Server dazwischen. Die eigene Notiz, was kommt, eine Uhr, ein Weg zurück zu Folie vierzig und ein Feld zum Schreiben, das der Saal mitliest.
Im Raum geht die Stunde selbst durch: was man an welcher Stelle tut, und mit welcher Taste.
Was die Studierenden mitnehmen
Dieselbe Quelle, als Dokument gesetzt: mit Silbentrennung, in einer Zeilenlänge zum Lesen, mit der Randnotiz neben dem Text.
Davon gibt es zwei, und mit dem Schalter in der Titelzeile
sieht man beide. print.html trägt nur das Skript und ist das Dokument für
die Studierenden. print-notes.html legt die Sprechernotizen unter
die Chunks und bleibt bei einem selbst. Auf Wunsch schreibt psi-slides beide
auch als A4-PDF, und die Folien als ein PDF.
Im Browser geöffnet, bringen beide Dokumente Werkzeuge zum Lesen am Bildschirm mit. Ein Inhaltsverzeichnis an der Seite zeigt, wo man gerade ist. Studierende können Wörter, Code, eine Formel oder eine Abbildung markieren, jede Markierung mit einer Notiz versehen und mit n und p der Reihe nach durchgehen. Die Markierungen bleiben im Browser der Studierenden; sie lassen sich als Markdown-Datei exportieren und an die Lehrenden schicken und werden gelb gedruckt, die Notizen am Rand.
Eine Folie ist ein Rahmen, nicht nur eine Textspalte
In einer Zeile der Quelle wählt man, woraus eine Folie besteht, und der Text der Folie bleibt so, wie er geschrieben wurde: eine Titelfolie, der Trenner am Anfang jedes Teils, eine Reihe Karten, ein Foto, auf dem die Worte stehen, eine Liste, die einen ganzen Teil lang am Rand des Rahmens stehen bleibt.
Eine Folie ist ein Rahmen zeigt alles davon: zehn Arten, eine Vorlesung zu eröffnen, sechs Trenner und den Unterschied zwischen etwas, das über der Folie liegt, und etwas, dem die Folie Platz macht.
Eine Abbildung ist auch Text
Eine Abbildung in einem eigenen Zeichenprogramm hinterlässt eine zweite Datei, die man mitpflegen muss, und genau die veraltet. psi-slides hat stattdessen eine kleine Sprache für Abbildungen: eine Abbildung sind ein paar Zeilen in derselben Datei wie die Folie, auf der sie steht.
Nur der erste Kasten dieser Abbildung hat eine eigene Position. Die anderen stehen jeweils an einem Kasten, der schon da ist, also verschiebt sich mit einem Kasten auch, was daran hängt – und die Abbildung lässt sich vor dem Raum Schritt für Schritt aufbauen.
Figures you write (englisch): die Begründung für die Abbildungssprache, dann das Handbuch: eine Abbildung Zeile für Zeile aufgebaut, und jede Anweisung. Dazu der grafische Editor, in dem man einen Kasten auf der Folie zieht und die Quelle umgeschrieben bekommt.
Zum Weiterlesen
- Loslegen Die App für macOS, Windows und Linux, die Kommandozeile und eine erste eigene Vorlesung.
- Wie psi-slides sich vergleicht (englisch) Beamer, reveal.js, Quarto, Marp, Slidev, PowerPoint und andere, in beide Richtungen, einschließlich der Stellen, an denen psi-slides verliert.
- Figures you write (englisch) Die Begründung für die Abbildungssprache, dann das Handbuch: eine Abbildung Zeile für Zeile aufgebaut, und jede Anweisung.
- Skills für einen KI-Assistenten Sechs Downloads im Agent-Skills-Format, die einem Sprachmodell das Quellformat und die Maschinerie beschreiben, mit der Installation in Claude Code und auf claude.ai als zwei Beispielen.
- Die Tutorial-Vorlesung (englisch) Das Format im Betrieb gezeigt statt beschrieben, mit ihrer Quelle daneben.
- Das Repository Die README erklärt das Format und sagt, wofür das Werkzeug taugt und wofür nicht.