Add Technologiebeschreibung

documentation/parts/frontend.tex

@@ -1,8 +1,25 @@
 \chapter{Web-Frontend}
 	\section{Technologiebeschreibung}
-		\subsection{Vuejs}
+		\subsection{Vue.js}
+		Vue.js ist ein Javascript Framework, welches den Aufbau von Frontend Anwendungen erleichtert. Ein Hauptmerkmal hierbei ist die Kapselung der einzelnen Elemente in Komponenten, welche ihren eigenen HTML, Javascript und CSS code enthalten. Eine Komponente kann mehrere andere Komponenten einbinden, sowie diesen Daten mitgeben. Eingebundene Komponenten können an die übergeordnete Komponente Daten senden.
 		\subsection{Vuetify}
+		Vuetify ist ein Designframework für Vue.js, dass viele Elemente wie Menüleisten, Buttons und Dialogfenster bereitstellt. Ein bekanntes äquivalentes Framwork ist Bootstrap. Das Designschema von Vuetify ist an Googles Material Design angelehnt. Nach Installation können die Elemente sehr einfach eingebunden und verwendet werden. 
 	\section{Farbschema und Designsprache}
+	Wir haben uns für die, von Google entwickelte Designsprache, Material Design entschieden. Diese zeichnet sich durch ihre kartenartigen Flächen und dem Gestaltungsstil Flat Design aus. Verwendet werden auch viele Schatten um die materialistisch-physikalische Darstellung zu erzeugen.\\
+	In unserem eigens entwickelten Farbschema haben wir uns für ein dunkles Thema mit Blau als Hauptfarbe entschieden. 
+	\begin{figure}[H]
+	\centering
+	\includegraphics[width=\linewidth/2]{img/frontend/color_sceme.png}
+	\caption{Farbschema}
+	\end{figure} 
+	Unser Logo wurde im abgestimmten Farbschema umgesetzt und stellt die Kombination zwischen einer Stoppuhr und einem Kompass dar. So verbindet das Logo Zeit und Ort welche bei der Verwendung unseres Produkts eine wichtige Rolle spielen.
+	\begin{figure}[H]
+	\centering
+	\includegraphics[width=\linewidth/3]{img/frontend/logo_dark_gt.png}
+	\caption{Logo unserer Anwendung}
+	\end{figure} 
+	
+	
 	\section{Umsetzung}
 		\subsection{Einarbeitung}
 		\subsection{Arbeit mit Dummy-Daten}