Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876) Rebecca Ritter (792118) Proganizer.de – Projekte organisieren.

Ähnliche Präsentationen


Präsentation zum Thema: "Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876) Rebecca Ritter (792118) Proganizer.de – Projekte organisieren."—  Präsentation transkript:

1 Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876) Rebecca Ritter (792118) Proganizer.de – Projekte organisieren

2 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

3 Projektvorstellung Online-Applikation Organisation von Projekten Vereinigung Dropbox, Trello und Facebook So einfach wie möglich!

4 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

5 Bis auf Kommentare, keinerlei Art der direkten Kommunikation Stand der Dinge zu Beginn Login und Registrierung ToDo‘s anlegen ToDo-Kategorien anlegen Filemanager Dateien Up-/-download ToDo‘s Benutzern zuordnen Eigenschaften von Dateien anzeigen Profilbild ändern Projekte anlegen Nutzer einladen !

6 Zielsetzung (Exposé) MUSS-KriterienKANN-KriterienABGRENZUNGS-Kriterien Chat Sidebar, private NachrichtenBenutzerrollen Synchronität KontakteSuchfunktion -Benachrichtigungen Detailliertes BenutzerprofilBaumstruktur Filemanager DesignüberarbeitungVideo-ChatGamecharakter (Spielelemente, Erfahrungslevel etc.) Kalender ToDo-Sortierung Multiup-/-download Filemanager Nutzen von Proganizer um Proganizer zu erweitern !

7 Stand der Dinge zum Ende Login und Registrierung ToDo‘s anlegen ToDo-Kategorien anlegen Filemanager Dateien Up-/-download ToDo‘s Benutzern zuordnen Eigenschaften von Dateien anzeigen Profilbild ändern Projekte anlegen Nutzer einladen Chat Sidebar mit privaten Nachrichten, Kontakten und Activity Log Synchronität Mailbenachrichtigungen Detailliertes Benutzerprofil Design Kontaktformular

8 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

9 Zeitplanung ToDo-Bereich, Mailbenachrichtigungen, Sidebar Design Einarbeitung Socket.io Bugfixes Chat Chat-Raum-Handling Kontaktformular Sidebar Benutzerprofil Synchronität Bugfixes Verfeinerungen 23.07

10 Zeitplanung

11 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

12 Umsetzung - Verantwortlichkeiten Hannes Karin Dustin Rebecca Mailbenachrichtigungen Profileinstellung Kontakte Chat Private Nachrichten Synchronität ToDo-Management Seitendesign Kontaktformular Sidebar Über Uns Interessen

13 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

14 Umsetzung Design

15 Umsetzung – Startseite Kopfbereich (Logo + Registrierung) Schnellübersicht Auflistung der Funktionen von Proganizer

16 Umsetzung – Kontaktformular Bei Fragen oder Anmerkungen wird an alle geschickt!

17 Umsetzung ToDo-Neuerungen

18 Umsetzung – Usability Button zum direkten Erstellen von ToDo’s zu bestimmter Kategorie

19 Umsetzung – Usability Alle Eigenschaften bearbeitbar in einem Popup

20 Umsetzung – Usability To-Do-Kategorien ein- & ausklappbar

21 Umsetzung – Usability Menüpunkte “Meine Todos” – “Alle Todos”

22 Umsetzung – Usability Bearbeiter einer ToDo (Frei, Alle, bestimmte Bearbeiter) Höchstens so viele Bearbeiter möglich, wie Projektmitglieder

23 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

24 Umsetzung ProBar

25 Umsetzung – ProBar erster Anlauf um Kommunikation mit anderen Nutzern zu betreiben verfügbar auf allen Seiten (Projektoverview | ToDo | Filemanager) rechter Seitenrand um Standard-Usability zu unterstützen und nichts überdecken

