Logo

Medien und Ressourcen hinzufügen

Inhalte erstellen

Medien und Ressourcen hinzufügen

Bilder, Videos und herunterladbare Dateien veranschaulichen Konzepte und ergänzen den Text. Diese Lektion zeigt, wo Medien im Kurs liegen, wie sie referenziert werden und was bei Videos zu beachten ist.

Kurs-Medienordner

Der einfachste Weg für Kursmedien ist ein _media/-Ordner im Stammverzeichnis des Kurses. So bleiben alle Dateien an einem Ort.

Den _media/-Ordner einrichten

  1. einen _media/-Ordner im Kursverzeichnis anlegen:

    content/de/courses/ihr-kurs-name/
├── _index.md
├── _media/
│   └── index.md
├── 10-getting-started/
└── ...

  2. eine index.md in _media/ mit diesem Frontmatter anlegen:

    ---
title: "Course Media"
build:
  render: never
  list: never
  publishResources: true
---

    Warum wird diese Datei benötigt? Hugo behandelt einen Ordner mit einer index.md als Leaf Bundle — eine Inhaltseinheit, die ihre eigenen Ressourcen (Bilder, PDFs usw.) besitzt. Die build-Einstellungen weisen Hugo an, keine Seite für dieses Bundle zu erzeugen (render: never), es nicht neben den Lektionen aufzulisten (list: never), aber die darin enthaltenen Dateien trotzdem zu veröffentlichen, damit sie per URL erreichbar sind (publishResources: true). Ohne diese Datei würde Hugo die Mediendateien komplett ignorieren.

  3. die Mediendateien im _media/-Ordner ablegen, entweder direkt im Stammverzeichnis oder in Unterordnern (z. B. nach Lektionsname):

    _media/
├── index.md
├── kurs-thumbnail.png              ← gemeinsame Dateien auf oberster Ebene
├── einfuehrung/                     ← optionaler Unterordner pro Lektion
│   ├── image1.png
│   └── image2.png
├── erste-schritte/
│   ├── image1.png
│   ├── image2.png
│   └── spickzettel.pdf
└── fortgeschrittene-themen/
    └── image1.png

    Unterordner sind optional; alle Dateien können auch flach in _media/ liegen. Unterordner helfen, wenn mehrere Lektionen Dateien mit gleichem Namen verwenden (z. B. image1.png).

Medien aus _media/ verwenden

Nach der Einrichtung werden Medien mit Dateinamen oder relativen Pfaden referenziert:

Dateien im Stammverzeichnis von _media/:

![Thumbnail](kurs-thumbnail.png)
image: kurs-thumbnail.png

Dateien in Lektions-Unterordnern:

![Erstes Bild](einfuehrung/image1.png)
![Zweites Bild](erste-schritte/image2.png)
[Spickzettel herunterladen](erste-schritte/spickzettel.pdf)

Das System löst diese Pfade automatisch aus dem _media/-Ordner auf.

Videos hinzufügen

Videos eignen sich, um Abläufe zu demonstrieren oder komplexe Konzepte zu erklären. Für die beste Performance liegen sie auf externen Video-Plattformen.

Die Videoquelle steht im Frontmatter der Lektion. Empfohlene Optionen:

---
video:
  youtube: dQw4w9WgXcQ                # YouTube Video-ID (empfohlen)
  # vimeo: 123456789                  # Vimeo Video-ID
  # tibav: 42061                      # TIB AV-Portal ID
  # external: https://.../video.mp4   # Externe Video-URL
  # embed: "<iframe ...></iframe>"    # Beliebiger Embed-Code
---

Das Video erscheint automatisch oben auf der Lektionsseite.

Wichtig: Videos gehören auf externe Plattformen (YouTube, Vimeo, TIB AV-Portal), nicht als Dateien ins Repository.

Wie ein solches Video aus den Lektionen entsteht, zeigt die Lektion Videos zum Kurs produzieren .

Tipp: Das bestehende image-Feld im Frontmatter dient als Vorschaubild (Thumbnail) für das Video.

Herunterladbare Ressourcen hinzufügen

Zusätzliche Ressourcen wie PDF-Leitfäden, Codebeispiele oder Übungsdateien lassen sich zum Download anbieten:

  1. Dateien im _media/-Ordner ablegen (optional in einem Lektions-Unterordner)
  2. mit dem relativen Pfad verlinken: 
    [Übungsdateien herunterladen](erste-schritte/übung-dateien.zip)
[Spickzettel herunterladen](erste-schritte/spickzettel.pdf)

Best Practices für Medien

  1. Relevante Medien verwenden: Jedes Medium unterstützt den Lehrinhalt direkt.
  2. Dateigrößen optimieren: Große Dateien verlangsamen die Ladezeit. Bilder und Videos möglichst komprimieren.
  3. Alternativtext bereitstellen: Jedes Bild bekommt beschreibenden Alternativtext für die Barrierefreiheit.
  4. Medien ausgewogen einsetzen: Medien fördern das Lernen, ersetzen aber keinen Text. Eine Balance zwischen beidem ist das Ziel.

Übung: Die Lektion mit Medien ergänzen

  1. mindestens ein Bild zur Lektion aus der vorherigen Übung hinzufügen
  2. falls passend, eine kurze Videodemonstration einbinden
  3. eine einfache herunterladbare Ressource (z. B. einen PDF-Spickzettel) erstellen und verlinken

Die nächste Lektion zeigt, wie der Kurs vor der Einreichung lokal geprüft und getestet wird.

Optionales Feedback