1 files changed, 183 insertions, 0 deletions
diff --git a/00-pflichtenheft/sections/benutzeroberflaeche.tex b/00-pflichtenheft/sections/benutzeroberflaeche.tex
new file mode 100644
index 0000000..536ed04
--- /dev/null
+++ b/00-pflichtenheft/sections/benutzeroberflaeche.tex
@@ -0,0 +1,183 @@
+\section{Benutzeroberfläche}
+
+Die Synchronisation der \Glspl{podcast} soll über eine Weboberfläche verwalten werden.
+Dazu wird eine \Gls{spa} erstellt. Diese kann durch ein
+\Gls{responsive}-Design für Desktop- und Mobilgeräte nutzerfreundlich angezeigt
+werden. 
+
+Die Navigation erfolgt über eine Navigationsleiste, welche auf jeder
+nutzerbezogenen Seite zu sehen ist. Über die Navigationsleiste können über
+Knöpfe alle anderen nutzerbezogenen Seiten aufgerufen werden. Über ein
+Dropdown-Menu werden Accounteinstellungen und ein Logout-Knopf sichtbar (siehe
+Abbildung \ref{fig:listening-progress-account-dropdown}). Ein weiters
+Dropdown-Menu erlaubt das Wechseln der Sprache (siehe Abbildung
+\ref{fig:podcast-desktop-change-language}). Der ,,Hilfe''-Eintrag öffnet ein
+Fenster mit Hilfestellungen (siehe Abbildung \ref{fig:help-desktop}). Durch das
+\Gls{responsive}-Design kann die Navigations-Leiste auf Mobilgeräten sich zu
+einem Burger-Menu zusammenklappen. 
+
+Die Komponenten der Weboberfläche werden von einem Still-Framework, wie Bootstrap,
+benutzt. 
+
+% Übersichtlichkeit wichtig?
+
+% Webanwendung
+% Single-Page-Application
+% Responsive
+% Navigationsleiste
+% Bootstrap
+
+\subsection{Login}
+
+Bei der erstmaligen Nutzung des Services wird der Nutzer aufgefordert, sich neu
+für die \Gls{podcast}-Synchronisation zu registrieren. Dabei gibt der Nutzer seine
+E-Mail und ein Passwort ein. Daraufhin wird dem Nutzer eine E-Mail mit einem
+Bestätigungslink an seine E-Mail-Adresse versandt. Erst wenn der Link angeklickt
+wird, ist der Account freigeschaltet und der Nutzer wird zur Anmeldeseite
+weitergeleitet (siehe Abbildung \ref{fig:login-mobile}). 
+
+Alternativ kann der Nutzer sich auch mit einem Identifikationsbereitsteller, wie
+Google oder Facebook registrieren und anmelden. 
+
+Zusätzlich kann der Nutzer beim Anmelden über eine Checkbox einstellen, dass
+dieser angemeldet bleiben möchte, sodass sich dieser beim nächsten Aufruf der
+Weboberfläche nicht erneut anmelden muss. 
+
+Nach dem Anmelden wird der Nutzer zur \Gls{podcast}-Liste weitergeleitet. 
+
+% Registrieren
+% E-Mail und Passwort, E-Mail bestätigung
+
+% anmelden mit E-Mail und Passwort oder es kann sich auch mit einem
+% Identifikations-Bereitsteller (wie Google, Facebook, GitHub) angemeldet
+% werden. 
+
+% Angemeldet bleiben
+
+% Anschließlich auf der Startseite
+
+\subsection{Podcast-Liste}
+
+Die Seite der \Gls{podcast}-Liste zeigt eine Liste aller vom Nutzer abonnierten
+\Glspl{podcast}. Diese sind danach sortiert, welcher \Gls{podcast} zuletzt
+gehört wurde (siehe Abbildung \ref{fig:podcast-desktop-change-language}). 
+
+\Glspl{podcast} können aufgeklappt werden, um \Glspl{episode} inklusive deren Hörfortschritt
+anzuzeigen. Die \Glspl{episode} werden nach Veröffentlichungszeitpunkt sortiert. 
+
+% Navigatinsleiste
+% Zeigt eine Liste aller vom Nutzer abonnierten Podcasts sortiert nach welcher
+% Podcast zuletzt gehört wurde. 
+% Podcasts können aufgeklappt werden, um Episoden inklusive deren Hörfortschritt
+% anzuzueigen. Die Episoden werden nach Veröffentlichungszeitpunkt sortiert. 
+
+\subsection{Zuletzt gehört}
+
+Die Seite ,,Zuletzt gehört'' zeigt eine Liste der vom Nutzer gehörten
+\Glspl{episode} inklusive Hörfortschritt (siehe Abbildung
+\ref{fig:listening-progress-account-dropdown}). Die \Glspl{episode} sind danach
+sortiert wann sie zuletzt gehört wurden. 
+
+Zusätzlich können die beendeten und angefangenen \Glspl{episode} über ein
+Dropdown-Menu auch auf- und absteigend lexikografisch oder nach Hörfortschritt
+sortiert werden. 
+
+% \newpage
+
+\subsection{Einstellungen}
+
+Auf der Einstellungsseite darf der Nutzer sein Passwort ändern und seinen
+Account löschen (siehe Abbildung \ref{fig:settings-mobile-1}). 
+
+Der Nutzer kann seine personenbezogenen Daten, wie abonnierte \Glspl{podcast} und
+Hörfortschritte, in eine Datei exportieren, welche der Nutzer herunterladen
+kann. Außerdem kann der Nutzer zuvor heruntergeladene Exports wieder
+importieren, um zum Beispiel alte abonnierte \Glspl{podcast} wiederherzustellen. 
+
+Zusätzlich kann der Nutzer seine Daten von einer anderen \Gls{gpodder} importieren,
+indem er sich in den Einstellungen auf der anderen \Gls{gpodder} anmeldet. 
+
+% Passwort ändern
+% Account löschen
+% Daten importieren/exportieren
+% Daten anderer Gpodder-API importieren
+
+% \vspace{1cm}
+
+%===================================================================================%
+% https://tex.stackexchange.com/questions/55337/how-to-use-figure-inside-a-minipage %
+%===================================================================================%
+\hspace{-.5cm}
+\begin{minipage}[H]{\linewidth}
+    %\centering
+    \begin{minipage}{0.32\linewidth}
+        \begin{figure}[H]
+            \fbox{\includegraphics[width=.9\linewidth]{assets/ui/login-mobile.png}}
+            \setcapindent*{1em}
+            \caption{Anmeldeseite mit Identitätsbereitsteller\\}
+            \label{fig:login-mobile}
+        \end{figure}
+    \end{minipage}
+%    \hspace{0.05\linewidth}
+    \begin{minipage}{0.32\linewidth}
+        \begin{figure}[H]
+            \fbox{\includegraphics[width=.9\linewidth]{assets/ui/podcasts-mobile.png}}
+            \setcapindent*{1em}
+            \caption{Mobile \Glspl{podcast}-Seite mit Burger-Menu\\}
+            \label{fig:podcasts-mobile}
+        \end{figure}
+    \end{minipage}
+%    \hspace{0.05\linewidth}
+    \begin{minipage}{0.32\linewidth}
+        \begin{figure}[H]
+            \fbox{\includegraphics[width=.9\linewidth]{assets/ui/listening-progress-mobile.png}}
+            \setcapindent*{1em}
+            \caption{Mobile ,,Zuletzt gehört''-Seite mit offenem Burger-Menu}
+            \label{fig:listening-progress-mobile}
+        \end{figure}
+    \end{minipage}
+\end{minipage}
+
+\begin{figure}[H]
+    \centering
+    \fbox{\includegraphics[width=.9\linewidth]{assets/ui/podcasts-desktop-change-language.png}}
+    \caption{\Glspl{podcast}-Seite mit \Glspl{episode} und Sprachauswahl}
+    \label{fig:podcast-desktop-change-language}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \fbox{\includegraphics[width=.9\linewidth]{assets/ui/listening-progess-account-dropdown.png}}
+    \caption{,,Zuletzt gehört''-Seite mit Fortschrittsbalken und Account-Dropdown}
+    \label{fig:listening-progress-account-dropdown}
+\end{figure}
+
+\begin{figure}[H]
+    \centering
+    \includegraphics[width=.87\linewidth]{assets/ui/help-desktop.png}
+    \caption{Hilfe-Fenster, welches mit dem Menu-Eintrag ,,Hilfe'' geöffnet wird}
+    \label{fig:help-desktop}
+\end{figure}
+
+\begin{minipage}[H]{.9\linewidth}
+    \centering
+    \begin{minipage}{.4\linewidth}
+        \begin{figure}[H]
+            \centering
+            \fbox{\includegraphics[width=.8\linewidth]{assets/ui/settings-mobile-1.png}}
+            \setcapindent*{1em}
+            \caption{Einstellungen mit Ändern des Passworts und Gpodder-Verknüpfung}
+            \label{fig:settings-mobile-1}
+        \end{figure}%
+    \end{minipage}
+    \hspace{.5cm}
+    \begin{minipage}{.4\linewidth}
+        \begin{figure}[H]
+            \fbox{\includegraphics[width=.8\linewidth]{assets/ui/settings-mobile-2.png}}
+            \setcapindent*{1em}
+            \caption{Einstellungen mit Datenexport und Accountlöschung\\}
+            \label{fig:settings-mobile-2}
+        \end{figure}
+    \end{minipage}
+\end{minipage}
+