Projekthandbuch. Mobiles CIS. Lehrveranstaltung: Projektarbeit 2. Projektauftraggeber: Ansprechpartner: Projektbetreuer:

Transkript

1 Projekthandbuch Mobiles CIS Lehrveranstaltung: Projektarbeit 2 Projektauftraggeber: Ansprechpartner: Projektbetreuer: Fachhoschule St. Pölten Bernhard Brandstetter DI (FH) Klaus Temper! 1!

2 1. Inhaltsverzeichnis 1. Inhaltsverzeichnis Projektteam Änderungsverzeichnis Ausgangssituation und Projektkontext Ansprechpartner Liste der Ziele und Nicht-Ziele Projektauftrag Projektorganisation Projektkommunikationsplan Meilensteinplan Spezifikation Zeitplan... 17! 2!

3 2. Projektteam Name Matr. Nummer Rolle Kontaktdaten Francesco Novy mt Projektleiter und Programmierung 0660/ Stefan Heimann mt Usability und Programmierung 0664/ Aleksandar Palic mt Design und Programmierung 0676/ Desirée Zottl mt Design und Frontend 0664/ ! 3!

4 3. Änderungsverzeichnis Version Datum Änderung Bearbeiter Erstellung Desiree Zottl Anpassungen Desiree Zottl! 4!

5 4. Ausgangssituation und Projektkontext In der Fachhochschule St. Pölten kommt das Campus Informations System (kurz CIS) zum Einsatz, um auf Stundenpläne, Noten, Zahlungen, Anmeldungen zu Freifächern und Prüfungen uvm. zuzugreifen. Das CIS ist eine Webplattform, diese ist allerdings nur am Desktop zufriedenstellend zu betrachten. Da der Zugriff auf das Internet heutzutage vermehrt mit mobilen Geräten mit einer geringeren Bildschirmgröße und -auflösung stattfindet, soll diese Plattform dafür optimiert werden. Mit Absprache des NSC soll die CIS Seite der FH St. Pölten zukünftig mobile Endgeräte erkennen und eine eigene Ansicht für diese generieren. Ein geeignetes User Interface soll dafür ausgearbeitet und umgesetzt werden. Ziel dieser Projektarbeit ist eine webbasierte, mobile Version des CIS, um auch unterwegs darauf mit mobilen Geräten, insbesondere Smartphones, zugreifen zu können. Allerdings soll die mobilen Version nicht als vollwertiger Ersatz zur Desktop Version gelten, nur die wichtigsten Funktionen die für Studenten auch von Unterwegs von großer Bedeutung sind sollen unterstützt werden. Diese umfassen den Zugriff auf den persönlichen Lehrveranstaltungsplan, den Zugriff auf Raum- und Lektorenpläne und die Übersicht der eigenen Noten. Das User Interface Design sowie die Umsetzung in der Programmierung sollen eine spätere Erweiterung der mobilen Funktionen einfach ermöglichen. Zielgruppe sind vor allem Studenten aller Studienrichtungen der FH St. Pölten sowie auch die Lehrbeauftragen, die natürlich auch Zugang zu diesem System haben.! 5!

6 5. Ansprechpartner Name Rolle im Projekt Kontaktdaten NSC - FH St. Pölten Bernhard Brandstetter Klaus Temper Auftraggeber Projektbetreuer bernhard.brandstetter@fhstp.ac.at 02742/ klaus.temper@fhstp.ac.at Francesco Novy Stefan Heimann Aleksandar Palic Desirée Zottl Projektleitung und Programmierung Usability und Programmierung Design und Programmierung Design und Frontend mt101064@fhstp.ac.at 0660/ mt101040@fhstp.ac.at 0664/ mt111102@fhstp.ac.at 0676/ mt101107@fhstp.ac.at 0664/ ! 6!

