Wikimania05/Workshop-TD1
- English?
Workshop - Kartengestaltung in Wikipedia - eine Aufforderung für bildschirmgerechte Kartengraphik edit
- Leader(s): Tobias Dahinden
- License: GDFL
- Language: German
- Slides: no slides available because of license issues
About the leader(s): Tobias Dahinden wurde 1973 geboren. Er studierte ab 1994 an der Eidgenössischen Technischen Hochschule in Zürich zuerst Mathematik und später Geodäsie mit Vertiefungsrichtung Geophysik und Kartographie. 2001 wurde er Dipl. Vermessungsingenieur ETH. Noch während seines Studiums wurde er mit Lehrtätigkeiten am Institut für Kartographie der ETH beauftragt, an dem er heute als Doktorand arbeitet. Er betreut insbesondere Semester- und Diplomarbeiten im Bereich Webkartographie. Er befasst sich zudem mit Felsdarstellung, mit der Entwicklung eines interaktiven Schulatlanten und mit der Entwicklung und Herstellung von Kartendarstellungen für die Navigation. Tobias Dahinden stiess im Juli 2004 zur Gemeinde der Wikipedianer.
Abstract: Zusammenfassung: Der Vortrag befasst sich mit der Gestaltung von Bildschirmkarten unter besonderer Berücksichtigung der Randbedingungen von Wikipedia. Die Aussagen werden wo möglich mit guten und weniger guten Beispielen aus Wikipedia vorgeführt.
Damit eine Karte leserlich wird, sollten bei der Herstellung einige Regeln beachtet werden. Am Anfang stellt sich die Frage, wozu die Karte dienen soll. Daraus lässt sich ableiten, welche Daten und in welcher Auflösung (Maßstab) die Daten dargestellt werden sollten.
Als zweites gehört dazu, dass die Qualität der Grundlagedaten untersucht wird. Einige Datensätze widersprechen sich. Zudem sind raumbezogene Daten häufig nicht frei verfügbar. Es ist meistens nicht möglich eine Karte unter einer beliebigen Lizenz zu veröffentlichen. Vielfach ist eine Veröffentlichung im Web gar nicht möglich. Eine Ausnahme bilden hier die Daten vom USGS.
Die Karte umfasst diverse Gestaltungselemente. Gemeint sind Formen und Farben der Elemente. Zu beachten gilt es, dass Formen unter einer bestimmten Grösse (abhängig vom Kartenmassstab und von der Bildschirmauflösung) nicht mehr richtig wahrgenommen werden können. Wenn zwei ähnliche Elemente zu nahe sind, sieht man keine Begrenzung mehr. Daher gilt es Minimaldimensionen einzuhalten. Stichlierte Linien sollten an Ecken und Knoten einen Strich aufweisen, sonst kann das Auge der Linie nicht recht folgen. Die Farben sollten zum einen an die Natur erinnern (z.B. Grün für Wald, Blau für kalt) zum andern ist es wichtig, kleine Elemente (Punkte, Striche) mit satten Farben zu zeichnen, grosse Flächen sollten hingegen mit blassen Farben gemalt werden. Weiter sind die Farben Betriebssystem abhängig. Auf Mac scheinen Farben automatisch blasser als in Windows. Es gibt unzählige Schriftarten. Nicht jede Schrift eignet sich allerdings gleich für den Bildschirm. Serifenschriften sind meist ungeeigneter als serifenlose Schiften. Die Schiftgrösse beeinflusst ebenfalls die Lesbarkeit. Für die Platzierung von Namen gelten für Bildschirmkarten die selben Regeln wie für gedruckte Karten. [Jenny03, Dahinden02]
Bildschirmkarten beinhalten oft Animationen und Interaktionen. Nicht jede Animation ist jedoch sinnvoll, nicht jede Interaktion für die BenutzerInnen offensichtlich.
Als Format für die Karte kann man Raster- oder Vektorformate verwenden (insbesondere PNG oder SVG). Die beiden Formattypen haben Vor- und Nachteile, die vorgeführt werden sollen.
Als Fazit gilt: Eine Karte ist gut, wenn sie lesefreundlich ist und nützlichen Inhalt vermittelt. Als Leitspruch kann man "As simple as possible, but no simpler" [urlGoogle] verwenden.
Der Vortrag richtet sich an Leute, die Karten für Wikipedia erstellen, jedoch keine Ausbildung in Kartographie haben.
Bildschirmgerechte Kartengestaltung - Ausführungen im Detail edit
Einleitung edit
In der Wikipedia finden sich inzwischen eine grosse Menge von Karten. Leider ist oft nicht erkennbar, was das Ziel der Karte sein soll. Beim Verfassen einer Karte sollte man sich nicht nur über Nutzungssituation und Benutzergruppe im klaren sein. Es ist wichtig zu wissen, welche Fragen mit der Karte beantwortet werden sollen. Gleichzeitig sollte man sich auch fragen, ob man die selbe Aussage nicht einfacher machen kann. (Es gibt z.B. unzählige Karten, in denen irgendwelche Dörfer in einer Deutschlandkarte gezeigt werden. Die Relation zu anderen geographischen Gegebenheiten - ausser der Ländergrenzen - sind nicht vorhanden. Könnte man da nicht einfach sagen: Fambach liegt in Sachsen-Anhalt?)
Wenn man sich darüber im klaren ist, was gezeigt werden soll, sollte man erst mal eine Skizze anfertigen. In diesem Schritt legt man implizit auch einen Kartenmassstab und die grösse der Bilddatei fest. Stehen diese Punkte einmal fest, kann man sich daran machen, Daten für die Karte zu suchen.
GIS oder Kartographie edit
Grundlagedaten edit
Leider ist es nicht einfach Daten für eine Karte zu finden. Global-GIS (ehem. Digital Chart of the World - USGS Daten), Moutain-High-Map oder Globe sind Daten, die die gesamte Welt abdecken. Es ist jedoch zu beachten, dass auch diese Datensätze bestimmten Copyrights unterliegen. Da für die Wikipedia eigentlich eine GFDL verlangt wird, stehen praktisch keine Datensätze zur Verfügung, solange sie nicht selbst erhoben wurden.
Überarbeitung, Natural Earth edit
Mit dem Datensatz ist es dann allerdings nicht getan. Der Datensatz muss am Massstab angepasst werden. Werden mehrere Datensätze gemischt, müssen die Daten harmonisiert werden. Auch wenn die Daten bereits mit Farbinformationen, Strichstärken etc. versehen sind, muss man diese Attribute i.d.R. überarbeiten. Ein recht gelungenes Beispiel ist "Natural Earth" von Tom Patterson ([1]). Die Karte zeigt die ganze Welt in einer Auflösung von 1,24 km^2 und kann frei benutzt werden.
Datenklau edit
Es empfiehlt sich ausdrücklich nicht Datensätze zu klauen und scheinbar unkenntlich zu machen. Die Nationalen Agenturen für Geodaten oder Firmen wie TeleAtlas, NavTec versehen ihre Daten mit Fehlern, die zwar für die BenutzerInnen nicht relevant sind. Es ist aber möglich, so genau herauszufinden, ob der Datensatz selbst erhoben wurde oder geklaut ist.
Raster oder Vektor edit
Für Raster eignet sich vorallem PNG. Bei JPEG können ungewünschte Effekte beim Komprimieren auftreten. GIF besitzt zu wenig Farbstufen, um ein Relief in die Karte einzubinden. Die Datei kann mit indizierten Farben gespeichert werden und anschliessend eine geeignete Kompressionsstufe gewählt werden. Für ein Relief kann sogar die höchste Kompression genügen.
Bei Vektor steht eigentlich nur der W3-Standard SVG zur Diskussion, da Flash proprietär ist (genau so wie das veraltete VML). XAML ist eine SVG-Kopie von Microsoft. PDF, PS und AI sind geschützte Formate von Adobe. Zudem ist PDF und PS primär für den Druck gedacht und nicht für die Bildschirmdarstellung (CMYK-Farbraum vs. RGB-Farbraum). Im Moment braucht man zur Darstellung von SVG noch ein Plugin im Browser (oder einen separaten Viewer wie z.B. batik-squiggle). Opera ab Version 8 und einige Builds von Mozilla können einen Teil von SVG selber rendern. SVG ist ein XML-Dialekt. Man muss sich daher im klaren sein, dass aus einer SVG-Datei die Koordinaten wieder herausgerechnet werden können. Die SVG-Datei kann für eine Übertragung gz-komprimiert werden.
Die Frage ob Raster oder Vektor besser ist, kann hier nicht abschliessend beantwortet werden. Die Grösse der Rasterdatei hängt von der grösse der Karte ab. Die Grösse der Vektordatei von der Anzahl Objekte in der Karte. Vektoren können einfacher mit Interaktionen umgehen, dafür wird Raster schneller dargestellt. Insbesondere bei Grossen SVG-Dateien muss zuerst der ganze DOM-Tree aufgebaut werden. Das beansprucht erheblich Zeit, da es sich um eine rekursive Aufgabe handelt. Weiter hängt die Darstellung von Vektoren vom verwendeten Viewer ab. Der Flashplayer hat Mühe dünne Striche zu rendern, was sich sehr negativ aufs Kartenbild auswirken kann. Bei SVG hängt die Darstellung vom verwendeten Viewer ab. Wenn möglich sollte man geglättete Kanten verwenden. Das ist wiederum bei Vektor einfacher erreichbar als bei Raster. Eine spätere Bearbeitung ist bei Vektor vielfach auch einfacher als bei Raster. Fazit: Ideal ist wohl, wenn man von Fall zu Fall wählen kann ob man Raster oder Vektor brauchen will.
Kartenlayout edit
Bei einer (interaktiven Bildschirm-)Karte sollte möglichst viel Platz für die Karte selbst beansprucht werden. Es gibt jedoch Elemente, die nicht fehlen dürfen: Titel, Legende, Massstabsbalken, Quellenangabe, Copyright... Falls die Karte nicht nach Norden orientiert ist, sollte auch ein Nordpfeil vorhanden sein. Zum Teil kann man diese Informationen (insbesondere das Copyright) auf zusätzliche Seiten verbannen.
Die einzelnen Elemente (Legende, Titel, Karte, Massstab ...) sollten an virtuellen Linien gegeneinander ausgerichtet werden. Das Bild wird so einfacher erfassbar.
Als Grundregel für das Layout gilt KISS (keep it simple and stupid).
Schriften edit
Schriftschnitt edit
Für Druck und Bildschirm sind nicht die selben Schriften geeignet. Während beim Druck ohne weiteres Schriften mit Serifen (die kleinen Verzierungen wie es z.B. Times benutzt) verwenden kann, gibt es für den Bildschirm nur wenige Serifenschriften, die für Karten geeignet sind.
Um zu schauen, ob sich eine Schirft für den Bildschirm eignet, erstellt man eine Tabelle, mit dem immer selben Text, in der in jeder Reihe eine andere Schrift verwendet wird. Geeignete Schirften sind natürlich die Klassiker Helvetica (aka Arial), Univers, Frutiger oder Futura. Da diese Schnitte allerdings auch oft verwendet werden, sind sie abgedroschen. Zudem ist nicht auf jedem Computersystem nicht jede Schrift vorhanden, da diese auch einem Copyright unterliegen. Welche Schriften sich eignen, muss daher der/die KartenautorIn selber entscheiden.
Zu beachten ist, dass gute Schriften für verschiedene Punktgrössen unterschiedliche Zeichen verwenden. Der Grund darin liegt in der Kantenglättung der Schrift. Die Schrift kann nicht ohne Qualtitätsverlust vergrössert werden.
Schriftgestaltung edit
Für Bildschirmkarten ist es wichtig, nicht zu kleine Schriften zu setzten. Wenn die Schirft schräg sein soll, dann sollte sie gesperrt werden. Magere und schmale Schriften eignen sich selten als Bildschirmschrift.
Wenn Schriftzeichen an Schriftzeichen geschrieben wird, kann es passieren, dass die Abstände zwischen den Buchstaben nicht immer optimal sind. Manche Buchstaben will man näher drucken. Dazu braucht man die Technik des Unterschneidens. Vgl. dazu auch [[2]].
Schriftplatzierung edit
Punktsymbole edit
Bei Punktsymbolen legt man eine Reihenfolge fest, wie optimal die Schrift platziert wird. Eduard Imhof schulg vor, dass ein Name in erster Stelle oben rechts vom Symbol stehen soll, als 2. unten rechts, 3. oben links, 4. unten links, ... Andere Kartographen schlagen andere Reihenfolgen vor. Wichtig ist, dass man sich eine Regel vorgibt und sich an diese hält.
Beschriftung von Linien edit
Wenn möglich sollte der Text über der Linie stehen. Wenn die Linie gebogen ist (z.B. Krümmung eines Flusses), dann sollte der Schriftverlauf der Krümmung folgen. Flüsse versucht man zudem in Fliessrichtung anzuschreiben.
Beschriftung von Flächen edit
Flächen sollten entweder waagrecht beschriftet werden oder der Schriftzug sollte der Krümmung der Fläche folgen. Unglück ist, wenn der Schriftzug nur wenig gekrümmt ist, gekrümmt ist obwohl waagrecht möglich wäre, verschiedene Krümmungen aufweist oder teils gekrümmt, teils gerade ist. Weiter sollten schräge Balken oder (unnötige) Trennungen und Aufteilungen vermieden werden.
Dichte der Schrift in der Karte edit
Bei der Platzierung der Schrift in der Karte sollte man versuchen die Schriften zu entflechten und Knäuel zu vermeiden. Weiter sollte klar sein, worauf sich eine Schrift bezieht. Es ist z.B. sinnlos einen Schriftzug "Alpen" in eine Karte zu setzen, wenn nicht erkennbar ist, wo nun die Alpen sind und wo nicht.
Farben edit
Die richtige Farbwahl hat viel mit Psychologie zu tun. Mit Blau wird z.B. Wasser und Kalt assoziiert, mit Rot Warm und Neinstimmen (Rotlicht), mit Grün Natur, Wald, Wiesen. Vielfach reicht es, wenn ein/e KartenautorIn "aus dem Bauch" entscheidet. Im Zweifelsfall kann jemand um die Meinung gefragt werden. Auf jeden Fall soll die Farbe gewählt werden, die man am ehesten mit der Sache verbindet, also z.B. Wasser blau darstellen.
Die richtige Farbwahl hängt auch von der Grösse des Objektes ab, das dargestellt werden soll. Kleine Objekte (Punktsymbole, Linien) müssen mit kräftigen Farben, grosse Objekte (Flächen) mit sanften Farben dargestellt werden. Für eine Meeresfläche eignet sich z.B. rgb(204,204,255), für die Beschriftung des Ozeans oder Schiffsrouten rgb(0,0,255). (Die Werte gelten nur zur Illustration und sind nicht allgemein verbindlich oder gültig!)
Farbtreue edit
Bildschirme sind oft nicht farbkalibriert, daher erscheinen auf verschiedenen Bildschimen die Farben anders. Zusätzlich ist die Farbdarstellung auch noch vom Gammawert des Betriebssystems abhängig. Allgemein kann festgestellt werden, dass MS-Windows die Farben dunkler darstellt als Mac.
Massstab, Zoom, Minimalgrössen edit
Die Anzahl Objekte die in einer Karte dargestellt werden, hängt von der "Papiergrösse" ab. Auf der selben Fläche sollten immer gleich viele Objekte sichtbar sein. Es nützt nichts, viele Details zu zeichnen, wenn sie dann wegen der Auflösung verschwinden. Objekte, die eine bestimmte minimale Grösse unterschreiten sind mit Vorteil zu löschen. Wie gross diese Minimalgrössen sind kann leider auch nicht abschliessend bestimmt werden. Die Grösse ist von der Auflösung des Bildschirms abhängig. Die Grösse kann man mit einer Tabelle wie sie in Abbildung 6 in (Dahinden02) angegeben sind, bestimmen. Anhand von der Auflösung kann man feststellen, dass gedruckte Karten um den Faktor 2-3 vergrössert werden müssen, damit sie am Bildschirm lesbar dargestellt werden.
Für eine Karte muss ein bestimmter Massstab festgelegt werden und die Daten entsprechen angepasst ("harmonisiert") werden. Der Massstab muss anschliessend als Massstabsbalken visualisiert werden.
Animation und Interaktion edit
Animation edit
Bildschirmkarten können mit Animationen versehen werden. GIF und Flash bieten Bildbasierte animationen, SVG bietet eine zeitbasierte Animation. Die Animationen können in SVG mit JavaScript oder SMIL erstellt werden.
Die bildbasierte Animation hat den Nachteil, dass für jeden Zeitstand ein Bild übertragen werden muss. Das kann zu sehr grossen Dateien führen. Ein Film der 8 MB gross ist, kann mit der geeigneten Technik (zeitbasierte Animation, Überlagerung Vektor und Raster) unter umständen auf 50 KB verkleinert werden.
Bei einer Animation stellt sich immer die Frage, ob sie nützlich ist. Sie darf nicht zu schnell ablaufen, verschiedene Zeitstände müssen miteinander verglichen werden können, die Animation muss man anhalten können. Zudem ist es wichtig, dass die Karten miteinander wirklich vergleichbar sind, d.h. die Legende muss gleich bleiben.
Als typische Themen die sich für Animation eignen sind vergleiche von Zeitständen. Das kann z.B. das auftreten von Tollwutfällen in verschiedenen Jahren oder die Position von Flugzeugen zu einem bestimmten Zeitpunkt sein.
Interaktion edit
Mit Interaktionen versucht man einige Verluste gegenüber der gedruckten Karten wettzumachen. Mögliche Interaktionen sind Navigation durch ein riesiges Kartenblatt (zoomen, pannen), das Hervorheben von Ebenen und die Auswahl von Themen. Meistens muss eine Interaktion selbst programmiert werden. Eine Ausnahme bildet das Programm isiMap.
Kartographiesoftware (Auswahl) edit
- GMT: Generic Mapping Tool. GPL. Wird vorallem in der Geophysik benutzt. Benutzt den Datensatz Globe. Die Karten werden mit einem Shellscript erstellt. Als Resultat erhält man Postscript.
- Rastergraphik: GIMP, Adobe Photoshop
- Vektorgraphik: Inkscape (für SVG, leider noch nicht sehr weit ausgebaut), Adobe Illustrator (Ausgebaut, proprietär)
- Animation: RapidSVG, XStudioNext, Jasc WebDraw. Alle diese Programme haben ihre Problemchen. WebDraw wird nicht weiter entwickelt. Von RapidSVG konnte ich keine Lizenz erwerben (sie wollten es nicht verkaufen).
- Interaktion: isiMap. Beruht auf Batik. OpenSource. Im Moment noch nicht im Netz beziehbar. Bei Bedarf mailto: dahinden at carto.net
- Softwareübersicht im GISWiki
Gedruckte Karten vs. Bildschirmkarten edit
Unterschiede: Farbraum (Mehrfabrendruck/CMYK vs. RGB), Farbtreue, Auflösung(300/600dpi vs. 72/96dpi), Minimalgrössen. Interaktion, Blattgrösse, Themenauswahl, Links, Navigation
Diskussion edit
Dieser Abschnitt beinhaltet Punkte, die während der Präsentation diskutiert wurden. Leider erinnere ich mich nur eine beschränkte Anzahl der Voten.
- Schrift Vera-bitmap Opensource Schrift. Schriften sind z.T. in PDF eingebettet (ebenso SVG), aufpassen wegen Lizenz.
- X11 kann angeben, wie gross der Bildschirm ist. Das könnte ausgenutzt werden um eine Masstabszahl zu berechnen.
- Daten erheben: openstreetmap.org, alte Karten digitalisieren (die Genauigkeit von Karten aus dem 19. Jhdt. ist oft genügend).
- Vermutlich sind die meisten Karten in Wikipedia verstösse gegen das Copyright, da sie nicht selbst erhoben wurden. Eine Ausnahme bilden die automatisch generierten Karten zu der Lage von Ortschaften in Deutschland.
- Bitmaps lassen sich oft nur schwer bearbeiten. Zusätzlich eine einfacher zu bearbeitende Datei wäre wünschbar. Bei GMT reicht das Shellscript. Im Moment findet sich das aber nur sehr selten bei einer Karte.
- Das Gamma von Linux ist im Bereich von jenem von MS-Windows.
Weiterführende Literatur edit
- Dahinden02: Dahinden, T. (2002): Attractive Vectormaps - a call for well arranged webmaps. SVG.open:Carto.net Conference Proceeding, ETH Hönggerberg, Zürich.
- Hake02: Hake, G., Grünreich, D., und Meng, L. (2002) Kartographie. 8. Auflage. DeGruyter, Berlin
- Imhof65: Kartographische Geländedarstellung. DeGruyter, Berlin.
- Jenny03: Jenny, B. und St. Räber (2003): Karten im Netz - ein Plädoyer für mediengerechte Kartengrafik. In Asche/Hermann (Hrsg.): Web.Mapping 2 Telekartographie, Geovisualisierung und mobile Geodienste. S.57-76. Herbert Wichmann Verlag, Heidelberg.
- Spiess96: Attraktive Karten - ein Plädoyer für gute Kartengraphik. In: Kartographische im Umbruch - neue Herausforderungen, neue Technologien. Beiträge zum Kartographiekongress Interlaken 96.
- urlGoogle: http://jgwebber.blogspot.com/2005/02/mapping-google.html