Kapitel 15: Schöne Oberflächen ohne Design-Studium

Quiz: Hast du es verstanden?

6 Fragen. Bei Fragen mit ☐ können mehrere Antworten richtig sein. Zum Bestehen brauchst du 5 richtige Antworten.

1 Welches CSS-Paket empfiehlt das Handbuch für den Einstieg?

Tailwind Bootstrap Pico.css gar keins

2 Warum lädt man Pico und htmx einmal herunter und liefert sie aus static/ aus?

Weil CDNs verboten sind. Damit die Seite ohne Internet und ohne fremde Server funktioniert (Homeserver, Datenschutz). Weil die Dateien sonst nicht funktionieren. Damit Jinja sie übersetzen kann.

3 Was bewirkt hx-trigger="input changed delay:300ms"?

Die Anfrage geht bei jedem Tastendruck sofort raus. Die Anfrage geht erst 300 ms nach der letzten Änderung raus. Die Seite lädt alle 300 ms neu. Das Feld wird nach 300 ms geleert.

4 Was liefert der Server bei einer htmx-Anfrage typischerweise zurück?

eine komplette HTML-Seite mit <html> nur das HTML-Stück, das ersetzt werden soll (z. B. die Tabellenzeilen) JSON, das htmx in HTML umwandelt JavaScript-Code

5 Welche Gestaltungsregeln lassen eine Tabelle sofort professioneller wirken?

Zahlen rechtsbündig, Text linksbündig leere Zustände benennen („Keine Kunden gefunden“) viele verschiedene Farben für jede Spalte ein einziger Akzentfarbton, der Rest in Grau

☐ Mehrere Antworten möglich

6 Wie registrierst du eine Python-Funktion euro als Jinja-Filter?

@app.filter('euro') templates.env.filters['euro'] = euro {% filter euro %} im Template reicht jinja.add('euro')