tobias-hilfiker/Modul_152
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Fix Typos

Browse Source
This commit is contained in:
Ramspopoo
2022-11-16 15:49:37 +01:00
parent ae83005d7f
commit 8d06c92548
1 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
Storyboard/src/Storyboard.tex
View File

@@ -69,17 +69,17 @@
%Kapitel 1.1 - Ziel dieses Storyboards
\subsection{Ziel dieses Storyboards}
Mit diesem Storyboard habe ich das Ziel, die grundlegenden Konzepte für das E-Portfolio zu definieren.
Dazu gehören Farbschemen, Logo, aber auch ein Mockup der Webseite.
Dazu gehören Farbschema, Logo, aber auch ein Mockup der Webseite.
Folgende Fragen sollen bis zum Ende des Storyboards geklärt sein:
\begin{itemize}
\item Wie soll das Logo des E-Portfolios aussehen?
\item Welche Farben sollen wo auf der Webseite verwendet werden? \textrightarrow Farbschema erstellen
\item Welche Farben sollen wo auf der Webseite verwendet werden? \textrightarrow Farbschema erstellen / suchen
\item Wie soll die grundsätzliche Struktur des E-Portfolios aussehen?
\textrightarrow Erstellung eines Mockups
\item Welche Technologien möchte ich für die Erstellung der Webseite verwenden?
\end{itemize}
\\
Neben den oben genannten Punkten möchte ich zudem bereits ein Bild, welches zum Thema passt bearbeiten.
Neben den oben genannten Punkten möchte ich zudem bereits ein Bild, welches zum Thema passt, bearbeiten.
Um dieses Bild zu machen, informiere ich mich vorher in den Unterrichtsunterlagen und im Internet, welche
Punkte beachtet werden müssen, um ein gutes Bild zu schiessen.
Auch bei der Bildbearbeitung werde ich ähnlich vorgehen. Nachdem die Bildbearbeitung gelungen ist, werde
@@ -125,7 +125,7 @@
auf den Mockups sehr gut ersichtlich. Darin ist das Logo und natürlich die Navigation in die verschiedenen
Unterseiten enthalten.\\
Auf Mobile habe ich mich dazu entschieden, das Menü mittels drei Linien immer im Header mit dem Logo
eingeblendet zu haben. Tippt man auf die drei Linien öffnet sich ein Popup, welches dann das Menü anzeigt.
eingeblendet zu haben. Tippt man auf die drei Linien, öffnet sich ein Pop-up, welches dann das Menü anzeigt.
\begin{figure}[h]
\centering
@@ -135,13 +135,13 @@
%Kapitel 3.2 - Farbwahl
\subsection{Farbwahl}
Um eine Farbauswahl habe ich mal simpel nach Farbpaletten im Internet gesucht. Dabei ist mir die Seite
Um eine Farbauswahl zu treffen habe ich mal simpel nach Farbpaletten im Internet gesucht. Dabei ist mir die Seite
\url{colorhunt.co} aufgefallen. Diese Webseite lässt User ihre eigenen Farbpaletten hochladen und mit
anderen Usern teilen. Zudem habe ich Adobe Color ausprobiert, allerdings ist dies viel zu viel
Funktionalität für dieses Projekt. Daher werde ich für das Storyboard die Plattform Colorhunt verwenden.\\
\\
Auf Colorhunt selbst habe ich verschiedene Farbpaletten gefunden, welche ich im Folgenden aufgelistet
habe. Gesucht habe ich nach Pastellfarbenen Farbpaletten gesucht, welche an Winter, Eis und Curling erinnern.
habe. Gesucht habe ich nach Pastellfarbenen Farbpaletten, welche an Winter, Eis und Curling erinnern.
Daher sind die verschiedenen Farbpaletten auch sehr blau, da wir Menschen Blau mit Winter und Kälte
assoziieren.
@@ -149,8 +149,8 @@
\includegraphics[width=\textwidth]{media/color_palettes}
\caption{Verschiedene Farbpaletten von Colorhunt}
\end{figure}
Als ich die Paletten Timo gezeigt habe, un seine Meinung darüber einzuholen hat er alle nicht wirklich passend
\noindent
Als ich die Paletten Timo gezeigt habe, um seine Meinung darüber einzuholen, hat er alle nicht wirklich passend
gefunden. Er hat mir noch ein weiteres Tool gezeigt, welche für Farbpaletten genutzt werden kann. Zudem hat er
mir direkt eine Farbpalette gezeigt, welche ich für mein Thema verwenden kann. Diese hat auch mich mehr
angesprochen wie diese Paletten, die ich herausgesucht hatte. Daher habe ich dann auch diese Palette verwendet.
@@ -161,9 +161,11 @@
\caption{Farbpalette von Coolors, welche Timo mir empfohlen hat}
\end{figure}
\pagebreak
%Kapitel 3.3 - Mockups
\subsection{Mockups}
Um die Webseite grob zu designen wollte ich ein Mockup-Programm nutzen. Nachfolgend werde ich Dokumentieren,
Um die Webseite grob zu designen, wollte ich ein Mockup-Programm nutzen. Nachfolgend werde ich Dokumentieren,
wie ich das Mockup-Programm ausgewählt habe, wie ich die Mockups gestaltet habe und zu guter letzt auch
die Mockups selbst in die Dokumentation einfügen.
@@ -176,7 +178,7 @@
\begin{itemize}
\item Balsamiq Mockups 3
\item Moqups.com
\item Adobe xD
\item Adobe Xd
\item Mockplus.com
\end{itemize}\\
Um mich auf ein Tool festzulegen, habe ich Kriterien definiert, und anhand dieser die Tools bewertet. So
@@ -186,7 +188,7 @@
\begin{itemize}
\item Erfahrung \textrightarrow Wie viel Erfahrung habe ich bereits mit diesem Tool?
\item Preis \textrightarrow Wie viel kostet das Tool (je weniger, desto besser)
\item Funktionalität \textrightarrow Bietet mir das Tool alle Funktionalitäten die ich benötige?
\item Funktionalität \textrightarrow Bietet mir das Tool alle Funktionalitäten, die ich benötige?
\end{itemize}
Um die Entscheidungsmatrix auszufüllen, werde ich eins bis fünf Punkte vergeben. Ein Punkt ist dabei das tiefste
und fünf das höchste. Das Tool mit den total meisten Punkten gewinnt am Schluss.\\
@@ -197,16 +199,16 @@
& \textbf{Erfahrung} & \textbf{Preis} & \textbf{Funktionalität} & \textbf{Total Score} \\ \hline
\textbf{Balsamiq Mockups} & 3 & 2 & 4 & 10 \\ \hline
\textbf{Moqups.com} & 1 & 2 & 3 & 6 \\ \hline
\textbf{Adobe xD} & 5 & 4 & 5 & 14 \\ \hline
\textbf{Adobe Xd} & 5 & 4 & 5 & 14 \\ \hline
\textbf{Mockplus.com} & 1 & 3 & 5 & 9 \\ \hline
\end{tabular}
\end{center}
\\
\textbf{Begründung der Entscheidung}\\
Anhand der obigen Entscheidungsmatrix habe ich mich für das Programm Adobe xD entschieden. Dies hat mehrere
Gründe. Einerseits habe ich in vergangenen Projekten bereits mit xD gearbeitet, andererseits bietet es
Anhand der obigen Entscheidungsmatrix habe ich mich für das Programm Adobe Xd entschieden. Dies hat mehrere
Gründe. Einerseits habe ich in vergangenen Projekten bereits mit Xd gearbeitet, andererseits bietet es
mir neben den Mockups auch die Funktionalität, einen Prototyp zu gestalten. Zudem habe ich durch eine
Adobelizenz der Schule xD bereits lizenziert, was bei allen anderen Programmen nicht der Fall ist.
Adobelizenz der Schule Xd bereits lizenziert, was bei allen anderen Programmen nicht der Fall ist.
%Kapitel 3.3.2 - Design der Mockups
\subsubsection{Design der Mockups}
@@ -222,7 +224,7 @@
%Kapitel 3.3.3 - Mockups
\subsubsection{Mockups}
Alle Mockups für Desktop und Mobile können mit folgenden Links abgerufen werden:
Alle Mockups \& Prototypen für Desktop und Mobile können mit folgenden Links abgerufen werden:
\href{https://xd.adobe.com/view/45d77867-36a0-4e18-aa80-e69ece38dc4d-1084/?fullscreen}{Desktop-Prototyp}\xspace
\href{https://xd.adobe.com/view/e60b6f38-3978-4ad7-9356-911ad63d6317-b358/?fullscreen}{Mobile-Prototyp}
@@ -243,7 +245,7 @@
\section{Bildbearbeitung}
Bei der Bildbearbeitung habe ich mich dazu entschieden, einen simplen schwarz-weiss Filter auf das Bild
anzuwenden, und einen Teil des Bildes wieder farbig zu machen.\\
Dafür habe ich GIMP verwendet, welches ein Open-Source Bildeditor ist, welchen wir im Unterricht im Modul
Dafür habe ich GIMP verwendet, welches ein Open-Source Bildeditor ist, welchen wir im Unterricht von Modul
152 bereits näher kennengelernt haben.
@@ -266,7 +268,7 @@
\item Bild in GIMP importieren
\item In der Ebenenauswahl (standardmässig unten rechts) die aktuelle Ebene auswählen und mit rechts-klick
anwählen. Dort dann ``Ebene duplizieren'' anklicken.
\item Einer der Layer muss nun Schwarz-Weiss gefärbt werden. Dies kann unter ``Farben'' und dann
\item Einer der Layer muss nun schwarz-weiss gefärbt werden. Dies kann unter ``Farben'' und dann
``Entsättigen'' gemacht werden.
\begin{figure}[h]
@@ -277,7 +279,7 @@
\item Auf dieser Ebene, welche entsättigt wurde und nun schwarz-weiss ist, wenden wir nun eine
Ebenenmaske an. Diese ist dafür da, dass wir anschliessend die Transparenz dieses Layers bearbeiten können.
Die Ebenenmaske kann in der Ebenenauswahl hinzugefügt werden. Dazu die entsprechende Ebene rechtsklicken und
Die Ebenenmaske kann in der Ebenenauswahl hinzugefügt werden. Dazu die entsprechende Ebene rechts klicken und
anschliessend die Option ``Ebenenmaske hinzufügen'' auswählen. Im Dialog habe ich ausgewählt, dass eine weisse
Ebenenmaske hinzugefügt wird.
@@ -317,11 +319,11 @@
\noindent\begin{minipage}{0.6\textwidth}
%Kapitel 5.2 - Erstellung des Logos
\subsection{Erstellung des Logos}
Begonnen habe ich das Logo in Adobe xD. Dort hatte ich bereits die einzelnen Ringe des Hauses gezeichnet.
Begonnen habe ich das Logo in Adobe Xd. Dort hatte ich bereits die einzelnen Ringe des Hauses gezeichnet.
Diese dienen während dem Spiel der einfacheren Bestimmung der Entfernung der Steine. Diese haben
möglichst unterschiedliche Farben, dass die einzelnen Ringe eifach voneinander unterscheidbar sind.
Dies habe ich hier realitästsgetreu nachgefärbt. Nach dem Zeichnen und färben der Ringe hat das Logo
wie rechts ersichtlich ausgsesehen.
möglichst unterschiedliche Farben, dass die einzelnen Ringe einfach voneinander unterscheidbar sind.
Dies habe ich hier realitätsgetreu nachgefärbt. Nach dem Zeichnen und färben der Ringe hat das Logo
wie rechts ersichtlich ausgesehen.
\end{minipage}
\hfill
\begin{minipage}[c]{0.3\textwidth}
@@ -331,12 +333,12 @@
\end{minipage}
\noindent\begin{minipage}{0.6\textwidth}
Die Curlingsteine sind ebenso simpel wie das Haus. Die Steine sind einzelne kleine Kreise aus xD, welche
Die Curlingsteine sind ebenso simpel wie das Haus. Die Steine sind einzelne kleine Kreise aus Xd, welche
ich so gefärbt habe, dass sie den Farben des Curlings entsprechen. Bei einem richtigen Curlingstein ist
von oben einerseits der farbige Plastikgriff (Fachbegriff ``Handle'') sichtbar, aber auch der Stein
selbst zu sehen. Dies habe ich damit reproduziert, dass ich in xD die Rahmen des Kreises so skaliert
selbst zu sehen. Dies habe ich damit reproduziert, dass ich in Xd die Rahmen des Kreises so skaliert
habe, dass sie ungefähr dem reellen Verhältnis entsprachen. Die drei Steine, welche ich anschliessend
irgendwo auf dem Haus plaziert habe, sind nun rechts ersichtlich.
irgendwo auf dem Haus platziert habe, sind nun rechts ersichtlich.
\end{minipage}
\hfill
\begin{minipage}[c]{0.3\textwidth}
@@ -344,19 +346,19 @@
\includegraphics[width=\linewidth]{media/curling_stones}
\captionof{figure}{Curlingsteine}
\end{minipage}
\\\\\\Um nun wie geplant den Schriftzug ``Curling'' in das Haus einzubetten, habe ich GIMP verwendet, da ich zu xD keine
\\\\\\Um nun wie geplant den Schriftzug ``Curling'' in das Haus einzubetten, habe ich GIMP verwendet, da ich zu Xd keine
Anleitung gefunden habe, welche für mich funktioniert hat, um Text an einer Rundung zu biegen. Den bisherigen
Fortschritt habe ich also als SVG aus Adobe xD exportiert, und in GIMP wieder geöffnet.
Fortschritt habe ich also als SVG aus Adobe Xd exportiert, und in GIMP wieder geöffnet.
Dort habe ich dann wie folgt die Schrift hinzugefügt:
\begin{enumerate}
\item Text ``Curling'' geschrieben
\item Eine neue Transparente Ebene erstellen
\item Auf dieser Transparenten Ebene mit dem ``elliptischen Auswahlwerkzeug'' genau den roten Kreis ausgewählt,
\item Eine neue transparente Ebene erstellen
\item Auf dieser transparenten Ebene mit dem ``elliptischen Auswahlwerkzeug'' genau den roten Kreis ausgewählt,
damit der Text später im weissen Kreis steht.
\item Im Kontextmenü ``Auswahl'' den Punkt ``Nach Pfad'' anklicken. So wird ein Pfad erstellt, entlang dessen
der Text später stehen wird.
\item Auf die Ebene mit dem Text zurück und dann mit Rechtsklick auf der Ebene den Punkt ``Text dem Pfad entlang''
\item Auf die Ebene mit dem Text zurück und dann mit rechts-klick auf der Ebene den Punkt ``Text dem Pfad entlang''
auswählen. So wird der Text dem vorher erstellten Pfad entlang geschrieben.
\item Als nächsten Schritt wählt man wieder die transparente Ebene aus und drückt Ctrl + Alt + A, um die Auswahl
verschwinden zu lassen. Dann im Kontextmenü ``Auswahl'' den Punkt ``Nach Pfad'' auswählen.
@@ -370,8 +372,8 @@
\end{figure}
\item In der Ebenenauswahl haben wir nun die transparente Ebene mit dem gebogenen Text, den originalen Text,
und in meinem Fall habe ich noch eine dritte Ebene mit dem bisherigen Fortschritt aus xD.
\item Nun kann ich den Originalen Text löschen, und den Transparenten Text mit dem Dreh- und Verschiebewerkzeug
und in meinem Fall habe ich noch eine dritte Ebene mit dem bisherigen Fortschritt aus Xd.
\item Nun kann ich den originalen Text löschen, und den transparenten Text mit dem Dreh- und Verschiebewerkzeug
so drehen und verschieben, dass er für mich passt.
\end{enumerate}
@@ -400,7 +402,7 @@
Das Storyboard selbst ist im Grossen und Ganzen sehr gut von der Hand gegangen. Ich habe sehr früh mit einer
Grundstruktur gestartet, um genug Zeit für auch andere Arbeiten zu haben. Allerdings ist es gegen Schluss doch
noch etwas knapp geworden, geschafft habe ich es trotzdem. \smiley
\\Auch mit \LaTeX\xspace hatte ich fast keine Probleme, bis auf die Grafiken. Vorallem bei Grafiken welche floating
\\Auch mit \LaTeX\xspace hatte ich fast keine Probleme, bis auf die Grafiken. Vor allem bei Grafiken welche floating
im Text sind ist es schwierig, da es mehr schätzen als Wissen ist, wo die Bilder und der Text anschliessend
landet. Dafür sehr gut finde ich das Feature, dass \LaTeX\xspace selbst Zeilenumbrüche und auch Worttrennungen
durchführt. So kann ich in meinem Format die Dokumentation im ``Code'' schreiben und im kompilierten PDF hat es
@@ -417,10 +419,10 @@
Das Logo war eine schwierige Entscheidung für mich. Da ich mich absolut nicht auskenne mit Logos, aber auch nicht
einfach ein existierendes ändern wollte, hatte ich Probleme bei der Ideenfindung. Ich habe mich dann aber zuletzt
darauf festgelegt, das Curlinghaus mit einigen Steinen drin darzustellen, und das als Logo zu nehmen. Da ich nicht
auf irgendeinen Verein o.ä. fixiert war, musste ich auch nicht noch externe Logos einbinden.
auf irgendeinen Verein o.Ä. fixiert war, musste ich auch nicht noch externe Logos einbinden.
\\Das Logo selbst habe ich ja wie dokumentiert in Xd designt. Da ich aber den Schriftzug ``Curling'' noch gebogen
eingebunden haben wollte, musste ich doch noch GIMP nutzen. Das fand ich etwas schade, dort fände ich es besser
wenn man bereits in Adobe xD Text biegen könnte. Dann hätte mir der Zwischenschritt mit GIMP erspart bleiben können.
eingebunden haben wollte, musste ich doch noch GIMP nutzen. Das fand ich etwas schade, dort fände ich es besser,
wenn man bereits in Adobe Xd Text biegen könnte. Dann hätte mir der Zwischenschritt mit GIMP erspart bleiben können.
\pagebreak
%Kapitel 8 - Abbildungsverzeichnis