184 lines
7.1 KiB
TeX
184 lines
7.1 KiB
TeX
|
\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}
|
||
|
|
|