Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876)...

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

Transcript of Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876)...

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

Organize like a pro!Hannes Schurig (790790) Karin Lampesberger (792124)Dustin Wulf (798876) Rebecca Ritter (792118)

Proganizer.de – Projekte organisieren

Page 2: 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

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

Projektvorstellung

• Online-Applikation

• Organisation von Projekten

• Vereinigung Dropbox, Trello und Facebook

So einfach wie möglich!

Page 4: 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

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

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

!

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

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!

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

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

Page 8: 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

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

Zeitplanung

ToDo-Bereich, Mailbenachrichtigungen, Sidebar

09.04

DesignEinarbeitung Socket.ioBugfixes

07.05

ChatChat-Raum-HandlingKontaktformularSidebarBenutzerprofil

18.06

SynchronitätBugfixesVerfeinerungen

23.07

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

Zeitplanung

Page 11: 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

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

Umsetzung - Verantwortlichkeiten

Hannes

Karin

Dustin

Rebecca

MailbenachrichtigungenProfileinstellung

KontakteChatPrivate NachrichtenSynchronität

ToDo-ManagementSeitendesign

Kontaktformular

SidebarÜber UnsInteressen

Page 13: 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

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

Umsetzung

Design

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

Umsetzung – Startseite

• Kopfbereich (Logo + Registrierung)• Schnellübersicht• Auflistung der Funktionen von Proganizer

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

Umsetzung – Kontaktformular

• Bei Fragen oder Anmerkungen• E-Mail wird an alle geschickt!

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

Umsetzung

ToDo-Neuerungen

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

Umsetzung – Usability

• Button zum direkten Erstellen von ToDo’s zu bestimmter Kategorie

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

Umsetzung – Usability

• Alle Eigenschaften

bearbeitbar in einem Popup

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

Umsetzung – Usability

• To-Do-Kategorien ein- & ausklappbar

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

Umsetzung – Usability

• Menüpunkte “Meine Todos” – “Alle Todos”

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

Umsetzung – Usability

• Bearbeiter einer ToDo (Frei, Alle, bestimmte Bearbeiter)• Höchstens so viele Bearbeiter möglich, wie

Projektmitglieder

Page 23: 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

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

Umsetzung

ProBar

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

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

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

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

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

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

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

Umsetzung – ProBar• Emoticons• Verwendung Node Modul: npm install emoticons

Zugriff auf Modul

HTML-Text der Nachricht wird ersetzt

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

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

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

Umsetzung – ProBar• Responsive Design Höhen berechnen:

Beispiel: Sidebar komplettFensterhöhe – Menühöhe

On resize-Funktion neu berechnen!

Page 31: 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

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

Umsetzung

Chat

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

Umsetzung – Chat

• Technologie: Socket.io JavaScript Framework zur bidirektionalen, event-gesteuerten Kommunikation in Echtzeit zwischen Server und Client

Client

Client Server

Server

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

Umsetzung – Chat

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

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

Umsetzung – Chat

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

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

Umsetzung

Synchronität

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

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

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

Umsetzung – SynchronitätServer

Client

Page 39: 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

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

Umsetzung

Profil

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

Umsetzung – Profil• Interessen bearbeiten und löschen

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

Umsetzung – Profil

• Erweiterung der Profilinformationen um persönliche Angaben

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

Umsetzung – Profil

• Einfaches Hinzufügen neuer Infos/Einstellungen

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

Umsetzung – Profil

• Dynamisches, verallgemeinertes Speichern/Laden

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

Umsetzung – Profil

• Dynamisches, verallgemeinertes Speichern/Laden

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

Umsetzung – Profil

• Dynamisches, verallgemeinertes Speichern/Laden

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

Umsetzung – Profil

• Kontaktliste mit Kontakten für den schnelleren Zugriff

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

Umsetzung – Profil

• Persönliche Informationen anderer Nutzer

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

Umsetzung – Profil

• Nutzerbezogene Einstellungen zur Personalisierung der Seite

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

Umsetzung – E-Mails

• E-Mails im Corporate Design zu verschiedenen Zwecken

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

Umsetzung – E-Mails

• E-Mails im Corporate Design zu verschiedenen Zwecken

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

Umsetzung – E-Mails

• regelmäßige E-Mails mit cronjobs

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

Umsetzung – Code

• ohne Kommentare:app.js: 461 Zeilen routes: 4897 Zeilen Jade: 2482 Zeilen jQuery: 4876 Zeilen CSS: 2178 Zeilen Gesamt: 14894 Zeilen

Page 54: 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

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

Ausblick

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

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

The End

Vielen Dank für Eure Aufmerksamkeit!