Universität Würzburg

Institut für Informatik

Bachelorarbeit

Erstellung eines webbasierten Bildviewers für Schulwandbilder

zur Erlangung des akademischen GradesBachelor of Science

Autor: Sebastian Seitz <sebastian.seitz@stud-mail.uni-wuerzburg.de>MatNr. 1956091

Version vom: 16. Mai 2016

1. Betreuer: Prof. Dr. Frank Puppe2. Betreuer: MSc. Christian Reul

Kurzfassung 2

Thema der Bachelorarbeit

Planung und Umsetzung einer webbasierten Anwendung zur Anzeige von digitalisiertenSchulwandbildern und damit Teil des Projekts „Kallimachos“ für digitale Edition undquantitative Analyse der Universitätsbibliothek Würzburg.

Stichworte

Schulwandbilder, responsives Webdesign, Webanwendung

Zusammenfassung

Schulwandbilder waren zur Zeit, in der noch keine Möglichkeiten vorhanden waren,Graphiken und Bilder anzuzeigen oder zu projezieren, das einzige Mittel, Schülern denvermittelten Lerninhalt graphisch zu veranschaulichen. Um dieses Kulturgut zu be-wahren, digitalisiert die Universitätsbibliothek Würzburg zum Zeitpunkt derzeit ihrensehr umfangreichen Bestand von über 20.000 Schulwandbildern mit dem zugehörigenFundus an didaktischem Text- und Audiomaterial.

Diese Arbeit beschäftigt sich mit dem Design und der Implementierung eines webba-sierten Bildviewers, um eine gute Übersicht über die Schulwandbilder zu erhalten. Eswird ein kurzer Überblick über die verwendeten Werkzeuge und Software-Bibliothekenzur Webentwicklung gegeben werden. Auch werden die Anforderungen an Soft- so-wie Hardware dargestellt, unter deren Berücksichtigung ein Konzept des Bildviewersentwickelt und in die Tat umgesetzt wurde.

Abstract 3

Topic of this bachelor thesis

Planning and implementation of a webbased application for displaying digitized wall-charts and therefore part of the project “Kallimachos“ for digital editions and quanti-tative analysis of the Library of the University of Würzburg

Keywords

wallcharts, responsive webdesign, web application

Abstract

When there was a time when no opportunities of showing or displaying graphics andimages were given, wallcharts were the one and only probability of illustrating themediated learning content in class. To preserve this cultural property, the library ofthe University of Würzburg digitizes their very extensive stock of over 20.000 wallchartswith the associated fund of didactic text and audio material.

This thesis deals with design and implementation of a webbased image viewer to ob-tain a good overview of all the wallcharts. There will be a brief overview of the usedwebdesigning tools und software libraries. The requirements for software and hardwa-re are presented and with considering those a design of the image viewer is develo-ped.

Inhaltsverzeichnis 4

Inhaltsverzeichnis

Kurzfassung und Abstract 2

Abbildungsverzeichnis 5

Abkürzungsverzeichnis 5

1 Einleitung 71.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.2 Problemstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.3 Aufgabenstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.4 Aufbau dieser Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2 Stand der Technik 9

3 Grundlagen 123.1 Grundlegende Begriffe . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.2 Responsives Webdesign . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3 Datenaufbereitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.4 Wiederkehrende Probleme . . . . . . . . . . . . . . . . . . . . . . . . . 17

4 Entwurf 184.1 Softwareauswahl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.1.1 Webserver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.1.2 Datenbank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204.1.3 JavaScript- und jQuery-Bibliotheken . . . . . . . . . . . . . . . 21

4.2 Hardwareanforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . 224.3 Werkzeugübersicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5 Umsetzung 255.1 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255.2 Startseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.3 Unterseite „Zeit“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285.4 Unterseite „Ort“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305.5 Unterseite „Kategorie“ . . . . . . . . . . . . . . . . . . . . . . . . . . . 315.6 Hauptseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

6 Beurteilung 34

7 Fazit 35

8 Ausblick 36

Literatur- und Quellenverzeichnis 38

Eidesstattliche Erklärung 40

CD mit Programmcode 41

Abbildungsverzeichnis 5

Abbildungsverzeichnis

1 Startseite von historywallcharts.eu . . . . . . . . . . . . . . . . . . . . 112 BayInventa-XML-Codebeispiel . . . . . . . . . . . . . . . . . . . . . . . 143 Aufbau eines ADO.NET Datensets . . . . . . . . . . . . . . . . . . . . 154 „BayInventa-Reader”-Code . . . . . . . . . . . . . . . . . . . . . . . . . 165 Apache Tomcat 8.0 Manager . . . . . . . . . . . . . . . . . . . . . . . . 196 UML-Datenbank-Diagramm . . . . . . . . . . . . . . . . . . . . . . . . 217 Bildviewer-Freitext-Suche . . . . . . . . . . . . . . . . . . . . . . . . . 278 Bildviewer-Startseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Bildviewer-Unterseite Zeit . . . . . . . . . . . . . . . . . . . . . . . . . 2810 Bildviewer-Unterseite Ort . . . . . . . . . . . . . . . . . . . . . . . . . 3011 Bildviewer-Unterseite Kategorie . . . . . . . . . . . . . . . . . . . . . . 3112 Bildviewer-Hauptseite . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Abkürzungsverzeichnis 6

Abkürzungsverzeichnis

AJAX . . . . . . . . . . Asynchronous JavaScript and XML

CSS . . . . . . . . . . . . Cascading Style Sheets

CSV . . . . . . . . . . . Comma Seperated Values

DOM . . . . . . . . . . Document Object Model

GUI . . . . . . . . . . . Graphical User Interface

HTML . . . . . . . . . Hypertext Markup Language

IDE . . . . . . . . . . . . Integrated Development Environment

JS . . . . . . . . . . . . . JavaScript

JSON . . . . . . . . . . JavaScript Object Notation

JSP . . . . . . . . . . . . Java Server Page

PDF . . . . . . . . . . . Portable Document Format

PHP . . . . . . . . . . . PHP: Hypertext Preprocessor

SCP . . . . . . . . . . . Secure Copy (Datenübertragungsprotokoll)

SQL . . . . . . . . . . . Structured Query Language

TLS . . . . . . . . . . . Transport Layer Security

WTP . . . . . . . . . . Web Tool Platform

WWW . . . . . . . . . World Wide Web

XML . . . . . . . . . . . eXtensive Markup Language

1 Einleitung 7

1 Einleitung

In diesem Kapitel wird eine Übersicht über den derzeitigen Stand der bisher vorhan-denen Software und deren Möglichkeiten gegeben. Daraus ergeben sich dann die Ziel-setzung und Aufgabenstellung dieser Arbeit.

1.1 Motivation

Mit 3,4 Millionen Medien ist die Universitätsbibliothek Würzburg die fünftgrößte Uni-versitätsbibliothek Bayerns1. Über 20.000 Medien in Form von Schulwandbildern be-finden sich in einem gesonderten Lager der Forschungsstelle Historische Bildmedien desLehrstuhls für Systematische Bildungswissenschaft und bestehen aus den Bilder inklu-sive didaktischem Begleitmaterial in Textform, sowie aus Audioaufnahmen von Zeitzeu-gen. Damit hat die Universität Würzburg die größte Sammlung von Schulwandbildernin Europa. Um diesen Bestand zu verwalten und katalogisieren, steht momentan eineeigens dafür entwickelte Java-Applikation zur Verfügung, welche direkt auf die Daten-bank der Universitätsbibliothek zugreift.

