Skip to content

Commit

Permalink
Add Timesheet
Browse files Browse the repository at this point in the history
  • Loading branch information
Ramspopoo committed Nov 16, 2022
1 parent 8d06c92 commit 7e470a2
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 19 deletions.
50 changes: 31 additions & 19 deletions Storyboard/src/Storyboard.tex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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:
Expand All @@ -241,15 +253,15 @@
\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.\\
Dafür habe ich GIMP verwendet, welches ein Open-Source Bildeditor ist, welchen wir im Unterricht von Modul
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
Expand Down Expand Up @@ -304,20 +316,20 @@
\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.
Um diesen Ort dreht sich das ganze Spiel. Da auf den sogenannten Rinks (die einzelnen Bahnen) auch oft Werbung in
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
Expand Down Expand Up @@ -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:

Expand All @@ -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,
Expand All @@ -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
Expand All @@ -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
Expand Down
Binary file added Storyboard/src/media/timesheet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7e470a2

Please sign in to comment.