Verweis-sensitive Grafiken in Mebis/Moodle schnell, einfach und responsiv erstellen

Die visuelle Darstellung eines virtuellen Klassenzimmers in einem LMS durch eine verlinkte Grafik ist recht beliebt. In solch einer Grafik kann auf verschiedene Kurse innerhalb des LMS’, auf Internetseiten, E-Mail- oder Kontaktmöglichkeiten oder Dateien verlinkt werden. Das Ganze ist dann ansprechender und motivierender als bloße Linklisten. Wie man diese schnell, einfach und responsiv (nicht) erstellt, ist in diesem Beitrag kurz skizziert.

1. Was man nicht tun sollte

1.1. Grafikabschnitte in Tabelle oder DIV-Container integrieren

Man könnte die Grafik zerteilen und in einer Tabelle wieder zusammensetzen. Das funktioniert technisch gesehen recht gut und die Browser skalieren in Moodle die Grafiken auf kleinen Bildschirmen auch passend herunter.  Warum man es trotzdem nicht machen sollte:

  • Wer auf barrierefreien Quellcode angewiesen ist, könnte dadurch verwirrt werden. Es dürfte aber machbar sein die Tabelle dahingehend ausreichend zu notieren. Dass verlinkte Grafiken in einer Tabelle gelistet sind, ist ja nicht ungewöhnlich.
  • Tabellen sollten jedoch nie im Layout verwendet werden, was streng genommen hier gemacht wird.
  • Durch die Tabellenstruktur sind nur Rechtecke als geometrische Formen möglich.
  • Liegen die Verlinkungen nebeneinander, ist es leicht möglich sich zu vertippen bzw. zu verklicken. Man müsste Zellen einbinden ohne Verlinkung, was wiederum den Aufwand erhöht, das Bild passgenau zuzuschneiden.

Die meisten Gegenargumente zur Verwendung von Tabellen sollten dann auch für die Alternative gelten, das Ganze mit DIV-Containern zu realisieren. Hinzu kommen der unverhältnismäßig große Aufwand und die Unsicherheit, ob das mit jedem Gerät und jedem Bildschirm lesbar ist.

1.2. Verweis-sensitive Grafiken mit imagemap

Mit Imagemap kann man Grafiken verlinken, in denen der Anwender mit der Maus auf ein Detail klickt.

Beispiel:

<img src="bild.png" alt="bildtext" usemap="#name" />
<map name="name">

<area shape="rect" coords="12,455,78,427" href="https://mebis-bayern.de/" alt="mebis" title="mebis" />
</map>

Die Positionswerte dieser Klickflächen basieren auf Pixelwerten (coords=…). Diese kann man selbst mit Hilfe von Bildbearbeitungsprogrammen „herausfinden“ oder mit Online-Werkzeugen sich den Code generieren lassen. Aber hier liegt das Problem:

Die Imagemap passt sich mit der Klickfläche nicht an. Wenn das Bild skaliert auf einem Smartphone dargestellt wird, ist die Klickfläche noch immer in der ursprünglichen Größe. Es gibt Lösungen mit CSS. Aber das ist ein ebenso unverhältnismäßig großer wie unsicherer Aufwand.

2. Lösungsvorschlag: SVG-Imagemap

In SVG können Rastergrafiken eingebunden werden und mit anklickbaren Formen kombiniert werden: Referenz siehe SELFHTML

Beispiel:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 1200 900" >
  <image width="1200" height="900" xlink:href="grafik.png">
    <title>Virtuelles Klassenzimmer</title>
  </image>
</svg>

Mit SVG sind einige geometrische Grundformen möglich, zum Beispiel:

  • Rechteck <rect />
  • Kreis <circle />
  • Ellipse <ellipse />
  • Polygon <polygon />

Als Attribute werden ebenso Pixel angegeben. Diese Grafik ist dann allerdings responsiv und skaliert auf kleinen Bildschirmen passend. Das heißt aber auch die Grafik kann durchaus etwas größer sein.

Einfache Vorgehensweise: Die Pixelbereiche liest man aus Bildbearbeitungsprogrammen „heraus“.

Beispiel:

In IrfanView den gewünschten Punkt anklicken oder den gewünschten Bereich markieren. In der Kopfleiste wird die Pixelzahl sowie Größe ausgegeben:

In diesem Fall die X- und Y-Koordinaten 332,247:

Hier ein Rechteck mit x=214, y=213 und einer Größe von 304×186:

Beispiel für ein Rechteck…

<a xlink:href="https://teams.microsoft.com/">
    <rect x="668" y="191" fill="#fff" opacity="0.2" width="402" height="202"></rect>
  </a>  
 

…und einen Kreis (das ist die WebUntis-Uhr, siehe unten)

 <a xlink:href="https://borys.webuntis.com/WebUntis/?school=XXX">
    <circle cx="870" cy="98" r="60" fill="#fff" opacity="0.2"></circle>
  </a> 

3. Fazit

  • Die visuelle Darstellung eines virtuellen Klassenzimmers durch eine verlinkte Grafik kann motivierender und anschaulicher sein als eine übersichtliche, aber stupide Linkliste oder ein Menü.
  • Für die Erstellung der Grafik sind einfache Kenntnisse in Bildbearbeitung notwendig.
  • Das Zerteilen und das Einbinden in eine Tabelle funktionieren ohne große Probleme, bergen aber einige Nachteile in sich.
  • Imagemap als Relikt aus dem Web 1.0 sollte/kann nicht verwendet werden, da es nicht responsiv ist.
  • Eine SVG-Imagemap ist sehr schnell und einfach erstellt, zudem responsiv. HTML- bzw. XML-Kenntnisse sind notwendig.
  • Auf Barrierefreiheit sollte generell geachtet werden.
  • Durch die fehlende visuelle Darstellung auf Systemen ohne Maus(zeiger) sollte ggf. eine optische Hilfe auf die Linkbereiche gesetzt werden (Rahmen, Opazität…)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.