Sie wird benutzt, um Metadaten wie Titel, Autor, Entstehungsort und Lagerort zueingescannten Schulwandbildern von Hand einzutragen und mit Hilfe dieses Daten-bestandes die Bilder in dem über mehrere Gebäude verteilten Lager wieder zu fin-den.

1.2 Problemstellung

Bei der Entwicklung dieser Java-Applikation war jedoch keine umfassende Übersichts-funktion vorgesehen, sodass es dem Benutzer mit der derzeit verwendeten Programm-version nicht möglich ist, sich mehrere hundert Schulwandbilder auf einmal anzeigen zulassen. Die Übersicht erfolgt stets in einer Liste, die zwar nach beliebigen Aspekten sor-tiert werden kann, jedoch existiert keine erweiterte Suche, mit der sich die Suchergeb-nisse beispielsweise auf einer Karte visualisieren lassen könnten.

Da die Anwendung aufgrund von Speicherbegrenzungen nur eine geringe Zahl an Su-chergebnissen anzeigen kann und sie keinen direkten Zugriff auf die Datenbank ermög-

1Stand 2012 - [Wik16b]

1 Einleitung 8

licht, fehlt bisher die Möglichkeit die Gesamtzahl der Medien zu bestimmen, sodass derBestand von 20.000 nur geschätzt werden kann.

Zwar ist dieses Applikation durch die Implementierung in Java bereits plattformunab-hängig, jedoch wäre es wünschenswert dieses auch auf Mobilgeräten wie Smartphonesoder Tablets geräteunabhängig benutzen zu können.

1.3 Aufgabenstellung

Im Zuge dieser Arbeit soll eine webbasierte Software von Grund auf neu entwickeltwerden, da die gewünschten, oben genannten Zusatzfunktionen nicht implementiertbarsind.

Der zu entwickelnde Bildviewer soll dem Benutzer die Schulwandbilder mit Metadatenübersichtlich darstellen und einfach zu bedienen sein. Ferner sollen die Bilder auto-matisch in Bildserien nach Zeitlinie, Entstehungsort und Kategorien zusammengefasstwerden. Eine Nutzerverwaltung ist hierbei nicht vorgesehen, es soll lediglich ein Pass-wort zur Anmeldung abgefragt werden. Dem Nutzer soll eine Freitext-, sowie eineerweiterte Suche zu Verfügung gestellt werden, um Bilder gezielt nach Beschreibungs-kategorien durchsuchen zu können.

Auch soll die Anwendung über einen Editor für die in einer anderen Bachelorarbeitbereits generierten bzw. aufbereiteten Metadaten verfügen, sodass diese einfach bear-beitet werden können.

Der Bildviewer soll mit der objektorientierten Programmiersprache Java entwickeltwerden, um später für andere Entwickler einfach erweiterbar zu sein.

1.4 Aufbau dieser Arbeit

In dieser Bachelorarbeit wird die entwickelte Software „Schulwandbilder digital - Bild-viewer“ vorgestellt. Zunächst wird ein Überblick über einige grundlegende Begriffegegeben. Danach werden die Softwareauswahl, Hardwareanforderungen und Software-Entwicklungswerkzeuge präsentiert. Anschließend folgt die tatsächliche Umsetzung mitumfangreicher Erklärung der Funktionalitäten und der Benutzung der Oberfläche, so-wie eine Bewertung der Arbeit und ein Fazit. Zum Schluss wird ein Ausblick auf mög-liche Weiterentwicklungen gegeben.

2 Stand der Technik 9

2 Stand der Technik

Dieser Abschnitt der Arbeit erörtert den gegenwärtigen Stand der Technik (state ofthe art) hinsichtlich bereits vorhandener Bildviewer und deren Aufbau.

Bei der Suche nach Internetseiten mit Schulwandbildern konnte nurhistorywallcharts.eu [His09] als öffentlich zugängliche Schulwandbilder-Sammlunggefunden werden. Da das Urheberrecht die Veröffentlichung von Bildersammlungen imInternet erschwert, weil es problematisch ist für einen großen Bestand zu ermitteln, obnoch Rechte vorhanden sind und alle Schulwandbilder veröffentlicht werden dürfen,finden sich nur sehr wenige Seiten, die überhaupt Bilder zeigen. Die meisten dieserWebseiten sind allerdings nur Online-Shops, die Schulwandbilder zum Kauf anbietenund von keinem großen Interesse sind, da sie die Bilder nur auflisten und keineSortierfunktionen besitzen.

historywallcharts.eu entstand in einer Kooperation zwischen der Universität Würz-burg, dem Nationalmuseum für Unterricht in Rotterdam und der Pädagogische Na-tionalbibliothek in Kopenhagen. Sie bietet einen Überblick über 3.700 Schulwandbil-der der einzelnen Kooperationspartner aus der Zeit von 1830-1990. Durch diese Mul-tinationalität lassen sich beispielsweise gut die Unterrichtsschwerpunkte der einzel-nen Länder erkennen und daraus Unterschiede und Gemeinsamkeiten schlussfolgern.[Gre11]

Da diese Internetseite, wie in Abbildung 1 auf Seite 11 zu sehen, klar strukturiertist und die Schulwandbilder nach Zeit, Ort und Themen zusammenstellt, werdeneinige Ideen von ihr übernommen. Zu nennen sind zum Beispiel die grau hinterlegteMenüleiste mit eingebauter Suchfunktion und die Möglichkeit die Bilder auf einerLandkarte anzuordnen. Zwar lassen sich die Bilder nach Themen durchsuchen und dieSuchergebnisse nach verschiedenen Kriterien sortieren, jedoch ist die Suche leider nichtausführlich genug. Sehr gut ist dagegen die Idee, die mit dem aktuell angezeigten Bildin Verbindung stehenden Wallcharts als Vorschau in einer kleinen Slideshow darzu-stellen, sodass sie in dieser Arbeit nachgeahmt werden soll. Ein anderes interessantesFeature ist die Zoomfunktion, die bei dieser Arbeit jedoch in anderer Weise umgesetztwurde, da historwallcharts lediglich das Bild, nicht aber einen einzelnen Ausschnittvergrößern kann. Der Zeitstrahl ist eine Adobe-Flash-Anwendung und damit nichtohne größeren Aufwand in der gleichen Weise umzusetzen.

2 Stand der Technik 10

Auch von Google gibt es eine Webanwendung, die zwar nicht für Schulwandbilder entwi-ckelt wurde, aber dennoch einen guten Einblick in die Möglichkeiten gibt, Kunstwerkewirkungsvoll auf einer Webseite zu präsentieren.

