Draw Attention
Bei Draw Attention handelt es sich um ein Plugin, mit dem Grafiken teilweise interaktiv klickbar gemacht und so einzelne Inhalte und deren Zusammenhänge hervorgehoben werden können. Es lassen sich klickbare Flächen über ein Bild legen.
Draw Attention ist besonders hilfreich, um die Visualisierung von Lerngegenständen interaktiv aufzuarbeiten, beispielsweise im Zusammenhang mit der Verwendung von Lernlandkarten.
Mehr zum Thema “Lernlandkarten” siehe Lernmodul “Grafische Lernlandkarten erstellen und vielseitig nutzen”.
Im Zuge der Erstellung von interaktiven Grafiken können Bereiche eines Bilds farblich markiert und mit Zusatzinformationen versehen werden. Bei diesen Zusatzinformationen kann es sich u. a. um Text, Videos, Audios oder andere Bilder handeln, die per Klick oder Mouseover aufgerufen werden können. Die interaktiven Grafiken sind responsiv, für Suchmaschinen optimiert und barrierefrei.
Apropos Barrierefreiheit: Die Grafiken sind per Tabulator-Taste ansteuerbar, sodass die einzelnen markierten Elemente von einem Screenreader vorgelesen werden können.
Einen umfassenden Überblick über Draw Attention finden Sie hier: https://wpdrawattention.com/
1. So arbeitet man mit Draw Attention
Das Plugin ist über die WordPress-Seitenleiste ansteuerbar.
Zur Erstellung einer neuen interaktiven Grafiken gehen Sie wie folgt vor:
- Klicken Sie in der linken Navigationsleiste im Menüpunkt “Draw Attention” auf den Unterpunkt “Add New”.
- Fügen Sie anschließend in der rechten Leiste das Bild ein, das interaktiv gestaltet werden soll.
3. Klicken Sie danach auf den Button “Veröffentlichen”. Erst dann steht Ihnen das Bild zur weiteren Bearbeitung zur Verfügung.
Nachfolgend werden die grundlegenden Bearbeitungsmöglichkeiten erläutert.
2. Bearbeitungsmöglichkeiten
2.1 Einfügen von Inhalten
Unter “Hotspot Areas” können “Clickable Areas” hinzugefügt werden. Bei Clickable Areas handelt es sich um die Bereiche, die später interaktiv sind.
Um einen Bereich als Clickable Area zu markieren, kann im Abschnitt “Coordinates” zwischen Kreisen, Rechtecken und Freiformen gewählt werden. Diese Formen werden links oben in der Leiste, die sich auf dem Bild befindet, angezeigt. Wenn auf eine der Formen geklickt wird, kann sie auf dem Bild eingefügt und weiter angepasst werden.
Achtung: Nach der Erstellung und richtigen Platzierung der Cilckable Area immer auf Speichern klicken. (Die Buttons für die Formen wechseln nach der Erstellung zum Button “Edit Layers”. Klicken Sie auf diesen Button, erscheint der Button “Save”.)
Wählen Sie anschließend einen Titel für den markierten Bereich. Der Titel wird angezeigt, wenn mit der Maus über die entsprechende Fläche gefahren wird.
Im Feld “Description” können Sie weiterführende Informationen hinzufügen. Sie werden angezeigt, wenn Sie auf die Fläche klicken bzw. hovern. Bei den weiterführenden Informationen kann es sich beispielsweise um einfachen Text oder aber auch um ein Video handeln. Möchten Sie ein Video einbinden, fügen Sie folgenden Code in des Feld “Description” ein:
Elemente zum Kopieren:
[video src=”
” poster=”https://zfl-lernen.de/wp-content/uploads/play_video.png”][/video]
Möchten Sie eine weitere Clickable Area hinzufügen, klicken Sie auf den Button “Add Another Area”.
2.2 Ändern der Farbeinstellungen
Unter “Highlight Styling” können u. a. die Farbe der Clickable Area gewählt sowie Parameter wie die Farbe und Größe des Umrisses eingestellt werden.
Unter “General Settings” können zudem Farb-Einstellungen für die Anzeige der weiterführenden Informationen vorgenommen werden.
2.3 Ändern der Position
Unter “Layout” (in der rechten Leiste unter dem Feld, in dem das Hintergrundbild hochgeladen wird) kann ausgewählt werden, auf welche Weise die Beschreibung angezeigt werden soll. Es besteht die Wahlmöglichkeit zwischen verschiedenen Positionen. Haben Sie sich für die Option “Tooltip” entschieden, können Sie zusätzlich wählen, ob die weiterführenden Informationen durch Klick oder Mouseover angezeigt werden sollen.
Deutsch 
English