Mit H5P ganz einfach interaktive Bilder oder Karten für Lernaktivitäten erstellen

Mit H5P kann man Bilder ganz einfach in interaktive Bilder oder in eine interaktive Karte mit “Hotspots” verwandeln, auf die man klicken kann, um Detailbilder oder Zusatzinformationen zu verwandeln. Diese interaktiven Elemente kann man dann in z.B. in WordPress Webseiten oder in Lernplattformen wie Moodle, Ilias oder Blackboard einbetten und für Lernaktivitäten verwenden. Der heutige Blogbeitrag zeigt, wie es geht. Man findet hier:

eine kurze Einführung in H5P,
eine Schritt-für-Schritt-Anleitung für die Gestaltung und Einbettung von interaktiven Bildern oder Karten mit H5P,
Ideen für die Verwendung von interaktiven Bildern oder Karten in Lernaktivitäten,
eine Liste mit weiteren Informationen, Anleitungen, Tipps und (YouTube-) Videos zu H5P.

Und natürlich gibt es auch am Ende des heutigen Blogbeitrags wieder meinen ganz persönlichen Sprachspinat-Tipp zur Verbindung von Sprachbildung, Naturbildung und BIldung für nachhaltige Entwicklung.

Eine kurze Einführung in H5P

H5P ist eine kostenlose, frei zugängliche Open Source Software zum Erstellen von interaktiven (Lern-)Inhalten für das Internet. Mit H5P kann man u.a. Memory-Spiele, BIlder mit anklickbaren Zusatzinformationen oder Videos mit eingebetteten Quiz-Aufgaben erstellen. So wurde z.B. das Titelbild des heutigen Blogbeitrags mit sogenannten Hotspots versehen, auf die man klicken kann, um Detailbilder und Zusatzinformationen zu den markierten Pflanzen zu erhalten. Das kann man hier ausprobieren, indem man auf die gelb markierten Kreuze klickt.

Interaktives Pflanzennamen-Beet mit anklickbaren Hotspots für mehr Informationen (P.S.: bei älteren iPhones kann es zu Anzeigeproblemen kommen).

Ein anderes Beispiel für ein interaktives H5P-Element ist das Pflanzennamen-Quiz aus einem früheren Sprache-Spiel-Natur-Blogbeitrag.

Interaktives Pflanzennamenquiz mit anklickbaren Antworten und Feedback (P.S.: bei älteren iPhones kann es zu Anzeigeproblemen kommen).

Das Ziel bei der Entwicklung von H5P war es, eine Alternative zum bis dahin gebräuchlichen Adobe Flash System zu entwickeln. Insbesondere sollten ideale Bedingungen für die Erstellung von sogenannten freien Bildungsmaterialien (Open Educational Resources; OER) geschaffen werden, die man verändern und mit anderen teilen kann.

Daher setzte man auf offene Standards wie HTML5 und entwickelte mit H5P im Jahre 2013 eine entsprechende Software. H5P ist vereinbar mit unterschiedlichen Browsern (Firefox, Chrome etc.) und Geräten (PCs, Apple Notebooks, Windows Laptops, iPads, Handys etc.). Außerdem braucht man keine Programmierkenntnisse zur Erstellung von H5P-Elementen. Ebenso kann man die interaktiven Elemente direkt im Browser auf der entsprechenden Webseite benutzen. So muss man z.B. keine Software herunterladen wenn man die Pflanzennamen-Quiz-Fragen in diesem Blogbeitrag beantworten möchte. Man muss nur auf die entsprechenden Quiz-Antworten klicken. Auch die mit einem gelben Pluszeichen markierten Hotspots im interaktiven Bild des heutigen Blogbeitrags kann man einfach anklicken, um Zusatzinformationen und Detailbilder zu den markierten Pflanzen zu erhalten.

