FACHBEREICH MATHEMATIK UND INFORMATIK GOETHE-UNIVERSITÄT
INSTITUT FÜR INFORMATIK FRANKFURT AM MAIN
Interaktive Visualisierung der Projektmanagement-
Prozesse
Bachelorarbeit
von
Dimitar Kosakov
Matrikelnummer: 2351702
Eingereicht am 16. April 2015
Eingereicht bei Prof. Dr.-Ing. Detlef Krömker
Professur für Graphische Datenverarbeitung
Goethe Universität Frankfurt am Main
Eidesstattliche Erklärung
Hiermit versichere ich, dass ich die vorliegende Arbeit selbständig verfasst und keine
anderen als die angegebenen Quellen oder Hilfsmittel benutzt habe.
Die Arbeit war gleicher oder ähnlicher Fassung noch nicht Bestandteil einer Studien- oder
Prüfungsleistung.
______________
Frankfurt am Main, den 16.04.2015 Dimitar Kosakov
Danksagung
Als Erstes möchte ich mich bei Prof. Dr.-Ing. Detlef Krömker bedanken, dass ich diese
Bachelorarbeit an der Professur für Graphische Datenverarbeitung schreiben durfte. Des
Weiteren danke ich meinem Betreuer Dr. Daniel Schiffner für die freundliche und
konstruktive Unterstützung während der Bearbeitungszeit.
Ein herzlicher Dank auch an all diejenigen, die mich während meines Studiums und der
Anfertigung meiner Bachelorarbeit unterstützt haben.
Danke.
Inhaltsverzeichnis
Abbildungsverzeichnis ......................................................................................................... 1
Tabellenverzeichnis ............................................................................................................. 2
Abkürzungsverzeichnis ........................................................................................................ 3
1 Einleitung...................................................................................................................... 5
1.1 Motivation ............................................................................................................. 5
1.2 Zielsetzung ............................................................................................................ 6
1.3 Gliederung der Arbeit............................................................................................ 6
2 Grundlagen ................................................................................................................... 8
2.1 Web-Programmierung ........................................................................................... 8
2.2 Definitionen ......................................................................................................... 10
2.2.1 JavaScript ..................................................................................................... 10
2.2.2 PHP .............................................................................................................. 10
2.2.3 AJAX ........................................................................................................... 11
2.2.4 SQLITE ........................................................................................................ 11
2.2.5 jQuery .......................................................................................................... 11
2.2.6 JSON ............................................................................................................ 12
2.2.7 XML ............................................................................................................. 12
3 State of the Art ............................................................................................................ 13
3.1 Projektmanagementanwendungen ....................................................................... 13
3.1.1 Desktopanwendungen .................................................................................. 13
3.1.2 Web-Anwendungen ..................................................................................... 15
3.2 Realisierungsmöglichkeiten ................................................................................ 17
3.2.1 Adobe Flash ................................................................................................. 17
3.2.2 Silverlight ..................................................................................................... 19
3.2.3 HTML5 ........................................................................................................ 19
3.3 Visualisierungsmöglichkeiten ............................................................................. 21
3.3.1 SVG vs. Canvas ........................................................................................... 21
3.3.2 Data Driven Dokuments .............................................................................. 22
3.4 Datenspeicherung ................................................................................................ 24
3.4.1 Dateibasierte Datenspeicherung (XML vs. JSON) ...................................... 25
3.4.2 Datenbank .................................................................................................... 26
4 Konzept ....................................................................................................................... 27
4.1 Zusammenfassung ............................................................................................... 27
4.2 Anforderungen .................................................................................................... 28
4.2.1 View ............................................................................................................. 28
4.2.2 Editor-Funktion ............................................................................................ 28
4.3 Aufbau ................................................................................................................. 29
4.3.1 Visualisierung .............................................................................................. 29
4.3.2 Datenbank .................................................................................................... 32
4.3.3 Webinterface ................................................................................................ 33
4.4 Planung ................................................................................................................ 35
5 Umsetzung .................................................................................................................. 36
5.1 Implementierungsumgebung ............................................................................... 36
5.2 Entwicklungsprozess ........................................................................................... 36
5.3 Datenstruktur ....................................................................................................... 37
5.3.1 Datenbank .................................................................................................... 37
5.3.2 JSON ............................................................................................................ 39
5.4 Visualisierung der Daten ..................................................................................... 40
5.4.1 Graph Aufbau............................................................................................... 41
5.4.2 Zeichnen der SVG-Grafik ............................................................................ 42
5.5 Editor-Funktion ................................................................................................... 45
5.6 Datenübertragung (AJAX) .................................................................................. 47
5.7 Webinterface und Benutzerinteraktion................................................................ 47
6 Fazit und Ausblick ...................................................................................................... 50
6.1 Fazit ..................................................................................................................... 50
6.2 Ausblick .............................................................................................................. 51
Literaturverzeichnis ........................................................................................................... 52
Abbildungsverzeichnis
1
Abbildungsverzeichnis
Abbildung 1: Projektrisiken erkennen ............................................................................... 14
Abbildung 2: Prozessdokumentation ................................................................................. 15
Abbildung 3: Google Drive-Integration von Gantter......................................................... 16
Abbildung 4: Get The Glass, flashbasierendes Spiel ......................................................... 18
Abbildung 5: 3D Sonnensystem mit CSS. (Screenshot: Julian Garnier) ........................... 20
Abbildung 6: SVG vs. Canvas ........................................................................................... 21
Abbildung 7: Choroplethenkarte Arbeitslosigkeit ............................................................. 23
Abbildung 8: Netz Fußballpässe ........................................................................................ 23
Abbildung 9: JSON-Formatierung ..................................................................................... 25
Abbildung 10: XML-Formatierung ................................................................................... 25
Abbildung 11: Zusammenarbeit der Komponenten ........................................................... 27
Abbildung 12: Konzept View 1 - Gruppen ........................................................................ 29
Abbildung 13: Konzept View 2 - Planning Process Group ............................................... 30
Abbildung 14: Konzept View 3 – Develop Project Charter .............................................. 30
Abbildung 15: D3 Force Layout ........................................................................................ 31
Abbildung 16: Konzept Webinterface ............................................................................... 33
Abbildung 17: Konzept Insert-Funktion ............................................................................ 34
Abbildung 18: Feature Driven Development ..................................................................... 37
Abbildung 19: graph.db ..................................................................................................... 38
Abbildung 20: nodeResponse – View 3............................................................................. 40
Abbildung 21: force.charge(-400) für View 2 ................................................................... 43
Abbildung 22: force.charge(-400) für View 3 ................................................................... 43
Abbildung 23: force.charge(-2000) für View 3 ................................................................ 45
Abbildung 24: Insert-Div - toggle() und $(#html-elemen).select2() in der View 1 .......... 48
Abbildung 25: Kurzbeschreibung Mouseover – View 3 ................................................... 49
Tabellenverzeichnis
2
Tabellenverzeichnis
Tabelle 1: Allgemeine Vergleichsübersicht von Canvas und SVG ................................... 22
Tabelle 2: SQLITE-Tabelle ............................................................................................... 32
Tabelle 3: Neue Kante erstellen ......................................................................................... 39
Tabelle 4: Pseudocode - Löschen eines Elements von der Spalte „children“ .................... 47
Abkürzungsverzeichnis
3
Abkürzungsverzeichnis
2D Zweidimensional
AJAX Asynchronous JavaScript and XML
CSS Cascading Style Sheets
DOM Document Object Model
GDV Graphische Datenverarbeitung
HTML Hypertext Markup Language
HTTP Hypertext Transfer Protocol
JSON JavaScript Object Notation
PHP Hypertext Preprocessor (ursprünglich „Personal Home Page Tools)
PM Project Management (deutsch: Projektmanagement)
PMBOK A Guide to the Project Management Body of Knowledge
SQL Structured Query Language
SVG Scalable Vector Graphics
WWW World Wide Web
XAML Extensible Application Markup Language
XML Extensible Markup Language
Abkürzungsverzeichnis
4
Einleitung
5
1 Einleitung
Heutzutage nimmt die Visualisierung von Daten eine zunehmend wichtigere Bedeutung
im Leben der Menschen ein. Die Datenvisualisierung macht es möglich, ein besseres
Verständnis über die Gesamtheit der Daten zu erlangen. Anhand einer händischen
Zeichnung oder einem mit Computer erstellten Diagramm ermöglicht die
Datenvisualisierung eine tiefere und vor allem eine schnellere Interpretation.
Die Visualisierung der Daten wird besonders im heutigen digitalen Zeitalter immer
attraktiver, da mit Hilfe dieser schwer vorstellbare und abstrakte Inhalte anschaulicher
gestaltet werden können. Viele komplexe Vorgänge und Strukturen können erst
verstanden werden, wenn sie grafisch abgebildet sind.
Aus diesem Grund werden in vielen Bereichen der Wirtschaft komplexe Ablaufketten mit
Hilfe eines Computers dargestellt. Unter anderem zählt dazu das Projektmanagement
(nachfolgend auch PM genannt). Denn eine erfolgreiche Projektführung erfordert eine
sorgfältige Projektplanung und infolgedessen müssen Prozesse visualisiert und
Abhängigkeiten veranschaulicht werden.
1.1 Motivation
Die Modellierung der angesprochenen PM-Prozesse ist nicht trivial. Es werden tiefere
PM-Kenntnisse benötigt, die eine erfolgreiche Durchführung eines Projektes
ermöglichen. Das Project Management Institute (nachfolgend auch PMI genannt)
empfehlt das Buch A Guide to the Project Management Body of Knowledge. Dieses Buch
wird auch als Referenzwerk im PM-Kurs Einführung in das IT-Projektmanagement der
Professur für Graphische Datenverarbeitung (nachfolgend auch GDV genannt) der
Goethe Universität Frankfurt am Main verwendet. In diesem Kurs werden nicht nur
Projektmanagement-Standards und -Richtlinien geschildert, sondern auch die effiziente
Steuerung eines Projektes behandelt. Dabei werden die Aufgaben in einzelne
Prozessgruppen gegliedert, welche sich mit entsprechenden Methoden und Werkzeugen
steuern lassen. (Schiffner) Die Prozessgruppen und deren Prozesse werden im Kurs
grafisch dargestellt, allerdings geschieht das anhand von statischen Diagrammen. Diese
Form des Unterrichts ist effektiv, jedoch könnte der Kurs noch effizienter gestaltet
Einleitung
6
werden. Die Prozesse, basierend auf dem PMBOK, können auch interaktiv visualisiert
werden. Neue Sichten könnten somit generiert werden und die Abhängigkeiten könnten
besser abgebildet werden. Damit werden die Prozesse klarer veranschaulicht und
demzufolge leichter verstanden. Nicht zuletzt wird das Blättern des Referenten erspart.
1.2 Zielsetzung
Das Ziel dieser Bachelorarbeit ist eine HTML5-basierte Web-Anwendung zu entwickeln,
welche die Aufgabe hat, die auf dem PMBOK basierenden PM-Prozesse interaktiv zu
visualisieren. Es werden die für den PM-Kurs relevanten Prozesse dargestellt, die
folgende Wissensgebiete umfassen: Integration Management, Time Management, Quality
Management, Communications Management, Risk Management und Stakeholder
Management. Alle Prozesse werden als Graphen dargestellt. Sämtliche relevante
Informationen (wie z.B. Beziehungen und Beschreibungen) zu diesen werden ebenso
abgebildet. Dem Anwender soll die Möglichkeit geboten werden, verschiedene Sichten
(Zoom-Level) zu generieren, sowie zusammengehörende Prozesse zu gruppieren. Der
Nutzer soll in der Lage sein, über den Graphen zu navigieren. Außerdem soll in dieser
Webapplikation eine Editorfunktion implementiert werden, die dem Benutzer erlaubt,
neue Prozesse, einschließlich der dazugehörigen Information (Inputs, Outputs,
Beschreibungen usw.) abzuspeichern und vorhandene Prozesse zu editieren, bzw. sie zu
löschen. Weiterhin soll der Nutzer die Anwendung ohne zusätzliche Informationen oder
Hilfestellungen bedienen können.
1.3 Gliederung der Arbeit
Nach der Einleitung in das Thema Interaktive Visualisierung der PM-Prozesse im ersten
Kapitel, folgt im zweiten Kapitel zunächst eine Vorstellung der theoretischen
Grundlagen, die für das Entstehen dieser Web-Anwendung wichtig sind.
Das dritte Kapitel befasst sich mit dem State of the Art. Hier wird der Stand der Technik
präsentiert. Es werden Web-Technologien vorgestellt, Web-Techniken miteinander
verglichen, sowie Lösungen und Standards dargestellt.
Einleitung
7
Im vierten Kapitel wird das Web-Anwendungskonzept in mehreren Unterkapiteln
erläutert. Überlegungen über den Aufbau sowie Funktionalität der Web-Anwendung
werden vorgestellt. Auch mögliche Strategien z.B. über den Aufbau des Webinterface
werden in Betracht gezogen.
Der Hauptteil dieser Arbeit, die Umsetzung der Web-Anwendung, wird im fünften
Kapitel dargelegt. In diesem wird die Implementierung des Konzepts beschrieben.
Abschließend werden im sechsten Kapitel mit dem Fazit die Ergebnisse dieser Arbeit
zusammengefasst, sowie einige Kritikpunkte geschildert. Mit dem Ausblick werden
mögliche Erweiterungen bzw. Weiterentwicklungen der Web-Anwendung angeregt.
Grundlagen
8
2 Grundlagen
Wie bereits im vorangegangenen Kapitel erläutert, befasst sich das folgende Kapitel mit
wichtigen theoretischen Grundlagen, als thematische Einführung. Das erste Unterkapitel
leitet in das Thema Web-Programmierung ein. Daraufhin werden einige Definitionen
kurz beschrieben, da diese als technische Voraussetzung für die Entwicklung des
Programms notwendig sind.
2.1 Web-Programmierung
Als Web-Programmierung wird das Entwickeln von browserbasierter Applikationen
bezeichnet. Grundlegende Begriffe dabei sind Webserver, Webclient, HTTP und HTML.
Webserver
Ein Webserver ist ein Dienst, der die Aufgabe hat, Antworten auf HTTP-Anfragen zu
übertragen. Einfach ausgedrückt: er liefert die Webseiten. Jeder Computer kann als
Webserver eingerichtet werden. Dafür ist es erforderlich, diesen mit der benötigten
Software zu bespielen und entsprechend zu konfigurieren.
Zurzeit stehen viele Webserver zu Verfügung, wie z.B. Apache1, Internet Information
Services (IIS)2 oder auch NGINX
3.
Webclient
Die Hauptaufgabe des Webclients (Internet Browser) ist die Darstellung der Webseite. Er
sendet HTTP-Anfragen zum Webserver und verarbeitet die Antwort. (Walter, 2008)
Beispiele für Internet Browser:
Firefox4
Chrome5
Internet Explorer6
1 Vgl. http://httpd.apache.org/ [abgerufen am 15.03.2015]
2 Vgl. http://www.iis.net/ [abgerufen am 15.03.2015]
3 Vgl. http://nginx.org/ [abgerufen am 15.03.2015]
4 Vgl. https://www.mozilla.org/de/firefox/ [abgerufen am 15.03.2015]
5 Vgl. www.google.com/chrome/ [abgerufen am 15.03.2015]
Grundlagen
9
Safari7
HTTP Protokoll (Kommunikation)
Die Kommunikation zwischen den Webserver und den Webclient geschieht mittels
Protokollen. Das Hypertext Transfer Protocol ist für das Laden der Webseiten zuständig.
HTML (Darstellung)
Zusätzlich zu der Notwendigkeit die Daten zwischen Server und Client auszutauschen,
besteht auch der Bedarf die Daten auf eine bestimmte Weise zu formatieren. Dafür ist die
Auszeichnungssprache Hypertext Markup Language zuständig. Mit Hilfe dieser Sprache
werden Dokumenteninhalte, wie z.B. Grafiken und Hyperlinks strukturiert. (Walter,
2008)
Weiterhin sind noch weitere Technologien für die Webprogrammierung notwendig.
Allerdings beschreibt dieses Modell, ursprünglich vom Physiker Sir Timothy J. Berners-
Lee vorgestellt (Walter, 2008), das Grundgerüst.
Zudem sind die Techniken, die verwendet werden können, auch wichtig für das
Verstehen des Webprogrammierens. Dabei wird zwischen statischer Programmierung
(der Server verschickt auf Anfrage ganze HTML Seiten, die vom Client unverändert
dargestellt werden) und dynamischer unterschieden. Des Weiteren lässt sich die
dynamische Programmierung in clientseitiger und serverseitiger Web-Programmierung
unterteilen.
Clientseitige Web-Programmierung
Unter clientseitiger Programmierung versteht man, die Implementierung von Funktionen,
die direkt auf den Clients (Internet Browser) ausgeführt werden. Das bedeutet, die
Aktionen werden nur auf dem Client ausgeführt. Ein Beispiel dafür sind grafische
Effekte. Typische Programmiersprachen sind JavaScript und VBScript.
6 Vgl. www.windows.microsoft.com/de-de/internet-explorer / [abgerufen am 15.03.2015]
7 Vgl. https://www.apple.com/de/safari/ [abgerufen am 15.03.2015]
Grundlagen
10
Serverseitige Web-Programmierung
Bei der serverseitigen Web-Programmierung werden die Programmiersprachen auf dem
Server ausgeführt, daher passieren die Aktionen nur auf dem Server. Serverseitige
Sprachen sind z.B. PHP, ASP und JSP.
Allerdings ist in der Praxis diese strikte Trennung nicht möglich, da viele Technologien
übergreifend funktionieren, z.B. setzt die Web-Technologie AJAX beide
Programmierarten voraus.
2.2 Definitionen
Im Unterkapitel Web-Programmierung wurden einige Begrifflichkeiten erklärt, andere
nur kurz erwähnt. Für das Verständnis der Arbeit müssen jedoch noch weitere
Terminologien erläutert werden.
2.2.1 JavaScript
JavaScript ist eine interpretierte Programmiersprache (häufig als Skriptsprache
bezeichnet) mit objektorientierten Fähigkeiten. JavaScript wird am häufigsten in
Webbrowsern verwendet, um die Inhalte, die im Webbrowserfenster angezeigt werden,
zu steuern, ändern bzw. manipulieren. Diese eingebettete Version von JavaScript führt
Skripte aus, die in HTML-Webseiten eingebaut sind. (Flanagan, 2007)
2.2.2 PHP
PHP (Hypertext Preprocessor) ist eine Skriptsprache für das Web. PHP ist eine einfache,
aber leistungsfähige Sprache, die für die dynamische Generierung von HTML-Inhalten
entworfen wurde. Der Hauptunterschied zu JavaScript ist die Serverseitige-Scripting-
Benutzung. Um HTML zu erzeugen, werden ein PHP-Parser und ein Webserver benötigt,
damit die Dokumente gesendet werden können. Zusätzlich zu der Serverseitigen-
Scripting-Benutzung ist auch Clientseitge- und Kommandozeilen-Scripting-Benutzung
möglich. (Sebastian Bergmann, 2006) (Rasmus Lerdorf, 2006)
Grundlagen
11
2.2.3 AJAX
AJAX (Asynchronous JavaScript and XML) wurde ursprünglich von Microsoft
entwickelt. Mittels dieser Technologie wurden die HTTP-Anfragen im Hintergrund zum
Server gesendet und somit war das neue Laden der gesamten Webseite nicht mehr nötig.
Da dies am Anfang nur für Internet Explorer, speziell zum Abrufen von Emails über
Outlook Web Access implementiert war, hat dieses Feature (XMLHttpRequest genannt)
als ActiveX-Control funktioniert. (Wenz, 2007)
Die Webtechnologie wurde von vielen anderen Browser-Herstellern weiterentwickelt und
in den eigenen Produkten integriert. Mit Hilfe von JavaScript und DOM (Document
Object Model, die Schnittstelle für Zugriff auf HTML) wird die Serverantwort auf die
HTTP-Anfrage realisiert, so dass die Webseite nicht neugeladen werden muss. (Wenz,
2007)
2.2.4 SQLITE
SQLITE8 ist eine Open Source relationale Datenbank, welche die Standard-
Datenbanksprache SQL (Structured Query Language) unterstützt. SQLITE ist nicht als
„Stand-Alone“ Anwendung entwickelt worden, sondern als Programmbibliothek, die sich
in andere Anwendungen integrieren lässt. SQLITE besteht nur aus einer einzigen Datei,
die ohne zusätzliche Serverinstallation funktioniert. Aufgrund dieses Konzeptes wird
diese Datenbank in vielen mobilen Geräten eingesetzt. (SQLITE)
2.2.5 jQuery
jQuery9 ist eine vielseitige, aber auch erweiterbare JavaScript-Bibliothek mit zahlreichen
Features. Mit jQuery wird nicht nur die Manipulation von HTML-Dokumenten
erleichtert, sondern auch von Animationen, AJAX-Technologien und vielem mehr.
(jQuery)
8 Vgl. https://sqlite.org [abgerufen am 16.03.2015]
9 Vgl. http://jquery.com/ [abgerufen am 16.03.2015]
Grundlagen
12
2.2.6 JSON
JSON10
(JavaScript Object Notation) ist ein Objekt, das auf JavaScript-Literalen basiert.
(Flanagan, 2007) Es handelt sich um eine Formatierung für den Datentausch, die in vielen
Sprachen benutzt wird, besonders in JavaScript. Im Vergleich zum normalen Objekt-
Literal müssen die Eigenschaften in Anführungszeichen gesetzt werden. (Stefanov, 2011).
Diese Datencodierung kann für die Clients wie auch für den Server eingesetzt werden.
2.2.7 XML
XML (Extensible Markup Language) ist eine Auszeichnungssprache, die von W3C11
eingeführt worden ist. Es ist ein einfaches und flexibles Textformat für den Austausch
einer Vielzahl von Daten im Web. (W3C) Es wurde für die Strukturierung und
Darstellung von großen Informationsmengen entwickelt. XML ist ein
systemunabhängiges, medienneutrales und offenes Format. (Pomaska)
10
Vgl. http://json.org/ [abgerufen am 16.03.2015] 11
Vgl. World Wide Web Consortium - http://www.w3.org/ [abgerufen am 16.03.2015]
State of the Art
13
3 State of the Art
Derzeit existieren zahlreiche Projektmanagement-Anwendungen. Einige davon sind für
den Desktopbereich konzipiert, andere als Web-Anwendung implementiert. Mit Hilfe
dieser Anwendungen, unabhängig von der Konzeptart, lassen sich Projekte koordinieren,
steuern oder auswerten. Die Funktionen Berichte zu erstellen und Diagrammen zu
erzeugen sind bei den meisten Anwendungen integriert.
In diesem Kapitel werden einige Projektmanagement-Anwendungen, auch als
Projektmanagement-Tools bekannt, vorgestellt und miteinander verglichen. Anschließend
werden Technologien und Techniken für die Entwicklung einer eigenen Web-
Anwendung in Betracht gezogen.
3.1 Projektmanagementanwendungen
3.1.1 Desktopanwendungen
MS Project
Eine der bekanntesten Desktopanwendung für das Projektmanagement ist das Microsoft
Project12
. Dieses Programm bietet ein breites Spektrum an Features, die für eine
erfolgreiche Durchführung eines Projektes sehr hilfreich sein können. Die wichtigsten
Funktionen des Produktes sind das Erstellen von Ablaufplänen, die Ressourcenplanung
sowie die Kostenschätzung. Damit der Überblick über das Projekt immer erhalten bleibt,
lassen sich die oben erwähnten Funktionen mittels Berichten, Grafiken oder Statistiken
sehr leicht überwachen. Somit können mögliche Risiken rechtzeitig erkannt und beseitigt
werden (s. Abbildung 1 „Projektrisiken erkennen“).
12
Vgl. https://products.office.com/de-de/project/ [abgerufen am 16.03.2015]
State of the Art
14
Abbildung 1: Projektrisiken erkennen13
Andere Programme, die ähnliche Funktionalität wie MS Project bieten sind z.B.
ProjectLibre14
und Primavera P6 Professional Project Management15
.
BizAgi Process Modeler
Obwohl MS Project und dessen Alternativen einen sehr großen Funktionsumfang bieten,
decken diese Applikationen nicht den vollen PM-Bereich ab. Unterstützung dafür
schaffen Anwendungen wie BizAgi Process Modeler16
. Mit Hilfe dieses Programms
lassen sich nicht nur Abläufe visualisieren, sondern auch Geschäftsprozesse graphisch
modellieren (s. Abbildung 2 „Prozessdokumentation“). Das Produkt bietet sogar
Simulationen von Geschäftsprozessen, die entscheidend für den Erfolg sein können.
13
Quelle: http://products.office.com/de-de/Project/project-top-features [abgerufen am 16.03.2015] 14
Vgl. http://www.projectlibre.de/ [abgerufen am 16.03.2015] 15
Vgl. http://www.oracle.com/us/products/applications/primavera/p6-professional-project-
management/overview/index.html [abgerufen am 16.03.2015] 16
Vgl. http://www.bizagi.com/en/bpm-suite/bpm-products/modeler [abgerufen am 16.03.2015]
State of the Art
15
Abbildung 2: Prozessdokumentation17
Alternativen zum BizAgi Process Modeler sind z.B. MS Visio, yEd Graph Editor18
und
bflow* Toolbox19
.
3.1.2 Web-Anwendungen
Ähnlich wie im Desktopbereich existieren viele PM-Anwendungen im Webbereich.
Allein auf der Webseite von Project-Management20
sind über 300 PM-Anwendungen
aufgelistet. Eine der beliebtesten webbasierten Anwendung ist Gantter21
. Schon der
Slogan auf der Webseite „You can think of it as a web-based Microsoft Project”22
impliziert, dass Web-Anwendungen genauso gut sein können, wie Desktopanwendungen.
Ob diese Behauptung zutreffend ist, wird nicht beurteilt. Diese Anwendung bietet
außerdem die Möglichkeit, als Browser-Erweiterung installiert zu werden. Eine App-
Integrierung ist auch möglich (s. Abbildung 3 „Google Drive-Integration von Gantter“).
17
Quelle: http://download.bizagi.com/docs/agile/en/Web%20output/#diagram/20dcf848-bdef-48d2-853f-
098b3109add8 [abgerufen am 16.03.2015] 18
Vgl. http://www.yworks.com/en/products/yfiles/yed/ [abgerufen am 16.03.2015] 19
Vgl. http://www.bflow.org/index.html [abgerufen am 16.03.2015] 20
Vgl. http://project-management.com/ [abgerufen am 16.03.2015] 21
Vgl. http://www.gantter.com/ [abgerufen am 16.03.2015] 22
http://www.gantter.com/
State of the Art
16
Abbildung 3: Google Drive-Integration von Gantter23
Von BizAgi Prozess Modeler oder MS Visio werden aber auch Web-Alternativen
geboten. Beispiele dafür sind draw.io24
und gliffy25
. Sie verfügen über eine ähnliche
Vielfalt an Funktionen und bieten sogar, wie Gantter, eine App-Integration.
Nachdem einige PM-Anwendungen vorgestellt wurden, folgern daraus weiterführende
Fragestellungen, wie welche Anwendungsart besser ist oder ob sich für
Desktopanwendungen oder doch für Web-Anwendungen entschieden werden soll. Beide
Varianten haben ihre Vor- und Nachteile.
Die Desktopanwendungen benötigen keinen Internetzugang und laufen auf Grund der
lokalen Installation sehr schnell. Der Benutzer hat die volle Kontrolle über die Daten.
Dies bringt jedoch auch Nachteile. Die Programme müssen aktualisiert und die Daten
vom Anwender gesichert werden. (Kehrer)
Diese Nachteile sollen Web-Anwendungen beseitigen. Mit diesen ist keine Installation
nötig, die Daten werden zentral verwaltet und gesichert, außerdem muss sich der
Anwender nicht mehr um die Datenverfügbarkeit sorgen. Allerdings kann diese
Funktionsweise auch negative Seiten haben. Der Anwender ist vom Internetzugang
abhängig und hat keine Kontrolle über die Daten. Zusätzlich muss sich der Nutzer mit der
23
Quelle: https://chrome.google.com/webstore/detail/gantter-for-google-
drive/himomacamcpodhkahelbnmaddladgjgo [abgerufen am 16.03.2015] 24
Vgl. https://www.draw.io/ [abgerufen am 16.03.2015] 25
Vgl. http://www.gliffy.com/ [abgerufen am 16.03.2015]
State of the Art
17
neusten Version zufrieden stellen, ob diese als besser befunden wurde oder nicht, ist
irrelevant. (Kehrer)
Unabhängig von der Anwendung lässt sich jedoch feststellen, dass ein Projekt auf beide
Arten erfolgreich geführt werden kann. Die Entscheidung liegt beim Anwender.
Allerdings lässt sich noch bei den oben erwähnten Applikationen feststellen, dass keine
davon die PM-Prozesse interaktiv visualisiert. Die Geschäftsprozesse können zwar
modelliert werden, jedoch nur Anhand von statischen Diagrammen. Die Möglichkeit, die
Prozesse zu gruppieren oder über das Projekt interaktiv zu navigieren, ist nicht gegeben.
Infolgedessen entstand die Idee, diese Lücke zu schließen. Eine Web-Anwendung, die
auch beim PM-Kurs der GDV Professur verwendet werden kann, zu implementieren,
wurde als Projekt im Rahmen der vorliegenden Bachelorarbeit initiiert.
3.2 Realisierungsmöglichkeiten
Obwohl bereits von der GDV-Professur vorgegeben ist, dass eine HTML5-Anwendung
entwickelt werden soll, sollten trotzdem andere Möglichkeiten für die Entwicklung einer
solchen Anwendung betrachtet werden. Viele weitere Technologien, die vielleicht besser
dafür geeignet sind, stehen diesbezüglich auch zur Verfügung. Welche dieser
Technologien wäre die bessere Lösung für die Umsetzung des Projektes? Eine Web-
Applikation, welche die soeben angesprochenen PM-Prozesse visualisiert lässt sich nicht
nur mit HTML5 in Verbindung mit JavaScript, sondern auch mit anderen Techniken
realisieren. Adobe Flash26
könnte als Alternative in Betracht gezogen werden, ebenso wie
Microsoft Silverlight27
.
In diesem Unterkapitel werden drei Techniken, die die Entwicklung einer Web-
Anwendung für die Visualisierung der PM-Prozesse ermöglichen, vorgestellt und
miteinander verglichen. Eine vollständige Aufzählung und Analyse weiterer
Möglichkeiten wird in der vorliegenden Arbeit nicht angeführt.
3.2.1 Adobe Flash
Adobe Flash wird oftmals einem Videoplayer gleichgesetzt. Allerdings ist das Angebot
von Flash umfassender. Adobe Flash ist eine professionelle Entwicklungsumgebung zur
26
Vgl. http://www.adobe.com/devnet/flash.html / [abgerufen am 16.03.2015] 27
Vgl. http://www.microsoft.com/silverlight/ [abgerufen am 16.03.2015]
State of the Art
18
Darstellung von multimedialen Inhalten, die auch interaktiv gestaltet werden können.
Neben der Player-Funktion bietet Flash noch die Möglichkeit Animationen zu erzeugen.
Die Zusammensetzung aus diesen Animationen und der Interaktivität ermöglicht die
Entwicklung vieler Spiele (s. Abbildung 4 „Get The Glass, flashbasierendes Spiel“).
Ursprünglich wurde Flash von der Firma Macromedia als Vektorgrafikprogramm
entwickelt. Damit die Flashgrafiken mehr Attraktivität bekommen, besteht die
Möglichkeit nicht nur Vektoren, sondern auch viele Medieninhalte, wie z.B. Bitmaps und
Audio-Video-Dateien, einzubinden. Mit Hilfe der integrierten Sprache ActionScript (eine
Skriptsprache ähnlich JavaScript) lassen sich außerdem die multimedialen Inhalte steuern
oder manipulieren. (Sascha Kersken, 2010) Die Möglichkeit eine Datenbank einzubinden
ist auch gegeben. Beispielweise lassen sich mittels PHP SQL-Statements bilden und an
ActionScript weitergeben.
Abbildung 4: Get The Glass, flashbasierendes Spiel28
Obwohl diese Software vielseitig einsetzbar ist, hat Adobe Flash auch Nachteile. Flash ist
eine proprietäre Software und wird somit nativ nicht vom Browser unterstützt. Eine
zusätzliche Installation, die anhand einer Browser-Erweiterung geschieht, wird in diesem
Fall benötigt. Der Flash-Plug-In ist zwar kostenlos, aber für die Entwicklung einer Flash-
Anwendung muss auf eine teure Entwicklungsumgebung vom Hersteller zurückgegriffen
werden. Des Weiteren müssen oft andere nicht kostenlose Grafikdesign-Produkte von
Adobe eingesetzt werden, wie z.B. Adobe Illustrator29
oder Adobe Flash Builder30
, da nur
diese volle Kompatibilität zum Programm bieten. Die Performance der Flash-
28
Quelle: http://approaching40.typepad.com/antiaging4geeks_impulse/games/ [abgerufen am 17.03.2015] 29
Vgl. http://www.adobe.com/de/products/illustrator.html [abgerufen am 17.03.2015] 30
Vgl. http://www.adobe.com/de/products/flash-builder.html [abgerufen am 17.03.2015]
State of the Art
19
Anwendungen wird auch von vielen Anwendern bemängelt. Es existieren zahlreiche
Benchmark-Tests, die diese Behauptung unterstützen. Diese Applikationen benötigen
deutlich öfter mehr Computerressourcen im Vergleich zu anderen Konkurrenten. Unter
dem Betriebssystem MacOS ist sogar keine Hardwarebeschleunigung vorhanden und
demzufolge geschieht das Rendering nur über den Prozessor.
3.2.2 Silverlight
Silverlight ist eine weitere Technologie zum Erstellen von interaktiven Applikation.
Genauso wie Adobe Flash liegen die Stärken von Silverlight im Programmieren von Rich
Internet Applications (nachfolgend RIA genannt). RIA ist eine Web-Anwendung, welche
die gleichen Eigenschaften und Funktionen, wie eine Desktopapplikation aufweist.
(Rouse).
Da dieses Produkt auf die Techniken von .Net31
und XAML (Extensible Application
Markup Language)32
zurückgreift, sind alle Voraussetzungen für die Entwicklung einer
interaktiven, datenbasierenden Web-Anwendung gegeben.
Allerdings gibt es auch hier einige Nachteile. Ähnlich wie bei der Flash-Programmierung,
ist der Anwender für die Entwicklung einer anspruchsvollen Web-Anwendung auf die
Herstellerprodukte angewiesen, die selten kostenfrei sind. Des Weiteren ist Silverlight
auch eine proprietäre Software und daher ist ein Browser-Plug-In notwendig.
3.2.3 HTML5
Die Definition von HTML5 gestaltet sich wesentlich komplexer als die der
vorausgegangenen Anwendungen. Einige Autoren beschreiben HTML5 als eine
Spezifikation (Hogan, 2012), andere als eine Webplattform (Gasston, 2014). Fest steht,
dass HTML5 eine weitere Fassung von HTML ist. Dabei handelt es sich um einen neuen
Standard, der vom W3C angeführt wurde (Hogan, 2012).
Die zusätzlichen neuen Funktionen ermöglichen die Entwicklung hochkomplexer Web-
Anwendungen. Audio und Video Dateien lassen sich direkt einbinden und somit werden
31
Vgl. http://www.microsoft.com/net [abgerufen am 17.03.2015] 32
Eine Beschreibungssprache für die Hierarchie der Objekte
State of the Art
20
keine zusätzlichen Plug-Ins mehr benötigt. In Kombination mit JavaScript und CSS
(Cascading Style Sheets) können anspruchsvolle Grafiken und Animation erstellt werden
(s. Abbildung 5 „3D Sonnensystem mit CSS“). Die Unterstützung mobiler Geräte ist auch
gegeben, da HTML5-Anwendungen plattformunabhängig sind. Außerdem ermöglicht
dieser „De-Facto-Standard“ die Offline-Nutzung von Anwendungen. Mit Hilfe des „local
storage“ lassen sich Daten auf dem Client abspeichern.
Abbildung 5: 3D Sonnensystem mit CSS. (Screenshot: Julian Garnier)33
Obwohl HTML5 eine umfassende Vielfalt an Funktionen bietet und viele neue
Möglichkeiten eröffnet, sind auch bei diesem Verbesserungsmöglichkeiten vorhanden.
Damit eine solche Anwendung funktioniert, muss HTML5 vom Browser unterstützt
werden. Zudem ist nicht immer garantiert, dass dieselbe Webseite oder Web-Anwendung
immer gleich auf allen Browsern dargestellt wird. Das Programmieren von Spielen ist
möglich, aktuell wird aber keine Unterstützung für Kameras und Mikrofone geboten.
Daraus schließt, dass die passende Technologie in Bezug zum konkreten Anwendungsfall
ausgewählt werden muss. Ob sich für Flash oder Silverlight entschieden wird, eine
Interaktion mit HTML-DOM ist aber in den meisten Fällen notwendig. Und eine der
besten Möglichkeiten den DOM zu manipulieren ist JavaScript. Außerdem existieren
zahlreiche kostenlose Entwicklungsumgebungen und JavaScript-Bibliotheken, welche die
HTML5-Programmierung noch ansprechender machen. Demzufolge ist die Kombination
von HTML5 und JavaScript ein guter Weg diese Prozessvisualisierungsanwendung zu
realisieren.
33
Quelle: http://t3n.de/news/flash-tot-zehn-beeindruckende-515046/ [abgerufen am 17.03.2015 ]
State of the Art
21
3.3 Visualisierungsmöglichkeiten
3.3.1 SVG vs. Canvas
Für die grafische Darstellung dieser Prozesse stehen mehrere Vektorgrafiktechnologien
zur Verfügung.
SVG (Scalable Vector Graphics) steht für skalierbare Vektorgrafiken. Ähnlich wie HTML
wird SVG mithilfe von Elementen und Attributen formatiert, und somit in das Dokument
integriert. Das hat den Vorteil, dass solche Grafiken auch über CSS formatiert werden
können. Auf Grund des eigenen, internen Koordinatensystems sind die Grafiken
skalierbar und daher in Bezug auf die Auflösung unabhängig. Das kann aber nicht immer
von Vorteil sein. Grafiken werden zwar immer gut dargestellt, jedoch ist die
Positionierung oftmals weniger präzise. In Punkto Rendering existieren Vorteile ebenso
wie Nachteile. Bei den SVG-Grafiken werden die Elemente gespeichert und gerendert.
Auf diese Weise lassen sich einzelne Objekte modifizieren, ohne dass die komplette
Grafik neugeladen wird. Allerdings kann dies bei vielen Objekten von Nachteil sein, da
sie einzeln gespeichert und gerendert werden. (msdn)
Canvas, aus dem Englischen übersetzt als „Leinwand", ist eine Technologie zum
dynamischen Erzeugen von Bitmap-Grafiken mit JavaScript, daher sind diese
pixelbasiert.
Da diese Technologie direkt mit dem Koordinatensystem des HTML-Dokuments
interagiert, ist die Positionierung im Vergleich zu SVG präziser. Allerdings verschlechtert
sich die Qualität der Grafik bei Erhöhung der Auflösung oder Vergrößerung der Grafik (s.
Abbildung 6 „SVG vs. Canvas“).
Abbildung 6: SVG vs. Canvas34
34Quelle: Zhu, Nick Qi: Data Visualization with D3.js Cookbook, Birmingham: Packt Publishing Ltd.
2013, S. 146.
State of the Art
22
Breite und Höhe können als Attribute im canvas-Tag angegeben werden. Wenn jedoch
die Größe mittels CSS geändert wird, werden die Inhalte verzehrt dargestellt. Ein weiterer
Unterschied ist das Rendering. Im Gegensatz zum SVG werden die gerenderten Grafiken
nicht gespeichert und somit immer wieder gesamt gerendert. (msdn)
Canvas SVG
Pixelbasiert (dynamische PNG) Formbasiert
Einzelnes HTML-Element Mehrere grafische Elemente, die Teil des
Dokumentobjektmodells (DOM) werden
Nur durch Skript geändert Durch Skript und CSS geändert
Ereignismodell/Benutzerinteraktion ist
präzise (x,y)
Ereignismodell/Benutzerinteraktion ist
allgemeiner ("rect", "path")
Die Leistung ist bei kleineren Oberflächen,
einer größeren Objektanzahl (>10T) oder
bei beiden besser
Die Leistung ist bei einer kleineren
Objektanzahl (<10T), größeren
Oberflächen oder bei beiden besser.
Tabelle 1: Allgemeine Vergleichsübersicht von Canvas und SVG35
Demzufolge lässt sich festzuhalten, dass Vektorgrafiken sich über das HTML-Element
canvas mittels JavaScript wie auch über den SVG Container erzeugen lassen. Obwohl die
Unterschiede deutlich sind, eignen sich beide Technologien für das Projekt. Aufgrund der
verlustfreien Skalierbarkeit und der Möglichkeit diese Grafiken auch über CSS zu
formatieren, wird jedoch SVG bevorzugt.
3.3.2 Data Driven Dokuments
SVG-Grafiken können mit verschiedenen JavaScript-Bibliotheken erzeugt werden. Auf
Grund der zahlreichen Möglichkeiten wird in diesem Abschnitt nur eine Grafikbibliothek
ausführlicher vorgestellt. Mögliche Alternativen werden kurz erwähnt, aber nicht
detailliert behandelt.
Data Driven Documents (kurz D336
genannt) ist eine JavaScript-Bibliothek mit deren
Hilfe sich Dokumente (HTML-Seiten) auf Datenbasis dynamisch erzeugen lassen. Um
35
Quelle: https://msdn.microsoft.com/de-de/library/ie/gg193983%28v=vs.85%29.aspx [abgerufen am
18.03.2015] 36
Vgl. http://d3js.org/ [abgerufen am 19.03.2015]
State of the Art
23
dies zu ermöglichen, wurden in D3 mehrere Technologien wie HTML, SVG und CSS
integriert. (D3.js)
D3 erlaubt beliebige Daten mit dem DOM zu verknüpfen und sogar den DOM zu
verändern. Anhand der Daten lassen sich nicht nur interaktive skalierbare Graphiken
erzeugen, sondern auch HTML-Elemente generieren. Dies sorgt für zusätzliche
Flexibilität.
Diese Bibliothek wird nicht als Framework bezeichnet, da alle möglichen Features ohne
zusätzliche Installationen, z.B. Plug-Ins, bereits zur Verfügung stehen. Ein weiterer
Vorteil ist die Schnelligkeit. Aufgrund des kleinen Overheads können sehr große
Datenmengen sehr schnell in Form von Grafiken oder Animation dargestellt werden.
Zusätzlich ist D3 keine Neuerung und wird somit von allen gängigen Browsern
unterstützt. (Gull, 2014)
D3 zeichnet sich von den anderen Grafik-Bibliotheken durch eine besondere Dynamik
aus. Die „styles“, die Attribute sowie andere Eigenschaften, können nicht nur als
Konstanten definiert werden, sondern auch als datenbasierende Funktionen. Ein Beispiel
dafür ist die Funktion d3.geo.path(). Die geographischen Koordinaten werden als Pfad im
SVG gezeichnet. (Gull, 2014)
Data Driven Documents ist eine umfassende und vielfältige Bibliothek, die kostenlos zur
Verfügung steht. Mittels dieser Bibliothek können nicht nur einfache Balkendiagramme
und Graphen, sondern auch hochkomplexe Grafiken und Animationen dynamisch erstellt
werden. (s. Abbildung 7 „Choroplethenkarte Arbeitslosigkeit“ und Abbildung 8 „Netz
Fußballpässe“)
Abb. 7: Choroplethenkarte Arbeitslosigkeit
37
Abbildung 8: Netz Fußballpässe
38
37
Quelle: http://bl.ocks.org/mbostock/4060606 [abgerufen am 19.03.2015] 38
Quelle: http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294 [abgerufen am 19.03.2015]
State of the Art
24
Das Projekt wäre auch mit anderen JavaScript-Bibliotheken realisierbar, dies wird aber
nicht im Rahmen dieser Arbeit in Betracht gezogen. Denn auf Grund der umfangreichen
vorhandenen Literatur, Dokumentationen und Tutorials wird D3 favorisiert.
Mögliche Alternativen:
mxGraph39
Eine umfangreiche Bibliothek mit einigen Nachteilen. Sie bietet nur
Möglichkeiten Graphen zu erzeugen. HTML-Elemente müssen ergänzt werden,
Knoten sind schlecht ansprechbar.
JointJS40
Eine mxGraph-ähnliche Bibliothek, mit vielen vordefinierten Formen, leider ist
die zugehörige Webseite die einzige vorhandene Literaturquelle.
CanvasJS41
Eine weitere SVG-Bibliothek, die allerdings nicht für Graphen geeignet ist.
3.4 Datenspeicherung
Im dritten Kapitel wurden mehrere Realisierungsmöglichkeiten vorgestellt, sowie
mögliche Visualisierungstechnologien und Techniken betrachtet. Ein weiteres relevantes
Thema ist die Speicherung der Daten auf dem Webserver. Diese kann dateibasiert sowie
datenbankbasiert erfolgen.
Im folgenden Abschnitt werden zwei mögliche Varianten für eine dateibasierte
Datenspeicherung verglichen, sowohl auch Datenbanken allgemein betrachtet.
Abschließend wird kurz zusammengefasst, welche die bessere Lösung für die Umsetzung
des Projektes wäre.
39
Vgl. https://www.jgraph.com/javascript-graph-visualization-library.html [abgerufen am 19.03.2015] 40
Vgl. http://www.jointjs.com/ [abgerufen am 19.03.2015] 41
Vgl. http://canvasjs.com/ [abgerufen am 19.03.2015]
State of the Art
25
3.4.1 Dateibasierte Datenspeicherung (XML vs. JSON)
Sowie JSON als auch XML kann client- und serverseitig eingesetzt und somit direkt von
der Grafikbibliothek verwendet werden. Infolge dessen stellt sich die Frage, welcher
Speicherart geeigneter ist. Um dies zu beantworten, werden die Formatierungen der
einzelnen Typen in Betracht gezogen.
JSON hat eine kompaktere Struktur im Vergleich zu XML. Der Syntax ist übersichtlich
und nicht überaus komplex (s. Abbildung 9 „JSON-Formatierung“ und Abbildung 10
„XML-Formatierung“). Allerdings bietet JSON keine Möglichkeit Metadaten und
Kommentare zu integrieren. Zudem ist XML nicht nur ein Datenformat, sondern auch
eine Auszeichnungssprache und daher für viele Zwecken einsetzbar. Im Punkt
Serialisieren und Deserialisieren von Objekten haben beide Standards ihre Stärken und
Schwächen. Viele Benchmark-Tests beweisen dies. (Ganshani, 2013) (b, 2011)
Abbildung 9: JSON-Formatierung
42
Abbildung 10: XML-Formatierung
43
Wenn beide Formatierungen allgemein betrachtet werden, kann keine favorisiert werden.
Wird aber das HTML5-JavaScript-Projekt betrachtet, fällt die Entscheidung auf JSON.
JSON ist ein gültiger JavaScript-Code, daher entfallen die aufwendigen Parsing-
Vorgänge vollständig. Zudem ist die serverseitige Verarbeitung der JSON-Objekte relativ
unkompliziert. (Lorenz, 2014)
42
Quelle: http://predic8.de/xml-json-yaml.htm [abgerufen am 19.03.2015] 43
Quelle: http://predic8.de/xml-json-yaml.htm [abgerufen am 19.03.2015]
State of the Art
26
3.4.2 Datenbank
Eine weitere Möglichkeit die Daten abzuspeichern, ist eine Datenbank zu verwenden.
Dies ist in den meisten Fällen auch die vorteilhafteste Lösung. Die Vorteile einer
Datenbank gegenüber einer Textdatei, wie JSON sind umfangreich. Da die Daten in
tabellarischer Form vorliegen, können sie in den meisten Fällen einfach auch manuell
editiert werden. Zudem ist es auch mittels Abfragen möglich die Daten in beliebiger Form
darzustellen und sie sogar zu sortieren. Weiterhin ist die Geschwindigkeit bei der
Ausgabe der Daten in vielen Fällen besser, da ein Großteil der Arbeiten die Datenbank
selber übernimmt. Außerdem bieten die Datenbanken viele weitere Vorteile, wie
Mehrfachnutzung, Datenpersistenz, Datenkonsistenz, denn sie sind lediglich für diese
Zwecke konzipiert. Und nicht zuletzt können die Daten sehr leicht über den Client editiert
werden.
Allerdings haben die Grafik-Bibliotheken, die die Visualisierung des Graphen
ermöglichen, kein Zugriff auf die Datenbank. Demzufolge lässt sich in Bezug auf das
Projekt Folgendes feststellen:
Die Daten werden auf dem Webserver in einer Datenbank abgespeichert und mit Hilfe
von PHP in JSON-Format umgewandelt. Abschließend werden sie den Client übergeben,
so dass diese von der JavaScript-Grafikbibliothek verarbeitet werden können.
Konzept
27
4 Konzept
4.1 Zusammenfassung
Bevor die Überlegungen über den Aufbau der Arbeit präsentiert werden, sollten zuerst die
zu verwendenden Technologien und Techniken kurz zusammengefasst werden.
Es soll eine HTML5-basierte Web-Anwendung erstellt werden. Die Daten werden auf
dem Webserver in einer Datenbank abgespeichert. Als serverseitige Programmiersprache
wird PHP verwendet. Clientseitig wird JavaScript eingesetzt. Mittels der JavaScript-
Bibliothek D3 werden die PM-Prozesse grafisch dargestellt. Für die Manipulation der
Daten werden als Beihilfe weitere JavaScript-Bibliotheken, wie z.B. jQuery, benutzt.
Weitere zu verwendende Technologien sind CSS und AJAX.
Abbildung 11: Zusammenarbeit der Komponenten44
Die Abbildung 11 veranschaulicht vereinfacht die Zusammenarbeit der Komponenten.
Die URL wird vom Client aufgerufen. Über PHP erfolgt der Datenbankzugriff. Die Daten
werden mittels PHP in JSON Format umgewandelt und dem Client übergeben. Die
Manipulation der Daten wird nur clientseitig mit Hilfe von JavaScript durchgeführt. Die
verwendende AJAX Technologie für den Datenaustausch ermöglicht die
Aktualisierungen der Daten ohne erneutes Laden der Webseite.
44
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 10.03.2015]
Konzept
28
4.2 Anforderungen
Die Hauptaufgabe des Programms ist die Visualisierung der Projektmanagement-
Prozesse. Die Darstellung dieser Prozesse sollte mittels verschiedener Sichten
repräsentiert werden. Zudem soll es auch möglich sein, diese Prozesse zu editieren.
4.2.1 View
Es soll dem Anwender die Möglichkeit geboten werden, folgende Sichten des Graphen
generieren zu können (Gruppen, Gruppenprozesse, Verweise).
Gruppen
Die Gruppen-View ist die Startsicht. Diese Sicht soll alle Prozessgruppen
abbilden. Die Gruppen werden verknüpft dargestellt, so dass die Zusammenhänge
ersichtlich sind.
Gruppenprozesse
Eine weitere View ist die Gruppenprozesse-Sicht. Es muss eine Funktion zur
Verfügung stehen, die es erlaubt, alle Prozesse innerhalb einer Prozessgruppe
gemeinsam darzustellen.
Verweise
Die wichtigste ist die Verweise-View. Diese Sicht soll dem Anwender die
Möglichkeit bieten, nach Auswahl eines Prozesses in der View Gruppenprozesse,
dessen direkte Vorgänger und Nachfolger anzuzeigen. Dabei sollen auch die
dazugehörigen Inputs und Outputs visualisiert werden. Diese View soll die
Prozesse interaktiv abbilden, so dass der Benutzer über den Graphen navigieren
kann.
4.2.2 Editor-Funktion
Insert
Es soll eine Funktion erstellt werden, die dem Nutzer erlaubt, die einzelnen PM-
Prozesse und deren Eigenschaften direkt über die Web-Anwendung in der
Datenbank abzuspeichern.
Konzept
29
Delete
Des Weiteren soll die Web-Anwendung die Option bieten, vorhandene PM-
Prozesse und deren Eigenschaften zu löschen
Edit
Sollte der Benutzer nach dem Erfassen eines PM-Prozesses feststellen, dass
fehlerhafte oder unvollständige Informationen gespeichert wurden, soll er in der
Lage sein, diese korrigieren zu können.
4.3 Aufbau
Die Überlegungen, wie das Programm aufgebaut werden kann, sind von den
Visualisierungsmöglichkeiten abhängig.
4.3.1 Visualisierung
Views
Bekannt durch die Anforderungen sollen mehrere Sichten zur Verfügung stehen. In der
Startsicht werden alle Prozessgruppen verknüpft dargestellt. Als mögliche Lösung kann
dafür ein Flussdiagramm verwendet werden (s. Abbildung 12 „Konzept View 1 -
Gruppen“).
Abbildung 12: Konzept View 1 - Gruppen45
Der Sichtwechsel könnte beispielsweise über Doppelklick realisiert werden. Sobald der
Anwender diese Funktion aufruft, sollen die dazugehörenden Gruppenprozesse dargestellt
werden. Da es sich um eine große Anzahl von Prozessen handeln kann und zudem nicht
alle Prozesse in der jeweiligen Gruppe miteinander verknüpft sind, werden die direkten
45
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 06.04.2015]
Konzept
30
Beziehungen zwischen den einzelnen Prozessen nicht abgebildet (s. Abbildung 13
„Konzept View 2 - Planning Process Group“).
Abbildung 13: Konzept View 2 - Planning Process Group46
Nach Selektieren des gewünschten Prozesses werden die Verweise angezeigt. Daher kann
die Verweise-View, wie in Abbildung 14 „Konzept View 3 - Develop Project Charter“ zu
sehen, aufgebaut werden.
Abbildung 14: Konzept View 3 – Develop Project Charter47
Der betrachtete Prozess kann in der Mitte der Grafik positioniert werden, die direkten
Verbindungen werden dargestellt. Die dazugehörige Inputs und Outputs können neben
der Kante visualisiert werden. Damit ein guter Sichtüberblick gewährleistet ist, werden
die Beziehungen zwischen den anderen Prozessen nicht abgebildet. Nach Auswahl eines
anderen Prozesses dieser Gruppe wird die Sicht „Verweise“ nicht verlassen. Es werden
46
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 06.04.2015] 47
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 07.04.2015]
Konzept
31
lediglich die Verbindungen des neubetrachteten Prozesses abgebildet. Somit kann das
Navigieren über den Graphen umgesetzt werden.
D3 Layout
D3 Bibliothek bietet viele Layout-Varianten, die die Darstellung der Daten ermöglichen.
Wie aber bereits in den vorigen Kapiteln beschrieben, werden die PM-Prozesse in dieser
Arbeit als Graphen abgebildet. Demzufolge kann für das Umsetzen der genannten Sichten
das Force Layout d3.layout.force() verwendet werden. Dieses Layout ist eine flexible
Graphenimplementierung, die insbesondere für das Zeichen von gerichteten Graphen
erstellt wurde.
Das Force Layout beinhaltet mehreren Eigenschaften, auch als Funktionen bezeichnet, die
den Aufbau und das Verhalten der einzelnen Elementen bestimmen. Abbildung 15
erläutert die Struktur des Layouts.
Abbildung 15: D3 Force Layout48
Am Anfang des Layouts werden die Knoten und die Kanten als leere Arrays erstellt, die
nachfolgend anhand anderer Funktionen gefüllt werden. Mit der Eigenschaft „size“ wird
die Größe der SVG-Grafik bestimmt. Weitere Eigenschaften, die für das Verhalten der
Elemente wichtig sind, sind Kantenstärke, Reibung, Kantendistanz, Ladungsstärke,
Schwerkraftstärke. Mit Hilfe der Funktion force.on() können weitere Hilfsfunktionen
definiert werden, welche die Darstellung beeinflussen. Abschließend wird die Simulation
mit der Funktion force.start() gestartet.
48
Quelle: selbsterstellt
Konzept
32
4.3.2 Datenbank
Für die Datenspeicherung wird eine SQLITE-Datenbank verwendet. Obwohl SQLITE
sehr einfach aufgebaut ist und keine Installation auf dem Webserver benötigt, bietet sie
die meisten Vorteile einer Datenbank.
Die benötigten Daten für den Aufbau des Graphen können in einer Tabelle gespeichert
werden. Eine mögliche Konstruktion ist in der Tabelle 2 abgebildet.
node_id Integer, Not Null, Primary Key, Autoincrement
name Text, Not Null
children Text
groupName Text, Not Null
area Text, Not Null
short_description Text
description Text
type Text, Not Null
Tabelle 2: SQLITE-Tabelle49
Da es sich um einen Graphen handelt, werden die Prozesse als Knoten bezeichnet. Die
Nachfolger, die selbstverständlich auch Prozesse sind, werden als Kinder benannt. Jeder
Prozess besitzt eine eindeutige ID vom Typ Integer, die auch der primäre Schlüssel der
Tabelle ist. Damit gewährleistetet wird, dass später hinzugefügte Prozesse eine höhere ID
bekommen, kann die Eigenschaft Autoincrement zugewiesen werden. Die Spalte
„children“ besteht aus einem kommagetrennten Array von Prozessen-IDs. Da der
Anwender nicht immer eine ausführliche Prozessbeschreibung benötigt, wird ein
zusätzliches Feld für eine Kurzbeschreibung erstellt. In den Feldern „groupName“ und
„area“ werden die Information über die Prozessgruppen bzw. die Wissensgebiete
aufbewahrt. Die Felder, die unbedingt Informationen enthalten sollen, können die
Eigenschaft „Nicht Null“ erhalten.
Weitere Tabellen für Visualisierung der PM-Prozesse sind nicht ausgeschlossen. Da alle
Prozesse im Projektmanagement Ausgangswerte besitzen, die sogenannten Outputs
(Produkte oder Ergebnisse, die durch einen Prozess entstanden sind), kann eine zweite
Tabelle für diesen Zweck erstellt werden.
49
Quelle: selbsterstellt
Konzept
33
4.3.3 Webinterface
Die Benutzeroberfläche spielt eine entscheidende Rolle, denn hier werden alle
Informationen zusammen dargestellt. Sie ist die Schnittstelle zum Anwender, daher sollte
bei der Entwicklung dieser besonders die Benutzerfreundlichkeit berücksichtigt werden.
Da es sich bei dem Projekt um eine Visualisierungsanwendung handelt, sollte das
Webinterface so konzipiert werden, dass der Fokus immer auf die SVG-Grafik gerichtet
ist. Aus diesem Grund könnte ein größerer Bereich vom HTML-Dokument für die
Abbildung der PM-Prozesse reserviert werden. Die restlichen HTML-Elemente können
daher kleiner gestaltet werden, so dass sie dem Nutzer nicht aufdringlich erscheinen.
Nicht signifikante Elemente könnten sogar versteckt werden.
Allerdings setzt eine Umsetzung eines solchen Konzeptes, Kenntnisse über die
Visualisierungsmöglichkeiten der JavaScript-Bibliothek D3 voraus. Diese Bibliothek fügt
standardmäßig die SVG-Grafiken am Ende des HTML-Bodys ein, infolgedessen sollten
die HTML-Elemente am oberen Rand positioniert werden. Abbildung 16 veranschaulicht
ein solches Konzept.
Abbildung 16: Konzept Webinterface50
Der Fokus bleibt auf der SVG-Grafik erhalten, nur die relevanten Elemente sind sichtbar.
Besteht jedoch der Bedarf, dass weitere Funktionen benutzt werden sollen, lässt sich dies
50
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 07.04.2015]
Konzept
34
mit einblendbaren DIV-Elementen umsetzten. Nach Betätigung eines Funktionsbutton
erscheinen die HTML-Elemente als Vorschau und die SVG-Grafik wird nach unten
versetzt. Wenn die Funktion nicht mehr benötigt wird, kann diese über denselben Button
geschlossen werden (s. Abbildung 17 „Konzept Insert-Funktion“).
Abbildung 17: Konzept Insert-Funktion51
Auf ähnliche Weise könnten auch die restlichen Funktionen umgesetzt werden. Um
sicherzustellen, dass unerwünschte Funktionen aufgerufen werden, lassen sich die
Funktionsbuttons deaktivieren. Erst wenn ein Prozess selektiert worden ist, sollten die
Zusatzoptionen, die Insert- oder Edit-Funktion anzeigen, aktiviert werden. Die
Kurzbeschreibung anzusehen sollte allerdings auch ohne Selektieren mittels „Mouseover“
Effekt möglich sein.
51
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 07.04.2015]
Konzept
35
4.4 Planung
Eine erfolgreiche Umsetzung des Projektes setzt eine gute Planung voraus. Daher wird in
diesem Kapitel der Ablaufplan für die Umsetzung vereinfacht präsentiert.
Alle erfassten Anforderungen im Kapitel 4.2 können als sogenannten Features betrachtet
werden. Die Reihenfolge der Umsetzung muss nicht aber der Reihenfolge der Aufzählung
entsprechen. Da der Schwierigkeitsgrad bei diesen Features unterschiedlich ist, sollten zu
Beginn die weiniger aufwendigen Funktionen implementiert werden. Allerdings die
Reihenfolge nur nach Schwierigkeitsgrad festzulegen, ist nicht realisierbar, da viele
Funktionen voneinander abhängig sind. Aus diesem Grund sollte eine Kompromisslösung
gefunden werden. Die Grundfunktionalität wird am Anfang implementiert, danach
werden die wenig aufwendigeren Funktionen entwickelt und zum Schluss die
anspruchsvollen Features. Ein möglicher Ablauf könnte in diesem Fall folgendermaßen
aussehen:
Die Daten als zusammenhängender Graph visualisieren
Editor-Funktion implementieren
Insert
Delete
Edit
Views implementieren
Gruppen
Gruppenprozesse
Verweise
Die Umsetzung des Webinterface wird nicht als separates Feature aufgelistet, da es mit
der Implementierung der oben erwähnten Funktionen mitentwickelt wird.
Umsetzung
36
5 Umsetzung
5.1 Implementierungsumgebung
Vor der Vorstellung der Umsetzung, wird die Entwicklungsumgebung zusammengefasst.
Die Implementierung fand unter Webmatrix 3, ein Entwicklungswerkzeug für Webseiten
von der Firma Microsoft. Als Webserver wurde die lokale Apache Distribution von der
PHP-Entwicklungsumgebung XAMPP in der Version 5.6.3 verwendet. Auch der
Datenbankdienst wurde von diesem Tool in Anspruch genommen. Allerdings wurde nicht
MySQL für die Speicherung der Daten, sondern die Datenbank SQLITE (Produktversion
3.8.7.4) benutzt. Verwendete Programmiersprachen sind PHP und JavaScript. Für die
Visualisierung der Prozesse wurde die Grafik-Bibliothek D3 (Version 3.4.4) angewendet.
Weitere JavaScript-Bibliotheken sind jQuery (Version 2.1.1) und Select2 (Version 3.5.2)
und Tooltips.
Entwickelt wurde die HTML5-Anwendung unter dem Betriebssystem Windows 7 64Bit
(Version 6.1.7601). Getestet wurde mit den Internet Browsern Google Chrome (Version
41.0.2272.118, (64-bit)) und Firefox (Version 37.0.1).
5.2 Entwicklungsprozess
Die Umsetzung richtet sich nach dem agilen Software-Entwicklungsmodell Feature
Driven Development52
(auch FDD genannt), allerdings in stark verallgemeinerter Form.
Die Abbildung 18 illustriert dieses Konzept (HENNING WOLF, 2010). Zudem ist noch
anzumerken, dass in der vorliegenden Arbeit diese strikte Phasentrennung nicht immer
gehalten werden konnte. Trotzdem war diese Methode für die Durchführung des
Projektes von großer Bedeutung.
52
Software-Entwicklungsmethode von Jeff De Luca im Jahre 1997 definiert.
Umsetzung
37
Abbildung 18: Feature Driven Development53
Dieses Software-Entwicklungsmodell besteht aus fünf Phasen. In der 1. Phase wird das
Gesamtmodell bestimmt, dass am Anfang des Projektes gemeinsam mit der GDV-
Professur erstellt wurde und im Kapitel 1.2 verallgemeinert dokumentiert ist. Die Feature-
Liste (Phase 2) wurde bereits in den darauffolgenden gemeinsamen Treffen
zusammengefasst und im Kapitel 4.2 dargestellt. Phase 3 wurde in Kapitel 4.4
beschrieben. Die restlichen zwei Phasen konnten jedoch nicht abwechselnd realisiert
werden, da dies für die Umsetzung des Projektes nicht ideal war. Daher wurden zuerst
grob alle Features im Kapitel 4.3 entworfen und danach in der festgesetzten Reihenfolge
entwickelt.
5.3 Datenstruktur
Im folgenden Abschnitt werden die Struktur und der Aufbau der Daten erläutert.
bezeichnet.
5.3.1 Datenbank
Wie im Kapitell 4.3.2 angedeutet, wurden für die Umsetzung der Anwendung zusätzliche
Tabellen benötigt. Obwohl der Datenkern sich in der Haupttabelle befindet, wurde
festgestellt, dass gewisse Informationen sich nicht, wie gewünscht, extrahieren lassen.
Infolgedessen wurden zwei neuen Tabellen erstellt, um die volle Funktionalität zu
53
Quelle: Henning Wolf, Wolf-Gideon Bleek: Agile Softwareentwicklung. Heidelberg: dpunkt.verlag, S.
167.
Umsetzung
38
sichern. Somit besteht die SQLITE Datenbank „graph.db“ aus drei Tabellen. Abbildung
19 veranschaulicht die Datenbankstruktur.
Abbildung 19: graph.db54
Tabelle „nodes_view“
Die Kerntabelle „nodes_view“ beinhaltet die wichtigsten Informationen, die einem PM-
Prozess zugeordnet werden können. Das vorgeschlagene Tabellenkonzept von Kapitel
4.3.2 wurde ergänzt und umgesetzt. Dabei wurde eine zusätzliche Spalte „groupUrl“
erstellt, die dieselbe Information wie das Feld „groupName“ trägt, mit dem Unterschied,
dass hier die Prozessgruppen ohne Leerzeichen abgespeichert werden. Sobald einen
Datensatz erstellt wird, werden die Werte der Spalte „groupName“ über PHP in die Spalte
„groupUrl“ automatisch eingetragen, so dass die Benutzerfreundlichkeit der Anwendung
nicht beeinträchtig wird. Da die einzelnen Views anhand des Gruppennamen als URLs
aufgebaut werden, ist dies eine Notwendigkeit, denn die URLs keine Leerzeichen
enthalten können.
Für mögliche Weiterentwicklungen dieser Web-Anwendung wurde die Spalte „type“
reserviert. Mit Hilfe dieser kann die Anpassung der Visualisierungsmerkmale, wie Farbe
oder Form, realisiert werden.
54
Quelle: erstellt mit https://www.draw.io/ [abgerufen am 07.04.2015]
Umsetzung
39
Tabelle „groups“
Für die Umsetzung der View „Gruppen“ wurde eine zusätzliche Tabelle „groups“
konstruiert. Obwohl in dieser Tabelle nicht alle Felder verwendet werden, wurde sie nach
demselben Prinzip wie „nodes_view“ aufgebaut. Dadurch wird die Implementierung von
neuen SQL-Statements für die Datenverarbeitung vermieden. Die Felder „groupName“
und „area“ werden nicht beachtet.
Tabelle „node_edges“
In der Tabelle „nodes_edges“ werden alle Verbindungen zwischen den Prozessen einzeln
abgespeichert. Diese Tabelle repräsentiert die Outputs der PM-Prozesse, die als
Kantenwerte implementiert wurden. Hierfür sind die Felder „parent“, „children“ und
„outputs“ vorgesehen. Besteht eine direkte Verbindung von Prozess mit der ID 1 zu
Prozess mit der ID 2, wird automatisch einen Datensatz wie folgt erstellt:
parent children outputs
1 2
Tabelle 3: Neue Kante erstellen55
Der Output-Wert wird vom Anwender über die Anwendung eingetragen.
Die Datenbankanbindung erfolgt über die PHP Data Objects-Erweiterung (PDO). Da
diese Schnittstelle von SQLITE vollständig unterstützt wird, können alle Funktionalitäten
der Datenbank verwendet werden.
5.3.2 JSON
Bekannt von den vergangenen Kapiteln, erfolgt die Datenvisualisierung über die Grafik-
Bibliothek D3. Da der Zugriff auf die Datenbank über D3 nicht möglich ist, müssen die
Daten in ein gültiges Format umgewandelt werden, so dass sie von der JavaScript-
Bibliothek verarbeitet werden können. Aus diesem Grund, abhängig von der gewünschten
View, werden die Daten von der Datenbank mittels SQL-Abfragen extrahiert und mit der
PHP Funktion „json_encode()“ in JSON-Format umgewandelt und übergeben. Ab diesem
Zeitpunkt geschieht die Datenmanipulation über JavaScript.
55
Quelle: selbsterstellt
Umsetzung
40
Das generierte JSON-Objekt, in den JavaScript-Code vom Objekt „nodeResponse“
repräsentiert, wird aus drei verschachtelten Arrays zusammengestellt. Im ersten Feld
befinden sich alle benötigten Daten für den Aufbau der gewünschten Sicht, im zweiten
der komplette Graph und in dem letzten werden zusätzlich alle im Graphen vorhandenen
Kanten übergeben. Das hat den Vorteil, dass unabhängig von der Sicht, immer die
Möglichkeit besteht, alle Knoten editieren zu können, da der komplette Graph immer
übergeben wird. Des Weitern können auch die Outputs abgebildet werden, denn die
einzelnen Kanten sind auch in diesem Objekt vorhanden. Abbildung 20 erläutert den
Aufbau vom „nodeResponse“.
Abbildung 20: nodeResponse – View 356
5.4 Visualisierung der Daten
Nachdem erläutert wurde, wie die Daten strukturiert sind und welches Datenformat für
den Aufbau des Graphen benötigt wird, wird die Visualisierung der PM-Prozesse näher
betrachtet. Auch hier werden die Begrifflichkeiten Knoten, Kanten und Kinder eines
Knotens verwenden.
Die Hauptfunktion des JavaScript-Codes ist drawGraph(). Diese Funktion ist in zwei
Hauptteile unterteilt. Der erste Teil übernimmt die Logik für den Aufbau des Graphen,
der zweite das Zeichnen der SVG-Grafik im HTML-Dokument.
56
Quelle: selbsterstellt
Umsetzung
41
5.4.1 Graph Aufbau
Die Aufbaulogik des Graphen impliziert die Manipulation des JSON-Objekts. Das von
der Datenbank generierte Objekt liefert die erforderlichen Daten, allerdings müssen diese
für das Zeichnen der Grafik zerlegt und umgeformt werden. Für das Darstellen der
einzelnen Views wird nur das erste Array vom „nodeResponse“-Objekt verwendet.
Demzufolge werden die benötigten Informationen extrahiert und in einzelnen Variablen
abgespeichert. Die Kinder des einzelnen Knotens werden ermittelt und dadurch eine
Adjazenzliste erstellt. Diese kann somit übergeben und der Graph gezeichnet werden. In
diesem Fall werden jedoch alle Knoten mit allen vorhandenen Kanten grafisch abgebildet.
Für das Visualisieren der verschieden Sichten ist das jedoch nicht optimal. Infolgedessen
wurde mittels mehreren Wenn-Dann-Bedingungen eine Fallunterscheidung in Betracht
gezogen.
View Gruppen
Da in der Gruppen-Sicht gewünscht ist, dass alle Verbindungen abgebildet werden, wird
die Adjazenzliste nicht angepasst. Alle Gruppen und deren Verbindungen werden
visualisiert.
View Gruppenprozesse
In dieser Sicht werden keine Verbindungen benötigt, daher wurde keine Adjazenzliste
erstellt. Es müssen lediglich nur die einzelnen Prozesse der Gruppe dargestellt werden.
View Verweise
Für den Aufbau der View Verweise ist allerdings eine Umformung der Adjazenzliste
notwendig. Hier werden nur die ein- und die ausgehenden Verbindungen des betrachteten
Prozesses benötigt. Ob Beziehungen zwischen den anderen Prozessen aus der Sicht
vorhanden sind, ist für die Repräsentation der View irrelevant. Demzufolge werden die
Knoten in dieser Sicht mittels einer weiteren Wenn-Dann-Bedingung anhand des Indexes
verglichen und der gesuchte Knoten ermittelt. Anschließend werden nur die ein- und
ausgehenden Kanten für diesen konstruiert.
Umsetzung
42
5.4.2 Zeichnen der SVG-Grafik
Der zweite Teil der Funktion drawGraph() übernimmt die Hauptaufgabe des Projektes:
das Erzeugen der SVG-Grafik. Das in Kapitel 4.3.1 beschriebene Force Layout wurde
implementiert und die Daten visualisiert. Dabei werden die Prozesse als Rechtecke
dargestellt und die Kanten als Kurven abgebildet. Dieser JavaScript-Code ist wie folgt
aufgebaut.
Am Anfang wird das Force Layout initialisiert, danach werden die einzelnen Elemente
(Knoten, Kanten, Pfeile, Text-Labels) definiert und gruppiert. Abschließend werden diese
mit Hilfe von CSS-Attributen direkt über D3 formatiert und im SVG-Container
gezeichnet. Dabei ist zu beachten, dass die Textelemente nur in Verbindung mit den
anderen Objekten existieren können, da sie die Werte dieser abbilden. Mit Hilfe weiterer
Funktionen, wie click() und dbclick() wird eine Interaktion mit den Elementen
ermöglicht. Da dieser Teil des Codes viele Funktionen beinhalten, wird nur auf die
wichtigsten davon näher eingegangen.
d3.layout.force()
Zur Beginn der Erstellung der Grafik wird das Layout initialisiert. Dabei werden die
Eigenschaften des Graphen, wie Gravitation, Kantenlänge usw., und deren Werte
definiert. Allerdings mussten hier auch mehrmalige Fallunterscheidungen durchgeführt
werden. Denn die Eigenschaften für alle Views gleichzusetzen, ist nicht optimal.
Demzufolge wurden die Sichten wieder separat betrachtet und die Werte mit Hilfe
kleinerer Funktionen entsprechend definiert. Ein Beispiel dafür ist die Ladungsstärke der
Knoten, die für das Abstoßen bzw. das Anziehen der Elemente zuständig ist. Mit Hilfe
dieses Merkmals kann der Abstand zwischen den einzelnen Knoten bestimmt werden. Ein
niedriger Wert im Minus-Bereich wäre für die View Gruppenprozesse sinnvoll, allerding
wäre dieser für die View Verweise nicht geeignet, da die Knoten sehr dicht aneinander
stehen würden. Abbildung 22 veranschaulicht das Verhalten der Knoten bei
Ladungsstärke minus 400.
Umsetzung
43
Abbildung 21: force.charge(-400) für View 257
Abbildung 22: force.charge(-400) für View 358
var path = svg.append("svg:g").selectAll("path")
Mit dieser Funktion wird eine Gruppe mit den Kanten gebildet und die Kantenliste aus
der Adjazenzliste mittels data(force.links()) übergeben. Des Weiteren wird mit der
Funktion append("svg:path") der Weg zur Vorschau gebracht und der Pfeil am Ende der
Kante in die Richtung des Kindes positioniert.
var node = svg.selectAll(".node")
Eine weitere Funktion ist „var node = svg.selectAll(".node")“. Einerseits wird bei dieser
die Gruppe der Knoten definiert. Ähnlich wie bei den Kanten werden die Knoten aus der
Adjazenzliste über data(force.nodes()) übergeben. Andererseits werden die
Eventverfolgungsfunktionen, wie click(), doubleclick(), mouseover() und drag() für die
Gruppe dieser Elemente initiiert. Der Aufbau und die Aufgabe dieser werden im Kapitel
5.7 erläutert.
var linkslabel = svg.selectAll("g.textholder")
Hier wird ein Textlabel erstellt und zu den Kanten hinzugefügt.
tick()
Eine sehr wichtige Funktion in diesem Teil des Codes ist tick(). In D3 wurden die Knoten
standardmäßig als freibewegliche Elemente implementiert. Für die Neuberechnung des
Weges zwischen zwei Elementen bietet D3 die Callback-Funktion tick(). Hier werden die
Objektkoordinaten zu Beginn als Variable gespeichert, so dass der Path mittels einer
Callback-Funktion nach der Translation der Elemente neu berechnet werden kann. Da
57
Quelle: selbsterstellt 58
Quelle: selbsterstellt
Umsetzung
44
hier der Weg zwischen den Knoten auch aufgebaut wird, wurden Überlegungen über
mögliche Konstruktionen angestellt. Die Knotenverbindungen mittels einer Geraden zu
realisieren, wäre die einfachere Lösung und für einen kreisfreien Graphen auch die
bessere Entscheidung. Allerdings wäre dies für die Umsetzung des Projektes nicht
sinnvoll, da zwischen zwei Prozessen ein- und ausgehende Verbindungen existieren
können. Somit werden sich die dazugehörigen Informationen, wie die Outputs,
überlagern. In diesem Fall wäre die ideale Lösung für das Visualisieren der Verbindungen
orthogonale Linien zu verwenden. Dies zu implementieren ist aber sehr schwierig und
aufwendig. Aus diesem Grund wurde eine Alternative angewendet und der Weg als
Kurve konstruiert.
Eine weitere Aufgabe dieser Funktion ist die Umsetzung der Prozessen-Outputs als
Kantenwerte. Dabei wird das Textlabel aus der Funktion var linkslabel =
svg.selectAll("g.textholder") zugewiesen und die Outputs-Werte aus dem edges-Array
des JSON-Objekts übergeben.
node.append("rect") und node.append("text")
Mit Hilfe dieser Funktionen werden zum einem die Knoten als Rechtecke, zum anderen
die dazugehörigen Bezeichnungen visualisiert Die Größe der Elemente wird ebenfalls
hier über CSS-Attribute definiert.
Obwohl das beschriebene Force Layout implementiert wurde und die einzelnen
Elementen zur Vorschau gebracht wurden, hat sich diese Aufgabe als schwer realisierbar
erweisen. Die Prozesse konnten visualisiert und die einzelnen Sichten generiert werden.
Allerdings ist es sehr schwierig eine dynamische Grafik zu erzeugen, die ein statisches
Diagramm nachbildet. Die Prozesse so zu positionieren, wie im PMBOK abgebildet sind,
ist nicht trivial. Anhand von festen Koordinaten kann dies realisiert werden, jedoch nur
für eine feste Anzahl von Prozessen. Das Ziel dieser Arbeit ist aber eine Anwendung
anhand von dynamischen Daten zu entwickeln. Neue Prozesse sollen hinzugefügt werden,
vorhandene gelöscht werden.
Eine weitere Überlegung die Darstellung der Prozesse veranschaulicht darzustellen, ist
die Betrachtung der Inputs und der Outputs. Die Inputs können auf der linken Seite des
betrachteten Prozesses positioniert werden, die Outputs auf der rechten. Leider ist diese
Überlegung für diesen Graphen auch nicht geeignet. Ein Prozess kann Outputs liefern,
Umsetzung
45
sowie Inputs bekommen. Daher kann der Knoten links, sowie rechts positioniert werden.
Demzufolge wurden für die Optimierung der Darstellung der Sichten wieder
Alternativlösungen, wie Anpassung der Ladungsstärke oder der Kantendistanz,
angewendet. Abbildung 23 veranschaulicht dies.
Abbildung 23: force.charge(-2000) für View 3 59
5.5 Editor-Funktion
Die Umsetzung der Editor-Funktion wurde ebenso erfolgreich abgeschlossen. Allerdings
wurde wieder gemerkt, dass die Implementierung dieser Funktion nicht trivial war. Auf
Grund der benutzen Datenstruktur werden viele verschachtele SQL-Abfragen für die
Änderung der Daten verwendet. Da die Tabellen in keiner Beziehung zueinander stehen,
werden die Daten bei allen separat aktualisiert.
Insert
Beim Anlegen neuer Daten soll zum einem die Tabelle „nodes_view“ und zum anderen
die Tabelle „nodes_edges“ gefüllt werden. Dabei werden in der ersten Tabelle folgende
Informationen eingetragen: Prozessname, Nachfolger, Prozessgruppe, Wissensgebiet,
Kurz- und Langbeschreibung sowie Prozesstyp. Diese werden repräsentiert durch die
Tabellenfelder „name“, „children“, „groupName“, „area“, „shordescription“,
„description“ und „type“. Allerdings soll dem Anwender die Möglichkeit geboten
werden, nicht nur die nachfolgenden Prozesse einzugeben, sondern auch die
vorangegangenen. In dieser Tabelle ist jedoch kein solches Feld vorgesehen. Damit dies
realisiert wird, werden mehrere verschachtelte SQL-Abfragen verwendet. Als erstes wird
59
Quelle: selbsterstellt
Umsetzung
46
mittels INSERT der Datensatz ohne die Informationen über den Vorgänger in der Tabelle
gespeichert. Danach wird die Tabelle durch ORDER BY node_id DESC LIMIT 1
absteigend sortiert, so dass die letzte Prozess-ID sich an der ersten Stelle befindet. Nach
der Ermittlung der letzten Prozess-ID, wird diese in der Spalte „children“ des jeweiligen
Prozesses hinzugefügt. Abschließend werden in der Tabelle „node_edges“ die
entsprechenden Datensätze, wie in Kapitel 5.3.1 beschrieben, automatisch erstellt.
Edit
Ähnlich wie bei der Insert-Funktion werden hier wieder mehrere verschachtelte SQL-
Abfragen für die Implementierung dieser Funktion verwendet. Die Tabelle „nodes_view
wird über den SQL-Befehl UPDATE aktualisiert und der Datensatz für den jeweiligen
Prozess überschrieben. Da in der Tabelle „node_edges“ die Datensätze automatisch
erstellt werden, werden nach einem UPDATE-Befehl die Kanten für den jeweiligen
Prozess neu generiert. Das hat den Nachteil, dass existierende Kanten überschrieben
werden und der Output-Wert gelöscht wird. Aus diesem Grund wird die Tabelle
„node_edges“ mit Hilfe der Funktion fetchAll() in einem Array abgespeichert. Nach der
Generierung der entsprechenden Datensätze werden die fehlenden Output-Informationen
über den Array ergänzt.
Delete
Wenn ein Prozess nicht mehr benötigt wird, wird der Datensatz mit der jeweiligen
„node_id“ über den SQL-Befehl DELETE gelöscht. Jedoch muss noch beachtet werden,
dass dieser Prozess sich im Feld „children“ der anderen Prozesse befinden kann, daher
wird er auch aus dieser Spalte gelöscht. Da es sich in diesem Feld um einen
kommagetrennten Array handelt, wird demzufolge eine Fallunterscheidung durchgeführt.
Die Tabelle 4 veranschaulicht den Algorithmus:
Umsetzung
47
Pseudocode Beispiel
if children > 1
add "," at the start of string
add "," at the end of string
if ",searched_id," is in the string
replace ",searched_id," with ","
remove "," at the beginning and at the end
else
delete searched_id
end
2,4,6,40
,2,4,6,40
2,4,6,40,
,2,4,6,40,
,2,6,40,
2,6,40
only one element
delete this element
Tabelle 4: Pseudocode - Löschen eines Elements von der Spalte „children“
5.6 Datenübertragung (AJAX)
Für die Datenübertragung wurde die Technologie AJAX mit Hilfe der JQuery-Bibliothek
eingesetzt. Mit Hilfe dieser Technologie wird die Reaktionszeit für den Aufbau des
HTML-Dokumentes deutlich verbessert, da nur die SVG-Grafik neu geladen wird.
Sobald der Anwender die Sicht wechselt, sendet der Client eine Anfrage an den Server.
Der Server verarbeitet diese und sendet nur den neugenerierten JSON-File zurück, so dass
die Funktion drawGrapph() neu aufgerufen wird und nur die Grafik neu gezeichnet wird.
Bei der Edit-Funktion wird die Technologie auch verwendet. Dabei werden die POST-
Anfragen von den HTML-Formen über JavaScript serialisiert und dem PHP-Skript
übergeben. Daraufhin werden die Daten in der Datenbank aktualisiert und mittels PHP
wieder dem JavaScript übergeben.
5.7 Webinterface und Benutzerinteraktion
Im Folgenden wird die Implementierung des Webinterfaces vorgestellt. Die Umsetzung
des Konzepts aus Kapitel 4.3.3 konnte ohne Komplikationen durchgeführt werden. Das
HTML-Dokument wurde so strukturiert werden, dass der Fokus immer auf die SVG-
Grafik gerichtet ist. Die benötigten HTML-Elemente werden somit am oberen Rand der
Webseite positioniert. Zudem wird die Benutzerfreundlichkeit mit Hilfe der
Eventverfolgungsfunktionen zusätzlich erhöht.
Umsetzung
48
Die wichtigste Funktion in diesem Abschnitt ist die $(document).ready(). Einerseits wird
mit dieser jQuery-Funktion gewährleistet, dass die SVG-Grafik erst nach vollständigem
Laden alle HTML-Elemente zur Vorschau kommt, andererseits werden alle Hilfsfunktion
für die Erhöhung der Dynamik dieser Anwendung initialisiert. Eine dieser
Hilfsfunktionen ist toggle(), deren Aufgabe ist, die Div-Elemente für die Editor-Funktion
auszublenden. Dadurch wird die Darstellung der Prozesse zusätzlich abgehoben. Eine
weitere sehr hilfreiche Funktion ist $(#html-elemen).select2() des JavaScript-Plug-Ins
Select2. Dies ist eine Funktion mit der die Usability und Optik von Auswahlfeldern
deutlich verbessert werden kann. Sie wandelt nicht nur die Multiselect-Felder in
Dropdown-Listen um, sondern bietet auch eine Suchfunktion, mit deren Hilfe neue
Prozesse und die dazugehörigen Informationen schnell eingegeben werden. Abbildung 24
veranschaulicht diese Funktionen.
Abbildung 24: Insert-Div - toggle() und $(#html-elemen).select2() in der View 160
Die Benutzerinteraktion erfolgt über die im Kapitel 5.4.2 initialisierten Funktionen
click(), doubleclick(), mouseover() und drag(). Die Funktion click() wird für das
Selektieren der Prozesse, sowie für die Verbindungen verwendet. Zum einem werden
somit die Informationen in den Edit-Feldern automatisch eingetragen, zum anderem wird
60
Quelle: selbsterstellt
Umsetzung
49
die Größe und Farbe des Elements verändert, so dass die Anwendung zusätzliche
Transparenz gewinnt. Der Sichtwechsel geschieht über Doppelklick. Allerdings sobald
sich der Anwender in der View Verweise befindet, wird die Sicht nicht verlassen. Es
werden bei weiteren Doppelklicks lediglich die Verbindungen des neubetrachteten
Prozesses abgebildet, so dass der Nutzer über den Graphen navigieren kann. Die
Möglichkeit, in die vorherige Sicht wieder zu gelangen, oder die zusammengehörenden
Prozesse zu gruppieren, wird über einen multifunktionalen „href-link“-Button realisiert.
Mit Hilfe der Mouseover-Funktion wird die Kurzbeschreibung des jeweiligen Prozesses
eingeblendet. Dafür wird einen zusätzlichen JavaScript-Plug-In Tooltip verwendet (s.
Abbildung 25 „Kurzbeschreibung Mouseover – View 3“). Des Weiteren wird über die
drag()-Funktion eine Auseinanderziehung der Knoten ermöglicht.
Abbildung 25: Kurzbeschreibung Mouseover – View 3
Fazit und Ausblick
50
6 Fazit und Ausblick
Dieses Kapitel widmet sich abschließend sowohl der Zusammenfassung der erarbeiteten
Ergebnisse dieser Bachelorarbeit, als auch der Weiterentwicklung dieser Web-
Anwendung.
6.1 Fazit
Im Rahmen dieser Arbeit wurde eine HTML5-Web-Anwendung entwickelt, welche die
Projektmanagement-Prozesse, basierend auf dem Buch A Guide to the Project
Management Body of Knowledge interaktiv visualisiert. Zum einem wurden diese
Prozesse unter der Betrachtung verschiedener Sichten abgebildet, zum anderem wurden
diese anhand von dynamischen Daten erstellt. Die Repräsentation der Daten als SVG-
Grafik wurde mit Hilfe der JavaScript-Bibliothek D3 umgesetzt. Obwohl alle
Anforderungen erfolgreich abgeschlossen wurden, stellte sich heraus, dass die
Entwicklung dieser Anwendung eine schwierige Aufgabe war. Die verwendete Grafik-
Bibliothek ist ein sehr vielfältiges aber auch komplexes Werkzeug. Aus diesem Grund
wurden während der Umsetzung viele Alternativlösungen angewendet, die nur
suboptimal sind.
Zudem ist noch anzumerken, dass bevor das Programm als Unterstützung für den
Projektmanagement-Kurs der GDV Professur eingesetzt wird, einige Verbesserungen
nötig sind. Aufgrund der Freibeweglichkeit der Knoten kann nicht immer eine gute
Positionierung der Prozesse erreicht werden. Demzufolge kann ein Algorithmus
entworfen werden, der anhand von mehreren Kriterien und Eigenschaften die
Positionierung der Prozesse optimiert. Ein weiterer Kritikpunkt dieser Arbeit ist die
Abbildung der Verbindungen zwischen den einzelnen Prozessen. Die verwendeten
Kurven sind eine gute Lösung. Auf diese Weise wird gewährleistet, dass die die Output-
Information sich nicht überlagern und somit sehr gut lesbar sind. Allerdings muss auch
hier erwähnt werden, dass orthogonale Linien für diese Visualisierungsart besser geeignet
sind. Trotz dieser Kritik kann zusammengefasst werden, dass mit der vorliegenden Web-
Anwendung eine solide Grundlage für die Visualisierung der Projektmanagement-
Prozesse geschaffen wurde. Die Prozesse können gruppiert werden, über den Graphen
kann navigiert werden.
Fazit und Ausblick
51
6.2 Ausblick
Die entwickelte HTML5-Anwendung beinhaltet die Grundfunktionalität für die
Durchführung einer effektiven Unterrichtsbegleitung. Allerdings wäre der
Unterrichteinsatz wesentlich effizienter, wenn noch weitere Sichten generiert werden
könnten. Die Prozesse sind zusätzlich in Wissensgebiete unterteilt. Aufgrund dessen
können diese auch danach gruppiert werden.
Eine weitere Weiterentwicklungsmöglichkeit ist die Implementierung mehrerer
Visualisierungslayouts. Wie bereits in Kapitel 4.3.1 erwähnt, bietet die Bibliothek D3
eine umfangreiche Vielfalt davon. Zum Beispiel könnten die Outputs eines Prozesses mit
dem Layout Tree als Baumstruktur abgebildet und dadurch auch navigiert werden.
Mehrere geometrische Formen zu definieren, könnte für die Visualisierung der Prozesse
auch von großem Nutzen sein.
Die Einbindung visueller Effekten ist ebenso nicht zu unterschätzen. Dadurch kann nicht
nur die Attraktivität der Web-Anwendung erhöht, sondern auch die Funktionalität
verbessert werden. Durch einfaches Ein- oder Ausblenden bestimmter Graphikelemente
könnten die Prozesse besser veranschaulicht und demzufolge leichter verstanden werden.
Weitere visuelle Effekten, die implementiert werden könnten, sind ein langsam
verlaufender Sichtwechsel, Elementen-Zoom und Schatten.
Eine weitere mögliche Weiterentwicklung ist die Erstellung einer portablen offline
Version dieser Anwendung. Damit wäre der Anwender in der Lage, auch ohne
Internetverbindung oder einen zusätzlichen lokalen Webserver sie zu benutzen.
Literaturverzeichnis
52
Literaturverzeichnis
b, klaus. 2011. Binär, XML und JSON-Serialisierung im Vergleich. [Online] 30. 12 2011. [Zitat
vom: 24. 03 2015.] http://blog.klaus-b.net/post/2011/12/30/Binar-XML-und-JSON-Serialisierung-
im-Vergleich.aspx.
D3.js. D3.js - Data Driven Documents. [Online] [Zitat vom: 19. 03 2015.] http://d3js.org/.
Flanagan, David. 2007. JavaScript - Das umfassende Referenzwerk. s.l. : O'Reilly, 2007. 978-3-
89721-491-0.
Ganshani, Punit. 2013. http://www.codetails.com/. [Online] 23. 10 2013. [Zitat vom: 24. 03
2015.] http://www.codetails.com/2013/10/23/which-one-is-better-json-vs-xml-serialization/.
Gasston, Peter. 2014. Moderne Webentwicklung: geräteunabhängige Entwicklung - Techniken
und Trends in HTML5, CSS3 und JavaScript . Heidelberg : dpunkt, 2014. 9783864901164.
Gull, Clemens. 2014. BigData mit JavaScript visualisieren : D3.js für die Darstellung großer
Datenmengen einsetzen. s.l. : Franzis Verlag, 2014. 9783645603478.
HENNING WOLF, WOLF-GIDEON BLEEK. 2010. Agile Softwareentwicklung. Heidelberg :
dpunkt.verlag, 2010. 978-3-89864-701-4.
Hogan, Brian P. 2012. HTML5 & CSS3 (Prags). s.l. : O'Reilly, 2012. 978-3-89721316-6.
Institute, Project Management. 2013. A guide to the project management body of knowledge :
(PMBOK® guide) . s.l. : Newtown Square, 2013. 9781935589679.
jQuery. http://jquery.com/. [Online] [Zitat vom: 16. 03 2015.]
Kehrer, Olaf. O&O Services Software Entwicklung und IT-Beratung. [Online] [Zitat vom: 20.
03 2015.] http://www.oo-services.com/desktop-oder-web-anwendung-was-ist-besser/.
Klaus Chantelau, René Brothuhn. 2010. Multimediale Client-Server-Systeme. Berlin,
Heidelberg : Springer, 2010. 978-3-540-79748-7.
Lorenz, Patrick A. 2014. Kochen mit Patrick: Kochen und Programmieren - Hand in Hand. s.l. :
dotnetpro, 2014. 9783844292794.
msdn. So wird's gemacht: Auswählen zwischen SVG und Canvas. [Online] [Zitat vom: 18. 03
2015.] https://msdn.microsoft.com/de-de/library/ie/gg193983%28v=vs.85%29.aspx.
Pomaska, Günter. Webseiten-Programmierung (Sprachen, Werkzeuge, Entwicklung). Minden,
Deutschland : Springer Vieweg. 978-3-8348-2484-4.
Literaturverzeichnis
53
Rasmus Lerdorf, Kevin Tatroe, Peter MacIntyre. 2006. Programmieren mit PHP. s.l. :
O'Reilly, 2006. 3-89721-473-3.
Rasmus Lerdorf, Sebastian Bergmann, Garvin Hicking. 2006. PHP: kurz & gut. s.l. :
O'Reilly, 2006. 978-3-89721-520-7.
Rouse, Margaret. http://www.techtarget.com/. [Online] [Zitat vom: 21. 03 2015.]
http://searchsoa.techtarget.com/definition/Rich-Internet-Application-RIA.
Sascha Kersken, André Reinegger. 2010. Adobe Flash CS5. s.l. : O'Reilly, 2010. 978-3-
389721987-8.
Schiffner, Dr. Daniel. Lernbar Release 4, Eine Einführung in das Projektmanagement. [Online]
[Zitat vom: 15. 03 2015.] http://lernbar.uni-frankfurt.de/courses/1549/800/lernbar/index.html.
Sebastian Bergmann, Rasmus Lerdorf, Garvin Hicking. 2006. PHP: kurz & gut. s.l. :
O'Reilly, 2006. 978-3-89721-520-7.
SQLITE. https://sqlite.org/about.html. [Online] [Zitat vom: 03. 12 2015.]
https://sqlite.org/about.html.
Stefanov, Stoyan. 2011. JavaScript Patterns. s.l. : O'Reilly, 2011. 978-3-389721598-6.
W3C. W3C. [Online] [Zitat vom: 20. 03 2015.] http://www.w3.org/XML/.
Walter, Thomas. 2008. Kompendium der Web-Programmierung. Berlin, Heidelberg : Springer,
2008. 978-3-540-33134-6.
Wenz, Christian. 2007. JavaScript und AJAX - Das umfassende Handbuch. Bonn : Galileo Press,
2007. 3-89842-859-1.
Zhu, Nick Qi. 2013. Data Visualization with D3.js Cookbook. s.l. : Packt Publishing, 2013. 978-
1-78216-216-2.