DasGoogle Art Project [Goo16] des Google Cultural Institute bietet Zugriff auf mehrals 45.000 Kunstwerke aus über 250 Museen. Neben einem virtuellen Rundgang, der aufdie gleiche Weise wie Google Streetview funktioniert und auch mit der gleichen Technikerstellt wurde, sind die Kunstwerke in extrem hoher Auflösung im Gigapixel-Bereichdargestellt, sodass man beim Heranzoomen tatsächlich einzelne Pinselstriche erkennenkann. Als weiteres Feature lassen sich eigene Sammlungen erstellen. Dies würde überden zeitlichen Rahmen dieser Arbeit hinausgehen und wird daher in Kapitel 8 fürzukünftige Weiterentwicklungen festgehalten.

Neben diesen beiden großen Internetauftritten gibt es keine weiteren nennenswerteProjekte. Zwar gibt es noch Bildersammlungen, wie zum Beispiel das Fotoarchiv desStadtarchivs Kiel2, jedoch sind diese optisch wenig ansprechend und geben daher keineAnreize für diese Arbeit.

2vgl. [Kie16]

2 Stand der Technik 11

Abbildung 1: Startseite von historywallcharts.eu

3 Grundlagen 12

3 Grundlagen

Dieses Kapitel behandelt die für diese Arbeit nötigen Grundlagen. Zunächst wird einÜberblick über grundlegende Begriffe gegeben. Dann der Ausdruck Responsive Webde-sign und die Vorgehensweise bei der Datenaufbereitung erläutert. Schließlich werdenwiederkehrende Probleme diskutiert.

3.1 Grundlegende Begriffe

AJAX

Asynchronous JavaScript and XML ermöglicht das Ausführen von HTTP-Anfragenohne die Seite neu laden zu müssen. Dadurch können Daten im Hintergrund nachge-laden werden, ohne dass der Benutzer etwas davon bemerkt.

Base64 und MD5

Die Hashfunktion MD5 wird meist dazu benutzt, Passwörter in einer Datenbank nichtim Klartext speichern zu müssen. Da es im Internet allerdings sehr umfangreicheMD5-Hash-Datenbanken gibt, in denen man mittlerweile jedes gehashte Passwortnachschlagen kann, wird das Passwort vor dem Hashen mit Base64 kodiert. Dabeiwerden immer 24 Bit nach einer vorgegebenen Ersetzungstabelle in 4 ASCII-Zeichenumgewandelt. So sind die beiden Verfahren für sich allein genommen reversibel,zusammengenommen bieten sie für den Passwortversand vom Browser zum Serveraber ein einigermaßen sicheres Hash-Verfahren.

jQuery

jQuery ist eine schnelle, umfangreiche, dafür aber sehr leichtgewichtige Erweiterungfür JavaScript. Neben einem verbesserten Event-Handling vereinfacht es gegenüberJavaScript den Zugriff auf DOM-Elemente und ermöglicht AJAX-Anfragen an denServer. jQuery hat die MIT-Lizenz3 und ist somit kostenfrei verfügbar und individuellanpassbar. [jQu16]

3siehe auch [Wan16]

3 Grundlagen 13

3.2 Responsives Webdesign

Um eine Internetseite geräteunabhängig zu machen, benötigt sie ein ResponsivesWebdesign. Unter diesem Begriff versteht man eine reaktions- und anpassungsfähigesWeboberfläche. Erfunden hat diesen Begriff der amerikanische Webdesigner EthanMarcotte, als er 2010 einen Artikel über Responsive Architecture gelesen hatte, dervon Bauwerken handelte, die sich an äußere Einflüsse wie das Sonnenlicht anpassenkonnten4.

Da es bis zu jener Zeit noch kaum Mobilgeräte gab, die über einen fortschrittli-chen Internetbrowser verfügten, der mehr als nur Text und einfache Bilder anzeigenkonnte, waren die meisten Internetseiten statisch und nur für Desktop-Browserentwickelt worden. Wollte ein Betreiber seine Webseite für Mobilgeräte anbieten,musste er eine separate Mobilseite erstellen.

Das änderte sich jedoch spätestens mit der Einführung des iPhones im Januar2007. Erstmals besaß es einen vollwertigen Browser, war über einen Touchscreenbedienbar und musste nicht wie einen PocketPC mit Eingabestift bedient werden. Esfolgten viele Firmen dem Beispiel von Apple und schon wenige Jahre später gab es eineunüberschaubare Zahl an verschiedenen Mobilgeräten mit individuellen Displaygrößen.

Webseiten-Betreiber mussten sich deswegen entscheiden, ob sie mehrere verschiedeneTemplates anlegen oder lieber auf eine sich der Displaygröße anpassende Webseiteumrüsten wollten. Für neue Internetseiten steht es zwar außer Frage, wie man vorgehensollte, für bestehende ist es jedoch ein erheblicher Aufwand die Desktop-Seite auf eineresponsive umzustellen, da man die Seite komplett neu erstellen muss.

Da der zu entwickelnde Bildviewer auf verschiedenen Geräten angezeigt werdenkönnen soll, muss er responsiv sein. Als „reagierende“ Webseite muss er folgendeMerkmale besitzen:

• flexibles Gestaltungsraster (Grid)

Um Elemente, wie Textblöcke oder Bilder, anzuordnen wird ein Grid benötigt.Es ermöglicht eine klare und einheitliche Seitenstruktur, sodass die Seite besserlesbar wird.

4vgl. [Mar10]

3 Grundlagen 14

• flexible Bilder und Medien

Damit sich nicht nur Text, sondern auch andere Medien in das Gestaltungsrastereinpassen, müssen Bilder und Videos mit Hilfe von CSS flexibel in Höhe undBreite gemacht werden.

• Mediaqueries (mit Hilfe von CSS3)

Da Grids allein auf sehr kleinen Bildschirmen nicht sinnvoll sind, werden zusätz-lich Mediaqueries benötigt, die bestimmte Variablen wie die Bildschirmhöhe und-breite in CSS als Variable zur Verfügung stellen, um dadurch das Design anbestimmten Stellen beeinflussen zu können. [Zil13]

3.3 Datenaufbereitung

Für die Entwicklung des Bildviewers wird eine geeignete Datenbank für Schulwandbil-der benötigt, die bisher nicht vorhanden ist. Sie wurde zusammen mit Jakob Martensentwickelt, der in einer parallelen Bachelorarbeit einen Input in die gleiche Datenbankerzeugt. Beispieldaten für diese wurden aus einer Datenbank der Universitätsbiblio-thek gewonnen, die dort im XML-Format vorliegen. Der Ursprung dieser Daten ist dasProjekt „BayInventa“. Es diente dem Aufbau einer bayerischen Bilderdatenbank, dasvom Schulmuseum Lohr begonnen wurde.[Uni13]. Die Schulwandbilder, die in Kapitel5 zu sehen sind, stammen folglich nicht aus dem Bestand der Universitätsbibliothek,da deren Bilder noch nicht digitalisiert wurden.

Abbildung 2: BayInventa-XML-Codebeispiel

3 Grundlagen 15

Das Datensatz-Beispiel in Abbildung 2 zeigt einen Ausschnitt aus der BayInventa-Datenbank. Nicht relevante DataColumn-Zeilen wurden zwecks Übersichtlichtkeitweggelassen, da jede DataRow aus insgesamt 45 DataColumns besteht.