Man kann H5P-Elemente auf der H5P-Webseite erstellen und mit anderen Menschen teilen. Man kann aber auch Plugins für WordPress und andere Systeme zur Erstellung von Webseiten (Content Management Systems, CMS) verwenden. Solche Plugins gibt es auch für Moodle, Blackboard, Ilias und andere Lernplattformen (Learning Management Systems, LMS).

Die Elemente, die man auf der H5P-Webseite oder mit Plugins erstellt hat, kann man dann in Webseiten oder in digitale Lerneinheiten auf Lernplattformen einbinden. Dabei können Elemente mehrfach verwendet werden. So findet man z.B. das Pflanzennamen-Quiz aus dem heutigen Blogbeitrag auch in einem separaten Blogbeitrag. Wenn man das Element nach der Erstellung verändert und die Aktualisierungen abspeichert, werden alle Seiten, auf denen es erscheint, ebenfalls aktualisiert. Auf diesen Webseiten findet sich nämlich nur ein Verweis auf das entsprechende Element an seinem ursprünglichen Speicherort.

Die Gestaltung von interaktiven Bildern oder Karten mit H5P

Die Gestaltung von interaktiven Bildern oder Karten mit H5P erfolgt in vier Schritten:

Installierung des H5P-Plugins,
Installation des entsprechenden Elementtyps,
Erstellung des interaktiven H5P-Elements und
Einbettung des interaktiven H5P-Elements in eine Webseite oder Lernplattform.

Diese Schritte sollen hier anhand des Titelbildes für den heutigen Blogbeitrag gezeigt werden. Dabei gibt es aber auch Hinweise für das Vorgehen in Lernplattformen wie Moodle, Blackboard oder Ilias. Weitere H5P-Tutorials für unterschiiedliche interaktive Elemente (z.B. Memory-Spiele) findet man in der Linkliste am Ende dieses Blogbeitrags.

Die Installierung des H5P-Plugins

Um das H5P-Plugin zu installieren, klickt man im WordPress Dashboard in der linken Menüleiste auf “Plugins”, sucht dann nach “H5P” und klickt auf das entsprechende Plugin, um es zu installieren. In vielen Lernplattformen ist das H5P-Plugin von der Systemadministration für die Bildungsinstitution bereits installiert oder man kann das entsprechende Adminteam darum bitten, die Installation vorzunehmen.

Eine englischsprachige Schritt-für-Schritt Anleitung zur Installierung von H5P-Plugins in verschiedene Content Management Systeme bzw. Lernplattformen findet man auf der H5P-Webseite.

Die Installation des entsprechenden Elementtyps

Nach der Installation des H5P-Plugins erscheint in der linken Menüleiste des WordPress Dashboards der Menüpunkt “HP5-Inhalt”. Wenn man dort auf “Erstellen” klickt, öffnet sich ein Menü mit den verschiedenen Typen von interaktiven H5P-Elementen. Dann kann man einen Elementtyp auswählen, z.B: Image-Hotspot für ein Bild mit anklickbaren Punkten mit Zusatzinformation. Bei der ersten Verwendung klickt man auf “Übernehmen”.und dann aiuf “Installieren”. Damit sind die technischen Voraussetzungen für die Erstellug des entsprechnden Elementtyps geschaffen.

Screenshot H5P-Optionen im Plugin für WordPress

Die Erstellung des interaktiven H5P-Elements

Sobald der entspechende Elementtyp aktiv ist, kann man ihn auf der Liste anklicken. Dann öffnet sich ein neues Menü, in dem man ein neues H5P-Element dieses Typs gestalten kann. Der folgende Screenshot zeigt einen Teil des Menüs für ein Hotspot-Bild, mit den Informationen zum Hintergrundbild und zum Format der Hotspots sowie den Informationen zum ersten Hotspot.

Screenshot zur Erstellung eines H5P-Hotspot-Bildes

Wenn alle Informationen in die entsprechenden Felder eingefügt worden sind, kann man rechts oben auf “Aktualisieren” klicken, um das H5P-Hotspot-Bild zu speichern. Man sieht dann das fertige Bild.

