psi-slides · Präsentationssoftware für Lehrende · This page in English
Die Vorlesung einmal schreiben.
Eine Markdown-Datei geht hinein. Vier HTML-Dateien kommen heraus: die Projektion für den Raum, ein Cockpit für den eigenen Bildschirm und zwei Handouts. Aus derselben Datei gebaut, können sie nicht auseinanderlaufen.
Eine Folie einer echten Vorlesung, zweimal. Einmal so, wie der Raum die Folie sieht, und einmal mit denselben vier Absätzen 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 liegt auf einem Server des Lehrstuhls an der Universität Bamberg, nicht auf dieser Seite, und wird erst geladen, wenn man auf Abspielen drückt. Es ist das Einzige auf dieser Website, das überhaupt irgendwohin greift.
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. Drei Texte, und eine Folie mit einem Notizfeld darunter fasst zwei davon. Das geht auf drei Arten aus.
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 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.
Das ist die ganze Quelle dieser Folie
Neun Absätze 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 36 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.
Zwei der vier Absätze brechen mit Auslassungspunkten ab, damit der Ausschnitt auf diese Webseite passt – das macht diese Seite, nicht das Werkzeug. In der Projektion fallen die zwei Spalten der Vorlesung zu einer zusammen, weil sich vier gekürzte Absätze nicht ausbalancieren lassen; ohne Kürzung und im Handout bleiben die Spalten erhalten.
## 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.** …
:::
::: 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.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 Sprechnotizen unter
die Chunks und bleibt bei einem selbst.
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.
Ein Teil der Quelle: die vier Kästen, eine der drei Notizen und der Schritt, der diese Notiz hereinholt.
Längen zählen in Rasterzellen, nicht in
Pixeln – die erste Zeile setzt die Zellgröße, also behält eine
Abbildung ihre Proportionen, wenn die Zelle sich ändert. Und
-- fh.cx,fh.top zeichnet eine Hilfslinie: sie zeigt
auf eine Stelle an einem anderen Kasten und bleibt daran hängen, wenn dieser
sich bewegt.
::: draw 150x54
default box {.tone-3 .sharp} w 0.88 h 0.85
box fh "Frame\nHeader" at 0,0
box dh "Datagram\nHeader" right of fh gap 0 same as fh
box sh "Segment\nHeader" right of dh gap 0 same as fh
box pl "Payload" right of sh gap 0 same as fh {.paper}
text lmac "Ethernet source\nand destination\naddresses*" above fh gap 0.5 -- fh.cx,fh.top {.muted @l1}
step ethernet
show @l1
emph fhDie Abbildungssprache ist jünger als die Formatzusage. Beide Wege zu psi-slides bauen sie – die App trägt sie, die Quellen ebenso. Was ihr fehlt, ist die Zusage, die mit 1.0.0 kam: Eine Abbildung, die man heute schreibt, kann eine Änderung nötig machen, wenn die Sprache ein eigenes Release erreicht.
Figures you write ist die Begründung für die Sprache: was eine Vorlesungsabbildung leisten muss, das ein Zeichenprogramm und eine Auto-Layout-Sprache jeweils schlecht können. Das Handbuch baut eine Zeile für Zeile auf, listet jede Anweisung und zeigt den grafischen Editor, mit dem man einen Kasten auf der Folie zieht und die Quelle umgeschrieben bekommt.
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: python-intro
36 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.
Danach: das Tutorial
92 Folien · ein Nachschlagewerk
Wie das Format funktioniert, erklärt von einer Vorlesung, die selbst daraus gebaut ist. Ihre Quelle ist die Vorlage für die eigene Vorlesung.
Die drei übrigen Vorlesungen
python-intro und das Tutorial stehen oben; das hier ist der Rest. Sie werden aus dem Repository gebaut, nicht aus dem Release, und von Decoration sind nur 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 40 Folien
Jede Konstruktion, die die Abbildungssprache kennt, gezeichnet statt beschrieben, darunter Abbildungen aus einer echten Vorlesung.
Decoration 39 Folien
Was etwas anderes als eine Textspalte auf eine Folie bringt: Titelfolien, Trenner, Karten, Hintergrundbilder, ein Foto, das sich mit Leertaste öffnet.
Die vier Dateien einer Vorlesung 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.
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, und jede davon ist die Datei, die man selbst gebaut hätte.
Loslegen
Zwei Wege, und beide bauen dieselben vier Dateien.
die App
Die App lädt man herunter, und sie baut auf Knopfdruck:
Man öffnet darin eine source.md, und bei jedem Speichern baut
sie neu. Sonst muss nichts installiert werden – kein Node, kein
Terminal –, und nichts verlässt den Rechner: Sie führt denselben Bau
auf der eigenen Maschine aus und schreibt die vier Dateien neben die
Quelle.
die Kommandozeile
Die Kommandozeile beginnt mit einem Clone des
Repositorys und einem npm install, für Leute, die ohnehin im
Terminal arbeiten – und über sie schreibt man eine Vorlesung mit einem
Sprachmodell daneben, weil das Repository die Skills mitbringt, die einem
das Format beibringen.
$ node build.js lectures/tutorial/source.md
[inline-images] auto-inlining 2 image(s), 0.00 MB total (under 10 MB budget). Use --no-inline-images to disable.
[fonts] 6 bundled face(s) embedded – Literata, IBM Plex Sans, JetBrains Mono – 279 KB per view (OFL-1.1). Use `fonts: none` to ship without them.
[qr] 1 link address(es) carry a QR code, 3 KB per live view.
[math] 5 KaTeX font families inlined, 166 KB of woff2 per live view (of 254 KB for the full set); print carries only the families its formulas use. A lecture without math inlines nothing.
Wrote lectures/tutorial/print.html, lectures/tutorial/print-notes.html, lectures/tutorial/audience.html, lectures/tutorial/speaker.html (12 columns, 92 chunks)
$ ls -al lectures/tutorial/*.html
-rw-r--r-- 1 dh staff 2354468 Sep 10 05:20 lectures/tutorial/audience.html
-rw-r--r-- 1 dh staff 961611 Sep 10 05:20 lectures/tutorial/print-notes.html
-rw-r--r-- 1 dh staff 953385 Sep 10 05:20 lectures/tutorial/print.html
-rw-r--r-- 1 dh staff 2480979 Sep 10 05:20 lectures/tutorial/speaker.htmlAuf der nächsten Seite stehen die Downloads für macOS, Windows und Linux, die Befehle und eine Anleitung, die auf einem Rechner ohne alles anfängt.
Zum Weiterlesen
- Wie psi-slides sich vergleicht Beamer, reveal.js, Quarto, Marp, Slidev, PowerPoint und andere, in beide Richtungen, einschließlich der Stellen, an denen psi-slides verliert.
- Figures you write Die Begründung für die Abbildungssprache, und das Handbuch daneben, das eine Abbildung Zeile für Zeile aufbaut.
- Die Tutorial-Vorlesung 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.