7 5. Liste der Ziele und Nicht-Ziele Ziele - Erstellung einer kompakten webbasierenden mobilen Version des CIS lauffähig auf Smartphones unter Verwendung moderner Webtechnologien (HTML5/CSS3/JavaScript) - Deviceerkennung - Entwicklung eines benutzerfreundlichen mobilen User Interface - Funktion: Übersicht des persönlichen LV-Plans - Funktion: Zugriff auf Raum- und Lektorenpläne - Funktion: Übersicht der eigenen Noten in den Semestern - Einsatzfähigkeit im Livebetrieb Nichtziele - Änderungen an der bestehenden Desktop-Version - Abbilden anderer Funktionen als die der oben angeführten - Optimierte Version für Tablets - Eine native App! 7!

8 6. Projektauftrag Projektstartereignis: Initialisierungsmeeting Projektendereignis: Projektübergabe Projektstarttermin: Projektendtermin: Projektbegründung: Siehe Kapitel 3 (Ausgangssituation) Gesamtprojektziele: - Erstellung einer kompakten webbasierenden mobilen Version des CIS lauffähig auf Smartphones unter Verwendung moderner Webtechnologien (HTML5/CSS3/JavaScript) - Deviceerkennung - Entwicklung eines benutzerfreundlichen mobilen User Interface - Funktion: Übersicht des persönlichen LV-Plans - Funktion: Zugriff auf Raum- und Lektorenpläne - Funktion: Übersicht der eingen Noten in den Semestern - Einsatzfähigkeit im Livebetrieb Nicht-Ziele: - Änderungen an der bestehenden Desktop-Version - Abbilden anderer Funktionen als die der oben angeführten - Optimierte Version für Tablets - Eine native App Hauptaufgaben (Projektphasen): Projektmanagement Vorbereitung Protoyping Usablility Design Programmierung Fertigstellung Projektauftraggeber: NSC FH St. Pölten Bernhard Brandstetter Projektleiter: Francesco Novy Projektteam: Francesco Novy, Aleksandar Palic, Stefan Heimann, Desirée Zottl (Projektauftraggeber) (Projektleiter)! 8!

9 7. Projektorganisation Projektfunktion Aufgabenbereiche / Skills Name Projektauftraggeber Projektbetreuer Projektleiter Teammitglied Teammitglied Teammitglied Definiert die Aufgabenstellung Ansprechpartner bei Systemfragen Benotung der Lehrveranstaltung Semesterprojekt Unterstützung bei Problemen Abnahme der Projektentscheidungen Einteilung der Aufgaben Controlling Kontakt zum Auftraggeber Programmierung Wireframes & Prototyp Farbschema & Typografie UI Design Frontendprogrammierung Usablility Test & Verbesserungen Programmierung UI Design Programmierung Bernhard Brandstetter DI (FH) Klaus Temper Francesco Novy Desirée Zottl Stefan Heimann Aleksandar Palic! 9!

10 8. Projektkommunikationsplan Bezeichnung Inhalte Häufigkeit Projektkickoff CIS-Einführung Projektjourifx Endabnahme Besprechung der allgemeinen Eckpunkte Einführung in das bestehende System Projektfortschritt, inhaltliche Abstimmungen, allfällige Probleme Präsentation und Endabnahme Einmalig (Anfang Oktober) Einmalig (Anfang November) Wöchentlich Einmalig (Ende Jänner)! 10!

11 9. Meilensteinplan PSP Code Meilenstein Soll Termin Adaptierter Termin Ist Termin 1.2 Projektstart Klickbarer Prototyp Verbesserungen in Prototyp eingebracht Fertiges UI Design Lauffähige Erstversion Release Projektabschluss ! 11!

