Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876)...
-
Upload
amalric-bolander -
Category
Documents
-
view
106 -
download
0
Transcript of Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876)...
Organize like a pro!Hannes Schurig (790790) Karin Lampesberger (792124)Dustin Wulf (798876) Rebecca Ritter (792118)
Proganizer.de – Projekte organisieren
Gliederung• Projektvorstellung• Zielsetzung• Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick
Projektvorstellung
• Online-Applikation
• Organisation von Projekten
• Vereinigung Dropbox, Trello und Facebook
So einfach wie möglich!
Gliederung Projektvorstellung• Zielsetzung• Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick
Bis auf Kommentare, keinerlei Art der direkten
Kommunikation
Stand der Dinge zu Beginn
Login und Registrierung
ToDo‘s anlegenToDo-Kategorien
anlegen
Filemanager Dateien Up-/-download
ToDo‘s Benutzern zuordnen
Eigenschaften von Dateien anzeigen
Profilbild ändern
Projekte anlegen
Nutzer einladen
!
Zielsetzung (Exposé)
MUSS-Kriterien KANN-Kriterien ABGRENZUNGS-Kriterien
Chat Sidebar, private Nachrichten Benutzerrollen
Synchronität Kontakte Suchfunktion
E-Mail-Benachrichtigungen Detailliertes Benutzerprofil Baumstruktur Filemanager
Designüberarbeitung Video-Chat Gamecharakter (Spielelemente, Erfahrungslevel etc.)
Kalender
ToDo-Sortierung
Multiup-/-download FilemanagerNutzen von Proganizer um
Proganizer zu erweitern!
Stand der Dinge zum Ende
Login und Registrierung
ToDo‘s anlegenToDo-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
DesignKontaktformular
Gliederung Projektvorstellung Zielsetzung• Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick
Zeitplanung
ToDo-Bereich, Mailbenachrichtigungen, Sidebar
09.04
DesignEinarbeitung Socket.ioBugfixes
07.05
ChatChat-Raum-HandlingKontaktformularSidebarBenutzerprofil
18.06
SynchronitätBugfixesVerfeinerungen
23.07
Zeitplanung
Gliederung Projektvorstellung Zielsetzung Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte
• Ausblick
Umsetzung - Verantwortlichkeiten
Hannes
Karin
Dustin
Rebecca
MailbenachrichtigungenProfileinstellung
KontakteChatPrivate NachrichtenSynchronität
ToDo-ManagementSeitendesign
Kontaktformular
SidebarÜber UnsInteressen
Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte
• Ausblick
Umsetzung
Design
Umsetzung – Startseite
• Kopfbereich (Logo + Registrierung)• Schnellübersicht• Auflistung der Funktionen von Proganizer
Umsetzung – Kontaktformular
• Bei Fragen oder Anmerkungen• E-Mail wird an alle geschickt!
Umsetzung
ToDo-Neuerungen
Umsetzung – Usability
• Button zum direkten Erstellen von ToDo’s zu bestimmter Kategorie
Umsetzung – Usability
• Alle Eigenschaften
bearbeitbar in einem Popup
Umsetzung – Usability
• To-Do-Kategorien ein- & ausklappbar
Umsetzung – Usability
• Menüpunkte “Meine Todos” – “Alle Todos”
Umsetzung – Usability
• Bearbeiter einer ToDo (Frei, Alle, bestimmte Bearbeiter)• Höchstens so viele Bearbeiter möglich, wie
Projektmitglieder
Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte
• Ausblick
Umsetzung
ProBar
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
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
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
Umsetzung – ProBar• Emoticons• Verwendung Node Modul: npm install emoticons
Zugriff auf Modul
HTML-Text der Nachricht wird ersetzt
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
Umsetzung – ProBar• Responsive Design Höhen berechnen:
Beispiel: Sidebar komplettFensterhöhe – Menühöhe
On resize-Funktion neu berechnen!
Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick
Umsetzung
Chat
Umsetzung – Chat
• Technologie: Socket.io JavaScript Framework zur bidirektionalen, event-gesteuerten Kommunikation in Echtzeit zwischen Server und Client
Client
Client Server
Server
Umsetzung – Chat
• Gruppenchat Innerhalb eines Projekts Projekt-ID als Chat-Raum Anmeldung der Clients Senden der „History“ Zufällige Nutzer-Farben
Umsetzung – Chat
• Privater Chat Auch außerhalb eines Projekts Nutzernamen als Chat-Raum Anmeldung der Clients Senden der „History“ Zufällige Nutzer-Farben
Umsetzung
Synchronität
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
Umsetzung – SynchronitätServer
Client
Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität• Profil – Mails – Kontakte• Ausblick
Umsetzung
Profil
Umsetzung – Profil• Interessen bearbeiten und löschen
Umsetzung – Profil
• Erweiterung der Profilinformationen um persönliche Angaben
Umsetzung – Profil
• Einfaches Hinzufügen neuer Infos/Einstellungen
Umsetzung – Profil
• Dynamisches, verallgemeinertes Speichern/Laden
Umsetzung – Profil
• Dynamisches, verallgemeinertes Speichern/Laden
Umsetzung – Profil
• Dynamisches, verallgemeinertes Speichern/Laden
Umsetzung – Profil
• Kontaktliste mit Kontakten für den schnelleren Zugriff
Umsetzung – Profil
• Persönliche Informationen anderer Nutzer
Umsetzung – Profil
• Nutzerbezogene Einstellungen zur Personalisierung der Seite
Umsetzung – E-Mails
• E-Mails im Corporate Design zu verschiedenen Zwecken
Umsetzung – E-Mails
• E-Mails im Corporate Design zu verschiedenen Zwecken
Umsetzung – E-Mails
• regelmäßige E-Mails mit cronjobs
Umsetzung – Code
• ohne Kommentare:app.js: 461 Zeilen routes: 4897 Zeilen Jade: 2482 Zeilen jQuery: 4876 Zeilen CSS: 2178 Zeilen Gesamt: 14894 Zeilen
Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte• Ausblick
Ausblick
„Proganizer ist eines der erfolgreichsten StartUps der letzten Jahre!“ (Business Punk 3/2016)
The End
Vielen Dank für Eure Aufmerksamkeit!