H5P-Elemente offline erstellen und in HTML exportieren mit Lumi
Screenshot youtube.com
In diesem Beitrag werfen wir einen Einblick auf die Open-Source-Software Lumi. Lumi ist als Desktopanwendung verfügbar für Windows, macOS und Linux und ermöglicht die Erstellung von H5P-Elementen. H5P ist eine freie, quelloffene Software und steht für HTML5 Package.
Mit ihr lassen sich interaktive Inhalte wie Videos (Element „Interactive Video“), Grafiken (Element „Image Hotspots“), Quizze (Element „Personality Quiz“) und verschiedene Formen von Lückentexten (z. B. Element „Fill in the Blanks“) ohne Programmierkenntnisse erstellen und in Blogbeiträge, Hackpads, Padlets oder Learning Management Systems (LMS) einbinden.
Mit Lumi lassen sich auch ohne Programmierkenntnisse leicht kreative und interaktive (Lern-)Inhalte erstellen (Abbildung von Florian Hagen, CC0/Public Domain)
Ein Vorteil von Lumi gegenüber anderen H5P-Editoren: Lumi lässt sich offline nutzen. Eine Webseite (u. a. www.h5p.org), ein LMS (bspw. Stud.IP) oder ein Content-Management-System (z. B. WordPress) wird somit nicht benötigt, um eigene interaktive Lernelemente zu kreieren. Ein weiterer Vorteil: die mit Lumi erstellten Elemente lassen sich per Mausklick als HTML-Datei exportieren. Diese können auf fast allen Geräten ohne großen Aufwand genutzt werden. Aktuell (Stand: 28.02.2022) stehen 48 Inhaltstypen zur Verfügung.
Die Eindrücke zu Lumi in diesem Beitrag basieren auf der Version 0.8.3 für macOS. Der Beitrag ist in folgende Abschnitte eingeteilt:
1.) Download und erste Schritte,
2.) Editier- und Vorschaumodus,
3.) Speichern und Export von H5P-Elementen,
4.) Sonstiges.
Die Software wird ausschnitthaft am Beispiel des Elements „Image Hotspots“ vorgestellt.
1. Download und erste Schritte
Lumi lässt sich über https://lumi.education/#download herunterladen. Hier muss lediglich das passende Betriebssystem ausgewählt werden.
Nach einer kurzen Installation können wir Lumi starten und haben zunächst die Wahl zwischen „H5P-Editor“ und „Lumi Analytics“. Da wir ein H5P-Element erstellen bzw. bearbeiten möchten, wählen wir den Editor aus (1.) und landen in einem weiteren Optionsfenster. Hier (2.) können wir wählen, ob wir bereits existierende Dateien bearbeiten wollen („EIN VORHANDENES H5P ÖFFNEN“) oder ein neues H5P-Element erstellen wollen („EIN NEUES H5P ERSTELLEN“).
Wählen wir die zweite Option „EIN NEUES H5P ERSTELLEN“, so haben wir nun die Wahl zwischen verschiedenen Inhaltstypen. Die Auswahlmaske ist im Grunde komplett identisch mit den gängigen H5P-Online-Editoren, die über ein WordPress-Plugin oder www.h5p.org genutzt werden können.
Beim ersten Start der Software sind zunächst nicht alle Inhaltstypen installiert. Dies lässt sich aber schnell mit wenigen Mausklicks nachholen. Erkennbar sind die nicht installierten H5P-Elemente am Hinweis „Übernehmen“. Auf neuere Versionen der Elemente wird durch den Hinweis „Aktualisierung verfügbar“ aufmerksam gemacht. Wählt man das erste Mal ein H5P-Element aus, so wird von Lumi auf die Möglichkeit eines Kurztutorials hingewiesen.
Später können diese Tutorials nach Auswahl eines Elements und Klick auf „Tutorial“ am oberen Bildschirmrand eingesehen werden.
Apropos Tutorials. Die über Lumi einzeln abrufbaren Einführungen zu H5P-Elementen lassen sich auch direkt über die Rubrik „Examples & downloads“ auf www.h5p.org abrufen. Eine richtig tolle Beispielsammlung bietet auch „H5P im Überblick“. Hier werden zu den meisten Elementen neben Beispielen ganz offen Ideen für den Einsatz und Schritt-für-Schritt-Anleitungen zur Erstellung geteilt.
Hat man sich für ein Element entschieden (hier ausgewählt: „Image Hotspots“), so öffnet sich der leere Editierbildschirm.
Über die unterschiedlichen Eingabe- und Optionsfelder lässt sich das eigene Lernelement nun gestalten. Für „Image Hotspots“ (und andere Elemente) sollte zunächst ein Titel vergeben werden, bevor ein Hintergrundbild hinzugefügt, Alternativtexte festgelegt und Hotspot-Symbole positioniert und angepasst werden. Diese Hotspot-Symbole sorgen dafür, dass später auf Grafiken klickbare Symbole vorhanden sind, die beispielsweise weitere Informationen zur angeklickten Bildposition beinhalten.
Zur Veranschaulichung eines befüllten Editierbildschirmes habe ich nachfolgend über „H5P-Datei öffnen“ am linken Bildschirmrand das H5P-Element „Workflow Finanzierung Zeitschriftenartikel“ geöffnet, welches auch im Rahmen der Open Access Week 2021 im Blogbeitrag Wie finanziere ich meinen Zeitschriftenartikel? eingebunden wurde.
Dieses Element kann im verlinkten Beitrag über einen Klick auf „Reuse“ einfach runtergeladen werden, um selbst ein wenig mit Lumi zu experimentieren. Ein weiteres „Image Hotspots“-Element zum Ausprobieren steht auch über den tub.torials-Beitrag Was bedeutet eigentlich Open Science? zur Verfügung.
Mit Klick auf „Reuse“ lassen sich H5P-Elemente runterladen und mit H5P-Editoren wie Lumi editieren (Screenshot „Zeitschriftenartikel“ von Isabo Schick und Florian Hagen)
Um zu sehen, wie unser Lernelement in der praktischen Nutzung aussieht, kann nun in Lumi die Vorschau-Option über Klick auf die Registerkarte „Vorschau“ genutzt werden.
Diese Option von Lumi ist in meinen Augen ein großer Vorteil gegenüber vielen H5P-Online-Editoren, da in Lumi ohne große Wartezeiten auf Mausklick angezeigt wird, wie das Lernelement in der Praxis aussieht. Bei Online-Lösungen muss vor der Wahl der Vorschau-Option immer gespeichert werden. Andernfalls werden die Änderungen nicht in der Vorschau abgebildet. Werden nun im eigenen Workflow wieder und wieder Kleinigkeiten geändert und häufig über die Vorschau überprüft, war dies zumindest für mich in der praktischen Nutzung von Online-Editoren häufiger störend, da der Speichervorgang selbst sowie das hin- und herschalten zwischen Editier- und Vorschaumodus des Öfteren einige Augenblicke dauerte. Der Wechsel zwischen Editier- und Vorschauperspektive bei H5P-Online-Editoren sorgt auch dafür, dass nicht gespeicherte Änderungen verloren gehen. Dies ist bei Lumi nicht der Fall. Dennoch sollte natürlich auch hier das regelmäßige Speichern nicht vergessen werden. Wird die Anwendung geschlossen, ohne zu speichern, so gibt es leider keine Option wie „Auto-Wiederherstellung“.
3. Speichern und Export von H5P-Elementen
Erfreulicherweise funktioniert der Speichervorgang in Lumi schnell und unkompliziert. Dieser kann sowohl per Shortcut („Cmd“-Taste + „S“) als auch Auswahl von „Datei“ am oberen linken Bildschirmrand und Klick auf „Speichern“ ausgelöst werden.
Ein erfolgreicher Speichervorgang wird durch einen grün hinterlegten Hinweis „H5P gespeichert!“ bestätigt. Das Element liegt nun als H5P-Datei vor und kann in Lernplattformen wie Stud.IP oder Content-Management-Systeme wie WordPress eingebunden werden, wenn ein H5P-Plugin aktiviert ist. Wird eine dieser Möglichkeiten für die Abbildung von H5P genutzt, so lassen sich die Elemente auch in Open-Source-Anwendungen wie HedgeDoc (Weiteres zu HedgeDoc und Markdown haben wir in den Beiträgen Online-Fortbildungen mit HedgeDoc und Greenshot dokumentieren und Schreiben mit Markdown festgehalten) einbetten, um zum Beispiel für Seminare, Workshops und andere Veranstaltungen Arbeitsumgebungen für Aufgaben zur Verfügung zu stellen, die gemeinsam bearbeitet werden können. Wer dies einmal schnell ausprobieren möchte:
Klick auf die Schaltfläche „Embed“ am unteren Rand des H5P-Elements,
Einfügen des Links in das Hackpad.
Das H5P-Element sollte nun im Hackpad zu sehen und verwendbar sein.
Lumi bietet für H5P-Elemente mit der Export-Option zudem eine weitere Möglichkeit des Teilens. Wenn wir am oberen Bildschirmrand auf „Datei“ klicken, können wir „Exportieren…“ auswählen und einen HTML-Export erstellen. Mit Auswahl von „All-in-One-HTML-Datei“ entsteht so zum Beispiel ein H5P-Element, das auf Computern mit Internetbrowser durch einen einfachen Doppelklick auf die generierte HTML-Datei geöffnet und genutzt werden kann. Erfolgreich ausprobiert habe ich dies bisher mit den Browsern Safari, Firefox und Chrome. Lernende können so also interaktive H5P-Elemente nutzen, ohne dass weitere Anwendungen installiert werden müssen oder eine Internetverbindung benötigt wird (außer für den Download der HTML-Datei).
Die Option des HTML-Exports ist auch im Hinblick auf Repositorien wie TUHH Open Research (TORE) interessant, da HTML zu den unterstützten Formaten von TORE gehört. Somit ist es möglich auch für interaktive Open Educational Resources (OER) einen Digital Object Identifier (DOI) zu erzeugen. Diese Form des Identifikators ist – ähnlich der ISBN in Büchern – eindeutig und dauerhaft. Quellenbelege in der Wissenschaft setzen daher immer bevorzugt auf DOIs statt klassische URLs, um nicht mehr funktionierenden Links vorzubeugen. Wie dies in der Praxis aussehen kann, zeigt das Lernelement „4 Step Creation Method“ von Jan Küchenhof und Hanna Marie Bickmeier. In diesem H5P-Element, das im Rahmen der Hamburg Open Online University (HOOU) an der TUHH entstanden ist, kann mehr über eine Methode zur systematischen Neugewinnung von Innovationen erfahren werden.
4. Sonstiges
Lumi ist zum Erstellen und teilen von H5P-Elementen eine tolle Sache. Einige Schritte der H5P-Erstellung lassen sich so angenehmer und effizienter für mich umsetzen und Lerninhalte können zusätzlich über andere Wege zugänglich gemacht werden. Was ich mir neben einer automatischen Zwischenspeicheroption für den Fall der Fälle (man kennt es ja, auch heute vergisst man ab und an in Eile durchaus mal das Speichern 😉 ) noch wünschen würde, wäre eine Option wie „Zuletzt verwendete H5P-Elemente öffnen“. Für aktive Sitzungen mit Lumi werden alle zuletzt geöffneten H5P-Elemente am linken Rand eingeblendet, sobald das Programm aber geschlossen bzw. neu gestartet wird, werden zuletzt geöffneten Dateien nicht mehr angezeigt. Abstürze oder andere Probleme habe ich mit Lumi bislang ansonsten nach vielen Monaten der Nutzung noch keine gehabt.
Was haltet ihr von Lumi und H5P-Elementen? Nutzt ihr Letztere zum Lehren, Lernen und andere Zwecke oder greift ihr auf Alternativen zurück? Teilt eure Erfahrungen gerne offen über die Kommentarfunktion oder andere Kanäle 🙂
Screenshot youtube.com
