Konzeption und prototypische Entwicklung einer Webanwendung zur plattformübergreifenden Verwaltung von Aufgaben in einem Unternehmen

Inhaltsverzeichnis

Abstrakt

Abbildungsverzeichnis

I. Einleitung und Zielsetzung
1.1. Einleitung
1.2. Motivation
1.3. Aufbau der Arbeit

II. Übersicht über die aktuellen Webentwicklungswerkzeuge
2.1. HTML5 und CSS3
2.2. JavaScript. DOM
2.3. Ajax
2.4. Javascript Framework jQuery
2.4.1. jQuery UI
2.4.2. jQuery Mobile

III. Anforderungsanalyse und Konzeption
3.1. Projektstruktur
3.2. Ist-Analyse
3.3. Anforderungsanalyse
3.3.1. Funktionale Anforderungen
3.3.2. Nicht-funktionale Anforderungen
3.4. Funktionsumfang
3.5. Anwendungsfallanalyse
3.6. Programmarchitektur

IV. Entwurf und Umsetzung des Webinterface-Konzepts
4.1. Recherche und Analyse aktueller Tasktool Webapplikationen
4.2. Gestaltung der Benutzeroberfläche. Usabilityvorgaben
4.3. Umsetzung des Weblayouts

V. Technische Realisierung
5.1. Implementierung der Frontend-Backend Kommunikation
5.1.1. Modul „Login/Logout“
5.1.2. Modul „Anzeigen von Informationen“
5.1.3. Modul „neue Aufgabe hinzufügen“
5.1.4. Modul „Aufgabe bearbeiten“
5.2. jQuery Widgets
5.2.1. Kalender
5.2.2. Autovervollständigungsfunktion
5.2.3. Zusatzfunktionen

VI. Usability Test

Fazit und Ausblick

Abkürzungsverzeichnis

Quellenverzeichnis

Anhang 1. Task Tools Handlers Release

Anhang 2. Fragen und Antworten zur Usability

Abbildungsverzeichnis

Abbildungen

Abbildung II.1. Überblick über die Browserunterstützung der CSS3 Funktionen vom 3.10.2013

Abbildung II.2. Meistbenutze Browserversionen in Deutschland über einen Zeitraum von 7 Tagen

Abbildung II.3. Hierarchie der Elemente in einer Webseite

Abbildung II.4. Das Modell einer traditionellen Webanwendung (links) im Vergleich mit einer Ajax-Webanwendung (rechts).

Abbildung III.1. Softwareprojektstrukturplan

Abbildung III.2. Anwendungsfälle für Projektleiter und Projektbearbeiter

Abbildung III.3. Grafische Darstellung einer Webanwendung-Architektur mit DB Unterstützung

Abbildung III.4. Grafische Darstellung des Datenbankmodels

Abbildung IV.1. Grundstruktur des Weblayouts

Abbildung IV.2. Wireframe: die positionierung der wichtigsten Seitenelemente

Abbildung IV.3. Erstes Designkonzept

Abbildung IV.4. Zweites Designkonzept

Abbildung IV.5. Farbkonzept der Webapplikation

Abbildung IV.6. Logo der Webapplikation

Abbildung IV.7. Grafisches Designkonzept mittels jQuery UI Elementen

Abbildung IV.8. Responsives Webdesign: Einsatz der Technologie an der Webanwendung

Abbildung V.1. Übertragung der Aufgaben-Daten in JSON-Format

Quellcode

Quellcode II.1. Beispiel eines HTML-Dokuments

Quellcode IV.1. HTML-Grobgerüst mit der dazugehörigen CSS-Code

Quellcode IV.2. Unterstützung von responsiven Webdesign mit CSS

Quellcode IV.3. HTML-Umsetzung des Hauptbereichs des Weblayouts

Quellcode IV.4. Realisierung des Hauptbereichs des Weblayouts: Zugehörige CSS

Quellcode V.1. Aufruf der Loginfunktion

Quellcode V.2. Realisierung der Loginfunktion mit Ajax. Callback-Funktion

Quellcode V.3. Logout Callback-Funktion: Rückkehr zur Anmeldemaske

Quellcode V.4. Speicherung der Daten mittels LocalStorage

Quellcode V.5. Laden von View-Liste

Quellcode V.6. Laden von Aufgaben

Quellcode V.7. Aufgaben filtern: Funktionsaufruf

