===== M02-1: Umgang mit Story Maps von ESRI ===== **Einführung** Dieses Material dient der Einführung in das Erstellen von Storymaps. Es liefert einen Überblick über die grundlegende Handhabung des web-basierten Tools [[ https://storymaps.arcgis.com/ | ArcGIS-Storymap]]. Für ausführlichere Erklärungen (in **Englisch**) von ArcGIS StoryMaps und all deren Funktionen, verweisen wir auf die Sammlung [[https://storymaps.arcgis.com/collections/581dc7f2e85b4dfc8960f7fc8e30e57f | „Getting Started with Storymaps“]] von ArcGIS. In dieser Anleitung wird sich mit den Grundlagen der Erstellung von einer Storymap über ArcGIS auseinandergesetzt. Dabei wird besonders auf den immersiven Block des **Sidecars** eingegangen. ==== Beginn einer neuen Storymap ==== **Startseite und Erstellen einer neuen Story** Abbildung 1 zeigt die **Startseite** des web-basierten Tools „ArcGIS StoryMaps“. Zum Einstieg ist dies auch die einzige relevante Seite. Auf der Seite „Storys“ unter dem Reiter „Eigene Storys“ erhaltet ihr einen Überblick über eure eigenen Storymaps (sowohl die veröffentlichten, als auch unveröffentlichte Entwürfe). [{{:courses:workshops:ws-storymap:material:01_storymaps_startseite.png?400| Abbildung 1: Startseite ArcGIS StoryMaps}}] Unter den anderen Reitern könnt ihr eure favorisierten Storymaps, als auch alle veröffentlichten Storys von euren Gruppen oder Organisationen (bspw. Goethe Universität Frankfurt) finden. [{{ :courses:workshops:ws-storymap:material:02_neue_story.png?200|Abbildung 2: Neue Story erstellen}}] Hier ist jedoch nur der Button „**Neue Story**“ wichtig. Wird dieser ausgewählt erscheint das folgende Menü, bei welchen für die Anleitung „**Neu erstellen**“ ausgewählt wurde. Mit mehr Erfahrung kann natürlich auch direkt das erwünschte Format ausgewählt werden. Es öffnet sich eine neue Seite und die neue Storymap kann beginnen. Im Folgenden wird neben einer neuen Storymap auch die Storymap [[https://arcg.is/1euuXy0 |„Der Campus Westend“]] als Beispiel für eine fertige Storymap herangezogen. Zur Veranschaulichung des Besprochenen bietet es sich an, die Storymap parallel im Browser offen zu haben. //Die Geschichte hinter der Karte// Die Storymap „Der Campus Westend“ erzählt die Geschichte des heutigen Zentralcampus der Goethe Universität Frankfurt. Von den Anfängen des Areals als psychiatrische Einrichtung im 19. Jahrhunderts, über die Errichtung des Poelzig-Baus (auch I.G. Farben Haus genannt) 1931 als Hauptsitz der Interessensgemeinschaft Farbenindustrie AG und deren Verbindung zum NS-Regime, sowie der Nutzung des Baus als Hauptquartier der US-Streitkräfte nach dem 2. Weltkrieg, bis zur Umwandlung zum Universitätsstandort wird die Vergangenheit des Ortes präsentiert. Neben der Geschichte und der heutigen Nutzung von universitären Gebäuden wird zudem auf die Integration von Kunst im öffentlichen Raum und die Rolle des Campus bei der Stadtentwicklung eingegangen. === Kopfleiste === [{{ :courses:workshops:ws-storymap:material:03_kopfleiste.png?600 | Abbildung 3: Kopfleiste}}] Zunächst wollen wir uns mit der Kopfleiste beschäftigen, welche ganz oben am Browserfenster angedockt ist. Über das auswählen des **Pfeils** ganz links, kehrt man zurück Startseite mit dem Überblick der eigenen Storys. Daneben erhalt man die Auskunft über den **Status der Storymap**. Da es sich hierbei um eine unveröffentlichte Story handelt, ist in rot „Entwurf“ zu lesen. Nach Veröffentlichung wird dieses durch grünes „Veröffentlicht“ ersetzt. Rechts daneben sind zwei **gebogene Pfeile**, über welche Bearbeitungsschritte rückgängig gemacht bzw. wieder hergestellt werden können. Schließlich ist auf der linken Seite noch zu entnehmen, ob der aktuelle Stand der Storymap gespeichert wurde. Nach Änderungen **speichert** sich die Story **automatisch**. Auf der rechten Seite der Kopfleiste sind drei Reiter. Wir wollen uns nun zunächst mit dem Reiter „**Entwerfen**“ beschäftigen und später auf die Reiter „**Vorschau**“ und „**Veröffentlichen**“ eingehen. Unter **„…“** können weitere Einstellungen für die Storymap angepasst werden, welche im Rahmen dieser Anleitung jedoch nicht relevant sind und daher nicht behandelt werden. === Entwerfen=== [{{ :courses:workshops:ws-storymap:material:04_entwerfen.png?100|Abbildung 4: Menü "Entwerfen"}}] Nach dem Auswählen des Reiters „**Entwerfen**“ öffnet sich ein Seitenmenü, über das sich das **Design der Titelseite** und das **Design-Schema** der ganzen Storymap einstellen lassen. Hier können zudem eine **Navigationsleiste** und ein **Quellenverzeichnis** ein- bzw. ausgestellt werden. Die Navigationsleiste wird oben an der Story verankert und erleichtert die Navigation zwischen unterschiedlichen Themen (Überschriften) in der Story. Das Quellenverzeichnis wird am Ende der Storymap eingefügt und hilft bei einer übersichtlichen Angabe der Quellen. Falls gewollt, kann hier auch ein **Logo** hochgeladen werden, welches in der Kopfzeile und auf dem Cover angezeigt wird. Hierfür sollten (falls vorhanden) auch ein Link und ein Alternativtext für das Logo angegeben werden. In unserem Beispiel „Der Campus Westend“ wurde **kein Logo** hinzugefügt. === Das Cover === Storymaps beginnen mit einem Cover, welches der **Einstieg** in und gleichzeitig die **Vorschau** für die Storymap auf der Plattform ist. [{{ :courses:workshops:ws-storymap:material:05_cover.png?400 |Abbildung 5: Leeres Cover einer Storymap}}] Das Cover besteht aus verschiedenen Elementen, die in der folgenden Tabelle aufgeführt werden: ^ Element ^ Beschreibung ^ Beispiel ^ |Titel der Story | Überschrift bzw. übergeordnetes Thema der Storymap | Der Campus Westend | | Einführung / Untertitel | Kurze Erläuterung des Themas bzw. Leitfrage | Irrenanstalt, Konzernzentrale, Hauptquartier & Deutschlands schönster Campus? | |Byline | Normalerweise wird hier automatisch der Name der erstellenden Person angegeben, dieser kann jedoch auch bearbeitet oder weggelassen werden. | In unserem Beispiel wurde die Byline weggelassen und die Autor*innen in dem Einfühungstext aufgeführt. | | Titelbild oder Video | Bild oder Video, das als Hintergrund des Covers dient. Ein Bild oder Video kann über das Pop-Up-Fenster direkt hochgeladen werden. | Ausblick auf den uni Campus Westend | Für unser **Beispiel** sieht das Cover wie folgt aus: [{{:courses:workshops:ws-storymap:material:06_cover_beispiel.png?400 | Abbildung 6: Cover der Storymap "Der Campus Westend"}}] [{{:courses:workshops:ws-storymap:material:07_cover_beispiel.png?200| Abbildung 7: Vorschau der Storymaps "Der Campus Westend" auf der Startseite von ArcGIS StoryMaps}}] Es lässt sich erkennen, dass zudem das **Datum** der Veröffentlichung / der letzten Bearbeitung **automatisch eingefügt** wird. ==== Inhalte erstellen ==== Nach dem Cover soll nun der Inhalt der Storymap gestaltet werden. Hierfür ist der **„Inhaltsblock hinzufügen“-Button** (+-Button) das wichtigste Werkzeug. Der Button erscheint automatisch direkt unter dem Cover. [{{ :courses:workshops:ws-storymap:material:08_inhaltsblock_hinzufuegen.png?200 |Abbildung 8: "Inhaltsblock hinzufügen"-Button}}] An dieser Stelle kann entweder **Text direkt eingegeben** werden **oder** es wird ein **neuer Inhaltsblock hinzugefügt** über das Klicken des Buttons. Bei Letzterem öffnet sich ein Menü, über das das Inhaltsformat gewählt wird. In den folgenden Unterkapiteln werden ausgewählte grundlegende Formate genauer. [{{ :courses:workshops:ws-storymap:material:09_inhaltsbloecke.png?400 | Abbildung 9: Menü um Inhaltsblock hinzuzufügen}}] === Basic: Text === Wird über das Menü „Inhalte hinzufügen“ Text ausgewählt, oder bereits geschriebener Text markiert, öffnet sich unter dem Textfeld ein **weiteres Menü**: [{{ :courses:workshops:ws-storymap:material:10_text.png?400 |Abbildung 10: Text-Menü}}] Über das **linke Drop-Down-Menü** wird ausgewählt, um welche **Textart** es sich handelt. Dabei wird zwischen Absatz und Überschrift, sowie Aufzählung, Nummerierte Liste und Zitat unterschieden. Bei den **Überschriften** kann zwischen **drei Ebenen** ausgewählt werden, wobei nur Überschriften der Ebene 1 in der Navigationsleiste angezeigt werden. Über AA wird zwischen **zwei Schriftgrößen** gewechselt. Über das **rechte Drop-Down-Menü**, kann die **Bündigkeit** des Textes festgelegt werden. Dabei wird zwischen rechts- und linksbündig und in der Mitte zentriert unterschieden. [{{ :courses:workshops:ws-storymap:material:11_beispiele_fuer_text.png?400 | Abbildung 11: Beispiele für Textarten}}] Die Auswahlmöglichkeiten „**B**“ und „//I//“ stehen für bold und italic und lassen den ausgewählten Text fett oder kursiv erscheinen. Daneben sind die **drei Punkte**, welche für **weitere Optionen** stehen. Diese beinhalten durchgestrichenen Text und hoch- oder tiefgestellte Zeichen. [{{ :courses:workshops:ws-storymap:material:12_farbe_anpassen.png?200|Abbildung 12: Menü um Farben anzupassen}}] Über die **Palette** wird die Farbe des Textes angepasst. Bei der Auswahl der Farbe sollte auf die Lesbarkeit geachtet werden. Hierfür hilft ArcGIS Storymaps und gibt ganz unten im Farbauswahl-Menü Auskunft über die Lesbarkeit. Über die **Kette** können **Verlinkungen** zu einer Überschrift oder zu einer anderen Webseite geschaffen werden. Hierfür muss der Text ausgewählt sein. Im Text erscheint die Verlinkung als Linie unter dem Text. Durch das **Anklicken** im Erstellungsmodus kann die Verlinkung **bearbeitet oder gelöscht** werden. Bei einer fertigen Storymap springt die Story durch das Klicken der Verlinkung zu der verlinkten Überschrift oder es öffnet sich die verlinkte Webseite. [{{ :courses:workshops:ws-storymap:material:13_verlinkung.png?200 |Abbildung 13: Verlinkungen im Text}}] Ist der **Absatz fertig**, entsteht durch das Drücken der **Entertaste** direkt ein neuer Absatz mit einem „Inhaltsblock hinzufügen“-Button. === Medien: Karte === Das wohl zentralste Element einer Storymap ist deren Einsatz von **Karten**. Wird über den „Inhaltsblock hinzufügen“-Button eine Karte hinzugefügt, öffnet sich automatisch diese Seite: [{{ :courses:workshops:ws-storymap:material:14_karte_hinzufuegen.png?400 |Abbildung 14: Seite "Eine neue Karte hinzufügen"}}] Da wir uns in dieser Anleitung mit den Grundlagen der Erstellung von Storymaps beschäftigen, lassen wir die unterschiedlichen Reiter außer Acht und wählen direkt „**+ Neue Express-Karte**“. Daraufhin öffnet sich diese zentrale Seite: [{{ :courses:workshops:ws-storymap:material:15_karten_fenster.png?400 | Abbildung 15: Eine neue Karte erstellen}}] == Linkes Seitenmenü == Auf der **linken Seite** ist ein Menü angedockt, über welches **dargestellte Features** auf der Karte auflistet sind und **Kartenoptionen** eingestellt werden können. __Kartenoptionen__ [{{ :courses:workshops:ws-storymap:material:16_kartenoptionen.png?200| Abbildung 16: Kartenoptionen}}] Über den rechten Reiter „**Optionen**“ kann zum einen die **Grundkarte** auf die darzustellenden Inhalte angepasst werden. Es kann zwischen verschiedenen thematischen Karten, wie beispielsweise Humangeographie, Bilddaten und Topografisch gewählt werden. Welche Grundkarte am besten zu deiner Storymap passt, kannst du selbst entscheiden. Für unser Beispiel „Der Campus Westend“ wurde die Navigations-Grundkarte gewählt. Zum anderen können hier **Konfigurationen** getroffen werden, welche die **Interaktion** der Storymap-Betrachter*innen beeinflusst. __Dargestellte Features__ Der linke Reiter „**Dargestellte Features**“ liefert einen Überblick über die auf der Karte dargestellten Elemente. Über das **Ordner-Symbol** lassen sich **Gruppierungen** erstellen. Durch Drag-and-Drop können einzeln Elemente einer Gruppe hinzugefügt oder aus dieser entfernt werden. Wird ein **Element ausgewählt**, öffnet sich ein **Dialogfenster** über welches das jeweilige Element bearbeitet werden kann. [{{ :courses:workshops:ws-storymap:material:17_dargestellte_features.png?400 | Abbildung 17: links: Dargestellte Feature; rechts: Dialogfenster}}] == Kartenfeld == [{{ :courses:workshops:ws-storymap:material:18_kartenfeld.png?300| Abbildung 18: Kartenfeld}}] Beim Erstellen einer Karte ist der Ausgangskartenausschnitt eine Weltkarte. Der **Kartenausschnitt** kann durch die Bottons + und – am rechts unten im Maßstab verändert werden (dies ist auch über Scrolling per Maus möglich), zudem kann durch Ziehen der Maus der Ausschnitt verschoben werden. Der Kartenausschnitt, der zuletzt vorm Speichern bzw. Platzieren der Karte im Kartenfeld angezeigt wird, wird annähernd dem Kartenausschnitt entsprechen, der bei der implementierten Karte in der Storymap angezeigt wird. Bei einer platzierten Karte erscheint über den Zoom-Buttons ein **Home-Botton**, der den Kartenausschnitt nach Interaktionen auf den Ausgangszustand zurückbringt. == Werkzeugleiste == [{{ :courses:workshops:ws-storymap:material:19_toolleiste.png?400 |Abbildung 19: Werkzeugleiste}}] Die Werkzeugleiste über dem Kartenfeld bzw. Seitenmenü ist in verschiedene Segmente unterteilt. __Linkes Segment__ Hier kann über die zwei linken Buttons zwischen **Gruppen- und Einzelauswahl** gewechselt werden. Die beiden rechten Buttons sind zum **Rückgängigmachen** und **Wiederherstellen** von Aktionen. __Rechtes Segment__ Über die jeweiligen Buttons können im Kartenfeld ein **Pfeil oder Doppelpfeil** eingezeichnet oder ein **Textfeld** eingefügt werden. Daneben ist ein **Suchfeld**, über das nach einer bestimmten Position gesucht werden kann. Hierbei kann von direkten Adressen, über Einrichtungen (Bsp. Goethe-Universität Frankfurt Campus Westend), bis zu Ländern und Kontinenten alles gesucht werden. Es werden Vorschläge angezeigt, die ausgewählt werden können, oder die Eingabe wird durch die Enter-Taste bestätigt. __Mittleres Segment__ Dieses Segment liefert die meisten Möglichkeiten die Karte zu gestalten, da hier die **Features** erstellt werden können, welche im Seitenmenü aufgelistet werden. Hier werden nun von links nach rechts die Features genauer beschrieben. {{:courses:workshops:ws-storymap:material:20_punkt_hinzufuegen.png?25 |}} **Punkt hinzufügen**: Durch das Auswählen dieser Funktion kann anschließend ein verschiebbarer Punkt auf der Karte hinzugefügt werden. Im Seitenmenü öffnet sich das **Dialogfenster**. Hier kann der Punkt durch ein Bild, der Name und eine Beschreibung genauer definiert werden. Zudem kann der Style, die Größe und Farbe des Punktes angepasst werden. {{:courses:workshops:ws-storymap:material:21_nummerierter_punkt.png?25 |}} **Nummerierter Punkt**: Siehe „Punkt hinzufügen“, nur dass hier nur die Farbe des Symbols auf der Karte angepasst werden kann. {{:courses:workshops:ws-storymap:material:22_linie_hinzufuegen.png?25 |}} **Linie hinzufügen**: Nach dem Auswählen dieser Funktion kann auf dem Kartenfeld durch Klicken die gewünschten Punkte ausgewählt und verbunden werden. Eine Linie wird durch die **Entertaste beendet**. [{{:courses:workshops:ws-storymap:material:23_linie_beispiel.png?200 | Abbildung 23: Beispiel für Linie in Karten}}] Anschließend erscheinen die ausgewählten Punkte als **große Punkte**. Sie können nach Belieben verschoben werden. Die **kleinen Punkte** können genutzt werden, um den Linienverlauf zu verfeinern. Werden sie verschoben, werden sie zu großen Punkten und zwischen ihnen und den benachbarten großen Punkten entstehen neue kleine Punkte. Einzelne große Punkte können durchs Auswählen und die Entf-Taste gelöscht werden, ohne dass die ganze Linie zu verloren geht. {{:courses:workshops:ws-storymap:material:24_freihandlinie.png?25 |}} **Freihandlinie**: Wird mit gedrückter Maus die gewünschte Linie entlanggefahren (das Loslassen der Maustaste beendet die Linie), erscheint diese wie die Linien zuvor und kann genauso bearbeitet werden. Bei Linien kann nur die Farbe angefasst werden. {{:courses:workshops:ws-storymap:material:25_bereiche.png?50 |}} **Bereiche**: Bereiche werden analog zu Linien erstellt, nur dass diese automatisch eine Fläche eingrenzen, welche auf der Karte eingefärbt wird. [{{ :courses:workshops:ws-storymap:material:26_bereiche_beispiel.png?200 | Abbildung 26: Beispiel für Bereiche in Karten}}] == Karte platzieren und später bearbeiten == Wenn die Karte fertig ist, wird sie über den Button „Karte platzieren“ rechts unten in die Storymap eingefügt. [{{ :courses:workshops:ws-storymap:material:27_karte_platzieren_und_bearbeiten.png?400 | Abbildung 27: Platzierte Karte}}] Anschließend kann die Karte über die Leiste oben in der Mitte angepasst werden. Über den **Stift** links kann die Karte selbst bearbeitet und über die **Tonne** rechts gelöscht werden. Über die Symbole in der Mitte lassen sich die **Position** in der Storymap und die **Größe** der Karte anpassen. Über die Optionen (Zahnrad) kann ein **Alternativtext** eingegeben werden, welcher zur Barrierefreiheit der Storymap beiträgt. Unter der Karte kann eine **Bildunterschrift** bzw. ein Titel eingegeben werden. === Immersiv: Sidecar === Wie bei [[courses:workshops:ws-storymap:material:m01-1|M01-1: Überblick Storymap-Formate]] aufgeführt, kann ein Sidecar verschiedene **Layouts** haben. Es öffnet sich das rechts dargestellte Menü, wo dieses festgelegt werden kann. [{{:courses:workshops:ws-storymap:material:28_layout_auswaehlen.png?200|Abbildung 28: Layoutauswahl für Sidecar}}] In dieser Anleitung wurde sich für die Option eines **verankerten Sidecars** entschieden. Nun wird das Template, bei dem auf der linken Seite die Story, wie bisher weitergeführt werden kann. [{{ :courses:workshops:ws-storymap:material:29_sidecar.png?600 | Abbildung 29: Leeres Sidecar}}] Auf der rechten Seite können **Medien**, wie Karten oder Bilder, hinzugefügt werden. Bei Karten öffnet sich erneut das „Eine Karte hinzufügen“-Menü. Von hier wird wie bei anderen Karten weitergemacht. [{{ :courses:workshops:ws-storymap:material:30_kartenaktionen.png?200|Abbildung 30: Kartenaktionen}}] Im Sidecar lassen sich **Kartenaktionen** hinzufügen. Hierfür wird Text markiert und das Blitzsymbol gewählt. Die Karte öffnet sich und es kann ein Feature ausgewählt werden, welches sich mit dem Text verknüpft. Zudem kann auch der dargestellte Kartenausschnitt für die Kartenaktion bearbeitet werden. Anschließend erscheint die Kartenaktion wie eine Verlinkung im Text. [{{ :courses:workshops:ws-storymap:material:31_sidecar_beispiel.png?400 | Abbilung 31: Ausgestaltetes Sidecar der Storymap "Der Campus Westend}}] Auf der linken Seite wird angezeigt, welche Folie gerade aufgerufen ist. Durchs Anklicken kann einfach zwischen den Folien gewechselt werden. Dies ist auch bei der fertigen Map möglich. Auch durchs scrollen kann zwischen den Folien gewechselt werden. Alternativ kann beim Erstellen der Storymap über die untenstehende Leiste zwischen den Folien gewechselt werden. Hier kann auch durch Verschieben die Reihenfolge der Folien nachträglich angepasst werden. **Neue Folien** können über den +-Button rechts unten hinzugefügt werden. Über das **Drop-Down-Menü** kann die angezeigte Folie gelöscht werden, das Layout des Sidecars verändert oder das ganze Sidecar dupliziert oder gelöscht werden. ==== Elemente verschieben ==== Sollte die ursprüngliche Reihenfolge nicht mehr passen, so können Elemente über Tastenbefehle ausgeschnitten und wieder eingefügt werden. Alternativ können Elemente über die **sechs Punkte** an deren linken unteren Seite verschoben werden. ==== Quellenverzeichnis ==== Auch bei einer Storymap sollten die Inhalte mit Quellen belegt werden. Während der Story eignen sich Kurzbelege oder Verlinkungen, jedoch sollte am Ende einer Storymap ein **Quellenverzeichnis** auftauchen. ArcGIS Storymaps stellt hierfür ein Template zur Verfügung, welches wie oben beschrieben über das Ausklapp-Menü „Entwerfen“ eingefügt werden kann. [{{ :courses:workshops:ws-storymap:material:32_quellverzeichnis.png?600 |Abbildung 32: Leeres Quellenverzeichnis}}] Hier können überschaubar die einzelnen Kurzbelege aufgeschlüsselt oder auch einzelne Inhalte bzw. Folien mit Quellangaben ergänzt werden. Für Internetquellen gilt wie üblich, dass das Datum des letzten Aufrufs anzugeben ist. ==== Vorschau ==== [{{ :courses:workshops:ws-storymap:material:34_vorschau.png?200|Abbildung 33: Auswahl der Endgeräte bei Vorschau einer Story}}] Über den Reiter **Vorschau in der Kopfleiste** kann sich angesehen werde, wie die veröffentlichte Storymap aussehen wird. Unten rechts erscheint ein Menü, über das zwischen den Ansichten auf **verschiedenen Endgeräten** gewechselt werden kann. Für Storymaps, die z.B. für Führungen im Gelände genutzt werden sollen, ist es hilfreich öfter bereits während des Erstellens zu überprüfen, wie die Story auf mobilen Endgeräten dargestellt wird. ==== Eine Story veröffentlichen ==== Ist eine Storymap fertig, kann bzw. muss diese veröffentlicht werden. Hierfür wird der Reiter „**Veröffentlichen**“ gewählt und es öffnet sich eine **neue Seite**, auf der Details zur veröffentlichten Story (Bild, Titel, Beschreibung) festgelegt bzw. das Cover angepasst werden können. Zudem lassen sich **Zugangsberechtigungen** einstellen. Nur bei für Alle veröffentlichten Storymaps lassen diese sich anschließend über einen Link teilen. [{{ :courses:workshops:ws-storymap:material:35_veroeffentlichungsoptionen.png?400 |Abbildung 34: Veröffentlichungsoptionen}}] Ist alles angepasst, wird Veröffentlichen ausgewählt und **fertig ist die Storymap**. [{{ :courses:workshops:ws-storymap:material:36_spaeter_bearbeiten.png?100|Abbildung 35: Optionen bei einer veröffentlichten Story}}] Soll die Storymap **später bearbeitet** werden, kann dies über die den Reiter mit den **drei Punkten** ausgewählt werden. Wird die Story bearbeitet muss sie anschließend erneut veröffentlicht werden. Über die Freigabe-Option in der Mitte kann auch der Link für die Storymap aufgerufen werden.