DelViz goes RIA

DelViz goes RIA –
Entwicklung eines webbasierten
Visualisierungswerkzeugs
Großer Beleg an der
Technischen Universität Dresden
August 2011
René Iwan
Betreuer: Dipl.Medinf. Mandy Keck
Hochschullehrer: Prof. Dr. Rainer Groh
Lehrstuhl Mediengestaltung
Institut für Software- und Multimediatechnik
Fakultät Informatik
Erklärung
Hiermit erkläre ich, René Iwan, den vorliegenden Großen Beleg zum Thema
DelViz goes RIA - Entwicklung eines webbasierten Visualisierungswerkzeugs
selbständig und ausschließlich unter Verwendung der im Quellenverzeichnis aufgeführten Literatur- und sonstigen Informationsquellen verfasst zu haben.
Dresden, am 11. August 2011
Unterschrift
Danksagung
Zu Beginn dieser Arbeit möchte ich mich bei meiner Betreuerin Mandy Keck, sowie
Herrn Professor Groh für ihre Unterstützung bedanken.
Außerdem gilt dem kompletten vi.c-Team, meiner Familie und im Besonderen Kitty Heil
mein Dank für die vielseitige Hilfe, Motivation und konstruktive Kritik, welche diese
Arbeit ermöglicht haben.
DelViz goes RIA
Einleitung
Inhaltsverzeichnis
1 Einleitung .......................................................................................... 5
1.1
1.2
Motivation und Zielsetzung ............................................................................... 5
Gliederung ........................................................................................................ 5
2 Grundlagen und Begriffe ................................................................. 6
2.1
2.2
2.3
Grundlagen der booleschen Algebra ................................................................. 6
Begriffe der Softwaretechnologie ...................................................................... 8
Begriffe der Informationsvisualisierung ............................................................ 14
3 Analyse der Technologien .............................................................. 24
3.1
3.2
3.3
3.4
Vergleich von O/R Mapper .............................................................................. 24
Kommunikation in verteilten Systemen ............................................................ 26
SOAP und REST-basierte Webservices .............................................................. 28
Vergleich von RIA-Technologien ...................................................................... 30
4 Verwandte Arbeiten ....................................................................... 35
4.1
4.2
4.3
4.4
4.5
4.6
Zoomable Image Browser ................................................................................ 35
Photomesa ...................................................................................................... 36
Pivot ............................................................................................................... 38
Five Years Of Infosthetics ................................................................................ 40
Facettice ......................................................................................................... 42
Vergleich ........................................................................................................ 44
5 Synthese und Konzeption .............................................................. 46
5.1
5.2
5.3
5.4
Problemdefinition und Anforderungsanalyse ................................................... 46
Client-Server-Architektur ................................................................................. 49
History-Ansicht................................................................................................ 53
Zusammenfassung .......................................................................................... 59
6 Realisierung .................................................................................... 60
6.1
6.2
6.3
6.4
6.5
Verwendete Software ..................................................................................... 60
Verwendete Entwicklungsumgebungen........................................................... 60
Entwicklung .................................................................................................... 60
Ergebnisse ...................................................................................................... 69
Zusammenfassung .......................................................................................... 71
7 Zusammenfassung .......................................................................... 72
7.1
7.2
Fazit................................................................................................................ 72
Ausblick .......................................................................................................... 73
Anhang A ............................................................................................. 74
Glossar ..................................................................................................... i
Abkürzungsverzeichnis ......................................................................... iii
Literaturverzeichnis .............................................................................. iv
Abbildungsverzeichnis ........................................................................... x
Tabellenverzeichnis ............................................................................. xii
Auflistungsverzeichnis ........................................................................ xiii
4
DelViz goes RIA
Einleitung
1 Einleitung
Seit der Erschließung des World Wide Web für den Alltagsgebrauch steigt dessen Popularität stetig an. Mit den Möglichkeiten zu jeder Zeit auf eine Unmenge von Informationen zugreifen zu können, steigt aber auch die Informationsflut, die tagtäglich zu bewältigen ist. Eine effiziente Verwaltung stellt dabei einen Baustein zum produktiven Arbeiten mit Daten dar. Dazu gehören insbesondere das leichte Auffinden von einzelnen Informationen in großen Datenmengen und die Möglichkeit Beziehungen zwischen den
Daten zu erkennen. Ein weiterer Baustein ist eine geeignete visuelle Aufbereitung der
vorhandenen Daten, um den Nutzer in der Umsetzung der Verwaltungsaufgaben zu
unterstützen. Dazu hat sich das Forschungsgebiet der Informationsvisualisierung entwickelt und es ist eine Vielzahl von Ansätzen und Konzepten entstanden, um große Mengen von Daten geeignet zu visualisieren. Diese decken sehr viele verschiedene Bereiche
ab und eine Herausforderung besteht darin, aus dieser großen Anzahl von verschiedenen Visualisierungsformen passende Vertreter für einen relevanten Kontext zu finden.
Aus diesem Grund ist das Werkzeug Deep Exploration and Lookup of Visualizations
(DelViz) entstanden [KECK et.al11]. Es ermöglicht das Auffinden von Visualisierungsformen anhand gegebener Metainformationen und erleichtert damit den Überblick über
die zahlreichen Anwendungen der Informationsvisualisierung.
1.1 Motivation und Zielsetzung
Ursprünglich als ein Werkzeug für Touch-Displays entwickelt, erreicht DelViz nur einen
geringen Nutzerkreis. Das Potential der Anwendung als alltägliches Hilfsmittel für Informationsvisualisierer ist auf diesem Wege nur schwer umsetzbar. Aus diesem Grund entsteht mit dieser Arbeit ein Konzept zur Umsetzung der DelViz-Idee als webbasierte Anwendung. Diese bietet zum einen den Zugang für eine breite Nutzerschicht und zum
anderen öffnet sie auch neue Wege die vorhandenen Daten zu verändern. Eine fundierte softwaretechnologische Basis für das Erstellen von verteilten Systemen ist ebenso Gegenstand dieser Arbeit, wie ein geeignetes Visualisierungskonzept für eine intuitive Arbeit mit den vorhandenen Daten.
1.2 Gliederung
Die vorliegende Arbeit besteht aus 7 Kapiteln. Neben der Einleitung führt das zweite
Kapitel die genutzten Grundlagen und Begriffe aus den relevanten Bereichen ein. Darauffolgend setzt sich das dritte Kapitel mit den vorhandenen Technologien für verteilte
Systeme auseinander und vergleicht diese anhand gewählter Gesichtspunkte. Im vierten
Kapitel werden verwandte Forschungsarbeiten aus dem Bereich der visuellen Bilddatenbanken und Facettenbrowser betrachtet, die interessante Ansätze für das im fünften
Kapitel erläuterte Konzept liefern. Anschließend erklärt das sechste Kapitel die prototypische Umsetzung der verteilten Architektur und des Visualisierungskonzeptes. Als letztes Kapitel befasst sich die Zusammenfassung kritisch mit dem entstandenen Resultat
und setzt einen Ausblick für weitere Arbeiten.
5
DelViz goes RIA
Grundlagen und Begriffe
2 Grundlagen und Begriffe
In diesem Kapitel werden die relevanten Grundlagen der vorliegenden Arbeit betrachtet.
Dabei werden Begriffe aus den Bereichen der booleschen Algebra (Kapitel 2.1), der
Softwaretechnologie (Kapitel 2.2) und der Informationsvisualisierung (Kapitel 2.3) erläutert, die im konzeptuellen und praktischen Teil der Arbeit aufgegriffen werden.
2.1 Grundlagen der booleschen Algebra
Mit Hilfe der booleschen Algebra können Aussagen bezüglich des Wahrheitsgehaltes
eines Sachverhalts erstellt werden. Die Aussagen, zum Beispiel durch die Variablen x
oder y versinnbildlicht, können entweder wahr (gekennzeichnet durch 1) oder falsch
(gekennzeichnet durch 0) sein. Um diese Aussagen miteinander zu verknüpfen stehen
folgende drei grundlegenden Operatoren zur Verfügung:
¬
Negation (NOT)
Disjunktion (OR)
Konjunktion (AND)
Die Operatoren können beliebig miteinander kombiniert werden, um Aussagen bezüglich komplexer Sachverhalte zu treffen.
Um sämtliche Kombinationen der Wahrheitswerte (die Anzahl entspricht ) von x und y
zu erhalten, gibt es vier Möglichkeiten (Tabelle 1 - Spalten x und y). Diese können wiederum durch Kombination auf 16 verschiedene Zustände abgebildet werden. Tabelle 1
zeigt nur die ersten acht Kombinationen, da alle weiteren die invertierte Verknüpfung
und damit eine Spiegelung darstellen (vgl. [GOTTHARDT01]).
x
y
1
2
3
4
5
6
7
8
0
0
1
1
0
1
0
1
0
0
0
0
0
0
0
1
0
0
1
0
0
0
1
1
0
1
0
0
0
1
0
1
0
1
1
0
0
1
1
1
Tabelle 1 - Kombination der Wahrheitswerte zweier boolescher Variablen
Kontradiktion (Spalte 1)
Unabhängig von der Belegung der Variablen x und y ergibt sich für alle Zustände das
Ergebnis 0.
Konjunktion (Spalte 2)
Das Ergebnis ist 1, sobald x und y mit 1 belegt sind. Dies wird durch
dargestellt.
Disjunktion (Spalte 8)
Ein Disjunktion (
) bildet auf das Ergebnis 1 ab, sobald eine Variable mit 1 belegt
ist.
6
DelViz goes RIA
Grundlagen und Begriffe
Inhibition (Spalte 3 und 5)
Eine Inhibition stellt eine Konjunktion mit einer negierten Variable dar.
Die Spalte 3 bildet dabei alle Kombinationen auf 1 ab, bei denen x mit 1 belegt ist
(
). Äquivalent dazu verhält sich Spalte 5 mit den Eingangswerten von y (
)
Identität (Spalte 4 und Spalte 6)
Die Identität bildet die Eingangswerte von x bzw. y auf das Ergebnis ab. Die Eingangswerte der jeweils anderen Variablen werden dabei ignoriert.
Antivalenz (Spalte 7)
Das Ergebnis ist 1, sobald die beiden Variablen mit unterschiedlichen Werten belegt
sind. Dies lässt sich durch eine Kombination von Konjunktionen und Disjunktionen erreichen:
Werden diese Verknüpfungsarten auf die Mengenlehre projiziert, lassen sich mit Hilfe
von VENN-Diagrammen, die Verknüpfungsarten wie in Abbildung 1 darstellen (vgl.
[DEISER02]).
a) Kontradiktion
A
B
c) Disjunktion A
A
B
e) Identität A
A
b) Konjunktion A
A
B
B
d) Inhibition A \ B
A
B
f) Antivalenz A
B
B
A
B
B
Abbildung 1 - VENN Diagramme und mathematische Notation für a) Leere Menge, b)
Schnittmenge, c) Vereinigungsmenge, d) Differenzmenge, e) Identität, f) Symmetrische Differenz
7
DelViz goes RIA
Grundlagen und Begriffe
2.2 Begriffe der Softwaretechnologie
Als Einführung in die softwaretechnologischen Grundlagen beschäftigt sich dieses Kapitel mit der Architektur von verteilten Systemen (Kapitel 2.2.1, 2.2.2) und der Kommunikation in selbigen. Dabei wird auf die einzelnen Komponenten (Kapitel 2.2.3, 2.2.4) und
deren Kommunikationsmöglichkeiten (Kapitel 2.2.5, 2.2.6) eingegangen.
2.2.1 Verteilte Systeme und die Client-Server-Architektur
Die Aufteilung von Aufgaben zwischen mehreren Prozessen ist eine grundlegende Anforderung an verteilte Systeme. Diese Prozesse sind unter Umständen räumlich voneinander getrennt und müssen über Netzwerkgrenzen hinweg kommunizieren. Dieser
Vorgang unterscheidet zwei Rollen, den Dienstnutzer (engl. Client) und den Diensterbringer (engl. Server). Der Client fragt dabei eine Dienstleistung beim Server an, die ausgeführt und entsprechend beantwortet wird. Der Server kann weitere Anfragen an andere Diensterbringer stellen und wird somit selbst zum Dienstnutzer, womit ein Systembestandteil auch beide Rollen ausfüllen kann [SCHILL et.al07].
Client 1
Anfrage
Resultat
Client 2
Server
Datenbank
Verarbeitung
Anfrage
Resultat
Abbildung 2 - Schematischer Aufbau einer Client-Server Architektur mit zwei Clients und
einem Server inkl. Datenbank
Das vorgestellte Modell bietet sich besonders für die Realisierung einer zentralen Datenhaltung mittels Datenbank an, wobei der zentrale Server zur Ansteuerung der Datenbank dient (siehe Abbildung 2).
Ein weiteres Einsatzszenario ist die Delegation von rechenintensiven Aufgaben an leistungsstarke Server, um die Kapazitäten der Clients zu schonen. Diese Verteilung bringt
aber zusätzliche Anforderungen mit sich. So muss besonderes Augenmerk auf eine effiziente Kommunikation gelegt werden, gerade bei vergleichsweise langsamen Internetverbindungen. Ein weiteres Kriterium ist unter Umständen die Sicherheit, wobei Authen8
DelViz goes RIA
Grundlagen und Begriffe
tizität und Autorisation zwischen Client und Server eine wichtige Rolle spielen. Weiterhin muss die Responsivität des Servers gewährleistet werden, bzw. die ClientAnwendung auf das Nichtvorhandensein der Serverkomponente reagieren können, um
einen reibungslosen Betrieb zu garantieren.
Das Modell der Serviceorientierten Architektur (SOA) verallgemeinert die Client-ServerArchitektur, in dem Dienste abstrahiert werden und so zur Wiederverwendung zur Verfügung stehen. Dabei kapseln sie „Funktionalitäten und Daten, die sie über eine wohldefinierte Schnittstelle zugreifbar machen‚ [SCHILL et.al07]. Die technischen Aspekte
des Dienstes spielen eine untergeordnete Rolle und werden weitestgehend ausgeblendet.
2.2.2 World Wide Web
Die Entwicklung des World Wide Web (WWW) vollzog sich innerhalb der letzten 20 Jahre von einem System zum Austausch wissenschaftlicher Ergebnisse zu dem Massenmedium des 21. Jahrhunderts. Die grundlegende Architektur besteht aus dezentral vernetzten Servern, die Informationen in Form von WWW-Dokumenten bereitstellen und
Clienten, die diese Informationen abfragen und für den Nutzer aufbereiten.
Der Abruf dieser Informationen erfolgt unter der Verwendung von Universal Resource
Identifier (URL), dessen Syntax drei Komponenten zur Adressierung kombiniert
[BERNERS-LEE et.al94]:



Verwendetes Protokoll zum Abruf der Ressource, z.B. http://
Adresse unter welcher, der bereitstellende Server erreichbar ist, z.B. www.w3.org
Pfad zum ausgewählten Dokument, z.B. /standards/webarch/protocols
Daraus ergibt sich die allgemeine Syntax von WWW-URIs, z.B:
http://www.w3.org/standards/webarch/protocols
Des Weiteren führte Berners-Lee die Hypertext Markup Language (HTML) zur Beschreibung der Ressourcen ein. Sie ist eine deklarative Auszeichnungssprache, die eine Untermenge der Standard Generalized Markup Language (SGML) darstellt und mittels Auszeichnungen, sogenannten Tags, das Layout von Dokumenten bestimmt. Darüber hinaus existieren Cascading Stylesheets (CSS), als getrennte Auszeichnungssprache. Sie bieten einerseits einen erweiterten Funktionsumfang und ermöglichen andererseits die
Trennung von Struktur und Layout.
Eine weitere Untermenge von SGML stellt die eXtensible Markup Language (XML) dar,
welche benutzt wird um hierarchisch gestaltete Informationen zu strukturieren. XML
kommt dabei die Rolle zu Daten zwischen verschiedenen Computersystemen plattformunabhängig auszutauschen [BRAY et.al08].
9
DelViz goes RIA
Grundlagen und Begriffe
2.2.3 Relationale Datenbank
Das ursprüngliche relationale Datenmodell wurde 1970 von Codd [CODD70] vorgestellt
und orientiert sich stark an der relationalen Algebra. Die Daten werden in Tabellen, den
Relationen, gespeichert, wobei durch ein Schema die Attribute und deren Typen definiert werden. Die Attribute sind mit den Spaltenüberschriften vergleichbar und ein Datensatz wird als Zeile repräsentiert. Eine grundlegende Eigenschaft des Modells ist die
garantierte Eindeutigkeit einer Zeile, was doppelte identische Datensätze ausschließt.
Aufgrund dessen wird auf einen oder mehrere Schlüssel zurückgegriffen, um einen Datensatz zu identifizieren (engl. ID). Beziehungen zwischen einzelnen Relationen werden
durch sogenannte Fremdschlüsselbeziehungen verarbeitet. Dabei ist zwischen zwei Varianten zu unterscheiden, der one-to-many-Beziehung und der many-to-many-Beziehung.
Erstere entspricht einem Objekt mit einer zugehörigen Liste von Teilen. Um diese Verbindung kenntlich zu machen, wird jedem Teil das Attribut ObjektID hinzugefügt und
mit dem eindeutigen Schlüssel des Objekts versehen [CODD70]. Letztere erfordert das
Erstellen einer neuen Tabelle, der sogenannten Intersection Table (siehe Abbildung 3).
Als Beispiel dient die Verbindung zwischen Studenten und Vorlesungen, wobei Studenten mehrere Vorlesungen besuchen können und Vorlesungen von verschiedenen Studenten belegt werden können. Die neue Tabelle besitzt zwei Attribute, die Matrikelnummer des Studenten und die ID der Vorlesung. Jeder Datensatz der Tabelle besteht
aus einer eindeutigen Kombination der beiden Identifikatoren. Es wird dabei von einem
zusammengesetzten Primärschlüssel gesprochen [POWELL06].
Vorlesung
Student
MatrikelNr
Name
...
Immatrikulation
MatrikelNr
VorlesungsID
ID
Name
Ort
Zeit
...
Abbildung 3 - Schema einer many-to-many-Beziehung am Beispiel von Studenten, die
Vorlesungen belegen mit der Intersection Table Immatrikulation
Hier spielt die referentielle Integrität eine große Rolle, welche auf Beziehungsebene
prüft, ob vorhandene Beziehungen eingehalten werden. Diese kommt zum Tragen,
wenn zum Beispiel ein Student, der eine Vorlesung besucht aus der Datenbank gelöscht
werden soll. An dieser Stelle existieren die Optionen das Löschen zu verhindern oder
zusätzlich den Datensatz aus der Intersection Table zu entfernen, hierbei wird von
kaskadierendem Löschen gesprochen [JAROSCH10].
10
DelViz goes RIA
Grundlagen und Begriffe
Um Änderungen und Abfragen an der Datenbank vorzunehmen, stehen verschiedene
Operationen der relationalen Algebra zur Verfügung [CODD70]:





Projektion
Selektion
Kreuzprodukt
Vereinigung
Differenz
– Reduzierung der Attribute
– Reduzierung der Datensätze
– Kombination zweier Relationen
– Vereinigung zweier Relationen mit gleichem Schema
– Aus der Relation A werden alle Datensätze entfernt, die
auch in Relation B vorhanden sind
Als Abfragesprache hat sich die Structured Query Language (SQL) als Standard etabliert,
die alle gängigen relationalen Datenbanken zum Großteil implementiert haben. Dadurch
wird eine gewisse Unabhängigkeit vom zugrundeliegenden Datenbanksystem (DBMS)
ermöglicht. SQL stellt eine Reihe von Operationen zur Verfügung, welche an die oben
genannte relationale Algebra angelehnt und in drei Bereiche unterteilbar ist
[CHAMBERLIN et.al76]:



Datendefinition (Data Definition Language) – Beschreibung des Datenbankschemas
Datenmanipulation (Data Manipulation Language) – Anfragen und Manipulationen der Daten
Datenkontrolle (Data Control Language) – Zugriffsschutz und Berechtigungen
2.2.4 Rich Internet Applications
Die beiden Standardtechnologien zur Beschreibung von Webseiten, HTML und CSS, haben ihre neusten ratifizierten Spezifikationen 1999 mit HTML 4.01 bzw. 1998 mit CSS
2.0 erhalten. Seit dem haben sich das WWW und die Anforderungen an Webseiten geändert. Besonders in den Bereichen Interaktivität, Responsivität und Multimedia besitzen
HTML und CSS nur unzureichende Möglichkeiten. Daher haben sich in diesem Segment
alternative Technologien etabliert, um die fehlenden Anforderungen nachzurüsten und
dem Nutzungserlebnis einer Desktopanwendung anzupassen.
Dabei sind einige Punkte besonders wichtig, die eine Rich Internet Application auszeichnen [BUSCH et.al09]:



Reichhaltige Interaktionsmöglichkeiten (z.B. Drag’n‘Drop)
Zugriff auf lokale Dateien des Clients
Schnelle Reaktionen auf Nutzereingaben durch clientseitige Verarbeitung und
feingranulare Kommunikation mit dem Server
Aus technologischer Sicht gibt es eine zweigleisige Entwicklung. Auf der einen Seite
existiert mit JavaScript und erweiternden Bibliotheken wie jQuery eine Möglichkeit dynamische Elemente in eine Webseite zu integrieren. In Kombination mit der Verwendung von XML hat sich der Begriff Asynchronous XML and JavaScript (AJAX) herausge11
DelViz goes RIA
Grundlagen und Begriffe
bildet und dient als technologische Grundlage des Web 2.0 [GARRETT05]. Die Fähigkeit
JavaScript zu interpretieren ist in allen gängigen Browsern vorhanden. Auf der anderen
Seite gibt es eine Reihe von Browser-Plug-Ins, die es ermöglichen Inhalte anderer Technologien innerhalb des Browsers darzustellen. Als Vertreter wären dabei Shockwave und
Flash von Adobe oder Silverlight von Microsoft zu nennen. Im Zuge der Entwicklung des
nächsten HTML-Standard in der Version 5 wird stärker auf die Erfordernisse der dynamischen Webseitengestaltung eingegangen und damit eine weitere Technologie zur Erstellung von RIAs geschaffen. Das Kapitel 3 betrachtet einige der genannten Technologien
genauer.
2.2.5 Impedance Mismatch und Objekt/Relation Mapper
Gängiges Charakteristikum moderner Softwaresysteme, insbesondere verteilter Architekturen, ist das Verwenden einer zentralen relationalen Datenbank zur Informationshaltung und die nutzung von objektorientierten Programmiersprachen zur Implementierung der Software. Die Nutzung dieser beiden Teile ist mit Problemen behaftet, die als
„impedance mismatch‚ [COOK et.al06] bezeichnet werden und sich in verschiedenen
Ausprägungen bemerkbar macht. Dies soll anhand von 4 Beispielen verdeutlicht werden.
Vererbung und Kapselung
Zwei fundamentale objektorientierte Konzepte sind Vererbung von Strukturen und Kapselung von Daten. Ersteres ermöglicht Abstraktion und Spezialisierung innerhalb einer
Klassenhierarchie und letzteres verfolgt das Ziel, dass Klassen ihre Daten nach außen hin
vor unkontrolliertem Zugriff schützen und diese wohldefiniert mittels Methoden für Andere öffnen.
Für diese grundlegenden Konzepte gibt es keine Entsprechungen in relationalen Datenbanken, da Informationen in flacher Tabellenform gespeichert werden und es grundsätzlich keine Schutzmechanismen vor willkürlicher Datenveränderung gibt.
Identität und Äquivalenz
Zwei weitere grundlegende Konzepte in objektorientierten Programmiersprachen sind
die Trennung von Identität und Zustand. Objekte sind anhand ihrer Referenz im Speicher
eindeutig identifizierbar, unabhängig vom entsprechenden Zustand ihrer Eigenschaften.
Dies bedeutet, dass zwei Objekte mit exakt den gleichen Eigenschaften, immer noch
eindeutig erkennbar sind. Bei DBMS ist es nicht möglich, da eine Zeile in der Datenbank
durch ihren Inhalt beschrieben wird und eine Unterscheidung durch einzigartigen Inhalt
(sogenannte unique primary keys) erzeugt werden muss, weil es per Definition keine
zwei identischen Datensätze geben darf.
Typisierung
Die in SQL verwendeten Datentypen entsprechen nicht zwangsweise den in Programmiersprachen anzutreffenden Datentypen. Als Beispiel ist die Darstellung von Zeichenketten-Typen in Datenbanken als nchar, nvarchar, text oder ntext zu nennen. Darüber
hinaus gibt es eine Vielzahl von Datenbanksystemen, die den SQL-Standardtypen noch
12
DelViz goes RIA
Grundlagen und Begriffe
eigene Erweiterungen hinzugefügt haben, welche als grundlegende Datentypen in Programmiersprachen nicht repräsentiert werden. Ein Vertreter ist der Datentyp geometry
in Microsofts SQL-Server zur Speicherung von Geokoordinaten.
Schnittstellentypen und Persistenz
Klassischer Weise erfolgt die Kommunikation mit DBMS unter Verwendung von speziellen Abfragesprachen, wie beispielsweise SQL, die als einfache Zeichenkette an die Datenbank übermittelt und dort weiterverarbeitet wird. Dieses Prinzip wird als „explicit
query execution‚[COOK et.al06] bezeichnet. Es lässt einerseits dem Nutzer einen
größtmöglichen Ausführungsspielraum, da er direkt mit der Datenbank interagieren
kann, andererseits wird der Nutzer genötigt SQL-Abfragen manuell zu verfassen, was
bei komplizierten Konstrukten sehr zeitaufwendig ist.
Das Gegenteil zu dieser expliziten Nutzung von SQL stellt das Konzept der „orthogonal
persistence‚ dar, in der die Programmiersprache die Persistenz zwischen Objekten und
darunterliegender Datenbank realisiert. Im Paradebeispiel ändert der Programmierer eine
Eigenschaft eines Objektes und die Laufzeitumgebung des Programms ändert den entsprechenden Wert in der Datenbank, ohne dass der Entwickler dies initiieren müsste.
Gängige Systeme setzen heutzutage auf eine Mischung von beiden Extremen, da sie in
bestimmten Einsatzszenarien entsprechende Vor- und Nachteile haben.
Es existieren verschiedene Ansätze den „impedance mismatch‚ zu überwinden, welche
aber allesamt das Problem nicht gänzlich lösen können, sondern bestimmte Teilaspekte
realisieren. Eine Möglichkeit wäre die Verwendung von objekt-orientierten Datenbanken
und das Einbetten von SQL-Abfragen in Programmiersprachen. Ein anderer, häufig genutzter, Weg ist die Verwendung eines Objekt/Relation Mappers (O/R Mapper), der folgend kurz vorgestellt wird.
O/R Mapper
Die Aufgabe von O/R Mappern besteht in der Vermittlung zwischen Objekten der genutzten Programmiersprache zu einer relationalen Datenbank. Dazu wird das verwendete Datenbankschema automatisiert oder manuell analysiert und eine Klassenrepräsentation mit den entsprechenden Eigenschaften und Beziehungen erstellt (siehe Abbildung 4
).
Davon ausgehend hat der Nutzer die Möglichkeit Anfragen an die Datenbank durch die
erstellten Objekte zu kapseln und der O/R Mapper kümmert sich größtenteils um die
Persistenz der darunterliegenden Daten.
Im einfachsten Fall wird für jede Zeile einer Datenbanktabelle ein Objekt angelegt, wobei jede Spalte als Eigenschaft des Objektes repräsentiert wird. Stehen Einträge mittels
Fremdschlüsselbeziehungen in Verbindung, so erhält das Objekt eine Referenz auf das
entsprechende Ziel. Ändert der Nutzer eine Eigenschaft des Objekts sorgt der O/R Mapper dafür, dass der entsprechende Wert in der Datenbank ebenso geändert wird. Bei
Abfrageoperationen können Anfragen gegen die generierten Klassen gestellt werden
und der O/R Mapper übersetzt diese in SQL-Syntax.
13
DelViz goes RIA
Grundlagen und Begriffe
Vorlesung
ID : integer
Name : text
Ort : text
Zeit : date
Abbildung 4 - Beispiel eines möglichen Mappings zwischen der Datenbanktabelle Vorlesung zu
einer Klasse in einer objektorientierten Sprache, hier C#
2.2.6 Webservices
Die Kommunikation zwischen verschiedenen Prozessen ist über mehrere Wege möglich.
Angefangen von gemeinsam genutztem Speicher über programmiersprachenspezifische
Szenarien, bis hin zu standardisierten Austauschformaten. Vorhandene plattformspezifischen Lösungen haben den Vorteil, dass sie sehr gut in die jeweilige Plattform integriert
sind und optimierte Übertragungswege verwenden. Sie stoßen aber in heterogenen Einsatzfeldern an eine Realisierungsbarriere, da die Beschränkung auf eine Plattform oftmals nicht gewünscht ist. Um dies zu umgehen, wird auf standardisierte Basistechnologien zurückgegriffen. Eine häufig verwendete Vorgehensweise sind Webservices, die auf
den grundlegenden Internettechnologien HTTP und XML aufsetzen. Damit werden entscheidende Hindernisse der Interprozesskommunikation beseitigt, da die Kommunikation Netzwerkgrenzen, sowie Firewalls überwinden kann und Plattformunabhängigkeit
gewährleistet wird. Es gibt zwei verschiedene Technologien zur Umsetzung von Webservices, SOAP und REST, die im Kapitel 3 näher erläutert werden [CERAMI et.al02].
2.3 Begriffe der Informationsvisualisierung
Die Informationsvisualisierung ist ein Forschungsgebiet, das sich mit nicht-physikalischen
Datenmengen und deren geeigneter Darstellung beschäftigt. Ziel ist es Wege zu finden,
wie inhärente Zusammenhänge visualisiert und passende Interaktionsmöglichkeiten dem
Nutzer bei der Exploration der Datensätze helfen, damit es einen maximalen Erkenntnisgewinn gibt. Datensammlungen gewinnen immer mehr an Größe und Komplexität, wobei der Nutzer immer häufiger an Grenzen der Wahrnehmung stößt, wobei die Informationsüberflutung ein weitläufig bekanntes Phänomen in der digitalen Welt ist (vgl.
[CARLSON03], [KEIM02]).
Der Aufbau einer konkreten Visualisierung ist dabei in drei aufeinander folgende Schritte
geteilt, welche zusammen die sogenannte Visualisierungspipeline bilden [CARD et
al.99], wie in Abbildung 5 erkennbar.
14
DelViz goes RIA
Grundlagen und Begriffe
Interaction
Data Transformations
Raw Data
Visual Mappings
Data Tables
Data
User Task
View Transformations
Visual Structures
Views
Visualization
Abbildung 5 - Visualisierungspipeline nach Card [CARD et al.99]
1. Datenaufbereitung (Data Transformation): Die zu Beginn vorliegenden Rohdaten werden mit Metadaten angereichert und in ein vorgegebenes Datenschema eingepasst. Dies geschieht um die Datensätze untereinander vergleichbar zu
machen.
2. Abbildungsvorgang (Visualization Transformation): In diesem Schritt erfolgt
die Abbildung der strukturierten Daten in visuelle Elemente, wie Position im
Raum, Form, Farbe, etc.
3. Sichttransformation (Visual Mapping Transformation): Im letzten Schritt
wird der Nutzer in die Lage versetzt verschiedene Sichten auf den Datenbestand
einzunehmen, was durch verschiedene Techniken wie Zoom oder Bildverschiebung erreicht wird.
In allen drei Schritten hat der Nutzer die Möglichkeit zu interagieren. Durch Filtermethoden können zum Beispiel bestimmte Datensätze ausgelassen werden, womit die Datenaufbereitung abgewandelt wird.
2.3.1 Datenmodell
Um die Datentransformation als ersten Schritt der Visualisierungspipeline durchzuführen, müssen die vorhandenen Daten analysiert werden, wobei sich diese grundsätzlich in
drei Kategorien einteilen lassen. Den ersten Teil stellen quantitative Datentypen dar, die
durch einen konkreten Wert in einem definierten Wertebereich gekennzeichnet sind
(z.B. Währungsangaben oder Entfernungen).
Die zweite Kategorie bilden nominale Daten, welche eine Unterteilung in Teilmengen
ermöglichen und eine Prüfung auf Gleich- bzw. Ungleichheit erlauben. Hier ist beispielsweise eine Einteilung von Personen in männlich und weiblich zu nennen.
Abschließend existieren ordinale Daten, welche es erlauben eine Ordnung zwischen einzelnen Ausprägungen zu erstellen, beispielsweise durch die Einteilung von Datumsangaben in die Monate Januar, Februar,… [MACKINLAY86].
Die Anzahl der Eigenschaften eines Datensatzes bestimmt die Dimension der Visualisierung. Der einfachste Fall stellt dabei eine eindimensionale Visualisierung dar, in welcher
15
DelViz goes RIA
Grundlagen und Begriffe
jeder Datensatz durch eine einzelne Eigenschaft bestimmt wird. Erweitert man diese
durch Neue, spricht man von mehrdimensionalen Visualisierungen [KEIM02].
Eine starke Relevanz auf die spätere Struktur der Visualisierung haben die Beziehungen
zwischen den Datensätzen, wobei zwei Formen große Bedeutung besitzen. Zum einen
die Hierarchie (siehe Abbildung 6, links), welche es ermöglicht Elemente über bzw. unterzuordnen um so eine Relation zu schaffen. Die klassische Baumstruktur ist eine mögliche Darstellung dieser. Lässt sich diese hierarchische Ordnung nicht realisieren bildet
die Gesamtheit der Datensatzbeziehungen ein Netzwerk (siehe Abbildung 6, rechts)
[PREIM et.al10].
Abbildung 6 – links: Hierarchische Ordnung von Elementen rechts: Elemente in einer
Netzwerkstruktur
2.3.2 Visualisierungstechniken
Die Erstellung des Datenmodells erzeugt aus unstrukturierten Rohdaten ein
strukturiertes Modell, dass nun im Folgeschritt weiterverarbeitet wird. Dabei werden die
vorhandenen Daten auf visuelle Variablen abgebildet. Diese sind laut MACKINLAY u.a.
Position, Farbe, Größe, Transparenz, Textur, Volumen und Länge, wobei in selbiger
Arbeit eine Hierarchie der geeigneten visuellen Variablen für jeden Datentyp entstand.
So ist zu erkennen, dass die Position für alle drei Datentypen sehr gut geeignet ist. Im
Gegensatz dazu fällt die Relevanz der Variable Länge von den quantitativen Daten zu
den nominalen Daten [MACKINLAY86].
Anhand des Datenmodells und des Mappings wurden eine Vielzahl von
unterschiedlichen Visualisierungstechniken entwickelt. KEIM hat diese in fünf Klassen
unterteilt [KEIM00]:
Klasse
Geometrische Techniken
Ikonische Techniken
Pixelbasierte Techniken
Hierarchische Techniken
Netzwerktechniken
Beispiele für Visualisierungstechnik
Balkendiagramm, Liniendiagramm (Abbildung 7, links),
Streudiagramm
Star Plots (Abbildung 7, rechts), Stick Figures
Farbraummodelle (Abbildung 8, links)
Treemaps (Abbildung 8, rechts), Baumdiagramme
Graphvisualisierungen, Node-Link-Diagramme
Tabelle 2 - Übersicht verschiedener Visualisierungstechniken und zugehöriger Beispiele
16
DelViz goes RIA
Grundlagen und Begriffe
Abbildung 7 - links: Liniendiagramm des Eurokurses mit Microsoft Excel erstellt
rechts: Star-Plot mit Kennzahlen dreier Staaten aus [PREIM et.al10]
Abbildung 8 - links: Farbwähler aus Adobe Photoshop CS3
rechts: Treemapdarstellung von Dateien einer Festplatte, erzeugt mit SequoiaView
2.3.3 Interaktionstechniken
Durch Interaktion soll dem Nutzer ein Erforschen der Datenmenge ermöglicht werden,
damit er einerseits gesuchte Elemente finden kann, aber auch Zusammenhänge erschließen kann. Zudem wird ein grundsätzliches Problem durch Interaktion adressiert, da
oftmals der zur Verfügung stehende Interaktionsraum nicht ausreichend ist, um alle
Elemente in einer geeigneten Größe darstellen zu können. Dies führte zu verschiedensten Lösungsansätzen, welche im Folgenden vorgestellt werden [COCKBURN et.al08].
Scrolling
Das Verschieben des Bildausschnittes über die gesamte Darstellung wird als Bildlauf
(engl. Scrolling) bezeichnet, wobei immer nur ein Teil des Inhalts sichtbar ist. Geeignete
Methoden dafür sind die Nutzung einer Bildlaufleiste (siehe Abbildung 9) oder die direkte Interaktion mit dem Inhalt, beispielsweise bei der Verwendung eines berührungsempfindlichen Bildschirms, wobei letzteres auch als Panning bezeichnet wird.
Detailansichten
Üblicherweise werden Datenelemente einer Visualisierung in Überblicksansichten auf
wesentliche Merkmale reduziert, da alle Eigenschaften eines Datensatzes nicht geeignet
visualisierbar sind. Eine Detailansicht ermöglicht hingegen einen einzelnen Datensatz
17
DelViz goes RIA
Grundlagen und Begriffe
oder einen Ausschnitt der Datenmenge mit allen Details zu visualisieren (siehe
Abbildung 9).
Multiple Ansichten
Eine Kombination von Überblicks- und Detailansichten ermöglicht zum einen die Übersicht über die Datenmenge zu bewahren und bei Bedarf alle relevanten Informationen
für einen interessanten Datensatz zu visualisieren (siehe Abbildung 10, links).
Fokus + Kontext
Eine Erweiterung der Multiplen Ansichten stellen verschiedene Fokus + KontextTechniken dar. Diese arbeiten mit selektiver Informationshervorhebung oder Informationsunterdrückung, um bestimmte Informationen in den Vordergrund zu stellen (Fokus)
bzw. andere in den Hintergrund rücken zu lassen (Kontext). Zum Einsatz kommen dabei
zum Beispiel die Fish-Eye-View, welche den gewählten Ausschnitt mittels kontinuierlicher Verzerrungen hervorhebt [MACKINLAY et al.91]. Eine andere Möglichkeit stellen
die bifokalen Ansichten dar, welche gleichzeitig mehrere Detailstufen innerhalb einer
Ansicht ermöglichen, wobei diese nicht kontinuierlich verzerrt werden [SPENCE et.al82].
Dazu zählen zum Beispiel Ansichten mit Vergrößerungslinsen, die an die Position des
Cursors gebunden sind, wie sie von BIER beschrieben worden und im rechten Teil der
Abbildung 10 dargestellt sind.
Abbildung 9 – Links: Überblicksansicht mit Scrollbalken Rechts: Detailansicht mit
erweiterten Informationen zum ausgewählten Element
Abbildung 10 - Links: Multiple Ansichten mit Kombination von Vorschau- und Detailansicht
Rechts: Fokus + Kontext Ansicht nach [BIER et.al93]
18
DelViz goes RIA
Grundlagen und Begriffe
Zoomable User Interfaces
Alle bisher vorgestellten Techniken arbeiten mit statischen Ansichten auf die Visualisierung. Eine selektive Hervorhebung wird entweder nicht unterstützt (Überblicksansicht)
oder erfolgt in einer festgelegten Weise (Multiple Sichten). Im Gegensatz dazu bieten
die Klasse der Zoomable User Interfaces eine freie Verschiebung des Detailgrads von
Visualisierungen. Die grundlegenden Interaktionsmöglichkeiten sind das Vergrößern
(engl. Zooming) und das Verschieben (engl. Panning) des Bildausschnittes. Das Zoomen
kann entweder kontinuierlich oder in diskreten Schritten erfolgen, wobei unter Umständen eine minimale und/oder eine maximale Stufe existieren. Neben dem klassischen geometrischen Zoomen, bei dem die Objekte in ihrer Größe verändert werden, existiert das
semantische Zoomen. Hierbei ändern die Objekte je nach zur Verfügung stehenden Platz
ihre visuelle Repräsentanz und erlauben so detailliertere Informationen dynamisch einzublenden. Ein Beispiel dafür wäre der interaktive Kartendienst Bing Maps, der mit erhöhtem Detailgrad des Kartenausschnitts zusätzlich kleinere Ortschaften und Straßen
anzeigt [COCKBURN et.al08]. Abbildung 11 verdeutlicht diesen Effekt anhand zweier
Bilder.
Das zugrunde liegende Konzept basiert auf Space-Scale-Digrammen. Hierbei werden
Kopien eines Bildes in unterschiedlicher Größe zu einer invertierten Pyramide, den Image
Pyramids, zusammengesetzt. Je nach Bildausschnitt der Anzeige wird die entsprechende
Kopie des Bildes geladen, was Ladezeiten verkürzt und damit weiche Animationen realisiert.
Abbildung 11 – links: Ausschnitt einer Karte des Kartendienstes Bing Maps mit Fokus Dresden
in Überblicksansicht rechts: in detailierterer Ansicht
Animationen
Der Einsatz von Animationen besonders in ZUIs hilft dem Nutzer die Übersicht in Navigationsprozessen zu behalten, da er eine Verbindung zwischen dem Ausgangs- und dem
Endzustand der Navigation herstellen kann. Ein Hauptproblem besteht dabei in der Zeit,
die dem Animationsvorgang zugestanden wird. Auf der einen Seite kann sie zu schnell
erfolgen und der Nutzer kann die Verbindung nicht herstellen. Auf der anderen Seite
führt eine langsame Verbindung zu Zeitverschwendung und einer geringeren Nutzerakzeptanz. In Pilotstudien haben Bederson & Boltman eine Animationszeit von 0,5 -1 Sekunde für ausgeglichen bezeichnet [BEDERSON et al.99].
19
DelViz goes RIA
Grundlagen und Begriffe
2.3.4 Visualisierungsaufgaben
Grundlegende Aufgaben einer Informationsvisualisierung, die als Task by Data Type
Taxonomy bekannt sind, hat Shneiderman 1996 aufgestellt [SHNEIDERMAN96].
Overview
Zu allererst sollte eine Informationsvisualisierung einen Überblick über die Datenmenge
geben, damit sich der Nutzer mit dieser vertraut machen kann.
Zoom
Um interessante Datensätze zu finden, sollen dem Nutzer Zoomtechniken zur Verfügung
stehen. Idealerweise soll er die Möglichkeit besitzen den Grad des Zoomens und den
Zoomfokus selbst zu kontrollieren. Darüber hinaus helfen Animationen während des
Vorgangs den räumlichen Bezug zu erhalten.
Filter
Um die typischerweise große Datenmenge auf relevante Einträge zu reduzieren, stehen
dem Nutzer geeignete Filtermethoden zur Verfügung. Sogenannte dynamic queries ermöglichen dabei eine effiziente Exploration der Datenmenge.
Details-on-demand
Üblicherweise nachdem die Datenmenge auf relevante Einträge reduziert wurde, ist der
Nutzer gewillt durch diese zu blättern und deren Details anzuzeigen. Dies geschieht beispielsweise durch einen Mausklick auf einen Eintrag.
Relate
Die Zusammenhänge zwischen einzelnen Elementen einer Datenmenge tragen oftmals
zum Erkenntnisgewinn des Nutzers bei. Zum Beispiel die Präsentation von Elementen,
die nicht der vollständigen Filterkriterien entsprechen, aber eine gewisse Ähnlichkeit
aufweisen, können hilfreich sein.
History
Dem Nutzer soll die Möglichkeit gegeben werden seine getätigten Aktionen zu sehen
und diese gegebenenfalls rückgängig zu machen. Notwendig ist dies, da die explorative
Suche in einem Datensatz aus vielen Einzelschritten besteht und eine Übersicht dieser
Schritte hilft die erfolgten Entscheidungen zu verfolgen.
Extract
Elemente einer Datenmenge, die am Ende des Suchprozesses als geeignet gelten, sind
nach Möglichkeit extrahierbar, damit sie weiterverwendet werden können oder später
leicht zugänglich sind. Als Beispiele sind der Versand des Datensatzes per Email oder
eine Favoritenfunktion zu nennen.
20
DelViz goes RIA
Grundlagen und Begriffe
2.3.5 Filterung von Daten
Eine essentielle Aufgabe von Informationsvisualisierungen stellt die dynamische Filterung
der Datenbasis dar, welche durch Shneiderman 1994 als dynamic queries bezeichnet
wurde [SHNEIDERMAN94]. Sie sind durch folgende Eigenschaften gekennzeichnet:




Die Anfrageparameter sind visuell repräsentiert
Die Ergebnismenge ist visuell repräsentiert
Auswahl der Parameter durch Manipulation der Oberfläche und nicht durch
Texteingabe
Sofortiges und fortwährendes Feedback auf Änderung der Abfrageparameter
Weiterhin ist eine Kombination von verschiedenen Anfrageparametern vorgesehen, die
ähnlich der verschiedenen Mengenoperationen aufgebaut sind (vgl. Kapitel 2.1):
Schnittmenge
Die Ergebnismenge besteht aus denjenigen Elementen, welche die Abfrageparameter
erfüllen. Vergleichbar ist dies mit einer logischen AND-Verknüpfung.
Vereinigungsmenge
Die Ergebnismenge besteht aus denjenigen Elementen, die mindestens einen Abfrageparameter erfüllen. Dies entspricht der logischen OR-Verknüpfung.
Differenzmenge
Die Ergebnismenge besteht aus denjenigen Elementen, die einen Abfrageparameter erfüllen, aber den anderen nicht. Ein Sonderfall stellt dabei die symmetrische Differenz
dar, wobei nur Elemente als geeignet gelten, welche sowohl den ersten Parameter als
auch den zweiten Parameter erfüllen, aber nicht beide. Dies entspricht der logischen
XOR-Verknüpfung.
2.3.6 Aktionshistorie
Interaktive Systeme erlauben es dem Nutzer Daten zu erstellen, zu verändern und zu
löschen. Da es dabei selbstverständlich auch zu Fehlern kommen kann, ist eine Funktionalität zur Herstellung vergangener Zustände von großer Wichtigkeit. Den ersten Ansatz
in interaktiven Systemen beschreiben Miller & Thomasjr 1977. Nutzer haben die
Möglichkeit eines speziellen undo-Kommandos, um den zuletzt getätigten Schritt
rückgängig zu machen [MILLER et.al77]. Zwei formale Modelle des linear undo wurden
von Leeman 1986 diskutiert [LEEMAN86] und durch Yang 1988 zu linear undo/redo
erweitert. Dabei steht zusätzlich ein Befehl zur Verfügung, welcher die letzte undoAktion zurücknimmt [YANG88]. Um solch ein System umzusetzen werden grundsätzlich
alle Aktionen in einer Historie aufgezeichnet. Ein Ausführen des undo nimmt die letzte
Aktion aus diesem Speicher, macht sie ungeschehen und legt sie in einer redo-Liste ab.
Das oberste Kommando der redo-Liste kann wiederum ausgeführt werden und wird
daraufhin in der Historie abgelegt [BERLAGE94]. In der Abbildung 12 ist dies schema21
DelViz goes RIA
Grundlagen und Begriffe
tisch dargestellt. Die Zustände eines Objekts OX werden durch Aktionen CX verändert
und können durch undo-Befehle (gestrichelte Pfeile) zurückgenommen werden.
Abbildung 12 - Schematische Darstellung einer Aktionsabfolge und den Möglichkeiten des linear
undo
Das Konzept des linear undo stößt an seine Grenzen, wenn der Nutzer eine spezielle
Aktion rückgängig machen will, ohne die komplette Historie zurückzugehen. Archer und
Mitautoren entwickelten ein Modell des non-linear undo, dass selektiv einzelne Befehle
zurücknehmen kann, indem diese als Kommandos eines Skripts modelliert werden
[ARCHER et.al84]. Die Veränderung eines Objekts von dessen Ausgangszustand O0 zu
dessen Endzustand OE wird durch die Anwendung aller Kommandos (C1, C2,…,CE) eines
Skripts erreicht. Damit resultiert das Zurücknehmen eines Kommandos (z.B. C2), in der
Ausführung des Skripts ohne das entsprechende Kommando (siehe Abbildung 13).
O0
O1
O2
O3
OE
Abbildung 13 - Schematische Darstellung einer Historie als Skriptmodell
In Bezug zur Informationsvisualisierung liegt das Hauptaugenmerk auf der Erfassung von
Änderungen der Filterwerte, die der Nutzer auf den Datenbestand anwendet. Diese sollen für den Nutzer nachvollziehbar und gegebenenfalls rückgängig gemacht werden.
Eine gängige Visualisierungstechnik dieser vollzogenen Interaktionsschritte stellt die
Brotkrumennavigation (engl. breadcrumbs) dar, die interaktiv und interaktionsfrei gestaltet werden kann. Sie stellt, häufig in einer horizontalen Textzeile, den Fokus des Nutzers
im Kontext der Anwendung dar. Laut Instone existieren drei Einsatztypen von
breadcrumbs (vgl. [INSTONE02]). Location breadcrumbs stellen die aktuelle Ansicht im
Kontext der Anwendung dar, in der Form das sie den Pfad der Seitenhierarchie visualisieren (siehe Abbildung 14). Die zweite Gattung stellen die path breadcrumbs, welche
den tatsächlichen Weg der Navigation zum aktuellen Element abbilden. Daraus folgt,
22
DelViz goes RIA
Grundlagen und Begriffe
dass wenn ein Element potentiell über mehrere Wege erreicht werden kann, dazu auch
zwei unterschiedliche Brotkrumenpfade existieren. Den dritten Vertreter bilden die attribute breadcrumbs. Sie veranschaulichen nicht den Weg zum aktuellen Element, sondern
beschreiben die aktuelle Seite durch Metadaten, die wie breadcrumbs angeordnet sind.
Zum Einsatz kommt dies häufig in Onlineshops zur Repräsentation der getätigten Suchkriterien (siehe Abbildung 15). Interaktiv wird die interaktionsfreie Darstellung des Pfades, wenn die einzelnen Elemente mit Links zum repräsentierten Punkt der Anwendung
versehen sind, so dass der Nutzer dorthin navigieren kann.
Abbildung 14 - Interaktive Breadcrumbs-Navigation auf der Webseite von Spiegel Online
Abbildung 15 - Kombinierte Breadcrumbs der Webseite geizhals.at - fettgedruckter Teil (links)
stellt aktuelle Seite in Hierarchie dar, rechter Teil veranschaulicht aktuelle Suchkriterien für
Produkte
23
DelViz goes RIA
Analyse der Technologien
3 Analyse der Technologien
Das folgende Kapitel erörtert und vergleicht vorhandene Technologien zur Umsetzung
einer Client-Server-Architektur. Ausgehend von einer relationalen Datenbank, wird
deren Zugriff mit einem O/R-Mapper betrachtet und dabei zwei vorhandene
Frameworks verglichen. Danach werden verschiedene Technologien und Frameworks
zur Kommunikation in verteilten Systemen vorgestellt und in ihren Fähigkeiten bewertet.
Auf die Unterschiede zwischen den beiden Webservice-Arten SOAP und REST wird dabei
gesondert in Kapitel 3.3 eingegangen. Den Abschluss bildet ein Vergleich zwischen
Technologien zur Erstellung von RIAs.
3.1 Vergleich von O/R Mapper
Zwei gängige Vertreter aus dem Bereich der O/R Mapper, Hibernate und LINQ, werden
im folgenden näher betrachtet und verglichen. Dafür spielt die Beherrschung von
folgenden Kriterien eine Rolle. Das Mapping von Tabellen zu Objekten mit typisierten
Eigenschaften wird überprüft, da dies zur Abstraktion der Datenbank und den SQLAnfragen nötig ist. Die Gestaltung der Datenbankabfragen durch den O/R Mapper
werden auf dynamische Erstellbarkeit und modularen Aufbau untersucht, da diese
Fähigkeit für einen flexiblen Einsatz mit komplizierten Anfragen von großem Nutzen ist.
Zuguterletzt erfolgt die Untersuchung, ob es möglich ist explizit Abfragen mittels SQL
aus dem O/R Mapper heraus an die Datenbank zu stellen.
Hibernate
Ein bekannter Vertreter aus dem Bereich der O/R Mapper ist das quelloffene Framework
Hibernate. Ursprünglich für Java implementiert, existiert zudem eine .Net Portierung
namens NHibernate [PATRICIO09].
Das Mapping zwischen Tabellen und Klassen erfolgt mittels einer eigenen XML-Datei
oder speziellen Annotationen in den Klassen. Bei der erstgennanten Methode existieren
Werkzeuge um automatisiert Klassen und Datenbanktabellen anzulegen.
Letztgenannten Methode setzt eine ezistente Klassendefinitionen voraus, wobei es auch
hier Werkzeuge gibt, die das Datenbankschema darauf definieren können.
Die Abfrage der Datenbank kann über zwei Wege erfolgen. Zum direkten Abfragen der
Datenbank steht die Hibernate Query Language (HQL) zur Verfügung, dass eine eigene,
an SQL orientierte Abfragesprache darstellt. Eine Abfrage nach Personen, die älter als 30
Jahre sind, ist in der Auflistung 1 zu finden. Ziel ist es eine einheitliche Sprache zu
definieren und diese zur Laufzeit in den entsprechenden SQL-Dialekt der verwendeten
Datenbank zu transformieren [PEAK et.al05].
Den zweiten Weg bietet die Hibernate Criteria API, mit der es möglich ist Anfragen an
persistente Klassen zu stellen, welche an die Datenbank weitergeleitet und ausgewertet
werden. Die Hibernate Criteria API kapselt die Anfragen dabei in Methoden der Objekte,
so dass die transparente Verwendung einer Datenbank möglich ist (siehe Auflistung 2).
Diese Methoden lassen sich miteinander verbinden, um daraus komplexere Abfragen zu
24
DelViz goes RIA
Analyse der Technologien
gestalten und stellen somit eine dynamische und modulare Abfragemethode zur
Verfügung. [BAUER et.al07]
Query query = session.createQuery("from person where age > '30'");
List personsOlder30 = query.list();
Auflistung 1 - HQL-Abfrage nach Personen, die älter als 30 Jahre sind
List personsOlder30 = session.createCriteria(Person.class)
.add(Restrictions.eq(“age”, new Integer(30))).list();
Auflistung 2 - Abfrage mittels Criteria-API nach Personen, die älter als 30 Jahre sind
LINQ
Ein weiterer Vertreter ist Language INtegrated Query (LINQ), das als Bestandteil des .NetFrameworks ab Version 3.5 zur Verfügung steht. Grundsätzlich bezeichnet LINQ eine ins
Framework integrierte, deklarative Abfragesprache, die aus strengtypisierten Erweiterungsmethoden besteht und sich am bekannten Syntax von SQL orientiert. Damit sind
verschiedene Datenquellen abzufragen, wie zum Beispiel XML-Dateien, Speicherobjekte
wie Listen und auch Datenbanken. Der letztgenannte Teil nennt sich LINQ-to-SQL und
realisiert die Transformation der LINQ-Ausdrücke in SQL-Anfragen [CALVERT et.al09].
Das zugrundeliegende Mapping von Tabellen zu Objekten wird durch das Kommandozeilenwerkzeug SQLMetal erzeugt, wobei von einem existierenden Datenbankschema
ausgegangen wird. Eine Auswahl zwischen den, im .Net-Framework hauptsächlich vorherrschenden Programmiersprachen C# und VB.Net, kann getroffen werden
[MCCABE07].
Abfragen können einmal direkt durch die Eingabe eines SQL-Kommandos erstellt werden oder andererseits mit Hilfe von Konstrukten der verwendeten Programmiersprache.
Dabei existieren wiederum zwei verschiedene Wege. Ersterer erinnert an die Hibernate
Criteria API, in dem man auf die entsprechenden Objekte mittels Methoden und deren
Verknüpfungen arbeiten kann und somit die entsprechende Abfrage formuliert. Dies
geschieht streng typisiert durch die Nutzung von Lambda-Funktionen, welche modular
miteinander verknüpft werden können. Der zweite Weg orientiert sich stärker an SQL
und bietet, durch die Nutzung der Schlüsselwörter from, where und select, Kennern
dieser Technologie eine vertrautere Syntax.
Beide Wege resultieren nicht umgehend in einer Anfrage an die Datenbank, sondern
diese wird erst initiiert, wenn über die Anfrage auf die einzelnen Elemente zugegriffen
werden soll. Dies minimiert die Datenübertragung und ermöglicht optimierte Anfrageausdrücke [CALVERT et.al09].
Die Abfragen können direkt in der entsprechenden Programmiersprache, z.B. C#, erstellt
werden und profitieren damit von den Hilfestellungen gängiger Entwicklungsumgebungen, wie Fehlerprüfung und Code-Vervollständigung [DIETRICH et.al09].
Folgendes Beispiel demonstriert eine einfache Abfrage nach den Nachnamen aller Personen, die älter als 30 Jahre sind:
var personsOlder30 = from p in person where p.age > 30 select p.lastname;
25
DelViz goes RIA
Analyse der Technologien
Die gleiche Anfrage kann auch mit Hilfe von Lambda-Ausdrücken gestellt werden:
var personsOlder30 = person.Where(p => p.age > 30).Select(p => p.lastname);
Dabei ist es weitergehend möglich die Anfragen dynamisch zu erweitern. So kann die
zweite Bedingung, dass der Nachname mit „s‚ beginnen solle integriert werden:
var personsOlder30 = person.Where(p => p.age > 30).Select(p => p.lastname);
personsOlder30.Where(p => p.StartsWith("s"));
Vergleich
Beide O/R Mapper bieten weitestgehend gleiche Funktionalitäten (vgl. Tabelle 3). Die
Hauptaufgabe der Klassenerstellung auf Basis existierender Datenbankschemata beherrschen beide Frameworks, ebenso die direkte Ausführung von SQL-Befehlen. Unterschiede in der Art der Anfrageerstellung sind in der Typisierung festzustellen. Während LINQ
es ermöglicht dynamische Anfragen streng typisiert zu stellen, beschränkt sich Hibernate
auf eine untypisierte Variante. Nichtsdestotrotz sind beide Frameworks in der Lage dynamische und modular aufgebaute Anfragen zu erstellen und gegen eine Datenbank
auszuführen.
Vergleichspunkt
Mapping
Dynamische Anfragen
Modulare Anfragen
Direktes SQL
Hibernate
X
X*
X*
X
LINQ
X
X
X
X
* Typisiert nicht möglich
Tabelle 3 - Vergleich der O/R-Mapper Hibernate und LINQ
3.2 Kommunikation in verteilten Systemen
Zur technischen Umsetzung von Kommunikation in verteilten Systemen gibt es je nach
verwendeter Technologie und Programmiersprache die verschiedensten Möglichkeiten.
Im Bereich des .Net Frameworks existieren unterschiedliche Ansätze um verteilte Anwendungen zu realiseren. Zu nennen wären dabei „ASP.NET Webservices
(ASMX)，Web Services Enhancements (WSE)，Microsoft Message Queuing
(MSMQ)，.NET Remoting‚, die jeweils unterschiedliche Vorteile und Nachteile für verschiedene Einsatzszenarien bieten. Diese Technologien wurden mit Erscheinen des .Net
Frameworks 3.0 in die Windows Communication Foundation (WCF) integriert [ZHANG
et.al09].
26
DelViz goes RIA
Analyse der Technologien
ASP.Net Webservices
Sie bieten eine einfache Möglichkeit XML-basierte SOAP-Webservices zu implementieren. Dabei wird mittels Standardprotokollen HTTP und XML eine Zusammenarbeit mit
beliebigen Technologien ermöglicht [VANLENGEN04]. Die Funktionalitäten im Bereich
Bindungsvarianten, Transaktionsabarbeitung und Übertragungssicherheit sind aber sehr
eingeschränkt [ZHANG et.al09].
Web Services Enhancements
Web Services Enhancements erweitern ASP.Net Webservices um einige Funktionen der
WS*-Standards [WEERAWARANA et al.05], wie Sicherheitsanforderungen (WS-Security)
oder andere Transportprotokolle (TCP). Außerdem ermöglichen Sie ein Routing zu implementieren, so dass mehrere Webserver SOAP-Anfragen transparent für den Client
erzeugen können [PARYS et.al04].
Microsoft Messaging Queue
Seit Windows NT bzw. Windows 95 bildet MSMQ ein Protokoll zum sicheren Austausch
von Nachrichten zwischen verschiedenen Prozessen. Nachrichten werden dabei in eine
Warteschlange gestellt und erst zugestellt, wenn der Adressat erreichbar ist. Dies ermöglicht eine verlässliche Kommunikation auch über Netzwerkgrenzen hinweg [REDKAR
et.al04].
.Net Remoting
Mit .Net Remoting ist es möglich ein Objekt des .Net-Frameworks entfernt verfügbar zu
machen. Der Client kann dieses instanziieren und damit arbeiten, wobei der Code auf
dem Server ausgeführt wird. Dies geschieht unter der Zuhilfenahme von Channels, die
sämtliche Transporteigenschaften kapseln [MCLEAN et.al02].
Windows Communication Foundation
Die WCF bietet ein einheitliches Framework, um die Kommunikation in verteilten Systemen zu realisieren. Auf der Grundlage von Standard-Webservices können beliebige
Funktionalitäten hinzugefügt werden. Dazu zählen WS*-Erweiterungen oder auch verschiedene Transportprotokolle (TCP, MSMQ, eigene Implementierungen, etc.) [ZHANG
et.al09].
Vergleich
Mit der Entwicklung der WCF werden die Möglichkeiten der Technologien zusammengefasst und unter einer standardisierten API angeboten. Tabelle 4 stellt die vorgestellten
Technologien vergleichend dar.
27
DelViz goes RIA
Vergleichspunkte
WS*-Unterstützung
Interoperabilität mit anderen Webservices
.Net -.Net –
Kommunikation
Verteilte Transaktionen
Transaktionsabarbeitung
mit Warteschlangen
Analyse der Technologien
ASMX
WSE
MSMQ
.Net
Remoting
X
WCF
X
X
X
X
X
X
X
X
X
Tabelle 4 - Vergleich verschiedener Technologien zur Kommunikation in verteilten Systemen
nach [ZHANG et.al09]
3.3 SOAP und REST-basierte Webservices
Ein Webservice dient zur Kommunikation zwischen Programmen, wobei grundlegende
Beschränkungen wie Ausführungsort oder genutzte Plattformen außer Acht gelassen
werden können. Dies wird durch die Nutzung von WWW-Technologien erreicht, die
einen internetbasierten und damit systemübergreifend standardisierten Informationsaustausch ermöglichen [SCHILL et.al07]. Ein häufig genutztes Anwendungsszenario ist die
Kapselung des Zugriffs auf eine Datenbank durch einen Webservice. Damit können definierte Zugriffsaktionen auf die Datenbasis ausgeführt werden, ohne entsprechende
Kenntnis einer Abfragesprache für Datenbanken besitzen zu müssen. Jeder Webservice
wird dabei durch drei Parameter eindeutig beschrieben [CURBERA et.al02]:
1. Adresse: eine eindeutige URI, unter welcher der Webservice erreicht werden kann
2. Bindung: Informationen, wie der Client mit dem Webservice kommunizieren
kann
3. Vertrag: Methoden inklusive Parameter und Rückgabewerte, sowie Datentypen,
die vom Webservice zur Verfügung gestellt werden
Um diese Komponenten zu veröffentlichen wird ein WSDL-Dokument (Webservice Description Language) genutzt, was auf Basis von XML den Webservice beschreibt. Clienten
können mit Hilfe dieser Informationen einen erfolgreichen Datenaustausch mit dem Server initiieren. Dieser erfolgt durch Nachrichten (Messages), welche über verschiedene
Protokolle (z.B. HTTP oder TCP) ausgetauscht werden können.
Es gibt zwei Arten von Webservices, die sich fundamental durch die Art der Anfragen
und der zur Verfügung gestellten Methoden unterscheiden.
SOAP (ursprünglich Simple Object Access Protocol)
SOAP ist ein Standard zur Übertragung von Nachrichten im XML-Format über verschiedene Transportprotokolle. Aufgrund der weiten Verbreitung und technischen
28
DelViz goes RIA
Analyse der Technologien
Barrierefreiheit hat sich das HTTP-Protokoll als gängiste Anwendung heraus kristallisiert.
SOAP definiert dabei Regeln, wie der zu übertragende Inhalt in die Nachricht eingebettet werden muss. Diese minimale Struktur besteht aus einem envelope (engl. Umschlag)
genannten Element, dessen Kindelement, der body, den eigentlichen Inhalt transportiert. Als optionales Element steht ein header zur Verfügung, der Metainformationen zur
Verarbeitung kapselt (siehe Auflistung 3) [CURBERA et.al02].
<?xml version=“1.0“?>
<s:Envelope>
<s:Header>
</s:Header>
<s:Body>
</s:Body>
</s:Envelope>
Auflistung 3 - Minimale Struktur einer SOAP-Nachricht
Der eigentlichen SOAP-Spezifikation können Regeln hinzugefügt werden, welche in den
sogenannten WS*-Standards definiert wurden, um für die ursprüngliche Spezifikation
weitere Anwendungsgebiete zu erschließen. Ein Beispiel stellt WS-Security dar, das
Sicherheitsaspekte für SOAP-Webservices berücksichtigt. Es ermöglicht im Einzelnen die
Verwendung von SecurityTokens in Nachrichten, sowie Signierung und Verschlüsselung
von Nachrichten [SCHILL et.al07].
Der eigentliche Inhalt der Datenübertragung, d.h. die Semantik des Webservices wird
durch SOAP nicht erfasst und ist somit abhängig von den implementierten Methoden
des Servers. Für den Webservice ist es damit möglich eine Vielzahl von unterschiedlichen
Methoden, mit verschiedenen Parametern und Rückgabewerten zur Verfügung zu stellen. Denkbar ist ein Szenario, in dem komplexe Abfragestrukturen durch den Webservice realisiert oder tiefgreifende Änderungen an der Datenbasis mit einem Aufruf zu
initiiert werden.
REST (Representational State Transfer)
Im Gegensatz zu SOAP verwendet REST keine zusätzliche Schicht um Daten über das
WWW zu übertragen, sondern nutzt allein die Möglichkeiten, welche HTTP bietet. Dabei
wird auf ein Ressourcenmodell zurückgegriffen, das alle Elemente einer Datenbasis
durch URIs eindeutig erreichbar macht, wobei der Aufruf der URI, die zugehörigen Daten mittels XML oder HTML zurückliefert. Der Zugriff auf die Datenbasis erfolgt mit den
Standard-HTTP-Aktionen GET, POST, PUT, DELETE [MIRONELA09]:




GET: Abruf der Ressource
POST: Anlegen einer Ressource unterhalb der, durch die URI Erreichbaren; URI
der neuen Ressource wird zurückgegeben
PUT: Ressource wird angelegt oder geändert
DELETE: angegebene Ressource wird gelöscht
Weiterhin sind REST-Webservices per Definition zustandslos. Dies bedeutet, dass eine
Anfrage sämtliche Informationen beinhalten muss um erfolgreich beantwortet werden
zu können. Aufgrund dessen wird serverseitig auf eine Speicherung von Anfragezustän29
DelViz goes RIA
Analyse der Technologien
den verzichtet und der Client hat die Möglichkeit Antworten auf seine Anfragen mittels
eines Caches zwischen zu speichern.
Vergleich
Beide Typen von Webservices bieten bestimmte Vor- und Nachteile welche im Folgenden beleuchtet werden und in Tabelle 5 aufgezeigt sind.
Vergleichspunkte
Orientierung
Übertragungsprotokolle
Anzahl der Methoden
Zugriff auf Daten
Möglichkeiten der Datenänderung
SOAP
Methoden
HTTP, TCP, etc.
Unbegrenzt (implementierungsabhängig)
Antwort von Methodenaufrufen
Beliebige Änderungen mittels Methodenaufruf
REST
Ressourcen
HTTP
4 (GET, POST, PUT,
DELETE)
Daten als Ressourcen mittels eindeutiger URI erreichbar
Fest definierter Satz
durch HTTPStandardaktionen
Tabelle 5 - Vergleich der Webservice-Technologien SOAP und REST
Es ist damit festzustellen, dass sich SOAP-Webservices besonders in aktionsorientierten
Anwendungsfeldern eignen, wo es eine Vielzahl von Operationen auf den Datenbestand
gibt und Berechnungen schon zentral auf Serverseite zu erledigen sind. Hier haben sie
mit der freien Definition von Methoden inklusive Parametern und Rückgabewerten einen erheblichen Vorteil vor REST-Webservices. Diese stellen den Zugriff auf Ressourcen
in den Mittelpunkt und erlauben die wohldefinierte Änderung einzelner Datensätze.
3.4 Vergleich von RIA-Technologien
Als Vertreter der Möglichkeiten zur Erstellung von RIAs werden im folgenden Flash,
Silverlight und HTML5 unter Nutzung von AJAX vorgestellt. Diese werden in Hinblick auf
Animationsmöglichkeiten, Eignung zur datengetriebenen Entwicklung und Integration
von Web-Services betrachtet.
Flash
Adobe Flash ist eine proprietäre Plattform zur Darstellung von Multimedia-Inhalten im
Browser, die eine hohe Interaktivität ermöglichen. Um diese Inhalte darzustellen nutzt
Flash ein Browser-Plug-In, den sogenannten Flash Player, der wie in Abbildung 19 ersichtlich auf knapp 97% aller Browser verfügbar ist. Dabei gibt es verschiedene Varianten für alle gängigen Browser und Betriebssysteme. Ursprünglich als Animationswerkzeug für das WWW veröffentlicht, entwickelte es sich über die Zeit zu einer Plattform,
mit der auch komplette Webseiten realisiert werden können [NODA et.al05]. Die Basis
dafür legte die Programmiersprache ActionScript, die Flash zum Beispiel um die Möglichkeit der Datenverarbeitung erweiterte. Mit Version 3 der Skriptsprache steht eine
30
DelViz goes RIA
Analyse der Technologien
objektorientierte und ereignisbasierte Möglichkeit zur Entwicklung von RIAs zur Verfügung [CRAWFORD et.al06].
Aufgrund seines Ursprungs bietet Flash im Bereich der Animation eine breite Palette von
Möglichkeiten, beginnend bei KeyFrame-Animationen (sog. Tweening) bis hin zu eigenen Animationsfunktionen. Zwei Beispiele sind in Abbildung 16 zu finden. Demgegenüber hat Flash aber Schwächen in der Verarbeitung von externen Daten, insbesondere
bei der Integration von Webservices. Dafür steht zusätzlich das Flex-Framework zur Verfügung, dass eine Unterstützung für SOAP-basierte Dienste bietet. Ebenso wurde mit
der Veröffentlichung von Flex die deklarative Auszeichnungssprache MXML eingeführt
um Oberflächen in einem HTML-ähnlichen Entwicklungsstil zu erstellen, was in Verbindung mit Datenbindung zu einer effektiven Arbeitsweise verhilft [NODA et.al05].
Abbildung 16 - Beispiele für Webseiten mit der Flash-Technologie: Links - Internetauftritt der
Agentur Grimm Gallun Holtappels mit Verschmelzung von Videoaufnahmen und interaktiven
Elementen [2GH11]. Rechts - Internetauftritt von derbauer unter Nutzung von 3D-Elementen
und Animationen [DERBAUER11].
Silverlight
Microsoft Silverlight, ist ebenso wie Flash, ein proprietäres Browser-Plug-In zur Erstellung
von RIAs und wurde 2007 veröffentlicht. Ursprünglich existierten nur Versionen für die
Betriebssysteme Windows und MacOSX, aber durch das Projekt Moonlight ist es möglich Silverlight auch auf Linux, FreeBSD und anderen Open-Source Plattformen auszuführen [DÜRKSEN09]. 75% aller Browserinstallationen können auf das Silverlight-Plug-In
zurückgreifen, wie Abbildung 19 ersichtlich.
Die technologische Grundlage für Silverlight bietet das .Net-Framework mit der Windows Presentation Foundation, wovon Silverlight eine Untermenge an Funktionalitäten
bereitstellt [LITTLE et.al09]. Diese beinhalten zum einen ca. 70 User Interface (UI) – Elemente, die mittels Templates im Aussehen angepasst werden können und durchgängig
eine bidirektionale Datenbindung ermöglichen. Zum anderen steht durch die Verwendung des .Net-Frameworks eine Reihe von Bibliotheken aus dem Umfeld der Entwicklung für Windows-PCs zur Verfügung. Dazu zählen LINQ als O/R-Mapper und generische
Abfragesprache oder auch WCF zur Integration von WebServices.
Der Aufbau von Benutzungsoberflächen erfolgt durch eine deklarative Beschreibung in
der Extensible Application Markup Language (XAML), die auf XML basiert [LITTLE
et.al09]. Damit wird eine Trennung von Layout (XAML) und Logik erreicht, da letztere
mit einer Sprache des .Net-Frameworks, wie zum Beispiel C# oder VB.Net, implementiert
31
DelViz goes RIA
Analyse der Technologien
wird und beide Teile erst zur Laufzeit verschmelzen. Es ist darüber hinaus auch möglich
Logik mittels Skriptsprachen, wie Python oder Ruby zu programmieren und damit die
Vorteile von dynamischen Sprachen zu nutzen [COOPER07].
Für Animationszwecke stellt Silverlight eine Palette von vorgefertigten Transitionen und
Animationen zur Verfügung, die auf Objekte und deren Eigenschaften angewendet
werden können [MS09]. Zu nennen wären beispielsweise KeyFrame-Animationen oder
diverse mathematische Funktionen, wobei auch eigene Animationsfunktionen implementiert werden können.
Abbildung 17 - Beispiele für Silverlight-Anwendungen: Links - Ein mittels Motion Tracking
aufgenommenes Fußballspiel [ISVIS11]. Rechts - Ein virtueller Showcase von Siemens für PLMSoftware [SIEMENS11]
HTML5 + AJAX
Die Entwicklung des nächsten HTML Standard ist zurzeit in vollem Gange und wird nach
ersten Prognosen 2014 als Empfehlung des W3C verabschiedet werden [W3C11]. Weite
Teile des HTML Standards sind gegenwärtig Veränderungen unterworfen und einige
können mangels Unterstützung auch wieder verworfen werden [JACOBS05]. Er besteht
aus einer Vielzahl von Einzelspezifikationen, die momentan durch die verschiedenen
Browser-Hersteller sehr unterschiedlich unterstützt werden. Ein Kernelement des neuen
Standards in Hinblick auf die dynamische Gestaltung von Oberflächen ist das Canvas
(engl. Für Leinwand), das es ermöglicht darin frei mittels JavaScript-Zeichenfunktionen
zu zeichnen und mittels Zeitfunktionen Animationen auszuführen [VAUGHANNICHOLS10]. Der Vorteil von HTML5 gegenüber den beiden Browser-Plug-Ins besteht in
der allgemeinen Verfügbarkeit im Browser. Diese ist momentan auf Grund der laufenden Entwicklung zwar noch nicht vollständig gegeben, aber für die Verwendung des
Canvas-Elements sind 75% aller Browserinstallationen geeignet, was aus Abbildung 19
hervorgeht.
Die Verarbeitung von Daten erfolgt dabei durch die Verwendung von JavaScript und der
Aufruf von Webservices wird durch die Verwendung von asynchronen Aufrufen und
XML-Parsern ermöglicht. Dabei sind der Komfort und der Programmieraufwand aber
wesentlich höher, da vollständige APIs fehlen.
Generell lässt sich sagen, dass der Vorteil des Verzichts auf Browser-Plug-Ins mit einem
erhöhten Aufwand an Programmierarbeit verbunden ist. [NODA et.al05]
32
DelViz goes RIA
Analyse der Technologien
Abbildung 18 - Beispiele für HTML5 Implementierungen der Webseite IE Testdrive [MICROSOFT11]:
Links - Simulation des physikalisch korrekten Fallen von Bällen. Rechts - das Spiel Texas Hold'em
Poker
Vergleich
Beide Browser-Plug-Ins bieten in den Vergleichspunkten ähnliche Funktionalitäten, wobei Flash seine Stärken im Animationsbereich besitzt. Dafür bietet Silverlight mit der Integration des .Net-Frameworks und dem Fokus auf datengetriebene Entwicklung einige
Pluspunkte.
Eine Verwendung von HTML5 + AJAX bietet den Vorteil ohne Browser-Plug-In lauffähig
zu sein und in naher Zukunft auch in allen gängigen Browsern unterstützt zu werden.
Die Funktionalitäten im Bereich der Animationsvielfalt und der Verarbeitungsfähigkeit
von Daten aus Webservices sind gegenüber den Plug-Ins sehr beschränkt und erfordern
dabei die Kenntnis vieler Technologien (siehe Tabelle 6).
Vergleichspunkt
Verwendete Technologie
Adobe Flash
Proprietäres Browser-Plug-In
Verbreitung der
97%
Browserinstallationen
Animationsfunktionen KeyFrame, Math.
Funktionen, eigene
Funktionen
UI-Erstellung
Imperativ mit
Actionscript oder
deklarativ mit
MXML*
Integration von Web- Durch Verwendung
services
von Flex möglich
Microsoft
Silverlight
Proprietäres Browser-Plug-In
HTML5 + AJAX
75%
Standartisierte und
quelloffene Technologien
75% für Canvas
KeyFrame, Math.
Funktionen, eigene
Funktionen
Deklarativ mit
XAML
JavaScriptZeitfunktionen auf
Canvas
Deklarativ mit
HTML
Mittels WCF
Durch die Verwendung von asynchronem JavaScript
* bei der Verwendung des Flex-Frameworks
Tabelle 6 - Vergleich der RIA-Technologien Flash, Silverlight und HTML5+AJAX
33
DelViz goes RIA
Adobe Flash
Analyse der Technologien
Microsoft Silverlight
HTML 5 (Canvas & Video)
Abbildung 19 - Verbreitungsgrad der RIA-Technologien nach [RIASTATS] (Juni 2011)
34
DelViz goes RIA
Verwandte Arbeiten
4 Verwandte Arbeiten
Die Funktionalitäten von Anwendungen zur visuellen Verwaltung von Bilddaten sind
vielschichtig. Ausgehend von der Problematik, wie eine unbestimmt große Anzahl von
Bildern auf einer begrenzten Fläche dargestellt werden können, entwickeln sich Probleme, wie zum Beispiel geeignete Konzepte mit den vorhandenen Elementen zu interagieren. Von Gruppierungs- über Sortier- bis hin zu Suchfunktionen werden verschiedene
Möglichkeiten angeboten. Folgende fünf Arbeiten werden deshalb hinsichtlich ihrer
Funktionsweise und ihres Interaktionskonzeptes analysiert. Zusätzlich werden die vorliegenden Arbeiten in Hinblick auf die Umsetzung einer Historienvisualisierung und –
interaktion betrachtet und verglichen.
4.1 Zoomable Image Browser
Der Zoomable Image Browser (ZIB) von Combs und Bederson ist ein Bildbetrachter und
Bildabfragesystem auf Basis eines ZUIs und wurde 1999 entwickelt [COMBS et.al99].
Visualisierung
Die Benutzungsoberfläche des ZIB ist in drei Bereiche unterteilt (siehe Abbildung 20). Ein
Eingabefeld für Suchanfragen befindet sich im oberen linken Bereich und bietet die
Möglichkeit zwischen einer einfachen und einer erweiterten Suchfunktionalität zu wechseln. Daran rechts angrenzend befindet sich die Übersicht der Anfragehistorie, in dem
für jeden Suchschritt die Bildermenge als Thumbnails visualisiert werden. Der untere Bereich wird durch die aktuelle Ergebnismenge eingenommen (Browsing-Bereich). Dabei
werden alle Bilder auf einem zweidimensionalen Raster angeordnet.
Abbildung 20 - Oberfläche des ZIB mit Kennzeichnung der drei Interaktionsbereiche aus
[COMBS et.al99]
35
DelViz goes RIA
Verwandte Arbeiten
Interaktionsmöglichkeiten
Die Ergebnisansicht und die Anfragehistorie sind als ZUIs konzipiert und mit der ZUIPlattform Pad++ umgesetzt, die von Bederson und Hollan entwickelt wurde [BEDERSON
et al.94]. Sie bieten eine freie Zoominteraktion über die gesamte Menge an Bildern, so
dass der Nutzer den Detailgrad der Anzeige beliebig anpassen kann. Mit dem Fokus auf
Abfragen der Bilddaten wurde das Suchfenster gestaltet. Es bietet in der einfachen Ansicht die Möglichkeit ein Suchbegriff einzugeben. Dabei kommt kein reines Freitextfeld
zum Einsatz, sondern es wird auf Suchbegriffe aus einem Thesaurus zurückgegriffen,
der aus den indizierten Bildern extrahiert wurde. Die erweiterte Ansicht ermöglicht die
Verknüpfung von Suchanfragen mit booleschen Verknüpfungen, wie Konjunktion und
Negation (vgl. Kapitel 2.1). Das Ausführen der Anfrage aktualisiert die Bildmenge im
Ergebnisbereich entsprechend der gewählten Parameter.
Historyfunktion
Sämtliche Suchanfragen werden in der Historie gespeichert und mit einem Ausschnitt
der Ergebnismenge visualisiert. Die Suchbegriffe zu jedem Element werden beim Überfahren mit dem Mauscursor am unteren Ende des Suchfensters angezeigt und helfen so
den Überblick bei mehreren Suchschritten zu bewahren. Ein Mausklick auf einen Eintrag
der Historie visualisiert das entsprechende Suchresultat im Ergebnisbereich und ermöglicht davon ausgehend weitere Anfragen. Somit entsteht ein Netzwerk von Anfragen die
als Node-Link-Diagramm in der Historienansicht angezeigt werden (vgl. Kapitel 2.3.2).
Diese Form der History-Visualisierung entspricht dem non-linear undo (vgl. Kapitel
2.3.6), da von jedem Filterschritt ausgehend, neue Anfragen an die Datenbasis gestellt
werden können.
4.2 Photomesa
Photomesa ist ein Bildbetrachter, der mit Zoomtechniken das Durchsuchen von großen
Bildbeständen für Alltagsnutzer ermöglicht. Er wurde von Bederson 2001 veröffentlicht
und ist als freie Software erhältlich.
Visualisierung
Es können eine beliebige Anzahl von Bildern aus unterschiedlichen Verzeichnissen der
Festplatte eingebunden werden. Diese werden anhand von Metadaten, wie zum Beispiel
Jahr, Monat oder Ursprungsverzeichnis in Gruppen organisiert. Dabei kommen Quantum Treemaps zum Einsatz, die eine Möglichkeit bieten Bilder innerhalb der Gruppen
gleichmäßig auf einem zweidimensionalen Raster zu verteilen. Ausgehend von Treemaps
(vgl. Kapitel 2.3.2), die eine Baumstruktur durch verschachtelte Rechtecke darstellen,
wurde die Funktionalität auf Bilder erweitert, wobei die Anpassungen dazu dienten, die
festgelegten Seitenverhältnisse der Bilder zu erhalten und diese allgemein auch wahrnehmbar zu halten. Dazu wurden Objekte mit elementarer Größe definiert, sogenannte
Quanten, die durch den Layoutalgorithmus angeordnet werden. Um die Anordnung
mehrerer Gruppen möglichst platzsparend zu realisieren, kommen BubbleMaps zum
Einsatz, die das vorher erzeugte Raster in ihrer Form aufbrechen und verschachteln. Bei
36
DelViz goes RIA
Verwandte Arbeiten
der Nutzung von großen Bildmengen kollidiert der Anspruch die Wahrnehmbarkeit zu
gewährleisten mit dem zur Verfügung stehenden Platz, deshalb besitzt PhotoMesa einen
Modus in dem nur repräsentative Bilder angezeigt werden, wenn die Menge 500 Bilder
übersteigt.
Interaktionsmöglichkeiten
Der Nutzer hat die Möglichkeit durch einfache Mausinteraktion in der Sammlung von
Bildern zu navigieren, wobei ein ZUI zum Einsatz kommt (vgl. Kapitel 2.3.3). Ein Vergrößern erfolgt durch Betätigen der linken Maustaste im Interaktionsraum, wobei ein Rahmen den Bereich signalisiert, der in den Fokus vergrößert wird und danach ca. die halbe
Anzeigefläche einnimmt (siehe Abbildung 21). Ein Drücken der rechten Maustaste verkleinert die Ansicht um eine Zoomstufe bis zur Überblicksansicht.
Abbildung 21 - PhotoMesa Bereichsrahmen für Zoominteraktion (links) und Resultat der
Interaktion (rechts)
Es wird mit festen Zoomstufen gearbeitet, deren Wechsel durch Animationen unterstützt werden. Ein Panning ist außerdem möglich. Um eine weiche Animation zu gewährleisten speichert PhotoMesa mehrere Thumbnails eines Bildes und lädt das Bestmögliche, ähnlich dem Konzept von Google Maps (vgl. Kapitel 2.3.3).
Zum Anwenden von Filtern zur Reduzierung der Bildmenge stehen in der Seitenleiste
verschiedene Möglichkeiten zur Verfügung. Ein Freitextfeld um Dateinamen zu durchsuchen oder verschiedene Widgets, um anhand von Metadaten (Jahr und Monat der Aufnahme, etc.) Einschränkungen zu treffen. Darüber hinaus können Bilder zu beliebig vielen Kategorien hinzugefügt werden oder auch Personen darin markiert werden. Es können beliebige Filtermethoden über eine Disjunktion kombiniert werden, wobei aktive
Filterkriterien im Kopfbereich des Widgets visualisert werden [BEDERSON01].
Historyfunktion
PhotoMesa bietet keine Übersicht vergangener Aktionen oder Kommandos um diese
rückgängig zu machen. Weder getätigte Annotationen von Fotos noch die Filterhistorie
können zurückgenommen werden.
37
DelViz goes RIA
Verwandte Arbeiten
4.3 Pivot
Microsoft Pivot ist eine Technologie um große Informationsmengen zu visualisieren und
mit diesen zu interagieren. Entwickelt in den Microsoft Live Labs, wurde sie 2010 veröffentlicht.
Visualisierung
Die Datengrundlage für Pivot bilden Sammlungen (Pivot Collections) von verschiedenen
Medien wie Bildern, Videos, Finanzdaten, etc. Diese mit Metadaten angereicherten Elemente werden als XML-Datei zur Verfügung gestellt und durch den PivotViewer dargestellt. Darüber hinaus existiert ein in Silverlight integriertes Element zur Darstellung dieser Collections, dass in Aussehen und Funktionalität angepasst werden kann.
Die Oberfläche des Werkzeugs gliedert sich in drei Bereiche. Den Hauptteil nimmt die
Anzeige der Elemente ein, die als Thumbnails visualiert und auf einem zweidimensionalen Raster angeordnet werden. Mittels eines Schalters kann die Rasterdarstellung zu einer Säulendarstellung transformiert werden, wobei einzelne Ausprägungen des Sortierkriteriums eine Säule bilden und sich somit von anderen Ausprägungen abgrenzen. Bei
quantitativen Daten werden Intervalle des Wertebereichs zusammengefasst (siehe
Abbildung 22).
Abbildung 22 - PivotViewer mit NetFlix Filmdatenbank in Säulendarstellung
Interaktionsmöglichkeiten
Die direkte Interaktion mit der Elementmenge erfolgt auf Basis eines ZUI (vgl. Kapitel
2.3.3). Durch das Betätigen des Mausrads erfolgt ein Vergrößern bzw. Verkleinern des
Bildausschnitts. Das Zoomen erfolgt abhängig von der Mausposition und ab einem bestimmten Detailgrad eines Einzelbildes werden die zur Verfügung stehenden Metadaten
eingeblendet und somit das Konzept des semantischen Zoomens realisiert. Der Zoom38
DelViz goes RIA
Verwandte Arbeiten
vorgang und auch sämtliche Änderungen an der Ergebnisansicht erfolgen mit weichen
Animationen, welche durch die Technologie SeaDragon realisiert werden. Die technologische Grundlage bilden wiederum verschieden große Kopien der Bildrepräsentationen,
die durch Space-Scale-Diagramme beschrieben werden (vgl. Kapitel 2.3.3). Das Verkleinern des Detailgrades ist bis zur Übersichtsansicht möglich und darüber hinaus begrenzt.
Zudem erlauben es die einzelnen Bilder durch einen Mausklick auf die maximale Stufe
vergrößert zu werden, wobei wiederum die Metadaten eingeblendet werden (vgl. Kapitel 2.3.4). Als Orientierungshilfe wird dabei ein Rahmen um das aktuelle Element an der
Mausposition dargestellt (siehe Abbildung 23). Ein erneuter Mausklick zoomt bis zur
Überblicksansicht zurück.
Abbildung 23 - Pivotviewer mit Selektion auf Element
Die Möglichkeiten der Sortierung werden durch die vorhandenen Metadaten bestimmt
und ordnen die Elemente entsprechend dem ausgewählten Kriterium an. Die Filtereinstellungen zur Beschränkung der Informationsmenge leiten sich wiederum aus den
Metadaten ab. Die Visualisierung der Filteroptionen passt sich dem Datentyp des Kriteriums an. So haben quantitative Daten ein Widget aus Schiebereglern für Maximal- und
Minimalwerte kombiniert mit einem vertikalen Balkendiagramm, das die Werteverteilung darstellt (siehe Abbildung 24). Ordinale und nominale Daten sind durch Checkboxen repräsentiert. Ausprägungen eines einzigen Filterkriteriums werden disjunktiv verknüpft. Wohingegen die Anwendung mehrerer Kriterien konjunktiv geschieht. Als Nutzerunterstützung werden Filteroptione,n bei deren Anwendung eine leere Ergebnismenge entstehen würde, ausgeblendet.
39
DelViz goes RIA
Verwandte Arbeiten
Abbildung 24 - PivotViewer Filterelement für quantitative Datentypen
Historyfunktion
Eine Anzeige der getätigten Filtervorgänge ist in einer Zeile in Form von Breadcrumbs
realisiert. Dabei wird die Filterkategorie und darauffolgend die konkrete Ausprägung
angezeigt (siehe Abbildung 25).
Diese Informationen bieten einen Überblick und sind nicht interaktiv zu verwenden. Sie
ermöglichen dennoch die Abfolge der Filterschritte zu visualisieren und unterstützen
eine selektive Änderung von Filterkriterien.
Abbildung 25 - PivotViewer angewendete Filterschritte in Form von Breadcrumbs
4.4 Five Years Of Infosthetics
Five years of infosthetics (FYOI) ist ein Werkzeug zur Suche von Informationsgrafiken auf
der Datengrundlage der Webseite infosthetics.com [MOERE04]. Es wurde von Moritz
Stefaner entwickelt und fußt auf seinen Forschungen zu Elastic Lists (vgl. [STEFANER
et.al07]).
Visualisierung
Die Webseite infosthetics.com stellt eine Reihe von Informationsgrafiken zur Verfügung,
die mit Metadaten angereichert sind. Zu nennen sind hier: Kategorie, Jahr, Autor und
Anzahl der Kommentare. Dabei ist die Anzahl der zugewiesenen Kategorien variabel.
Die einzelnen Informationsgrafiken werden nicht durch ein Vorschaubild oder einen Titel
in dem Werkzeug repräsentiert, sondern durch die ihnen zugewiesenen Kategorien, die
farblich kodiert sind. Dadurch bilden sich farbige Rechtecke, die in einem
zweidimensionalen Raster dicht bei einander angeordnet sind und damit zu den
pixelbasierten Techniken zählen (vgl. Kapitel 2.3.2). Aufgrund der minimalen und
vorallem platzsparenden Repräsentation ist es möglich 1949 verschiedene Elemente auf
einer kleinen Fläche anzuzeigen und dabei auf Scrollen verzichten zu können (siehe
Abbildung 26).
40
DelViz goes RIA
Verwandte Arbeiten
Abbildung 26 – Ergebnisansicht von "5 years of infosthetics" durch farbliche Repräsentation der
in Verbindung stehenden Kategorien (links) und Listenansicht mit farblicher Kodierung der
Kategorien (rechts)
Die vorhandenen Metadaten sind auf der rechten Seite visualisiert und pro Typ sind alle
Ausprägungen in einer Liste angeordnet, wobei die Häufigkeit des Vorkommens mit
einer Zahl und einer Balkenvisualisierung dargestellt wird. In den Bereichen Kategorie
und Autor wird außerdem die Sortierung der Elemente durch die Häufigkeit ihres
Vorkommens bestimmt. Im Gegensatz dazu wird für die Kommentaranzahl und die
Jahresangabe die natürliche Ordnung verwendet. Für den Metadatentyp Kategorie wird
zusätzlich noch die damit assoziierte Farbe angezeigt (siehe Abbildung 26).
Interaktionsmöglichkeiten
Um nähere Informationen zu einem Element zu bekommen, kann dieses mit einem
Mausklick auf die grafische Repräsentation ausgewählt werden, womit im unteren
Bereich Detailinformationen sichtbar werden (vgl. Kapitel 2.3.3). Um die Orientierung
und die Auswahl zu unterstützen wird über das aktive Element von einem Rahmen
umgeben. Zusätzlich erscheint nach kurzem Verweilen auf einem Element ein Tooltip
mit dem Titel der Informationsgrafik (siehe Abbildung 27).
Abbildung 27 - Tooltip für selektierte Informationsgrafik (Schwarzer Rahmen)
Um Filtermethoden auf die Datenmenge anzuwenden, stehen die Metadaten in der
rechten Seitenleiste zur Verfügung. Durch das Selektieren einer konkreten Ausprägung
wird diese als Filter aktiv und die Ergebnismenge auf solche Elemente reduziert, die
diese Ausprägung besitzen. Dies geschieht in einer Animation, bei der alle unrelevanten
41
DelViz goes RIA
Verwandte Arbeiten
Elemente ausgeblendet werden und Lücken zurückbleiben (vgl. Kapitel 2.3.3).
Gleichzeitig wird die Ordnung der Filterelemente und die, in Balken und Zahl,
visualisierten Häufigkeiten angepasst. Filterelemente, welche eine leere Ergebnismenge
hervorrufen würden, werden ausgeblendet, wobei die trennende Haarlinie erhalten
bleibt. Damit soll verdeutlicht werden, dass prinzipiell weitere Filtermöglichkeiten
existieren, aber im aktuellen Kontext nicht von Bedeutung sind (siehe Abbildung 28).
Abbildung 28 - Listenansicht der Filtergruppe Kategorie mit hervorgehobenen aktiven Filtern
und Haarlinien, die unrelevante Filter repräsentieren
Historyfunktion
Das Werkzeug FYOI stellt keine explizite Visualisierung der Filterhistorie zur Verfügung.
Eine Hilfestellung wird durch die Anordnung der ausgewählten Kategorien gegeben, da
diese bei der Selektion an den Anfang der Auswahlliste verschoben werden und sich
daraus die Reihenfolge der Auswahl erkennen lässt (siehe Abbildung 28).
4.5 Facettice
Facettice ist ein Facettenbrowser zur Suche in großen Informationsmengen auf
Grundlage von interaktiven Hasse-Diagrammen. Das Werkzeug wurde im Rahmen der
Diplomarbeit von Benjamin Bach entwickelt [BACH10].
Visualisierung
Das Hauptaugenmerk von Facettice liegt in der Analyse der Datenmenge und den
Beziehungen zwischen den einzelnen Elementen. Die vorhandene Datenmenge und das
verwendete Klassifikationsschema entspricht dem dieser Arbeit und wird im Kapitel
5.1.1 vorgestellt. Die Anwendung unterteilt sich in vier Anzeigebereiche. Den Hauptteil
nimmt die Big Smart Lattice (BSL) ein. Dahinter verbirgt sich ein interaktives Element,
dass dynamische Anfragen an die Datenbasis visualisiert. Alle Elemente der aktuellen
Ergebnismenge werden am rechten Rand als Liste angezeigt, wodurch der Titel und das
Vorschaubild repräsentiert werden. Eine Aktualisierung entsprechend der gewählten
Auswahl findet statt, wobei das aktuell mit der Maus fokusierte Element hervorgehoben
wird (vgl. Kapitel 2.3.3, Bifokale Ansichten). Am linken Rand wird die hierarchische
42
DelViz goes RIA
Verwandte Arbeiten
Struktur der Klassifikation mit Hilfe eines TreeViews dargestellt [PREIM et.al10], wobei
eine farbliche Kodierung der Hierarchieebenen als Navigationsunterstützung verwendet
wurde. Diese lässt sich auch in der BSL wiederfinden. Im Kopfbereich der Anwendung
finden die Concept Lattices Platz. Sie visualisieren die Struktur der Ausprägungen einer
Facette, dahingehend, dass sie die Häufigkeit des Vorkommens aller Ausprägungen in
einer Ebene darstellen. Darunter erfolgt in einer zweiten Ebene die Häufigkeiten aller
Kombinationen von zwei Ausprägungen, usw. Die so entstehende Struktur erinnert an
ein Kristallgitter (engl. Lattice, siehe Abbildung 29, obere Leiste).
Abbildung 29 – Screenshot der Anwendung
Interaktionsmöglichkeiten
In der Initialansicht besteht die BSL aus einem kreisrunden Element, an dessen Unterseite
alle Facetten abgetragen sind und in dessen Mitte die Anzahl aller vorhandenen
Elemente steht. Die Auswahl einer Facette als Filterkriterium geschieht entweder über
das Hierarchiemenü links, dem Kopfbereich mit den Conecpt Lattices oder der Selektion
aus dem initialen Element. Daraufhin ordnet sich darunter ein zweites Element an, dass
die Ergebnisse des Filterschritts in Anzahl der Visualisierungen und der zur Verfügung
stehenden Facetten visualisiert. Ein farbiger Verbinder mit variabler Breite zwischen den
beiden Elementen stellt die ausgewählte Facette und deren Häufigkeit dar. Iterative
Suchschritte erzeugen immer neue Elemente in vertikaler Richtung, wobei die
Filterkriterien konjunktiv verknüpft werden (siehe Kaptitel 2.1). Außerdem ist es möglich
ausgehend von einem Knotenelement mehrere Facetten auszuwählen, womit diese
horizontal in einer Ebene angeordnet werden. Durch die Navigation und der
Anwendung von Facetten entsteht wiederum eine Kristallstruktur, in der die Anzahl der
verwendeten Facetten pro Ebene dargestellt werden. Darüber hinaus ist es mittels
teleports möglich das aktuelle Knotenelement zu wechseln und folgende Schritte von
43
DelViz goes RIA
Verwandte Arbeiten
diesem Element ausgehend zu starten, dadurch ist eine non-lineare Interaktionsweise
möglich (siehe Abbildung 29, Mitte).
History-Ansicht
Die Anwendung stellt keinen konrekten Bereich für die Nachverfolgung der getätigten
Filterschritte zur Verfügung. Stattdessen generiert die Auswahl von Facetten eine
netzartige Struktur. Der Weg der Interaktion wird im Konzept von Bach durch eine
unterschiedliche Sättigung entweder der Verbindungen zwischen den Knoten oder der
Knotenhintergründe selbst erzeugt (siehe Abbildung 30). Durch die Verwendung der
teleports entsteht dabei eine non-lineare History. Im Gegensatz dazu ist es aber nicht
möglich, einmal entstandene Knoten aus der Ansicht zu entfernen.
Abbildung 30 - Visualisierung der Interaktionsschritte durch Sättigung der Knoten (A) oder der
Verbindungspfade (B) aus [BACH10]
4.6 Vergleich
Die vorgestellten Arbeiten zum Thema der visuellen Verwaltung von Bilddatenbanken
bieten unterschiedliche Ansätze. Mit Ausnahme von FYOI nutzen alle Anwendungen das
Bild selbst als visuelle Repräsentation. Die Eingrenzung der Ergebnismenge erfolgt immer
durch das Filtern anhand von Metadaten, wobei der Vorgang durch verschiedene
Interaktionswege möglich ist. Das Vergrößern von bestimmten Teilen der
Ergebnismenge ist bis auf FYOI durch die Nutzung eines ZUI realisiert, die sich in den
gewählten Freiheitsgraden aber unterscheiden. Desweiteren fällt auf, dass die
Umsetzung von History-Mechanismen sehr differenziert ist. Tabelle 7 gibt einen
Überblick der Fähigkeiten der vorgestellten Anwendungen in Bezug zu ausgewählten
Vergleichspunkten.
44
DelViz goes RIA
Verwandte Arbeiten
Visualisierung der
Ergebnismenge
Vergleichs
merkmal
Darstellung
Ordnungsprinzip
ZIB
Thumbnails
Raster
History
Interaktion
verwendete ZUI
Technik
Photomesa
Thumbnails
Pivot
FYOI
Facettice
Thumbnails
Kategorien
farblich
kodiert
Thumbnails
und Titel
Quantum
Treemaps &
Bubblemaps
ZUI,
Detailansichten
Raster &
Säulen
Raster
Liste
ZUI,
Detailansichten
Überblicksund Detailansichten
Frei,
Max/Min
Bereich,
Direkter
Zoom
Verschiede
ne Widgets
für
Metadaten
Nichtinteraktive
attribute
Breadcrumbs
Nicht
möglich
Überblicksansicht,
Fokus+
Kontext
Nicht
möglich,
aktives
Element
vergrößert
Metadaten,
Interaktion
in BSL
Art des
Zoomens
Zoom und
Pan frei
Feste
Schritte,
feste
Bereiche
Filterung
Texteingabe mit
Thesaurus
Widget mit
Metadaten
Darstellung
und
Interaktion
Ergebnismengen
mit Pfaden
– nonlineare
Interaktion
Nicht
möglich
Metadaten,
Widgets
wie Elastic
Lists
Indirekte
Darstellung
Tabelle 7 - Vergleich der betrachteten verwandten Arbeiten
45
Non-lineare
Interaktion
in BSL,
keine
Rücknahme
DelViz goes RIA
Synthese und Konzeption
5 Synthese und Konzeption
Auf Basis der im Kapitel 2 eingeführten Grundlagen und in Kapitel 3 vorgestellten Arbeiten wird ein Konzept zur Umsetzung von DelViz als eine internetbasierte Anwendung
vorgestellt Dabei wird zu Beginn auf die Anforderungen bezüglich des softwaretechnologischen Aufbaus und des Visualisierungskonzeptes eingegangen (Kapitel 5.1). Anhand
dieser Anforderungen wird das Konzept zur Umsetzung diskutiert, wobei im besonderen
Maße auf den Aufbau der Historie eingegangen wird (Kapitel 5.3).
5.1 Problemdefinition und Anforderungsanalyse
In diesem Abschnitt wird der aktuelle Entwicklungsstand des existierenden DelVizPrototypen und dem damit verbundenen Konzept beschrieben. Dabei wird besonders
auf den Aufbau der Datenbasis, des Klassifikationsschemas und des
Interaktionskonzepts eingegangen. Ausgehend davon, werden Anforderungen an das
vorgestellte Konzept im Hinblick auf die Softwarearchitektur und der Visualisierungsbzw. Interaktionsvorgänge aufgestellt.
5.1.1 Vorstellung des bestehenden DelViz-Werkzeugs
Das Meta-Visualisierungswerkzeug DelViz wurde entwickelt, um eine Vielzahl von
unterschiedlichen Visualisierungsformen zu durchsuchen, Beziehungen zwischen diesen
zu analysieren und passende Visualisierungen für einen Anwendungskontext zu finden.
Datengrundlage
Als Grundlage dient eine in dem Webdienst delicious erstellte Datenbasis aus mehr als
700 Visualisierungen, bestehend aus einem Namen, einer Beschreibung und einer URL
zur Quelle. Zusätzlich wurde jede Visualisierung mit einem Bild verknüpft, was gesondert
zur Verfügung steht. Diese Visualisierungsformen können mit 70 verschiedenen Schlagworten versehen werden, um näher beschrieben zu werden. Damit der Vorgang in
strukturierter Form realisiert wird, wurde ein Klassifikationsschema (siehe Abbildung 31)
entwickelt, was eine Mischform aus den Konzepten von Facettenklassifikation und
Folksonomie darstellt. Es exisitiert eine hierarchische Gliederung der Schlagworte in Kategorien (Daten, Visualisierung, Interaktion) orientierend an der Visualisierungspipeline
(vgl. Kapitel 2.3), sowie in Dimensionen, wobei anlehnend an eine Facettenklassifikation
eine eindeutige Verortung von Schlagwörtern in die Hierarchiestruktur stattfindet. Innerhalb der Dimensionen finden die einzelnen Schlagwörter Platz, die nun beliebig einer
Visualisierung hinzugefügt werden können. Hierbei wird von der Facettenklassifikation
abgewichen, welche Doppelzuweisungen von Tags einer Kategorie verbietet [PRISS00].
Im Gegensatz dazu wird sich an dem Konzept des Social Taggings orientiert, mit der die
freie Zuweisung von Schlagwörtern ermöglicht wird und Folksonomien, d.h. Sammlungen von Schlagwörtern, entstehen.
46
DelViz goes RIA
Synthese und Konzeption
Abbildung 31 - Klassifikationsschema der Kategorien, Dimensionen und Schlagwörter aus
[KECK et.al11]
Aufbau der Anwendung
Die Anwendung unterstützt mit ihrem Aufbau, die im Information Seeking Mantra von
Shneiderman, beschriebene Vorgehensweise zur Gestaltung von Interaktionsoberflächen
(vgl. Kapitel 2.3.4). Dazu ist die Anwendung in zwei flexible Bereiche geteilt. Der
Ergebnisbereich (rechter Teil) bietet eine Überblicksansicht, in der alle Visualisierungen
auf einem zweidimensionalen Raster angeordnet sind. Durch die Auswahl eines
Elements ist der Wechsel zur Detailansicht mit erweiterten Metainformationen möglich
(vgl. Kapitel 2.3.3). Um die Menge aller Visualisierungen einzuschränken, steht der
Anfragebereich (linker Teil) zur Verfügung. Dieser stellt die verschiedenen Tags in
zugeordneten Dimensionen und Kategorien anhand des Klassifikationsschemas in einer
vertikalen Liste dar. Sämtliche Schlagwörter sind durch Drag’n’Drop-Interaktion als
Filterelemente zu verwenden, wobei eine Positivauswahl und eine Negativauswahl zur
Verfügung steht. Die Positivauswahl vereinigt alle Tags, die Visualisierungen enthalten
müssen, um in die Ergebnismenge aufgenommen zu werden. Die Negativauswahl
wiederum dient dem expliziten Ausschluss von Visualisierungen, welche mit enthaltenen
Tags markiert sind [KECK et.al11]. Zur Berechnung werden die booleschen Operationen
aus Kapitel 2.1 angewendet.
Drei grundlegende Aufgaben werden mit dem DelViz-Werkzeug realisiert:
Analyse des Datenbestands
Durch das Anwenden des Klassifikationsschemas auf die Visualisierungsmenge entstehen Beziehungen zwischen Schlagwörtern und Visualisierungen. Dabei treten direkte
und indirekte Beziehungen auf. Direkte Beziehungen entstehen aus der Zuweisung von
Schlagwörtern zu Visualisierungen und erlauben Aussagen zur Popularität von Schlagwörtern zu treffen. Indirekte Verbindungen hingegen, entstehen durch das Zuweisen
47
DelViz goes RIA
Synthese und Konzeption
von gleichen Schlagwörtern an verschiedene Visualisierungen. Daraus kann ermittelt
werden, welche Visualisierungen anhand des Klassifikationsschemas ähnlich sind und
welche Schlagwörter häufig in Kombination verwendet werden [KECK et.al11].
Die Zielsetzung besteht darin, diese Beziehungen zu visualisieren und dem Nutzer eine
Analyse der Struktur des Datenbestandes zu ermöglichen.
Blättern im Datenbestand
Die Menge an Informationsvisualisierungen wird ohne konkreten Suchanlass durchstöbert und der Nutzer folgt interessengeleitet den vorhandenen Informationen, was als
Browsing bezeichnet wird.
Explorative Suche
Eine explorative Suche verbindet die beiden vorangegangenen Konzepte, in dem der
Suchgegenstand nicht klar definiert ist, aber eine grobe Richtung weist. Durch Analyse
der Schlagwörter können geeignete Visualisierungen gefunden werden, die durch vorhandene Kontextinformationen beim Durchsuchen wieder zu neuen Erkenntnissen und
einer Schärfung der Suchanfrage führen. Es findet demnach eine iterative Kombination
aus Analyse und Browsing statt.
Das Visualiserungswerkzeug orientiert sich an den drei grundlegenden Aufgaben. Dafür
werden beide Teilbereiche dynamisch skalierbar gehalten (siehe Abbildung 32). Für die
Analyse des Datenbestandes wird der Anfragebereich (Abbildung 32, rechts) vergrößert
und unterstützt damit die Durchführung. Bei dem Stöbern in der Datenbasis wiederum,
wird der Fokus auf die Darstellung der Visualisierungen gelegt und somit der rechte Teil
vergrößert (Abbildung 32, links). Die explorative Suche erfordert schließlich einen
häufigen Wechsel der beiden Seiten (Abbildung 32, Mitte).
Abbildung 32 - Aufteilung der Oberfläche in zwei flexible Bereiche zur Unterstützung der drei
grundlegenden Aufgaben von DelViz aus [KECK et.al11]
48
DelViz goes RIA
Synthese und Konzeption
5.1.2 Anforderungsanalyse
Softwaretechnologie
Das resultierende Konzept hat die Aufgabe die softwaretechnologische Grundlage des
Werkzeugs abzubilden. Das primäre Ziel besteht darin die Datenbasis allgemein
zugänglich macht, wobei genauer auf zwei Punkte einzugehen ist.
Die Lösung setzt das existente Klassifikationsschema um und übernimmt alle
vorhandenen Daten in strukturierter Form (vgl. Kapitel 5.1.1). Die derzeitige
Vorgehensweise, mit der Verwaltung der Daten im Webdienst delicious und der
Aufbereitung mittels Tranformationen in XML, stößt im Bereich der
Mehrbenutzerfähigkeit an ihre Grenzen. Die Datenhaltung muss in Zukunft skalierbar im
Nutzerbereich sein und es ermöglichen auf vielfältigem Wege darauf zu zugreifen. Auch
die Anpassbarkeit der Datenhaltung an sich ändernde Gegebenheiten muss
entsprechend berücksichtigt werden, da eine offene Datenbasis Nutzer animieren soll
ihre eigenen Vorstellungen des Klassifikationsschemas und dessen Anwendung auf die
Visualisierungen umzusetzen. Zusätzlich ist das Tagging-Verhalten für jeden Nutzer zu
erfassen. Dabei spielt die Konnektivität eine große Rolle, da es nicht nur denkbar ist mit
einer Vielzahl von verschiedenen Technologien auf die Datenbasis zugreifen (z.B. HTML,
Flash, Silverlight), sondern die Daten auch automatisiert weiter zu verarbeiten oder
einzupflegen. Gerade das Hinzufügen und Verändern von Daten ist mittels der
Weboberfläche von delicious nicht automatisiert und manuell nur unzureichend
möglich.
Informationsvisualisierung
Die Anwendung übernimmt das existierende Konzept aus Kapitel 5.1.1 und erweitert
dieses, um die Möglichkeit vergangene Interaktionsschritte zu visualisieren (vgl. Kapitel
2.3.4, 2.3.6). Dabei ist es notwendig, an das bestehende Visualisierungs- und
Interaktionskonzept anzuknüpfen. Die History-Ansicht erweitert den rechten Teil der
Anwendung und stellt damit eine weitere Sicht auf die Ergebnismenge zur Verfügung.
Die grundlegende Anforderung an diese Sicht ist die Nachvollziehbarkeit der getätigten
Interaktionsschritte durch den Nutzer. Damit eine Realisierung erfolgen kann, ist der
aktuelle Filterkontext in der Anwendung zu visualisieren. Ferner ermöglicht das Konzept
der explorativen Suche die Formulierung von unscharfen Suchkriterien, die im Laufe des
Prozesses entsprechend der Nutzervorstellung verfeinert werden. Um diesen Umstand zu
unterstützen, ist ein Ziel, dem Nutzer die Auswirkungen seiner Filterinteraktionen zu
präsentieren.
5.2 Client-Server-Architektur
Im vorliegenden Abschnitt wird der Aufbau der Client-Server-Architektur konzipiert.
Dabei werden zu Beginn die verwendeten Technologien aus den, in Kapitel 3
vorgestellten Möglichkeiten, ausgewählt. Darauf folgend wird detaillierter auf die
einzelnen Teilaspekte der verteilten Architektur eingegangen.
49
DelViz goes RIA
Synthese und Konzeption
5.2.1 Technologiewahl
Vorliegender Abschnitt erläutert und begründet kurz die getroffene Technologiewahl
zur Realisierung der Architektur.
Datenbank
Die Datenhaltung als zentrale Komponente des Systems wird durch eine relationale Datenbank realisiert. Diese bietet einen strukturierten und freien Aufbau des Datenschemas und mittels SQL einen effizienten Weg Anfragen an die Datenbank zu stellen und
Daten zu erhalten (vgl. Kapitel 2.2.3).
O/R Mapper
Die Wahl zwischen Hibernate und LINQ ist relativ schwer zu treffen, da beide Vertreter
die geforderten Kriterien erfüllen. LINQ besitzt dabei einen kleinen Vorteil, da es strengtypisierte Abfragen ermöglicht und damit einen höheren Komfort bietet, welcher durch
die Generalität der Abfragesprache noch vergrößert wird (vgl. Kapitel 3.1). Zudem ist die
Integration mit Blick auf die sonstigen verwendeten Technologien besser.
Webservice
Für die Umsetzung des Webservice bietet sich die SOAP-basierte Variante an, da die benötigten Operationen teilweise sehr rechenintensiv sind und diese auf dem leistungsfähigen zentralen Server besser zu bewerkstelligen sind. Außerdem würde ein RESTbasierter Webservice das Datenaufkommen zwischen Server und Client erhöhen, weil
alle Daten für eine Operation erst zum Client übertragen werden müssen, obwohl dieser
sie nach der Berechnung nicht mehr benötigt (vgl. Kapitel 3.3). Um diese Webservices
umzusetzen wird die WCF verwendet. Sie verfügt über den größten Funktionsumfang
aller getesteten Verfahren und ermöglicht damit die größtmögliche Flexibilität in der
Anwendung.
Client-Anwendung
Für die Umsetzung der Beispielapplikation ist die Entscheidung auf Microsoft Silverlight
gefallen, da es besonders im Bereich der datengetriebenen Entwicklung unter Zuhilfenahme von Webservices Vorteile gegenüber den anderen vorgestellten Technologien
hat. Zudem steht mit DeepZoom eine Technologie zum Verarbeiten von großen Bildmengen zur Verfügung, die speziell für ZUIs entwickelt wurde. Der Vorteil von HTML5
ohne Browser-Plugin lauffähig zu sein, wird durch die ungleiche Unterstützung und fehlende Standardisierung wieder aufgewogen (vgl. Kapitel 3.4).
Sämtliche Komponenten der Architektur sind prinzipiell austausch- bzw. kombinierbar,
was in Abbildung 33 verdeutlicht wird. So ist es zum Beispiel möglich eine ClientAnwendung mit dem Flex-Framework zu erstellen und in das System zu integrieren.
50
DelViz goes RIA
Synthese und Konzeption
Silverlight
WCF
Server
Datenbank
LINQ
Flex
Hibernate
X
ASM
Abbildung 33 - Architektur der Anwendung mit halbtransparenten Alternativtechnologien
5.2.2 Aufbau der Datenbank
Die Datenbank bildet die Hierarchie des Klassifikationsschemas mit Kategorien
(Categories) und Dimensionen (Bundles) in einzelnen Tabellen ab. Dabei ist mit Hilfe der
Intersection Table eine many-to-many-Beziehung zwischen beiden Elementen möglich
(vgl. Kapitel 2.2.3), was bedeutet das potentiell eine Dimension in mehreren Kategorien
vorhanden sein kann. Genauso verhält es sich mit der Beziehung zwischen Schlagwörtern und Dimensionen. Somit ist jede beliebige Zuordnung möglich und das Klassifikationsschema in der Struktur variabel. Jedes der drei oben genannten Elemente besteht
dabei aus folgenden relevanten Elementen:





Name: Zwei Felder für die Bezeichnung in Deutsch und Englisch
Beschreibung (Description): Zwei Felder für die Beschreibung in Deutsch und Englisch
Nutzer (UserID): Referenz auf den Nutzer, der das Element eingetragen hat
Zeitpunkt (Time): Zeitangabe der Erstellung
Bild (Image): optionale Angabe eines Bildes
Die Beschreibung der Visualisierungen ist dem angelehnt, wobei keine zweisprachigen
Titel existieren, dafür verweist eine URL auf die Quelle der Visualisierung. Das Vergeben
von Schlagwörtern an Visualisierungen wird in der Tabelle Visualization_Tag erfasst. Dabei wird jede Zuordnung durch den vergebenden Nutzer angereichert, was mehrfache
Zuordnungen zwischen Visualisierung und Schlagwort ermöglicht oder auch konkurrierende Angaben erlaubt. Der Nutzer wiederum zeichnet sich durch einen Namen und ein
durch eine Hash-Funktion geschütztes Passwort aus. Jede Entität wird durch einen eindeutigen Schlüssel (ID) gekennzeichnet und ist darüber referenziert. Ein vollständiges
Schema der Datenbank ist in Abbildung 34 ersichtlich.
51
DelViz goes RIA
Synthese und Konzeption
Abbildung 34 - grafisches Datenbankschema mit allen Tabellen und Fremdschlüsselbeziehungen
5.2.3 Konzeption des Webservices
Der verwendete Webservice basiert auf dem SOAP-Standard und ist öffentlich
zugänglich. Er stellt verschiedene Funktionen zur Verfügung, die sich in zwei große
Bereiche einteilen lassen. Zum einen existieren die Abfragemethoden, welche Anfragen
an die Datenbasis stellen ohne diese zu verändern und zum anderen bietet der
Webservice Operationen, welche eine Veränderung der Datenbasis hervorrufen
(Bearbeitungsmethoden).
Abfragemethoden
Grundsätzlich stehen für alle Entitäten mindestens zwei Abfragemethoden zur
Verfügung, wobei eine die Gesamtheit aller vorhandenen Elemente zurückliefert und die
andere ein einzelnes Element. Weiterhin existieren für Dimensionen und Schlagwörter
die Abfragemethoden nach der Einordnung in die übergeordnete Klassifizierung (alle
Dimensionen einer Kategorie; alle Schlagwörter einer Dimension), womit sich die
Hierarchie des Klassifikationsschemas aufbauen lässt.
52
DelViz goes RIA
Synthese und Konzeption
Weiterhin existieren Methoden, die das Filtern mittels einer Positiv-/Negativauswahl von
Schlagwörtern ermöglichen und Operationen, welche statistische Werte, wie die
Häufigkeiten der verwendeten Schlagwörter, ermitteln.
Bearbeitungsmethoden
Der Webservice stellt für sämtliche der verwendeten Entitäten die grundlegenden
Bearbeitungsmethoden zur Verfügung. Diese sind das Erstellen, Bearbeiten und
Entfernen von Einträgen. Darüber hinaus, ist es möglich die Zugehörigkeit von
Schlagwörtern zu Dimensionen und Dimensionen zu Kategorien zu ändern. Zudem
existiert eine Methode für das Verschlagworten und deren Umkehroperation.
Um die Datenbasis vor Missbrauch zu schützen, ist ein Authorisationsmechnismus auf
Basis der WS-Security Spezifikation vorgesehen. Dazu werden die Zugangskennungen
aus der User-Tabelle der Datenbank benutzt (vgl. Kapitel 5.2.2).
5.3 History-Ansicht
Im Folgenden wird das Visualisierungs- und Interaktionskonzept der Historyansicht
diskutiert.
5.3.1 Visualisierungskonzept
Die Ansicht orientiert sich in ihrem Aufbau an dem Konzept der Übersichtsansicht (vgl.
Kapitel 5.1.2), um eine hohe Integrität der Anwendung zu erreichen. Das
Hauptaugenmerk richtet sich somit auf die visuellen Repräsentationen der Ergebnisse,
die in einem zweidimensionalen Raster angeordnet werden. Diese Form entspricht dem
vorgestellten Konzepten von KECK, PIVOT und ZIB und hat sich als passend für den
aktuellen Datzsatz herausgestellt.
Damit Kontextinformationen über den aktuellen Interaktionsweg zur Verfügung stehen,
wurde die History-Ansicht mit weiteren Elementen angereichert.
Breadcrumbs
Eine einfache Möglichkeit die Anwendung von mehreren Filtern nachvollziehbar zu
gestalten, ist die Verwendung von Breadcrumbs, die durch textuelle Repräsentation der
Filterelemente den aktuellen Kontext der Anwendung aufzeigen (vgl. 2.3.6). Pivot nutzt
Breadcrumbs, um aktuelle Einschränkungen zu verdeutlichen (vgl. Kapitel 4.3). In dieser
Arbeit wird es dahingehend angewendet, dass in der History-Ansicht und der
Übersichtsansicht alle Filterelemente visualisiert werden, welche die aktuelle
Ergebnismenge bedingt haben. Sie werden damit im Sinne von attribute breadcrumbs
verwendet (vgl. Kapitel 2.3.6). Dabei wird der Möglichkeit zur Positiv- und
Negativauswahl gesondert Rechnung getragen, indem die einzelnen Elemente farblich
kodiert werden. Dies geschieht konform zum Anfragebereich, wo diese farbliche
Hervorhebung ebenfalls umgesetzt wird (siehe Abbildung 35). Die Anordnung erfolgt
dabei, beginnend mit dem zu letzt angewendeten Schlagwort, von links nach rechts.
53
DelViz goes RIA
Synthese und Konzeption
Abbildung 35 - Ausgewählte Schlagwörter als Breadcrumbs im oberen Teil der Ergebnisansicht
visualisiert
Das Verwenden von Breadcrumbs ermöglicht somit eine erste Visualisierung der
getätigten Entscheidungen, wobei sie nur für die aktuelle Situation angewendet wird.
Die explorative Suche, welche eine Historie hauptsächlich unterstützen soll, ist aber ein
iterativer Vorgang mit unscharfem Suchziel. Es liegt also nahe, dass Filterschritte auch
potentiell passende Visualisierungsformen ausschließen und dementsprechend ist die
Visualisierung der Menge von ausgeschlossenen Elementen als Kontextinformation eine
Variante die getätigten Entscheidungen und deren Auswirkungen abzubilden. Um dies
zu realisieren existieren verschiedene Ansätze, welche im Folgenden näher beleuchtet
werden.
Darstellung aller vorhandenen Teilmengen
Grundsätzlich teilt die Anwendung eines Filters (Filter A) die vorhandene Menge in zwei
disjunkte Teilmengen (siehe Abbildung 36, links). Das Anwenden eines weiteren
Filterelements (Filter B) vergrößert die Anzahl der Teilmengen auf vier (siehe Abbildung
36, Mitte):