Wenn man seine bereits erstellten H5P-Elemente bearbeiten oder schauen möchte, welche Elmente man schon hat, kann man im WordPress Dashboard im linken Menü auf “H5P-Inhalt” und “Alle H5P-Inhalte” klicken. So gelant man zur Liste aller bereits erstellten H5P-Elemente und kann sie jeweils anklicken, um sie anusehen oder zu bearbeiten .

Ausführlichere englischsprachige Anleitungen zur Erstellung eines H5P-Hotspot-Bildes sowie zum Export von H5P-Elementen findet man auf der H5P-Webseite.

Die Einbettung des interaktiven H5P-Elements in eine Webseite

Zum Einfügen des gespeicherten H5P-Elements begibt man sich an die entspechende Stelle der zu bearbeitenden Webseite bzw. des zu bearbeitenden Blogbeitrags. In einer Lernplattform geht man zur Stelle in der betreffenden Veranstaltung. Dann verwendet man die Einfügeoption des betreffenden Content Management Systems (z.B. WordPress) bzw. der betreffenden Lernplattform, um das H5P-Element einufügen.

In WordPress findet man nach der Installation des H5P-Plugins bei der Erstellung von Seiten bzw. Blogbeiträgen am oberen Rand der Schreibfläche die Option “H5P hinzufügen”. Ein Klick darauf führt zur bereits erwähnten Liste aller bislang erstellten H5P-Elemente. Dort kann man dann das einzufügende Element durch einen Klick auswählen. Danach erscheint im Bearbeitungsfenster für die entsprechende Seite bzw. den entsprechenden Beitrag die Referenz auf das betreffende Element (ID). Wenn das Element z:B. das sechste Element aus der entsprechenden H5P-Element-Liste ist, findet man im Text für die Webseite bzw. den Blogbeitrag eckige Klammrern mit dem Inhalt “h5p id=”6″”. “id” steht dabei für die Identifkationsnummer des Elments auf der Liste. Damit ist das H5P-Element in den entsprechenden Text integriert und man kann es sich in der Vorschau für die Webseite oder den Blogbeitrag ansehen.

Man kann auch H5P-Elemente in Texte einfügen, die an einem anderen Ort bzw. von einer anderen Person erstellt wurden. Eine ausführlichere englischsprachige Anleitung zum Import von H5P-Elementen findet man auf der H5P-Webseite.

Die Verwendung von interaktiven Bildern oder Karten in Lernaktivitäten

Mit interaktiven Bildern oder Karten lassen sich vielfältige Lernaktivitäten für unterschiedliche Alters- oder Interessensgruppen gestalten. Dabei können Hotspot-Bilder bzw. Hotspot-Karten verschiedene Funktionen erfüllen:

