Add Timesheet

Storyboard/src/Storyboard.tex

@@ -10,6 +10,7 @@
 \usepackage[a4paper, margin=0.8in]{geometry} % Set the margin and size of a page
 \usepackage[hidelinks]{hyperref} % Remove Boxes around Hyperlinks
 \usepackage{lastpage} % Custom page numbering
+\usepackage{pgfgantt} % Gantt-Tables
 \usepackage{fancyhdr}
 \usepackage{xspace}
 \usepackage{graphicx}
@@ -97,13 +98,24 @@
         Elemente wie Diagramme, oder eigene Formatierungen einfach in das gleiche Dokument eingebunden werden.
     \end{enumerate}
 
+    %Kapitel 2 - Zeitplan
+    \section{Zeitplan}
+    Um einen groben Überblick zu haben über den Fortschritt über das Projekt zu haben, habe ich mir einen Zeitplan
+    in Form eines GANTT-Diagramms erstellt.
+
+    \begin{figure}[h]
+        \centering
+        \includegraphics[width=\textwidth]{media/timesheet}
+        \caption{Grober Zeitplan als GANTT-Diagramm}
+    \end{figure}
+
     \pagebreak
-    %Kapitel 2 - Thema
+    %Kapitel 3 - Thema
     \section{Thema}
 
     Da wir freie Themenwahl hatten, habe ich mich für Curling entschieden.
 
-    %Kapitel 2.1 - Wahl des Themas
+    %Kapitel 3.1 - Wahl des Themas
     \subsection{Wahl des Themas}
 
     Ich habe das Thema Curling ausgewählt, da ich im Winter selbst Curling spiele. Dies tue ich bereits in der
@@ -116,10 +128,10 @@
     meist sehr lustig gestaltet \smiley. Daher habe ich mit diesem E-Portfolio das Ziel, den Besuchern
     die Regeln und die Begrifflichkeiten etwas näher zu bringen.
 
-    %Kapitel 3 - Visualisierung E-Portfolio
+    %Kapitel 4 - Visualisierung E-Portfolio
     \section{Visualisierung E-Portfolio}
 
-    %Kapitel 3.1 - Menüstruktur
+    %Kapitel 4.1 - Menüstruktur
     \subsection{Menüstruktur}
     Als Menü-Navigation habe ich mich für eine Navigation am oberen Teil der Webseite entschieden. Dies ist
     auf den Mockups sehr gut ersichtlich. Darin ist das Logo und natürlich die Navigation in die verschiedenen
@@ -133,7 +145,7 @@
         \caption{Menü auf einem Mobilgerät}
     \end{figure}
 
-    %Kapitel 3.2 - Farbwahl
+    %Kapitel 4.2 - Farbwahl
     \subsection{Farbwahl}
     Um eine Farbauswahl zu treffen habe ich mal simpel nach Farbpaletten im Internet gesucht. Dabei ist mir die Seite
     \url{colorhunt.co} aufgefallen. Diese Webseite lässt User ihre eigenen Farbpaletten hochladen und mit
@@ -163,13 +175,13 @@
 
     \pagebreak
 
-    %Kapitel 3.3 - Mockups
+    %Kapitel 4.3 - Mockups
     \subsection{Mockups}
     Um die Webseite grob zu designen, wollte ich ein Mockup-Programm nutzen. Nachfolgend werde ich Dokumentieren,
     wie ich das Mockup-Programm ausgewählt habe, wie ich die Mockups gestaltet habe und zu guter letzt auch
     die Mockups selbst in die Dokumentation einfügen.
 
-    %Kapitel 3.3.1 - Auswahl des Mockup-Programms
+    %Kapitel 4.3.1 - Auswahl des Mockup-Programms
     \subsubsection{Auswahl des Mockup-Programms}
     Um herauszufinden, welches Mockup-Programm ich während des Storyboards und E-Portfolio verwende, habe ich
     mich im Internet informiert, welche verschiedenen Mockup-Programme dass es gibt. Folgende Programme habe
@@ -210,7 +222,7 @@
     mir neben den Mockups auch die Funktionalität, einen Prototyp zu gestalten. Zudem habe ich durch eine
     Adobelizenz der Schule Xd bereits lizenziert, was bei allen anderen Programmen nicht der Fall ist.
 
-    %Kapitel 3.3.2 - Design der Mockups
+    %Kapitel 4.3.2 - Design der Mockups
     \subsubsection{Design der Mockups}
     Das Design der Mockups war recht einfach. Ich habe zwischendurch Michael gefragt wie das Mockup aussieht. Er kennt
     sich bereits aus dem Betrieb super mit UI's aus, ich habe da leider wenig Erfahrung.
@@ -221,7 +233,7 @@
     \pagebreak
 
     \begin{landscape}
-        %Kapitel 3.3.3 - Mockups
+        %Kapitel 4.3.3 - Mockups
         \subsubsection{Mockups}
 
         Alle Mockups \& Prototypen für Desktop und Mobile können mit folgenden Links abgerufen werden:
@@ -241,7 +253,7 @@
     \end{landscape}
     \pagebreak
 
