add text for technologies and reflexion and fazit

This commit is contained in:
Tobias Hilfiker
2022-12-22 23:44:55 +01:00
parent 6c9e138421
commit bbc897c94d

View File

@@ -93,21 +93,28 @@
%Kapitel 2.1.1 - Basics
\subsubsection{Basics}
\textbf{Adobe Xd}\\
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}
\\
\end{enumerate}\\
\textbf{Tailwind CSS}\\
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.
%TODO cloudniary!!!!!
zu gestalten.\\
\textbf{Cloudinary}\\
Damit ich auf dem Webserver nicht zu viel Speicher für Medien benötige, habe ich Cloudinary für die Bilder verwendet. Mittels Cloudinary
kann ich zudem die übertragenen Datenmengen reduzieren, indem ich z.B. die Grösse oder Qualität der Bilder reduziere.\\
\textbf{YouTube}\\
Da der Film sehr gross geworden ist, habe ich mich entschieden den Film auf YouTube hochzuladen. Dieser ist nicht öffentlich, sondern nur
über den Link abrufbar. So kann man den Film wirklich nur über die Webseite schauen. Mittels der "Einbetten-Funktion" von YouTube ist
das Einbinden des Videos auch sehr einfach.
%Kapitel 2.1.2 - Dev-Server und Plugins
\subsubsection{Dev-Server und Plugins}
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.
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
@@ -115,7 +122,7 @@
%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.
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
@@ -126,15 +133,15 @@
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.
\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.
\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}
@@ -145,7 +152,7 @@
%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
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
@@ -164,6 +171,7 @@
immer angewendet habe, aber nicht richtig wusste was wirklich dahinter steckt. So möchte ich mich in nächster Zeit mehr mit Webentwicklung
befassen und auch Tailwind noch genauer anschauen, als ich das hier im Rahmen des E-Portfolios gemacht habe.
\pagebreak
%Kapitel 3 - Video
\section{Video}
In den folgenden Kapiteln werde ich erklären, wie ich das Video gefilmt habe und was die Schwierigkeiten dabei waren. Zudem werde ich
@@ -264,7 +272,7 @@
%Kapitel 4.3 - Bildmanipulation 3
\subsection{Bildmanipulation 3}
Als dritte Bildmanipulation wollte ich die Spiegelung im Eis durch das Licht reduzieren. Obwohl das sehr zum Bild passen würde, habe ich es
leider nicht geschafft, den gewünschten Effekt zu erzielen. Ich habe es zwar geschafft die Spiegelug etwas zu reduzieren, ich hätte aber
leider nicht geschafft, den gewünschten Effekt zu erzielen. Ich habe es zwar geschafft die Spiegelung etwas zu reduzieren, ich hätte aber
gerne länger experimentiert, bis sie noch mehr weg gewesen wäre. Ich habe hier mehrere verschiedene Möglichkeiten probiert, mit denen man
in GIMP eigentlich solche Spiegelungen reduzieren können müsste. Allerdings haben alle bei mir nur so semi-gut funktioniert, dieses Bild
ist noch am besten herausgekommen von allen versuchten Methoden.
@@ -280,8 +288,25 @@
%Kapitel 4.4 - Reflexion Bildmanipulationen
\subsection{Reflexion Bildmanipulationen}
Die Bildmanipulationen sind sehr einfach von der Hand gegangen. Ich hatte etwas Mühe, eine dritte Bildbearbeitungsmethode zu finden, was
sich meiner Meinung nach bedauerlicherweise auch im Ergebnis bemerkbar, denn das Entfernen der Spiegelung hat nicht sehr gut geklappt. Die anderen
beiden Bilder sind aber sehr gelungen, und besonders bei dem Schwarz-Weiss Bild habe ich den Prozess interessant gefunden und konnte mir
diesen auch zu einem grossen Teil gut merken und nachvollziehen.
\pagebreak
%Kapitel 5 - Fazit
\section{Fazit}
Gesamt bin ich der Meinung, dass mein E-Portfolio sehr gut gelungen ist.\\
Für die Webseite brauchte ich etwas Hilfe von Timo Kluser und Nico Nussmüller, aber ansonsten konnte ich sehr vieles selbst machen. Die
Webentwicklung war teils auch interessanter und schneller, als ich effektiv im Voraus gedacht hatte. Aber einige Kleinigkeiten habe
ich dann aber zeitlich total unterschätzt. Dies werde ich in einem nächsten Projekt auf alle Fälle anders berechnen müssen.\\
Bei der Webentwicklung habe ich Tailwind kennengelernt und wirklich eine tolle Alternative zu plain-CSS gefunden, welche vor allem für
Leute ohne viel Erfahrung ein sehr guter Einstieg ist. Mein Wissen rund um HTML konnte ich im Rahmen dieses Projekts ebenfalls wieder
auffrischen.\\ \\
Im Storyboard habe ich einen Zeitplan aufgestellt, welchen ich nicht ganz einhalten konnte, da ich mitten drin eine Woche krank war. Daher
wurde es besonders gegen Schluss eher knapp. Hätte ich mehr Zeit gehabt, hätte ich die Webseite noch etwas verbessern können und die
Bildbearbeitungsmethoden besser umsetzen.\\ \\
Mit den Bildbearbeitungsmethoden bin ich so weit auch zufrieden. Sie sind gut ausgewählt und grösstenteils auch gut umgesetzt. Wie aber
erwähnt, hätte ich mehr Zeit benötigt, diese auch besser umzusetzen.
\end{document}