MOBILE-D Desarrollo de

Aplicaciones para
Dispositivos móviles

Jhoan Sebastián Gómez Entrega

David Felipe Hernández
2016 Numero Uno
DESARROLLO DE APLICACIONES PARA DISPOSITIVOS MOVILES

JHOAN SEBASTIAN GOMEZ MEDINA

DAVID FELIPE HERNANDEZ ZULETA

UNIVERSIDAD DEL QUINDIO

INGENIERIA DE SISTEMAS Y COMPUTACION
ARMENIA QUINDIO
2016
PRIMERA ENTREGA PROYECTO FINAL PRIMER SEMESTRE 2016

JHOAN SEBASTIAN GOMEZ MEDINA

DAVID FELIPE HERNANDEZ ZULETA

Proyecto Final-Electiva Profesional III.

Entrega número uno
Análisis y diseño de la aplicación
CAMPUSUQ

Ingeniero:
Einer Zapata
Ing. Sistemas y Computación

UNIVERSIDAD DEL QUINDIO

INGENIERIA DE SISTEMAS Y COMPUTACION
ARMENIA QUINDIO
2016
 DESCRIPCIÓN DE LOS MOCKUPS

Tabla de Contenido

Tabla de Contenido ............................................................................................................................. 4

Tabla de Ilustraciones.......................................................................................................................... 4
Screen principal para las categorías de los números telefónicos y la vista en orientación horizontal
de los números telefónicos, extensiones y nombre de las dependencias ...................................... 6
Screen de llamadas y sus orientaciones de pantalla ..................................................................... 10
Screen que muestra mensaje en caso de que no se tenga conexión a internet y sus orientaciones
de pantalla..................................................................................................................................... 11
Screen que muestra el menú de opciones y sus orientaciones de pantalla ................................. 13
Screen de la navegación en la página de la universidad desde la aplicación y las orientaciones de
pantalla.......................................................................................................................................... 15
Screen para mostrar mensaje en caso de no tener conexión a internet en el momento de visitar
la página de la Universidad desde la aplicación y sus orientaciones de pantalla ......................... 17
Screen para iniciar sesión la primera vez que se ingresa a la aplicación y sus orientaciones de
pantalla.......................................................................................................................................... 19
Screen para cuando se están cargando los contactos la primera vez que se ingresa a la aplicación
y sus orientaciones de pantalla ..................................................................................................... 22
Screen que muestra las noticias de la universidad y sus orientaciones de pantalla .................... 24
Screen que muestra el detalle de una noticia que el usuario ha seleccionado y sus orientaciones
de pantalla..................................................................................................................................... 26
Screen que muestra los datos y el perfil del estudiante que ingreso a la App y sus orientaciones
de pantalla..................................................................................................................................... 28
Screen que permite enviar sugerencias de la aplicación y sus orientaciones de pantalla ........... 32

Tabla de Ilustraciones