12 mcis Phase Meilenstein 1. Projektmanagement 2. Vorbereitung 3. Prototyping 4. Usability 5. Design 6. Programmierung 7. Fertigstellung AP 1.1 Projektauftrag erteilen AP 2.1 Einschulung AP 3.1 App Struktur definieren AP 4.1 Zielgruppentest mit Prototypen AP 5.1 Farbschema definieren AP 6.1 Schnittstellen 7.1 Dokumentation AP 1.2 Projektstart AP 2.2 Einarbeitung in das Framework AP 3.2 Wireframes erstellen / verlinken AP 4.2 Verbesserungsvorschläge realisieren AP 5.2 Typographie AP 6.2 LV Plan implementieren 7.2 Live Datenbank Einbindung AP 1.3 Projektkoordination AP 3.3 Klickbarer Prototyp AP 4.3 Verbesserungen in Prototyp eingebracht AP 5.3 Designprozess AP 6.3 Raum- und Lektorenpläne implementieren 7.3 Release AP 1.4 Projektabschluss AP 5.4 Fertiges User Interface Design AP 6.4 Noten implementieren AP 6.5 Frontend Programmierung AP 6.6 Lauffähige Erstversion! 12!

13 11. Spezifikation 1.1: Projektauftrag erteilen AP Inhalte - Aufstellung des Konzepts - Verfassen des Projektauftrags - Bestätigung des Konzepts durch Studiengangs Leitung AP Nicht-Inhalte / Auftragserteilung Novy, Heimann, Zottl, Palic 1.2: Projektstart AP Inhalte - Erste Terminfindungen - Meeting mit Ansprechpartner - Definition des Projektumfangs AP Nicht-Inhalte - Start der Umsetzung Offizieller Start des Projekts Novy, Heimann, Zottl, Palic 1.3: Projektkoordination AP Inhalte - Projektmeetings - Arbeitsverteilung / Zeitmanagement - Projektdokumentation AP Nicht-Inhalte - Technische Umsetzung des Projekts Projektmanagement & Projektcontrolling Novy, Heimann, Zottl, Palic 1.4: Projektabschluss AP Inhalte - Abschluss aller Dokumente - Voll funktionstüchtiges App - Abnahme durch Ansprechpartner AP Nicht-Inhalte / Abgeschlossenes Semesterprojekt Novy, Heimann, Zottl, Palic 2.1: Einschulung AP Inhalte - Meeting mit dem Network Service Center - Einschulung in das CIS Backend - Nähere Informationen zum Framework - Einblick in alle relevanten Funktionen AP Nicht-Inhalte / Alle notwendigen Informationen um mit der Entwicklung anzufangen. Novy, Heimann, Zottl, Palic! 13!

14 2.2: Einarbeitung in das Framework AP Inhalte - Verschaffen eines Überblicks - Testen der existierenden Funktionen - Einblick in eine mögliche API AP Nicht-Inhalte - Erweitern des Systems Alle notwendigen Informationen um mit der Entwicklung anzufangen. Novy, Heimann, Zottl, Palic 3.1: App Struktur definieren AP Inhalte - Aufbau der Menüstruktur - Strukturierung aller Seiten / Abläufe / Verlinkungen - Grobe Liste der zu implementierenden Funktionen AP Nicht-Inhalte - Anfang der Implementation Einigung auf die Struktur & genaue Funktionsweise des Apps. Novy, Heimann, Zottl, Palic 3.2: Wireframes erstellen / verlinken AP Inhalte - Erstellen der Wireframes für alle Pages - Verlinken der Wireframes per Hotspots AP Nicht-Inhalte - Frontend Programmierung Klickbarer Prototyp durch Wireframes und Hotspots Zottl 4.1: Zielgruppentest mit Prototypen AP Inhalte - Testen der Appstruktur (Informationsverteilung) - Testen der Usability (Wireframe Interface) AP Nicht-Inhalte - Sofortige Änderungen während Testphase Liste an Verbesserungsvorschlägen / Auffälligkeiten Heimann 4.2: Verbesserungsvorschläge realisieren AP Inhalte - Eventuelle Änderungen der Appstruktur - Anwenden der Änderungen auf die Wireframes - Eventuell neu-verlinken von Wireframes AP Nicht-Inhalte - Erneuter Zielgruppentest nach der Verbesserung Verbesserungsvorschläge in Prototyp integriert Heimann, Zottl 5.1: Farbschema definieren AP Inhalte - Komposition von verschiedenen Farben - Erstellen von Farbsammlungen (z.b. durch Kuler) - Definition & Verteilung der Farben (Menü, Buttons) AP Nicht-Inhalte - Entwerfen eines völlig neuen Corporate Designs Fertige Farbkomposition für alle App Elemente Zottl 5.2: Typografie! 14!