Quellcode V.8. Das Extrahieren von Details einer Aufgabe: Felder füllen

Quellcode V.9. Anlegen der neuen Aufgabe. Aufgabenliste aktualisieren

Quellcode V.10. Ändern von Aufgabeninformationen

Quellcode V.11. Ändern des Aufgaben-Datums im Interface (manuell)

Quellcode V.12. Funktionen zum Ändern von Aufgabenwichtigkeit

Quellcode V.13. Funktionen zum Löschen einer Aufgabe

Quellcode V.14. Ändern der Aufgabendatum mithilfe des Kalenders

Quellcode V.15. Implementierung der Autovervollständigungsfunktion

Quellcode V.16. If-Abfrage: Markierung einer Aufgabe

Quellcode V.17. Callback-Funktion für die dynamische Erstellen von Kombinationsfelder

Quellcode V.18. Löschen der Aufgabeninformationen

Quellcode V.19. Einblenden der Leiste mit Aufgabendetails

Quellcode V.20. Der Effekt beim Löschen eines Aufgabendetail

Quellcode V.21. Schalten eines Icons

Quellcode V.22. Funktion „eine aus drei Checkboxen auswählen“

Quellcode V.23. Aufruf der Login-Funktion über die Eingabentaste

I. Einleitung und Zielsetzung

1.1. Einleitung

In den letzten Jahren wurden Web-Anwendungen (kurz „Apps“^[1] genannt) immer populärer. Mit der fortschreitenden Webtechnologieentwicklung unterscheiden sie sich durch ihre Funktionalität kaum mehr von Desktop-Anwendungen (lokal installierten Anwendungsprogrammen).

Der Hauptvorteil einer Web-Anwendung besteht darin, dass alle logischen Modelle und Algorithmen auf einem Server liegen – im Gegensatz zu herkömm-lichen Anwendungsprogrammen, deren Logik sich auf dem PC jedes Be-nutzers befindet. So erübrigt sich bei Web-Apps die lokale Installation des Programms auf dem Computer. Dadurch spielt es keine Rolle mehr, welches Betriebssystem im Hintergrund läuft. Bei der Aufgabenbearbeitung greift die Webapplikation auf die Systemressourcen des Geräts nicht zu. Der Anwender braucht lediglich einen beliebigen Webbrowser^[2] zu starten und die Adresse der Web-Anwendung einzugeben.

Es besteht auch keine Notwendigkeit mehr, die Anwendung auf dem Computer neu zu installieren, nachdem eine neue Version der Applikation verfügbar ist. Darüber hinaus greift man immer auf die neueste Version der Web-Anwendung zu, sowohl aus dem lokalen Netzwerk einer Organisation als auch aus dem Internet. Im zweiten Fall haben die Mitarbeiter die Möglichkeit die internen Unternehmensressourcen an jedem Ort der Welt zu nutzen. Dafür benötigt man nicht einmal einen Computer: ein Mobilgerät mit Internetzugang reicht völlig aus.

1.2. Motivation

Die effektive Zeitverteilung, die Möglichkeit einer wirksamen Kommunikation innerhalb eines Teams, unabhängig davon, wo sich die Mitglieder in diesem Moment befinden, die Frage, wie viele Menschen am Projekt arbeiten, die Verteilung von Pflichten und die Einzelaufgaben: Das sind die Komponenten, ohne die es schwierig ist, in der modernen Welt wirksam gemeinsam an einem Projekt zu arbeiten.

Zur optimalen Organisation einer effizienten Arbeit mit zahlreichen Kunden soll in der Communication & Design Werbeagentur (WCD) eine Task-Manager- Webapplikation^[3] entwickelt und auch prototypisch umgesetzt werden.

Folgende Problematik ergibt sich dabei: Die klassischen Instrumente zur Aufgabenplanung, wie Terminkalender oder Notizbücher, sind in modernen Unternehmen schnell veraltet; die einfache Eingabe von Informationen über den Outlook-Kalender ist für eine effektive Planung und Durchführung von Aufgaben meistens ebenfalls nicht ausreichend. Im Internet existieren heut-zutage viele Möglichkeiten zur Lösungen der dargestellten Problematik; einige von ihnen sind in der Regel weit verbreitet. Allerdings müssen Programmierer häufig eine zusätzliche spezifische Funktionalität in den Anwendungen implementieren, um die Applikationen dem Firmenbedarf anzupassen. Das heißt, es muss ein System entwickelt werden, das es Firmen erlaubt, eigene Datenbanken anzuschließen. Dadurch verschafft man sich einen Überblick über die aktuellen Aufgaben und zugehörigen Projektbearbeiter in der Firma, ferner werden Beschäftigung und Effektivität der Firmenmitarbeiter optimiert. Bereits bei der Entwicklung durch die Verwendung entsprechender Standards wird versucht, eine größtmögliche Betriebssystem- und Browserunabhängigkeit zu erreichen.

