From faeae5b25c8c9c794a695bf43e6e15d0e7953cf3 Mon Sep 17 00:00:00 2001 From: Tobias Hilfiker Date: Thu, 22 Dec 2022 21:56:18 +0100 Subject: [PATCH] write text for umsetzung webseeite, rename FGZ-Picture, remove example_rule.png --- Dokumentation/src/Dokumentation.tex | 60 ++++++++++++++++-- .../eportfolio/public/example_rule.png | Bin 4513 -> 0 bytes .../public/rules/{FGZ.svg => fgz.svg} | 0 3 files changed, 54 insertions(+), 6 deletions(-) delete mode 100644 Webauftritt/eportfolio/public/example_rule.png rename Webauftritt/eportfolio/public/rules/{FGZ.svg => fgz.svg} (100%) 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 441eed40410fbe8a78c7767d779ab0765a0fdfef..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4513 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 C`Fk+{ 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