15 AP Inhalte - Sammlung verschiedener potentieller Schriften - Verteilung der Schriften auf App Elemente - Testen der Schriften durch temporäre Mockups AP Nicht-Inhalte - Erstellen einer eigenen Schrift Sammlung aller zu nutzenden Schriften und Verteilung Zottl 5.3: Designprozess AP Inhalte - Design aller notwendigen Elemente (z.b. Menü, Buttons, Listen) - Anwendung des Farbschemas auf das Design - Anwendung der Schriften auf das Design AP Nicht-Inhalte - Sofortige Frontend Implementation in HTML & CSS Definierte und nutzbare Design-Vorlagen (inkl. alles Elemente) für die spätere Frontend Implementation. Zottl, Palic 6.1: Schnittstellen AP Inhalte - Anbindung der Dummy Datenbank - Recherche für zusätzliche externe Schnittstellen - Testen der Weiterleitung zum App AP Nicht-Inhalte - Aufstellen einer eigenen Datenbank Vorbeireitungen für die kommende Implementation getroffen Novy, Heimann, Palic 6.2: LV-Plan implementieren AP Inhalte - Sammlung aller bereits implementierten, notwendigen Funktionen aus dem Framework - Entwickeln einer angepassten Funktion zum Darstellen von definierten Informationen AP Nicht-Inhalte - Programmieren von völlig neuen Funktionen mit eigenen Datenbank Handlern Mobiles CIS LV-Plan Feature Novy 6.3: Raum- und Lektorenpläne implementieren AP Inhalte - Sammlung aller bereits implementierten, notwendigen Funktionen aus dem Framework - Programmieren von angepassten Funktionen zur Darstellung der Raum- und Lektorenpläne unter Berücksichtigung der Ergebnisse in den Usertests AP Nicht-Inhalte - Programmieren von völlig neuen Funktionen anstatt vorgefertigte aus dem Framework zu verwenden Mobiles CIS Raum- und Lektorenpläne Feature Novy 6.4: Noten implementieren AP Inhalte - Sammlung aller bereits implementierten, notwendigen Funktionen aus dem Framework - Programmieren von angepassten Funktionen zur Darstellung! 15!

16 der Noten im CIS AP Nicht-Inhalte - Programmieren von völlig neuen Funktionen mit eigenen Datenbank Handlern Mobiles CIS Noten Feature Heiman 6.5: Frontend Programmierung AP Inhalte - Erstellen der Frontend Struktur (HTML, CSS, JS) - Umsetzung des Designs ins Frontend - Programmieren der Event-Handler / Animationen - Eventuelle Frontend Schnittstellen zum Backend AP Nicht-Inhalte - Erweiterung des Backends Frontend Implementation des Apps Zottl, Palic 7.1: Dokumentation AP Inhalte - Kommentieren des Codes sowohl im Backend als auch im Frontend - Verfassen einer kleinen API für neu geschriebene Funktionen (Funktionsnamen, Rückgabewerten etc.) AP Nicht-Inhalte / Nachvollziehbarer Code durch Kommentare und eine API für künftige Erweiterungen Novy, Heimann, Zottl, Palic 7.2: Live Datenbank Einbindung AP Inhalte - Ändern der Applikation indem die Dummy Datenbank Verbindung geschlossen wird und stattdessen die Live Datenbank verwendet wird. AP Nicht-Inhalte / Funktionstüchtiges App welches mit Live Daten arbeiten kann Novy! 16!

17 12. Zeitplan! 17!