Figura 1: Screen Vertical de las categorías donde están ubicadas las dependencias. ........................ 7
Figura 2: Screen Horizontal de las categorías donde están ubicadas las dependencias. ................... 8
Figura 3: Screen Vertical de los números telefónicos y extensiones por dependencias. ................... 9
Figura 4: Screen Vertical, Realizando llamada. ................................................................................. 10
Figura 5: Screen Horizontal, Realizando llamada. ............................................................................. 11
Figura 6: Screen Vertical donde se muestra que al actualizar los números telefónicos no se tiene
conexión a internet. .......................................................................................................................... 12
Figura 7: Screen Horizontal donde se muestra que al actualizar los números telefónicos no se tiene
conexión a internet. .......................................................................................................................... 13
Figura 8: Screen Vertical donde se muestra el menú de opciones que tiene la aplicación. ............. 14
Figura 9: Screen Horizontal donde se muestra el menú de opciones que tiene la aplicación. ........ 15
Figura 10: Screen Vertical, navegando en la página de la universidad desde la aplicación. ............ 16
Figura 11: Screen Horizontal, navegando en la página de la universidad desde la aplicación. ........ 17
Figura 12: Screen Vertical donde se muestra en el instante de ingresar a la página de la
Universidad no se tiene conexión a internet. ................................................................................... 18
Figura 13: Screen Horizontal donde se muestra en el instante de ingresar a la página de la
Universidad no se tiene conexión a internet. ................................................................................... 19
Figura 14: Screen Vertical donde el usuario ingresa el usuario y la contraseña para acceder a la
aplicación. ......................................................................................................................................... 20
Figura 15.1: Screen Vertical que muestra el error cuando un usuario intenta ingresar con los datos
incorrectos. ....................................................................................................................................... 21
Figura 16: Screen Horizontal donde el usuario ingresa el usuario y la contraseña para acceder a la
aplicación. ......................................................................................................................................... 22
Figura 17: Screen Vertical donde se muestra y se informa al usuario que los contactos se están
instalando en la App .......................................................................................................................... 23
Figura 18: Screen Horizontal donde se muestra y se informa al usuario que los contactos se están
instalando en la App. ......................................................................................................................... 24
Figura 19: Screen Vertical donde se encuentra la lista de noticias de universidad. ......................... 25
Figura 20: Screen Horizontal donde se encuentra la lista de noticias de universidad...................... 26
Figura 21: Screen vertical que muestra el detalle de una noticia que se seleccionó en el Screen
anterior.............................................................................................................................................. 27
Figura 22: Screen Horizontal que muestra el detalle de una noticia que el usuario seleccionó. .... 28
Figura 23: Screen vertical que muestra los datos del usuario que se registró en la App. ................ 29
Figura 24: Screen horizontal que muestra los datos del usuario que se registró en la App. ............ 30
Figura 25: Screen vertical que permite modificar los datos los datos del usuario. .......................... 31
Figura 26: Screen vertical que permite enviar sugerencias. ............................................................. 32
Figura 27: Screen Horizontal que permite enviar sugerencias. ........................................................ 33
Screen principal para las categorías de los números telefónicos y la vista en orientación
horizontal de los números telefónicos, extensiones y nombre de las dependencias
Figura 1: Screen Vertical de las categorías donde están ubicadas las dependencias.
 Figura 2: Screen Horizontal de las categorías donde están ubicadas las dependencias.

Esta pantalla Figura 1 muestra inicialmente la parte de los números telefónicos, y allí mismo
están organizados por categorías, se puede buscar teléfonos por dependencia y se tiene un
menú donde se tiene el direccionamiento a la página de la universidad, vista del perfil y el
cambio de idioma, e puede deslizar a la derecha y allí se encontrar la sección de noticias.
Al seleccionar una categoría se puede observar que aparecen las dependencias de dicha
categoría, donde se tiene organizado el teléfono el nombre de la dependencia, el número
telefónico y su extensión, al seleccionar un dato de estos se puede realizar una llamada. Allí
se permite actualizar todos los números telefónicos de dichas dependencias, esto se puede
realizar por medio del botón superior derecho. En la Figura 1 se muestra la pantalla vertical
donde solo se observan las categorías y al seleccionar una o buscarla se muestra otra
pantalla con las dependencias, por el contrario en la Figura 2 se muestra la orientación
vertical, en la cual al seleccionar una categoría ubicadas en la zona izquierda de la pantalla,
a su derecha saldrá la información de las dependencias asociadas con sus respectivos
números telefónicas, extensiones y la posibilidad de realizar una llamada, y en la pantalla
general esta las posibilidades de actualizar y buscar.

Para la pantalla vertical Figura 3, cuando se selecciona categoría se muestra una pantalla
adecuada para la posición del dispositivo, de igual modo se puede realizar llamadas cuando
el usuario selecciones el número telefónico, o su extensión, se permite buscar por
dependencias y actualizar los datos allí registrados, en esta pantalla se puede regresar a las
dependencias.
Figura 3: Screen Vertical de los números telefónicos y extensiones por dependencias.
Screen de llamadas y sus orientaciones de pantalla

Cuando se realiza una llamada Figura 4 para la posición vertical de un dispositivo se puede
colgar la llamada con el botón que tiene símbolo de un teléfono hacia abajo, y también se
puede observar los datos de a quien se está llamando, su número telefónico, extensión y
foto de la facultad a la cual pertenece.

Figura 4: Screen Vertical, Realizando llamada.

Para dispositivos con orientación Horizontal Figura 5 la funcionalidad no cambia con

respecto a la posición vertical, ya que sale la información de a donde se está realizando la
llamada y la foto de la facultad a la cual pertenece dicha dependencia.
 Figura 5: Screen Horizontal, Realizando llamada.

