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.