{"id":828,"date":"2022-07-28T07:02:46","date_gmt":"2022-07-28T07:02:46","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=828"},"modified":"2024-06-24T17:33:33","modified_gmt":"2024-06-24T17:33:33","slug":"ein-bild-kommentieren","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/ein-bild-kommentieren\/","title":{"rendered":"Ein Bild kommentieren"},"content":{"rendered":"<p>In Moodle k\u00f6nnen Einzelpersonen Bilder mit der H5P-Aktivit\u00e4t <a href=\"https:\/\/h5p.org\/image-hotspots\" target=\"_blank\" rel=\"noopener\">Image Hotspots<\/a> kommentieren. Bei der im Auftrag von <a href=\"https:\/\/www.zum.de\/portal\/ziele\/\" target=\"_blank\" rel=\"noopener\">zum.de<\/a> weiterentwickelten Version <a href=\"https:\/\/www.zum.de\/portal\/neuer-h5p-inhaltstyp-auf-zum-apps\/\" target=\"_blank\" rel=\"noopener\">Image Hotspots Erweiterung<\/a> k\u00f6nnen sogar interaktive Elemente eingebaut werden. Diese Werkzeuge erlauben es jedoch nur jeweils einer Person, Anmerkungen zu einem Bild vorzunehmen.<\/p>\n<p>Die hier vorgestellte Datenbankvorlage &#8222;Bild kommentieren&#8220; soll deshalb diese Werkzeuge nicht ersetzen, sondern das gemeinsame Annotieren eines Bildes erm\u00f6glichen.<\/p>\n<h2>Demonstration der Datenbank &#8222;Bild kommentieren&#8220;<\/h2>\n<p>Die Grundfunktionen der Datenbank &#8222;Bild kommentieren&#8220; sollen in einem kurzen Video vorgestellt werden:<\/p>\n<div style=\"width: 525px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-828-1\" width=\"525\" height=\"295\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/datenbank_bild_kommentieren_klein.mp4?_=1\" \/><a href=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/datenbank_bild_kommentieren_klein.mp4\">https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/datenbank_bild_kommentieren_klein.mp4<\/a><\/video><\/div>\n<p>Im Video wird das Aquarell &#8222;<a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Michael_Zeno_Diemer,_Romanshorn_Hafen.jpg?uselang=de\" target=\"_blank\" rel=\"noopener\">Romanshorner Hafen<\/a>&#8220; von Michael Zeno Diemer von 1907 gezeigt.<\/p>\n<p>In den verschiedenen Ansichten stehen folgende Funktionen zu Verf\u00fcgung:<\/p>\n<ul>\n<li>Einzelansicht: Die Einzelansicht dient dazu, neue Bildkommentare zu erfassen. Diese k\u00f6nnen auch multimediale Elemente enthalten. Um einen neuen Eintrag vorzunehmen, klickt man zuerst auf die gew\u00fcnschte Stelle im Bild, um die passenden Koordinaten zu erhalten, dann auf &#8222;Eintrag hinzuf\u00fcgen&#8220;. Es lohnt sich, f\u00fcr die Eintr\u00e4ge entsprechende Farben zu vergeben, da Punkte in der Standardeinstellung &#8222;Schwarz&#8220; auf einigen Bildern nur schwer zu erkennen sind.<\/li>\n<li>Listenansicht: In der Listenansicht k\u00f6nnen die bereits bestehenden Bildpunkte angeklickt werden, worauf die zugeh\u00f6rigen Inhalte unterhalb des Bildes angezeigt werden. Die jeweils erste Audio- oder Videodatei eines solchen Beitrages wird automatisch abgespielt. Klickt man auf eine Stelle ohne Eintrag, wird nachgefragt, ob ein neuer Eintrag erstellt werden soll, was auch in der Listenansicht m\u00f6glich ist.<\/li>\n<li>Eintrag hinzuf\u00fcgen: In der entsprechenden Ansicht k\u00f6nnen die eigentlichen Eintr\u00e4ge vorgenommen werden. Dabei k\u00f6nnen die in Moodle \u00fcblicherweise zu Verf\u00fcgung stehenden Elemente in den Kommentar eingebunden werden. Nebst der Wahl der Punktfarbe kann ein Eintrag auch einer Kategorie zugeordnet werden, was sp\u00e4ter ein gezieltes Suchen oder Anzeigenlassen von Kommentaren der Lernenden erm\u00f6glicht.<\/li>\n<li>Erweiterte Suche: \u00dcber die erweitere Suche k\u00f6nnen die vorhandenen Eintr\u00e4ge wie in der Datenbankaktivit\u00e4t allgemein \u00fcblich, nach verschiedenen Kriterien gefiltert werden.<\/li>\n<\/ul>\n<figure id=\"attachment_833\" aria-describedby=\"caption-attachment-833\" style=\"width: 847px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-833\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/Bild_2022-07-28_085244137.png\" alt=\"\" width=\"847\" height=\"781\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/Bild_2022-07-28_085244137.png 847w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/Bild_2022-07-28_085244137-300x277.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/Bild_2022-07-28_085244137-768x708.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-833\" class=\"wp-caption-text\">In der Listenansicht werden die Kommentare angezeigt, wenn man auf die entsprechenden Bildpunkte klickt.<\/figcaption><\/figure>\n<p>Falls Audio- oder Videodateien nicht richtig angezeigt werden, sollte man die entsprechenden Filter in der Datenbank deaktivieren.<\/p>\n<h2>Installation in der eigenen Moodle-Instanz<\/h2>\n<p>Die Datenbank kann \u00fcber eine <a href=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2022\/07\/Datenbank-Bild-kommentieren-preset-20220728_0611.zip\" target=\"_blank\" rel=\"noopener\">Vorlage<\/a> oder eine Sicherung der Datenbank als <a href=\"http:\/\/www.gigers.com\/matthias\/moodledateien\/Datenbank_Bild_kommentieren.mbz\" rel=\"noopener\">MBZ-Datei<\/a> in der eigenen Moodle-Instanz installiert werden.<\/p>\n<p>Falls der Weg \u00fcber die Vorlage gew\u00e4hlt wird, muss man anschliessend \u00fcber Einstellungen noch einige Angaben in der HTML-Ansicht erg\u00e4nzen, damit die Datenbank auch funktioniert:<\/p>\n<pre>&lt;p dir=\"ltr\" style=\"text-align: left;\"&gt;<span style=\"color: #339966;\"><strong>Was kannst du auf dem historischen Bild vom Romanshorner Hafen alles entdecken?<\/strong><\/span>&lt;\/p&gt;\r\n&lt;div style=\"overflow-x: hidden;\"&gt;\r\n&lt;div id=\"annotateImage\" width=\"<strong><span style=\"color: #0000ff;\">100%<\/span><\/strong>\" style=\"max-width:<strong><span style=\"color: #0000ff;\">100%<\/span><\/strong>;min-width:<span style=\"color: #0000ff;\"><strong>100%<\/strong><\/span>;\"&gt;\r\n&lt;canvas onclick=\"mousePosition(event)\" id=\"pictureCanvas\"&gt;&lt;\/canvas&gt;\r\n&lt;\/div&gt;\r\n&lt;div style=\"max-width:99%;min-height:10em;margin-top:0.5em;\" id=\"belowImage\"&gt;<span style=\"color: #339966;\"><strong>Hier erscheinen die Mitteilungen zu den einzelnen Eintr\u00e4gen.<\/strong><\/span>&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\nimage_element = document.querySelector(\"#annotateImage\")\r\n\r\n\/\/ https:\/\/stackoverflow.com\/questions\/37540345\/html-flexible-canvas-scale\r\nvar image = new Image();\r\nvar canvasElement = document.querySelector(\"#pictureCanvas\")\r\nvar points = [];\r\nvar contentElement = document.querySelector(\"#belowImage\");\r\n\r\nimage.addEventListener('load', function(e) {\r\n\r\nvar scale_factor = annotateImage.clientWidth \/ image.width;\r\nvar width = image.width * scale_factor;\r\nvar height = image.height * scale_factor;\r\nvar canvas = document.querySelector('canvas');\r\ncanvas.width = width;\r\ncanvas.height = height;\r\ncanvas.getContext('2d').drawImage(image, 0, 0, width, height);\r\nsessionStorage.setItem(\"height\", height);\r\nsessionStorage.setItem(\"width\", width);\r\ndrawPoints();\r\n});\r\nvar listenAnsicht = \"true\"\r\nimage.src = '<span style=\"color: #ff0000;\"><strong>https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/eb\/Michael_Zeno_Diemer%2C_Romanshorn_Hafen.jpg<\/strong><\/span>';\r\n&lt;\/script&gt;<\/pre>\n<p>Die anzupassenden Stellen sind im Quellcode entsprechend farblich markiert:<\/p>\n<ul>\n<li>Link auf die Bilddatei (rot)<br \/>\nDer Link muss ausgetauscht werden, wenn man ein anderes Bild verwenden m\u00f6chte.<\/li>\n<li>Bildbreite in % (blau)<br \/>\nDiese Angaben k\u00f6nnen je nach Bildformat angepasst werden. Das ist insbesondere wichtig, wenn ein Bild im Hochformat verwendet werden soll.<\/li>\n<li>Anweisungen und Hinweise (gr\u00fcn)<br \/>\nDie Anweisung (ganz oben) kann den eigenen Bed\u00fcrfnissen angepasst werden.<\/li>\n<\/ul>\n<p>Verwendet man die MBZ-Datei sind nur die Anpassungen notwendig, da der Einstellungsbereich dann mitgesichert wird.<\/p>\n<h2>Ein Blick auf die Technik<\/h2>\n<p>Falls die in der Datenbank verwendeten Techniken nicht interessieren, kann dieser Abschnitt \u00fcbersprungen werden.<\/p>\n<p>Das Bild und die einzelnen Punkte werden auf einem Canvas-Element dargestellt. Die Kommentare dazu in die eigentliche HTML-Seite eingebaut.\u00a0Damit das Bild beim Laden der Seite automatisch den zu Verf\u00fcgung stehenden Platz einnimmt, wird folgendes Dritt-Script verwendet.<\/p>\n<pre>&lt;script&gt;\r\n\/\/ https:\/\/stackoverflow.com\/questions\/37540345\/html-flexible-canvas-scale\r\nvar image = new Image();\r\nvar canvasElement = document.querySelector(\"#pictureCanvas\")\r\n\r\nimage.addEventListener('load', function(e) {\r\nvar scale_factor = annotateImage.clientWidth \/ image.width;\r\nvar width = image.width * scale_factor;\r\nvar height = image.height * scale_factor;\r\nvar canvas = document.querySelector('canvas');\r\ncanvas.width = width;\r\ncanvas.height = height;\r\ncanvas.getContext('2d').drawImage(image, 0, 0, width, height);\r\n});\r\nimage.src = '<span style=\"color: #ff0000;\"><strong>Adresse_der_Bilddatei.jpg<\/strong><\/span>';\r\n&lt;\/script&gt;<\/pre>\n<p>In der Listenansicht werden die Eintr\u00e4ge f\u00fcr die einzelnen Punkte wie folgt aufbereitet:<\/p>\n<pre>&lt;script&gt;\r\nelements = document.querySelectorAll(\"[data-coordinates]\");\r\n...\r\nvar points=[];\r\n\r\nelements.forEach(e =&gt; {\r\nvar point = [];\r\npoint[0]=e.querySelector(\".Koordinate\").innerText.split(\",\")[0]\r\npoint[1]=e.querySelector(\".Koordinate\").innerText.split(\",\")[1];\r\npoint[2]=e.querySelector(\".Farbe\").innerText;\r\npoint[3]=e.querySelector(\".Kategorie\").innerText;\r\npoint[4]=e.querySelector(\".Kommentar\").innerHTML;\r\npoints.push(point);\r\n});\r\ndrawPoints()\r\n&lt;\/script&gt;<\/pre>\n<p>Alle Eintr\u00e4ge werden also zuerst gespeichert und dann einzeln so bearbeitet, dass die darin enthaltenen relevanten Angaben anschliessend zu Verf\u00fcgung stehen.<\/p>\n<p>Die meisten der verwendeten Funktionen sind im JavaScript-Teil der Datenbank ausgelagert.<\/p>\n<p>So wird beispielsweise eine Distanzfunktion (Pythagoras) verwendet, um den zu einem angeklickten Punkt passenden Kommentar zu finden. Wobei die Parameter dem angeklickten Punkt und jeweils einem Punkt auf der Liste entsprechen.\u00a0 Zus\u00e4tzlich wird dann sp\u00e4ter im Script noch \u00fcberpr\u00fcft, ob \u00fcberhaupt ein Punkt in der N\u00e4he liegt.<\/p>\n<pre>function distance(x,y,xp,yp)\r\n{\r\nreturn Math.pow(((x-xp)*(x-xp)+(y-yp)*(y-yp)),0.5)\r\n}<\/pre>\n<p>Die Koordinate des angeklickten Punktes wird \u00fcber ein Event festgestellt und anschliessend in Prozentangaben umgerechnet. Je nachdem in welcher Ansicht der Nutzende sich gerade befindet, wird anschliessend ein Kommentar ausgegeben oder der Punkt als Orientierungshilfe auf dem Bild angezeigt (f\u00fcr einen Neueintrag):<\/p>\n<pre>function mousePosition(event)\r\n{\r\nvar ph = sessionStorage.getItem(\"height\");\r\nvar pw = sessionStorage.getItem(\"width\");\r\nxpos = Math.round(event.offsetX\/pw*100);\r\nypos = Math.round(event.offsetY\/ph*100);\r\nif (listenAnsicht) getNextCoordinate(xpos,ypos)\r\nelse drawPoint(xpos,ypos);\r\n}<\/pre>\n<p>Die weiteren Details k\u00f6nnen der JavaScript-Vorlage der Datenbank entnommen werden und dienen vor allem dazu, die Punkte im Bild abzubilden, was \u00fcber die entsprechenden Canvas-Zeichenfunktionen erfolgt. Entsprechende Werte werden dazu im localStorage oder im sessionStorage zwischengespeichert.<\/p>\n<h2>Verwendung im Unterricht<\/h2>\n<p>Die Datenbankvorlage &#8222;Bild kommentieren&#8220; kann f\u00fcr unterschiedliche Zwecke im Unterricht verwendet werden:<\/p>\n<ul>\n<li>Die Lernenden stellen sich auf einem Klassenfoto gemeinsam vor. Dabei kann beispielsweise der Name notiert und weitere Informationen als Audiodatei vermittelt werden.<\/li>\n<li>Auf einer historischen Bildquelle (Luftfoto, Karte, Gem\u00e4lde, &#8230;) werden interessante Punkte markiert und deren Bedeutung beschrieben. Dabei kann im Kommentar auch auf entsprechende Quellen verlinkt werden.<\/li>\n<li>Im Kunstunterricht werden verschiedene Techniken und kulturelle Hintergr\u00fcnde in einem Bild kommentiert. Zur besseren Veranschaulichung k\u00f6nnen nachbearbeitete Ausschnitte des Bildes in die Kommentare eingebaut werden.<\/li>\n<li>Die Lernenden kommentieren im Sprachunterricht verschiedene Szenen in einem Wimmelbild. Dabei k\u00f6nnen Begriffe notiert, \u00fcbersetzt und die Aussprache \u00fcber eine Audiodatei eingebunden werden.<\/li>\n<li>Im Werkunterricht zeigen die Lernenden in einem kurzen Video, wie unterschiedliche Werkzeuge richtig eingesetzt werden und was man dabei sicherheitstechnisch beachten muss.<\/li>\n<\/ul>\n<p>Bei diesen Aktivit\u00e4ten sollen sich die Lernenden in einem arbeitsteiligen Vorgehen in ein gr\u00f6sseres Ganzes einbringen und dabei in der Wahl der zu verwendenden Medien einen m\u00f6glichst grossen Gestaltungsfreiraum erhalten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Moodle k\u00f6nnen Einzelpersonen Bilder mit der H5P-Aktivit\u00e4t Image Hotspots kommentieren. Bei der im Auftrag von zum.de weiterentwickelten Version Image Hotspots Erweiterung k\u00f6nnen sogar interaktive Elemente eingebaut werden. Diese Werkzeuge erlauben es jedoch nur jeweils einer Person, Anmerkungen zu einem Bild vorzunehmen. Die hier vorgestellte Datenbankvorlage &#8222;Bild kommentieren&#8220; soll deshalb diese Werkzeuge nicht ersetzen, sondern &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/gigers.com\/blog\/ein-bild-kommentieren\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eEin Bild kommentieren\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-828","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/828","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=828"}],"version-history":[{"count":6,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":837,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions\/837"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}