-    %Kapitel 4 - Bildbearbeitung
+    %Kapitel 5 - Bildbearbeitung
     \section{Bildbearbeitung}
     Bei der Bildbearbeitung habe ich mich dazu entschieden, einen simplen schwarz-weiss Filter auf das Bild
     anzuwenden, und einen Teil des Bildes wieder farbig zu machen.\\
@@ -249,7 +261,7 @@
     152 bereits näher kennengelernt haben.
 
 
-    %Kapitel 4.1 - Bildbearbeitungsmethode
+    %Kapitel 5.1 - Bildbearbeitungsmethode
     \subsection{Bildbearbeitungsmethode}
     Ich habe mich für ein Foto aus der Vogelperspektive entschieden, da ich nur so die gesamte Spielfläche
     auf das Bild bekomme. Fotografiert habe ich dieses mit einer Drohne, da ich andere Kameras nicht so hoch
@@ -304,12 +316,12 @@
     \end{figure}
 
 
-    %Kapitel 5 - Logo
+    %Kapitel 6 - Logo
     \section{Logo}
     Zu einem E-Portfolio gehört natürlich auch ein passendes Logo. In den folgenden Kapiteln werde ich erläutern, was
     die Idee hinter dem Logo ist, wie das Logo designt wurde und wie das Logo aussieht.
 
-    %Kapitel 5.1 - Idee
+    %Kapitel 6.1 - Idee
     \subsection{Idee}
     Die Idee hinter dem Logo ist eigentlich recht simpel. Das Logo soll den Curling-Sport auf einen Blick zeigen. Ich
     persönlich habe dabei an das Curling Haus gedacht, also der Teil des Spielfeldes, in den die Steine gespielt werden.
@@ -317,7 +329,7 @@
     das Eis eingelassen sind, habe ich so den Schriftzug ``Curling'' integriert.
 
     \noindent\begin{minipage}{0.6\textwidth}
-                         %Kapitel 5.2 - Erstellung des Logos
+                         %Kapitel 6.2 - Erstellung des Logos
                  \subsection{Erstellung des Logos}
                  Begonnen habe ich das Logo in Adobe Xd. Dort hatte ich bereits die einzelnen Ringe des Hauses gezeichnet.
                  Diese dienen während dem Spiel der einfacheren Bestimmung der Entfernung der Steine. Diese haben
@@ -377,7 +389,7 @@
         so drehen und verschieben, dass er für mich passt.
     \end{enumerate}
 
-    %Kapitel 5.3 - Fertiges Logo
+    %Kapitel 6.3 - Fertiges Logo
     \subsection{Fertiges Logo}
     Aus GIMP wieder exportiert sah das fertige Logo wie folgt aus:
 
@@ -388,7 +400,7 @@
 
     \pagebreak
 
-    %Kapitel 6 - Technisches Konzept E-Portfolio
+    %Kapitel 7 - Technisches Konzept E-Portfolio
     \section{Technisches Konzept E-Portfolio}
     Da ich mich nicht sehr gut mit Webentwicklung auskenne, möchte ich hier gar nicht zu sehr ins Detail gehen.
     Mein E-Portfolio werde ich aus ganz normalem HTML und CSS zusammenbauen. Evtl. wird JavaScript zum Einsatz kommen,
@@ -397,7 +409,7 @@
     und ist dazu da, Bilder automatisch für das Endgerät zu optimieren und optimal zu skalieren. Damit spare ich mir
     nicht nur Speicherplatz auf dem Webserver, sondern habe auch automatisch immer das optimal-grosse Bild.
 
-    %Kapitel 7 - Reflexion
+    %Kapitel 8 - Reflexion
     \section{Reflexion}
     Das Storyboard selbst ist im Grossen und Ganzen sehr gut von der Hand gegangen. Ich habe sehr früh mit einer
     Grundstruktur gestartet, um genug Zeit für auch andere Arbeiten zu haben. Allerdings ist es gegen Schluss doch
@@ -408,13 +420,13 @@
     durchführt. So kann ich in meinem Format die Dokumentation im ``Code'' schreiben und im kompilierten PDF hat es
     anschliessend schöne Zeilenumbrüche inklusive Bindestrichen.
 
-    %Kapitel 7.1 - Bildbearbeitung
+    %Kapitel 8.1 - Bildbearbeitung
     \subsection{Bildbearbeitung}
     Die Bildbearbeitungsmethode, die ich gewählt habe, ist zugegebenermassen verhältnismässig einfach. Ich finde aber,
     sie passt sehr gut zu diesem Bild und man kann so die Steine toll hervorheben. Wir haben diese Methode bereits im
     Unterricht gehabt, trotzdem musste ich nochmals im Internet nachschauen, wie genau das in GIMP nun geht.
 
-    %Kapitel 7.2 - Logodesign
+    %Kapitel 8.2 - Logodesign
     \subsection{Logodesign}
     Das Logo war eine schwierige Entscheidung für mich. Da ich mich absolut nicht auskenne mit Logos, aber auch nicht
     einfach ein existierendes ändern wollte, hatte ich Probleme bei der Ideenfindung. Ich habe mich dann aber zuletzt