Das XML-Datenbankschema entspricht der Architektur von ADO.NET, einerSammlung von Klassen zum Datenbankzugriff für das .NET Framework von Microsoft(vgl. Abbildung 3).

Abbildung 3: Aufbau eines ADO.NET Datensets

Die XML-Datei kann in diesem Format jedoch nicht direkt eingelesen werden undwird deshalb zunächst ins CSV-Format konvertiert. Dazu wird ein AutoIt-Skript5 (vgl.Abbildung 4) entwickelt, das die Daten aufbereitet und in eine CSV-Datei schreibt.Nicht benötigte Datensätze, die keinen Bezug zu Schulwandbildern haben, werden dabeigleich aussortiert.

Es werden nur die DataRows, welche die DataColumn mit dem ColumnName „Ob-jektTyp“ und dem ColumnValue „Schulwand*“ enthalten, weiterverarbeitet. Aufgrundvon Inkonsistenzen bei der Schlagworttrennung bzw. wechselnden Trennzeichen müssennoch einige Ersetzungen mit regulären Ausdrücken (Regex) vorgenommen werden, umdie Schlagwörter zuverlässig zu separieren. Bei anderen DataColumns, wie zum Beispielder Objektbezeichnung (entspricht dem Titel des Bildes), müssen Anführungszeichenund Zeilenumbrüche herausgefiltert werden, da sie beim Einfügen und Auslesen derDatenbank zu Schwierigkeiten führen.

Um die gewonnenen Datensätze schließlich in die Datenbank zu speisen, wurde derInhalt der CSV-Datei mit einem simplen PHP-Skript in die Datenbank importiert.Da die XML-Datei keine Lokaldaten, Serien oder Motive enthält, müssen sie manuelleingegeben werden.

5für weitere Informationen siehe https://autoit.de/

3 Grundlagen 16

Abbildung 4: „BayInventa-Reader”-Code

3 Grundlagen 17

3.4 Wiederkehrende Probleme

Ein Problem, vor allem beim Einfügen der Daten in die Datenbank, waren sich ändern-de Trennzeichen bei den Schlagwörtern, aber auch HTML-Sonderzeichen, welche nichtrichtig dargestellt werden konnten, bzw. erst umständlich ersetzt werden mussten. Dasgrößte Ärgernis war der ständige Wechsel zwischen einfachen und doppelten Anfüh-rungszeichen, die fortlaufend Fehlermeldungen im Browser hervorriefen, wenn sie mitjQuery in die Webseite eingefügt wurden.

Der Upload des Quellcodes mit Git ging nicht immer fehlerfrei vonstatten und gelegent-lich fehlten Dateien oder kompilierte Java-Klassen waren im falschen Ordner. Daherwurden die Daten gegen Ende, als die Webseite bereits fertig war und nur noch kleine-re Änderungen gemacht wurden, mit SCP (Secure Copy, Datenübertragungsprotokoll)direkt auf den Webserver geladen.

4 Entwurf 18

4 Entwurf

Dieses Kapitel beschreibt die Vorgehensweise bei der Soft- und Hardwareauswahl aufBasis der in Kap. 1.3 definierten Anforderungen. Es werden der Webserver, die Daten-bank, verschiedene Programmierschnittstellen (APIs) und das ProgrammierwerkzeugEclipse vorgestellt.

4.1 Softwareauswahl

4.1.1 Webserver

Um Installations- und Wartungsaufwand gering zu halten und um Unabhängigkeitvom Betriebssystem zu erhalten, soll eine Webanwendung entwickelt werden. Bei einersolchen Anwendung nach dem Client-Server-Modell liegen die rechenlastigen Teile derAnwendung auf dem Webserver, während der Benutzer lediglich einen gewöhlichenWebbrowser benötigt, wie er auf stationären als auch mobilen Endgeräten zu findenist. Der Webservever verarbeitet dabei im Hintergrund die angeforderten Daten undsendet das Ergebnis in Form von HTML-Code an den Browser, der diesen darstellt.Hierzu ist eine Internetverbindung mit guter Übertragungsrate erforderlich, da dieBilder je nach Auflösung einige Megabyte groß sein können. Das stellt zumindest aufdem gesamten Campus der Universität Würzburg durch ein weitreichendes und nahezulückenloses WLAN-Netz jedoch kein Problem dar.

Unter der großen Zahl derzeit verfügbarer Webserver wurde der Open-Source-Webserver Apache Tomcat in der aktuell stabilen Version 8.0 ausgewählt, da ver-gleichbare Produkte wie jBoss zu überladen sind bzw. Funktionen bieten, die für denBildviewer nicht benötigt werden. Er ermöglicht Webentwicklung mit Hilfe der objek-torientierten Programmiersprache Java auf Basis von Java Server Pages (JSPs) undJava-Servlets. Letztere beinhalten die rechenintensiven Operationen und werden schonvor Aufruf, sogar noch vor Starten des Webservers kompiliert, während die JSPs alsDarstellungsseite dienen.

Die Abbildung 5 zeigt die Oberfläche des Tomcat Web Application Managers. Sie istgut strukturiert und besitzt folgende Funktionalitäten:

4 Entwurf 19

Abbildung 5: Apache Tomcat 8.0 Manager

4 Entwurf 20

• Applications

In diesem Abschnitt lassen sich alle Web-Projekte einsehen. Angezeigt wird derStatus und die Anzahl der laufenden Sitzungen. Mit Commands kann die Appli-kation gestartet, gestoppt, vom Webserver genommen oder neugeladen werden.Letzteres ist wichtig für die in Kapitel 4.3 beschriebene Vorgehensweise zum Än-dern des Codes.

• Deploy

Hier können Projekte als Web Application Archive oder umgangssprachlich auchWAR-Datei hochgeladen und veröffentlicht (deployed) werden.

• Diagnostics

Mit diesem Tool lassen sich Speicherlecks finden, die beim Stoppen, Neuladenoder Undeployen auftreten. Da durch Speicherlecks einzelne Programme oderauch der Server abstürzen könnte, ist es ratsam, von Zeit zu Zeit die laufendeApplikation auf solche zu untersuchen6.

4.1.2 Datenbank

Grundlage des Bildviewers ist ein gut strukturierter Datenbestand in Form einer re-lationalen Datenbank. Hierzu wurde der MySQL-Server v5.5.49 7 und das freie Ad-ministrationsbackend phpMyAdmin installiert. Letzteres erlaubt einen unkomplizier-ten Zugriff auf die MySQL-Datenbank und bietet neben einer gut strukturiertenDatenübersicht auch verschiedene Werkzeuge zur Datenbankerstellung- und ände-rung.

Kern der Datenbank ist die Entitätsklasse wallcharts. In ihr sind ID, Titel, Verlag,Entstehungs- und Veröffentlichungszeit, Ort, Beschreibungstexte sowie der Dateinamegespeichert. Autor (authors), Kategorie (categories), Motiv (subjects) und Serie (sets)sind in jeweils einer eigenen Tabelle gespeichert und stehen über die Verknüpfungsta-bellen hasAuthor, hasCategory, hasSubject und inSet mit wallcharts in Relation.In Abbildung 6 ist die Datenbank als UML-Diagramm dargestellt.

