psi-slides · Präsentationssoftware für Lehrende · This page in English

Folien, Notizen und Handouts aus einer Datei.

Eine einfache Textdatei in Markdown wird zu vier HTML-Dateien: der Projektion für den Raum, einem Presenter-Cockpit auf dem eigenen Bildschirm (die Folie, die eigene Notiz dazu und was als Nächstes kommt) und zwei Handouts – dem vollständigen Text der Vorlesung allein und demselben Text mit den eigenen Notizen darin. Alle vier entstehen aus dieser einen Datei. Sie können nicht auseinanderlaufen, weil es nichts gibt, was man synchron halten müsste, und jede bringt alles mit, was sie zum Öffnen braucht.

Loslegen Eine Vorlesung öffnen

Auf die Folie kommt, was der Raum braucht, um zu folgen; ins Handout kommt alles, was man behalten will. Diese Trennung kostet Freiheit im Layout – weniger Möglichkeiten als in PowerPoint, mit Absicht – und bringt dafür vier Ausgaben statt einer. Eine Vorlesung kann hervorgehobenen Code, LaTeX-Formeln und Video enthalten, und jeder Link bekommt einen QR-Code, den der Raum von der Wand abscannen kann. Für die Stunde im Hörsaal gibt es Übersichtstafel, Volltextsuche, Live-Annotationen, eine Uhr und sieben Farbschemata. Das alles läuft auf dem eigenen Laptop und funktioniert auch offline, ohne Cloud und ohne Dienstleister.

Die Folie wie projiziert: Überschrift, Unterzeile, der erste Satz jedes Absatzes und die fett markierten Stellen, einspaltig.

Dieselbe Folie ohne Kürzung: alle vier Absätze vollständig, in zwei Spalten.

Dieselben vier Absätze, einmal geschrieben. Zwischen den ersten beiden Bildern liegt ein Tastendruck; das dritte ist eine andere Datei aus derselben Quelle, und der Schalter zeigen: in der Titelzeile des zweiten Bildes holt sie hervor. Ein Klick auf ein Bild öffnet es in voller Größe.

Die Kurzfassung in einer Minute

Dasselbe Argument als Film: woraus eine Vorlesung besteht, was aus einer Datei entsteht und wie die Stunde im Hörsaal aussieht. Gut eine Minute, mit Untertiteln. There is an English version, too.

psi-slides in einer Minute

Die Datei liegt auf einem Server des Lehrstuhls an der Universität Bamberg, nicht im Repository, und wird erst geladen, wenn man auf Abspielen drückt.

Jede Vorlesung besteht aus drei Sorten Text

Da ist der Text, der auf die Folie kommt, knapp genug, dass man ihn aus der letzten Reihe lesen kann. Da ist das Skript – die Sätze, die die Sache wirklich erklären und die in ein Handout gehören statt an die Wand. Und da sind die Notizen für einen selbst: erst die Gruppe fragen; das hier weglassen, wenn die Zeit knapp wird; das geht nicht raus.

Die gängigen Programme, die zum Präsentieren verwendet werden, bieten Folien und ein Notizfeld. Für das Skript ist darin kein Platz vorgesehen, und ausgerechnet das ist der Teil, den Studierende am meisten wollen. Das Skript nimmt dann einen von zwei Wegen. Entweder übernehmen die Folien seine Aufgabe und werden so voll, dass sie aus der letzten Reihe niemand mehr lesen kann – Death by PowerPoint. Oder das Skript steht in einem zweiten Dokument, das ab der ersten Änderung nicht mehr zu den Folien passt.

Mit psi-slides schreibt man jeden Absatz einmal und markiert den einen Satz, der den Absatz trägt. Die Projektion bekommt nur diesen Satz, das Handout bekommt den ganzen Absatz, und die Zeilen hinter > note: bleiben auf dem eigenen Bildschirm.

alles auf die Folien

