# we are makers #21 H5P - Lernorte interaktiv Dokumentation ![](http://www.medialepfade.org/wp-content/uploads/2018/03/wearemakers21_H5P.jpg) ## Linksammlung: [Qoop Uni Potsdam](http://www.uni-potsdam.de/qoop/) [edulabs](https://edulabs.de) [Mozilla Web Literacy](https://learning.mozilla.org/en-US/web-literacy) [Mozilla Thimble](https://thimble.mozilla.org/) [A-Frame](https://aframe.io) [H5P](https://h5p.org/) [bewegtbildung.net](http://www.bewegtbildung.net/) --- ## H5P [H5P](https://h5p.org/) ist eine Open-Source-Software zum Erstellen von interaktiven Inhalten/Lerninhalten im und für das Internet. Als Alternative für Flash-basierte Anwendungen entwickelte die Norwegian Digital Learning Arena (NDLA) dieses Tool, welches sich HTML5 zunutze macht. Neben interaktiven Videos, Zeitstrahlen und Quizze lassen sich vielfältige Inhalte generieren. Weitere Hintergrundinfos gibt es [hier](https://de.wikipedia.org/wiki/H5P). ### H5P-Ergebnisse einbinden H5P lässt einen relativ einfach die erstellten Inhalte in Wordpress und Co. einbauen. Das geht bei Wordpress, Drupal und Moodle mit Hilfe von Plugins oder einfacher mit einem [iframe](https://de.wikipedia.org/wiki/Inlineframe). Diesen kann man im Ansichtmodus unterhalb des Videos/der Timeline etc. mit einem Klick auf **<> embed** aufrufen, dort kann man auch die Abmaße des Videos o.ä. einstellen. ### Timeline Hier zum Beispiel mal eine eingebaute **Timeline** mit (nur) 3 Einträgen und eine Ära (oranger Zeitraum): <iframe src="https://h5p.org/h5p/embed/227205" width="728" height="630" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> ***Tipp:*** Bei der Timeline nur die Breite, aber nicht die Höhe ändern! Sonst werden Teile ausgeblendet und man hat einen unschönen Scrollbalken rechts. ### Video Und hier ein kleines **Videobeispiel** mit diversen Interaktionen: <iframe src="https://h5p.org/h5p/embed/227241" width="729" height="465 " frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> <iframe src="https://h5p.org/h5p/embed/227220" width="729" height="465 frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> --- ***Zusatz-Tipp:*** Da die Frage aufkam, wie man denn weiß, welche Größe bzw. Breite die einzubindenen Inhalte haben sollten, wollen wir auf den Entwicklermodus hinweisen, der in Mozilla Firefox, Google Chrome, Vivaldi und anderen Browsern per **F12** erreichbar ist. So schaut das dann aus: ![](https://i.imgur.com/87xrjIB.jpg) --- ## Auswertung: ### **H5P** * geradlinige Webvideoinhalte können unterbrochen werden und man kann bspw. gut Wissen abfragen * flipped classroom super für den Schuleinsatz (Hausaufgaben etc.) * Einbettung ins LMS (Lehrmanagementsystem) funktioniert super * Frage der Ergebniskontrolle: "Notlösung" Screenshot * Tutorialvideos * schwierige Inhalte könnten mit Beispielvideos super vermittelt werden * interaktive Videos, nicht mehr lineare Nuzung notwendig * Koordination von Interaktionselement und Videoverlauf/-inhalt (Phasierung, Pausen für interaktive Elemente einbauen) * einziges gr. Manko der ganzen Suite: kein kolloboratives Arbeiten möglich - dafür bedarf es Extratools wie [hackmd.io](https://hackmd.io/) und Etherpads. ### **moz://a** Mozilla Learnings bietet **zwei gute Tools** um das Aufsetzen, Programmieren, Getalten von Webs https://thimble.mozilla.org/de **Online-Quelltext-Editor**, mit dem ganz einfach eigenen Webseiten erstellen und veröffentlichen können. Gleichzeitig kann HTML, CSS & JavaScript erlernt werden. Es gibt auch die Möglichkeit, einfache Projekte zu modifizieren, um loszulegen und zu verstehen. https://goggles.mozilla.org Mit diesem Tool, das man sich in die Toolbar des eigenen Browsers einbindet, können Elemente einer Webseite untersucht und live verändert werden. Es bietet viele Möglichkeiten um sich kreativ verschiedenen Thema einer zeitgemäßen Medienbildung zu widmene: - Online-Journalismus/Quellen/ Glaubwürdigkeitskriterien - Teilehabe/Hacks/Aktivismus - Remix/Urherberrecht zu widmen. Unter https://learning.mozilla.org/en-US/activities finden sich zahlreiche Workshop-Ideen mit sehr detailierten Abläufen. Geeignet sind die Materialien für Kinder ab ca. 10 Jahre. Alle Materialien sind au englisch können aber, da sie unter einer offenen Lizenz stehen sehr gern ins Deutsche übersetzt und veröffentlicht werden. --- Da es beim Treffen in der Abschlußrunde große Begeisterung hervorgerufen hat, wollen wir abschließend noch auf das kostenfreie Virtual Reality Tool [A-Frame](https://aframe.io/) von Mozilla hinweisen, mit dem man relativ einfach per HTML VR-Inhalte erstellen kann. Diese sind dann per Vive, Rift, Daydream, GearVR oder auf dem Desktop-PC nutz- und anschaubar. Weitere Informationen dazu gibt es hier: https://mixedreality.mozilla.org Ein ersten Eindruck über die Möglichkeiten von A-Frame gibt es hier: <iframe width="729" height="410 " src="https://www.youtube.com/embed/1MskH9uqOyQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> --- --- <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br/><p>Inhalte dieses Materials sind, sofern nicht anders angegeben, nach <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons 4.0</a> Attribution lizenziert.</p> --- ### Impressum <summary></summary> <details>Verantwortlich für den Inhalt dieser Seite: [mediale pfade.org – Verein für Medienbildung e.V.](https://)(http://www.medialepfade.org/kontakt/) kontakt@medialepfade.org Sitz: Oranienstr. 19a 10999 Berlin Deutschland </details>