write text for umsetzung webseeite, rename FGZ-Picture, remove example_rule.png

Dokumentation/src/Dokumentation.tex

@@ -82,22 +82,70 @@
 
     %Kapitel 2.1 - Eingesetzte Technologien
     \subsection{Eingesetzte Technologien}
+    Um die Webseite zu erstellen habe ich diverse Technologien eingesetzt. Diese möchte ich in den folgenden zwei Abschnitten erläutern.
 
     %Kapitel 2.1.1 - Basics
     \subsubsection{Basics}
-    -Adobe Xd für Skizzen
+    Um Skizzen auf der Webseite zu erstellen habe ich Adobe Xd verwendet. Dies aus zwei Gründen:
-    -Tailwindcss für Styling
+    \begin{enumerate}
+        \item Ich kann die Assets als SVG exportieren. Diese werden dann nicht allzu gross und können optimal skaliert werden.
+        \item Ich habe bereits das Mockup mit Xd gemacht, daher hatte ich bereits Beispiele darin gezeichnet, welche ich wiederverwenden konnte.
+    \end{enumerate}
+    \\
+    Da ich nicht oft in der Webentwicklung arbeite, hat mir Timo Tailwindcss als Framework fürs Styling empfohlen. Dadurch kann ich vereinfachte
+    und vorgefertigte CSS-Klassen verwenden. Zudem hat es bereits eingebaute Media-Queries, was es einfacher macht, die Webseite responsive
+    zu gestalten.
 
     %Kapitel 2.1.2 - Dev-Server und Plugins
     \subsubsection{Dev-Server und Plugins}
-    -Npm als PackageManager
+    Um bei mir lokal zu entwickeln, Plugins einzubinden und die Webseite zu compilen habe ich den Node Package Manager (NPM) verwendet.
-    -Vite als Dev-Server
+    Zudem hat Timo mir \"Vite\" als Entwicklungsserver empfohlen, dieser recompilt die Seite automatisch nach jedem speichern des Files.
-    -Vite-Plugin für Handlebars
+    Dabei zeichnet er sich dadurch aus, dass er diesen Reload sehr schnell ausführt.\\
+    Um sogesehen Komponenten zu erstellen, habe ich ein Handlebar-Plugin für Vite verwendet. Damit kann ich einzelne kleine Files erstellen,
+    welche dann eine Komponente darstellen. In diese Komponente kann ich dann Variabeln hineingeben, so kann ich in der Komponente auch sehr
+    einfach z.B. den Text mittels Variable von aussen ändern und reduziere den benötigten Code.
 
     %Kapitel 2.2 - Umsetzung Webseite
     \subsection{Umsetzung Webseite}
+    Anfangs war ich etwas verloren in der Umsetzung. Da ich wenig mit Webentwicklung zu tun hatte, wusste ich nicht recht wo ich anfangen sollte.
+    Aber mit der Zeit kam ich gut in den Flow, und lernte auch immer mehr Tricks mit CSS und Tailwind kennen. Während der Umsetzung wurde die Zeit
+    aber auch schnell knapp, wodurch ich einige Abweichungen zum Mockup machen musste. Diese habe ich nachfolgend dokumentiert.\\
+    Ansonsten ging die Umsetzung recht gut vonstatten. Ich habe mir, wenn benötigt, Hilfe von Timo geholt, da er sich in der Webentwicklung wie auch
+    mit Tailwind auskennt.
 
-    %Kapitel 2.3 - Reflexion Webseite
+    %Kapitel 2.3 - Abweichungen Mockup
+    \subsection{Abweichungen zum Mockup}
+    Ich musste aufgrund von knapper Zeit und fehlendem Bild/Videomaterial einige Abweichungen zum Mockup machen. Diese möchte ich hier genauer erläutern.
+
+    %Kapitel 2.3.1 - Seite "How To Play" nicht umgesetzt
+    \subsubsection{Seite \"How to Play\" nicht umgesetzt}
+    Aufgrund von fehlendem Bildmaterial und auch fehlender Zeit um eine Alternative zu suchen / erstellen, habe ich die Seite \"How to Play" nicht umgesetzt.
+    Darauf sollte eigentlich beschrieben sein, wie ein Anfänger mit Curling beginnen soll. Im Nachhinein würde ich mir weniger einzelne Seiten vornehmen, und
+    mir dann auch bereits beim Mockup-Zeichnen genauer Gedanken machen, wie ich die Seite später umsetzen werde.
+
+    %Kapitel 2.3.2 - Seite "Beispiele" umbenannt
+    \subsubsection{Seite \"Beispiele\" umbenannt}
+    Während des Prozesses habe ich gemerkt, dass der Titel \"Beispiele\" für die Seite mit allen Bildern und Videos nicht sehr passend ist. Daher habe ich
+    diese umbenannt auf den Namen \"Impressionen\". Dies passt viel besser zum Inhalt.
+
+    %Kapitel 2.3.3 - Seiten mit Grid statt Banner
+    \subsubsection{Seiten mit Grid statt Banner}
+    Während der Umsetzung habe ich gemerkt, dass ein Banner mit überlappenden Elementen, wie ich es auf vielen Seiten des Mockups hatte, sehr
+    schwierig umzusetzen ist. Es ist dann aber noch schwerer, dieses Banner responsive zu machen. Daher habe ich mich dazu entschieden,
+    diese Elemente mit CSS Grid anzuordnen. So habe ich auch ein behandeltes Thema vom Unterricht in die Webseite eingebunden.
+
+    %Kapitel 2.3.4 - Mobile Home-Page etwas anders gestylt
+    \subsubsection{Mobile Home-Page etwas anders gestylt}
+    Auf Mobile habe ich, statt die Navigationselemente im Banner über- / nebeneinander anzuordnen, diese untereinander angeordnet. Da es, aufgrund
+    der gestrichenen \"How to Play\" Seite nur noch drei Seiten waren hätte es über- / nebeneinander schlecht ausgesehen, und so ist es auch
+    einfacher für mich die Seite responsive zu machen, da ich nur den flex drehen muss.
+
+    %Kapitel 2.3.5 - Logo und Navigation getauscht
+    \subsubsection{Logo und Navigation getauscht}
+    Um auf Mobile gleich auszusehen bzw. die gleiche Ausrichtung zu haben, habe ich die Position von Logo und Menü-Button im Vergleich zum Mockup
+    getauscht. So ist nun das Menü (wie auf Desktop auch) auf der rechten Seite, und das Logo (wie auf Desktop) auf der linken Seite.
+
+    %Kapitel 2.4 - Reflexion Webseite
     \subsection{Reflexion Webseite}
 
     %Kapitel 3 - Video