\chapter{Manual del usuario}

\section{Aplicación Web}

\subsubsection{Página de bienvenida y registro de nuevos usuarios}

La pantalla inicial para el acceso a la aplicación Web se muestra en la Figura~\ref{fig:LoginWeb}) Los usuarios desde esta página pueden hacer \emph{log in} usando su usuario y password o su correo y password. En caso de ser un usuario no registrado, desde esta misma página se puede acceder a la página de registro. Porque hay dos clases de usuarios Web, también hay dos páginas de registro diferentes: para los usuarios de tipo empresa, la página de registro se muestra en la Figura~\ref{fig:RegistroEmpresaWeb}) mientras que para los usuarios genéricos (aquellos que descargarán anuncios en sus dispositivos móviles) la página de registro se muestra en la Figura~\ref{fig:RegistroUsuarioWeb})

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/LoginWeb}
    \caption{\emph{Página de acceso aplicación Web}}
    \label{fig:LoginWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=1\textwidth,height=0.5\textheight]{fig/RegistroUsuarioWeb}
    \caption{\emph{Resto de usuarios: página de registro aplicación Web}}
    \label{fig:RegistroUsuarioWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth,height=0.6\textheight]{fig/RegistroEmpresaWeb}
    \caption{\emph{Empresas: página de registro aplicación Web}}
    \label{fig:RegistroEmpresaWeb}
\end{figure}


Como se puede observar en las Figuras~\ref{fig:RegistroUsuarioWeb} y \ref{fig:RegistroEmpresaWeb} es necesario la introducción de un captcha para poder registrarse. Para la generación de los captchas se está utilizando tecnología proporcionada por Google y en concreto se está haciendo uso de ReCAPTCHA\footnote{Para más información acerca de ReCAPTCHA ver: \url{http://www.google.com/recaptcha}}. En la página de registro, el usuario puede indicar el lenguaje que desea utilizar, de este modo puede internacionalizarse la información mostrada y no solo basarse en el idioma proporcionado de forma automática por el navegador Web (todo navegador Web proporciona cierta información acerca de sí mismo, parte de esta información es el idioma del usuario)

\subsubsection{Resto de usuarios: selección de categorías}

Aquellos usuarios que no tienen el rol empresa, una vez se autentican contra el servidor (el proceso de \emph{log in} explicado en la sección anterior) accederán a la página mostrada en la Figura~\ref{fig:UsuarioSeleccionWeb}) Aquí el usuario puede seleccionar aquellas categorías sobre las cuales desea recibir anuncios en su dispositivo móvil. Las categorías son presentadas de forma jerárquica y para poder persistir los cambios es necesario que el usuario pulse sobre el botón que aparece en la zona inferior derecha de la página Web.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/UsuarioSeleccionWeb}
    \caption{\emph{Resto de usuarios: selección de categorías de interés en la Web}}
    \label{fig:UsuarioSeleccionWeb}
\end{figure}


\subsubsection{Usuarios empresa y normales: visualización y modificación de datos personales}

Los dos tipos de usuarios (empresa y normales) pueden editar sus datos personales, para lograr dicha edición existen dos páginas, las cuales se muestran las Figuras~\ref{fig:DatosUsuarioWeb} y \ref{fig:EdicionDatosUsuarioWeb} donde se puede observar la pantalla en la cual cualquier usuario puede visualizar sus datos personales. En la esquina inferior derecha de la página mostrada en la Figura~\ref{fig:DatosUsuarioWeb}), se observa el botón que permite acceder a la página mostrada en la Figura~\ref{fig:EdicionDatosUsuarioWeb}) desde la cual el usuario (con rol empresa o sin él) puede actualizar sus datos personales. Un usuario normal, no puede realizar más acciones, en cambio el usuario con rol empresa como se verá en la próxima sección puede realizar muchas más tareas desde el entorno Web proporcionado por el sistema implementado en este Trabajo Fin de Carrera.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/DatosUsuarioWeb}
    \caption{\emph{Todo tipo de usuarios: visualización datos personales en la Web}}
    \label{fig:DatosUsuarioWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/EdicionDatosUsuarioWeb}
    \caption{\emph{Todo tipo de usuarios: edición de datos personales en la Web}}
    \label{fig:EdicionDatosUsuarioWeb}
\end{figure}

\subsubsection{Usuarios rol empresa: visualización y edición de los datos de una empresa}

