263 lines
12 KiB
TeX
263 lines
12 KiB
TeX
%! Author = hilfiker
|
|
%! Date = 21.07.2022
|
|
|
|
% Preamble
|
|
\documentclass[11pt]{article}
|
|
|
|
% Packages
|
|
\usepackage{amsmath} % Formulas in document
|
|
\usepackage{pdflscape} % Landscaped pages in Pdf
|
|
\usepackage[a4paper, margin=0.8in]{geometry} % Set the margin and size of a page
|
|
\usepackage[hidelinks]{hyperref} % Remove Boxes around Hyperlinks
|
|
\usepackage{lastpage} % Custom page numbering
|
|
\usepackage{fancyhdr}
|
|
\usepackage{graphicx}
|
|
\usepackage{tcolorbox} % Custom page numbering
|
|
|
|
\usepackage{titling}
|
|
\usepackage{textcomp}
|
|
\usepackage{wasysym}
|
|
\usepackage[utf8]{inputenc}
|
|
\usepackage[T1]{fontenc}
|
|
\usepackage{enumerate}
|
|
\renewcommand\maketitlehooka{\null\mbox{}\vfill}
|
|
\renewcommand\maketitlehookd{\vfill\null}
|
|
|
|
% Configure page numbering & footer
|
|
\pagestyle{fancy}
|
|
\fancyhf{}
|
|
\lfoot{Tobias Hilfiker}
|
|
\cfoot{Seite \thepage \hspace{1pt} von \pageref{LastPage}}
|
|
\rfoot{\today}
|
|
|
|
% Methadata
|
|
\title{
|
|
\includegraphics{media/frontpage}
|
|
\begin{center}
|
|
Modul 152 \\
|
|
Multimediainhalte in einen Webauftritt integrieren\\
|
|
Storyboard
|
|
\end{center}}
|
|
\author{Tobias Hilfiker}
|
|
\date{\today}
|
|
|
|
% Document
|
|
\begin{document}
|
|
|
|
%Kapitel Frontpage
|
|
\begin{titlingpage}
|
|
\maketitle
|
|
\end{titlingpage}
|
|
\pagebreak
|
|
|
|
%Kapitel Table of contents
|
|
\tableofcontents
|
|
\pagebreak
|
|
|
|
%Kapitel 1 - Einleitung
|
|
\section{Einleitung}
|
|
Im Rahmen des Modul 152 darf ein E-Portfolio inklusive vorgehendem Storyboard erstellt werden.
|
|
Dieses Storyboard soll eine Vorbereitung für das E-Portfolio sein, welches in einer separaten
|
|
Dokumentation beschrieben wird.
|
|
|
|
%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.
|
|
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 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.
|
|
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
|
|
ich eine Schritt-für-Schritt Anleitung zu dieser Bildbearbeitungsmethode ins Storyboard schreiben.
|
|
|
|
%Kapitel 1.2 - Spezielles
|
|
\subsection{Spezielles}
|
|
Um das Storyboard und die Dokumentation zum E-Portfolio zu schreiben, verwende ich \latex. Das ist
|
|
eine Skriptbasierte Dokumentationssprache, ähnlich wie Markdown. Primär gibt es zwei Unterschiede zu
|
|
Markdown:
|
|
\begin{enumerate}
|
|
\item \latex Dateien müssen Kompiliert werden. Dazu gibt es verschiedene Compiler, welche aus den
|
|
.tex-Dateien dann z.B. ein Pdf kompilieren.
|
|
\item In ein \latex Dokument können beliebig viele Packages eingebunden werden. Das bedeutet, dass
|
|
Elemente wie Diagramme, oder eigene Formatierungen einfach in das gleiche Dokument eingebunden werden.
|
|
\end{enumerate}
|
|
|
|
\pagebreak
|
|
%Kapitel 2 - Thema
|
|
\section{Thema}
|
|
|
|
%todo kleiner Text
|
|
|
|
%Kapitel 2.1 - Wahl des Themas
|
|
\subsection{Wahl des Themas}
|
|
|
|
Ich habe das Thema Curling ausgewählt, da ich im Winter selbst Curling spiele. Dies tue ich bereits in der
|
|
9. Saison in einem eingeschworenen Juniorenteam in St. Gallen.
|
|
Meiner Meinung nach ist Curling eine sehr spannende Sportart, man muss beim Spielen sehr viele verschiedene
|
|
Situationen abwägen, sich für die beste entscheiden und danach möglichst viele Faktoren zu seinen Gunsten
|
|
beeinflussen. \\
|
|
Die meisten Personen kennen Curling als Sportart und wirken auch meist sehr interessiert. Die meisten haben
|
|
aber meist keine Ahnung von den Begriffen und den Regeln, was das zuhören auf den Zuschauerbänken für mich
|
|
meist sehr lustig gestaltet \smiley. Daher habe ich mit diesem E-Portfolio das Ziel, den Besuchern
|
|
die Regeln und die Begrifflichkeiten etwas näher zu bringen.
|
|
|
|
%Kapitel 3 - Visualisierung E-Portfolio
|
|
\section{Visualisierung E-Portfolio}
|
|
|
|
%Kapitel 3.1 - Menüstruktur
|
|
\subsection{Menüstruktur}
|
|
Als Menü-Navigation habe ich mich für eine Navigation am oberen Teil der Webseite entschieden.
|
|
|
|
%Kapitel 3.2 - Farbwahl
|
|
\subsection{Farbwahl}
|
|
Um eine Farbauswahl 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 %todo wieso pastellfarben, Glossar Pastellfarben -> https://www.google.com/search?client=firefox-b-d&q=pastellfarben, Enter mit todo entfernen
|
|
Farbpaletten gesucht, 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.
|
|
|
|
\includegraphics[width=\textwidth]{media/color_palettes}
|
|
Als ich die Paletten Timo gezeigt habe, un 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.
|
|
Aussehen tut die Palette wie folgt:
|
|
|
|
\includegraphics[width=\textwidth]{media/color_palette}
|
|
|
|
%Kapitel 3.3 - Mockups
|
|
\subsection{Mockups}
|
|
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.
|
|
|
|
%Kapitel 3.3.1 - Auswahl des Mockup-Programms
|
|
\subsubsection{Auswahl des Mockup-Programms}
|
|
Um herauszufinden, welches Mockup-Programm ich während des Storyboards und E-Portfolio verwende, habe ich
|
|
mich im Internet Informiert, welche verschiedenen Mockup-Programme dass es gibt. Folgende Programme habe
|
|
ich gefunden und genauer analysiert:
|
|
|
|
\begin{itemize}
|
|
\item Balsamiq Mockups 3
|
|
\item Moqups.com
|
|
\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
|
|
kann ich anschliessend in der Entscheidungsmatrix ablesen, welches Mockup-Programm ich nachher effektiv
|
|
nutze. Folgende Kriterien habe ich vorgängig definiert: %todo überarbeiten, da zuvor bereits eine Entscheiungsmatrix kommt
|
|
|
|
\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?
|
|
\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.\\
|
|
|
|
\begin{center}
|
|
\begin{tabular}{ | p{4cm} | p{2.5cm} | p{2.5cm} | p{3cm} | p{2.5cm} | }
|
|
\hline
|
|
& \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{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
|
|
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.
|
|
|
|
%Kapitel 3.3.2 - Design der Mockups
|
|
\subsubsection{Design der Mockups}
|
|
|
|
%Kapitel 3.3.3 - Mockups
|
|
\subsubsection{Mockups}
|
|
- Bilder der Mockups einfügen
|
|
|
|
%Kapitel 4 - Bildbearbeitung
|
|
\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
|
|
152 bereits näher kennengelernt haben.
|
|
|
|
|
|
%Kapitel 4.1 - Bildbearbeitungsmethode
|
|
\subsection{Bildbearbeitungsmethode}
|
|
Ich habe mich für ein Foto aus der Vogelperspektive entschieden, da ich nur so die gesamte Spielfläche
|
|
auf das Bild bekomme. Fotografiert habe ich dieses mit einer Drohne, da ich andere Kameras nicht so hoch
|
|
über das Eis bekomme. Das unbearbeitete Foto sieht dann wie folgt aus:\\
|
|
\includegraphics[width=\textwidth]{media/unedited}
|
|
|
|
\\ \textbf{Anleitung zur Bildbearbeitung}\\
|
|
Im folgenden werde ich Schritt für Schritt erklären, wie ich das Bild bearbeitet habe.
|
|
|
|
\begin{enumerate}
|
|
\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
|
|
``Entsättigen'' gemacht werden. %todo bild einfügen des dialogs
|
|
\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
|
|
anschliessend die Option ``Ebenenmaske hinzufügen'' auswählen. Im Dialog habe ich ausgewählt, dass eine weisse
|
|
Ebenenmaske hinzugefügt wird.
|
|
\item Das Pinselwerkzeug auswählen und auf eine brauchbare Grösse einstellen. Wichtig ist, dass ein zu grosser
|
|
Pinsel auch wieder zu viel Farbe aufdeckt.
|
|
\item Mit dem Pinselwerkzeug und gedrückter linker Maustaste diese Bereiche überfahren, welche wieder
|
|
farbig sein sollten.
|
|
\end{enumerate}
|
|
|
|
Das fertige Bild sieht dann wie folgt aus:\\
|
|
\includegraphics[width=\textwidth]{media/edited}
|
|
|
|
|
|
%Kapitel 5 - Logo
|
|
\section{Logo}
|
|
|
|
%Kapitel 5.1 - Idee
|
|
\subsection{Idee}
|
|
|
|
%Kapitel 6 - Technisches Konzept E-Portfolio
|
|
\section{Technisches Konzept E-Portfolio}
|
|
-Welche Technologien werden verwendet
|
|
|
|
%Kapitel 7 - Reflexion
|
|
\section{Reflexion}
|
|
|
|
%Kapitel 7.1 - Bildbearbeitung
|
|
\subsection{Bildbearbeitung}
|
|
|
|
%Kapitel 7.2 - Logodesign
|
|
\subsection{Logodesign}
|
|
|
|
%Kapitel 8 - Verzeichnisse
|
|
\section{Verzeichnisse}
|
|
|
|
%Kapitel 8.1 - Abbildungsverzeichnis
|
|
\subsection{Abbildungsverzeichnis}
|
|
|
|
%Kapitel 8.2 - Glossar
|
|
\subsection{Glossar}
|
|
|
|
\end{document} |