(A und B vorhanden)
(A vorhanden, B nicht vorhanden)
(A nicht vorhanden, B vorhanden)
(weder A noch B vorhanden)
Mit der Anwendung eines dritten Filters erhöht sich die Anzahl auf acht Teilmengen
(siehe Abbildung 36, rechts), usw. Eine sehr große Zersplitterung der
Visualisierungsmenge ist die Folge (vgl. Tabelle 8) und eine mögliche Visualiserung zur
Unterstützung der Nutzer wird dementsprechend sehr komplex.
54
DelViz goes RIA
Synthese und Konzeption
Anzahl der Filter
0
1
2
3
4
Anzahl der Teilmengen
1
2
4
8
16
Tabelle 8 - Auswirkungen der Filterbedingungen auf die Anzahl der Teilmengen
Abbildung 36 - Teilmengen als VENN-Diagramme mit einem, zwei und drei Filter (v.l.)
Darstellung in zwei Teilmengen
Keck et. al schlagen zur Visualisierung der Filterauswirkungen ein Konzept basierend auf
zwei Teilmengen vor [KECK et.al11]. Eine beinhaltet die aktuelle Ergebnismenge und die
zweite beherbergt alle Elemente, die der aktuellen Auswahl nicht entsprechen (siehe
Abbildung 37). Durch die Vergrößerung der Ergebnismenge rückt diese in den Fokus
und die Restmenge bleibt als Kontextinformation erhalten (vgl. Kapitel 2.3.3,
Fokus+Kontext). Das genaue Nachvollziehen der einzelnen Schritte ist damit nur bedingt
möglich, da die ausgeschlossenen Elemente in der Restmenge vereint werden. Um
trotzdem einzelne Elemente dem jeweiligen Filterschritt zuzuordnen, wird eine
Hervorhebung in Betracht gezogen. Dabei betont die Selektion eines Schagworts im
Anfragebereich, die entfernten Elemente in der Restmenge (siehe Abbildung 37).
Abbildung 37 - Historyansicht mit 2 Teilmengen und hervorgehobenen Visualisierungen aus
[KECK et.al11]
55
DelViz goes RIA
Synthese und Konzeption
Darstellung der Teilmengen pro Filterschritt
Die dritte Variante stellt einen Mittelweg der beiden vorangegangenen Möglichkeiten
dar, indem für jede Filterinteraktion eine Teilmenge iterativ abgespalten wird. Dabei
werden immer von der aktuellen Ergebnismenge ausgehend zwei Teilmengen gebildet
(siehe Abbildung 38). Letztgenannte Variante ist im Rahmen dieser Arbeit umgesetzt
worden, da sie die Zuordnung jeder Teilmenge zu einem konkreten Filterschritt
ermöglicht. Weiterhin wird die Zersplitterung in viele kleinere Teilmengen vermieden,
weil diese linear mit der Anzahl der angewendeten Filter steigen.
Abbildung 38 - Links: zwei Teilmengen nach einem Filterschritt rechts: drei Teilmengen nach
einem zweiten Filterschritt
Die Visualisierungen in den einzelnen Teilmengen werden zu Balken gruppiert, um diese
von einander abzugrenzen (vgl. Pivot Kapitel 4.3). Diese werden von links nach rechts
angeordnet, beginnend mit der aktuellen Ergebnismenge und erstrecken sich in
vertikaler Ausdehnung vom oberen Rand aus. Es ist denkbar, die Balken entweder mit
konstanter Breite zu versehen oder diese dynamisch anzupassen. Erstere Variante (siehe
Abbildung 38, rechts) bietet den Vorteil, dass die Balken aufgrund ihrer
unterschiedlichen Höhe miteinander vergleichbar sind. Der Nachteil der konstanten
Breite wird durch die derzeitige Popularitätsverteilung der Schlagwörter bedingt. Diese
zeigt einen long tail [ANDERSON09], d.h. wenige Tags sind sehr häufig vertreten und
eine Großteil der Schlagwörter wird demgegenüber selten genutzt (siehe Abbildung 39).
Daraus folgt, dass es in der Historyansicht potentiell viele Mengen nur wenige
Visualisierungen enthalten, einige wenige jedoch eine sehr große Anzahl (siehe
Abbildung 40, links). Diese ungleiche Verteilung führt zu viel ungenutzter Fläche und
kleineren Vorschaubildern. Aufgrund dessen, ist die Balkenbreite variabel gestaltet,
wobei sie sich an der Teilmenge mit der größten Anzahl an Visualisierungen orientiert
(siehe Abbildung 40). Damit steht mehr Fläche zur Darstellung der Vorschaubilder zur
Verfügung, womit eine bessere Erkennbarkeit von interessanten Visualisierungsformen
durch den Nutzer gegeben ist.
56
DelViz goes RIA
Synthese und Konzeption
Abbildung 39 - Verteilung der Schlagwörter in der Datenbasis von DelViz zeigt einen long tail
aus [BACH10]
Abbildung 40 – links: History-Ansicht mit fester Balkenbreite rechts: History-Ansicht mit variabler
Balkenbreite
5.3.2 Interaktionsmöglichkeiten
Um die Suche nach interessanten Visualisierungsformen zu unterstützen ist es möglich
einzelne Balken durch Selektion mit der Maus zu vergrößern. Standardmäßig wird die
aktuelle Ergebnismenge vergrößert dargestellt, wenn auf die History-Ansicht gewechselt
wird (siehe Abbildung 41, links). Durch einen Mausklick auf eine andere Menge wird der
Fokus auf diese gewechselt, wobei dieser Vorgang animiert abläuft (siehe Kapitel 2.3.3,
Abbildung 41, rechts).
Da es dennoch möglich sein soll ein einzelnes Element aus der History-Ansicht im Detail
zu betrachten, ist eine zweistufige Interaktion konzipiert worden. Dies dedeutet, dass
ein Mausklick auf eine Visualisierung der Menge im Fokus auf die entsprechende
Detailansicht des Elements wechselt (vgl. Kapitel 2.3.4).
57
DelViz goes RIA
Synthese und Konzeption
Abbildung 41 - links: History-Ansicht mit Fokus auf linker Teilmenge rechts: History-Ansicht mit
Fokus auf mittlerer Teilmenge
Eine Hilfestellung für den Nutzer wird durch die Verwendung von farbigen
Hervorhebungen erreicht (vgl. Kapitel 4.2). Diese ist notwendig, um zum einen die
Balken als interaktive Elemente zu erkennen und zum anderen die Zweistufigkeit der
Interaktion zu verdeutlichen. Durch das Überfahren mit dem Mauszeiger wird entweder
der gesamte Balken betont oder ein einzelnes Element, je nachdem ob der
entsprechende Balken fokusiert ist (siehe Abbildung 42).
Abbildung 42 - links: Hervorhebung des ausgewählten Elements in fokussierter Teilmenge rechts:
Hervorhebung einer unfokussierten Teilmenge
Um die Beziehung zwischen ausgewählten Schlagwörtern und korrespondierenden
Ergebnismengen weiter zu erhöhen, wird die Anzeige der Breadcrumbs mit dem
Fokuswechsel auf den aktuellen Kontext angepasst und deren horizontale Position auf
die der Menge verschoben.
Durch die selektive Veränderung der Positiv- oder Negativauswahl von Schlagwörtern,
wird die Balkenbildung animiert den aktuellen Gegebenheiten angepasst (vgl. Kapitel
2.3.6, non-linear undo).
58
DelViz goes RIA
Synthese und Konzeption
5.4 Zusammenfassung
In diesem Kapitel erfolgte die Ausarbeitung des Konzepts für die Gesamtarchitektur,
sowie den Aufbau des Visualisierungswerkzeugs, anhand der History-Ansicht.
Ersteres wurde auf Basis der vorgestellten Grundlagen und Technologien aus Kapitel 2.2
bzw. 3, unter Berücksichtigung der Anforderungen aus Kapitel 5.1.2 erstellt. Tabelle 9
stellt den aufgestellten Anforderungen, die im Konzept verwendeten
Lösungsbestandteile gegenüber.
Anforderung
Zentrale Datenhaltung
Realisierung
Relationale
Datenbank
und
Umsetzung
des
Klassifikationsschemas
Flexible Architektur
Modularisierung und Austauschbarkeit von Komponenten
Mehrbenutzerfähigkeit
Kommunikation über Webservices
Zugriff über verschiedene SOAP + XML durch eine Vielzahl von Technologien nutzbar
Technologien
Skalierbarkeit
Hochperformante relationale Datenbank und verteilte
Architektur
Automatisierter Zugriff
XML als Datenaustauschformat
Tabelle 9 - Anforderungen an das softwaretechnologische Konzept und deren Entsprechungen
im aufgestellten Konzept
Der Aufbau des Visualisierungswerkzeug ist exemplarisch an der History-Ansicht
dargestellt worden. Das resultierende Visualisierungs- und Interaktionskonzept orientiert
sich an den Anforderungen aus Kapitel 5.1.2, unter Betrachtung der verwandten
Arbeiten aus Kapitel 4. Tabelle 10 stellt dies dar.
Anforderung
Übernahme des existenten Konzepts
Realisierung
Ergebnismenge mittels Rasteranordung in
Ergebnisbereich der Anwendung
aktuellen Ausgewählte Filtereinstellung als Breadcrumbs
Visualisierung
des
Anwendungkontexts
Nachvollziehbarkeit der getätigten
Filterauswirkungen
Unterstützung
der
explorativen
Suche
Aus Filterschritte resultierende Teilmengen als
Balken visualisiert
Teilmengen
durch
bifokale
Ansichten
fokussierbar
Tabelle 10 - Anforderungen an das Visualisierungs- und Interaktionskonzept, sowie deren
Entsprechungen im aufgestellten Konzept
59
DelViz goes RIA
Realisierung
6 Realisierung
Im folgenden Kapitel dieser Arbeit wird auf die Implementierungsdetails des
vorhandenen Prototyps, welcher anhand des vorgestellten Konzepts entstanden ist,
eingegangen.
6.1 Verwendete Software
Der vorliegende Prototyp wurde nach Abwägung der zur Verfügung stehenden
Technologien und Frameworks mit folgenden Produkten erstellt.
Zur Realisierung der RIA-Anwendung wurde Silverlight 4 genutzt, das mit der
Programmiersprache C# umgesetzt wurde. Als Softwareplattform steht das .NetFramework in der Version 4 zur Verfügung, womit ein Zugriff auf WCF ermöglicht wird.
Um die benötigten Transformationen der Bildrepräsentation einer Visualisierungen zu
realisieren, wurde auf die DeepZoom Tools Library zurück gegriffen. Der Webserver
Internet Information Services (IIS) von Microsoft übernimmt das Bereitstellen der RIAAnwendung, der Bilddatenbank und des Webservices. Als Datenbankserver kommt ein
Microsoft SQL Server 2010 zum Einsatz.
6.2 Verwendete Entwicklungsumgebungen
Zur Umsetzung der verteilten Architektur und deren Komponenten kommt das Microsoft Visual Studio 2010 zum Einsatz. Des Weiteren wurde das SQL Server Management
Studio 2008 zum Entwurf der Datenbanktabellen eingesetzt.
6.3 Entwicklung
Die Abfolge des Kapitels läuft chronologisch zum Aufbau der Client-Server-Architektur
beginnend mit der Datenbank bis zur Implementierung der RIA-Anwendung.
6.3.1 Datenbasis
Die Datenbank wurde entsprechend dem vorgestellten Schema unter Zuhilfenahme des
SQL Server Managment Studios erstellt. Alle existierenden Daten des DelViz-Werkzeugs
liegen in aufbereiteter Form in zwei XML-Dateien vor und sind im ersten Schritt in die
neu erstellte Datenbank einzupflegen. Um diese Aufgabe zu automatisieren, wurde ein
Hilfsprogramm (DelVizDatabasePopulator) in C# implementiert, dass die XML-Datei
ausliest und folgende zwei Punkte realisiert:


Befüllen der Datenbanktabellen
Erstellen der DeepZoomCollections (siehe Kapitel 6.3.3)
60
DelViz goes RIA
Realisierung
In der ersten Datei (debug_bundles_all.xml) finden sich Informationen zum Aufbau der
Hierarchie des Klassifikationsschemas. Beispielhaft sei folgender Eintrag der Datei
entnommen (siehe Auflistung 4):
<bundle name="Daten_Datenstruktur" tags="hierarchie netzwerk ordnung sammlung"/>
Auflistung 4 - Eintrag eines Bundles aus der aus der ursprünglichen XML-Datei
Über den Namen (name) lassen sich die Kategorie (Daten) und die Dimension (Datenstruktur) erstellen. Die Elemente in der Eigenschaft tags stellen die mit der Dimension
verbundenen Schlagwörter dar. Eine Besonderheit stellt der Eintrag in Auflistung 5 dar.
Darin sind alle vorhandenen Bearbeiter der Ausgangsdatenbasis mit ihrem Kürzel benannt. Diese sind in die Datenbanktabelle der Nutzer überführt worden.
<bundle name="Bearbeiter" tags="bb dk if jw m1 mc mk st vc"/>
Auflistung 5 - Eintrag aller Bearbeiter der ursprünglichen Datenbasis
Als nächsten Schritt sind alle Visualisierungen und die Verschlagwortung in die Datenbank zu überführen. Alle Informationen dafür finden sich in einer zweiten XML-Datei
(debug_tags_all.xml), wobei ein Eintrag exemplarisch, dem in Auflistung 6 entspricht.
<post
href="http://www.blogviz.com/blogviz/"
hash="79ed0ab21a3d97b26af4e55be3f7f7f5"
description="blogviz | Mapping the dynamics of Information Diffusion in Blog
space"
tag="st dk text verbund ordnung 2d rechteck orthogonal interaktiv zeigen klicken
werkzeugpalette diskussion soziale_software"
time="2009-06-02T14:54:28Z"
extended="Darstellung der Verbindungen zwischen Blog-Einträgen und deren zeitli
cher Verlauf/Rückbezug und Veränderungen."
meta="b2a87abd8800d8b1361e5790c8791ac9"
shared="no" />
Auflistung 6 - Exemplarischer Eintrag einer Visualisierung in XML-Form der Ausgangsdaten
Einige Informationen daraus sind unrelevant, da sie Metainformationen aus dem zugrundeliegenden delicious sind. Aufgrund dessen werden die Eigenschaften hash, meta
und shared nicht betrachtet bzw. übernommen. Die Eigenschaft href wird als URL zur
Quelle der Visualisierung in die Datenbank übernommen. Zusätzlich ist das separat auf
dem Webserver gespeicherte Bild zum Eintrag durch die URL bezeichnet, wobei diverse
Änderungen am Dateinamen vorgenommen worden. So ist zum Beispiel das anführende
http:// weggelassen worden und weitere / durch _ ersetzt worden. Die Anwendung
prüft, ob ein der umgewandelten URL, entsprechendes Bild auf dem Server gefunden
wurde und setzt den Pfad zur Datei in die Eigenschaft Image der Visualisierung. Die Eigenschaften description und extended bilden den Titel bzw. die Beschreibung der Visualisierung. Die Uhrzeit wird ebenfalls übernommen. Zur Verschlagwortung wird die Eigenschaft tag herangezogen. Dabei wird geprüft, ob sich darin Abkürzungen von Nutzern befinden (siehe Auflistung 6, st und dk). Für jeden gefundenen Nutzer wird nun die
61
DelViz goes RIA
Realisierung
Beziehung zwischen Schlagwort und Visualisierung, die in der Tabelle Visualization_Tags
stattfindet, hergestellt. Ist kein Nutzer vermerkt, wird ein generischer Standardnutzer
namens DelViz genutzt.
Damit sind alle relevanten Daten für die weitere Nutzung in der Datenbank und es wird
im folgenden Kapitel der Zugriff auf diese realisiert.
6.3.2 Webservice
Die Implementierung des Webservices erfolgt durch die Nutzung der Windows
Communication Foundation. Die Projektvorlage WCF Anwendung im Visual Studio 2010
erstellt das Grundgerüst des Services, was hauptsächlich aus zwei Quellcode-Dateien
und einer Konfigurationsdatei im XML-Format besteht. Um die Funktionalitäten des
Webservices zu bestimmen, werden diese zuerst in einer Schnittstelle (engl. interface)
deklariert und schließlich in einer davon implementierten Klasse ausdefiniert. Die
Schnittstelle ist mit speziellen Attributen zur Kenntlichmachung von WebserviceBestandteilen angereichert (siehe Auflistung 7). So zeigt [ServiceContract] an, dass
folgendes interface als Webservice interpretiert werden soll. Jede Methode, die über den
Webservice verfügbar ist, wird als [Operation Contract] gekennzeichnet. Zusätzlich
können auch Datentypen bzw. Klassen im Webservice definiert werden, die auch auf
der Client-Seite zur Nutzung bereitstehen. Die Verwendung der dafür benötigten
Atribute [DataContract] und [DataMember] wird in Auflistung 8 verdeutlicht. Durch die
Verwendung des O/R Mappers LinqToSQL stehen alle aus den Datenbanktabellen
generierten Klassen auch auf der Client-Seite zur Verfügung. Dies bedeutet, dass mit der
Verwendung des Webservices automatisch die Klassen Tag, Visualization, Bundle,
Category, etc. angelegt werden und eine manuelle Konvertierung oder Erstellung
überflüssig ist.
[ServiceContract]
public interface IService1
{
[OperationContract]
List<Tag> GetAllTags();
[OperationContract]
List<Visualization> GetAllVisualizations();
...
Auflistung 7 - Ausschnitt aus der Schnittstellendefinition des Webservices
62
DelViz goes RIA
Realisierung
[DataContract]
public class BundleAndCategoryItem
{
[DataMember]
public List<int> CategoryIDList { get; set; }
[DataMember]
public List<int> BundleIDList{ get; set; }
public BundleAndCategoryItem(List<int> catList, List<int> bdlList)
{
this.CategoryIDList = catList;
this.BundleIDList = bdlList;
}
}
Auflistung 8 - Definition der Klasse BundleAndCategoryItem in der Schnittstellendefinition des
WebServices
Eine vollständige Liste aller vorhandenen Methoden und Klassen befindet sich im
Anhang A.
Die genaue Ausgestaltung der verwendeten Methoden erfolgt durch die
Implementierung der Schnittstelle, wie in Auflistung 9 zu sehen.
public class Service1 : IService1
{
/// <summary>
/// returns a list of all tags
/// </summary>
/// <returns>list of tags</returns>
public List<Tag> GetAllTags()
{
...
Auflistung 9 - Ausschnitt aus der Implementierung der Webservice-Schnittstelle
Eine zentrale Aktion des Visualisierungswerkzeug ist das Filtern der Ergebnismenge
durch Schlagwörter. Da es nicht praktikabel ist, alle vorhandenen Daten dafür zum
Client zu senden, wird die Filterung durch den Webservice erledigt und nur relevante
Daten ausgetauscht. Die aktuell ausgewählten Filterkriterien werden dazu als Liste von
FilterExpression-Objekte an den Webservice geschickt. Um die Kommunikation und die
Datenbankabfragen zu minimieren, kommt LINQ-to-SQL zum Einsatz. Mit dieser Hilfe
wird eine Anfrage konstruiert, die zu Beginn alle Visualisierungen und die zugehörige
Liste von Schlagwörtern in anonyme Objekte kapselt. Auf dieser Grundlage werden
dann alle vorhandenen Filterkriterien angewendet, was dazu führt, dass die SQLAnfrage um die entsprechenenden Kriterien erweitert wird und erst am Ende des
Prozesses an die Datenbank geschickt wird. Das Resultat bilden alle für diesen
Filterkontext relevanten Visualisierungen. Da diese, bzw. hauptsächlich deren
Beschreibungstext vergleichsweise lange Übertragungszeiten verursachen, werden nur
die IDs der Visualisierungen übertragen. Diese sind ausreichend um die Anpassungen
63
DelViz goes RIA
Realisierung
der Ergebnisansicht zu realisieren. Der komplette Datensatz einer Visualisierung wird nur
für die Detailansicht benötigt, wofür jeweils ein Element übertragen werden muss.
Anhand der vorhandenen Methoden und Klassen gibt es eine existierende Beschreibung
des Webservice-Kontrakts. Zusätzlich wird noch eine Adresse und eine Bindung
benötigt, um den Dienst zu erreichen. Eine XML-Konfigurationsdatei stellt alle dafür
relevanten Einstellungsparameter bereit. Der Dienst wird dabei durch Endpunkte (engl.
endpoints) beschrieben. Diese besitzen eine Adresse, ausgehend von der Basisadresse
des Webservers und eine Bindung (engl. binding), sprich Informationen zum
Übertragungsprotokoll. Weiterhin verweisen sie auf den verwendeten Kontrakt (engl.
contract), also auf die oben beschriebenen Quellcode-Dateien. Es ist möglich für einen
Webservice mehrere Endpunkte zu definieren, um ihn über mehrere Protokolle
erreichbar zu machen.
<service behaviorConfiguration="mexBehavior" name="DelVizWebService.Service1">
<endpoint
address=""
binding="basicHttpBinding"
bindingConfiguration=""
name="endpointConfig"
contract="DelVizWebService.IService1" />
</service>
Auflistung 10 - Definition der Webservice Endpunkte in der Konfigurationsdatei
Um den Webservice bereitzuhalten wird der Webserver IIS verwendet. Der zugehörige
IIS-Manager dient zum Verknüpfen des Dienstes mit einer IP-Adresse und einem Port.
Der Einsprungpunkt für den Dienst, wird durch eine Service-Datei (siehe Auflistung 11)
angezeigt, welche auf die Endpunktkonfiguration in der Konfigurationsdatei verweist
und somit den Beginn der Interaktion darstellt.
<%@ ServiceHost="" Language="C#"
CodeBehind="Service1.svc.cs" %>
Debug="true"
Service="DelVizWebService.Service1"
Auflistung 11 - Service-Datei des DelVizWebService
Im Laufe der Entwicklung wurde es notwendig den Dienst auch für Flash-Anwendungen
zu öffnen. Da es in der aktuellen Version von ActionScript nicht direkt möglich ist mit
SOAP-Webservices zu kommunizieren, wurde mit WebOrb for .Net eine Anwendung
verwendet, die eine Vermittlerrolle zwischen SOAP und dem von ActionScript 3 verstandenen Action Message Format (AMF) bietet [MIDNIGHTCODERS11].
6.3.3 RIA-Anwendung
Die Entwicklung des Visualisierungswerkzeugs ist durch mehrere Personen erfolgt. Diese
Arbeit beschäftigt sich mit der Einbindung des Webservices, der Erstellung des Ergebnisbereichs und erläutert die Details im folgenden Abschnitt.
64
DelViz goes RIA
Realisierung
Die Einbindung des Webservices in die Silverlight-Anwendung erfolgt durch die Nutzung
des WSDL-Dokuments. Damit werden alle Parameter erfasst und eine sogenannte Proxyklasse zum Aufrufen des Webservices erstellt. Für den Anwender stellt sich der Aufruf
des Webservices, wie ein lokaler Methodenaufruf dar. Da die Ausführungsdauer über
Netzwerkgrenzen hinweg und potentiell lang dauern kann, wird der Aufruf asynchron
durchgeführt. Die Antwort erreicht die Anwendung über eine ereignisbasierte Steuerung.
Um die Vorteile von DeepZoom zur grafischen Darstellung der Ergebnisse zu nutzen sind
umfangreiche Vorbereitungen notwendig. Die Vorschaubilder der Visualisierungen müssen für die Nutzung durch DeepZoom aufbereitet werden, in dem aus ihnen Bilderpyramiden entstehen. Auf Grundlage der Space-Scale-Diagramme werden mehrere Versionen eines Bildes in unterschiedlichen Auflösungen angelegt und in festgelegte Quadrate
unterteilt (siehe Abbildung 43). Dieser Prozess ist durch die Nutzung der DeepZoom
Tools Library automatisiert [MICROSOFT10]. Die darin enthaltene Anwendung
DZConvert.exe realisiert diese Arbeit und erlaubt diverse Einstellmöglichkeiten bezüglich
Bildformat und –qualität. So wird zu jedem Bild eine Reihe von Ordnern, mit den verschiedenen Versionen erstellt und zusätzlich eine XML-Datei mit DeepZoom-spezifischen
Informationen des Bildes.
<Image TileSize="256" Overlap="1" Format="png" ServerFormat="Default"
xmlns="http://schemas.microsoft.com/deepzoom/2009">
<Size Width="400" Height="300" />
</Image>
Auflistung 12 - XML-Repräsentation eines DeepZoom-Bildes
256 px
512 px
1024 px
Abbildung 43 - Aufbau einer Image Pyramid mit 3 Ebenen
65
DelViz goes RIA
Realisierung
In einem zweiten Schritt wird eine Sammlung aller Bilder (DeepZoomCollection) mit Hilfe
der Anwendung DZCollection.exe erstellt. Dafür wird anhand der XMLMetainformationen zu jedem Bild eine neue XML-Datei, mit Informationen zu allen Bildern erstellt.
<Collection MaxLevel="8" TileSize="256" Format="png" NextItemId="716"
ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">
<Items>
<I Id="0" N="0" Source="images/128.111.69.4_~jevbratt_lifelike_01.xml">
<Size Width="400" Height="300" />
</I>
<I Id="1" N="1" Source="images/320x200.goto10.org_01.xml">
<Size Width="400" Height="300" />
</I>
…
Auflistung 13 - Auschnitt der XML-Repräsentation einer DeepZoom-Collection
Diese XML-Datei wiederum ist die Grundlage für die Darstellung in der SilverlightAnwendung, da sie die Quelle für ein MultiScaleImage darstellt. Dieses Control verarbeitet die XML-Informationen und stellt die enthaltenen Bilder dar, wofür eine prinzipiell
unendlich große Zeichenfläche zur Verfügung steht. Der sichtbare Ausschnitt wird durch
die beiden Eigenschaften ViewportOrigin und ViewportWidth bestimmt, wobei erstere
den Startpunkt des Ausschnitts auf der Zeichenfläche in der linken oberen Ecke des
Controls festlegt und letztere die Breite des Ausschnitts bestimmt (siehe Abbildung 44).
y
ViewportWidth
ViewportOrigin
x
Abbildung 44 - Schematische Darstellung der Positionierung des Viewports auf der
Anzeigefläche
Die in der Sammlung enthaltenen Bilder sind über die Eigenschaft SubImages abrufbar
und liegen als schreibgeschützte Liste von MultiScaleSubImages vor. Sie verfügen zum
66
DelViz goes RIA
Realisierung
Positionieren über die gleichen zwei Eigenschaften, sowie eine Eigenschaft Z-Index um
Überlappungen zu realisieren.
Um die Bilder auf einem Raster anzuordnen, wird aus der gesamten, Anzeigefläche des
MultiScaleImages, die für ein Bild zur Verfügung stehende Fläche berechnet. Da das Seitenverhältnis 1 ist, errechnet sich die Breite durch Wurzelziehen. Nun kann die
ViewPortWidth auf die maximale Anzahl SubImages pro Zeile gesetzt werden und diese
mittels einer Schleifenkonstruktion auf dem Raster angeordnet werden. Somit wird eine
optimale Platzausnutzung zur Anzeige der einzelnen Bilder erreicht.
Das Filtern der Ergebnismenge führt dazu, dass bestimmte Bilder nicht angezeigt werden. Um dies zu erreichen, besitzt jedes SubImage die Eigenschaft Opacity, welche die
Transparenz auf einer Skala von 0,0 (transparent) bis 1,0 (opak) regelt. Ein weiteres
Problem der Filterung ist das Herstellen der Beziehung zwischen SubImage und ID der
Visualisierung, da keine Möglichkeit existiert mit dem SubImage Metainformationen zu
speichern. Daher wird beim Erstellen der DeepZoomCollection eine zweite XML-Datei
(Metadata.xml) erstellt, welche in gleicher Reihenfolge die IDs der Visualisierungen speichert. Der Index des Elements in der Liste aller SubImages entspricht daher dem Index
des korrespondierenden Visualisierungsschlüssels.
Die einzelnen Bilder bieten keine direkte Möglichkeit auf Mausinteraktion zu reagieren.
Um den Mausklick auf ein Bild zu registrieren, ist es also notwendig alle Bilder auf ihre
Position zu prüfen. Da diese in einem anderen Koordinatensystem angeordnet sind (siehe Abbildung 44), bedarf es mehrerer Transformationsschritte, wie in Auflistung 14 ersichtlich.
for (int i = 0; i < imageList.Count; i++)
{
MultiScaleSubImage image = imageList[i];
// logical origin
Point topLeft = image.ViewportOrigin;
// origin relative to parent image
topLeft.X = -(topLeft.X / image.ViewportWidth);
topLeft.Y = -(topLeft.Y / image.ViewportWidth);
// width and height calculation
double width = 1 / image.ViewportWidth;
double height = width / image.AspectRatio;
// bottom right point of image
Point bottomright = new Point(topLeft.X + width, topLeft.Y + height);
// logical to element conversion and hit test
topLeft = parentImage.LogicalToElementPoint(topLeft);
bottomright = parentImage.LogicalToElementPoint(bottomright);
Rect r = new Rect(topLeft, bottomright);
if (r.Contains(p))
{
gotHit = true;
}
}
67
DelViz goes RIA
Realisierung
return gotHit;
Auflistung 14 - Test zum Erfassen der Mausinteraktion auf SubImages
6.3.4 Historyfunktion
Damit die History-Ansicht umgesetzt werden kann, sind zwei getrennte Vorgänge notwendig. Zum einen wird die Liste der vergangenen Interaktionsschritte und dazu korrespondierenden Ergebnismengen gepflegt. Dies geschieht aus Performancegründen zum
Teil auf Clientseite, aber auch auf dem Server. Das Hinzufügen eines Filterschritts und
das Aktualisieren der beiden davon betroffenen Listen, sowie das Entfernen des letzten
Filterschrittes werden ohne Webservice-Interaktion realisiert. Das Entfernen eines Filterschritts aus der Mitte der Liste hat eine Neuberechnung der Ergebnismengen aller darauffolgenden Schritte zur Folge, die auf dem Server durchgeführt wird. Ziel ist es zu
jedem Zeitpunkt eine aktuelle Liste aller Filterkriterien und davon abhängige Mengen zur
Verfügung zu haben. Diese wird beim Wechsel zur entsprechenden Ansicht visualisiert.
Um die Balkenbreite zu berechnen wird ein dreistufiges Verfahren verwendet. Als ersten
Schritt wird jedem Balken die gleiche Breite zugewiesen und auf dieser Grundlage die
maximale Anzahl der Bilder pro Spalte ermittelt. Damit bestimmt der Balken mit der
größten Anzahl an Visualisierungen deren Größe. Als zweiten Schritt wird jeder Balken
mit den neuen Abmessungen der enthaltenen Bilder berechnet und auch die Abstände
gesetzt. Die Breite orientiert sich jetzt an der Anzahl der Bilder und wird somit dynamisch bestimmt. Als letzten Schritt wird der aktive Balken vergrößert, bis er den übrig
gebliebenen Platz einnimmt. Durch Selektion eines anderen Balkens wird der komplette
Prozess neu gestartet. Eine schematische Darstellung dieses Prozesses ist in Abbildung
45 ersichtlich.
Abbildung 45 - Berechnung der Balkenbreite und Anordnung
68
DelViz goes RIA
Realisierung
6.4 Ergebnisse
In diesem Abschnitt wird anhand eines exploratien Suchschritts die Funktionsweise der
History-Ansicht im fertigen Anwendungsprototyp vorgestellt. Durch die Verwendung
von Screenshots wird dies zusätzlich unterstützt.
Ausgangssituation
Der Nutzer hat das Schlagwort Verbund in die Positivauswahl verschoben und befindet
sich in der History-Ansicht (siehe Abbildung 46).
Auswahl eines zweiten Schlagworts
Durch das Verschieben des Schlagworts Radial in die Positivauswahl wird die HistoryAnsicht dem aktuellen Kontext mit Hilfe einer Animation angepasst (siehe
Abbildung 47).
Abbildung 46 - Screenshot der History-Ansicht mit einem ausgewählten Schlagwort
69
DelViz goes RIA
Realisierung
Abbildung 47 - Screenshots der animierten Veränderung der History-Ansicht durch Auswahl
eines zweiten Schlagworts
Änderung des Fokus auf zweite Teilmenge
Durch einen Mausklick auf die zweite Teilmenge startet wiederum eine Animation, in
deren Verlauf der Fokus auf den selektierten Balken wechselt und dieser entsprechend
vergrößert wird (siehe Abbildung 48).
70
DelViz goes RIA
Realisierung
Abbildung 48 - Screenshot der animierten Fokusänderung von der linken zur mittleren
Teilmenge
Weitere Verwendung in anderen Projekten
Die Nutzung der Datenbasis und deren Anbindung durch den erstellten Webservice ist
im Rahmen von weiteren Projekten erfolgt. So wurde am Lehrstuhl Mediengestaltung
ein Komplexpraktikum zur Umsetzung von Flash-Anwendungen1 veranstaltet, die darauf
zurückgriffen. Ebenso greift eine in Bearbeitung befindliche Diplomarbeit auf den Webservice zurück und erweitert diesen entsprechend den eigenen Erfordernissen.
6.5 Zusammenfassung
Das Kapitel gibt zu Beginn einen kurzen Überblick der verwendeten Technologien und
Entwicklungsumgebungen. Darauffolgend wird die Entwicklung des Prototyps in einigen
Teilen betrachtet. Deutlich wird, dass die vorbereiteten Tätigkeiten zum Aufbau der Datenbasis und der Erstellung des Webservices sehr umfangreich sind. Vor allem die Erstellung der DeepZoomCollection ist aufwendig, wobei durch die vorhandenen Werkzeuge
ein großer Teil der Arbeit abgenommen wird. Dies trifft ebenso auf die Realisierung des
Webservices zu, wo die Nutzung von WCF, vor allem in Verbindung mit Silverlight, ein
problemloses Zusammenspiel ermöglicht. Abschließend wird anhand einer Beispielinteraktion die Funktionsweise der History-Ansicht im Prototyp demonstriert.
1
http://mg.inf.tu-dresden.de/lehre/ergebnisse/flashmultitouch-mit-jash-und-queo
71
DelViz goes RIA
Zusammenfassung
7 Zusammenfassung
Abschließend fasst dieses Kapitel die vorliegende Arbeit und deren Inhalt zusammen.
Eine kritische Auseinandersetzung zwischen den Anforderungen des Konzepts und dem
Resultat findet im Abschnitt 7.1 statt. Darauf folgt ein Ausblick auf mögliche aufbauende Forschungsarbeiten.
7.1 Fazit
Nach dem einführenden Kapitel wurden im Kapitel 2 die relevanten Grundlagen für die
Erstellung des Visualisierungswerkzeugs vorgestellt. Da diese Arbeit sich im besonderen
Maße mit der Erstellung einer History-Ansicht beschäftigt hat, wurde neben der
generellen Betrachtung zum Aufbau einer Client-Server-Architektur auch die
Möglichkeiten zur Erfassung einer Entscheidungsnachverfolgung betrachtet. Ebenso
wurden Grundlagen zum Aufbau und zu Interaktionsmöglichkeiten in
Informationsvisualisierungen vorgestellt, um aus der Vielzahl existierender Ansätze
geeignete Formen zur Umsetzung des Konzepts zu finden.
Da zur Umsetzung von verteilten Anwendungen eine Vielzahl von Technologien
existieren, beschäftigte sich das Kapitel 3 mit einer Auswahl gängiger Technologien und
deren Vergleich. Dabei wird deutlich, dass im Umfeld des .Net-Frameworks eine Reihe
von Frameworks existieren, die den kompletten Prozess abdecken und eine hohe
Interoperabilität ermöglichen. Daraus folgte, dass diese Technologien zur Umsetzung
des Konzepts genutzt wurden (siehe Kapitel 5.2.1, 6).
Zur Konzeption des Visualisierungswerkzeugs wurden in Kapitel 4 existierende Lösungen
aus den relevanten Bereichen Bildbrowser und Facettenbrowser betrachtet und diese in
den bedeutsamen Teilaspekten der Visualisierung, der Interaktion und der Verfügbarkeit
von History-Mechanismen verglichen. Dabei wurde festgestellt, dass HistoryMechanismen oftmals nur rudimentär realisiert wurden und keine der gewählten
Anwendungen eine explizite Sicht auf die History bietet.
Im Kapitel 5 wurden daraufhin die beiden Teilbereiche dieser Arbeit auf Grundlage der
vorangegangenen Abschnitte konzipiert. Dazu wurden die gewählten Technologien zum
Aufbau einer verteilten Architektur genutzt, sowie eine Sicht auf die getätigten
Interaktionsschitte innerhalb des Visualisierungswerkzeug erarbeitet.
Der Aufbau der verteilten Architektur erfolgte mit dem Ziel eine offen zugängliche
Datenbasis zu schaffen, die multiplen Zugriff über eine Vielzahl von Technologien
erlaubt. Daher ist ein Webservice zum Zugriff auf die relationale Datenbank entstanden.
Um das Visualisierungswerkzeug zu konzipieren wurde das bestehende Konzept der
DelViz-Anwendung genutzt, dass Angaben zum verwendeten Visualisierungs- und
Interaktionskonzept lieferte. Um dieses entsprechend den Vorgaben der History-Ansicht
zu erweitern, wurde die Darstellung der Teilmengen, die bei jedem Filterschritt
entstehen, realisiert. Damit wird die explorative Suche als eine zentrale Aufgabe der
DelViz-Anwendung unterstützt.
72
DelViz goes RIA
Zusammenfassung
Darüber hinaus wird die Suche in ausgeschlossenen Visualisierungen durch eine bifokale
Ansicht auf die Teilmengen in Balkendarstellung unterstützt.
Ferner fand eine Darstellung des aktuellen Filterkontexts durch die Nutzung von
Breadcrumbs statt, wobei diese mit der Darstellung der Teilmengen kombiniert wurde.
7.2 Ausblick
Austausch der Datenbasis
Die entstandene Lösung zeigt, wie eine konkrete verschlagwortete Datenbasis
durchsucht und analysiert werden kann. Durch die verwendete Modularisierung des
Systems ist ein erster Schritt in Richtung Austauschbarkeit der Datenbasis getätigt
wurden. Dennoch ist die Ausrichtung der Anwendung sehr konkret auf das verwendete
Klassifizierungsschema ausgerichtet und ein Austausch der Daten nicht trivial möglich.
Eine mögliche Weiterentwicklung besteht daher in der weitergehenden Abstraktion in
Richtung eines Frameworks für beliebige Datenmengen, um DelViz auch für andere
Anwendungsfälle nutzbar zu machen.
Visualisierung der Datenmenge
Die gezeigte Lösung stellt insgesamt eine Maximalzahl von ca 700 Visualisierungen dar,
womit eine Darstellung der Vorschaubilder als Repräsentation in der Übersichtsansicht
möglich ist. Es ist demgegenüber denkbar, dass auch größere Datenmengen mit
mehreren tausend Elementen visualisiert werden sollen. Hier stößt die Darstellung der
Vorschaubilder an ihre Grenzen, da das einzelne Bild nicht erkennbar ist. Eine
Möglichkeit besteht hier in der Nutzung von pixelbasierten Techniken, wie bei FYOI
geschehen (vgl. Kapitel 4.4). Die Erforschung von passenden Ansätzen wäre ein zweites
Erweiterungskriterium.
73
DelViz goes RIA
Anhang A
Anhang A
Liste aller Klassen, die durch den Webservice bereitgestellt werden:
Klasse
VisualizationPreview
Bedeutung
Objekt mit relevanten Eigenschaften einer Visualisierung zur
Übertragungsoptimierung
TagFilterCondition
Aufzählung der Filtermöglichkeiten. Entweder Include oder
Exclude
TagFilterExpression
Filterausdruck,
besteht
aus
dem
Tag
und
der
TagFilterCondition
TagFilterExpression
Objekt, um Mengenänderung eines Filterschritts festzuhalten
BundleAndCategoryItem Objekt zur Abfrage von Kategorie und Dimension eines Tags
TagFrequencyItem
Objekt zur Kapselung der Vereinigungs- und Schnittmenge
eines Filterungszustands
Liste aller Methoden, die durch den Webservice bereitgestellt werden:
Methode
GetAllCategories
GetCategory
GetAllBundles
GetAllBundlesInCategory
GetBundle
GetAllTagsInBundle
GetAllTags
GetTag
GetCategoriesAndBundlesOfTag
GetAllTagsOfVisualization
GetAllVisualizationPreviewsByTag
Bedeutung
Liefert alle vorhandenen Categories zurück
Liefert Category anhand der categoryID zurück
Liefert alle vorhandenen Bundles zurück
Liefert alle Bundles einer Category zurück
Liefert Bundle anhand der bundleID zurück
Liefert alle Tags eines Bundles zurück
Liefert alle Tags zurück
Liefert Tag anhand der tagID zurück
Liefert Category und Bundle eines Tags anhand der
tagID zurück
Liefert alle Tags einer Visualisierung zurück
Liefert Visualisierungsvorschauen anhand eines Tags zur
Filterung zurück
GetAllVisualizationPreviewsByTags Liefert Visualisierungsvorschauen anhand einer Liste von
Tags zur Filterung zurück
Liefert IDs von Visualisierungen anhand einer Liste von
GetAllVisIDsByTags
Tags zur Filterung zurück
Liefert alle Visualisierungen als Vorschau zurück
GetAllVisualizationPreviews
Liefert Visualisierung anhand der visualizationID zurück
GetVisualization
Liefert für die übergebene Auswahl von Tags eine Liste
GetRelatedTags
aller mit ihnen in Verbindung stehender Tags zurück,
inklusive der zugehörigen Häufigkeit
Liefert die Häufigkeit jedes Tags zurück
GetAllTagFrequencies
Liefert die Häufigkeit eines Tags zurück
GetTagFrequency
Liefert die gewichtete Häufigkeit für eine Auswahl von
GetWeightedTagFrequency
Tags zurück
74
DelViz goes RIA
Methode
GetFilteredTagFrequencies
Anhang A
Bedeutung
ChangeBundle
Liefert die gewichtete Häufigkeit der Verbindung jedes
Tags mit einer Auswahl von Tags zurück
Liefert eine zufällige Visualisierungsvorschau, die mit
dem Tag, der übergebenen TagID versehen ist
Fügt neue Category in die Datenbank ein
Fügt neues Bundle in die Datenbank ein, optional mit
Zuweisung zu einer Category
Fügt neues Tag in die Datenbank ein, optional mit
Zuweisung zu einem Bundle
Ersetzt eine aktualisierte Kategorie in der Datenbank
Ersetzt ein aktualisiertes Bundle in der Datenbank
Ersetzt ein aktualisiertes Tag in der Datenbank
Ersetzt eine aktualisierte Visualisierung in der Datenbank
Löscht eine Kategorie aus der Datenbank
Löscht ein Bundle aus der Datenbank
Löscht ein Tag aus der Datenbank
Löscht eine Visualisierung aus der Datenbank
Ändert die Zugehörigkeit eines Bundles zu einer
Kategorie
Ändert die Zugehörigkeit eines Tags zu einem Bundle
TagVisualization
UntagVisualization
Markiert eine Visualisierung mit einem Tag
Entfernt ein Tag von einer Visualisierung
GetRandomVisualizationForTag
InsertCategory
InsertBundle
InsertTag
EditCategory
EditBundle
EditTag
EditVisualization
DeleteCategory
DeleteBundle
DeleteTag
DeleteVisualization
ChangeCategory
75
DelViz goes RIA
Glossar
Glossar
.Net
Softwareplattform zum Entwickeln und Ausführen von Anwendungen
API
Application Programming Interface - Programmteil, der von
anderer Software angesprochen werden kann, um eine Anbindung ins System zu erreichen
Control
Visuelles Element einer Benutzungsoberfläche
Datenbindung
Beschreibt den Vorgang, bei dem Hintergrunddaten an Elemente Anwendungsoberfläche gebunden werden
Delicious
Onlinedienst zur Verwaltung von persönlichen Lesezeichen,
mit der Möglichkeit diese öffentlich sichtbar zu machen
Facettenklassifiaktion Ein Klassifikationssystem, bei dem Objekte durch Ausprägungen in mehreren Klassen (sog. Facetten) beschrieben werden
Firewall
Sicherheitsapplikation in Netzwerken zur Überwachung des
Datenverkehrs
Folksonomy
Zuweisung von Schlagwörtern zu Objekten in freier Form,
häufig in sozialer Software anzutreffen
Framework
Definition eines Ordnungsrahmens zur Erstellung von Software. Unterstützung der Programmierung durch Bereitstellen
von Funktionalitäten
Hash
Funktion, die eine Datenmenge auf einen eindeutigen Schlüssel abbildet
Java
Weit verbreitete, objektorientierte Programmiersprache
JavaScript
Objektorientierte Skriptsprache, häufig genutzt zur dynamischen Generierung von HTML-Inhalten
jQuery
JavaScript-Framework mit umfangreichen Möglichkeiten zur
Manipulation von Webseiten
Panning
Verschieben eines Bildausschnitts mit Hilfe der Maus
i
DelViz goes RIA
Plug-In
Glossar
Software, die in andere Software integriert werden kann und
dabei deren Funktionalität erweitert
Python
Universelle
Skriptsprache
mit
objektorientierten,
aspektorientierten und funktionalen Elementen
Ruby
Objektorientierte und interpretierte Skriptsprache mit dynamischer Typisierung
Social Tagging
Form der freien Verschlagwortung durch verschiedene Nutzer
Tooltip
Ein kleines Fenster, das einen Beschreibungstext zu einer
Komponente der Anwendungsoberfläche anzeigt
Thumbnails
Verkleinerte Vorschaugrafiken einer Bildes
Tweening
Animationsverfahren, bei der eine Bewegung zwischen zwei
Schlüsselbildern durch Erzeugung von Einzelbildern realisiert
wird
Widget
Komponente einer Anwendungsoberfläche, die eine grafische
Repräsentation besitzt. Durch Interaktion wird eine Änderung
des Anwendungszustand erreicht
ii
DelViz goes RIA
Abkürzungsverzeichnis
Abkürzungsverzeichnis
AJAX
Asynchronous Javascript and XML
AMF
Action Message Format
BSL
Big Smart Lattice
HQL
Hibernate Query Language
HTTP
Hypertext Transfer Protocol
LINQ
Language Integrated Query
O/R Mapper
Objekt/Relation Mapper
SOAP
Simple Object Access Protocol
SQL
Structured Query Language
URL
Universal Resource Locator
WCF
Windows Communication Foundation
WWW
World Wide Web
XML
Extensible Markup Language
ZUI
Zoomable User Interface
iii
DelViz goes RIA
Literaturverzeichnis
Literaturverzeichnis
[2GH11] 2GH, 2011. Internetauftritt 2GH. Verfügbar Unter: http://www.2gh.de/ [Zugegriffen am: 12.Juli.2011].
[ANDERSON09] Anderson, C., 2009. The longer long tail: how endless choice is creating
unlimited demand, Random House Business. .
[ARCHER et.al84] Archer, J.E., Conway, R. & Schneider, F.B., 1984. User Recovery and
Reversal in Interactive Systems. ACM Transactions on Programming Languages and
Systems, 6(1), S.1-19.
[BACH10] Bach, B., 2010. Facettice : Integrating Faceted Navigation and Concept Lattices for Visual Data Exploration. Diplomarbeit Technische Universität Dresden
[BAUER et.al07] Bauer, C. & King, G., 2007. Java Persistence with Hibernate,
[BEDERSON01] Bederson, B.B., 2001. PhotoMesa: a zoomable image browser using
quantum treemaps and bubblemaps. In Proceedings of the 14th annual ACM symposium on User interface software and technology. ACM, S. 71–80.
[BEDERSON et.al99] Bederson, B.B. & Boltman, A., 1999. Does animation help users
build mental maps of spatial information? In Information Visualization, 1999.(Info
Vis’ 99) Proceedings. 1999 IEEE Symposium on. IEEE, S. 28–35.
[BEDERSON et.al94] Bederson, B.B. & Hollan, J.D., 1994. Pad++, New York, New York,
USA: ACM Press.
[BERLAGE94] Berlage, T., 1994. A selective undo mechanism for graphical user interfaces based on command objects. ACM Transactions on Computer-Human Interaction,
1(3), S.269-294.
[BERNERS-LEE et.al94] Berners-Lee, T. et.al, 1994. The World-Wide Web. Communications of the ACM, 37(8), S.76-82.
[BIER et.al93] Bier, E.A. et.al, 1993. Toolglass and magic lenses: the see-through interface. In Proceedings of the 20th annual conference on Computer graphics and interactive techniques. ACM, S. 73–80.
[BRAY et.al08] Bray, T. et.al, 2008. Extensible Markup Language (XML) 1.0 (Fifth Edition)
W3C
Recommendation
26
November
2008.
Verfügbar
Unter:
http://www.w3.org/TR/xml/. [Zugegriffen am: 12.Juli.2011].
iv
DelViz goes RIA
Literaturverzeichnis
[BUSCH et.al09] Busch, M. & Koch, N., 2009. Rich Internet Applications,
[CALVERT et.al09] Calvert, C. & Kulkarni, D., 2009. Essential LINQ, Addison-Wesley.
[Stuart K CARD et.al99] Card, Stuart K, Mackinlay, Jock D & Shneiderman, Ben, 1999.
Readings in information visualization: using vision to think, Morgan Kaufmann Publishers.
[CARLSON03] Carlson, C.N., 2003. Information overload, retrieval strategies and Internet user empowerment. Proceedings The Good, the Bad and the Irrelevant (COST
269), 1(1), S.169–173.
[CERAMI et.al02] Cerami, E. & Laurent, S.S., 2002. Web services essentials, O’Reilly &
Associates, Inc. Sebastopol, CA, USA.
[CHAMBERLIN et.al76] Chamberlin, D.D. et.al, 1976. SEQUEL 2: a unified approach to
data definition, manipulation, and control. IBM J. Res. Dev., 20(6), S.560-575.
[COCKBURN et.al08] Cockburn, A., Karlson, A. & Bederson, B.B., 2008. A review of
overview+detail, zooming, and focus+context interfaces. ACM Computing Surveys,
41(1), S.1-31.
[CODD70] Codd, E.F., 1970. A relational model of data for large shared data banks.
1970. M.D. computing : computers in medical practice, 15(3), S.162-6.
[COMBS et.al99] Combs, T.T. a & Bederson, B.B., 1999. Does zooming improve image
browsing? Proceedings of the fourth ACM conference on Digital libraries - DL ’99,
S.130-137.
[COOK et.al06] Cook, W.R. & Ibrahim, A.H., 2006. Integrating programming languages
and databases: What is the problem. ODBMS. ORG, Expert Article, (0448128).
[COOPER07] Cooper, P., 2007. Silverlight (and Ruby on the .NET CLR). Verfügbar Unter:
http://www.rubyinside.com/silverlight-and-ruby-on-the-net-clr-473.html. [Zugegriffen am: 12.Juli.2011].
[CRAWFORD et.al06] Crawford, S. & Boese, E., 2006. ActionScript: a gentle introduction
to programming. Journal of Computing Sciences in Colleges, 21(3), S.156–168.
[CURBERA et.al02] Curbera, F. et.al, 2002. Unraveling the Web services web: an introduction to SOAP, WSDL, and UDDI. Internet Computing, IEEE, 6(2), S.86–93.
[DEISER02] Deiser, O., 2002. Einführung in die Mengenlehre, Springer.
[DIETRICH et.al09] Dietrich, S.W. & Chaudhari, M., 2009. The missing LINQ between
databases and object-oriented programming: LINQ as an object query language for
a database course. Journal of Computing Sciences in Colleges, 24(4), S.282–288.
v
DelViz goes RIA
Literaturverzeichnis
[DÜRKSEN09] Dürksen, M., 2009. Entwicklung von Rich Internet Applications mit
Silverlight.
[GARRETT05] Garrett, J.J., 2005. Ajax: A New Approach to Web Applications. Verfügbar
Unter:
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
[Zugegriffen am: 12.Juli.2011].
[GOTTHARDT01] Gotthardt, K., 2001. Grundlagen der Informationstechnik, Lit.
[ISVIS11] ISVIS, 2011. 3D Player Tracking Visualization. Verfügbar
http://isvis.com/work/silverlight/3d/tracking/ [Zugegriffen am: 12.Juli.2011].
Unter:
[INSTONE02] Instone, K., 2002. Location, path and attribute breadcrumbs. Proceedings
of the 3rd Annual Information Architecture.
[JACOBS05] Jacobs, I., 2005. World Wide Web Consortium Process Document. Verfügbar Unter: http://www.w3.org/2005/10/Process-20051014/. [Zugegriffen am:
12.Juli.2011].
[JAROSCH10] Jarosch, H., 2010. Grundkurs Datenbankentwurf, Wiesbaden: Vieweg+Teubner.
[KECK et.al11] Keck, M. et.al, 2011. DelViz : Ein Werkzeug zur Exploration von Visualisierungen. In Wieder mehr Sehen! Aktuelle Einblicke in die Technische Visualistik. S.
53-64.
[KEIM00] Keim, D. a, 2000. Designing pixel-oriented visualization techniques: theory and
applications. IEEE Transactions on Visualization and Computer Graphics, 6(1), S.5978.
[KEIM02] Keim, D. a, 2002. Information visualization and visual data mining. IEEE Transactions on Visualization and Computer Graphics, 8(1), S.1-8.
[LEEMAN86] Leeman, G.B., 1986. A formal approach to undo operations in programming languages. ACM Transactions on Programming Languages and Systems, 8(1),
S.50-87.
[LITTLE et.al09] Little, J.A. et.al, 2009. Silverlight 3 Programmer’s Reference, John Wiley
& Sons. Verfügbar Unter: http://books.google.de/books?id=6JoA5EudpygC.
[J. MACKINLAY86] Mackinlay, J., 1986. Automating the design of graphical presentations of relational information. ACM Transactions on Graphics, 5(2), S.110-141.
[J.D. MACKINLAY et.al91] Mackinlay, J.D., Robertson, G.G. & Card, S.K., 1991. The
perspective wall: Detail and context smoothly integrated. In Proceedings of the
SIGCHI conference on Human factors in computing systems: Reaching through
technology. ACM, S. 173–176.
vi
DelViz goes RIA
Literaturverzeichnis
[MCCABE07] McCabe, S.R., 2007. Exploring LINQ, SQLMetal and SqlTac. Verfügbar Unter:
http://www.simple-talk.com/dotnet/.net-tools/exploring-linq,-sqlmetal-andsqltac/ [Zugegriffen am: 12.Juli.2011].
[MCLEAN et.al02] McLean, S., Williams, K. & Naftel, J., 2002. Microsoft .Net Remoting,
Redmond, WA, USA: Microsoft Press.
[MICROSOFT09] Microsoft, 2009. Animations (Silverlight QuickStart). Verfügbar Unter:
http://www.silverlight.net/learn/quickstarts/animations/.
[Zugegriffen
am:
12.Juli.2011].
[MICROSOFT10] Microsoft, 2010. Deep Zoom Tools. Verfügbar Unter:
http://www.silverlight.net/archives/whitepapers/deep-zoom-tools [Zugegriffen am:
12.Juli.2011].
[MICROSOFT11]
Microsoft,
2011.
IE
Test
Drive.
Verfügbar
http://ie.microsoft.com/testdrive/ [Zugegriffen am: 12.Juli.2011].
Unter:
[MIDNIGHTCODERS11] MidnightCoders, 2011. WebORB for .NET. Verfügbar Unter:
http://www.themidnightcoders.com/products/weborb-for-net/overview.html [Zugegriffen am: 12.Juli.2011].
[MILLER et.al77] Miller, L. & Thomasjr, J., 1977. Behavioral issues in the use of interactive
systems. International Journal of Man-Machine Studies, 9(5), S.509-536.
[MIRONELA09] Mironela, P., 2009. The Importance of Web Services Using the RPC and
REST Architecture. 2009 International Conference on Computer Technology and
Development, S.377-379.
[MOERE04] Moere, A.V., 2004. information aesthetics - Information Visualization & Visual Communication. Verfügbar Unter: http://infosthetics.com/ [Zugegriffen am:
12.Juli.2011].
[NODA et.al05] Noda, T. & Helwig, S., 2005. Rich Internet Applications.
[PARYS et.al04] Parys, D. & Mauerer, J., 2004. Web Services Enhancements. Verfügbar
Unter: http://msdn.microsoft.com/de-de/library/bb979293.aspx [Zugegriffen am:
12.Juli.2011].
[PATRICIO09] Patricio, A., 2009. NHibernate for .NET. Verfügbar Unter:
http://community.jboss.org/wiki/NHibernateForNET [Zugegriffen am: 12.Juli.2011].
[PEAK et.al05] Peak, P. & Heudecker, N., 2005. Hibernate quickly, Manning.
[POWELL06] Powell, G., 2006. Beginning database design, Wiley Publishing.
vii
DelViz goes RIA
Literaturverzeichnis
[PREIM et.al10] Preim, B. & Dachselt, R., 2010. Interaktive Systeme: Band 1: Grundlagen,
Graphical User Interfaces, Informationsvisualisierung, Springer.
[PRISS00] Priss, U., 2000. Faceted information representation. In Working with Conceptual Structures. Proceedings of the 8th International Conference on Conceptual
Structures, Shaker Verlag, Aachen. Citeseer, S. 84–94.
[REDKAR et.al04] Redkar, A. et.al, 2004. Pro MSMQ: Microsoft Message queue programming, Apress.
[SCHILL et.al07] Schill, A. & Springer, T., 2007. Verteilte Systeme, Berlin, Heidelberg:
Springer Berlin Heidelberg.
[B. SHNEIDERMAN94] Shneiderman, B., 1994. Dynamic queries for visual information
seeking. IEEE Software, 11(6), S.70-77.
[B. SHNEIDERMAN96] Shneiderman, B., 1996. The eyes have it: a task by data type taxonomy for information visualizations. Proceedings 1996 IEEE Symposium on Visual
Languages, S.336-343.
[SIEMENS11] Siemens, 2011. Siemens PLM Campus. Verfügbar
http://www.siemensplmcampus.com/ [Zugegriffen am: 12.Juli.2011].
Unter:
[SPENCE et.al82] Spence, R. & Apperley, M., 1982. Data base navigation: an office environment for the professional. Behaviour & Information Technology, 1(1), S.43-54.
[STEFANER et.al07] Stefaner, M. & Muller, B., 2007. Elastic lists for facet browsers. Database and Expert Systems Applications, International Workshop on, 0, S.217-221.
[VANLENGEN04] VanLengen, C., 2004. Creating web services using asp. net. Journal of
Computing Sciences in, S.262-275.
[VAUGHAN-NICHOLS10] Vaughan-Nichols, S., 2010. Will HTML 5 Restandardize the
Web? Computer, (April 2010), S.13-15.
[W3C11] W3C, 2011. W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for
HTML5 Standard. Verfügbar Unter: http://www.w3.org/2011/02/htmlwg-pr.html.en
[Zugegriffen am: 12.Juli.2011].
[Sanjiva WEERAWARANA et.al05] Weerawarana, Sanjiva et.al, 2005. Web Services Platform Architecture, Prentice Hall.
[YANG88] Yang, Y., 1988. Undo support models. International Journal of Man-Machine
Studies, 28(5), S.457-481.
viii
DelViz goes RIA
Literaturverzeichnis
[ZHANG et.al09] Zhang, W. & Cheng, G., 2009. A Service-Oriented Distributed Framework-WCF. 2009 International Conference on Web Information Systems and Mining, S.302-305.
[DERBAUER11] derBauer, 2011. Internetauftritt derBauer.
http://www.derbauer.de/ [Zugegriffen am: 12.Juli.2011].
ix
Verfügbar
Unter:
DelViz goes RIA
Abbildungsverzeichnis
Abbildungsverzeichnis
Abbildung 1 - VENN Diagramme und mathematische Notation für a) Leere Menge, b) Schnittmenge, c)
Vereinigungsmenge, d) Differenzmenge, e) Identität, f) Symmetrische Differenz ....................................... 7
Abbildung 2 - Schematischer Aufbau einer Client-Server Architektur mit zwei Clients und einem Server
inkl. Datenbank ........................................................................................................................................ 8
Abbildung 3 - Schema einer many-to-many-Beziehung am Beispiel von Studenten, die Vorlesungen
belegen mit der Intersection Table Immatrikulation ................................................................................. 10
Abbildung 4 - Beispiel eines möglichen Mappings zwischen der Datenbanktabelle Vorlesung zu einer
Klasse in einer objektorientierten Sprache, hier C# .................................................................................. 14
Abbildung 5 - Visualisierungspipeline nach Card [CARD et al.99] ............................................................ 15
Abbildung 6 – links: Hierarchische Ordnung von Elementen rechts: Elemente in einer Netzwerkstruktur . 16
Abbildung 8 - links: Liniendiagramm des Eurokurses mit Microsoft Excel erstellt ..................................... 17
Abbildung 9 - links: Farbwähler aus Adobe Photoshop CS3 .................................................................... 17
Abbildung 10 - Links: Multiple Ansichten mit Kombination von Vorschau- und Detailansicht Rechts: Fokus
+ Kontext Ansicht nach [BIER et.al93] ..................................................................................................... 18
Abbildung 10 – Links: Überblicksansicht mit Scrollbalken Rechts: Detailansicht mit erweiterten
Informationen zum ausgewählten Element ............................................................................................. 18
Abbildung 12 – links: Ausschnitt einer Karte des Kartendienstes Bing Maps mit Fokus Dresden in
Überblicksansicht rechts: in detailierterer Ansicht .................................................................................... 19
Abbildung 12 - Schematische Darstellung einer Aktionsabfolge und den Möglichkeiten des linear undo 22
Abbildung 13 - Schematische Darstellung einer Historie als Skriptmodell ................................................ 22
Abbildung 14 - Interaktive Breadcrumbs-Navigation auf der Webseite von Spiegel Online ...................... 23
Abbildung 15 - Kombinierte Breadcrumbs der Webseite geizhals.at - fettgedruckter Teil (links) stellt
aktuelle Seite in Hierarchie dar, rechter Teil veranschaulicht aktuelle Suchkriterien für Produkte ............. 23
Abbildung 17 - Beispiele für Webseiten mit der Flash-Technologie: Links - Internetauftritt der Agentur
Grimm Gallun Holtappels mit Verschmelzung von Videoaufnahmen und interaktiven Elementen [2GH11].
Rechts - Internetauftritt von derbauer unter Nutzung von 3D-Elementen und Animationen [DERBAUER11].
............................................................................................................................................................... 31
Abbildung 18 - Beispiele für Silverlight-Anwendungen: Links - Ein mittels Motion Tracking
aufgenommenes Fußballspiel [ISVIS11]. Rechts - Ein virtueller Showcase von Siemens für PLM-Software
[SIEMENS11] ........................................................................................................................................... 32
Abbildung 19 - Beispiele für HTML5 Implementierungen der Webseite IE Testdrive [MICROSOFT11]: Links Simulation des physikalisch korrekten Fallen von Bällen. Rechts - das Spiel Texas Hold'em Poker............. 33
Abbildung 20 - Verbreitungsgrad der RIA-Technologien nach [RIASTATS] (Juni 2011) ............................. 34
Abbildung 20 - Oberfläche des ZIB mit Kennzeichnung der drei Interaktionsbereiche aus [COMBS et.al99]
............................................................................................................................................................... 35
Abbildung 21 - PhotoMesa Bereichsrahmen für Zoominteraktion (links) und Resultat der Interaktion
(rechts).................................................................................................................................................... 37
Abbildung 22 - PivotViewer mit NetFlix Filmdatenbank in Säulendarstellung ........................................... 38
Abbildung 23 - Pivotviewer mit Selektion auf Element ............................................................................ 39
Abbildung 24 - PivotViewer Filterelement für quantitative Datentypen .................................................... 40
Abbildung 25 - PivotViewer angewendete Filterschritte in Form von Breadcrumbs .................................. 40
Abbildung 27 - Tooltip für selektierte Informationsgrafik (Schwarzer Rahmen) ........................................ 41
Abbildung 29 – Ergebnisansicht von "5 years of infosthetics" durch farbliche Repräsentation der in
Verbindung stehenden Kategorien (links) und Listenansicht mit farblicher Kodierung der Kategorien
(rechts).................................................................................................................................................... 41
Abbildung 28 - Listenansicht der Filtergruppe Kategorie mit hervorgehobenen aktiven Filtern und
Haarlinien, die unrelevante Filter repräsentieren ...................................................................................... 42
Abbildung 29 – Screenshot der Anwendung ........................................................................................... 43
Abbildung 30 - Visualisierung der Interaktionsschritte durch Sättigung der Knoten (A) oder der
Verbindungspfade (B) aus [BACH10] ....................................................................................................... 44
x
DelViz goes RIA
Abbildungsverzeichnis
Abbildung 31 - Klassifikationsschema der Kategorien, Dimensionen und Schlagwörter aus [KECK et.al11]
............................................................................................................................................................... 47
Abbildung 32 - Aufteilung der Oberfläche in zwei flexible Bereiche zur Unterstützung der drei
grundlegenden Aufgaben von DelViz aus [KECK et.al11] ........................................................................ 48
Abbildung 33 - Architektur der Anwendung mit halbtransparenten Alternativtechnologien .................... 51
Abbildung 34 - grafisches Datenbankschema mit allen Tabellen und Fremdschlüsselbeziehungen .......... 52
Abbildung 35 - Ausgewählte Schlagwörter als Breadcrumbs im oberen Teil der Ergebnisansicht visualisiert
............................................................................................................................................................... 54
Abbildung 36 - Teilmengen als VENN-Diagramme mit einem, zwei und drei Filter (v.l.) ........................... 55
Abbildung 41 - Historyansicht mit 2 Teilmengen und hervorgehobenen Visualisierungen aus [KECK
et.al11] ................................................................................................................................................... 55
Abbildung 42 - Links: zwei Teilmengen nach einem Filterschritt rechts: drei Teilmengen nach einem
zweiten Filterschritt ................................................................................................................................. 56
Abbildung 39 - Verteilung der Schlagwörter in der Datenbasis von DelViz zeigt einen long tail aus
[BACH10]................................................................................................................................................ 57
Abbildung 40 – links: History-Ansicht mit fester Balkenbreite rechts: History-Ansicht mit variabler
Balkenbreite ............................................................................................................................................ 57
Abbildung 45 - links: History-Ansicht mit Fokus auf linker Teilmenge rechts: History-Ansicht mit Fokus auf
mittlerer Teilmenge ................................................................................................................................. 58
Abbildung 46 - links: Hervorhebung des ausgewählten Elements in fokussierter Teilmenge rechts:
Hervorhebung einer unfokussierten Teilmenge ....................................................................................... 58
Abbildung 43 - Aufbau einer Image Pyramid mit 3 Ebenen ..................................................................... 65
Abbildung 44 - Schematische Darstellung der Positionierung des Viewports auf der Anzeigefläche ........ 66
Abbildung 45 - Berechnung der Balkenbreite und Anordnung ................................................................ 68
Abbildung 46 - Screenshot der History-Ansicht mit einem ausgewählten Schlagwort .............................. 69
Abbildung 51 - Screenshots der animierten Veränderung der History-Ansicht durch Auswahl eines zweiten
Schlagworts ............................................................................................................................................ 70
Abbildung 48 - Screenshot der animierten Fokusänderung von der linken zur mittleren Teilmenge ......... 71
xi
DelViz goes RIA
Tabellenverzeichnis
Tabellenverzeichnis
Tabelle 1 - Kombination der Wahrheitswerte zweier boolescher Variablen ................................................ 6
Tabelle 2 - Übersicht verschiedener Visualisierungstechniken und zugehöriger Beispiele.......................... 16
Tabelle 3 - Vergleich der O/R-Mapper Hibernate und LINQ ...................................................................... 26
Tabelle 4 - Vergleich verschiedener Technologien zur Kommunikation in verteilten Systemen nach [ZHANG
et.al09] ................................................................................................................................................... 28
Tabelle 5 - Vergleich der Webservice-Technologien SOAP und REST ........................................................ 30
Tabelle 6 - Vergleich der RIA-Technologien Flash, Silverlight und HTML5+AJAX ...................................... 33
Tabelle 7 - Vergleich der betrachteten verwandten Arbeiten ................................................................... 45
Tabelle 8 - Auswirkungen der Filterbedingungen auf die Anzahl der Teilmengen .................................... 55
Tabelle 9 - Anforderungen an das softwaretechnologische Konzept und deren Entsprechungen im
aufgestellten Konzept ............................................................................................................................. 59
Tabelle 10 - Anforderungen an das Visualisierungs- und Interaktionskonzept, sowie deren Entsprechungen
im aufgestellten Konzept ........................................................................................................................ 59
xii
DelViz goes RIA
Auflistungsverzeichnis
Auflistungsverzeichnis
Auflistung 1 - HQL-Abfrage nach Personen, die älter als 30 Jahre sind .................................................... 25
Auflistung 2 - Abfrage mittels Criteria-API nach Personen, die älter als 30 Jahre sind .............................. 25
Auflistung 3 - Minimale Struktur einer SOAP-Nachricht ........................................................................... 29
Auflistung 4 - Eintrag eines Bundles aus der aus der ursprünglichen XML-Datei ...................................... 61
Auflistung 5 - Eintrag aller Bearbeiter der ursprünglichen Datenbasis ...................................................... 61
Auflistung 6 - Exemplarischer Eintrag einer Visualisierung in XML-Form der Ausgangsdaten ................... 61
Auflistung 7 - Ausschnitt aus der Schnittstellendefinition des Webservices .............................................. 62
Auflistung 8 - Definition der Klasse BundleAndCategoryItem in der Schnittstellendefinition des
WebServices............................................................................................................................................ 63
Auflistung 9 - Ausschnitt aus der Implementierung der Webservice-Schnittstelle ..................................... 63
Auflistung 10 - Definition der Webservice Endpunkte in der Konfigurationsdatei .................................... 64
Auflistung 11 - Service-Datei des DelVizWebService ................................................................................ 64
Auflistung 12 - XML-Repräsentation eines DeepZoom-Bildes .................................................................. 65
Auflistung 13 - Auschnitt der XML-Repräsentation einer DeepZoom-Collection ...................................... 66
Auflistung 14 - Test zum Erfassen der Mausinteraktion auf SubImages ................................................... 68
xiii