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

einen _media/-Ordner im Kursverzeichnis anlegen:

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

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.

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)
  captions: manual                    # Untertitel im Player: manual, auto oder none
  # 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.

Untertitel und Alternativen

Ein Video mit Sprache oder bedeutsamem Ton braucht Untertitel. Zeigt das Bild etwas, das der Sprechtext nicht sagt, brauchen Lernende, die es nicht sehen können, diese Information als Text oder Ton. Laden Sie eine korrigierte Untertiteldatei im Player des Anbieters hoch; das TIB AV-Portal nimmt WebVTT und SRT an. Automatische Untertitel sind ein Ausgangspunkt, kein Ergebnis.

Bei youtube, vimeo, tibav und embed ist captions Pflicht. Tragen Sie ein, was der Player des Anbieters anbietet: manual für Untertitel, die ein Mensch erstellt oder korrigiert hat, auto für nur automatisch erzeugte und none für keine. Die Seite zeigt den Wert unter dem Video an, und die Inhaltsprüfung lehnt ein Video ohne den Eintrag ab.

Für eine Videodatei, die ein anderer Server bereitstellt (external), tragen Sie WebVTT-Untertitelspuren im Frontmatter ein. Die Videodatei selbst kommt nie in dieses Repository. Die Untertiteldateien sind kleine Textdateien: Legen Sie sie unter static/resources/courses/ihr-kursname/ ab und verwenden Sie den Pfad ab Wurzel als src.

video:
  external: https://media.example-university.de/courses/einfuehrung.mp4
  tracks:
    - src: /resources/courses/ihr-kursname/einfuehrung.de.vtt
      srclang: de
      label: Deutsch
      default: true

Jede Spur braucht src und srclang. kind ist captions, sofern Sie nicht subtitles, descriptions oder chapters setzen, und je kind darf nur eine Spur default sein. Einbettungen von Anbietern ignorieren tracks. Eine Untertiteldatei auf einem anderen Server laden Browser nur, wenn dieser Server CORS-Header sendet und das Video-Element ein crossorigin-Attribut hat, das die Vorlage nicht setzt. Halten Sie die Dateien deshalb in static/.

Der Lektionstext bleibt ein vollständiger Weg durch das Thema. So kommen auch Lernende ans Ziel, die den Drittanbieter-Player ablehnen, kein Video nutzen können oder mehr als Untertitel brauchen. Ein Transkript allein ersetzt keine Untertitel, und es ersetzt keine Audiodeskription, wenn wichtige Inhalte nur zu sehen sind.

Herunterladbare Ressourcen hinzufügen

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

Dateien im _media/-Ordner ablegen (optional in einem Lektions-Unterordner)

mit dem relativen Pfad verlinken:

[Übungsdateien herunterladen](erste-schritte/übung-dateien.zip)
[Spickzettel herunterladen](erste-schritte/spickzettel.pdf)

Best Practices für Medien

Relevante Medien verwenden: Jedes Medium unterstützt den Lehrinhalt direkt.
Dateigrößen optimieren: Große Dateien verlangsamen die Ladezeit. Bilder und Videos möglichst komprimieren.
Alternativtext bereitstellen: Jedes Bild bekommt beschreibenden Alternativtext für die Barrierefreiheit.
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

mindestens ein Bild zur Lektion aus der vorherigen Übung hinzufügen
falls passend, eine kurze Videodemonstration einbinden
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.