Hauptziel der vorliegenden Bachelorarbeit ist die Entwicklung und physische Realisierung einer plattformübergreifenden Lösung, die die Aufgabenverwal-tung und das Projektmanagement im Unternehmen optimieren soll. Die Bedeutung der Arbeit und die Aktualität des vorliegenden Themas werden sich über die Produktivität der Nutzung der Entwicklungsergebnisse rechtfertigen.

1.3. Aufbau der Arbeit

Die Struktur der vorliegenden Bachelorarbeit entspricht der typischen Arbeitsteilung von Webdesignern und Webprogrammierern bei der Erstellung von Webapplikationen. Meine Bachelorprojektaufgaben bestehen in:

- Der Durcharbeitung der Konzeption,
- der Frontend-Implementierung,
- der Realisierung der Verbindungen zu Datenbanken,
- einem Usabilitytest und Abgabe des fertigen Produkts.

Mit der Einrichtung des Backends, der Implementierung von Datenbank und dem Systemtest befasste sich ein anderer angestellter Programmierer der Firma. Dieser Teil des Projekts wird in der Bachelorarbeit nicht erwähnt.

Da für die Projektrealisierung die neuesten Webtechnologien zum Einsatz kommen, wird zunächst in Kapitel II ein Überblick über moderne Webtools gegeben, auf deren Basis die Tasktool-Webapplikation entwickelt wurde. Nach der Erläuterung der technischen Grundlagen geht man auf die eigentliche Bachelorprojektarbeit ein. Kapitel III stellt die Projektstruktur vor sowie die Prob-lematik der Aufgaben und die Hauptwege ihrer Lösung. In Kapitel IV wird das Design der Webapplikation unter Beachtung von Usability-Vorgaben entworfen und umgesetzt. Kapitel V beschreibt die Umwandlung des statischen Temp-lates zur dynamischen Anwendung in den ausgewählten Webtechnologien. Der Programm-Quellcode beinhaltet die Frontend-Backend Kommunikation. Alle Arbeiten auf dem Server: Backend-Implementierung, Erstellung von Daten-banken hat der angestellte Programmierer der Firma WCD übernommen. Die Testphase ist der nächste Schritt der Entwicklungsarbeiten und wird in Kapitel VI dargestellt. Am Schluss werden in Kapitel VII ein Fazit der Bachelorarbeit gezogen und ein Vorschlag auf zukünftige Aufgaben gemacht.

II. Übersicht über die aktuellen Webentwicklungswerkzeuge

2.1. HTML5 und CSS3

Die Technologien HTML5 und CSS3 sind die Grundlagen für die Next-Generation Webanwendungen. Sie sind nach Brian und Hogan „mehr als lediglich zwei neue Standards, die vom World Wide Web Consortium (W3C) und seinen Arbeitsgruppen vorgeschlagen wurden“. Das ist der nächste Schritt im Hinblick auf die Webtechnologien, die dabei helfen sollen, bessere und modernere Webanwendungen zu entwickeln. Vgl. [Hogan, 2011, S. 9].

HTML5 und CSS3 brachten eine Vielzahl neuer Funktionen in der Web-Entwicklung und im Web-Design. In Bezug auf die Strukturierung der Organi-sation eines Web-Dokuments sind HTML5-Funktionen weniger kompliziert und ihr Quellcode ist übersichtlicher. Franke und Ippen weisen auf neue seman-tische Komponenten^[4] hin, wie header, section, nav, aside, article, footer. Sie können anstelle von Div-Containern der Version HTML 4.0 verwendet werden.

Die Input-Elemente wurden um verschiedene Typen erweitert, so zum Beipiel um "password", "datetime", "number", was eine automatische Validierung der Daten in Formularfeldern ohne Skript mit regulären Ausdrucken^[5] erlaubt. Vgl. [Franke, 2012, S. 40].

