add text for technologies and reflexion and fazit
This commit is contained in:
@@ -93,21 +93,28 @@
|
|||||||
|
|
||||||
%Kapitel 2.1.1 - Basics
|
%Kapitel 2.1.1 - Basics
|
||||||
\subsubsection{Basics}
|
\subsubsection{Basics}
|
||||||
|
\textbf{Adobe Xd}\\
|
||||||
Um Skizzen auf der Webseite zu erstellen habe ich Adobe Xd verwendet. Dies aus zwei Gründen:
|
Um Skizzen auf der Webseite zu erstellen habe ich Adobe Xd verwendet. Dies aus zwei Gründen:
|
||||||
\begin{enumerate}
|
\begin{enumerate}
|
||||||
\item Ich kann die Assets als SVG exportieren. Diese werden dann nicht allzu gross und können optimal skaliert werden.
|
\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.
|
\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
|
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
|
und vorgefertigte CSS-Klassen verwenden. Zudem hat es bereits eingebaute Media-Queries, was es einfacher macht, die Webseite responsive
|
||||||
zu gestalten.
|
zu gestalten.\\
|
||||||
%TODO cloudniary!!!!!
|
\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
|
%Kapitel 2.1.2 - Dev-Server und Plugins
|
||||||
\subsubsection{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.
|
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.\\
|
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,
|
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
|
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
|
%Kapitel 2.2 - Umsetzung Webseite
|
||||||
\subsection{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 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.\\
|
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
|
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.
|
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
|
%Kapitel 2.3.1 - Seite "How To Play" nicht umgesetzt
|
||||||
\subsubsection{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.
|
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
|
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.
|
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
|
%Kapitel 2.3.2 - Seite "Beispiele" umbenannt
|
||||||
\subsubsection{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
|
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.
|
diese umbenannt auf den Namen "Impressionen". Dies passt viel besser zum Inhalt.
|
||||||
|
|
||||||
%Kapitel 2.3.3 - Seiten mit Grid statt Banner
|
%Kapitel 2.3.3 - Seiten mit Grid statt Banner
|
||||||
\subsubsection{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
|
%Kapitel 2.3.4 - Mobile Home-Page etwas anders gestylt
|
||||||
\subsubsection{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
|
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.
|
einfacher für mich die Seite responsive zu machen, da ich nur den flex drehen muss.
|
||||||
|
|
||||||
%Kapitel 2.3.5 - Logo und Navigation getauscht
|
%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
|
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.
|
befassen und auch Tailwind noch genauer anschauen, als ich das hier im Rahmen des E-Portfolios gemacht habe.
|
||||||
|
|
||||||
|
\pagebreak
|
||||||
%Kapitel 3 - Video
|
%Kapitel 3 - Video
|
||||||
\section{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
|
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
|
%Kapitel 4.3 - Bildmanipulation 3
|
||||||
\subsection{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
|
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
|
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
|
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.
|
ist noch am besten herausgekommen von allen versuchten Methoden.
|
||||||
@@ -280,8 +288,25 @@
|
|||||||
|
|
||||||
%Kapitel 4.4 - Reflexion Bildmanipulationen
|
%Kapitel 4.4 - Reflexion Bildmanipulationen
|
||||||
\subsection{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
|
%Kapitel 5 - Fazit
|
||||||
\section{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}
|
\end{document}
|
||||||
Reference in New Issue
Block a user