Folien, daneben ein Skript

psi-slides

Was psi-slides tut

Das hier ist das Markdown hinter der Folie auf den Bildern oben. Die Vorlesung, aus der sie stammt, ist eine echte: eine Python-Einführung aus 36 Chunks – ein Chunk ist eine Überschrift mit dem Text darunter, und jeder Chunk wird zu einer Folie. Zwei der vier Absätze sind gekürzt, damit der Ausschnitt auf diese Seite passt; die Vorlesung selbst ist auf Englisch.

## free: Why Playwright | the modern web is rendered, not served {.wide #why-playwright}

::: cols 2

**A lot of the web is rendered by JavaScript in the browser.**
**`requests` and plain `urllib` see only the HTML shell** – often just
`<div id="app"></div>` plus a pile of script tags. Useful text, links, and
titles never arrive.

**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.** …

**The cost is weight.** …

:::

::: margin
`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.

In der Projektion fallen die zwei Spalten zu einer zusammen, weil sich vier gekürzte Absätze nicht ausbalancieren lassen. Ohne Kürzung und im Handout bleiben die beiden Spalten aus der Quelle erhalten.

Das Presenter-Cockpit: oben eine Kapitelleiste, darunter eine Spiegelung der projizierten Folie, die private Sprechnotiz, ein Streifen mit den Nachbarfolien und eine Fußzeile mit Uhr und Tastenlegende. — **Das Cockpit**, mit `S` aus der Projektion geöffnet. Die `> note:` aus der Quelle steht unter der gespiegelten Folie, wo sie sonst niemand sieht, in einer Größe, die man mit den zwei Knöpfen neben der Notiz einstellt; der Streifen zeigt, was kommt. Die beiden Fenster halten sich direkt im Browser im Gleichschritt, ohne Server dazwischen.

Die Übersichtstafel: die ganze Vorlesung aus 36 Chunks als Raster lesbarer Folien, die aktuelle umrandet. — **Die ganze Vorlesung auf einmal.** Keine Miniaturen, sondern die echten Folien, immer noch lesbar. Ziehen verschiebt den Ausschnitt, `Enter` springt zur ausgewählten Folie.

Das Suchfeld über der Folie: die Anfrage async und fünf Treffer, jeder mit Art, Überschrift und dem passenden Satz. — **Volltextsuche**, von überall, mitten im Vortrag. Jeder Treffer nennt die Art des Chunks, seine Überschrift und den Satz, in dem der Suchbegriff steht.

Das Handout: derselbe Chunk als fließender Blocksatz mit Silbentrennung, die Randnotiz als Marginalie und die Sprechnotiz in einem getönten Block darunter. — **Das Handout der Lehrperson.** Dieselbe Quelle als Dokument gesetzt – mit Silbentrennung, in einer Zeilenlänge zum Lesen, und die Sprechnotiz steht unter ihrem Chunk. Es gibt zwei Handouts: `print.html` trägt nur das Skript und ist das für die Studierenden, `print-notes.html` ergänzt die Sprechnotizen und bleibt bei einem selbst.

Vorlesungen selbst öffnen

Auf dieser Seite liegen drei Vorlesungen. python-intro ist die, aus der die Bilder stammen. Das Tutorial ist eine selbstbezügliche Tour, die das Werkzeug erklärt, indem sie es benutzt. Beide sind auf Englisch. Das Kurzbeispiel ist ein Ausschnitt aus einer Netzwerk-Vorlesung im ersten Semester, auf Deutsch: 80 Zeilen Markdown, kurz genug, um sie ganz zu lesen und daneben zu sehen, was daraus wird (Quelle, gesetzt nach den Vorlesungsnotizen unter CC BY-NC-SA 4.0).

	python-intro	Tutorial	Kurzbeispiel
Die Projektion	audience	audience	audience
Das Cockpit	speaker	speaker	speaker
Das Dokument	print	print	print
Mit den Notizen	print-notes	print-notes	print-notes

Am besten mit der Projektion anfangen. Pfeiltasten blättern, Leertaste blendet den nächsten Abschnitt ein, C schaltet zwischen gekürztem und vollem Text um, O (der Buchstabe, nicht die Null) öffnet die Übersichtstafel, / sucht, ? listet alle Tasten auf. Ein Cockpit, das über die Tabelle oben geöffnet wird, zeigt zwar das Layout, ist aber mit nichts verbunden; ein verbundenes Cockpit öffnet man mit S in der Projektion.

Alle vier Dateien sind in sich geschlossen: die Gestaltung, die Skripte, die Bilder, die gesetzten Formeln und die Schriften stecken in der HTML-Datei selbst. Zur Laufzeit wird nichts nachgeladen, und die Dateien lassen sich aus einem Ordner auf der Festplatte (file://) genauso öffnen wie von diesem Server.

Loslegen

Das aktuelle Release herunterladen und auspacken. Dieser Ordner ist das ganze Werkzeug, und die drei Vorlesungen von oben sind darin schon gebaut: lectures/tutorial/audience.html öffnen, und die Tour läuft – ohne Installation und ohne Einrichtung.

Für eine eigene Vorlesung braucht man Node 20 oder neuer, damit läuft build.js, sonst nichts: kein LaTeX, kein Pandoc, keinen Server, nichts, was systemweit installiert werden müsste.

cd psi-slides

# einmalig: die mitgelieferten Schriften und die wenigen Pakete für den Bau
npm install

# alle vier Ansichten neben source.md bauen, dann die Projektion öffnen
node build.js lectures/tutorial/source.md
open lectures/tutorial/audience.html   # macOS; sonst xdg-open oder der Browser

Falls Node noch nie installiert wurde und das Terminal unbekannt ist

Die folgenden Schritte führen von einem Windows- oder macOS-Rechner, auf dem nichts installiert ist, zu einem gebauten Tutorial.

Node installieren

nodejs.org öffnen. Der Knopf bietet die LTS-Version an – die mit langfristiger Pflege – in der passenden Datei für den jeweiligen Rechner; diesen Download nehmen. Unter macOS kommt ein .pkg: doppelklicken, durch den Installer klicken, das Passwort eingeben, wenn danach gefragt wird. Unter Windows kommt ein .msi: doppelklicken, die Vorgaben übernehmen und das Häkchen für die Werkzeuge für native Module in Ruhe lassen. psi-slides braucht sie nicht.

Wer schon einen Paketmanager benutzt: brew install node unter macOS und winget install OpenJS.NodeJS.LTS unter Windows tun dasselbe.

Ein Terminal öffnen

Unter macOS Command-Leertaste drücken, terminal tippen, Return. Unter Windows das Startmenü öffnen und terminal tippen: Windows Terminal nehmen, falls es erscheint, sonst PowerShell. Es kommt ein Fenster mit einem Cursor darin. Man tippt eine Zeile, drückt Return, und es antwortet.

node --version

Die Antwort ist eine Versionsnummer. Alles ab v20 funktioniert, und ein frischer LTS-Download liegt deutlich darüber. Kommt stattdessen command not found oder is not recognized, das Fenster schließen und ein neues öffnen: ein Terminal, das beim Installieren von Node schon offen war, hat es noch nicht gesehen.

Die Dateien holen

Das aktuelle Release herunterladen und auspacken wie jeden anderen Download; auf beiden Systemen genügt ein Doppelklick. Es entsteht ein Ordner namens psi-slides, und dieser Ordner ist das ganze Werkzeug. Ihn irgendwo ablegen, wo er wiederzufinden ist, denn das Terminal muss gleich darauf gerichtet werden.

Unter Windows die .zip wirklich auspacken und nicht per Doppelklick öffnen: Windows zeigt den Inhalt eines ZIP-Archivs wie einen Ordner an, aber darin lassen sich keine Befehle ausführen.

Das Terminal auf den Ordner richten

cd psi-slides

Die cd-Zeile muss benennen, wo der Ordner tatsächlich liegt, unter Windows also etwa cd C:\Users\du\Downloads\psi-slides. Statt den Pfad zu tippen: cd und ein Leerzeichen eingeben und dann den Ordner aus dem Dateimanager ins Terminalfenster ziehen – der Pfad schreibt sich selbst.

Holen, was der Bau braucht

npm install

npm install läuft einmal, in diesem Ordner, und dauert ein paar Sekunden. Es holt die Schriften, die psi-slides in jede Vorlesung einbettet, und die wenigen Pakete, die der Bau benutzt. Alles landet in einem Ordner node_modules neben build.js: systemweit wird nichts installiert, und die gebauten Vorlesungen laden beim Öffnen nichts nach.

Das Tutorial bauen

node build.js lectures/tutorial/source.md

Dieselbe Zeile unter Windows und macOS, Schrägstriche eingeschlossen: Node nimmt sie überall. Sie meldet, was eingebettet wurde – die Bilder, die Schriften, die QR-Codes, die gesetzten Formeln – und endet damit, was geschrieben wurde.

Wrote lectures/tutorial/print.html, lectures/tutorial/print-notes.html, lectures/tutorial/audience.html, lectures/tutorial/speaker.html (10 columns, 38 chunks)

Öffnen

lectures/tutorial/audience.html doppelklicken. Es öffnet sich im Browser, und mehr braucht es nicht: ? listet die Tasten, S öffnet das Cockpit. Die Datei an jemanden mailen, der nichts davon installiert hat, und sie funktioniert trotzdem.

Für Linux: all diese Werkzeuge sind ohnehin da. Die Pakete der Distributionen hängen manchmal mehrere Versionen hinterher, deshalb lohnt sich node --version auch dort.

Unter Windows die .zip von derselben Release-Seite nehmen. Ein git clone des Repositorys funktioniert genauso – das Archiv enthält dieselben Dateien ohne die Versionsgeschichte. Wer lieber gar nicht klickt: eine Zeile lädt herunter und packt aus.

curl -L https://github.com/UBA-PSI/psi-slides/releases/latest/download/psi-slides.tar.gz \
  | tar xz

Das baut das Tutorial: eine Vorlesung, die das Werkzeug erklärt, indem sie es benutzt. ? zeigt die Tastenübersicht, S öffnet das Cockpit. Die source.md des Tutorials ist die Referenz zum Schreiben eigener Vorlesungen, und die vier eben gebauten Dateien kann man verschieben, mailen oder hochladen – sie tragen alles bei sich, was sie brauchen.

Dann die eigene Vorlesung schreiben

# ein Verzeichnis mit gültigem Frontmatter anlegen
node build.js --new my-lecture

# bei jedem Speichern neu bauen und alle offenen Tabs neu laden
node build.js lectures/my-lecture/source.md --watch

# Chunk-IDs, Wortbudgets, offene Direktiven, zu große Assets
node lint.js lectures/my-lecture/source.md

Editor, Projektion und Cockpit nebeneinander offen halten: --watch baut bei jedem Speichern neu und lädt die beiden Browserfenster nach, sobald der Bau fertig ist. Am Ende sind die vier HTML-Dateien neben der source.md das, was man weitergibt. Mehr muss nicht mitreisen.

Dokumentation

Der Vergleich mit anderen Werkzeugen – Beamer, reveal.js, Quarto, Marp, Slidev, PowerPoint und Verwandte, in beide Richtungen, samt den Stellen, an denen psi-slides verliert. Auf Englisch.

Quellcode

github.com/UBA-PSI/psi-slides – die README-Datei erklärt das Format und sagt, wofür das Werkzeug taugt und wofür nicht. Auf Englisch.