6für weitere Informationen vgl. [Wik16a]7vgl. [Ora16b]

4 Entwurf 21

Abbildung 6: UML-Datenbank-Diagramm

4.1.3 JavaScript- und jQuery-Bibliotheken

Damit die in Kapitel 1.3 geforderten Funktionen implementiert werden können, wer-den zusätzliche JavaScript- und jQuery-Bibliotheken benötigt, da sie Hilfsfunktionenbereitstellen, die JavaScript und jQuery nicht besitzen.

• DarkroomJS

Dies ist eine von Matthieu Moquet (alias MattKetmo) auf GitHub unter der MIT-Lizenz veröffentlichte Bibliothek zur Bildbearbeitung. Sie ermöglicht das Rotierenund Ausschneiden von Bildern auf Basis von FabricJS, welches zur einfachenHandhabung von HTML5-Canvas entwickelt wurde. Ferner lassen sich erstellteBildausschnitte auch lokal speichern.

• GoogleMaps-API-v3

Zur Anzeige von Landkarten und zum Setzen von individuellen Markern perJavaScript eignet sich am besten die von Google kostenfrei angebotene API. Die

4 Entwurf 22

einzige Bedingung hierfür ist, dass die Webseite, auf der die Bibliothek eingesetztwird, für die Öffentlichkeit kostenfrei verfügbar ist.

Sie ermöglicht neben der Anzeige der Straßenkarten viele verschiedene Einstel-lungsmöglichkeiten. So lassen sich beispielsweise nicht benötigte Steuerelemente,wie Zoomstufenregler, Streetview und Umschalter zwischen verschiedenen Kar-tenansichten deaktivieren, wie es bei der in die Applikation implementierten Kar-te der Fall ist.

• jQuery Zoom

Um das Schulwandbild nicht immer in voller Auflösung laden zu müssen und da-mit den Seitenaufbau zu beschleunigen, besitzt die Webseite eine Zoomfunktion.Mit dieser erhält man durch Anklicken des Bildes einen Ausschnitt des in vollerAuflösung im Hintergrund nachgeladenen Schulwandbildes erhält.

• Lightslider

Die auf jQuery aufbauende Bibliothek bietet ein leichtgewichtiges Bilderkarus-sell, um Bildersammlungen ansprechend darzustellen. Der Slider verfügt überviele Einstellungsmöglichkeiten, von denen aber nur wenige benötigt werden. Solassen sich zum Beispiel Slide-Geschwindigkeit oder individuelle Bildgröße ein-stellen oder eine lightGallery einfügen.

• noUiSlider

Für die Auswahl von Zeitspannen zur erweiterten Suche wurde diese Erweiterungfür JavaScript ausgewählt. Sie stellt eine Vielzahl von Funktionen zur Verfügung,von denen jedoch nur wenige benötigt wurden. So können ein oder zwei Schie-beregler eingeblendet werden, die Schieberichtung und die Skalierung oder auchdie Beschriftung der Regler ändern. Der Bildviewer benutzt zwei Regler, die sichunabhängig voneinander verschieben lassen.

4.2 Hardwareanforderungen

Während der Entwicklung des Bildviewers läuft der Webserver meistens auf einemlokalen PC. In dieser Phase sind die verfügbaren Ressourcen meist ausreichend.Sobald die Applikation veröffentlicht werden soll, muss sie auf einen aus dem Internet

4 Entwurf 23

erreichbaren Server portiert werden. Da gemietete oder auch eigene Server skaliertwerden müssen, sind die genauen Hardwareanforderungen anzugeben.

Oracle empfiehlt für das Java EE 7 SDK folgende Hardware8:

• Minimum memory: 1 GB

• Recommended memory: 2 GB for Windows platforms, 1 GB for non-Windowsplatforms

• Minimum disk space: 250 MB

• Recommended disk space: 500 MB

Auf dem gleichen Webserver laufen noch weitere Webseiten, deshalb wurde der Ar-beitsspeicher auf 4 Gibabyte festgelegt. Der Festplattenspeicher kann im Vorfeld nochnicht definiert werden, lässt sich aber jeder Zeit erweitern, da der Server eine virtuelleMaschine und der Speicher dynamisch alloziert ist. Zum Zeitpunkt der Arbeit ist erauf 50 Gigabyte begrenzt, da bislang nur circa 3.000 Schulwandbilder in einer gerin-gen Auflösung mit einer durchschnittlichen Dateigröße von 50 Kilobyte vorliegen. Mitdieser Hardware laufen der Bildviewer, das Backend, sowie eine weitere Applikationbislang tadellos.

4.3 Werkzeugübersicht

Zur Webentwicklung wurde die integrierte Entwicklungsumgebung (IDE) Eclipse ge-wählt. Dabei handelt es sich um ein plattformunabhängiges und kostenloses Entwick-lungstool, das sich durch verschiedenste Plug-Ins erweitern lässt. Für diese Arbeit wur-de Eclipse in der Version 4.5 (Mars) RC2 benutzt. Zusätzlich wurden die Web ToolPlatform (WTP) 3.7 und der Eclipse Team Provider EGit benötigt. Die WTP erwei-tert Eclipse um Werkzeuge zur Web und Java EE-Anwendungs-Entwicklung. Mit EGitkann Eclipse auch auf die Versionsverwaltung Git zugreifen und ermöglicht dadurch dieArbeit in Teams oder, wie in diesem Fall, eine Datensicherung und das Transferierendes Codes auf den Webserver.

8vergleiche [Ora16a]

4 Entwurf 24

Der Java-Programmcode wird schon vorab vom lokal installierten Tomcat-Webserverkompiliert und anschließend auf den GitLab-Server der Informatik-Fakultät der Univer-sität hochgeladen. Von dort aus werden die Daten durch den git pull-Befehl auf die vir-tuelle Maschine heruntergeladen und über die in Kapitel 4.1.1 beschriebene Manager-Oberfläche neu eingelesen. Insofern der Upload keine Änderungen an den Java-Klassenenthält, muss der Manager nicht aufgerufen werden. Stattdessen muss nur die Webseiteim Browser neu geladen werden und es werden automatisch die richtigen, sprich neuenDaten vom Server angefordert.

5 Umsetzung 25

5 Umsetzung

In diesem Kapitel wird die Implementierung des Bildviewers und die Vorgehensweisebei der Umsetzung beschrieben.

Um in möglichst allen gängigen Browsern lauffähig zu sein, wird ein CSS-Frameworkbenötigt, welches zudem für den Entwickler eine große Arbeitserleichterung ist, dasich der Programmieraufwand deutlich reduziert. Durch die Vielzahl an unterstütztenBrowsern kann man sich auf die Funktionalitäten der Webanwendung konzentrierenund muss nur kleine Änderungen im CSS-Code vornehmen, damit die Seite korrektdargestellt wird.

Unter den vielen frei im Internet verfügbaren CSS Frameworks, wurde MaterializeCSS für den Bildviewer ausgewählt, da es sich an dem seit Android 5.0 Lollipop immerbeliebter gewordenen Material Design von Google orientiert und alle benötigten Funk-tionen bietet9. Auch unterstützt es das geforderte Responsive Webdesign (siehe Kapitel3.2).