Neue Typen von Eingabefeldern werden noch nicht von allen Browsern unterstützt, aber trotzdem korrekt angezeigt. Wenn dem Browser zum Beispiel ein Eingabefeldtyp unbekannt ist, ersetzt er es mit einem einfachen input type = "text".

CSS3 bietet erhöhte Flexibilität für die Darstellung des Webseiteninhalts. Nach [Murphy, 2012, S. 236] sind die wichtigsten CSS3-Neuerungen:

- Erstellen von Div-Elementen mit abgerundeten Ecken;
- Erstellen von radialen und linearen Farbverläufen (für das flexiblere Hintergrundbild);
- Hinzufügen von Schlagschatten auf die Div- und Textelemente;
- Integrierung von beliebigen Schriftarten (ohne die Schrift als Grafik zu speichern);
- Erstellen von Animationen und Überblendungseffekten;
- verschiedene Farbdarstellungen und vieles mehr.

Der einzige Nachteil bei der Verwendung der neuen Standards CSS3 und HTML5 ist die schwache Unterstützung durch ältere Browser.

Es ist sehr wichtig, vor der Erstellung einer Webseite oder Webapplikation die aktuellen Statistiken dahingehend zu untersuchen, welche Browser überhaupt die Anweisung von CSS3 und HTML5 unterstützen (Abbildung II.1.).

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.1. Überblick über die Browserunterstützung der CSS3 Funktionen vom 3.10.2013

Quelle: Norman's Blog, 2013, Zugriff am 6.11.2013

Auf der Webseite www.webmasterpro.de bekommt man einen Überblick über die aktuelle Verteilung der Browser auf dem Markt (Abbildung II.2.).

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.2. Meistbenutze Browserversionen in Deutschland über einen Zeitraum von 7 Tagen

(November 2013).

Quelle: Webmasterpro, 2007, Zugriff am 9.11.2013

Wenn man die vorliegende Statistik für den November 2013 betrachtet, fällt auf, dass mit Abstand an erster Stelle mit 27,7% Mozilla Firefox 24.0 liegt. Die neueste Version 25.0 von Firefox wird dabei allerdings nur von 8,4% der Surfer benutzt. An zweiter Stelle liegt der Browser Chrome 30.0, bei dem der Nutzeranteil 15,6% beträgt. Die weniger häufig genutzten Browser mit einem gesamten Anteil von unter 5% sind Internet Explorer, Safari, Opera und Chrome.

Aus den Daten der Grafik kann man schließen, dass man die neuen Webtechnologien, wie HTML5 und CSS3, für den Desktop-Browser nur teil-weise anwenden kann. Die marktführende Browser Mozilla Firefox und Chrome gewährleisten zwar eine ziemlich gute CSS3-Unterstützung, man darf aber nicht die Benutzer, die den Internet Explorer 8 verwenden, außer Acht lassen. Safari und Opera basieren auf derselben Technologie wie Mozilla Firefox, deswegen wären für diese Browser ohnehin keine Anpassungen erforderlich.

Im Gegensatz zu Desktopbrowsern sind auf mobilen Geräten nur moderne Web-Browser installiert. Das erlaubt eine schnellere Integration von HTML5 und

CSS3. Sie überholen die Desktopbrowser in der Funktionalität und Realisierung

dieser Standards. Vgl. [Franke, 2012].

2.2. JavaScript. DOM

JavaScript ist eine Skriptsprache und ermöglicht es, Web-Seiten interaktiver und funktionaler zu gestalten. Es ist eine objektbasierte Programmiersprache, entwickelt von Netscape für die Erstellung von interaktiven HTML-Dokumenten, die sowohl auf der Client- als auch auf der Serverseite funktionieren.

Powers listet die wichtigsten JavaScript-Anwendungsgebiete wie folgt auf:

- Dynamische Erstellung der Dateien mithilfe eines Skripts;
- operative Validierung der Benutzereingaben von ausfüllbaren Formularfeldern in HTML vor der Übergabe an den Server;
- Erstellen von dynamischen HTML-Seiten, zusammen mit Cascading Style Sheets und dem Document Object Model;
- Interaktion mit dem Benutzer und dem Browser.

„Ein konsistentes zu Grunde liegendes Objektmodell“ wurde vom W3C Team zusammen mit allen Browserherstellen geschaffen [Powers, 2007, S. IX-208]. Das Document Object Model (DOM) nach W3C-Definition ist eine plattform- und sprachunabhängige Schnittstelle, die einen dynamischen Zugriff und eine Änderung von Inhalt, Struktur und Design des Webdokumentes erlaubt. Vgl. [W3C, 1997-2005, Zugriff am 5.12.2013].

