diff --git a/Storyboard/src/Storyboard.tex b/Storyboard/src/Storyboard.tex index 87f147c..42a3652 100644 --- a/Storyboard/src/Storyboard.tex +++ b/Storyboard/src/Storyboard.tex @@ -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