{"id":571,"date":"2021-04-18T12:07:13","date_gmt":"2021-04-18T12:07:13","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=571"},"modified":"2024-06-24T17:33:33","modified_gmt":"2024-06-24T17:33:33","slug":"interaktive-erklaerungen-mit-h5p-image-hotspots","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/interaktive-erklaerungen-mit-h5p-image-hotspots\/","title":{"rendered":"Interaktive Erkl\u00e4rungen mit H5P Image Hotspots"},"content":{"rendered":"<p>Immer wieder steht man als Lehrperson vor der Aufgabe, Anleitungen zu verschiedenen Softwareanwendungen zu schreiben. Dabei steht man dann vor der Entscheidung, ob man ein entsprechendes Tutorial verfasst oder ein Video aufnimmt.<\/p>\n<p>Tutorials lassen sich zwar mit einem vergleichsweisen geringen Aufwand schreiben, f\u00fcr Lernende kann es aber eine Herausforderung sein, sich darin zurechtzufinden. Videos sind meist einfacher nachzuvollziehen, daf\u00fcr sind sie in der Herstellung aufw\u00e4ndiger und m\u00fcssen bei Aktualisierungen der Software unter Umst\u00e4nden neu gedreht werden.<\/p>\n<p>Einen Ausweg aus diesem Dilemma bietet H5P Image Hotspots, weil damit Anleitungen modular geschrieben werden k\u00f6nnen. Ausserdem lassen so geschriebene Anleitungen den Lernenden die Wahl, mit welchem Aspekt sie sich zuerst besch\u00e4ftigen wollen.<\/p>\n<h2>Beispiel: Snap!-Editor<\/h2>\n<p>Am Beispiel der blockbasierten Programmierumgebung Snap! soll gezeigt werden, was mit H5P Hotspots m\u00f6glich ist. Die Darstellung der einzelnen Informationspunkte ist in Moodle besser gel\u00f6st als in WordPress, wo diese vergleichsweise (zu) gross angezeigt werden.<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-37\" class=\"h5p-iframe\" data-content-id=\"37\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Die Oberfl\u00e4che von Snap!\"><\/iframe><\/div>\n<p>Mit H5P Image Hotspots lassen sich also problemlos Texte, Bilder und Video kombinieren. Den Lernenden wird die Orientierung erleichtert, weil sie die Anleitung zu den Elementen dort finden, wo sie in der Software aufgerufen werden k\u00f6nnen.<\/p>\n<h2>Erstellen eines Lernobjekts mit H5P Hotspots<\/h2>\n<p>Nachdem man die Aktivit\u00e4t &#8222;Image Hotspots&#8220; ausgew\u00e4hlt hat, l\u00e4dt man zuerst ein passendes Bild, z.B. der Benutzeroberfl\u00e4che von Snap! hoch.<\/p>\n<figure id=\"attachment_573\" aria-describedby=\"caption-attachment-573\" style=\"width: 589px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-573\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot02.png\" alt=\"\" width=\"589\" height=\"157\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot02.png 589w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot02-300x80.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><figcaption id=\"caption-attachment-573\" class=\"wp-caption-text\">\u00dcber die entsprechende Schaltfl\u00e4che kann man ein Hintergrundbild f\u00fcr das Lernobjekt hochladen.<\/figcaption><\/figure>\n<p>Ist dies geschehen, kann man einen schon bestehenden Hotspot definieren oder \u00fcber die Schaltfl\u00e4che &#8222;Add Hotspot&#8220; einen neuen generieren.<\/p>\n<figure id=\"attachment_574\" aria-describedby=\"caption-attachment-574\" style=\"width: 589px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-574\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot03.png\" alt=\"\" width=\"589\" height=\"825\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot03.png 589w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot03-214x300.png 214w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><figcaption id=\"caption-attachment-574\" class=\"wp-caption-text\">Zu einem bestehenden Hintergrundbild k\u00f6nnen beliebig viele Hotspots hinzugef\u00fcgt werden.<\/figcaption><\/figure>\n<p>Dazu legt man zuerst die Zielposition des neuen Hotspots fest, dabei hilft unter Umst\u00e4nden ein Klick auf die Lupe unter dem Bild, welches dieses vergr\u00f6ssert und damit eine genauere Positionierung erlaubt.<\/p>\n<p>\u00dcber die Schaltfl\u00e4che &#8222;Cover entire background image&#8220; kann man festlegen, wie viel Platz sich \u00f6ffnende Fenster einnehmen. Der &#8222;Header&#8220; dient als \u00dcberschrift dieser Fenster.<\/p>\n<p>Anschliessend hat man die Wahl zwischen drei verschiedenen Inhalten: Text, Video und Bild. Diese lassen sich \u00fcber die Schaltfl\u00e4che &#8222;Add item&#8220; auch kombinieren, somit wird eine beliebige Abfolge von solchen Elementen m\u00f6glich.<\/p>\n<p>Wird der Typ Text gew\u00e4hlt, \u00f6ffnet sich ein einfacher Editor, mit dem ein zu erstellender oder bereits vorhandener Text bearbeitet werden kann.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-575\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot04.png\" alt=\"\" width=\"535\" height=\"427\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot04.png 535w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot04-300x239.png 300w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><\/p>\n<p>M\u00f6chte man ein Element wieder l\u00f6schen, klickt man auf das &#8222;x&#8220; oben rechts im Dialog und best\u00e4tigt die entsprechende R\u00fcckfrage. Diese erscheint auch dann, wenn man den Typ, beispielsweise zu Video wechselt.<\/p>\n<figure id=\"attachment_576\" aria-describedby=\"caption-attachment-576\" style=\"width: 544px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-576\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot05.png\" alt=\"\" width=\"544\" height=\"706\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot05.png 544w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2021\/04\/hotspot05-231x300.png 231w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><figcaption id=\"caption-attachment-576\" class=\"wp-caption-text\">F\u00fcr das Videoelement k\u00f6nnen lokal gespeicherte Videos oder Aufnahmen von YouTube verwendet werden.<\/figcaption><\/figure>\n<p>Um ein Video hinzuzuf\u00fcgen, klickt man auf die gestrichelt umrahmte Schaltfl\u00e4che mit dem Plus in der Mitte. Anschliessend kann man entweder ein lokales Video hochladen oder den Link zu einem YouTube-Video einf\u00fcgen.<\/p>\n<p>Die Feineinstellung erfolgt dann \u00fcber die weiteren Optionen:<\/p>\n<ul>\n<li>Visuals<br \/>\nHier kann ein Vorschaubild eingef\u00fcgt werden und bestimmt werden, wie der Videoplayer in der Aktivit\u00e4t angezeigt wird.<\/li>\n<li>Playback<br \/>\nHier kann man einstellen ob ein Video direkt und evt. wiederholt abgespielt wird. In der Regel sollte man beide Optionen nicht aktivieren, da es viele Nutzer nicht sch\u00e4tzen, wenn pl\u00f6tzlich irgendwo ein Video abgespielt wird.<\/li>\n<li>Accessibility<br \/>\nHier k\u00f6nnen Untertitel im <a href=\"https:\/\/en.wikipedia.org\/wiki\/WebVTT\" target=\"_blank\" rel=\"noopener\">WebVTT-Format<\/a> hinzugef\u00fcgt werden. Untertitel von YouTube-Videos stehen automatisch zu Verf\u00fcgung.<\/li>\n<\/ul>\n<h2>Verwendung im Unterricht<\/h2>\n<p>H5P Image Hotspots kann nicht nur verwendet werden, um Lernende in die Oberfl\u00e4che von Softwareanwendungen einzuf\u00fchren. Der Aufgabentyp eignet sich allgemein daf\u00fcr, Bildmaterial mit zus\u00e4tzlichen Informationen anzureichern und hilft damit, den Blick der Lernenden auf wesentliche Details zu lenken.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Immer wieder steht man als Lehrperson vor der Aufgabe, Anleitungen zu verschiedenen Softwareanwendungen zu schreiben. Dabei steht man dann vor der Entscheidung, ob man ein entsprechendes Tutorial verfasst oder ein Video aufnimmt. Tutorials lassen sich zwar mit einem vergleichsweisen geringen Aufwand schreiben, f\u00fcr Lernende kann es aber eine Herausforderung sein, sich darin zurechtzufinden. Videos sind &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/gigers.com\/blog\/interaktive-erklaerungen-mit-h5p-image-hotspots\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eInteraktive Erkl\u00e4rungen mit H5P Image Hotspots\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-571","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":4,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/571\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/571\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}