Das Objektmodell kann zu jedem HTML-Dokument angewendet werden. Das heißt, man kann jedes HTML-Dokument, als DOM-Baum darstellen. Jeder Knoten eines solchen Stammbaums stellt ein Dokument-Element dar, sein Attribut, seinen Text, seine Grafik oder jede andere Art von Objekt. Manche Knoten können „Eltern“ von den anderen sein und zugleich „Kinder“.

Betrachten wir ein Beispiel von einem HTML-Dokument (Quellcode II.1.):

Abbildung in dieser Leseprobe nicht enthalten

Quellcode II.1. Beispiel eines HTML-Dokuments

Quelle: Vgl. [Powers, 2007, S. 220]

Diesem Beispiel entspricht folgender DOM-Baum in der Abbildung II.3.:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.3. Hierarchie der Elemente in einer Webseite

Quelle: Vgl. [Powers, 2007, S. 220]

Jeder Knoten enthält Eigenschaften, die die Struktur des Dokuments reflektieren. Das eröffnet die Möglichkeit, durch den Baum zu navigieren. Vgl. [Powers, 2007, S. 220].

2.3. Ajax

AsynchronousJavascriptandXML (Ajax) ist nach [Lubkowitz, 2007, S. 457] ein Konzept des Datenaustauschs zwischen Webbrowser und Server. So kann man die Daten auf der Webseite schnell und einfach aktualisieren, ohne die Seite neu zu laden. Beispiele für den Einsatz dieser Technologie in Web-anwendungen sind: Autovervollständigungsfelder (Google Suggest), Laden der Landkarte im Hintergrund (Google Maps), serverseitige Programmzugriffs-kontrolle. Ferner wird das Ajax-Modell einer Web-Anwendung im direkten Ver-gleich mit dem klassischen Modell abgebildet (Abbildung II.4.):

Abbildung in dieser Leseprobe nicht enthalten

Abbildung II.4. Das Modell einer traditionellen Webanwendung (links) im Vergleich mit einer Ajax-Webanwendung (rechts).

Quelle: Vgl. [Wikipedia, 2012, Zugriff am 8.11.2013]

Die asynchrone Kommunikation mit dem Server verläuft in folgenden Schritten:

1. Erfassen und Aufbereitung von Informationen, um die Anforderung an
den Server zu senden;
2. Instanzieren eines XMLHttpRequest-Objekts;
3. Einstellung einer Event-Handler-Funktion onreadystatechange:
dieses Event findet bei jeder Änderung des Status des XMLHttpRequest-Objekts statt;
4. Öffnen einer Verbindung mit der Angabe der Parameter GET oder
POST, Server URL, Flag des asynchronen Modus sowie des Benutzernamens und des Kennworts (falls erforderlich);
5. Senden der Anfrage;
6. Verarbeiten der Antwort.

Das ursprüngliche Konzept von AJAX wurde mit Einsatz von XML entwickelt. Die Daten müssen dabei aber nicht unbedingt im XML-Format vorhanden sein. Obwohl das eine bewährte Technologie mit einer großen Anzahl von Anwendungen ist, ist der Nutzen des JSON-Formats höher. Dieses Format ist kompakter und seine Interpretation ist weniger aufwändig. Vgl. [Lubkowitz, 2007, S. 461]. Franke und Ippen weisen darauf hin, dass man „von fremden Webservern Daten nur im JSON-Format, also einer Art JavaScript-Array abru-fen (kann)“ [Franke, 2012, S. 98], was ein herausragend wichtiges Feature für den Webentwickler ist.

2.4. Javascript Framework jQuery

jQuery ist nach der Definition von [Franke, 2012, S. 88] eine Klassenbibliothek für JavaScript, also eine Sammlung vorgefertigter Werkzeuge und Funktionen, die die grundlegende Funktionalität der interaktiven Website realisieren.

Heutzutage gibt es unzählige Javascript-Bibliotheken: Sie vereinfachen den Javascript-Quellcode, kapseln benötigte Funktionalität^[6] und erleichtern damit die Browserkompatibilität. Die meisten von ihnen haben allerdings einen großen Nachteil: die Dateigröße, was bei der Erstellung einer Web-Anwendung eine sehr wichtige Rolle spielt.

