Skip to content
This repository was archived by the owner on Sep 18, 2020. It is now read-only.

Design Umsetzung

Patrick Puritscher edited this page Feb 5, 2015 · 69 revisions

← zurück zum Design Wiki

Verantwortlicher: Simon Künnen

In diesem Bereich der Dokumentation wird die Vorgehensweise zur konkreten Umsetzung beschrieben. Es werden Grundlagen/Vorbereitung aufgezeigt, die vor der konkreten Umsetzung bestimmt wurden, um einheitliche und standartisierte Programmierung zu gewährleisten. Mit Hilfe dieser werden die konkreten Module umgesetzt. Des Weiteren wird ein Code-Reviewer bestimmt, der die Verantwortlichkeit für das Einhalten dieser Code-Guideline und das Mergen der einzelnen Module zuständig ist. Die Module werden durch den Teamleiter auf die verschiedenen Teammitgliedern verteilt und ggf. bei Problemen weiterverteilt.


Vorbereitungen

Bevor die Templates konkret entworfen werden, muss sich auf eine Vorgehensweise, Struktur und Aufbauweise geeinigt werden. Dabei wird sich am Markt üblichen Standards orientiert. Grund für diese Vorbereitungen ist es, Funktionsweisen zu garantieren, einheitliches Arbeiten und die Möglichkeit eines einfachen verbindens seperat geschriebener Code-Komponenten zu ermöglichen.

Generell werden für diese Vorbereitungen drei Grunddokumente erstellt.

#####Coding Standards

Im Dokument Coding-Standards werden grundsätzliche Anforderungen an die Programmierweise mit den verschiedenen Sprachen gestellt. Des Weiteren wird die Ordnerstruktur dargelegt, in welcher die verschiedenen Dateien eingebettet werden.

#####Design-Framework

Zum Design Framework (GoHappy-Framework) gehört das Gridsystem, welches eine grundlegende Aufbaustruktur vorgibt und wichtig ist für die Positionierung und Skalierbarkeit der Applikation. Des Weiteren wird bezug auf die Helper-Klasse genommen, welche CSS-Klassen bietet, die die Entwicklung unterstützen und grundlegende Darstellungsoptionen sichert. Das Framework beinhaltet zudem verschiedene Elemente, welche flexibel eingesetzt werden können, ohne dass diese durch andere Container beeinflusst werden.

#####Grundstruktur

In dem Dokument Grundstruktur werden verschiedene Ebenen und Views aus Sicht des HTML-Entwurfs dargestellt.


Umsetzung

Im folgenden wird die konkrete Umsetzung dargelegt. Diese wird anhand der Module aufgeschlüsselt. Jedes Modul hat ein oder mehrere Verantwortliche. Als Codereviewer und Verantwortlicher für die Zusammenführung von Codeelementen wurde Patrick Puritscher bestimmt.

####Module

Framework
Verantwortliche/r: Patrick Puritscher
Beschreibung: Das GoHappy-Framework besteht aus drei Elementen, dem Gradsystem, Helper-Klassen und verschiedenen Elementen.

Grundstruktur
Verantwortliche/r: Patrick Puritscher
Beschreibung:

Sidebar
Verantwortliche/r: Simon Künnen
Beschreibung: Umsetzung des Optionsmenü, welches von der Seite in den Bildschirm fährt. Weiterhin wird dieses Menü als Sidebar beschrieben

Top 7
Verantwortliche/r: Simon Künnen, Patrick Puritscher
Beschreibung: Seite stellt eine explizite Auswahl von 7 Routen zur verfügung, die durch die Redaktion bestimmt wird.

Aktuelle Route
Verantwortliche/r: Simon Künnen, Patrick Puritscher
Beschreibung: Seite stellt die aktuelle Route, welche durch die Filter und Optionen bestimmt wurde, dar.

Navigationsleiste
Verantwortliche/r: Patrick Puritscher
Beschreibung: Die Navigationsleiste basiert vollständig auf dem Element .e__navigation-horizontal

Adminportal
Verantwortliche/r: Simon Künnen
Beschreibung: Im Adminportal können die Bars bearbeitet werden. Das Portal gehört nicht zur direkten Anwendung und wird auch nicht für mobile Devices zur Verfügung stehen.

####Elemente des Frameworks

Popup
Verantwortliche/r: Simon Künnen
Beschreibung: Generelles Popup für Informationen und Eingabemöglichkeiten

Impressum
Verantwortliche/r: Simon Künnen
Beschreibung: View zur Darstellung der rechtlichen Bedingungen zur Nutzung der Applikation

Fehlermeldungen
Verantwortliche/r: Simon Künnen
Beschreibung: Zusammenstellung von Fehlermeldungen im Zusammenhang mit dem Popup

Loading-Overlay
Verantwortliche/r: Simon Künnen
Beschreibung: Overlay welches dem Nutzer darstellt, dass gerade intern gearbeitet wird und Eingaben in der Zeit blockiert.

Startscreen
Verantwortliche/r: Patrick Puritscher
Beschreibung:

Icons
Verantwortliche/r: Patrick Puritscher
Beschreibung: Icons auf Basis von CSS-Elementen und des GoHappy-Iconfonts.

Navigation
Verantwortliche/r: Patrick Puritscher
Beschreibung: Die Hauptnavigation der Applikation (Aktuelle Route, Top 7 & Offline Routen).

Listen
Verantwortliche/r: Sebastian Seitz, Patrick Puritscher
Beschreibung: Liste zur Darstellung der aktuellen Route sowie der Top 7.

Barcard
Verantwortliche/r: Patrick Puritscher
Beschreibung: Barcard zur Darstellung der Barinformationen.

Slider
Verantwortliche/r: Patrick Puritscher
Beschreibung: Einsatz bei der Auswahl verschiedener Barcards.

Rating
Verantwortliche/r: Patrick Puritscher
Beschreibung: Nutzung der Icons .i__euro und .i__star zur Darstellung eines Ratings mit Beschreibung.

weitere Elemente
Verantwortliche/r: Sebastian Seitz, Patrick Puritscher, Simon Künnen
Beschreibung: Weitere kleinere Elemente

Clone this wiki locally