Autorinnen: Lisa Sommer und Leonora Zullufi
Im Gegensatz zum statischen Content wird bei interaktiven Inhalten der dynamische Content herangezogen. Das heißt, dass es nicht nur gewöhnliche Texte zum Lesen gibt oder Bilder nur betrachtet werden. Bei interaktiven Inhalten wird der Benutzer auch aktiv in das Geschehen eingebunden. Dadurch wird die Aufmerksamkeit erregt und gewonnen. Daher steigt auch die Motivation sich mit den Inhalten des jeweiligen Themas auseinanderzusetzen. Doch wie kommen diese interaktiven Inhalte zustande? Dafür ist es wichtig zu verstehen, was H5P ist, was es anbietet und wie es funktioniert.
Was ist H5P?
- Optimierung Ihrer Website mit H5P
- Mobilfreundlicher Inhalt
- Reichhaltige Inhalte teilen
- Kostenlos zu verwenden
- Vorteile von H5P
Anwendungsmöglichkeiten
- Arten der H5P-Einbettung
- Content Typen
H5P in Moodle einfügen
- Plug-ins einfügen
- Erstellen einer H5P Aktivität
Was ist H5P?
In den letzten Jahren hat H5P zunehmend an Bedeutung gewonnen. Dabei handelt es sich um eine Open-Source-Software, die von der Firma Joubel im Jahr 2013 im Auftrag der NDLA (“Norwegian Digital Learning Arena”) entwickelt wurde. Für den Einsatz in (Hoch-)Schulen bietet H5P seit einigen Jahren einen kostenpflichtigen Hosting-Dienst mit zusätzlichen hochwertigen Funktionen an. Diese sind auch für den Einsatz in der Firmenumgebung interessant.
H5P basiert auf modernen Standards wie HTML5, CSS3 und Javascript. Der H5P-Kern ist dabei teils in Javascript, teils in einer Server-spezifischen Programmiersprache wie z. B. PHP geschrieben. Da aber die meisten Funktionalitäten aus Javascript stammen, ist der Teil des H5P-Cores, der portiert werden muss, so klein wie möglich gehalten. H5P kann somit auf unterschiedliche Web-Publishing-Systeme portiert und mit vorhandenen LMS („Lern-Management-Systemen“), wie Moodle, Totara, WordPress oder Drupal, integriert werden. Mittlerweile bieten auch proprietäre LMS, wie etwa Neon LMS, eine H5P-Integration.[1]
Optimierung Ihrer Website mit H5P
H5P macht es einfach, HTML5-Inhalte und -Anwendungen zu erstellen, teilen und wiederverwenden. H5P ermöglicht es jedem, reichhaltige und interaktive Weberlebnisse effizienter zu gestalten– alles, was Sie dazu benötigen, ist ein Webbrowser und eine Website mit einem H5P-Plug-in.[2]
Mobilfreundlicher Inhalt
H5P-Inhalte sind reaktionsschnell und mobilfreundlich. Das bedeutet, dass Benutzer auf Computern, Smartphones und Tablets dieselben reichhaltigen interaktiven Inhalte erleben.[2]
Reichhaltige Inhalte teilen
H5P ermöglicht es bestehenden CMS und LMS, reichhaltigere Inhalte zu erstellen. Mit H5P können Autoren interaktive Videos, Präsentationen, Spiele, Werbung und mehr erstellen und bearbeiten. Inhalte können importiert und exportiert werden. Zum Anzeigen oder Bearbeiten von H5P-Inhalten wird lediglich ein Webbrowser benötigt. H5P-Inhaltstypen und -Anwendungen werden auf H5P.org geteilt. Sie können auf jeder H5P-fähigen Website wie H5P.com oder Ihrer eigenen Drupal- oder WordPress-Website, mit installiertem H5P-Plug-in, erstellt werden.[2]
Kostenlos zu verwenden
H5P ist eine völlig kostenlose und offene Technologie, lizenziert mit der MIT-Lizenz. Demos/Downloads, Anleitungen und Dokumentationen sind für Benutzer verfügbar, die der Community beitreten möchten.[2]
Vorteile von H5P
- H5P ist kostenlos verfügbar
- H5P ist eine Open-Source-Software und ein Community-Projekt, – jeder kann mitmachen
- Keine Programmierkenntnisse notwendig – dank des intuitiven H5P-Editors und der zahlreichen Anleitungen auf H5P.org ist das Erstellen von interaktiven Inhalten kinderleicht
- Mehr als 40 Inhaltstypen – und es werden ständig mehr
- H5P Inhalte können mit anderen geteilt und wiederverwendet werden
- Responsives Design – Interaktionen passen sich allen Endgeräten an
Anwendungsmöglichkeiten
Arten der H5P-Einbettung
- Die erste Möglichkeit, H5P einzubetten ist, indem man den Inhalt auf H5P.com erstellt und ihn direkt in die gewünschte Seite einbettet oder über einen direkten Link darauf zugreift.
Dafür wird kein LMS benötigt.[3] - H5P.com ist eine SaaS-Lösung (“Software-as-a-Service”), das sind cloudbasierte Anwendungen, die über den Webbrowser aufgerufen werden können.[4]
Über LTI („Learning-Tools-Interoperability“) können externe Tools, Inhalte und Aktivitäten, die online verfügbar sind, in LMS eingebunden werden. [5]
Beispiele dafür sind Moodle LTI Integration, Canvas LTI Integration, Brightspace LTI Integration und Blackboard LTI Integration.
H5P.com kann mit fast allen LMS und Systemen, die LTI unterstützen, verwendet werden.[3] - Wenn man H5P selbst hosten möchte, ist dies durch die Verwendung kostenfreier Plug-ins möglich. Offizielle Plug-ins liegen für Drupal, WordPress, und Moodle vor.
Es liegen aber von der Community erstellte Plug-ins für weitere Plattformen vor. [3]
Content Typen[6]
Interaktives Video[c]
Erstellen Sie Verzweigungen, um verschiedene Aufgabentypen in Ihre Videos einbauen können.
Drag-and-drop
Drag-and-drop Aufgaben ermöglichen es, Inhalte miteinander in Verbindung zu setzen.
Multiple-Choice-Aufgaben[d]
Multiple-Choice-Aufgaben sind besonders gut zur Verständnis-Kontrolle geeignet.
Interaktive Grafiken[e]
Es gibt viele verschiedene Möglichkeiten, Grafiken mit H5P interaktiv zu gestalten. Hier sehen Sie die Gegenüberstellung zweier Bilder.
Viele weitere Anwendungen für H5P und die passenden Anleitungen finden Sie unter „Examples and Downloads“.
H5P in Moodle einfügen
Erstellen einer H5P-Aktivität
Achtung, dies ist nur möglich, wenn Sie als Administrator oder als Benutzer angemeldet sind, denn zum Erstellen einer H5P-Aktivität müssen Sie die Berechtigung in dem entsprechenden Kurs haben.
Gehen Sie zu dem Kurs, in den Sie einen H5P-Inhalt hinzufügen möchten. Es sollte sich ein Fenster öffnen, in das Sie Aktivitäten oder Ressourcen hinzufügen können. Dort klicken Sie auf den Plus-Button. Es öffnet sich ein weiteres Fenster, in dem Sie Aktivitäten oder Ressourcen hinzufügen können. Dort klicken Sie auf „H5P“ in der Kategorie „interaktiver Inhalt“ und fügen diese hinzu. Daraufhin müssen Sie einen Inhaltstypen auswählen, um den H5P-Hub zu öffnen. Sobald sich dieser öffnet, können Sie aus mehreren Inhaltstypen entscheiden, welchen Sie einbauen möchten. Nachdem Sie sich einen ausgesucht haben, rufen Sie ihn auf, wodurch Sie auf die Detailseite des Inhaltstypen gelangen. Dort können Sie die Einzelheiten zu beliebigen Inhaltstypen nachlesen.
Um einen Inhaltstypen zu installieren, müssen Sie rechts daneben auf „Installieren“ klicken. Sobald der Inhaltstyp installiert ist, ist er bereit, eingesetzt zu werden. Sobald Sie nun auf „Verwenden“ klicken, öffnet sich direkt der Editor. Wenn Updates zur Verfügung stehen, werden Sie darüber informiert.
Im H5P-Hub können Sie vorhandene H5P-Inhalte hochladen. Klicken Sie dazu oben auf die Registerkarte „Hochladen“. Sie müssen dann nur noch den Vorgang beenden und Ihre Aktivitäten abspeichern.[7]
Zusammenfassend kann man sagen, dass H5P eine cloudbasierte Anwendung ist, die durch entsprechende Plug-ins in verschiedensten Webseiten integriert werden kann. Dazu zählen auch LMS („Lern-Management-Systeme“).
Lehrende können interaktive Videos, Präsentationen, Spiele und mehr verwenden, um Inhalte zu vermitteln oder übersichtlich darzustellen.
Literaturverzeichnis
[1] Ravalli, Paulo (2021): Apps für Fachexperten: Betriebliches Lernen mit H5P. Online unter https://link.springer.com/content/pdf/10.1007/s43443-021-0316-6.pdf [Abruf am 31.01.2022]
[2] H5P: Erstellen, teilen und verwenden Sie interaktive HTML5-Inhalte in Ihrem Browser. Online unter https://h5p.org/ [Abruf am 31.01.2022]
[3] H5P (2022): Integrations. Online unter https://h5p.org/integrations#integrations [Abruf am 31.01.2022]
[4] Beyer, Jakob (2022): SaaS – die anwenderfreundliche Ebene des Cloud-Computings. Zuletzt aktualisiert am 08.04.2019. Online unter https://www.bilendo.de/library/saas-loesung-definition [Abruf am 31.01.2022]
[5] Verdaguer, Júlia (2021): Was ist LTI und wie kann es Ihr Lernökosystem verbessern? Zuletzt aktualisiert am 17.02.2021. Online unter https://moodle.com/de/news/was-ist-lti-und-wie-es-kann-ihr-lern-okosystem-verbessern/ [Abruf am 31.01.2022]
[6] H5P: Examples and Downloads. Online unter https://h5p.org/content-types-and-applications [Abruf am 31.01.2022]
[7] H5P: Set up H5P for Moodle. Online unter https://h5p.org/moodle [Abruf am 31.01.2022]
Bilderquellen
[Beitragsbild] https://eabyas.com/wp-content/uploads/2019/11/H5P-integration.jpg [Abruf am 31.01.2022]
[b] https://d2be3atgmh2lyq.cloudfront.net/wp-content/uploads/2020/07/h5p-hero-image.png [Abruf am 31.01.2022]
[c] https://elements.envato.com/de/asian-working-businesswoman-talk-to-colleagues-tea-BG5CB9U [Abruf am 31.01.2022]
[d] https://www.pexels.com/de-de/foto/selektive-fokusfotografie-von-octopus-3046629/ [Abruf am 20.02.2022] [e] https://www.pexels.com/de-de/foto/architektur-bau-bekannt-beruhmt-149419/ und https://www.pexels.com/de-de/foto/eiffelturm-wahrend-der-nacht-3879071/ [Abruf am 20.02.2022]
[f] https://h5p.org/moodle [Abruf am 31.01.2022]