Im Gegensatz zu vielen anderen JavaScript-Frameworks ist jQuery eine sehr kompakte JS-Bibliothek. Das Framework zieht dank seiner bequemen und ein-fachen Funktionen die Aufmerksamkeit einer Menge von Webentwicklern der ganzen Welt auf sich. Vgl. [Webstandarts, 2008, Zugriff am 20.11.2013].

Das Framework wurde ursprünglich von John Resig im Jahr 2006 entwickelt und als eine kostenlose Open-Source-Software unter der MIT-Lizenz veröffent-licht.

Die jQuery-Bibliothek erlaubt das Navigieren durch die DOM-Struktur eines Web-Dokuments, das dynamische Einfügen und Löschen der DOM-Elementen, während der Programmausführung, und das Bearbeiten von Ereignissen (beim Mausklick, Betätigen der Tastaturtasten, nach einem gewissen Zeitablauf des Timers) [Franke, 2012, S. 88]. Das Arbeiten mit jQuery kann man in zwei Typen unterteilen:

- Selektieren von Objekten mit $()-Funktion. Mit dem CSS-Selektor als Parameter kann man zum Beispiel auf alle HTML-Elemente zugreifen, die dieses Kriterium erfüllen und weiterhin damit arbeiten mithilfe von jQuery-Objektmethoden. Wenn die Methode keinen Rückgabewert beinhaltet, gibt es einen Verweis auf das jQuery-Objekt, was den Aufruf einer Reihe von Methoden entsprechend dem Interface-Konzept erlaubt;
- Aufruf von globalen Objektmethoden.

Eine sehr wichtige Eigenschaft von jQuery ist die Durchführung und Vereinfachung von AJAX-Funktionen. Die jQuery-Bibliothek verfügt über eine Reihe von Methoden, zum Beispiel getJSON() und parseJSON(), die die Abfrage von JSON-Daten via AJAX vereinfachen. Ein simpler AJAX-Request^[7] mit jQuery besteht nur aus einer Codezeile und ist für die Verwendung mit alten und neuen Versionen von Browsern optimiert. Vgl. [Franke, 2012, S. 98].

2.4.1. jQuery UI

jQuery UI ist als Teil des jQuery-Projekts eine JavaScript-Bibliothek zum ein-fachen Erstellen von User-Interfaces für die Web-Anwendungen. Sie zeichnet sich durch eine große Auswahl von Widgets^[8], visuellen Effekten und Anima-tionen aus.

Mit Hilfe von jQuery UI wird das Erstellen von Elementen, wie zum Beispiel Datepicker, Akkordeon-Menü oder Tooltip, leicht umgesetzt durch Eingabe einer entsprechenden Funktion und ohne den Anschluss zusätzlicher Skripte. In diesem Fall kann das Aussehen des ausgewählten Elements aus schon be-stehenden Themen ausgesucht werden, aber auch eine Modifikation des Designs ohne viel Aufwand ist möglich.

2.4.2. jQuery Mobile

Auf der Basis von jQuery und jQuery UI wurde jQuery Mobile erstellt. jQuery Mobile ist ein bequemes JavaScript-Framework, das die Erstellung von Web-Anwendungen und Websites für mobile Geräte, meistens mit Touch-Interface, vereinfacht. Einfach zu bedienen: Dies ist nach Reid einer der wichtigsten Vorteile von jQuery Mobile, da die meiste Arbeit zur Erstellung einer Webapplikation ohne den Ansatz von JavaScript geschieht, aber mit HTML5.

Jedes moderne Tablet und Smartphone unterstützt jQuery Mobile einschließlich Betriebsystemen wie IOS, Android, Chrome, Firefox, BlackBerry und Symbian.

Die wichtigsten Merkmale eines Frameworks sind:

- Kostenlos erhältlich als Open Source;
- Plattform- und Browser-Kompatibilität;
- die Benutzeroberfläche ist für Touch-Geräte optimiert;
- anpassbares Design;
- AJAX-Aufrufe werden automatisch vorgenommen, um dynamische Inhalte zu laden;
- kleine Programmspeicher der Größe bis 12 KB. Vgl. [Reid, 2011,

S. IX ff.]

III. Anforderungsanalyse und Konzeption

3.1. Projektstruktur

Die Projektorganisation ergibt sich aus den die Projektphasen (Abbildung III.1.). Sie entsprechen dem klassischen sequentiellen Vorgehensmodell zur Softwareentwicklung^[9].

