diff --git a/Dokumentation/src/Dokumentation.tex b/Dokumentation/src/Dokumentation.tex index 1996ef5..0f35378 100644 --- a/Dokumentation/src/Dokumentation.tex +++ b/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 - -Tailwindcss für Styling + Um Skizzen auf der Webseite zu erstellen habe ich Adobe Xd verwendet. Dies aus zwei Gründen: + \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 - -Vite als Dev-Server - -Vite-Plugin für Handlebars + Um bei mir lokal zu entwickeln, Plugins einzubinden und die Webseite zu compilen habe ich den Node Package Manager (NPM) verwendet. + Zudem hat Timo mir \"Vite\" als Entwicklungsserver empfohlen, dieser recompilt die Seite automatisch nach jedem speichern des Files. + 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 diff --git a/Webauftritt/eportfolio/public/example_rule.png b/Webauftritt/eportfolio/public/example_rule.png deleted file mode 100644 index 441eed4..0000000 Binary files a/Webauftritt/eportfolio/public/example_rule.png and /dev/null differ diff --git a/Webauftritt/eportfolio/public/rules/FGZ.svg b/Webauftritt/eportfolio/public/rules/fgz.svg similarity index 100% rename from Webauftritt/eportfolio/public/rules/FGZ.svg rename to Webauftritt/eportfolio/public/rules/fgz.svg