26 Umsetzung – ProBar Variante 1: Nur Kontakte (Übersichtsseite) Überprüfung ob Mitglied sich im Projekt befindet oder nicht nur Kontakte sichtbar, welche über Profil hinzugefügt wurden um private Nachrichten zu schreiben

27 Umsetzung – ProBar Variante 2: Chat, Kontakte, Activity Log (in Projekten) Gruppenchat zur Kommunikation im Team zusätzlich Möglichkeit auch weiterhin privat zu kommunizieren Activity Log um aktuelle Änderungen nachzuverfolgen

28 Umsetzung – ProBar Emoticons Verwendung Node Modul: npm install emoticons Zugriff auf Modul HTML-Text der Nachricht wird ersetzt

29 Umsetzung – ProBar Responsive Design wichtig weil: komplette Funktionalität des Chats gescheitert wäre Anpassung an Chrome, Firefox und smaller Displays mit media-Queries Für Displays mit Mindestbreite von ca 250px

30 Umsetzung – ProBar Responsive Design Höhen berechnen: Beispiel: Sidebar komplett Fensterhöhe – Menühöhe On resize-Funktion neu berechnen!

31 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

32 Umsetzung Chat

33 Umsetzung – Chat Technologie: Socket.io  JavaScript Framework zur bidirektionalen, event-gesteuerten Kommunikation in Echtzeit zwischen Server und Client Client Server

34 Umsetzung – Chat Gruppenchat  Innerhalb eines Projekts  Projekt-ID als Chat-Raum  Anmeldung der Clients  Senden der „History“  Zufällige Nutzer-Farben

35 Umsetzung – Chat Privater Chat  Auch außerhalb eines Projekts  Nutzernamen als Chat-Raum  Anmeldung der Clients  Senden der „History“  Zufällige Nutzer-Farben

36 Umsetzung Synchronität

37 Umsetzung – Synchronität Auch hier: Socket.io  Realisiert mittels einer einzigen Funktion „broadcast“  Einbauen dieser Funktion an den Notwendigen stellen  Bereitstellung benötigter Informationen  Durchlaufen der Liste von betroffenen Projektmitgliedern  Vergleich mit Clients, die gerade die sich ändernde Seite sehen können  Benachrichtigen aller betroffenen Clients

38 Umsetzung – Synchronität Server Client

39 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

40 Umsetzung Profil

41 Umsetzung – Profil Interessen bearbeiten und löschen

42 Umsetzung – Profil Erweiterung der Profilinformationen um persönliche Angaben

43 Umsetzung – Profil Einfaches Hinzufügen neuer Infos/Einstellungen

44 Umsetzung – Profil Dynamisches, verallgemeinertes Speichern/Laden

45 Umsetzung – Profil Dynamisches, verallgemeinertes Speichern/Laden

46 Umsetzung – Profil Dynamisches, verallgemeinertes Speichern/Laden

47 Umsetzung – Profil Kontaktliste mit Kontakten für den schnelleren Zugriff

48 Umsetzung – Profil Persönliche Informationen anderer Nutzer

49 Umsetzung – Profil Nutzerbezogene Einstellungen zur Personalisierung der Seite

50 Umsetzung – s s im Corporate Design zu verschiedenen Zwecken

51 Umsetzung – s s im Corporate Design zu verschiedenen Zwecken

52 Umsetzung – s regelmäßige s mit cronjobs

53 Umsetzung – Code ohne Kommentare: app.js: 461 Zeilen routes: 4897 Zeilen Jade: 2482 Zeilen jQuery: 4876 Zeilen CSS: 2178 Zeilen Gesamt: Zeilen

54 Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte Ausblick

55 „Proganizer ist eines der erfolgreichsten StartUps der letzten Jahre!“ (Business Punk 3/2016)

56 The End Vielen Dank für Eure Aufmerksamkeit!


Herunterladen ppt "Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876) Rebecca Ritter (792118) Proganizer.de – Projekte organisieren."

Ähnliche Präsentationen


Google-Anzeigen