Screen que muestra mensaje en caso de que no se tenga conexión a internet y sus
orientaciones de pantalla

Como la información del directorio debe ser consumida desde un servicio web (solo se debe
realizar la primera vez que la aplicación sea ejecutada). Al se hace uso de la opción de
actualizar números telefónicos, como esta funcionalidad hace uso de la web, en caso de no
tener conexión a internet Figura 6 para orientación vertical, se mostrara un mensaje que
indica que no se posee de conexión a red y por lo tanto no será posible realizar la tarea
requerida en ese caso (actualizar los números telefónicos de dicha categoría), se tiene allí
la opción de regresar o volver a intentar a actualizar o se puede buscar ya que esta tarea no
requiere de la conexión.
Figura 6: Screen Vertical donde se muestra que al actualizar los números telefónicos no se
tiene conexión a internet.

Esta funcionalidad para la orientación horizontal Figura 7, varía dependiendo de cómo se

muestran los contactos para este caso, se verá igualmente al lado izquierdo las categorías
y al lado izquierdo en el campo de las dependencias aparecerá el mensaje en caso de no
tener la conexión a internet y la tarea de actualizar no pueda ser realizad. De igual modo se
puede realizar de nuevo la acción de actualizar en caso de recuperar la conexión, y buscar
queda habilitado ya que esta tarea no depende de tener conexión a internet.
Figura 7: Screen Horizontal donde se muestra que al actualizar los números telefónicos no
se tiene conexión a internet.

Screen que muestra el menú de opciones y sus orientaciones de pantalla

La aplicación posee un menú de opciones donde se puede acceder al perfil de usuario, ir a

la página de la universidad o cambiar el idioma de la App, la orientación vertical Figura 8 y
para la orientación horizontal Figura 9 se muestra de igual forma.
Figura 8: Screen Vertical donde se muestra el menú de opciones que tiene la aplicación.
Figura 9: Screen Horizontal donde se muestra el menú de opciones que tiene la aplicación.

Screen de la navegación en la página de la universidad desde la aplicación y las

orientaciones de pantalla

Cuando se selecciona en el menú la opción de ir a la página de la universidad llamada “visita

la U” inmediatamente se direcciona a la página principal donde se puede navegar
libremente en ella. Con el botón en forma de X se puede regresar a la App tanto en la Figura
10 para orientación vertical y horizontal Figura 11 se muestra de igual forma y la página se
muestra en la misma aplicación la página principal de la U y a partir de allí empezar a
navegar en ella normalmente.
Figura 10: Screen Vertical, navegando en la página de la universidad desde la aplicación.
 Figura 11: Screen Horizontal, navegando en la página de la universidad desde la
aplicación.

Screen para mostrar mensaje en caso de no tener conexión a internet en el momento de

visitar la página de la Universidad desde la aplicación y sus orientaciones de pantalla

Como en esta opción se hace uso de red o conexión a internet, en caso de que en el
momento no se disponga de la conexión se mostrar un mensaje que comunica que no se
pudo acceder a la página, y se presiona la “X” para regresar a la Aplicación sus orientaciones
Vertical Figura 12 y Horizontal Figura 13 son iguales en ambos casos.
Figura 12: Screen Vertical donde se muestra en el instante de ingresar a la página de la
Universidad no se tiene conexión a internet.
Figura 13: Screen Horizontal donde se muestra en el instante de ingresar a la página de la
Universidad no se tiene conexión a internet.

Screen para iniciar sesión la primera vez que se ingresa a la aplicación y sus orientaciones
de pantalla

En esta parte de la navegación, el usuario debe ingresar el número de identificación o el

usuario con el que está registrado en el sistema y la contraseña, que debe contener como
mínimo 6 dígitos, cuando el usuario presiona el botón ingresar, empezara a hacer la
validación de que el usuario si exista en el sistema y posteriormente pasara a la siguiente
actividad, en caso de que el usuario no coincida con la contraseña se mostrara al usuario un
error como el de la figura 15.1. Sus Orientaciones son las mismas tanto vertical como
horizontalmente.
Figura 14: Screen Vertical donde el usuario ingresa el usuario y la contraseña para acceder
a la aplicación.
Figura 15.1: Screen Vertical que muestra el error cuando un usuario intenta ingresar con
los datos incorrectos.
 Figura 16: Screen Horizontal donde el usuario ingresa el usuario y la contraseña para