Medium zur Informationsvermittlung
Um die Vermittlung von Informationen ansprechender zu machen und zusätzliche Erinnerungsstützen zu geben, kann man Bilder mit Hotspots anreichern und diese mit Zusatzinformationen über abgebildete Elemente anreichern. So sind alle Informationen miteinander verbunden und in ein gedächtnisstützendes Bild integriert. Anstatt eines Bildes kann man aber auch eine Landkarte mit Hotspots anreichern, z.B. um dort Informationen über einzelne Städte, Regionen, Flüsse oder Berge abzuspeichern und durch einen einfachen Klick abrufbar zu machen..
Gedächtnisstütze zur Reaktivierung und Verfestigung von Informationen
Wenn man Informationen mit Hotspot-Bildern bzw. Hotspot-Karten vermittelt hat, kann man zur Reaktivierung und Verfestigung von Informatonen später nur die Bilder bzw. Karten als Gedächtnissütze zeigen. Dann kann man die Lernenden bitten, sich an die Zusatzinformationen zu den einzelnen Hotspots zu erinnern und diese aus der Erinnerung heraus wiederzugeben. Danach kann man auf die entsprechenden Hotspots klicken und das Wiedergegebene mit der Hotspot-Information zu vergleichen.
Selbstaneignung und -überprüfung von Wissen
Wenn Lernende mit Hotspot-Bildern oder -Karten Wissen erworben haben, können sie dieses Wissen überprüfen, indem sie sich die Informationen angesichts des Bildes bzw. der Karte ins Gedächtnis rufen, und ggf. auf die Hotspots klicken, um die Richtigkeit ihrer Annahmen zu überprüfen. D.h., man kann Hotspot-Elemente wie Flashcards verwenden, aber in digitaler Form und im Zusammenhang mit einem gedächtnisstützenden und Verbindung herstellenden Gesamtbild. Wer ein solches Bild nicht braucht, findet digitale Flashcards übrigens auch auf der Liste der verfügbaren H5P-Elementtypen und kann sie so ohne Gesamtbild erzeugen.
Gelegenheit zum Lernen durch eigenes Recherchieren und Gestalten
Man kann Lernende auch dazu auffordern, selbst Informationen über die einzelnen Elemente eines Bildes oder Informationen zu bestimmten Punkten auf einer Karte zu finden. Danach können sie mit den recherchierten Informationen selbst Hotspots für ein neues H5P-Elment erstellen. Das so entstandene informationsreiche Hotspot-Element kann dann mit anderen teilen und einsetzen, um das eigene Wissens zu überprüfen und zu verfestigen.
Gelegenheit zum gemeinsamen Recherchiren und Gestalten
Wenn all Beteilgten Schreibrechte haben, können sie auch zusammen Hotspot-Elemente gestalten. So kann man z.B. eine Skizze mit dem Grundriss eines Schulgartens teilen und alle dürfen Pflanzvorschläge für bestimmte Orte machen, angereichert mit Text, Links, Bildern oder Videos.
Textarbeit
Man kann auch einen Text fotografieren und als Bild abspeichern und dann mit Hotspots versehen, auf die man klicken kann, um Zusatzinformationen zu einzelnen Wörtern, Phrasen, Sätzen oder Textpassagen zu erhalten. Gegenüber der Verwendung von Kommentaren an Text- oder pdf-Dokumenten hat die Verwendung von Hotspot-Text-Bildern den Vorteil, dass man in die einzelnen Kommentare auch Bilder und Videos integrieren kann. Zudem ist das Ergebnis optisch ansprechender als ein Text oder pdf-Dokument mit Kommentaren.
Sprachsensible Gestaltung von Lernmaterialien
Man kann mit Hotspot-Bildern auch Arbeitsblätter sprachsensibel gestalten, d.h. durch ensprechende Zusatzinformationen dafür sorgen, dass die Fachinhalte für Lernende mit unterschiedlichen sprachlichen Fähigkeiten zugänglich sind und sie in die Lage versetzt werden, sich darüber auszutauschen. Insbesondere kann man Arbeitsblätter als Foto abspeichern und Hotspots bei schwierigen Wörtern anlegen. Dann kann man dort Zusatzinformationen wie Definitionen oder Angaben zu grammatischen Phänomenen machen. Beispielsweise kann man angeben, mit welchem Artikel (der, die oder das) ein Wort verwendet wird oder zu welchem Verb eine unregelmäßige Form wie gesungen gehört. Für weniger weit fortgeschrittene Lernende kann man auch Wörter durch Hotspots mit entsprechenden Bildern ergänzen, um das Verständnis sicherzustellen. Die Verwendung von Hotspots hat den Vorteil, dass man die Zusatzmaterialien nicht auf dem eigentlichen Arbeitsblatt sieht, sondern nur bei individuellem Bedarf auf den entsprechenden Hotspot klickt. So bleibt der Überblick gewahrt.
Die Unterstützung von mehrsprachigen Gruppen durch Übersetzungen
Man kann H5P-Elementen auch Computerübersetzungen für verschiedene Sprachen hinzufügen, um so das Lernen in mehrsprachigen Gruppen (oder im Sprachunterricht) zu unterstützen. Eine Anleitung dazu findet man auf der Open Educatonal Resources Webseite.

