add text for technologies and reflexion and fazit
This commit is contained in:
@@ -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}
|
||||
Reference in New Issue
Block a user