5.1 Navigation

Die Menüleiste ist applikationsweit einheitlich. Die obere, blaue Menüleiste beinhaltetLogin, Informationen und Kontaktadressen. Nach Klick auf den jeweiligen Menüpunktöffnet sich ein Dialogfenster (modal window), um ein Neuladen der Seite zu vermei-den.

• LoginDurch das Login erhält der Nutzer Zugang zum Backend wallchart-meta-input,das von Jakob Martens in einer anderen Arbeit entwickelten. Hier kann manalle Bilder einsehen und die dazugehörigen Daten bearbeiten bzw. neue Bilderhinzufügen. Auf der Hauptseite werden zudem Bearbeitungsoptionen eingeblen-det, um neue Schlagworte hinzuzufügen und bestehende zu bearbeiten oder zulöschen.

Der Benutzer muss sich mit dem Administrationspasswort anmelden. Eine Benut-zerverwaltung ist nicht vorgesehen, da nur sehr wenige Anwender Zugang dazuerhalten. Das Passwort wird beim Login vor dem Senden Base64 kodiert und mit

9siehe auch [WCML16]

5 Umsetzung 26

MD5 gehasht. Damit wäre der Passwort-Hash zwar durch Mitlesen des Netzwerk-verkehrs abfangbar, allerdings ist dieser im universitätseigenen WLAN RZUWsecverschlüsselt. Sollte dennoch ein Umgehen des Logins gelingen, so ist kein Zugriffauf irgendeine Art von vertraulichen Daten, sondern nur auf den Metadateneditorim Backend möglich.

• InfoDieses Dialogfenster informiert den Nutzer über den Zweck des Bildviewers. DerInformationstext vorwiegend von der Kallimachos-Seite10 stammt.

• KontaktZur Meldung von Fehlern oder Verbesserungsvorschlägen, kann der Nutzer eineE-Mail an die im Kontakt-Modal genannte E-Mail-Adresse senden. Hier sind allePersonen der verschiedenen Arbeitsgruppen des Kallimachos-Projekt aufgelistet.

In der unteren, orangefarbenen Menüleiste navigiert der User durch die Unterseitenoder kann Schulwandbilder direkt suchen.

• Zeit, Ort, KategorieDiese Links führen zu der jeweiligen Unterseite die in den Abschnitten 5.3 bis 5.5näher beschrieben werden. Wenn man sich auf einer Unterseite befindet, ist derjeweilige Link andersfarbig hinterlegt.

• SucheMit Klick auf das Feld Freitextsuche öffnet sich ein Eingabefeld. Über den ein-gegebenen Text wird die Datenbank hinsichtlich Titel, Beschreibung, als auchSchlagworten durchsucht. Die Funktion erweiterte Suche bietet zusätzlich nochdie Möglichkeit die Suchergebnisse nach weiteren Kriterien, wie Serie, Motiv undHerausgeber, zu filtern.

Bei der in Abbildung 7 dargestellten Suche wurde beispielhaft nach dem Be-griff würzburg gesucht. Sofern das gesuchte Wort im Titel des Schulwandbildesvorkommt, wird es auf der Ergebnisseite farblich hinterlegt. Bei den nicht mar-kierten Bildtiteln kommt der Suchbegriff entweder in der Beschreibung oder inden Schlagworten vor.

10http://kallimachos.de/kallimachos/index.php/Schulwandbilder:Main

5 Umsetzung 27

Abbildung 7: Bildviewer-Freitext-Suche

5.2 Startseite

Abbildung 8: Bildviewer-Startseite

5 Umsetzung 28

Die Startseite (siehe Abbildung 8) begrüßt den Benutzer mit einer klar strukturierten,funktionalen Oberfläche. Am oberen Bildrand befinden sich die beiden Menüleisten,die in Abschnitt 5.1 beschrieben sind. Am unteren Bildschirmrand wird dem Besucherein Begrüßungstext angezeigt.

Durch Anklicken des blau hinterlegten Fragezeichens wird dem User eines von zweiverfügbaren Videos per Zufall eingeblendet, in dem Zeitzeugen den Zweck von Schul-wandbildern anschaulich erklären. Ein nochmaliges Betätigen des Buttons zeigt immerden jeweils anderen Film.

In der Mitte ist eine Auswahl, bei der man sich für eine der Unterseiten Zeit,Ort oder Kategorie entscheiden kann. Diese werden im Folgenden kurz vorge-stellt.

5.3 Unterseite „Zeit“

Abbildung 9: Bildviewer-Unterseite Zeit

5 Umsetzung 29

Abbildung 9 zeigt die Ansicht, bei der die Schulwandbilder nach Jahren gruppiertsind. Mit dem Schieberegler lässt sich der Zeitraum begrenzen, in dem die Bilderentweder veröffentlicht wurden. Möchte man nach dem Entstehungsjahr suchen, solässt sich dies im Aufklappmenü Suche eingrenzen einstellen. Für den Schiebereg-ler wurde die in Kapitel 4.1.3 beschriebene JavaScript-Bibliothek noUiSlider verwen-det.

Durch einen Klick auf das rot hinterlegte Plus klappt das Menü Suche eingrenzen auf, indem eine zusätzliche Filterung nach Freitext, Kategorie, Serie, Motiv und Herausgebermöglich ist. Auf der in Abb. 9 dargestellten Seite wurde beispielhaft nach dem Zeitraum1700-1958 und der Herausgeber Der neue Schulmann gefiltert.

Die Suchergebnisse werden dann nach Jahren aufsteigend sortiert ausgegeben, wo-bei immer nur die ersten vier Schulwandbilder des jeweiligen Jahres gezeigt wer-den und erst nach einem Klick auf alle anzeigen die restlichen eingeblendet wer-den. Der Button RESET setzt mittels eines jQuery-Aufrufs alle Formularfelder zu-rück.

5 Umsetzung 30

5.4 Unterseite „Ort“

Abbildung 10: Bildviewer-Unterseite Ort

Auf der Weltkarte werden alle Schulwandbilder, die über eine Ortsangabe verfügen, mitden Google-Maps-typischen Markern angezeigt. Darunter sind 30 zufällige Bilder ohneOrt als Bildslider dargestellt. Die erweiterte Suche lässt sich mit der rot hinterlegtenLupe rechts unten auf der Karte ein- und ausblenden. Sie bietet die gleichen Funktionen,wie die im vorangegangenen Abschnitt erwähnte Suche, nur dass der Schiebereglerkleiner in der linken Ecke platziert wurde.

Die Marker werden im Hintergrund mittels AJAX geladen und vom Browser perJavaScript auf der Karte platziert. Beim Anklicken eines Markers erscheint ein Info-Window mit Bildtitel, Thumbnail und einem Link zur Hauptseite.

5 Umsetzung 31

5.5 Unterseite „Kategorie“

Abbildung 11: Bildviewer-Unterseite Kategorie

