Herzlichen Willkommen zum neunten Türchen des AdvenTOOLender! Schön, dass du mit dabei bist. An diesem Tag möchte ich dir das Tool „Genial.ly“ vorstellen.  Mit ihm kannst du interaktive Bilder erstellen und dadurch weitere Medien- und Erklärinhalte auf einem Foto platzieren, die deine Nutzer*innen selbst entdecken können.

Beispiel: „Die Quacksalber von Quedlinburg“

Quacksalber im Mittelalter auf einem Basar – das ist die Rolle, in die du im Brettspiel „Die Quacksalber von Quedlinburg“ schlüpfst. Das Game wurde in der Kategorie „Kennerspiel des Jahres 2018“ vom Verein „Spiel des Jahres e.V.“ ausgezeichnet. Wie viel Quedlinburg wirklich darin steckt und was die Einwohner dieser Stadt dazu sagen, habe ich im August vor Ort für den MDR SACHSEN-ANHALT getestet (Artikel: So kommt das Brettspiel ‚Die Quacksalber von Quedlinburg‘ an). Mit dem heutigen Tool „Genial.ly“ erkläre ich dir die einzelnen Elemente des Brettspiels und wofür sie genutzt werden. Klicke dafür einfach auf die rosafarbenen Buttons:

Geeignete Themen

Sobald du ein Foto hast, auf dem es mehr zu entdecken gibt und du dort anstatt im Text gerne mehr sagen willst, macht Genial.ly Sinn. Weitere journalistische Themenideen: Umbau der Parkanlage (als Hintergrundbils: der Grundriss oder ein Plan des Parks, dort dann die Infos draufsetzen, wo was entstehen soll), Erklärungen: „Das machen die einzelnen Organe im Körper“ oder „Hier sind die Straßen kommende Woche gesperrt“.

Ungeeignete Themen

Einfache Nachrichten und Meldungen, die keinen tieferen Hintergrund haben oder kein passendes Bild, eignen sich nicht für dieses Tool.

Die Schritt-für-Schritt-Anleitung

Du kannst selbst so ein interaktives Bild erstellen. Wie das geht, zeige ich dir hier:

Abonniere meinen YouTube-Kanal gerne, wenn du möchtest. Das ist total kostenlos. Vielen Dank für deine Unterstützung! ♥️

1.) Gehe auf die „Genial.ly“-Homepage. Dort klickst du oben rechts auf „Sign up“ und meldest dich entweder mit einem Konto bei Genial.ly selbst an oder nutzt einen dieser Accounts: Facebook, Twitter, Google-Plus, LinkedIn. Das Ganze ist kostenlos, im Tool selbst gibt es nur ein paar „Premium“-Funktionen, für die du bezahlen müsstest. Das ist aber gekennzeichnet.

2.) Danach gelangst du in die Panel-Übersicht. Da klickst du auf „Create Genially“ Dort kannst du dich entscheiden, was du erstellen möchtest. Genial.ly bietet da noch viel mehr, als nur interaktive Bilder (siehe Foto 1). Bei uns ist es für dieses Beispiel aber „Interactive Image“.

3.) In der dadurch folgenden Übersicht lädst du dein Bild hoch. Ich habe vorab das Foto von den einzelnen Elementen des Brettspiels auf meinem Tisch gemacht. Du kannst hier jedes Foto deiner Wahl hochladen. Es darf nur nicht größer als 5 MB sein.

4.) Danach öffnet sich der Bearbeitungseditor (siehe Foto 2). Du hast im Hintergrund normalerweise nur dein eben hochgeladenes Bild. Bei mir auf dem Foto sind die einzelnen interaktiven Buttons, die wir gleich Stück für Stück hinzufügen wollen, bereits sichtbar. Auf der linken Seite befindet sich die wichtigste Leiste. In ihr findest du die Elemente, die du jetzt benötigst. Dort hast du:

• Interactive Elements
• Text
• Resources
• Media
• Insert
• Background
• Pages

5.) Klicke in der linken Leiste auf „Interactive Elements“. Hier kannst du die Buttons auswählen, die gleich deine interaktiven Elemente darstellen. Bei mir war es der rosafarbene Button mit dem Finger. Ziehe ihn via „Drag&Drop“ einfach rüber auf dein Foto. Du kannst den Button verschieben, wohin du ihn auch immer haben möchtest. Das was du erklären möchtest, sollte sich darunter oder direkt daneben befinden, wenn du es nicht verdecken möchtest.

6.) Klicke jetzt auf den Button. Dadurch erscheinen zwei Auswahlmöglichkeiten über ihm (siehe Foto 3). Mit dem rechten davon kannst du Animationen des Buttons einstellen. Das habe ich in diesem Beispiel nicht genutzt, damit kannst du aber sehr gerne rumexperimentieren. Die wirklich wichtige Möglichkeit ist die linke. Klicke auf sie. Jetzt stehst du vor der Entscheidung, was für eine Art Element angezeigt werden soll, wenn du auf den Button klickst. Ich habe mich jedes Mal für „Window“ entschieden, weil ich mit viel Text, Bildern und Videos arbeiten wollte. Klicke darauf.