Weitere Informationen, Anleitungen, Tipps und (YouTube-) Videos zu H5P

Auf der H5P-Webseite findet man viele Hintergrundinformationen, Tutorials, Anleitungen, Nutzungsbeispiele und weitere Tipps (in Englisch):
https://h5p.org/.
H5P-Plugins und andere Materialien können vom Github-Archiv von H5P heruntergeladen werden:
https://github.com/h5p
VIdeos zu H5P und H5P-Anwendungen für offene Bildungsinhalte findet man auf der YouTube Playliste “Open Educational Resources (OER, offene Bildungsinhalte) & H5P”:
https://www.youtube.com/playlist?list=PLH154CD6dg-va37wSeGBpqwW5c8GW6RqR.
Der Moodlekurs “Erste Schritte in H5P” der Universität Duisburg-Essen ist für Gäste nach kostenloser Registrierung frei zugänglich.
https://moodle.uni-due.de/course/view.php?id=11029
Der Landesbildungsserver Baden-Württemberg bietet eine Liste mit interaktiven H5P-Übungen.
https://www.schule-bw.de/themen-und-impulse/medienbildung/interaktiv
Die Seite “Was ist OER?” bietet eine Liste mit ihren Top 200 Quellen für freie Bildungsmaterialien, darunter auch H5P-Elemente und Bilder oder Videos, mit denen man solche Elemente gestalten kann.
https://www.was-ist-oer.de/top200/
Auf dem Sprachspinat-Blog gibt es bereits eine Liste mit Online-Ressourcen zur Bildung für nachhaltige Entwicklung (BNE). Viele dieser Ressourcen sind OERs, andere sind Datenbanken oder Webseiten, mit denen man gezielt nach OERs suchen kann. Hier kann man gezielt nach H5P-Elementen zu diesem Thema suchen – oder Bildmaterialien und Arbeitsblätter finden, die man dann mit Hotspots anreichern kann,

Mein persönlicher Sprachspinat-Tipp

Wie dieser Blogbeitrag gezeigt hat, sind interaktive Hotspot-H5P-Bilder für Lernaktivitäten recht einfach zu erstellen bzw. in Internetseiten oder Lernplattformen einbauen. Man kann sie jederzeit verändern und an neue (Lern-) Kontexte anpassen und mit anderen teilen. Wer mehr zum Teilen von Bildungsmaterialien oder zur Verwendung von frei zugänglichen Bildungsmaterialien im H5P-Format und in anderen Formaten wissen möchte, findet weitere Informationen in einem Sprachspinat-Blogbeitrag zum Thema Open Educational Resources sowie in weiteren Beiträgen mit dem Tag “OERs”

Ich persönlich find es aber am inetressantesten, Lernnde selbst H5P-Elemente erstellen zu lassen oder sie zumindest an ihrer Erstellung zu beteiligen. Selbst jüngere Kinder können mit einem Handy oder Tablet Fotos machen oder selbst Bilder malen, die man dann fotografiert. So kann man z.B. zusammen den Garten fotografieren und dann Informationen zu Pflanzen in Bilder integrieren. Für Lerngruppen mit älteren Kindern oder Erwachsenen kann man auch gemeinsam eine Dokumentaton eines Schul- oder Gemeinsaftsgartens erstellen. Das Beispiel in diesem Blogbeitrag stammt übrigens aus einem Projekt der “essbaren Stadt” Köln, für das wir zusammen mit dem Jugendzentrum, dem Seniorennetzwerk und Menschen aus der Nachbarschaft einen Veedelsgarten in Köln Weiden anlegen, in dem Ideen aus dem Sprachspinat-Garten-Konzept praktisch umgesetzt werden.