acceder a la aplicación.

Screen para cuando se están cargando los contactos la primera vez que se ingresa a la
aplicación y sus orientaciones de pantalla

Cuando el usuario ha ingresado los datos y se han validado correctamente, pasara a esta
ventana donde la App empezara a descargar los contactos del servidor y procederá a
guardarlos en el teléfono, el usuario debe dar clic en el botón continuar para avanzar a la
siguiente actividad, si no se han descargado completamente los contactos aparecerá la
agenda vacía pero cuando finalice la descarga se mostraran los contactos al usuario.
Figura 17: Screen Vertical donde se muestra y se informa al usuario que los contactos se
están instalando en la App
 Figura 18: Screen Horizontal donde se muestra y se informa al usuario que los contactos
se están instalando en la App.

Screen que muestra las noticias de la universidad y sus orientaciones de pantalla

En esta actividad, el usuario tendrá la oportunidad de ver las noticias actuales de la

universidad, en esta parte, aparecerá el título, el inicio del contenido de la noticia pero no
completo, la imagen pequeña de la noticia al lado derecho y los botones para compartir en
las redes sociales Facebook y twiter. Sus Orientaciones son las mismas tanto vertical como
horizontalmente.
Figura 19: Screen Vertical donde se encuentra la lista de noticias de universidad.
Cuando el usuario presiona uno de estos botones para compartir o cuando presiona el titulo
la imagen o el texto, se abrirá la interfaz que contiene la noticia completa para que
posteriormente pueda proceder a leerla o compartirla en las redes sociales.

Figura 20: Screen Horizontal donde se encuentra la lista de noticias de universidad.

Screen que muestra el detalle de una noticia que el usuario ha seleccionado y sus
orientaciones de pantalla.

Cuando el usuario decide ver una noticia aparecerá esta interfaz donde se muestra la
imagen grande de la noticia, el título, la fecha y todo el contenido, adicionalmente los
botones de las redes sociales donde el usuario puede compartir, al hacer clic sobre estos,
se hace un llamado a la aplicación correspondiente si la tiene instalada para que comparta
el contenido, de lo contrario abrirá el navegador web para que inicie sesión y pueda
compartir el contenido en su perfil.
Figura 21: Screen vertical que muestra el detalle de una noticia que se seleccionó en el
Screen anterior.
en orientación horizontal (figura 22) varia la manera como se muestran las noticias, en este
caso la imagen pasa al lado izquierdo mientras toda la descripción , el título , la fecha y los
botones para compartir se muestran en la parte derecha de la pantalla.

Figura 22: Screen Horizontal que muestra el detalle de una noticia que el usuario
seleccionó.

Screen que muestra los datos y el perfil del estudiante que ingreso a la App y sus
orientaciones de pantalla

El usuario puede ver sus datos personales e institucionales ingresando a esta interfaz,
donde mostrara el nombre completo del usuario, el correo institucional, el teléfono
personal y una fotografía por defecto hasta que el usuario la decida cambiar por una imagen
personalizada.
Figura 23: Screen vertical que muestra los datos del usuario que se registró en la App.
En orientación horizontal (figura 24) varia la manera como se muestra el perfil, en este caso
la imagen del usuario pasa al lado izquierdo mientras toda la información se muestra en la
parte derecha de la pantalla.

Figura 24: Screen horizontal que muestra los datos del usuario que se registró en la App.

Cuando el usuario presiona el botón de editar , que se encuentra en la parte superior

derecha, se despliega el siguiente Screen (figura 25)que permite hacer la modificación de la
imagen y de los datos que tiene registrado el usuario.
Figura 25: Screen vertical que permite modificar los datos los datos del usuario.
 Screen que permite enviar sugerencias de la aplicación y sus orientaciones de pantalla

Este screen permite enviar sugerencias de la aplicación a una base de datos, cuenta con un campo
de texto para escribir la descripción y un botón para enviar la información , adicionalmente cuenta
con un botón para cancelar el proceso y volver a la pantalla inicial. Sus Orientaciones son las
mismas tanto vertical como horizontalmente.

Figura 26: Screen vertical que permite enviar sugerencias.

Figura 27: Screen Horizontal que permite enviar sugerencias.