Auf dieser Unterseite sind die Bilder nach dem Anfangsbuchstaben der Kategorie grup-piert. Der Benutzer wählt zunächst einen Anfangsbuchstaben aus und erhält alle Ka-tegorien, die mit diesem Buchstaben beginnen. Die Zahl in Klammern gibt dabei dieAnzahl der Schulwandbilder an, die in diese Kategorie eingeordnet sind. Nicht verfüg-bare Buchstaben werden im Auswahlfeld automatisch ausgegraut (in diesem BeispielO, X und Y). Wählt der Nutzer eine Kategorie aus, so werden ihm auf einer nächs-ten Unterseite (ohne Abbildung) die zu der Kategorie gehörenden Schulwandbilder imgleichen 4xN-Raster angezeigt.

5 Umsetzung 32

5.6 Hauptseite

Abbildung 12: Bildviewer-Hauptseite

Hat der User sich für ein Bild entschieden, wird ihm die Hauptseite angezeigt. ImZentrum befindet sich das Schulwandbild, von dem man durch einen einfachen Klickauf selbiges einen vergrößerten Ausschnitt erhält. Der Zoombereich lässt sich mittelsBewegen des Mauszeigers frei verschieben.

Darunter findet sich die Beschreibung, die man durch Anklicken des Plus-Symbols auf-klappen muss, da sie sehr lang sein kann und der Übersichtlichkeit abträglich wäre.Daran schließt sich die Übersicht über alle gespeicherten Daten und das Werkzeug zurErstellung von Bildausschnitten. Kategorien, Serie und Motiv im Reiter METADA-TEN lassen sich direkt hinzufügen, bearbeiten und löschen, insofern sich der Benutzerauthentifiziert hat. Man muss dazu nicht erst in den Metadateneditor wechseln, umdiese Änderungen vorzunehmen.

5 Umsetzung 33

Am rechten Rand werden weitere Bilder vorgeschlagen, die mit dem ausgewähltenSchulwandbild in Verbindung stehen. Je nach Verfügbarkeit erscheinen hier lightSliderzu gleichem Künstler, Motiv oder gleicher Kategorie bzw. Serie. Sind für das Bild zudemLokaldaten verfügbar, wird über den vorgeschlagenen Bildern eine kleine Landkarteangezeigt, auf der das Bild markiert ist.

6 Beurteilung 34

6 Beurteilung

Da keine Softwaretests vorgesehen sind, kann der Bildviewer nur subjektiv bewertetwerden. Dazu wurde die Software den Mitarbeitern der Forschungsstelle in regelmä-ßigen Abständen während der Entwicklung vorgestellt und diese nach ihrer Einschät-zung gefragt. Hierdurch konnten kleinere Mängel behoben werden, wie zum Beispielein schlechter Farbkontrast auf einem älteren Beamer, fehlende farbliche Hinterle-gung der Menüpunkte oder die Anordnung der Webseitenelemente wie Bilder undSchriften. Dadurch wurde nach jedem Treffen eine Änderung am Layout vorgenom-men.

Während dieser Besprechungen stellten sich aber auch immer wieder Änderungenbzw. Erweiterungen der Anforderungen heraus. So war anfangs nur das Publika-tionsjahr in der Datenstruktur vorgesehen. Hierzu kam im Verlauf der Arbeit dasEntstehungsjahr dazu. Dadurch musste auch die erweiterte Suche angepasst wer-den.

Der Bildviewer enthält daher neben den ursprünglichen Anforderungen (Kap. 1.3) eineReihe weiterer Funktionen. Durch die zeitliche Begrenzung der Bachelorarbeit konn-ten jedoch nicht alle neuen Anforderungen realisiert werden. Diese sind in Kapitel 8aufgelistet, um sie für zukünftige Entwicklungen parat zu haben.

7 Fazit 35

7 Fazit

Im Verlauf dieser Bachelorarbeit wurde erfolgreich ein webbasierter Bildviewerentwickelt, der sich produktiv einsetzen lässt. Es wurde weitestgehend versucht dieWünsche und Anregungen der Testanwender umzusetzen, jedoch gibt es noch eineganze Menge Ideen, die im nächsten Kapitel zusammengefasst sind.

Damit der Bildviewer auch für andere Bilder, wie Kunstwerke oder eingescannteBuchseiten eingesetzt werden kann, muss die Anwendung so weiterentwickelt werden,dass man die Datenbank dynamisch um weitere Felder erweitern kann. Dies ist not-wendig um objektspezifische Informationen speichern zu können.

Dazu müssen die Attribute, die gespeichert werden sollen, durchnummeriert werden,um sie dann von der Software dynamisch zuweisen zu lassen. Dann sollte jedochüber eine andere Datenstruktur nachgedacht werden, da eine relationale Datenbankeventuell etwas zu umständlich wäre. Es könnte zum Beispiel eine JSON-Datei benutztwerden, da hier nur eine neue Datei erstellt werden muss, und nicht eine ganzeMySQL-Datenbank.

Neben dem Backend muss auch der Bildviewer geändert werden, um die dy-namischen Attribute anzeigen zu können. Der Administrator könnte dann auchentscheiden, ob bestimmte Attribute ausgeblendet werden sollen. Auch müsste erangeben, zu welchen Attribute Sammlungen erstellt werden sollen.

Diese Weiterentwicklung könnte auch dafür benutzt werden, Videos und Audi-odateien zu verschlagworten und nach verschiedenen Kriterien zusammenzustellen.Der Vorschauslider besitzt bereits die Möglichkeit Audio- und Videodateien darzu-stellen und es wären nur kleinere Änderungen nötig, um diese Medien zum Beispielauf der Unterseite Zeit zwischen den Schulwandbildern anzuzeigen. Es wäre zwareinfacher die Sammlungen nach Medium zu trennen, jedoch wäre der Bildviewer auchin der Lage Bilder, Audiodateien und Videos zu kombinieren.

8 Ausblick 36

8 Ausblick

In diesem Abschnitt sind die während der Arbeit neu enstandenen Anforderungenaufgelistet.

Um dem Nutzer die Erstellung, Speicherung und Weitergabe eigener Bildersammlun-gen zu ermöglichen, wird eine Benutzerverwaltung benötigt. Im Zuge dessen kannman eine Kommentarfunktion einführen, um damit Vorschläge zur Verbesserungdes Bildviewers sammeln zu können. Ferner könnte man die Nutzer in einem Forumzu einer Diskussion über die Schulwandbilder einladen, um damit Vorschläge zurVerbesserung des Bildviewers sammeln zu können.Es werden dabei keine vertraulichen Daten wie Bankverbindungen versendet, dieDritte durch Netzwerkmanipulation abfangen könnten, dennoch sollte die Client-Server-Verbindung mit TLS verschlüsselt werden. Dies würde allerdings eine diffizileNeukonfiguration des Webservers erfordern.

Zur Verbesserung der Übersichtlichkeit der Karte sollten auf der Unterseite Ort(vgl. Abschnitt 5.4) die Marker kleiner dargestellt werden, da sich diese in der jetzigenForm gegenseitig verdecken. Dies passiert allerdings nur, wenn die Zoomstufe zuniedrig gewählt ist.Wenn die Datenbank eines Tages vollständig gefüllt ist, so ist auch ein Cachender Karte vorteilhaft. Dadurch wird die Ladezeit gerade auf leistungsschwachenEndgeräten verkürzt, weil die Marker nicht vom Browser platziert werden müssen,sondern eine Karte geladen wird, auf der bereits alle Marker vorhanden sind.Eine weitere Idee wäre die Erweiterung um eine Vollbildfunktion.

