124-webapp/data/KURSE_README.md
2025-10-07 13:02:29 +02:00

5.1 KiB

Kurse verwalten

Kurse bearbeiten

Die aktuellen Kurse werden aus der Datei courses.csv geladen und automatisch auf der "Über uns" Seite angezeigt.

CSV-Format

Die Datei hat fünf Spalten (alle außer title sind optional):

  • title - Der Titel des Kurses (erforderlich)
  • description - Eine kurze Beschreibung (optional)
  • dates - Termine und Zeiten (optional)
  • offen_fuer - Zielgruppe/Altersgruppe (optional)
  • image - Pfad zum Kursbild (optional)

Beispiel:

title,description,dates,offen_fuer,image
Löten und Leuchten,Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik,"Di 15.10. 14:00-16:00",Klasse 7-9,/static/images/courses/loeten.jpg
Die Vogelvilla,Bau von Vogelhäusern mit Lasercutter und Holzbearbeitung,"Mi 23.10. 13:00-15:00",alle Schüler:innen,
Robotik Intro,,,ab Klasse 5,/static/images/courses/robotik.jpg

Kursbilder hinzufügen

  1. Speichere das Bild in /static/images/courses/
  2. Verwende den Pfad /static/images/courses/dein-bild.jpg in der CSV
  3. Empfohlene Bildgröße: mindestens 640x400 Pixel
  4. Unterstützte Formate: JPG, PNG, WebP

Tipp: Wenn kein Bild angegeben ist, wird der Kurs ohne Bild angezeigt (nur Text).### Felder im Detail

title (erforderlich)

Der Kursname - wird immer angezeigt.

description (optional)

Kurzbeschreibung des Kurses. Wird nur angezeigt, wenn vorhanden.

dates (optional)

Termine und Uhrzeiten. Kann mehrere Termine enthalten:

  • Einzelner Termin: Mi 23.10. 13:00-15:00
  • Mehrere Termine: Di 15.10. 14:00-16:00, Do 17.10. 14:00-16:00
  • Bei Terminen mit Kommas: In Anführungszeichen setzen

offen_fuer (optional)

Freitextfeld für die Zielgruppe:

  • Klasse 7-9
  • alle Schüler:innen
  • ab 14 Jahren
  • Oberstufe

Kurs hinzufügen

Einfach eine neue Zeile am Ende der Datei hinzufügen:

title,description,dates,offen_fuer
Löten und Leuchten,Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik,"Di 15.10. 14:00-16:00, Do 17.10. 14:00-16:00",Klasse 7-9
Neuer Kurs,Beschreibung des neuen Kurses,"Mo 20.10. 15:00-17:00",Klasse 8-10

Fehlende Informationen

Alle Felder außer title sind optional. Beispiele:

Nur Titel und Beschreibung:

title,description,dates,offen_fuer
Workshop XYZ,Toller Workshop über Making,,

Nur Titel und Termine:

title,description,dates,offen_fuer
Workshop ABC,,"Fr 25.10. 14:00",

Nur Titel und Zielgruppe:

title,description,dates,offen_fuer
Workshop 123,,,Klasse 9-10

Kurs entfernen

Einfach die entsprechende Zeile löschen.

Wichtig

  • Keine Anführungszeichen verwenden, außer der Text enthält ein Komma
  • Keine Zeilenumbrüche innerhalb der Beschreibung
  • Die erste Zeile (title,description,dates,offen_fuer,image) muss erhalten bleiben
  • Nach dem Speichern wird die Änderung sofort auf der Website sichtbar

Darstellung auf der Website

Die Kurse werden in einem Grid-Layout mit Karten-Design angezeigt:

  • Große, fette Titel (1.5em) mit pinker Unterstreichung
  • Hover-Effekt: Karten heben sich beim Überfahren an
  • Responsive: Auf Mobilgeräten eine Spalte, auf Desktop mehrere Spalten
  • Kursbilder (optional): 200px hoch, oben auf der Karte
  • Metadata am unteren Rand: Datum und Zielgruppe mit Icons

Beispiel mit Bild:

┌─────────────────────────────┐
│   [Kursbild 640x400]        │
├─────────────────────────────┤
│ Löten und Leuchten          │ ← 1.5em, fett, pink unterstrichen
│ ─────────────────────       │
│                             │
│ Herstellung von Nachtisch-  │ ← Beschreibung
│ leuchten mit 3D-Design      │
│                             │
├─────────────────────────────┤
│ 📅 Dez. '24                 │ ← Metadata mit Icons
│ 👥 Klasse 5-6               │
└─────────────────────────────┘

Beispiel ohne Bild:

┌─────────────────────────────┐
│ Textiles Plotten            │ ← Direkt der Titel
│ ─────────────────           │
│                             │
│ Erschaffe deine eigenen     │
│ Klamottendesigns            │
│                             │
├─────────────────────────────┤
│ 📅 Mai '25                  │
│ 👥 Jhg. 9                   │
└─────────────────────────────┘

Live-Update

Die Kurse werden bei jedem Seitenaufruf neu geladen. Es ist kein Neustart des Servers erforderlich!

Keine Kurse anzeigen

Wenn keine Kurse stattfinden, einfach alle Zeilen außer der Kopfzeile löschen:

title,description

Die Seite zeigt dann: "Aktuell sind keine Kurse geplant. Schaut bald wieder vorbei!"