7.) Dadurch öffnet sich ein Editor-Fenster (siehe Foto 4). Hier solltest du auf jeden Fall oben die Titel-Zeile ausfüllen. Die wird nämlich ausgelesen, wenn du mit der Maus über das interaktive Element hoverst. Dann kann der Nutzer bereits ohne einen Klick auf den Button lesen, worum es an dieser Stelle geht oder im Beispiel oben, was das für ein Spielobjekt ist.

7.) Im Editor kannst du jetzt deinen Text schreiben, der angezeigt werden soll, wenn jemand auf den Button klickt. Du hast in der Leiste dort unterschiedliche Auswahlmöglichkeiten. Du könntest manche Begriffe fetten, ein Bild oder Video hinzufügen oder einen Link setzen.

8.) Sobald du im Editor fertig bist, klickst du auf „Save“, also speichern, und gelangst zurück zu deinem Hintergrundbild. Jetzt kannst du weitere (interaktive) Elemente aus der linken Leiste hinzufügen, bis dein Bild so aussieht, dass es dir gefällt.

9.) Oben rechts kannst du auf „Preview“ klicken und dir die Vorschau anschauen. Da kannst du testen, ob dir das Ganze gefällt.

10.) Solltest du fertig sein, kannst du – ebenfalls oben rechts, neben dem „Preview“ auf „Share“ klicken, um den Link zu deinem interaktiven Bild abzurufen oder den Embed-Code zu erhalten. Ich habe den Code genutzt, um dir das Beispiel hier in die Homepage einzubetten.

Weitere Beispiele

Hier siehst du drei weitere Ideen, was ander User mit der „Interactive Image“-Funktion von Genial.ly so umgesetzt haben:

An interactive image on 'The Cauvery Water Sharing Dispute'. #cauverywaterdispute #genially #nowmediahttps://t.co/8VToaB95aX

— Santadeep Dey (@SantadeepDey) April 16, 2018

Un exemple d'image interactive ➡️ Découvrez dans ce genially 6 curiosités sur la #TourEiffel #Paris 🗼 https://t.co/guwfQYAZB2

— Genially (@genially_en) January 4, 2018

Want an example of an #interactive image? Here you have an interesting one #Volcanic #Eruption 🧐https://t.co/VPnQ7Ju3Xc

— Genially (@genially_en) August 22, 2018

Mehr zum Thema

Ein ähnliches Tool wie „Genial.ly“ ist „ThingLink“, das ich euch hier auf dem Blog bereits mal vorgestellt habe (Artikel: ThingLink: Bilder werden interaktiv). Vielleicht interessiert dich dieses Tool für interaktive Bilder auch – deshalb habe ich es dir hier mal verlinkt.

Blog-Artikel: Mit Genial.ly: 5 interaktive und kostenlose Ideen für den Unterricht

---

Mehr vom AdvenTOOLender

Türchen 24: Mit „MyAdvent.net“ einen Adventskalender erstellen – AdvenTOOLender 2018

Türchen 23: Interaktive Videos mit „Ekostudio“ erstellen – AdvenTOOLender 2018

Türchen 22: „TapeWrite“: Audios mit Slider-Elementen visualisieren – AdvenTOOLender 2018 

Türchen 21: Mit „Datawrapper“ Daten visualisieren | #ddj – AdvenTOOLender 2018

Türchen 20: Mit „Interview JS“ einen Chatbot erstellen – AdvenTOOLender 2018

Türchen 19: Mit „Story Spheres“ 360°-Bilder mit Audios verknüpfen – AdvenTOOLender 2018

Türchen 18: „Timescape“ für Storytelling auf interaktiver Karte – AdvenTOOLender 2018

Türchen 17: Interaktive (Insta-) Stories & Umfragen mit Apester – AdvenTOOLender 2018

Türchen 16: Stories erzählen mit „Wakelet“ und Social Media – AdvenTOOLender 2018

Türchen 15: Interaktiven Zeitstrahl mit „Timeline JS“ erstellen – AdvenTOOLender 2018

Türchen 14: Mit „Brackify“ Umfrage-Battles erstellen – AdvenTOOLender 2018

Türchen 13: „Account Analysis“ für Twitter-Daten – AdvenTOOLender 2018

Türchen 12: News-Quiz erstellen mit Genial.ly – AdvenTOOLender 2018

Türchen 10: Wortwolken als Design-Option und Analyse-Tool – AdvenTOOLender 2018

Türchen 9: SoundCite JS für Audios im Text (Inline) – AdvenTOOLender 2018

Türchen 8: Interaktiver Daten-Zeitstrahl mit StoryLine JS – AdvenTOOLender 2018

Türchen 7: Storrito für Instagram-Stories vom PC – AdvenTOOLender 2018

Türchen 6: „Steller“ für Fotoalben mit Story – AdvenTOOLender 2018

Türchen 5: Mit Canva schnell schöne Designs erstellen – AdvenTOOLender 2018

Türchen 4: Gifs erstellen mit dem Data Gif Maker – AdvenTOOLender 2018

Türchen 3: Vorher-Nachher-Bilder mit Juxtapose JS – AdvenTOOLender 2018

Türchen 2: Audios visualisieren mit SpareMin Headliner

Türchen 1: Interaktive Grafiken mit Infogram – AdvenTOOLender 2018

---

Du hast noch Fragen zu „Genial.ly“, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.