En el servidor Web los datos relativos a una compañía serán su Código de Identificación Fiscal o CIF, su nombre y un \emph{logo}. El \emph{logo} en sí, actualmente no tiene ninguna utilidad pero podría ser utilizado para generar una página web desde la cual mostrar a usuarios autenticados o no las últimas empresas que se han registrado en el sistema o las últimas que han modificado o añadido algún anuncio o dato en el servidor Web. La página de visualización de los datos se muestra en la Figura~\ref{fig:DatosCompaniaWeb}) y la de edición en la Figura~\ref{fig:EdicionDatosCompaniaWeb}) Por último indicar que el tamaño del \emph{logo} está limitado, y en caso de superar este límite se mostrará un mensaje del error al usuario.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/DatosCompaniaWeb}
    \caption{\emph{Usuarios rol empresa: visualización datos de la compañía en la Web}}
    \label{fig:DatosCompaniaWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/EdicionDatosCompaniaWeb}
    \caption{\emph{Usuarios rol empresa: edición datos de la compañía en la aplicación Web}}
    \label{fig:EdicionDatosCompaniaWeb}
\end{figure}

\subsubsection{Usuarios rol empresa: listado, edición y creación de anuncios}

En la Figura~\ref{fig:ListadoAnunciosWeb}) se muestra la página Web que lista todos los anuncios que pertenecen al usuario actual. En la parte superior derecha del listado se puede seleccionar el lenguaje de los anuncios a mostrar. Esto es debido a que un mismo anuncio se puede definir en uno o más lenguajes, mediante la selección del lenguaje de los anuncios que se quieren listar se consigue que el usuario pueda decidir en cada momento el lenguaje de los anuncios listados evitando mostrar anuncios que no han sido definidos en el lenguaje seleccionado. El índice de anuncios se muestra con un paginador para evitar presentar un índice de anuncios demasiado largo en una sola página Web.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/ListadoAnunciosWeb}
    \caption{\emph{Usuarios rol empresa: listado de anuncios en la aplicación Web}}
    \label{fig:ListadoAnunciosWeb}
\end{figure}

Desde la ventana de listado de anuncios el usuario con rol de empresa puede borrar, editar los datos de un anuncio o crear un anuncio nuevo. En la Figura~\ref{fig:CreacionAnunciosWeb}) se muestra parte de la página que permite crear y editar nuevos anuncios. Se observa como el usuario puede para el mismo anuncio editar los datos en múltiples idiomas (actualmente el sistema solo permite Inglés y Castellano, pero el número de idiomas puede ampliarse fácilmente con solo añadir más idiomas a la tabla de la base de datos que maneja dicha información) También se observa la posibilidad de asignar una latitud y longitud a un determinado anuncio. Para la introducción de las coordenadas geográficas se utiliza la API JavaScript de Google Maps, a través de la cual y de una forma gráfica el usuario puede asignar una localización espacial a su anuncio. Basta con pinchar sobre la longitud o la latitud para que se abra de forma automática una ventana emergente que nos permite seleccionar la posición geográfica a través de Google Maps. Las dimensiones de la imagen asociada con un anuncio son limitadas de forma automática por el sistema, esto es debido a que la imagen en cuestión será la que finalmente los usuarios vean en sus dispositivos móviles, si no hubiera ninguna restricción en cuanto al tamaño, en caso de ser demasiado grande la imagen consumiría demasiado ancho de banda para su descarga y además quedaría descolocada respecto a otras imágenes en la aplicación para dispositivos móviles (en nuestro caso la aplicación Android). Por último observar que es necesario asignar una categoría de empresa a un anuncio si queremos que el anuncio llegue finalmente al usuario. Las categorías de empresa a su vez se asocian con categorías generales que son las que el usuario final ve (como mostradas en la Figura~\ref{fig:UsuarioSeleccionWeb}) Por tanto hay una relación directa entre categorías generales, categorías de empresa y anuncios. Si no existe esta relación el usuario final no recibirá el anuncio aunque éste haya sido creado y exista en el sistema.

La posibilidad de tener el mismo anuncio en diferentes idiomas permite que éste pueda llegar a más usuarios finales, pues cada usuario final tiene asociado un tipo de idioma y solo recibirá anuncios en ese lenguaje. Si se guarda el mismo anuncio en todos los idiomas que admite el sistema, el usuario con rol empresa sabrá que el anuncio creado por él siempre llegará a un usuario final sea cual sea su idioma.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/CreacionAnunciosWeb}
    \caption{\emph{Usuarios rol empresa: creación de anuncios aplicación Web}}
    \label{fig:CreacionAnunciosWeb}
\end{figure}


\subsubsection{Usuarios rol empresa: listado, edición y creación de categorías }