Abbildung in dieser Leseprobe nicht enthalten

Abbildung III.1. Softwareprojektstrukturplan

Quelle: eigene Abbildung

In der ersten Phase wird eine Analyse von funktionalen und nicht funktionalen Anforderungen, sowie eine Analyse der Anwendungsfälle durchgeführt. Ausge-hend von dieser Analyse, wird weiter sowohl die Strukturierung des Inhalts (Content) als auch ein geeignetes Design der Webapps erarbeitet. Danach wird das gewählte Konzept technisch umgesetzt und die Anwendung wird getestet. Schließlich wird die Webapplikation in dem Unternehmen eingesetzt oder bei Bedarf weiterentwickelt.

3.2. Ist-Analyse

Zu Begin der Bachelorprojektarbeit wurde eine Bestandsaufnahme in der Firma durchgeführt, um die gesammelten Erfahrungen mit der aktuell verwendeten Software zu analysieren und die Hauptprobleme bei ihrer Anwendung zu identifizieren. Die ermittelten Informationen wurden in den Soll-Anforderungen berücksichtigt.

Bis jetzt wurde in der Firma WCD überwiegend die Webapplikation „Wunderlist“^[10] für die Aufgabenverwaltung genutzt. Nach der systemischen Betrachtung der Anwendung präsentiert sich die Software als sehr aufgeräumt und übersichtlich. Sie ist ein einfacher Aufgabenplaner ohne überflüssige Features.

Nach Gesprächen mit Mitarbeitern der Firma wurde folgendes Fazit gezogen: Der Fokus der Applikation liegt eindeutig auf der Optik und weniger auf der Funktionalität. So ist es zum Beispiel unpraktisch, dass im Notizenfeld hinzugefügte Links nicht als solche verwendet werden können, sondern lediglich als Textinhalte vorliegen. Hinsichtlich der Fälligkeit lässt sich zwar ein Datum, nicht aber eine Uhrzeit zuordnen. Erfahrungsgemäß ist das Anlegen neuer Task per E-Mail im Programm nicht ganz verlässlich. In manchen Fällen wird die Task nicht übernommen. Es besteht keine Möglichkeit, eine Übersicht nur über die eigenen Aufgaben zu bekommen; genauso ist es nicht möglich, anderen Mitarbeitern eine einzelne Aufgabe zuzuordnen. Dafür benötigt man die Freigabe der ganzen Liste, wobei man die Änderungsrechte weitergibt, was in vielen Fällen sehr nachteilig ist.

Es lässt sich feststellen, dass die Webapplikation kein passendes Tasktool für die Projektverwaltung ist, sie ist mehr für den täglichen Bedarf geeignet. Die Firma benötigt eine personalisierte Anwendung, individuell an die eigenen Mitarbeiter und Kundendatenbanken angepasst.

[...]

---

^[1] Die Online-Enzyklopädie Wikipedia erläutert den Begriff Applikation wie folgt:

„Im deutschen Sprachraum wird die Abkürzung App seit dem Erscheinen des iOS App Store (2008) fast ausschließlich mit mobiler App gleichgesetzt, also Anwendungssoftware für Mobilgeräte wie Smartphones und Tablet-Computer. Allerdings wird inzwischen auch teilweise Desktop- Anwendungssoftware App genannt...“

^[2] Standardmäßig in jedem Betriebssystem enthalten

^[3] folglich auch Tasktool genannt

^[4] Das Prinzip des semantischen Webs (oder auch Web 3.0) ist es, die vorliegenden Informationen nicht nur nach ihrer Hierarchie, sondern vielmehr nach ihrer inhaltlichen Bedeutung zu unterscheiden. [Franke, 2012, S.39]

^[5] eine Zeichenkette, die der Beschreibung von Mengen von Zeichenketten mit Hilfe bestimmter syntaktischer Regeln dient [Wikipedia2, 2013, Zugriff am 7.12.2013]

^[6] Datenkapselung bezeichnet man in der Programmierung das Verbergen von Daten oder Informationen vor dem Zugriff von außen. Vgl. [Wikipedia, 2013, Zugriff am 8.11.2013]

^[7] Server-Anfrage im Hintergrund

^[8] vorprogrammierte Lösungen für Webentwickler

^[9] einschließlich die Entwicklung der webbasierten Applikationen

^[10] www.wunderlist.com/de/