Auf der Unterseite Zeit sowie bei der Freitextsuche kann der Seitenaufbau be-schleunigt werden, indem die Suchergebnisse auf mehrere Seiten verteilt werdenund zum Beispiel immer nur 16 Suchergebnisse pro Seite dargestellt werden. Damitbräuchte man die in 5.3 erläuterte Aufklappfunktion nicht mehr und würde dasScrollen reduzieren.Ferner kann eine zusätzliche Sortierfunktion eingebaut werden, um die Bilder nachJahren absteigend zu sortieren. Außerdem kann der Schieberegler zur Wahl einerZeitspanne durch zwei Eingabefelder für Start- und Endjahr ergänzt werden.

Der Browser kann den Surf-Verlauf nicht speichern, da auf den Unterseiten dieDaten mittels AJAX vom Server abgerufen werden und keine Seiten-Reloads erfolgen.Daher können über den Zurück-Button des Browsers die letzten Suchergebnisse nichtmehr aufgerufen werden.

8 Ausblick 37

Eine Lösung wäre die Implementierung eines eigenen Zurück-Buttons auf der Seitelösen, dem die Daten der letzten Seite übergeben werden. Alternativ könnte AJAXerweitert werden oder die URL manipuliert werden, wodurch jedoch ein Neuladen derSeite nötig wäre. Denkbar wäre auch ein Cachen der Suchergebnisse in einer Session,der Datenbank oder einer Datei auf dem Server.

Ein weiterer Vorschlag war die Implementierung einer Tagcloud, in der die amhäufigsten nachgeschlagenen Suchbegriffe oder oft benutzte Schlagwörter als Wörter-wolke dargestellt werden.Zusätzlich wurde vorgeschlagen auf der Hauptseite durch Klick auf die Schlagwörterdirekt in die Übersicht aller Bilder zu bekommen, die dieses Schlagwort enthalten.

Zudem wäre es denkbar unter jedem der Vorschaubilder den relevanten Teil desBeschreibungstextes anzuzeigen und diesen durch Klick aufklappen zu lassen.Das Problem dabei ist jedoch, dass die Umlaute im Text als kodierte Zeichenkettenund nicht als einzelnes Unicode-Zeichen gespeichert sind. Dadurch lässt sich derText nicht an einer beliebigen Stelle trennen. Es ließe sich durch Konvertieren derZeichenketten in der Datenbank lösen.

Für ausländische Besucher könnte man die Oberfläche in andere Sprachen über-setzen werden. Der Nutzer könnte sich zum Beispiel in einem Dropdown-Menüfür eine bestimmte Sprache entscheiden. Die Auswahl könnte in einer Sessionoder falls schon eine Benutzerverwaltung implementiert ist, permanent gespeichertwerden.

Literatur- und Quellenverzeichnis 38

Literatur- und Quellenverzeichnis

[Goo16] Google Inc.: Google Art Project. https://www.google.com/culturalinstitute/home. Version: 2016. – [Online; Stand 10. Mai 2016]

[Gre11] Grever, Maria: Geschichtsschulwandbilder im Internet Ein digitalisiertesErbe europäischer Bildungsgeschichte. In: Zeitschrift für Museum und Bil-dung 73 (2011), S. 44

[His09] Historywallcharts: Wall charts, history and European Identity. http://historywallcharts.eu/. Version: 2009. – [Online; Stand 10. Mai 2016]

[jQu16] jQuery Foundation: jQuery API. https://api.jquery.com/.Version: 2016. – [Online; Stand 10. Mai 2016]

[Kie16] Kiel, Stadtarchiv: Fotoarchiv Online - 15.000 Fotos aus Bestän-den des Stadtarchivs Kiel. http://fotoarchiv-stadtarchiv.kiel.de/.Version: 2016. – [Online; Stand 10. Mai 2016]

[Mar10] Marcotte, Ethan: Responsive Web Design. http://alistapart.com/article/responsive-web-design. Version: 2010. – [Online; Stand 06. Mail2016]

[Ora16a] Oracle Corporation: Java Platform, Enterprise Edition 7 SDKUpdate 2 - Release Notes. http://www.oracle.com/technetwork/java/javaee/documentation/javaee7sdk-readme-1957703.html#System_Requirements. Version: 2016. – [Online; Stand 14. Mai 2016]

[Ora16b] Oracle Corporation: MySQL Community Server. http://dev.mysql.com/downloads/mysql/. Version: 2016. – [Online; Stand 10. Mai 2016]

[Uni13] Universität Würzburg: Projekt ’BayInventa Lohr’. http://www.bildungswissenschaft.uni-wuerzburg.de/forschungsstelle_historische_bildmedien/projekte/kooperationsprojekt_bayinventa_lohr/. Version: 2013. – [Online; Stand 13. Mai 2016]

[Wan16] Wang, Kevin: Software Licenses in Plain English. https://tldrlegal.com/. Version: 2016. – [Online; Stand 10. Mai 2016]

[WCML16] Wang, Alvin ; Chang, Alan ; Mark, Alex ; Louie, Kevin:Materialize CSS. http://www.oracle.com/technetwork/java/javaee/documentation/javaee7sdk-readme-1957703.html#System_Requirements. Version: 2016. – [Online; Stand 14. Mai 2016]

Literatur- und Quellenverzeichnis 39

[Wik16a] Wikipedia: Apache Tomcat. https://de.wikipedia.org/w/index.php?title=Apache_Tomcat&oldid=153675850. Version: 2016. – [Online; Stand10. Mai 2016]

[Wik16b] Wikipedia: Liste der größten Bibliotheken in Bayern — Wikipedia, Die freieEnzyklopädie. https://de.wikipedia.org/w/index.php?title=Liste_der_gr%C3%B6%C3%9Ften_Bibliotheken_in_Bayern&oldid=150687853.Version: 2016. – [Online; Stand 27. April 2016]

[Zil13] Zillgens, Christoph: Responsive Webdesign : reaktionsfähige Websites ge-stalten und umsetzen. München : Hanser, 2013

Eidesstattliche Erklärung 40

Eidesstattliche Erklärung

Ich versichere, die von mir vorgelegte Arbeit selbstständig verfasst zu haben. AlleStellen, die wörtlich oder sinngemäß aus veröffentlichten oder nicht veröffentlichtenArbeiten anderer entnommen sind, habe ich als entnommen kenntlich gemacht. Sämt-liche Quellen und Hilfsmittel, die ich für die Arbeit benutzt habe, sind angegeben.Die Arbeit hat mit gleichem Inhalt bzw. in wesentlichen Teilen noch keiner anderenPrüfungsbehörde vorgelegen.

Ort, Datum Unterschrift

CD mit Programmcode 41

CD mit Programmcode

Auf dieser CD befindet sich neben dem vollständigen Programmcode und einigen Bei-spielbildern auch diese Bachelorarbeit als PDF-Datei.