DESARROLLO DE UN SISTEMA MULTIMEDIA QUE PERMITA LA AGRUPACIÓN DE LAS APLICACIONES WEBS Y MÓVILES RELACIONADAS

CON LA UNIVERSIDAD AUTÓNOMA DE OCCIDENTE

CRISTIAN ORLANDO MORALES GIRALDO CARLOS JOSE ROSALES FIGUEROA

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE INGENIERÍA

DEPARTAMENTO DE OPERACIONES Y SISTEMAS PROGRAMA DE INGENIERÍA MULTIMEDIA

SANTIAGO DE CALI 2017

DESARROLLO DE UN SISTEMA MULTIMEDIA QUE PERMITA LA

AGRUPACIÓN DE LAS APLICACIONES WEBS Y MÓVILES RELACIONADAS CON LA UNIVERSIDAD AUTÓNOMA DE OCCIDENTE

CRISTIAN ORLANDO MORALES GIRALDO CARLOS JOSE ROSALES FIGUEROA

Pasantía Institucional para optar el título de Ingeniero Multimedia

Director: ZEIDA MARÍA SOLARTE ASTAIZA

Ingeniera Electrónica Magíster en Ingeniería

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE

FACULTAD DE INGENIERÍA DEPARTAMENTO DE OPERACIONES Y SISTEMAS

PROGRAMA DE INGENIERÍA MULTIMEDIA SANTIAGO DE CALI

2017

3

Nota de aceptación:

Aprobado por el Comité de Grado en cumplimiento de los requisitos exigidos por la Universidad Autónoma de Occidente para optar al título de Ingeniero Multimedia

JUAN JOSÉ CARDONA_____________ Jurado

Santiago de Cali, 02 de Junio de 2017

4

AGRADECIMIENTOS

Ante todo, agradecemos a Dios por habernos permitido llegar hasta esta etapa de nuestra vida académica y haber realizado este trabajo de grado, el cual fue llevado a cabo con pasión y esmero. Pues sin él, no hubiese sido posible realizar y culminar este trabajo. También agradecemos a nuestros padres, quienes con su incondicional compañía y amor nos brindaron la posibilidad de alcanzar esta meta y concretar exitosamente este capítulo de nuestra formación profesional; a ellos queremos darles gracias por su gran esfuerzo y motivación. Queremos agradecer muy especialmente a nuestra directora de trabajo de grado, Zeida María Solarte Astaiza, quien compartió con nosotros cada momento durante el proceso, brindando asesoría, apoyo y todos sus conocimientos para hacer de este trabajo un éxito y una realidad. Finalmente, agradecemos al personal de los departamentos de cómputo y comunicaciones por brindarnos su compañía y atención durante el desarrollo de este proyecto.

5

CONTENIDO

pág.

GLOSARIO 15 RESUMEN 16 INTRODUCCIÓN 17 1. PLANTEAMIENTO DEL PROBLEMA 18 2. JUSTIFICACIÓN 19 3. ANTECEDENTES 20

3.1 NIVEL LOCAL Y NACIONAL 20 3.1.1 Javemóvil 20 3.1.2 Colegio Aleman Cali 21 3.1.3 Alcaldía de Cali Móvil 22

3.2 NIVEL INTERNACIONAL 23 3.2.1 Barcelona al mòbil 23 3.2.2 Mobil barnard 24 3.2.3 Play store 25 4. MARCO TEÓRICO 26 4.1 SISTEMA MULTIMEDIA 26

6

4.2 APLICACIONES MÓVILES 27

4.2.1 Tipos de aplicaciones móviles 28 4.2.1.1 Aplicaciones web 28 4.2.1.2 Aplicaciones nativas 28 4.2.1.3 Aplicaciones híbridas 29

4.3 SISTEMAS OPERATIVOS MÓVILES 29 4.3.1 Android 30 4.3.2 Ios 31 4.4 ENTORNOS DE DESARROLLO 31 4.4.1 Apex (oracle application express) 32 4.4.2 Apache cordova 32 4.4.3 Android studio 32 4.4.4 Jquery mobile 32

4.5 INTERACCIÓN HUMANO COMPUTADOR 33 4.6 USABILIDAD 34 4.7 EXPERIENCIA DE USUARIO 35 4.8 SERVICIOS WEB 36 4.9 CONTROL DE VERSIONES 38 4.9.1 GitHub 38 5. OBJETIVOS 39

7

5.1 OBJETIVO GENERAL 39 5.2 OBJETIVOS ESPECÍFICOS 39 6. MARCO METÓDOLOGICO: DESARROLLO DEL SISTEMA MULTIMEDIA PARA LA AGRUPACION DE LAS APLICACIONES 40

6.1 ANÁLISIS 40 6.1.1 Investigación y recopilación de la información 41 6.1.2 Stakeholders 43 6.1.3 Definición y análisis de los requerimientos 45 6.1.4 Casos de uso 48 6.1.5 Contextos de uso 61 6.2 DISEÑO 61 6.2.1 Arquitectura del sistema 61 6.2.2 Arquitectura del portal administrativo 63 6.2.3 Arquitectura del aplicativo movil 64 6.2.4 Balance del sistema multimedia basado en los tres pilares - ux, hw y sw. 65 6.2.5 Diseño de interfaces de la aplicativo movil 66 6.2.6 Diseño de interfaces del portal administrativo 80 6.2.7 Diseño de los servicios web del aplicativo movil 85 6.2.8 Diseño capa de negocio del portal administrativo 89 6.2.9 Diseño capa de datos 90 6.3 IMPLEMENTACION 91

8

6.3.1 Herramientas de desarrollo 91 6.3.2 Implemetacion de servicios 94 6.3.3 Aplicativo movil 96 6.3.4 PORTAL ADMINISTRATIVO 106 6.4 PRUEBAS 109 6.4.1 Pruebas de aceptación con los casos de prueba 109 BIBLIOGRAFÍA 110 ANEXOS 115

9

LISTA DE FIGURAS

Pág. Ilustración 1: JaveMóvil: 20 Ilustración 2: Colegio Alemán Cali. 21 Ilustración 3: Alcaldía Cali Móvil 22 Ilustración 4: Barcelona al mobil. 23 Ilustración 5: BARNARD 24 Ilustración 6: Google Play Store 25 Ilustración 7: Principios de los sistemas multimedia 26 Ilustración 8: Pilares base del sistema multimedia 27 Ilustración 9: Principios de los sistemas multimedia 33 Ilustración 10: Etapas Metodologia RUP 40 Ilustración 11 Perfil de Usuario 45 Ilustración 12: casos de uso de la aplicación móvil. 49 Ilustración 13: Casos de uso de la aplicación móvil II 56 Ilustración 14: Arquitectura del sistema. 63 Ilustración 15: Arquitectura de la aplicación web. 64 Ilustración 16: arquitectura de la aplicación móvil. 65 Ilustración 17: Arquitectura de información transversal de la aplicación móvil. 67 Ilustración 18: interfaz de inicio. Baja fidelidad. 68 Ilustración 19: Interfaz de noticias. Baja fidelidad. 69

10

Ilustración 20: Interfaz de aplicaciones. Baja fidelidad. 70 Ilustración 21: Interfaz de ajustes. Baja fidelidad. 70 Ilustración 22: Android vs IOS 71 Ilustración 23Interfaz de aplicaciones. Alta fidelidad 72 Ilustración 24: Interfaz de aplicaciones - Móviles. Alta fidelidad. 73 Ilustración 25: Interfaz de aplicaciones – Móviles - detalles. Alta fidelidad. 74 Ilustración 26: Interfaz de aplicaciones - Web. Alta fidelidad. 75 Ilustración 27: Interfaz de noticias. Alta fidelidad. 76 Ilustración 28: Interfaz de noticia en detalle. Alta fidelidad. 77 Ilustración 29: Interfaz inicio. Alta fidelidad. 78 Ilustración 30: correcciones de los prototipos de alta fidelidad 79 Ilustración 31: Navegación transversal jerárquica 80 Ilustración 32: Pantalla de logueo 81 Ilustración 33: Pestaña de aplicaciones 82 Ilustración 34: Crear o modificar aplicaciones 83 Ilustración 35: Botón Crear 84 Ilustración 36: Cargar noticias 85 Ilustración 37: Modelo de negocio, sección de aplicaciones 86 Ilustración 38: modelo de negocio, sección de noticias y eventos 87 Ilustración 39: paquete de datos de servicio de logueo 87 Ilustración 40: Interfaz servicio de Log-In 88 Ilustración 41: paquete de datos de servicio de Aplicaciones 88

11

Ilustración 42: Modelo de negocio de la página administrador 89 Ilustración 43: Modelo Entidad Relación en la base de datos 90 Ilustración 44Herramientas de desarrollo de la aplicación móvil. 93 Ilustración 45: Desarrollo de los servicios 94 Ilustración 46: Respuesta del servidor 95 Ilustración 47: Diferencias entre sistemas operativos 97 Ilustración 48: Interfaz de inicio 98 Ilustración 49: Mensaje de alerta, recuperación de contraseña 99 Ilustración 50: Mensaje de carga de la aplicación 100 Ilustración 51: Interfaz de noticias 101 Ilustración 52: Interfaz de aplicaciones móviles y web. 102 Ilustración 53: Descripción de una página web 103 Ilustración 54: Interfaz de ajustes 104 Ilustración 55: Mensaje conformación de cierre de sesión 105 Ilustración 56: Género 115 Ilustración 57: Edad 115 Ilustración 58: Facultad a la que pertenece el programa. 115 Ilustración 59: Semestre en el que se encuentra 116 Ilustración 60: Pregunta 1. 117 Ilustración 61: Pregunta 2 117 Ilustración 62: Pregunta 3 117

12

Ilustración 63: Pregunta 4 118 Ilustración 64: Pregunta 5 119 Ilustración 65: Pregunta 6 119 Ilustración 66: Pregunta 7 120 Ilustración 67: Pregunta 8 120 Ilustración 68: Pregunta 9 121

13

LISTA DE CUADROS

Pág. Tabla 1 Tabla de requerimientos funcionales de la aplicación móvil. 46 Tabla 2 Tabla de requerimientos no funcionales de la aplicación móvil. 47 Tabla 3: caso de uso: “Autenticación de usuario” 50 Tabla 4: caso de uso: “Módulo de noticias” 51 Tabla 5: caso de uso: “Módulo de aplicaciones móviles y páginas web” 52 Tabla 6: caso de uso: “Ajustes” 54 Tabla 7: Matriz de trazabilidad 55 Tabla 8: caso de uso: “Autenticación de usuario” 57 Tabla 9: caso de uso: “Módulo de noticias” 58 Tabla 10: caso de uso: “Cierre de sesión” 59 Tabla 11: Matriz de trazabilidad II 60 Tabla 12: Criterios de selección para herramientas de desarrollo 91 Tabla 13: Matriz de selección SW 92 Tabla 14Tabla usuarios 106 Tabla 15Tabla Perfiles 107 Tabla 16Tabla Noticias 107 Tabla 17 Tabla Aplicaciones 108 Tabla 18Tabla Dispositivos 108

14

Tabla 19: Caso de prueba 1 124 Tabla 20: Caso de prueba 2 126 Tabla 21: Caso de prueba 3 128 Tabla 22: Caso de prueba 4 130 Tabla 23: Caso de prueba 1. Validación de credenciales portal web 132 Tabla 24: Caso de prueba 2. Módulo de noticas portal web. 134 Tabla 25: Caso de prueba 3. Sección de aplicaciones portal web. 136 Tabla 26: Caso de prueba 4 139

15

GLOSARIO APLICACIÓNES MÓVILES: las aplicaciones móviles, son herramientas de software desarrolladas para dispositivos Smartphone, con el fin de satisfacer necesidades de diferentes nichos poblacionales, ya sean de entretenimiento, aprendizaje, negocios o de información. BACKEND: aspecto lógico del sistema no accedido directamente por el usuario, realiza funciones de consulta de base de datos principalmente y envía la respuesta para ser presentada al usuario. FRAMEWORK: estructura base ya creada por otros desarrolladores para agilizar la construcción de software. FRONTEND: aspecto visual por el cual interactúa el usuario y permite la entrada de información para ser enviada a la parte lógica del sistema. INTERACCIÓN: acción generada entre dos o más objetos o individuos que involucra una causa y un efecto. RUP: siglas para Rational Unified Process o Proceso Racional Unificado en español, es una metodología de desarrollo de software que se organiza en cuatro principales fases (Iniciación, Elaboración, Construcción y Transición). SISTEMA MULTIMEDIA: sistemas interactivos complejos que hacen uso de información multimedia (imágenes, animación, texto, sonido y video), soportados por tecnologías hardware y software en donde se tiene en cuenta la interacción que tienen los usuarios con la tecnología. USABILIDAD: propiedad que mide la facilidad de uso de la interfaz de un producto frente a la interacción que tiene con el usuario.

16

RESUMEN En el presente trabajo de grado se describe el proceso de desarrollo e implementación de un sistema multimedia que permite la agrupación de las aplicaciones web y móviles. El sistema multimedia estará compuesto de dos componentes, el primer componente es una aplicación móvil que tiene como propósito brindar información relevante sobre las aplicaciones y servicios ofrecidos por la Universidad Autónoma de Occidente por medio de los dispositivos móviles de los estudiantes, además de mostrar las noticias y eventos relacionados con la universidad. El segundo componente es una aplicación web diseñada con el fin de administrar los contenidos sobre noticias, aplicaciones móviles y aplicaciones web. El proyecto también toma en consideración lanzamiento de futuras aplicaciones móviles, por lo que se describen una serie de pautas y normas que las aplicaciones deben cumplir para el ingreso al sistema. El desarrollo de esta pasantía universitaria se realizó bajo la metodología de Proceso Racional Unificado (RUP), que consta de las etapas de Inicio, Elaboración, Transición y Lanzamiento que permitieron no sólo completar el desarrollo e implementación sino también simplificar y detallar los procesos de integración con los sistemas de la universidad, complementar los diferentes componentes del sistemas y realizar pruebas de funcionamiento y de usabilidad. Palabras clave: Aplicación móvil híbrida, Desarrollo de software, Usabilidad, Metodología RUP.

17

INTRODUCCIÓN “En la actualidad, la penetración de la telefonía móvil en los países desarrollados es del 100% y el crecimiento que experimenta anualmente es mínimo, mientras que en los países en vía de desarrollo se está produciendo un crecimiento anual significativo”1. Los estudiantes de la universidad no son ajenos a esta tendencia de uso de los teléfonos inteligentes, por lo tanto se plantea en la Universidad Autónoma de Occidente, la necesidad de desarrollar aplicativos móviles para que la comunidad universitaria tenga mayor acceso a la información de los procesos académicos y administrativos de la universidad. En consecuencia a que dichos aplicativos responderán a las necesidades puntuales de los diferentes estamentos universitarios, la Universidad Autónoma de Occidente contará con una gran cantidad de aplicaciones móviles, generando en sus usuarios frustración al tener que cambiar entre aplicativos para poder acceder a información relevante tales como: servicios académicos, financieros, noticias, eventos, etc. En este proyecto, el cual nace bajo la modalidad de pasantía institucional, se plantea el desarrollo de un aplicativo móvil, el cual agrupará los recursos web y móviles de la universidad Autónoma de Occidente, así como también las noticias y eventos relacionados con la institución, con el fin de facilitar el acceso a la información requerida por la comunidad universitaria. Además de definir una serie de parámetros que permitirá normalizar el desarrollo y la imagen corporativa de la institución.

1Measuring the Information Society Report 2014 [en línea]. Suiza. International Telecommunications Union (ITU). [consultado el 24 de Marzo 2016]. Disponible en internet: https://www.itu.int/en/ITU-D/Statistics/Documents/publications/mis2014/MIS2014_without_Annex_4.pdf

18

1. PLANTEAMIENTO DEL PROBLEMA

Según el informe Cifras 2016-32 de la universidad Autónoma de Occidente, en el tercer periodo del 2016 la Universidad Autónoma de Occidente contaba con 10.841 estudiantes matriculados en 50 programas académicos ofrecidos, con aproximadamente 696 docentes dictando asignaturas. Con la necesidad de cubrir el despliegue de la información requerida por la comunidad universitaria, la Universidad Autónoma de Occidente dispuso gran variedad de plataformas y aplicaciones web. Sin embargo, actualmente el acceso a la información de la universidad solo se puede realizar a través de su plataforma web, por lo cual la Universidad Autónoma plantea a futuro el desarrollo de diferentes aplicaciones móviles, para responder de manera más eficiente a las necesidades puntuales de los diferentes estamentos de la comunidad académica. El hecho de desarrollar múltiples aplicaciones móviles, generará un problema interno en la universidad, por lo cual surge el interrogante: ¿Cómo la comunidad académica accederá de manera fácil a las aplicaciones móviles existentes? La no solución del problema planteado, podría generar frustración en los usuarios al tener que navegar entre diferentes sitios para encontrar los aplicativos que le permitan acceder a información relevante; tales como servicios académicos, financieros, noticias, eventos, etc. Dado lo anterior en este proyecto se plantea la creación de un espacio en donde se agrupen las futuras aplicaciones móviles y las páginas y servicios web actuales, con el propósito de facilitar su acceso a la comunidad, además de mostrar las noticias de intereses del estudiante desde la aplicación. Además debido a las necesidades de los Stakeholders, se requiere un desarrollo rápido de la solución que cuenten con conceptos como: HCI (Interacción Humano Computador), UX (Experiencia de Usuario), WS (Servicios Web), etc. Que garantice la integridad de los datos en los servidores de la universidad, aumentando el valor de los servicios universitarios brindados. 2 Cifras 2016-3. [en línea]. Santiago de Cali: Universidad Autónoma de Occidente.2016 [consultado el 24 de Marzo de 2016]. Disponible en internet: http://www.uao.edu.co/la-universidad/universidad-autonoma-de-occidente-en-cifras

19

2. JUSTIFICACIÓN La Universidad Autónoma de Occidente piensa desarrollar diversas aplicaciones móviles para los diferentes estamentos de la universidad, solución que busca facilitar el rápido acceso a la información, medida que se adoptó teniendo en cuenta la gran penetración de los Smartphone que se ve en la actualidad. Sin embargo esta variedad de aplicativos podrían generar frustración hacia sus usuarios, por la desinformación a la hora de saber cuáles son las aplicaciones de interés y la accesibilidad a estas al tener que realizar diferentes descargas y tener puntos de accesos distintos. Esta variedad de aplicaciones, si tuviera un punto de acceso único, un solo portal, que facilitara el acceso a las aplicaciones móviles de la universidad, y además que cada una tuviera una descripción, generaría en el usuario una experiencia más agradable, ya que este podría descargar fácilmente las aplicaciones que más le interesen. Adicionalmente la agrupación de las aplicaciones de la Universidad Autónoma de Occidente, permitiría facilitar la gestión de contenidos e imagen corporativa de estas mismas a partir de la creación de unos estándares que regulen la integración de futuras aplicaciones con el sistema. Sin embargo, el planteamiento de un punto de acceso en una plataforma de dispositivos móviles que no cuente con una interfaz intuitiva y el usuario aprenda rápidamente a navegar y utilizar sus funcionalidades, tendría el efecto contrario al que la universidad plantea. Por este motivo es imprescindible la aplicación de conceptos como usabilidad, accesibilidad, experiencia de usuario etc. Y de procesos de prototipado, heurísticas de usabilidad, pruebas con usuarios, etc. Por tanto, se plantea el desarrollo de un sistema multimedia que permita la agrupación de las aplicaciones web y móviles relacionadas con la Universidad Autónoma de Occidente, el cual es importante para enriquecer la experiencia del usuario, al generar una convergencia entre los diferentes canales de servicios de la universidad (aplicaciones móviles, y web), buscando generar una experiencia más coherente y usable, aprovechando los dispositivos móviles que le dan un valor agregado en cuanto a versatilidad y comodidad. Propuesta válida desde la perspectiva de la alta penetración de los dispositivos móviles en Colombia, según Lunden3, estudios realizados en el 2014 sobre la penetración de los dispositivos móviles en Latinoamérica, Colombia se posiciona en el tercer puesto, tendencia a la cual no es ajena la Universidad Autónoma de Occidente. 3 LUNDEN, Ingrid. 6.1B SMARTPHONE Users Globally by 2020, Overtaking Basic Fixed Phone Subscriptions. Techcrunch.com [en línea]. Junio 2015. [consultado el 24 de Marzo de 2016]. Disponible en internet:http://techcrunch.com/2015/06/02/6-1b-smartphone-users-globally-by-2020-overtaking-basic-fixed-phone-subscriptions/

20

3. ANTECEDENTES

A continuación se presentan algunos desarrollos existentes de plataformas web adaptadas a dispositivos móviles y aplicaciones móviles que integran una variedad de servicios ofrecidos a los usuarios, que servirán como punto de partida para dar un ejemplo más específico de las funciones y características del proyecto a desarrollar. 3.1 NIVEL LOCAL Y NACIONAL 3.1.1 Javemóvil.

Ilustración 1: JaveMóvil:

Fuente: JaveMóvil Pontificia Universidad Javeriana Cali [en línea]. Apple.com Itunes [consultado el 24 de Marzo de 2016]. Disponible en internet: https://itunes.apple.com/co/app/javemovil-2/id946790061?mt=8

21

JaveMóvil es la aplicación para dispositivos móviles de la Pontificia Universidad Javeriana, con la que los estudiantes pueden saber de sus clases, salones y edificios; contactar compañeros; mantenerse al tanto de las noticias y eventos, entre otras muchas utilidades que se ofrecerán en esta primera versión de la aplicación. 3.1.2 COLEGIO ALEMAN CALI

Ilustración 2: Colegio Alemán Cali.

Fuente: Aplicación colegio alemán [en línea]. Androidpit.es [consultado el 24 de Marzo de 2016]. Disponible en internet: http://www.androidpit.es/aplicacion/com.appmachine.p4908EJ Colegio Alemán Cali es la aplicación para dispositivos móviles del Colegio Alemán Cali, con la que los estudiantes pueden saber de sus clases, salones y edificios; contactar compañeros; mantenerse al tanto de las noticias y eventos, entre otras muchas utilidades que se ofrecerán en esta primera versión de la aplicación.

22

3.1.3 Alcaldía de Cali móvil. Ilustración 3: Alcaldía Cali Móvil

Fuente: Cali App [en línea] Google Play [consultado el 24 de Marzo de 2016]. Disponible en internet: https://play.google.com/store/apps/details?id=com.alcaldiacalimovil Aplicativo móvil que te permite acceder a los diferentes servicios móviles y en línea que ofrece la Alcaldía de Santiago de Cali, a través de tu SMARTPHONE o tableta, con el fin que agilicen y simplifiquen sus tareas y mejoren los servicios ofrecidos para ellos. Además de ser una referencia en cuanto a la función de la aplicación en sí, es una referencia en cuanto al como el aplicativo muestra la información de los aplicativos y servicios disponibles y re direcciona al usuario al servicio requerido.

23

3.2 NIVEL INTERNACIONAL 3.2.1 Barcelona al Mòbil. Ilustración 4: Barcelona al mobil.

Fuente: Barcelona al mobil [en línea] itunes.apple.com [consultado el 24 de Marzo de 2016]. Disponible en internet: https://itunes.apple.com/es/app/barcelona-al-mobil/id476286604?mt=8 Barcelona al móbil, permite el acceso directo a todos los servicios para móviles del ayuntamiento de Barcelona, donde el usuario podrá descargar aplicaciones nativas que se pueden descargar del Market, además de servicios web, SMS y RSS.

24

3.2.2 Mobil barnard.

Ilustración 5: Barnard

Fuente: Barnard [en línea]. Barnard.edu [consultado el 24 de Marzo de 2016]. Disponible en internet: http://a2.mzstatic.com/us/r30/Purple7/v4/24/c4/56/24c4567f-2b20-8280-95b6-264b20fa2d6d/screen322x572.jpeg Barnard es una universidad ubicada en al oeste de la ciudad de New York y cerca del este de Manhattan, sobresale en involucrar a los estudiantes potenciales con su aplicación para el campus. Tiene un módulo de admisión integral y una gran variedad de vídeos que le da al visitante una sensación real para el campus. Con una gran variedad de módulos como se puede ver en la primera imagen.

25

3.2.3 Play store.

Ilustración 6: Google Play Store

Fuente: Google Play Store [en línea]. Descargaplaystore.mobi [consultado el 24 de Marzo de 2016]. Disponible en internet: http://descargaplaystore.mobi/wp-content/uploads/2015/10/descargar-play-store1.jpg La play store es una tienda virtual de aplicaciones, música, películas, y libros, para dispositivos móviles, en ella se puede descargar aplicaciones, guarda un registro de las aplicaciones que uno posee, se puede ejecutar dichas aplicaciones desde la aplicación, además que posee categorías para realizar búsquedas. Calificación y comentarios por parte del usuario.

26

4. MARCO TEÓRICO

Teniendo en cuenta la temática que se aborda para la ejecución del proyecto, existen una gran variedad de conceptos que permitirán la comprensión y desarrollo del mismo. A continuación se presenta una descripción concisa y detallada de los aspectos más relevantes, con el fin de contextualizar el alcance del proyecto. 4.1 SISTEMA MULTIMEDIA Sistemas interactivos complejos que hacen uso de información multimedia, soportados por tecnologías hardware y software en donde se tiene en cuenta la interacción que tienen los usuarios con la tecnología, además que permite una comunicación multisensorial y multidireccional. Para llegar a la creación de un sistema multimedia, se deben tener en cuenta ciertos conceptos y principios basados en disciplinas como procesamiento de imágenes y audio, HCI (Interacción hombre - máquina), visión por computador, reconocimiento de patrones, gráficos por computador, redes y sistemas operativos.4 Ilustración 7: Principios de los sistemas multimedia

Fuente: Principios de los sistemas multimedia. [en línea]. Computer Science department, 2007. [Consultado el 12 de Marzo de 2016]. Disponible en internet: http://www.cs.bc.edu/~hjiang/c335/

4 JIANG Hao. Introduction CS335. Principles of multimedia systems. Computer Science Department [en línea]. 2007 [consultado el 12 de Marzo 2016]. Disponible en internet http://www.cs.bc.edu/~hjiang/c335/notes/lec1/intro.ppt

27

Los sistemas multimedia, se encuentran basados en tres pilares que son: Hw (hardware), Sw (software) y UX (experiencia de usuario). De los cuales, dependiendo del sistema a implementar habrán pilares que presenten mayor importancia que otros. A continuación, se muestra la relación entre los tres pilares para formar un sistema multimedia:

Ilustración 8: Pilares base del sistema multimedia

Fuente: Principios de los sistemas multimedia. [En línea]. Computer Science department. Septiembre 4 2007. [Consultado el 12 de Marzo de 2016]. Disponible en internet: http://www.cs.bc.edu/~hjiang/c335/ 4.2 APLICACIONES MÓVILES Las aplicaciones móviles, son pequeños programas o aplicaciones informáticas que realizan funciones para las que han sido diseñadas: juegos, calculadoras de todo tipo, directorios, glosarios, programas formativos, presentaciones o catálogos de empresas, etc. Permite a las empresas ofrecer nuevos servicios a los clientes o personal interno con multitud de información y contenidos en formatos muy atractivos, todo a través de teléfonos móviles o tabletas. Se pueden descargar e instalarse en cualquier dispositivo móvil de última generación (Smartphone) y permiten a sus usuarios ejecutarlos con o sin conexión a internet.

28

“Actualmente se encuentran aplicaciones de todo tipo, forma y color, pero en los primeros teléfonos, estaban enfocadas en mejorar la productividad personal: se trataba de alarmas, calendarios, calculadoras y clientes de correo”.5 4.2.1 Tipos de aplicaciones móviles: Es importante aclarar, que no todas las aplicaciones móviles, tienen las mismas características, ni son del mismo tipo. Los tipos aplicaciones móviles que se conocen son, nativos, web e híbridos. 4.2.1.1 Aplicaciones web: “Sitio web específicamente optimizado para un dispositivo móvil. Las características que definen una aplicación web son las siguientes: la interfaz de usuario se construye con tecnologías web estándar, para acceder a estas aplicaciones es por medio de un navegador y una URL (pública, privada o protegida) y está optimizada para los dispositivos móviles. Una aplicación web no está instalada en el dispositivo móvil”.6 4.2.1.2 Aplicaciones nativas: Las aplicaciones nativas son aquellas que han sido desarrolladas con el software que ofrece cada sistema operativo a los programadores, llamado genéricamente Software Development Kit o SDK. Así, Android, iOS y Windows Phone tienen uno diferente y las aplicaciones nativas se diseñan y programan específicamente para cada plataforma, en el lenguaje utilizado por el SDK. Este tipo de apps se descarga e instala desde las tiendas de aplicaciones, sacando buen partido de las diferentes herramientas de promoción y marketing de cada una de ellas. Las aplicaciones nativas se actualizan frecuentemente y en esos casos, el usuario debe volver a descargarlas para obtener la última versión, que a veces corrige errores o añade mejoras. A nivel de diseño, esta clase de aplicaciones tiene una interfaz basada en las guías de cada sistema operativo, logrando mayor coherencia y consistencia con el

5 CUELLO Javier y VITTONE Jóse. Diseñando apps para móviles [en línea]. España. 2013 [consultado el 16 de Marzo 2016]. Disponible en internet: http://www.appdesignbook.com/es/contenidos/las-aplicaciones/ 6 PRIETO BLÁZQUEZ, Joseph. RÁMIREZ VIQUE, Robert, MORILLO POZO, Julián David. DOMINGO PIETRO, Marc. Tecnología y desarrollo e dispositivos móviles. Entornos de programación móviles [en línea]. 1 ed. Barcelona: Eureca Media, SL. 2011 [consultado el 13 de Marzo de 2016]. Disponible en internet: https://desarrolloappandroid.files.wordpress.com/2013/06/tecnologia-desarrollo-dispositivos-moviles.pdf

29

resto de aplicaciones y con el propio SO. “Esto favorece la usabilidad y beneficia directamente al usuario que encuentra interfaces familiares”.7 Estas aplicaciones no necesitan Internet para su funcionamiento, ya que se encuentran instaladas en el dispositivo, esto permite manipular todos los componentes de hardware del teléfono, como la cámara y los sensores (GPS, acelerómetro, giróscopo, entre otros). 4.2.1.3 Aplicaciones híbridas: “Las aplicaciones híbridas presentan el mismo comportamiento que las aplicaciones nativas. Es decir, estas pueden ser instaladas en el celular desde las tiendas de aplicaciones móviles, pero poseen cierta diferencia y es que son desarrolladas como las páginas web”8 Son desarrolladas bajo la combinación de tecnologías web como HTML, CSS y JavaScript. La diferencia clave es que se encuentran alojadas dentro de una aplicación nativa usando un “WebView” de la plataforma móvil. La diferencia entre las aplicaciones híbridas y las web es que al estar instaladas en el dispositivo, estas pueden tener acceso a sus sensores como cámara, acelerómetro, giroscopio, etc. Capacidades que normalmente se encuentran restrictas a las aplicaciones web. Actualmente todas las aplicaciones híbridas son exportadas a través de Apache Cordova, una plataforma que provee un set de APIs en JavaScript para acceder a las capacidades del dispositivo por medio de plugins que son creados por código nativo. 4.3 SISTEMAS OPERATIVOS MÓVILES

En el libro “sistemas operativos” escrito por William Stallings, se define un sistema operativo (SO) como aquel que “explota los recursos de hardware de uno

7 CUELLO Javier y VITTONE Jóse. Diseñando apps para móviles [en línea]. España. 2013 [consultado el 16 de Marzo de 2016]. Disponible en internet: http://www.appdesignbook.com/es/contenidos/las-aplicaciones/ 8 BRISTOWE John. ¿What is a Hybrid Mobile App? Developer.telerik.com [en línea]. Marzo 2015 [consultado el 15 de marzo de 2016]. Disponible en internet: http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/

30

o más procesadores para ofrecer un conjunto de servicios a los usuarios de un sistema o aplicación”9. El sistema operativo móvil determina también que aplicaciones de terceras partes se pueden instalar en el dispositivo. Por lo tanto, “cada sistema operativo define unos entornos sobre los que se pueden crear aplicaciones”.10 En este apartado se describirán los sistemas operativos más usados en el mercado de Smartphone entre los cuales se encuentran Android y iOS, además se definirán los entornos de desarrollo sobre los cuales se puede trabajar para estos dos sistemas operativos. 4.3.1 Android: “Android es un sistema operativo para dispositivos móviles como teléfonos inteligentes y tabletas basado en el núcleo Linux. Es desarrollado por la Open Handset Alliance, la cual es liderada por Google, usando diversos conjuntos de herramientas de software de código abierto para dispositivos móviles.”11 Fue construido para permitir a los desarrolladores la creación de aplicaciones móviles que aprovechan al máximo el uso de todas las herramientas que un dispositivo como este puede ofrecer. Implementa una arquitectura en la que cualquier aplicación puede obtener acceso a las capacidades del teléfono móvil. Por ejemplo, una aplicación puede llamar una o varias de las funcionalidades básicas de los dispositivos móviles, tales como realizar llamadas, enviar mensajes de texto, o utilizar la cámara, facilitando a los desarrolladores crear experiencias más ricas y con más coherencia para los usuarios. Está construido sobre el kernel de Linux. Además, se utiliza una máquina personalizada virtual que fue diseñada para optimizar los recursos de memoria y de hardware en un entorno móvil. Android es de código abierto, y además puede ser libremente ampliado para incorporar nuevas tecnologías de vanguardia que van surgiendo. “La plataforma continuará evolucionando a medida que la

9 STALLINGS W. Sistemas Operativos [en línea] 2ed. Madrid: Prenticehall. 1997 [consultado el 16 de Marzo de 2016]. Disponible en internet: http://cs.uns.edu.ar/~jechaiz/sosd/clases/libros/stallings-beymar.pdf 10 GONZALEZ, Daniel. Responsive web design: multidispositivo para mejorar la experiencia del usuario. Bid.ub.edu [en línea]. 1998 [consultado el 17 de Marzo de 2016]. Disponible en internet: http://bid.ub.edu/pdf/31/es/gonzalez2.pdf. ISSN 1575-5886 11 Programación en dispositivos móviles portables. Android [en línea]. Universidad Carlos III de Madrid. Software de comunicaciones [consultado el 17 de Marzo de 2016] Disponible en internet: https://sites.google.com/site/swcuc3m/home/android/portada

31

comunidad de desarrolladores trabajando juntos puedan crear aplicaciones móviles innovadoras”.12 4.3.2 Ios: “IOS es un sistema operativo creado y desarrollado por Apple Inc. Distribuido exclusivamente en el hardware móvil de la compañía como el iPhone, iPad e iPod Touch. Basado en UNIX y BSD, llevando ciertas características de su sistema operativo de escritorio Mac OS X a pantallas de menor tamaño, con métodos de entrada multitáctiles”.13 Antes llamado iPhone OS y distribuido en su primera versión en el 2006 con el iPhone de primera generación como su portador, es el segundo sistema operativo más popular después de Android en el mundo. Apple iOS mantiene innovando ya que anualmente recibe actualizaciones que incluyen nuevos dispositivos que lo portarán y nuevas características, manteniéndolo a la vanguardia de las plataformas móviles. 4.4 ENTORNOS DE DESARROLLO Las aplicaciones móviles representan una gran oportunidad para las diferentes empresas o emprendedores enfocados en el desarrollo de aplicaciones, por lo tanto estos siempre se encuentran en búsqueda de los mejores entornos de desarrollo.

12 GONZALEZ, Daniel. Responsive web design: multidispositivo para mejorar la experiencia del usuario. Bid.ub.edu [en línea]. 1998 [consultado el 17 de Marzo de 2016]. Disponible en internet: http://bid.ub.edu/pdf/31/es/gonzalez2.pdf. ISSN 1575-5886 13 Programación en dispositivos móviles portables. Android. [en línea]. Universidad Carlos III de Madrid. Software de comunicaciones [consultado el 17 de Marzo de 2016] Disponible en internet: https://sites.google.com/site/swcuc3m/home/android/portada

32

4.4.1 Apex (oracle application express): Oracle Application Express (Oracle APEX), se conocía anteriormente como HTML_DB, es una herramienta de desarrollo basada en un navegador web, que permite desarrollar de manera rápida aplicaciones web para la base de datos Oracle. “Utilizando solamente un navegador web y limitada experiencia en programación, se puede desarrollar y desplegar aplicaciones profesionales que son a su vez rápidas y seguras. El lenguaje de programación que va a necesitar, si la funcionalidad estándar del paquete no llena por completo sus necesidades es PL/SQL”14. 4.4.2 Apache cordova: Es un marco de desarrollo móvil de código abierto, el cual permite el uso de tecnologías web estándar como HTML5, CSS3 Y JavaScript para el desarrollo de aplicaciones multiplataforma. “Las aplicaciones se ejecutan dentro de paquetes específicos para cada plataforma, basados en los enlaces de API compatibles con los estándares de acceso a las capacidades de cada dispositivo o sistema operativo”.15 4.4.3 Android studio: Android Studio es un entorno de desarrollo integrado (IDE), basado en IntelliJ IDEA de la compañía JetBrains, que proporciona varias mejoras con respecto al plugin ADT (Android Developer Tools) para Eclipse. “Android Studio utiliza una licencia de software libre Apache 2.0, está programado en Java y es multiplataforma”16. 4.4.4 Jquery mobile: Jquery Mobile es una buena opción para las organizaciones que necesitan un marco web móvil de código abierto que les permitirá aprovechar las capacidades de jQuery. El marco ofrece la posibilidad de usar HTML, JavaScript y CSS para construir páginas web móviles interactivas destinadas a una amplia gama de teléfonos inteligentes, y se puede utilizar con PhoneGap para construir aplicaciones móviles híbridas. 4.4.5 Ionic framework: Ionic es una herramienta de desarrollo de aplicaciones móviles híbridas, esto quiere decir que sirve para compilar aplicaciones tanto para 14 Oracle Application Express [en línea]. Oracle [consultado el 17 de Marzo de 2016]. Disponible en internet: https://apex.oracle.com/es/ 15 About Apache Cordova™ [en línea]. Apache Cordova [consultado el 17 de Marzo de 2016]. Disponible en internet: http://cordova.apache.org 16 Android Studio v10. Características y comparativa con eclipse. Academiaandroid.com [en línea] 2014 [consultado el 18 de Marzo de 2016]. Disponible en internet: http://academiaandroid.com/android-studio-v1-caracteristicas-comparativa-eclipse/

33

Android, y iOS. Ionic está basado en HTML5, CSS, y JS. Está construido usando Sass, y optimizado para trabajar con AngularJS. Desarrollado sobre AngularJS y lanzada su primera beta en el 2013, Ionic utiliza su base para proporcionar la estructura de aplicación mínima sobre la que trabaja (controlador de la aplicación), mientras que Ionic en sí ofrece facilidades en el desarrollo de la interfaz de usuario. Con esta dupla, AngularJS con su versatilidad y potencia para la creación de aplicaciones e Ionic Framework para el desarrollo de la interfaz, se tiene una herramienta de creación de aplicaciones completa, con la que ahorra tiempo y trabajo en el desarrollo de un proyecto.

Ilustración 9: Principios de los sistemas multimedia

Fuente: Principios de los sistemas multimedia [en línea]. Blog.codecentric.de [consultado el 17 de Marzo de 2016] Disponible en internet: https://blog.codecentric.de/files/2014/11/overview.png 4.5 INTERACCIÓN HUMANO COMPUTADOR La Interacción entre humanos y Computadoras, (HCI) (Human-Computer Interaction) es un área de investigación multidisciplinaria enfocada en las modalidades de interacción entre humanos y computadoras, algunas veces se utiliza el término más genérico de Interface Humano Máquina, (HMI), para referirse a la interfaz de usuario en un sistema de manufactura o de control de procesos. En otras palabras, la disciplina HCI investiga y trata todos los aspectos relacionados con el diseño y la implementación de las interfaces entre los humanos y las computadoras. Dada la naturaleza y objetivos, la HCI en forma innata involucra múltiples disciplinas relacionadas con la ciencia de la

34

computación, (procesamiento de imágenes, visión computarizada, lenguajes de programación y otras similares), así como disciplinas relacionadas con las ciencias humanas (ergonomía, factores humanos, psicología cognitiva, y otras similares). “La investigación sobre HCI primariamente concierne al diseño, implementación y especificación de nuevas interfaces para mejorar la interacción entre humanos y máquinas. El término mejora puede quedar relacionado con diferentes aspectos, incluyendo lo intuitivo en el uso, así como la robustez de una interface”17. En el inicio de la ciencia de la computación, los diseñadores y desarrolladores le prestaron mucha menor atención a la problemática de hacer que el hardware y los productos de software fueran utilizables, o 'amigables al usuario.' Así lo requerimientos provenientes desde un creciente conjunto de usuarios para el uso simple de dispositivos eventualmente captaron la atención de los investigadores bajo la denominación de usabilidad. 4.6 USABILIDAD El término usabilidad es relativamente reciente. Se puede decir que surgió poco después de la expansión de Internet, a finales de los años 90. Pero, realmente, la idea que quiere expresar es bastante anterior, aunque se conocía con otros nombres como por ejemplo el Diseño Centrado en el Usuario o Human-Computer Interaction (HCI). “La usabilidad se refiere a la capacidad de un software o sistema interactivo de ser comprendido, aprehendido, usado fácilmente y atractivo para un usuario, en condiciones específicas de uso. También es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar sus objetivos específicos”18. A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad: ● Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la

17 MUÑOZ ARTEAGA, Jaime, et al. Temas de diseño en interacción humano-computadora [en línea]. LATIn 2014 [consultado el 2 de agosto del 2016]. Disponible en internet: http://www.proyectolatin.org/books/Temas_de_Dise%C3%B1o_en_Interacci%C3%B3n_Humano_Computadora_CC_BY-SA_3.0.pdf 18 MONER CANO, David. SABATÈ ALSINA, Jordi. Usabilidad: el guion multimedia. Unsj.edu.ar [en línea] [consultado el 1 de agosto del 2016]. Disponible en internet: http://www.unsj.edu.ar/unsjVirtual/comunicacion/seminarionuevastecnologias/wp-content/uploads/2015/04/usabilidad_para_web.pdf

35

predictibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia. ● Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con menos pasos o más naturales a su formación específica. Tiene que ver con la eficacia y eficiencia de la herramienta. ● Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema. ● Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.

En informática, la usabilidad está muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos y gurú de la usabilidad en los entornos web es Jakob Nielsen, quien definió la usabilidad en el 2003 como "un atributo de calidad que mide lo fáciles de usar que son las interfaces web". 4.7 EXPERIENCIA DE USUARIO La experiencia de usuario o UX es un término que actualmente está en esa extraña posición de ser excitantemente nuevo para muchos, considerado como un componente esencial del proceso de diseño web por expertos de la industria, sin embargo la UX también genera un aire de misterio en torno a ella. Esto es en parte porque es difícil definir exactamente qué es. Al ser entrevistados, los profesionales de la industria dicen que el término puede ser “subjetivo” y “difícil de describir”, ya que tiene varios significados asociados. UX Design (User Experience Design) o “Diseño de Experiencia de Usuario” es una filosofía de diseño que tiene por objetivo la creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo. “Toma forma como un

36

proceso en el que se utilizan una serie de técnicas multidisciplinares y donde cada decisión tomada debe estar basada en las necesidades, objetivos, expectativas, motivaciones y capacidades de los usuarios”19. 4.8 SERVICIOS WEB

El término "Web Service" designa una tecnología que permite que las aplicaciones se comuniquen en una forma que no depende de la plataforma ni del lenguaje de programación. Un servicio web es una interfaz de software que describe un conjunto de operaciones a las cuales se puede acceder por la red a través de mensajería estandarizada. A diferencia de los modelos Cliente/Servidor, tales como un servidor de páginas Web, los Web Services no proveen al usuario una interfaz gráfica (GUI). En vez de ello, los Web Services comparten la lógica del negocio, los datos y los procesos, por medio de una interfaz de programas a través de la red. Es decir conectan programas, por tanto son programas que no interactúan directamente con los usuarios. Los desarrolladores pueden por consiguiente agregar a los Web Services la interfaz para usuarios, por ejemplo mediante una página Web o un programa ejecutable, tal de entregarles a los usuarios una funcionalidad específica que provee un determinado Web Service. Los Web Services usan protocolos basados en el lenguaje XML, JSON, BSON, etc. Con el objetivo de describir una operación para ejecutar o datos para intercambiar con otro servicio web. Un grupo de servicios web que interactúa de esa forma define la aplicación de un servicio web específico en una arquitectura orientada a servicios (SOA). Uno de los mecanismos más usado para el intercambio de información es JSON o (JavaScript Object Notation) es un formato de texto ligero usado para la transmisión de datos entre dispositivos, con la facilidad que permite el paso de JSON a un objeto de JavaScript y viceversa. Básicamente JSON describe los datos con una sintaxis dedicada que se usa para identificar y gestionar los datos. 19 CORDOBA CELY, Carlos Andrés. La experiencia de usuario extendida (UxE) [en línea]. Tesis doctoral. Doctorado en ingeniería multimedia. Barcelona. Universidad politécnica de Cataluña. Escuela técnica superior de ingeniería industrial. 2013. 218 p. [consultado el 2 de agosto del 2016]. Disponible en internet: http://www.tesisenred.net/bitstream/handle/10803/116204/TCCC1de1.pdf?sequence=1

37

JSON nació como una alternativa a XML, el fácil uso en JavaScript ha generado un gran número de seguidores de esta alternativa. Una de las mayores ventajas que tiene el uso de JSON es que puede ser leído por cualquier lenguaje de programación. Por lo tanto, puede ser usado para el intercambio de información entre distintas tecnologías. El servidor de aplicaciones generalmente gestiona la mayor parte (o la totalidad) de las funciones de lógica de negocio y de acceso a los datos de la aplicación, se ve frecuentemente como parte de una aplicación de tres niveles, que consta de un servidor gráfico de interfaz de usuario (GUI), un servidor de aplicaciones (lógica empresarial) y un servidor de bases de datos y transacciones. GlassFish un servidor de aplicaciones de Oracle Corporation, que permite ejecutar aplicaciones que sigan los mismos parámetros. Es gratuito de y código libre el cual se distribuye bajo las licencias GNU GPL y CDDL. “Además implementa la plataforma JavaEE5, por lo que soporta las últimas versiones de tecnologías como: JSP, JSF, Servlets, EJBs, Java API para Servicios Web (JAX-WS), Arquitectura Java para Enlaces XML (JAXB), Metadatos de Servicios Web para la Plataforma Java 1.0, y muchas otras tecnologías”.20 Una de las opciones que GlassFish permite brindar es el despliegue de Servicios Web en arquitectura REST, la cual es cualquier interfaz entre sistemas que use HTTP para obtener datos o generar operaciones sobre esos datos en todos los formatos posibles, como XML y JSON. “Es una alternativa en auge a otros protocolos estándar de intercambio de datos como SOAP (Simple Object Access Protocol), que disponen de una gran capacidad pero también mucha complejidad”21.

20 GlassFish Server Quick Start Guide [en línea] Oracle [consultado el 2 de febrero del 2017]. Disponible en internet: http://www.oracle.com/technetwork/middleware/glassfish/documentation/index.html 21 NAVARRO MARSET, Rafael. Rest vs Web services. Modelado, Diseño e Implementación de Servicios Web. users.dsic.upv.es [en línea]. 2006-07 [consultado el 29 de Abril del 2017]. Disponible en internet: http://users.dsic.upv.es/~rnavarro/NewWeb/docs/RestVsWebServices.pdf

38

Ilustración 10. Formatos

4.9 CONTROL DE VERSIONES Para el control y la organización de proyectos de desarrollo de software sean estos grandes o pequeños, es normal el uso de repositorios en línea que permiten el trabajo colaborativo, y por lo general con un gestor de versiones que permite visualizar los cambios realizados entre cada versión del software, de modo que puedas recuperar versiones especificas en el futuro. Los controladores de versiones tienen como finalidad posibilitar un trabajo más rápido y eficiente. 4.9.1 GitHub: Se define como control de versiones a la gestión de los diversos cambios que se realizan sobre los elementos de algún producto o una configuración del mismo, la gestión de los diversos cambios que se realizan sobre los elementos de algún producto o una configuración. Git es un software de control de versiones, diseñado por Linus Torvalds. A partir de este software libre se basan diferentes repositorios en línea como lo son GitHub, BitBukect, Black Duck Open Hub entre otros. “GitHub es una plataforma de desarrollo colaborativo de software para alojar proyectos utilizando el sistema de control de versiones Git. GitHub aloja tu repositorio de código y te brinda herramientas muy útiles para el trabajo en equipo, dentro de un proyecto. El código se almacena de forma pública, aunque también se puede hacer de forma privada, creando una cuenta de pago.”22 22 CASTILLO, Luciano. GitHub conociendogitub.readthedocs.io [en línea] 2012 [consultado el 22 de Mayo del 2016]. Disponible en internet: http://conociendogithub.readthedocs.io/en/latest/data/introduccion/

39

5. OBJETIVOS

5.1 OBJETIVO GENERAL Desarrollar un sistema multimedia que permita la agrupación de las aplicaciones web y móviles relacionadas con la Universidad Autónoma de Occidente y su sistema de administración de contenidos basada en principios de usabilidad y HCI. 5.2 OBJETIVOS ESPECÍFICOS ● Definir los requerimientos y procedimientos que deben seguir las aplicaciones para que se pueden integrar al sistema multimedia. ● Desarrollar una aplicación móvil tipo launcher, que integre los diferentes servicios y aplicaciones que brinda y brindará la universidad. ● Desarrollar una página web que facilite la gestión de contenidos publicados y consumidos por la aplicación móvil tipo launcher. ● Realizar pruebas de usabilidad, funcionalidad, integración y aceptación del sistema multimedia.

40

6. MARCO METÒDOLOGICO: DESARROLLO DEL SISTEMA MULTIMEDIA PARA LA AGRUPACION DE LAS APLICACIONES

Para el desarrollo del sistema multimedia se adoptó la metodología de RUP (Rational Unified Process) metodología desarrollada y mantenida por Rational Software, la cual actualmente es propiedad de IBM, es una de las metodologías más populares para el análisis, diseño, implementación, y documentación de sistemas orientados a objetos. Es una metodología flexible que se adapta de acuerdo a las necesidades del contexto, por lo tanto permite la convergencia de otras metodologías de acuerdo a la necesidad de los desarrolladores. RUP se divide en cuatro etapas, iniciación, Elaboración, construcción y transición, dentro de las cuales se realizan varias interacciones de número variable de acuerdo al proyecto. Ilustración 10: Etapas Metodología RUP

Fuente: Rational Unified Process. (RUP). Ima.udg.edu [en línea] [consultado el 22 de Mayo de 2016]. Disponible en Internet: http://ima.udg.edu/~sellares/EINF-ES2/Present1011/MetodoPesadesRUP.pdf

6.1 ANÁLISIS Actualmente la Universidad Autónoma de Occidente cuenta con aplicaciones web que se encuentran agrupadas en su página principal de información, Además, cuenta con aplicaciones móviles de convenios con terceras empresas como Google y Roseta Stone, las cuales sirven como herramientas para los estudiantes que permiten el almacenamiento de información, control de material de clases e información de aprendizaje.

41

Por lo anterior la Universidad Autónoma de Occidente se planteó el desarrollo de una aplicación móvil, que tiene como objetivo permitir al usuario acceder a los diferentes servicios en línea de la universidad, además de información sobre las aplicaciones relacionadas con esta misma. Esto con el fin que agilizar y simplificar el acceso a la información relevante de la universidad. El uso de las apps como respuesta a una situación se justifica cuando simplifica un proceso y mejora la experiencia para el usuario. En este caso, la administración de un App suele ser en ocasiones un proceso tedioso, debido a que al modificarse el contenido de las aplicaciones web, aplicaciones móviles o noticias se tendría que actualizar en cada dispositivo móvil de los usuarios, resultando tedioso porque se debe manipular directamente el código de programación, como también la gestión de los contenidos multimedia que nuestra App presente. Por lo anterior, se ha detectado la oportunidad de desarrollar una aplicación web, con la que se pueda administrar la plataforma móvil, donde le permitirá al usuario (administrador) agregar, actualizar y eliminar los diferentes aplicativos móviles, web y/o noticias según sea el caso. 6.1.1 Investigación y recopilación de la información. Servicios ofrecidos por la Universidad. Portal Principal: plataforma principal de la Universidad Autónoma de Occidente, donde se encuentra información de todo tipo relacionada con la institución. además de contener los enlaces de redirección a los diferentes servicios no solo para invitados o estudiantes sino para la comunidad académica en su totalidad. Portal Estudiantil: ingresando a www.uao.edu.co/portalestudiantiluao, un espacio que alberga datos personales, mensajes enviados y brinda información sobre servicios académicos, financieros, procesos de matrícula y grado, además de la opción para el cambio de contraseña. Moodle Augusta: es un software diseñado para ayudar a los educadores a crear cursos en línea de alta calidad y entornos de aprendizaje virtuales. Tales sistemas de aprendizaje en línea son algunas veces llamados VLEs (Virtual Learning Environments) o entornos virtuales de aprendizaje.

42

Centro de Innovación: tiene como propósito afrontar los retos y desafíos planteados por la sociedad de la información y el conocimiento en materia de educación mediada electrónicamente, desde la innovación educativa, comunicativa y tecnológica; y el reconocimiento de la diversidad y complejidad del ser humano. Biblioteca: La Biblioteca ofrece a sus usuarios (docentes, estudiantes, investigadores, personal administrativo y visitantes) diferentes servicios mediante los cuales pueden acceder a la información publicada en las áreas del conocimiento relacionadas con nuestros programas. Dicha información se puede consultar y está disponible en los siguientes formatos de presentación: texto, audiovisual y electrónico. Adicionalmente cuenta con servicio para reservar y escoger espacios físicos dentro del campus en unos horarios establecidos. Sistema de Gestión del Aprendizaje - SIGA: softwares que permiten administrar, distribuir, monitorear, evaluar y apoyar las diferentes actividades de un proceso de aprendizaje. Lo UAO de la semana: Informativo con periodicidad semanal que registra las actividades que van a realizarse durante la semana vigente a su publicación. Actualmente cuenta con una versión impresa, la cual se entrega a los estudiantes en distintos puntos dentro del campus universitario; además cuenta con una versión digital publicada en el enlace www.louaodelasemana.uao.edu.co Campus Sostenible: La Autónoma de Occidente cuenta con una oferta académica en programas de pregrado profesional, posgrado y tecnologías enfocados al tema ambiental y desarrollo de campañas y actividades de sensibilización. En esa medida, la Institución decide adoptar el modelo de Campus Sostenible con el fin de articular y potencializar las acciones académicas, de investigación y de proyección social que apoyadas por la operación interna, promueven el compromiso y la responsabilidad ambiental y social. Centro para la Excelencia Académica: El Centro para la Excelencia Académica integra y articula todas las iniciativas institucionales que trabajan por la permanencia y graduación estudiantil, en condiciones de alta calidad, desde las diferentes dependencias académicas, administrativas, financieras y de Bienestar Universitario.

43

Servicios de Terceros: Adicionalmente a los servicios propios ofrecidos por la universidad Autónoma de Occidente, institución cuenta con el uso de aplicaciones o servicios por parte de terceros como lo son el caso de redes sociales como Facebook, Twitter e Instagram, además de los servicios de Google implementados recientemente. 6.1.2 Stakeholders: Stakeholders entiéndase como todas las personas que influyen directa o indirectamente con la problemática y sistema a multimedia a desarrollar, son de vital importancia para el proyecto ya que aprobaran el desarrollo y uso de este. En el caso específico del sistema se identificaron los Stakeholders Primarios los cuales a su vez se dividen en dos perfiles; perfil administrativo y perfil estudiante con el fin de obtener información relevante de dos puntos de vista totalmente distintos. Stakeholders primarios - Perfil administrativo. Perfil administrativo hace referencia a todas las personas vinculadas a los servicios ofrecidos para el desarrollo de la aplicación y los futuros encargados de administrar la aplicación después de su posterior lanzamiento y puesta en producción. Inicialmente dos departamentos pertenecientes a la universidad mostraron interés completo en el lanzamiento de una aplicación móvil para la comunidad estudiantil. El primer departamento es el departamento de comunicaciones, presentando la propuesta de acercar las noticias y eventos a la comunidad académica por medio de una aplicación móvil. A partir de la anterior propuesta se pactó con el departamento la implementación de unos servicios que el aplicativo pudiera consumir para desplegar en una interfaz con las noticias y eventos. El segundo departamento es el centro de cómputo, mostrando interés en el desarrollo de una aplicación móvil debido al hecho de que otras instituciones educativas ya han desarrollado sus propias aplicaciones agregando valor a ellas mismas como institución de alto nivel. Adicionalmente se trataron temas como la administración posterior al lanzamiento y el desarrollo de los servicios y recursos que debía la universidad prestar para el desarrollo de la aplicación móvil.

44

Stakeholders primarios - Perfil estudiante. En el proceso de desarrollo, es importante conocer no solo a las personas involucradas directamente con el desarrollo de la aplicación móvil, sino también los usuarios finales, por lo que se realizó una investigación en torno a los estudiantes dentro del campus universitario. Perfil de usuario. La definición de los perfiles de usuario se realizó a través de dos instrumentos de indagación social; Observación y Encuesta online (Anexo 1). El primer instrumento permitió conocer cómo se comporta el usuario en el espacio de intervención, dichas observaciones se realizaron dentro del campus de la Universidad Autónoma de Occidente. Además de los anteriores métodos de recolección de información, recurrimos a datos que la Universidad Autónoma de Occidente23 brinda a la comunidad, donde pudimos identificar: La población estudiantil total de la Universidad Autónoma De Occidente en el periodo académico 2016-3 es de 24.247. El 75% de la población estudiantil está en estrato 3 o superior, siendo el estrato socioeconómico nivel 3 el más grande con un porcentaje del 35%. Hasta el periodo 2016-3 la universidad autónoma de occidente ofrece 50 programas académicos, siendo en su mayoría de nivel profesional con 21 programas académicos. Los usuarios identificados para la aplicación móvil son los estudiantes de la Universidad Autónoma de Occidente, .con un rango de edad entre 15 y 25 años En su mayoría de estrato socioeconómico de nivel 3 o superior, lo cual les permite tener buen manejo de recursos tecnológicos y acceso a dispositivos móviles. En su mayoría cursan uno y algunos hasta 2 programas académicos de nivel profesional. 23 Cifras 2016-3. [en línea]. Santiago de Cali: Universidad Autónoma de Occidente. 2016. [consultado el 2 de Febrero de 2016]. Disponible en internet: http://www.uao.edu.co/la-universidad/universidad-autonoma-de-occidente-en-cifras

45

Ilustración 11 Perfil de Usuario

Fuente: Elaboración propia. 6.1.3 Definición y análisis de los requerimientos: Para la realización de este proyecto se establecen los requerimientos presentados en el anexo 1, en los cuales se tienen en cuenta las necesidades identificadas por los usuarios y las ideas discutidas con el departamento de telecomunicaciones y el departamento de cómputo de la universidad. De estas reuniones salieron los siguientes requerimientos funcionales (RF) y requerimientos no funcionales (RNF):

46

Tabla 1 Tabla de requerimientos funcionales de la aplicación móvil.

Requerimientos Funcionales (RF)

RF-001. El usuario deberá loguearse por medio del usuario y la contraseña institucional.

RF-002. El sistema deberá mostrar una lista de las aplicaciones móviles de la universidad.

RF-003. El sistema deberá mostrar una lista las aplicaciones web de la universidad.

RF-004. El sistema deberá mostrar información y noticias relevantes de la universidad.

RF-005. El sistema deberá filtrar las noticias dependiendo del perfil del usuario.

RF-006. El usuario deberá poder seleccionar las aplicaciones en cada una de las listas

RF-007. El sistema deberá mostrar una descripción al seleccionar una aplicación móvil.

RF-008. El sistema deberá mostrar de manera opcional una descripción al seleccionar una aplicación web.

RF-09. El sistema no deberá filtrar las noticias y eventos si el usuario no se encuentra logueado en la aplicación.

RF-010. El sistema deberá permitir al usuario identificar qué aplicaciones están o no instaladas en el dispositivo

RF-011. Si el usuario selecciona una aplicación móvil que ya se encuentra instalada en el dispositivo, el sistema la ejecutara.

RF-012. Después de mostrar la información de la aplicación móvil, el sistema deberá redireccionar al usuario a la respectiva App Store, siempre y cuando la aplicación seleccionada no se encuentre instalada en el dispositivo.

47

Tabla 1: (Continuación)

RF-013. Deberá existir una aplicación web que permita gestionar todos los contenidos del sistema.

RF-014. Solo los usuarios con perfil administrador podrán gestionar los contenidos.

RF-015 el sistema debe llevar un reporte de las actividades realizadas por los administradores con ip, hora y acción

RF-016 la aplicación móvil debe informar al usuario si una aplicación móvil de la universidad dejará de funcionar

Fuente: Elaboración propia. Tabla 2 Tabla de requerimientos no funcionales de la aplicación móvil. Requerimientos No Funcionales (RNF)

RNF-001. La aplicación debe desplegarse en dispositivos móviles Android (4.3 o superior) y iOS (7.0 o superior).

RNF-002. La aplicación deberá seguir los parámetros de diseño brindados por el equipo de diseño de la Universidad Autónoma de Occidente

RNF-003. El sistema deberá presentar los términos y condiciones de uso de la aplicación bajo las normas y políticas de la Universidad Autónoma de Occidente

RNF-004. La aplicación debe ser fácil de usar.

RNF-005. El sistema deberá tener una serie de parámetros que sirvan de guía para desarrollar futuras aplicaciones institucionales y se puedan integrar con el launcher

RNF-006. La aplicación debe ser de fácil instalación.

RNF-007. La aplicación debe proporcionar retroalimentación al usuario sobre el estado en que se encuentre su consulta.

Fuente: Elaboración propia.

48

Una vez se establecen los requerimientos se procede a la realización de un acta la cual es firmada por cada uno de los Stakeholders que participaron en la reunión. 6.1.4 Casos de uso.

Aplicativo móvil. Caso de uso 1 (CU_01): “Autenticación de usuario” Caso de uso 2 (CU_02): “Módulo de noticias” Caso de uso 3 (CU_03): “Módulo de aplicaciones móviles y páginas web” Caso de uso 5 (CU_04): “Ajustes” Actor: El usuario al que estará dirigido la aplicación, son estudiantes de la universidad Autónoma de Occidente.

49

Ilustración 12: casos de uso de la aplicación móvil.

Fuente: Elaboración propia. Número: CU_01 Nombre de caso de uso: “Autenticación de usuario” Actor: Estudiante. Descripción: Pasos a seguir para ingresar a la aplicación. Requerimientos funcionales asociados: RF-001.

50

Tabla 3: caso de uso: “Autenticación de usuario”

Curso normal Alternativa

Inicio de caso de uso, el usuario inicia dando click en el icono de la aplicación.

La aplicación inicia y se encuentra con la interfaz de logueo, en donde se encuentran campos de texto para el ingreso de las credenciales.

El usuario ingresa su nombre de usuario institucional, y su contraseña, da click en el botón de ingreso, y sus datos se validan frente al directorio activo.

El usuario ingresa satisfactoriamente, y se le presenta información relacionada con las aplicaciones móviles y páginas web de la universidad.

El usuario no puede ingresar a la aplicación y se le muestra un mensaje de alerta que le dice que verifique los datos ingresados, y si se le olvidó la contraseña ingrese al link: “se te olvidó la contraseña” que se encuentra en la parte de abajo de la interfaz.

finaliza el caso de uso Fuente: Elaboración propia. El usuario de la aplicación deberá tener acceso a internet para poder validar sus datos frente al directorio activo. Una vez validada la información, podrá ingresar sin necesidad de internet, para consultas sin conexión, a menos que se cierre la sesión en cuyo caso se volverá pedir las credenciales para el ingreso. Número: CU_02

51

Nombre de caso de uso: “Módulo de noticias” Actor: Estudiante Descripción: Pasos a seguir para que el usuario, consulte las noticias de la universidad. Requerimientos funcionales asociados: RF-004

Tabla 4: caso de uso: “Módulo de noticias”

Curso normal Alternativa

Inicio de caso de uso, una vez que el usuario se ha autentico se despliega por defecto la pantalla de aplicaciones.

El usuario selecciona el icono que representa el módulo de noticias, y esta sección se carga posteriormente.

El usuario puede llegar al módulo de noticias haciendo usos de “swipes” deslices, para cambiar de forma rápida entre pantallas.

Se carga la pantalla de noticias donde se pueden ver, todas las noticias a modo de lista, cada una de las noticias con una imagen, un título y un fragmento de la noticia.

El usuario selecciona una de las noticias, consecuentemente se carga una vista con la noticia en específico, con una imagen, el título, y la información referente de la noticia.

52

Tabla 4 (Continuación)

El usuario selecciona el icono de devolverse que se encuentra en la esquina superior izquierda, la cual regresa al usuario a la página donde está la lista de noticias, donde el usuario puede seleccionar otra noticia.

Fuente: Elaboración propia. Número: CU_03 Nombre de caso de uso: “Módulo de aplicaciones móviles y páginas web” Actor: Estudiante Descripción: Pasos a seguir para que el usuario, consultar las aplicaciones móviles y páginas web de la universidad. Requerimientos funcionales asociados: RF-002, RF-003, RF-006, RF-007, RF-008, RF-009, RF-010, RF-011, RF-012. Tabla 5: caso de uso: “Módulo de aplicaciones móviles y páginas web”

Curso normal Alternativa

Inicio de caso de uso, una vez que el usuario se ha autentico se despliega por defecto la pantalla de aplicaciones.

Una vez que se carga la interfaz se ven dos opciones: “aplicaciones móviles” y “páginas web”.

53

Tabla 5 (continuación) El usuario selecciona la opción de “aplicaciones móviles”, se despliega una lista de las aplicaciones móviles de la universidad, cada elemento de la lista muestra un nombre y un logo.

El usuario selecciona una de la aplicaciones, consecuentemente aparece una ventana emergente en la que se puede ver el nombre de la aplicación, el logo, una descripción, y un link de descarga de la tienda de aplicaciones que corresponde al sistema operativo.

Si el usuario selecciona una aplicación que ya tiene instalada en su celular, por lo tanto en vez de la ventana emergente, el sistema ejecuta la aplicación seleccionada.

El usuario selecciona la opción de “páginas web”, se despliega una lista de las páginas web de la universidad, cada elemento de la lista muestra un nombre y un logo.

El usuario selecciona de las páginas web, consecuentemente aparece una ventana emergente en la que se puede ver un nombre, el logo, una descripción, y un link para dirigirse a la página.

Finalización de caso de uso. Fuente: Elaboración propia. Número: CU_04 Nombre de caso de uso: “Ajustes” Actor: Estudiante Descripción: Opciones disponibles en la sección de ajustes Requerimientos funcionales asociados: RF-005

54

Tabla 6: caso de uso: “Ajustes”

Curso normal Alternativa

Inicio de caso de uso, una vez que el usuario se ha autentico se despliega por defecto la pantalla de aplicaciones.

El usuario selecciona el icono que representa el módulo de ajustes, y esta sección se carga posteriormente.

El usuario puede llegar al módulo de ajustes haciendo usos de “swipes” deslices, para cambiar de forma rápida entre pantallas.

Al usuario se le despliegan dos opciones, “filtro de noticias”, y “cerrar sesión”.

El usuario en la sección de “filtro de noticias”, puede seleccionar filtros de acuerdo a sus preferencias.

El usuario selecciona la opción de “cerrar sesión”.

Al usuario se le despliega una ventana emergente en donde se le pregunta si está seguro que desea cerrar sesión, selecciona “ok”, se cierra la aplicación, y se redirige al usuario a la pantalla de logeo, final de caso de uso.

El usuario selecciona “cancelar” de la ventana emergente, vuelve a cargarse la pantalla de ajustes.

Fuente: Elaboración propia.

55

Matriz de trazabilidad. Prioridad: Alto (A), Medio (M), Bajo (B). Tabla 7: Matriz de trazabilidad Requerimiento / casos de usos

CU_01 CU_02 CU_03 CU_04

RF-001

RF-002

RF-003

RF-004

RF-005

RF-006

RF-007

RF-008

RF-009

RF-010

RF-011

RF-012

RF-013

RF-014

RF-015

RF-016

Prioridad A M A M

56

Portal administrativo. CU_01: Autenticación de usuario. CU_02: Módulo de noticias. CU_03: Módulo aplicaciones móviles y páginas web de la universidad. Actor: El usuario que usaran el portal administrativo, son el personal administrativo de la universidad Autónoma de occidente. Ilustración 13: Casos de uso de la aplicación móvil II

Fuente: Elaboración propia Número: CU_01 Nombre de caso de uso: “Autenticación de usuario” Actor: personal de la universidad

57

Descripción: Pasos a seguir para ingresar a la aplicación Requerimientos funcionales asociados: RF-014

Tabla 8: caso de uso: “Autenticación de usuario”

Curso normal Alternativa

Inicio de caso de uso, el usuario inicia dando click en el icono de la aplicación.

La aplicación inicia y se encuentra con la interfaz de logueo, en donde se encuentran campos de texto para el ingreso de las credenciales.

El usuario ingresa su nombre de usuario institucional, y su contraseña, da click en el botón de ingreso, y sus datos se validan frente al directorio activo.

El usuario ingresa satisfactoriamente, y se le presenta información relacionada con las aplicaciones móviles y páginas web de la universidad.

El usuario no puede ingresar a la aplicación y se le muestra un mensaje de alerta que le dice que verifique los datos ingresados, y si se le olvidó la contraseña ingrese al link: “se te olvidó la contraseña” que se encuentra en la parte de abajo de la interfaz.

finaliza el caso de uso Fuente: Elaboración propia. El usuario de la aplicación deberá tener acceso a internet para poder validar sus datos frente al directorio activo. Una vez validada la información, podrá ingresar

58

sin necesidad de internet, para consultas sin conexión, a menos que se cierre la sesión en cuyo caso se volverá pedir las credenciales para el ingreso. Número: CU_02 Nombre de caso de uso: “Módulo de noticias” Actor: personal de la universidad Descripción: Pasos a seguir para cargar noticias, en la base de datos. Requerimientos funcionales asociados: RF-013

Tabla 9: caso de uso: “Módulo de noticias”

Curso normal Alternativa

Inicio del caso de uso, una vez que el usuario se ha autenticado se despliega dos secciones una barra de opciones al lado izquierdo, y una lista de las aplicaciones móviles, y páginas web de la universidad al lado derecho.

El usuario selecciona “noticias”, que se encuentra en la barra de opciones de la izquierda, se despliega una pantalla con dos botones, uno es “cargar noticias”, y el otro es “borrar todo”, debajo de los botones, hay una lista de las noticias que se encuentra en la base de datos.

El usuario selecciona el botón de “cargar noticas”, para cargar las noticias de lo “UAO de la semana”, en la base de datos del servidor.

El usuario selecciona el botón de “borrar todo”, el cual borra todas las entradas de noticias que están en la base de datos.

Finaliza el caso de uso. Fuente: Elaboración propia.

59

Número: CU_04 Nombre de caso de uso: “Cierre de sesión” Actor: personal de la universidad Descripción: Pasos a seguir para cerrar la sesión en el portal administrativo. Requerimientos funcionales asociados: RF-013 Tabla 10: caso de uso: “Cierre de sesión”

Curso normal Alternativa

Inicio del caso de uso, una vez que el usuario se ha autenticado se despliega dos secciones una barra de opciones al lado izquierdo, y una lista de las aplicaciones móviles, y páginas web de la universidad al lado derecho.

El usuario selecciona un botón que se encuentra en la parte superior derecha de la interfaz, que dice “Cierre de sesión”.

Aparece una ventana emergente en donde se le pregunta al usuario si está seguro que desea cerrar sesión, con dos opciones “aceptar”, y “cancelar”

El usuario selecciona “aceptar”, posteriormente se cierra la sesión y se abre la pantalla de login.

El usuario selecciona “cancelar”, consecuentemente el usuario vuelve a la pantalla principal del portal administrativo.

Finaliza el caso de uso Fuente: Elaboración propia.

60

Matriz de trazabilidad Tabla 11: Matriz de trazabilidad II Prioridad: Alto (A), Medio (M), Bajo (B). Requerimiento / casos de usos CU_01 CU_02 CU_03 CU_04

RF-001

RF-002

RF-003

RF-004

RF-005

RF-006

RF-007

RF-008

RF-009

RF-010

RF-011

RF-012

RF-013

RF-014

RF-015

RF-016

Prioridad M M M B Fuente: Elaboración propia.

61

6.1.5 Contextos de uso. Aplicativo móvil. El contexto para la aplicación móvil puede llegar a ser cualquier espacio donde el dispositivo móvil tenga acceso a internet para descargar la información contenida por la aplicación. Estos lugares pueden llegar a ser los hogares de los usuarios, centros comerciales, establecimientos públicos, etc. por lo que en dichas zonas comúnmente se pone a disposición de los usuarios redes inalámbricas wi-fi para el acceso a internet si lo requieren. Bajo consideración del usuario se deja el uso de la aplicación en situaciones de alto riesgo o en lugares peligrosos. Portal administrativo. El contexto de uso para la aplicación web, será dentro de la oficina de comunicación y oficina de cómputo, ya que se debe contar con un alto grado de seguridad a la hora de manipular los contenidos de la plataforma web y móvil, además que dentro del departamento se cuenta con acceso a internet para el uso de la aplicación, por otro lado el espacio mencionado está bajo techo y seguro para comodidad y protección del personal encargado frente a cambios y eventos ambientales. 6.2 DISEÑO 6.2.1 Arquitectura del sistema: La arquitectura tomada como referencia para el sistema a es una arquitectura a 3 capas, en el artículo “Enseñanza del concepto de arquitectura de tres capas integrado con UML”, las define como:

“El Front End está compuesto por objetos de cuatro clases principales: form, process, validator y helper. Los forms son los componentes de interfaz. Que muestran información al usuario. Los objetos de la clase process procesan las solicitudes realizadas en los componentes de interfaz. Los objetos de la clase validator permiten validar información del usuario. Los objetos de la clase helper son auxiliares que facilitan resolver una solicitud, como por ejemplo un formateador de fecha. El Back End representa las capas de lógica de negocio y de acceso a datos. En la capa de lógica de aplicación se encuentran los objetos de la clase action, que se encargan de llevar el control de la ejecución de una solicitud. Otras clase en la capa de lógica de negocio son service, view y converter. Un service contiene la lógica de negocio, pues implementa las operaciones que se muestran en los distintos Front Ends de la

62

aplicación. Un objeto de la clase view proporciona el medio de comunicación entre la capa de lógica de negocios y la capa de presentación. La view es una clase de propiedades, o sea que no contiene lógica implementada, sino solo atributos y métodos get y set. La clase converter se utiliza para convertir un objeto de la clase view en uno de la clase DTO de la capa de acceso a datos, y viceversa. La capa de acceso a datos se compone por objetos de las clases DAO y DTO. DAO es la sigla de data access object y DTO de data transfer object. Un objeto de la clase DAO permite el acceso a los datos. La clase DTO representa una entidad de un modelo de clases conceptual de UML.”24

Teniendo en cuenta el esquema planteado, de manera general la estructura de sistema seria la siguiente: - La capa de datos: se aloja las bases de datos, con toda la información que consumirá la aplicación, así mismo en este servidor abra una página web para la gestión de dicha base de datos que será el administrador el cual se mencionó anteriormente. - La capa de negocio: En donde se encuentra el servidor de aplicaciones, el cual se conecta con el servidor de la base de datos, y este crea un servicio web el cual consumirá el cliente. - Capa de presentación: en él se encuentra la página de administración de la base de datos, y la aplicación móvil, la cual hará peticiones al servidor de la capa de negocio y consumirá las respuestas que el servidor mande en este caso, serían las noticias, las páginas web, y la información de las aplicaciones móviles.

24 CALDERON Marta E y CEDEÑO, Allan. Enseñanza del concepto de arquitectura de tres capas integrado con UML. Citic.ucr.ar.cr [en línea] 2013. [consultado el 2 de Febrero de 2016]. Disponible en internet: http://citic.ucr.ac.cr/sites/default/files/recursos/CalderonCedeno_jodci2013_articulo.pdf

63

Ilustración 14: Arquitectura del sistema.

Fuente: Elaboración propia 6.2.2 Arquitectura del portal administrativo: La arquitectura del portal administrativo toma como referencia el modelo de tres capas: El primer componente es una capa de presentación el cual es una página web, que se encarga de organizar y presentar, la información al usuario. El segundo componente es la lógica del aplicativo web, que se encarga de las interacciones entre la vista y la base de datos, tales como la modificación, eliminación, creación de entradas. EL último componente es la base de datos, la cual se encuentra en el servidor, y contiene toda la información relevante del sistema.

64

Ilustración 15: Arquitectura de la aplicación web.

Fuente: Elaboración propia 6.2.3 Arquitectura del aplicativo móvil: La arquitectura del aplicativo móvil se divide también en 3 capas, la primera capa es la capa de presentación, la segunda la lógica de la aplicación, y la última son los servicios web, la aplicación móvil no se conecta con la base de datos, si no con el servidor de aplicaciones, el cual hace las peticiones a este, y devuelve un JSON, el cual interpreta la lógica de aplicación, para que lo visualice la capa de presentación.

65

Ilustración 16: arquitectura de la aplicación móvil.

Fuente: Elaboración propia. 6.2.4 Balance del sistema multimedia basado en los tres pilares - ux, hw y sw: El primer componente para argumentar es el componente software, el cual tiene uno de los mayores pesos debido a que el sistema como tal contiene dos componentes de aspecto software (App Móvil y Portal administrativo). Por consiguiente es esencial implicar mayor esfuerzo en los componentes software. Al igual que el componente software, el pilar correspondiente a UX tiene un peso considerable, porque uno de los objetivos primordiales del proyecto es evitar la frustración de los estudiantes al tener tantos servicios de manera independiente. Por lo que la aplicación de conceptos de UX en el proyecto ayuda asegurar que el usuario final no se ofuscara al momento de utilizar la aplicación.

66

Por otro lado, el componente correspondiente al hardware es el de menor peso, pero no porque sea menos importante, ya que es imprescindible para los otros pilares, sino, porque las interacciones serán a partir de los dispositivos móviles y computadores ya construidos y de fácil adquisición para la comunidad académica. Sobre este apartado es importante aclarar que se seleccionaron herramientas de desarrollo en primera instancia para la Elaboración de un prototipo funcional, que permitiera validar las funcionalidades, y explorar las futuras problemáticas que se podrían encontrar para el producto final. 6.2.5 Diseño de interfaces del aplicativo móvil: La función principal de la aplicación es agrupar todos los servicios mediados por aplicaciones que posee la universidad con su información respectiva, y los links de descarga para los sistemas operativos Android y iOS. Además permite visualizar en cualquier lugar las noticias y eventos que se realizan en la Universidad Autónoma de Occidente, esta aplicación móvil permite que los estudiantes filtren la información presentada de acuerdo a su perfil del usuario. Para la gestión de los contenidos habrá un portal web, en el cual se podrá crear, modificar las aplicaciones que se muestran, y cargar las noticias que se visualizarán cada semana. Se planteó el desarrollo de una aplicación híbrida debido a que se desarrollan con lenguajes propios de las web-apps, es decir HTML, JavaScript, y CSS por lo que permite su uso en diferentes plataformas, pero también dan la posibilidad de acceder a gran parte de las características del hardware del dispositivo. Siento las anteriores características importantes debido al hecho de permitir almacenar información y consumir servicios web constantemente. La categoría a la que pertenece la aplicación es “Aplicaciones educativas e informativas”, debido al hecho de que está asociada con la Universidad Autónoma De Occidente y brinda información relacionada con los servicios brindados por la universidad. Actualmente se piensa publicar la aplicación para 2 plataformas que son IOS y Android, las Cuentas de publicación en las tiendas de aplicaciones pertenecen a la universidad, así como también la aplicación misma y el acceso a esta será completamente gratuito.

67

Arquitectura de la información. La navegación dentro de la aplicación se estructurará a través de una Navegación Transversal, debido a que permite al usuario ver de forma ordenando cada unidad del contenido bajo criterios de relevancia, similitud y clasificación del contenido. Además de una navegación jerárquica donde se presentan las diferentes opciones que permite ir visualizando la aplicación donde el contenido se desarrolla en forma ramificada pudiéndose visitar cada una de las secciones por separado. Los bloques de información presentados se dividen en tres secciones.

Ilustración 17: Arquitectura de información transversal de la aplicación móvil.

Fuente: Elaboración propia.

68

Diseño de prototipo: El diseño de prototipo permite obtener una retroalimentación temprana sobre el uso de un producto, con el fin de tomar decisiones sobre el proceso y ajustarlo a las necesidades percibidas que requieren los usuarios. Prototipos de baja fidelidad: El primer paso es la creación de prototipos de baja fidelidad en la cual se usa la técnica de dibujo en papel, los cuales posteriormente son evaluados con los Stakeholders, a continuación se presenta las interfaces iniciales.

Pantalla de inicio: La primera pantalla vista por el usuario al iniciar la aplicación por primera vez es la pantalla de inicio, en donde se puede ver el logo de la universidad Autónoma de occidente en conjunto con el logo de acreditación de alta calidad, y los labels de correo institucional y contraseña en conjunto con sus campos de texto.

Ilustración 18: interfaz de inicio. Baja fidelidad.

Fuente: Elaboración propia

69

Pantalla de noticias: En esta interfaz se presentan imágenes de las noticias en conjunto con el título y una pequeña descripción de la noticia. La intención de esta interfaz es de presentar la lista de todas las noticias disponibles, para que el usuario puede escoger en la que más muestre interés y poder verla en otra interfaz aparte. Ilustración 19: Interfaz de noticias. Baja fidelidad.

Fuente: Elaboración propia

Pantalla de aplicaciones: Posterior del inicio de sesión en la aplicación, la interfaz aplicaciones se mostrará, en ella se pueden ver las aplicaciones móviles y aplicaciones web con las que la Universidad Autónoma de Occidente cuenta. Ambas categorías se despliegan como una lista y cada aplicación tiene un espacio para el nombre, logo y un botón de información, el cual al interaccionar con él muestra una ventana emergente con la información detallada de la aplicación seleccionada.

70

Ilustración 20: Interfaz de aplicaciones. Baja fidelidad.

Fuente: Elaboración propia

Pantalla de ajustes: Esta interfaz fue creada con la idea de expandirse en futuras actualizaciones, actualmente contiene el nombre correspondiente al perfil que contiene la sesión, la lista de filtros de las noticias (cada categoría corresponde a una facultad de la universidad) y la opción de cerrar sesión en todos los dispositivos. Ilustración 21: Interfaz de ajustes. Baja fidelidad.

Fuente: Elaboración propia

71

Pantallas de navegación: Como primera idea de navegación se propuso dos tabs en la parte superior de la pantalla, cada opción con los nombres de los tabs (ver imágenes previas) y ajustes se representaba como un menú expandible al

interactuar con el icono , pero realizando algunas pruebas con los wireframes en los usuarios nació la propuesta de utilizar tres tabs y la posición de este menú varía según el sistema operativos del dispositivo, como se puede apreciar en la siguientes imágenes.

Ilustración 22: Android vs IOS

Android IOS

Fuente: Elaboración propia Paleta de colores: Con el fin de lograr plasmar la identidad corporativa de la Universidad Autónoma de Occidente se hace uso de los colores institucionales (Rojo y blanco).

72

Tipografía: Se utiliza uno de los sistemas operativos en los cuales se ejecutará la aplicación móvil (Android y iOS), estos son Roboto Y Helvetica Neue Light, respectivamente. Prototipos wireframe: Con los prototipos de wireframe se busca evaluar la el flujo de interacción que tendrá el usuario dentro de la aplicación por lo tanto más que la parte visual lo importante son las interacciones entre las interfaces, así mismo estos prototipos se evaluaron con los Stakeholders. Las pruebas en esta sección se realizaron primeramente en JustInMind versión gratuita, posteriormente se realizaron pruebas en POP utilizando imágenes editadas, en donde se reflejaron los cambios en la navegación. Prototipos de alta fidelidad: Se procedió con la realización de un prototipo de alta fidelidad, en el cual se simularán todas las funciones de la aplicación con el fin de evaluar tanto su usabilidad, como la estética, para la evaluación de esta se hizo con los usuarios finales los estudiantes, por medio de encuestas ver anexo 1 y de estas se sacaron retroalimentaciones sobre las interfaces que sirvieron para hacer modificaciones, a continuación se mostraran las interfaces. Ilustración 23Interfaz de aplicaciones. Alta fidelidad

Fuente: Elaboración propia

73

Ilustración 24: Interfaz de aplicaciones - Móviles. Alta fidelidad.

Fuente: Elaboración propia

74

Ilustración 25: Interfaz de aplicaciones – Móviles - detalles. Alta fidelidad.

Fuente: Elaboración propia

75

Ilustración 26: Interfaz de aplicaciones - Web. Alta fidelidad.

Fuente: Elaboración propia

76

Ilustración 27: Interfaz de noticias. Alta fidelidad.

Fuente: Elaboración propia

77

Ilustración 28: Interfaz de noticia en detalle. Alta fidelidad.

Fuente: Elaboración propia

78

Ilustración 29: Interfaz inicio. Alta fidelidad.

Fuente: Elaboración propia

79

Correcciones de los prototipos de alta fidelidad: Tomando en cuenta los comentarios de los usuarios finales y de los Stakeholders, recibidos en la encuesta y presentaciones del producto respectivamente, se realizaron las siguientes correcciones: Cambio en la tipografía del título (UAO Móvil). Ventana emergente de confirmación de cierre de sesión.

En la pestaña de aplicaciones móviles y web, se quitaron los bordes redondos de cada ítem, para dar más consistencia al diseño de las interfaces. Ilustración 30: correcciones de los prototipos de alta fidelidad

Fuente: Elaboración propia

80

6.2.6 Diseño de interfaces del portal administrativo. Diseño de sistema de navegación: Navegación transversal jerárquica: La función del diseño del sistema de navegación para la aplicación web, es tan importante como la organización y relación de la información que se presenta. Dentro de la aplicación se implantara una Navegación Global, la cual va a permitir al usuario (Administrador) saber dónde se encuentra dentro de la aplicación; además de una Navegación Contextual que permite entregar una relación al usuario entre el contenido que se le presenta y su ubicación dentro de la aplicación. Ilustración 31: Navegación transversal jerárquica

Fuente: Elaboración propia

81

Pestaña de apps móviles: Pantalla de Logueo: se presenta una interfaz simple en donde el administrador digita el usuario y la contraseña para ingresar. Ilustración 32: Pantalla de logueo

Fuente: Elaboración propia. Sobre la pestaña de aplicaciones, se presenta en una tabla, la información almacenada en la base de datos, existe una opción para filtrar un buscar palabras, así como también organizar la información de cada columna. Adicionalmente la página permite al usuario importar o exportar la información disco duro del computador en el cual se conecta.

82

Ilustración 33: Pestaña de aplicaciones

Fuente: Elaboración propia En la pestaña de crear o modificar, se muestra igualmente la información en una tabla, con la diferencia de un icono que representa un lápiz, este es un botón que permite al usuario editar la información sobre la aplicación seleccionada en una nueva interfaz.

83

Ilustración 34: Crear o modificar aplicaciones

Fuente: Elaboración propia Ilustración 35: Formulario de aplicaciones

Fuente: Elaboración propia

84

Para crear una nueva entrada, está el botón “Crear” sobre la parte derecha de la pantalla, este botón muestra una nueva interfaz con los campos requeridos para la inserción de una nueva entrada. Ilustración 35: Botón Crear

Fuente: Elaboración propia La pestaña de noticias muestra las noticias almacenadas en la base de datos, cuenta con la opción de editar las noticias así como también permite buscar, ordenar, filtrar, importar y exportar. Las noticias que se almacenan en la base de datos no son creadas por el administrador, sino que son importadas mediante un servicio web, prestado por el departamento de comunicación. Se desarrolló por medio de APEX en el lenguaje PL/SQL un algoritmo que se encargará de consumir el servicio web de noticias brindado por el departamento de comunicación, filtrar la información requerida en las tablas y guardarla. Debido a lo anterior, existe el botón “Cargar” en la parte superior-derecha de la pantalla, el cual primero confirma si desea realizar la acción, y luego ejecuta el comando anteriormente mencionado. a su vez existe el botón “Borrar Todo”

85

encargado de eliminar toda la información de noticias almacenada en la base de datos. Ilustración 36: Cargar noticias

Fuente: Elaboración propia 6.2.7 Diseño de los servicios web del aplicativo móvil.

Definición de servicios: Para la definición de la arquitectura orientada a servicios se hace uso del estándar Soa ML ,en el cual se pueden identificar claramente los actores involucrados en el proceso de transacción de la información y a su vez describir el modelo de negocio de la aplicación a desarrollar. En la ilustración 37 se presenta el modelo BPMN del proceso “Consulta de aplicaciones”, en donde se pueden identificar los actores “Administración APP”, “Universidad”, “APP”, “Estudiante”, en el cual el estudiante procede a registrarse y posteriormente a realizar la consulta de las aplicaciones o plataformas web con las que cuenta la Universidad, una vez que en la aplicación se presenta la información

86

el estudiante puede ver la descripción de cada una de las aplicaciones presentadas e incluso podrá instalar las aplicaciones que desee. Ilustración 37: Modelo de negocio, sección de aplicaciones.

Fuente: Elaboración propia. Por otra parte el estudiante solicita por medio de la aplicación la información relacionada a las noticias y eventos que se realizan en la universidad, estas noticias y eventos pueden ser consultadas de acuerdo a las preferencias que el estudiante defina en la sección de ajustes. Para responder a esta solicitud el actor Universidad se encarga de procesar y enviar la información, como se puede ver en la figura 38.

87

Ilustración 38: modelo de negocio, sección de noticias y eventos.

Fuente: Elaboración propia

El siguiente procedimiento es derivar los servicios por medio de los modelos de negocio anteriormente identificados, en el cual se presenta de manera detallada los participantes involucrados con sus respectivas peticiones de consumo y respuesta. Servicio de logueo: En la figura 30. Se presenta el primer servicio identificado junto con los participantes y solicitudes realizadas.

Ilustración 39: paquete de datos de servicio de logueo

Fuente: Elaboración propia

88

Una vez se identifican los actores se procede con la construcción de la interfaz en las cuales se especifican la información y el tipo de dato necesarios para dicho servicio, como se puede ver en la siguiente figura 40. Ilustración 40: Interfaz servicio de Log-In

Fuente: Elaboración propia Servicio de aplicaciones disponibles Ilustración 41: paquete de datos de servicio de Aplicaciones

Fuente: Elaboración propia

89

6.2.8 Diseño capa de negocio del portal administrativo: En paralelo con las actividades de desarrollo de la aplicación móvil, se realizaron los desarrollos pertinentes al aplicativo web, encargado de la gestión de contenidos. En primera instancia se realizó el diagrama de procesos de la aplicación web empleado tres actores, administrador, aplicación web y universidad. Los procesos descritos en el diagrama fueron hechos teniendo en cuenta los realizados anteriormente sobre la aplicación móvil.

Ilustración 42: Modelo de negocio de la página administrador

Fuente: Elaboración propia Inicialmente el usuario administrador tiene que autenticarse para poder realizar cualquier acción, a partir de la autenticación se cargan una serie de permisos que permiten realizar las acciones según el tipo de perfil tenga el administrador. Una vez autenticado el usuario administrador se le presentaran tres posibles opciones las cuales son aplicaciones web, aplicaciones móviles y noticias. Para las dos primeras opciones las acciones posibles son eliminar, modificar y crear, para la opción de noticias no se pueden crear noticias solo modificarlas, borrarlas y cargarlas.

90

6.2.9 Diseño capa de datos: Posteriormente de realizar el diagrama de procesos y siguiendo el modelo BPMN (Business Process Management)25, se realizaron las interfaces y los servicios requeridos en respuesta a la aplicación. Como resultado surgió el siguiente Modelo Entidad Relación (MER). Ilustración 43: Modelo Entidad Relación en la base de datos

Fuente: Elaboración propia.

En el anterior modelo entidad-relación se pueden apreciar 6 entidades. La entidad aplicación hace referencia a las aplicaciones móviles y servicios web que la Universidad Autónoma De Occidente actualmente brinda. Las entidades dispositivo y usuario se utilizan para controlar las sesiones en los diferentes dispositivos, al igual que sirve para almacenar la configuración de los filtros de noticias. Las entidades permisos, acciones y perfiles pertenecen al portal administrativo y hacen referencia a los perfiles que tienen los usuarios administrativos y las acciones que ellos pueden realizar dentro del aplicativo. 25 DELGADO, Andrea. GARCÍA RODRIGUEZ DE GUZMAN, Ignacio. RUIZ, Francisco. Desarrollo de servicios con SoaML desde procesos de negocio en BPMN [en línea]. Consultado el 2 de Febrero de 2016. Disponible en internet: http://lbd.udc.es/jornadas2011/actas/JCIS/JCIS/S4/S4_4_paper.pdf

91

6.3 IMPLEMENTACION

En esta fase de la metodología se prosigue con la implementación del sistema, definiendo las herramientas de desarrollo en base a ciertos criterios, construcción del aplicativo móvil, portal administrativo y estructura de datos. 6.3.1 Herramientas de desarrollo: Los criterios que se tuvieron en cuenta para la selección de las herramientas de desarrollo fueron: experiencia de usuario, asequibilidad, documentación y compatibilidad. Tabla 12: Criterios de selección para herramientas de desarrollo

Criterios de selección

Criterios Explicación

Experiencia de uso (Exp)

La experiencia en tiempo que tiene el equipo de diseño al realizar tareas con este tipo de aplicación

Asequibilidad (Aseq) La capacidad de poder acceder y utilizar a la herramienta

Documentación(Doc)

La información referente a tutoriales y videos sobre el manejo de la herramienta, además del soporte que se pueda brindar

Compatibilidad (comp)

La capacidad que tiene la herramienta de comunicarse con otras.

Fuente: Elaboración propia. Para escoger las herramientas de desarrollo, se usó una matriz de selección realizada por el equipo de trabajo:

92

Tabla 13: Matriz de selección SW

Matriz de selección SW

Herramientas (SW)

Criterios(1-5) Resultado

Exp. Aseq. Doc. Comp.

Entorno de desarrollo

Android Studio 4.67 4.33 3.5 2 3.62

Xcode 2.67 3.67 3.67 2 3.58

Ionic 4.85 4.79 4.51 4.66 4.70

Servidor de aplicaciones

GlassFish 3.67 3.67 4.55 5.00 3.58

Apache 3.67 4.00 4.55 4.00 3.33

Tomcat 3.33 3.33 4.05 3.33 3.00

Base de

datos

MongoDB 3.67 3.00 2.00 3.67 3.08

Oracle 4.67 3.33 4.33 4.33 4.25

MySQL 5.00 4.00 3.33 4.67 4.16

Fuente: Elaboración propia. Definiendo como herramientas principales: ● Ionic: para el desarrollo de la aplicación móvil, debido a que los lenguajes de desarrollo para esta plataforma son bien conocidos por el equipo de desarrollo, además de ser compatible con los sistemas operativos Android y IOS.

93

● Glassfish: para el back-end, existen conocimientos previos sobre GlassFish como servidor de aplicaciones, brindando cierta ventaja en cuanto a tiempo de implementación. además de que su lenguaje es similar al utilizado actualmente por la Universidad Autónoma de Occidente. ● MySQL: como gestor de datos se escogió MySQL debido a que es cumple muy bien con los criterios de selección. Ilustración 44Herramientas de desarrollo de la aplicación móvil.

Fuente: Elaboración propia En la base de datos: Las bases de datos qué va a consumir el cliente, están elaboradas a partir de Oracle DataBase estas se crearon haciendo uso de la herramienta APEX. Para la administración de los contenidos de dichas bases de datos se implementó un portal web, el cual solo podrán acceder usuarios administrativos. En la capa de negocio: En el servidor de la capa de negocio, se usa como servidor de aplicaciones GlassFish 3.1.1 debido a que esta versión es compatible con sistema operativo del servidor, Oracle Enterprise Linux 6.8. En donde se subirán dos aplicaciones, la primera aplicación es un web Service que consulta las noticias, las páginas web y las aplicaciones móviles de la universidad, y la

94

segunda aplicación un servicio de logueo, en donde el cliente manda sus credenciales a la aplicación, y esta En el cliente: Para el desarrollo de las aplicaciones móviles, se trabajó con el framework de ionic que por sus características nos permite, compilar desde un mismo proyecto tanto para Android. 6.3.2 Implementación de servicios: Para el desarrollo de los servicios que consumen los usuarios del aplicativo móvil, la universidad proporciono un servidor con las indicaciones mencionadas anteriormente, en el donde se instaló GlassFish 3.1.1 y los drivers de ORACLE, seguidamente mediante la consola de administrador, se creó un “JDBC pool connection” a la base de datos Oracle, y un “JDBC resource” que utiliza el pool de conexión antes creado. Posteriormente mediante el IDE Netbeans se desarrollaron los servicios web de manera que estos fueran RESTful y solo utilizaran métodos de GET y POST.

Ilustración 45: Desarrollo de los servicios

Fuente: Elaboración propia.

95

Una vez con los servicios desarrollados se compilo el proyecto de Netbeans, entregando como resultado un archivo .WAR, el cual se subió al servidor de la universidad y compilo mediante GlassFish implementado así una web aplication que ofrece los servicios para los dispositivos móviles.

Ilustración 46: Respuesta del servidor

Fuente: Elaboración propia. La anterior imagen muestra la respuesta del servidor, la cual es dada en formato JSON.

96

6.3.3 Aplicativo móvil: El desarrollo de la aplicación móvil fue realizado gracias al framework llamado Ionic. En él, se estructuró toda la construcción del front-end de la aplicación, donde al momento de iniciar el desarrollo se encontraba en versión release 1.7.15. Al ser una versión de prueba y al desarrollarse en equipo, se creó un repositorio privado en GitHub para llevar un correcto control de versiones. Donde al ir construyendo y organizando la parte visual de la aplicación, además de existir actualizaciones del framework, se iban aplicando y reflejando los cambios hasta llegar a la versión Release Candidate del framework y finalizar la construcción visual de la aplicación basada en el prototipo de alta fidelidad. En momento del desarrollo se tuvo en todo momento en cuenta el uso de buenas prácticas tales como la implementación de código limpio, además de la creación de un repositorio en donde se guarda todas las versiones del software, junto con las notas de los cambio de cada versión. Esto con el fin de crear software óptimo y bien organizado. A continuación mostraremos las interfaces finales del prototipo de pruebas entregado a la Universidad.

97

Ilustración 47: Diferencias entre sistemas operativos

iOS Android Fuente: Elaboración propia

98

Flujo de navegación del prototipo final:

Ilustración 48: Interfaz de inicio

Fuente: Elaboración propia.

99

Ilustración 49: Mensaje de alerta, recuperación de contraseña

Fuente: Elaboración propia.

100

Ilustración 50: Mensaje de carga de la aplicación

Fuente: Elaboración propia.

101

Ilustración 51: Interfaz de noticias

Fuente: Elaboración propia

102

Ilustración 52: Interfaz de aplicaciones móviles y web.

Fuente: Elaboración propia

103

Ilustración 53: Descripción de una página web

Fuente: Elaboración propia

104

Ilustración 54: Interfaz de ajustes

Fuente: Elaboración propia

105

Ilustración 55: Mensaje conformación de cierre de sesión

Fuente: Elaboración propia

106

6.3.4 Portal administrativo: Una vez con culminada la etapa de diseño, se procede al desarrollo de las bases de datos, en donde el equipo de trabajo del centro de cómputo por parte de la Universidad Autónoma de Occidente; brindó al equipo de trabajo un espacio de trabajo dentro de sus servidores, para el cual se podrían construir las bases de datos previamente diseñadas. En un principio el equipo de trabajo planteó el desarrollo de la página administrador bajo los lenguajes HTML, CSS y JavaScript, sin embargo la oficina de cómputo bajo sus propios parámetros y buenas prácticas de desarrollo exige el desarrollo de la base de datos y la página web administrador bajo las herramientas de ORACLE ENTERPRISE, más específicamente sobre la plataforma Oracle Application Express (APEX). Por lo anterior la Universidad Autónoma de Occidente brindó una introducción sobre APEX al equipo de desarrollo. Como resultado, el equipo de desarrollo estructuro y organizo las tareas, tenido como prioridad el desarrollo de las bases datos y posteriormente el desarrollo de la página web. Para la construcción de la base de datos se desarrollaron las siguientes tablas sobre los servidores de datos de la universidad.

Tabla 14Tabla usuarios

Column Name Data Type Nullabl

e Default Primary Key

USUARIO VARCHAR2(50) No - 1

FILTROS VARCHAR2(1000) Yes - -

Fuente: Elaboración propia

107

Tabla 15Tabla Perfiles

Column Name Data Type Nullable Default Primary Key

USUARIO VARCHAR2(50) No - 1

PERMISOS VARCHAR2(100) Yes - - Fuente: Elaboración propia

Tabla 16Tabla Noticias

Column Name Data Type Nullable Default

Primary Key

ID NUMBER No - 1

TITULO VARCHAR2(1000) Yes - -

IMAGEN VARCHAR2(1000) Yes - -

DESCRIPCION VARCHAR2(3000) Yes - -

CATEGORIA VARCHAR2(1000) Yes - -

Fuente: Elaboración propia

108

Tabla 17 Tabla Aplicaciones

Column Name Data Type Nullable Default Primary

Key

ID NUMBER No - 1

NOMBRE VARCHAR2(30) No - -

DESCRIPCION VARCHAR2(1000) No - -

LOGO BLOB No - -

TIPO VARCHAR2(3) No - -

LINKIOS VARCHAR2(255) Yes - -

LINKANDROID VARCHAR2(255) Yes - -

LINKWEB VARCHAR2(255) Yes - -

ACTUALIZACION DATE No - -

Fuente: Elaboración propia

Tabla 18Tabla Dispositivos

Column Name Data Type Nullable Default Primary

Key

ID NUMBER No - 1

USUARIO VARCHAR2(50) No - -

NOMBRE VARCHAR2(50) No - - Fuente: Elaboración propia

109

6.4 PRUEBAS 6.4.1 Pruebas de aceptación con los casos de prueba. A partir de los casos de uso, se realiza pruebas de aceptación de la aplicación, validando su funcionamiento frente a los requerimientos. Para la realización de las pruebas se usaron los usuarios institucionales del equipo de trabajo, con las pruebas se validaron unas pautas las cuales se cumplieron en su totalidad (VER ANEXO 3)

110

BIBLIOGRAFÍA About Apache Cordova™ [en línea]. Apache Cordova [consultado el 17 de Marzo de 2016]. Disponible en internet: http://cordova.apache.org Android Studio v10. Características y comparativa con eclipse. Academiaandroid.com [en línea]. 2014 [consultado el 18 de Marzo de 2016]. Disponible en internet: http://academiaandroid.com/android-studio-v1-caracteristicas-comparativa-eclipse/ Aplicación colegio alemán [en línea]. Androidpit.es [consultado el 24 de Marzo de 2016]. Disponible en internet: http://www.androidpit.es/aplicacion/com.appmachine.p4908EJ Barcelona al mobil [en línea]. itunes.apple.com [consultado el 24 de Marzo de 2016]. Disponible en internet: https://itunes.apple.com/es/app/barcelona-al-mobil/id476286604?mt=8 Barnard [en línea]. Barnard.edu [consultado el 24 de Marzo de 2016]. Disponible en internet: http://a2.mzstatic.com/us/r30/Purple7/v4/24/c4/56/24c4567f-2b20-8280-95b6-264b20fa2d6d/screen322x572.jpeg BRISTOWE John. ¿What is a Hybrid Mobile App? Developer.telerik.com [en línea]. Marzo 2015. [consultado el 15 de marzo de 2016]. Disponible en internet: http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/ CALDERON Marta E y CEDEÑO, Allan. Enseñanza del concepto de arquitectura de tres capas integrado con UML. Citic.ucr.ar.cr [en línea]. 2013 [consultado el 2 de Febrero de 2016]. Disponible en internet: http://citic.ucr.ac.cr/sites/default/files/recursos/CalderonCedeno_jodci2013_articulo.pdf

111

Cali App [en línea] Google Play [consultado el 24 de Marzo de 2016]. Disponible en internet: https://play.google.com/store/apps/details?id=com.alcaldiacalimovil CASTILLO, Luciano. GitHub conociendogitub.readthedocs.io [en línea]. 2012 [consultado el 22 de Mayo del 2016]. Disponible en internet: http://conociendogithub.readthedocs.io/en/latest/data/introduccion/ Cifras 2016-3 [en línea]. Santiago de Cali: Universidad Autónoma de Occidente.2016 [consultado el 24 de Marzo de 2016]. Disponible en internet: http://www.uao.edu.co/la-universidad/universidad-autonoma-de-occidente-en-cifras CORDOBA CELY, Carlos Andrés. La experiencia de usuario extendida (UxE) [en línea]. Tesis doctoral. Doctorado en ingeniería multimedia. Barcelona. Universidad politécnica de Cataluña. Escuela técnica superior de ingeniería industrial. 2013. 218 p. [consultado el 2 de agosto del 2016]. Disponible en internet: http://www.tesisenred.net/bitstream/handle/10803/116204/TCCC1de1.pdf?sequence=1 CUELLO Javier y VITTONE Jóse. Diseñando apps para móviles [en línea]. España. 2013 [consultado el 16 de Marzo 2016]. Disponible en internet: http://www.appdesignbook.com/es/contenidos/las-aplicaciones/ DELGADO, Andrea. GARCÍA RODRIGUEZ DE GUZMAN, Ignacio. RUIZ, Francisco. Desarrollo de servicios con SoaML desde procesos de negocio en BPMN: metodología y automatización [en línea]. Montevideo: Universidad de la Republica. Facultad de ingeniería. Instituto de computación. 2011. 14 p. [consultado el 2 de Febrero de 2016]. Disponible en internet: http://lbd.udc.es/jornadas2011/actas/JCIS/JCIS/S4/S4_4_paper.pdf GlassFish Server Quick Start Guide [en línea]. Oracle [consultado el 2 de febrero del 2017]. Disponible en internet: http://www.oracle.com/technetwork/middleware/glassfish/documentation/index.html

112

GONZALEZ, Daniel. Responsive web design: multidispositivo para mejorar la experiencia del usuario. Bid.ub.edu [en línea]. 1998. [consultado el 17 de Marzo de 2016]. Disponible en internet: http://bid.ub.edu/pdf/31/es/gonzalez2.pdf. ISSN 1575-5886 Google Play Store [en línea]. Descargaplaystore.mobi [consultado el 24 de Marzo de 2016]. Disponible en internet: http://descargaplaystore.mobi/wp-content/uploads/2015/10/descargar-play-store1.jpg JaveMóvil Pontificia Universidad Javeriana Cali. [En línea]. Apple.com Itunes. [Consultado el 24 de Marzo de 2016]. Disponible en internet: https://itunes.apple.com/co/app/javemovil-2/id946790061?mt=8 JIANG Hao. Introduction CS335. Principles of multimedia systems. Computer Science Department [en línea]. 2007 [consultado el 12 de Marzo 2016]. Disponible en internet http://www.cs.bc.edu/~hjiang/c335/notes/lec1/intro.ppt LUNDEN, Ingrid. 6.1B SMARTPHONE Users Globally by 2020, Overtaking Basic Fixed Phone Subscriptions. Techcrunch.com [en línea]. Junio 2015 [consultado el 24 de Marzo de 2016]. Disponible en internet:http://techcrunch.com/2015/06/02/6-1b-smartphone-users-globally-by-2020-overtaking-basic-fixed-phone-subscriptions/ Measuring the Information Society Report 2014 [en línea]. Suiza. International Telecommunications Union (ITU) [consultado el 24 de Marzo 2016]. Disponible en internet: https://www.itu.int/en/ITU-D/Statistics/Documents/publications/mis2014/MIS2014_without_Annex_4.pdf MONER CANO, David. SABATÈ ALSINA, Jordi. Usabilidad: el guion multimedia. Unsj.edu.ar [en línea] [consultado el 1 de agosto del 2016]. Disponible en internet: http://www.unsj.edu.ar/unsjVirtual/comunicacion/seminarionuevastecnologias/wp-content/uploads/2015/04/usabilidad_para_web.pdf MUÑOZ ARTEAGA, Jaime, et al. Temas de diseño en interacción humano-computadora [en línea]. 1a ed. LATIn 2014 [consultado el 2 de agosto del 2016].

113

Disponible en internet: http://www.proyectolatin.org/books/Temas_de_Dise%C3%B1o_en_Interacci%C3%B3n_Humano_Computadora_CC_BY-SA_3.0.pdf NAVARRO MARSET, Rafael. Rest vs Web services. Modelado, Diseño e Implementación de Servicios Web. users.dsic.upv.es [en línea]. 2006-07. [consultado el 29 de Abril del 2017]. Disponible en internet: http://users.dsic.upv.es/~rnavarro/NewWeb/docs/RestVsWebServices.pdf Oracle Application Express [en línea]. Oracle [consultado el 17 de Marzo de 2016]. Disponible en internet: https://apex.oracle.com/es/ PRIETO BLÁZQUEZ, Joseph. RÁMIREZ VIQUE, Robert, MORILLO POZO, Julián David. DOMINGO PIETRO, Marc. Tecnología y desarrollo e dispositivos móviles. Entornos de programación móviles [en línea]. 1 ed. Barcelona: Eureca Media, SL. 2011. [consultado el 13 de Marzo de 2016]. Disponible en internet: https://desarrolloappandroid.files.wordpress.com/2013/06/tecnologia-desarrollo-dispositivos-moviles.pdf Principios de los sistemas multimedia [en línea]. Blog.codecentric.de [consultado el 17 de Marzo de 2016] Disponible en internet: https://blog.codecentric.de/files/2014/11/overview.png Principios de los sistemas multimedia [en línea]. Computer Science department. Septiembre 4 2007 [consultado el 12 de Marzo de 2016]. Disponible en internet: http://www.cs.bc.edu/~hjiang/c335/ Programación en dispositivos móviles portables. Android [en línea]. Universidad Carlos III de Madrid. Software de comunicaciones [consultado el 17 de Marzo de 2016] Disponible en internet: https://sites.google.com/site/swcuc3m/home/android/portada Programación en dispositivos móviles portables. Android [en línea]. Universidad Carlos III de Madrid. Software de comunicaciones [consultado el 17 de Marzo de 2016] Disponible en internet: https://sites.google.com/site/swcuc3m/home/android/portada

114

Rational Unified Process. (RUP). Ima.udg.edu [en línea] [consultado el 22 de Mayo de 2016]. Disponible en Internet: http://ima.udg.edu/~sellares/EINF-ES2/Present1011/MetodoPesadesRUP.pdf RUIZ Harold. Penetración de Móviles en Colombia. Slideshare.net/eMarketingHoy [en línea], noviembre 2013, [consultado el 17 de Marzo de 2016]. Disponible en internet: http://www.slideshare.net/eMarketingHoy/penetracion-de-moviles-en-colombia-e-marketinghoy STALLINGS W. Sistemas Operativos [en línea] 2ed. Madrid: Prenticehall. 1997. [consultado el 16 de Marzo de 2016]. Disponible en internet: http://cs.uns.edu.ar/~jechaiz/sosd/clases/libros/stallings-beymar.pdf TECNOSFERA Redacción. En Colombia hay 14.4 millones de usuarios de ‘SMARTPHONE’ [en línea]. En El Tiempo. Enero. 2015 [consultado el 17 de Marzo de 2016]. Disponible en internet: http://www.eltiempo.com/tecnosfera/novedades-tecnologia/colombia-el-tercer-pais-de-america-latina-con-mayor-numero-smartphones-/15066597 The Ionic Book [en línea]. 2013-2016 [consultado el 20 de Marzo de 2016]. Disponible en internet: http://ionicframework.com/docs/guide/ VIGNAGA, Andrés. PEROVICH, Daniel. Arquitecturas y tecnologías para el desarrollo de aplicaciones web [en línea]. Montevideo: Universidad de la Republica. Facultad de ingeniería. Instituto de computación. 51 p. [consultado el 17 de Marzo de 2016]. Disponible en internet: http://moodle2.unid.edu.mx/dts_cursos_mdl/pos/TI/LP/AM/01/Arquitecturas_y_tecnologias_para_el_desarrollo_de_aplicaciones_web.pdf

115

ANEXOS

ANEXO A. RESULTADO ENCUESTA ONLINE PROTOTIPO WIREFRAME (PRUEBAS DE USABILIDAD)

Ilustración 56: Género

Fuente: Elaboración propia. Ilustración 57: Edad

Fuente: Elaboración propia.

116

Ilustración 58: Facultad a la que pertenece el programa.

Fuente: Elaboración propia. Ilustración 59: Semestre en el que se encuentra

Fuente: Elaboración propia.

117

Ilustración 60: Pregunta 1.

Fuente: Elaboración propia. Ilustración 61: Pregunta 2

Fuente: Elaboración propia.

118

Ilustración 62: Pregunta 3

Fuente: Elaboración propia. Ilustración 63: Pregunta 4

Fuente: Elaboración propia.

119

Ilustración 64: Pregunta 5

Fuente: Elaboración propia. Ilustración 65: Pregunta 6

Fuente: Elaboración propia.

120

Ilustración 66: Pregunta 7

Fuente: Elaboración propia. Ilustración 67: Pregunta 8

Fuente: Elaboración propia.

121

Ilustración 68: Pregunta 9

Fuente: Elaboración propia.

122

ANEXO B. MANUAL USUARIO DEL PORTAL ADMINISTRATIVO Definición de Información y servicios para el usuario (Administrador). Pantalla de Logueo: se presenta una interfaz simple en donde el administrador digita el usuario y la contraseña para ingresar. Pestaña de Apps Móviles. Crear un nueva app: Seleccionar tipo de servicio, Nombre de la app, icono o imagen representativo de la app, descripción de la app, la URL del re direccionamiento del servicio que puede ser para las tiendas móviles (PlayStore, AppStore) o páginas web oficiales donde se pueden descargar e instalar las aplicaciones. Actualizar una app existente (Actualizar): Seleccionar tipo de servicio, Nombre del servicio, icono o imagen representativo de la app, descripción de la app, la URL de re direccionamiento que puede ser para las tiendas móviles (PlayStore, AppStore) o páginas web oficiales donde se pueden descargar e instalar las aplicaciones. Eliminar un servicio creado (Eliminar): Busque el nombre de la app que desea eliminar y pulse el icono con una “X” y presione confirmar. Pestaña de Apps Web. Crear un nueva app: Seleccionar tipo de servicio, Nombre del servicio, icono o imagen representativo del servicio, descripción, la URL del re direccionamiento del servicio. Actualizar una app existente (Actualizar): Seleccionar tipo de servicio, Nombre del servicio, icono o imagen representativo del servicio, descripción, la URL del re direccionamiento del servicio. Eliminar un servicio creado (Eliminar): Busque el nombre de la app que desea eliminar y pulse el icono con una “X” y presione confirmar.

123

Pestaña de Noticias. Cargar Noticias: Presione el botón “Cargar”, confirme la acción. Tenga en cuenta que si desea actualizar las noticias de la semana, tiene que borrar las anteriores. Borrar noticias: Presione el botón “Borrar”, confirme la acción. Editar Noticia: Sobre la tabla de noticias, busqué la noticia que desea modificar, presione el botón con el icono de lápiz, edite la sección y guarde la información.

124

ANEXO C: DOCUMENTO PRUEBAS DE FUNCIONALIDAD Aplicación Móvil. En el siguiente documento se muestra el formato, y las pruebas realizadas para la validación del funcionamiento de la aplicación en cada uno de sus módulos. Estas pruebas también se llaman pruebas de carácter unitario o de caja blanca. Tabla 19: Caso de prueba 1 Caso de prueba Caso de prueba 1: Validación de credenciales.

Identificador de caso de prueba

CP1_VC

Función a probar Logueo del usuario a la aplicación.

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validar el ingreso de los usuarios a la aplicación, con su nombre de usuario y contraseña institucional.

Criterios de éxito - El usuario ingresa a la aplicación con su nombre de usuario y contraseña institucional

- Si el usuario se equivoca ingresando sus credenciales y el sistema muestra una retroalimentación, en la que se informa al usuario que se equivocó ingresando su nombre de usuario o contraseña.

- Si el usuario no está conectado a internet el sistema debe notificar al usuario no es posible ingresar a la aplicación.

Criterios de falla - El usuario no logran ingresar a la aplicación ingresando sus credenciales institucionales correctamente.

- El usuario logra ingresar a la aplicación ingresando credenciales incorrectas.

- El sistema no muestra una retroalimentación al usuario cuando no puede entrar en la aplicación.

125

Tabla 19 (Continuación)

Precondiciones No hay precondiciones.

Usuario Estudiante

Autor

Fecha de creación

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario selecciona el icono de la aplicación

La aplicación abre una interfaz de login

2 El usuario ingresa su usuario institucional, y contraseña institucional.

3 El usuario selecciona el botón de ingresar.

La aplicación ingresa a la interfaz de aplicaciones móviles y páginas web.

Finalización del flujo de caso de uso

Postcondiciones Fuente: Elaboración propia

126

Tabla 20: Caso de prueba 2 Caso de prueba caso de prueba 2: Módulo de noticias

Identificador de caso de prueba

CP2_MN

Función a probar Consultar las noticias de la universidad.

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validar que el usuario pueda consultar las noticias de la universidad

Criterios de éxito - Si la aplicación despliega una lista de las noticias de la UAO de la semana.

- Si el usuario selecciona una noticia de la lista y se despliega la noticia completa, después de dicha selección.

- Si el usuario recibe nuevas noticias cada semana en la sección de noticias de la aplicación.

- Si no hay conexión a internet se despliega una ventana emergente avisando al usuario que necesita la conexión para consultar las noticias.

Criterios de falla - Si la aplicación no carga las noticias de la semana. - Si el usuario selecciona una noticia y esta no carga

consecuentemente. - Si las noticias no se actualizan cada semana.

Precondiciones pasar por la interfaz de logueo

Usuario Estudiante

Autor

Fecha de creación

127

Tabla 20 (Continuación)

Flujo del caso de Prueba

pasos Usuario Sistema

1 El usuario ve la información presente en la interfaz, y ve que se encuentra en la sección de aplicaciones, consecuentemente selecciona el botón con el icono de noticias y el título noticias en la parte de abajo el icono.

La aplicación carga la pantalla de noticas.

2 El usuario ve la información presente en la interfaz, y ve una lista de noticias con el título, una imagen, y un fragmento de su contenido.

3 El usuario se desplaza por la lista, y selecciona una que le llama la atención.

La aplicación, carga la noticia y presenta la interfaz, con una imagen, el título y todo el contenido pertinente a la noticia.

4 El usuario lee la noticia, y selecciona el botón con el icono de devolverse.

La aplicación vuelve a la interfaz en donde se encuentra la lista de noticias.

Finalización del flujo del caso de uso.

Postcondiciones

Fuente: Elaboración propia

128

Tabla 21: Caso de prueba 3 Caso de prueba caso de prueba 3: sección de aplicaciones

Identificador de caso de prueba

CP3_SA

Función a probar Consultar las aplicaciones y páginas web de la universidad Autónoma de Occidente

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validar que los usuarios puedan consultar las aplicaciones móviles y páginas web de la universidad.

Criterios de éxito - Si el sistema despliega una lista de aplicaciones móviles y páginas web.

- Si el usuario puede seleccionar una página web o aplicación móvil, y posteriormente se abre una ventana con el título, una descripción, un link para la página web, o un link de descarga para la aplicación móvil.

Criterios de falla - Si el sistema no carga una lista de aplicaciones móviles y web, cuando el usuario entra a la sección de aplicaciones.

- si el usuario selecciona una aplicación móvil o página y esta no carga información adicional en una ventana emergente.

- El sistema no muestra una retroalimentación al usuario cuando no puede entrar en la aplicación.

Precondiciones loguearse en la aplicación

Usuario Estudiante

Autor

Fecha de creación

129

Tabla 21 (continuación)

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario ve la interfaz de aplicaciones, y ve dos secciones aplicaciones móviles y páginas web, después el usuario selecciona aplicaciones móviles.

La aplicación muestra una lista con las aplicaciones móviles de la universidad.

2 El usuario ve una lista de aplicaciones móviles de la universidad cada una aparece con un logo de la aplicación y el nombre, el usuario selecciona una aplicación que le llama la atención.

La aplicación carga una ventana emergente en donde aparece el icono de la aplicación, el nombre, una descripción sobre esta, y un link de descarga.

3 El usuario selecciona el link de descarga de la ventana emergente de la aplicación.

La aplicación redirige al usuario a la tienda de aplicaciones del dispositivo.

4 El usuario descarga la aplicación que seleccionó desde la tienda de aplicaciones del dispositivo, y después vuelve a la interfaz de aplicaciones móviles y páginas web.

130

5 El usuario selecciona la sección de páginas web.

La aplicación abre una lista de páginas web.

6 El usuario selecciona una página web de la lista que le llama la atención.

La aplicación abre una ventana emergente, en la cual aparece un título, un icono. Una descripción, y un link que redirige a la página web.

7 Finalización del flujo de caso de uso.

Postcondiciones Fuente: Elaboración propia Tabla 22: Caso de prueba 4 Caso de prueba caso de prueba 4: Sección de ajustes

Identificador de caso de prueba

CP4_SA

Función a probar Configuración de los filtros de noticias, y el cierre de sesión de la aplicación.

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validar la configuración de los filtros de las noticias, y el cierre de sesión de la aplicación.

Criterios de éxito - Si el usuario puede seleccionar y deseleccionar los filtros de las noticias.

- Si el usuario puede cerrar sesión. - Si al momento de cerrar sesión aparece una

ventana de alerta, preguntando si está seguro que quiere cerrar sesión.

131

Tabla 22 (Continuación)

Criterios de falla - Si el usuario no puede cerrar sesión desde la sección de ajustes.

- Si no aparece una ventana de alerta confirmando la decisión de cerrar sesión.

- Si no se puede seleccionar y deseleccionar los filtros de las noticias.

- Si los cambios en los filtros no se ven reflejados en el módulo de noticias

Precondiciones Loguearse en la aplicación

Usuario Estudiante

Autor

Fecha de creación

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario ve la información presente en la interfaz, y ve que se encuentra en la sección de aplicaciones, consecuentemente selecciona el botón con el icono de ajustes y el título ajustes en la parte de abajo el icono.

La aplicación carga la pantalla de ajustes.

2 El usuario ve la información en la interfaz, nota la sección de filtros de noticias, y empieza a seleccionar los filtros que le llaman más la atención.

La aplicación guarda la preferencia en la selección de filtros del usuario.

132

Tabla 22 (Continuación)

3 El usuario oprime el botón de cerrar sesión que se encuentra en la parte de abajo de la interfaz.

La aplicación abre una ventana de alerta, en donde se le pregunta al usuario si está seguro que quiere cerrar sesión.

4 EL usuario selecciona “Ok” de la ventana de alerta.

La aplicación devuelve al a la interfaz de login.

Finalización del flujo de caso de uso.

Postcondiciones Guardar los cambios de estados del sistema. Fuente: Elaboración propia Portal administrativo. En el siguiente documento se muestra el formato que se utilizó para las pruebas de validación del funcionamiento del portal administrativo de la aplicación móvil UAOMovil, haciendo uso de los casos de uso. Estas pruebas también se llaman pruebas de carácter unitario o de caja blanca. Tabla 23: Caso de prueba 1. Validación de credenciales portal web Caso de prueba Caso de prueba 1: Validación de credenciales portal web.

Identificador de caso de prueba

CP1_VCP

Función a probar Logueo del usuario a la aplicación.

Objetivo Validar los requerimientos asociados al caso de uso.

133

Tabla 23 (Continuación)

Descripción Validar el ingreso de los usuarios a la aplicación, con su nombre de usuario y contraseña institucional.

Criterios de éxito - El usuario ingresa a la aplicación con su nombre de usuario y contraseña institucional

- Si el usuario se equivoca ingresando sus credenciales y el sistema muestra una retroalimentación, en la que se informa al usuario que se equivocó ingresando su nombre de usuario o contraseña.

- Si el usuario no está conectado a internet el sistema debe notificar al usuario no es posible ingresar a la aplicación.

Criterios de falla - El usuario no logran ingresar a la aplicación ingresando sus credenciales institucionales correctamente.

- El usuario logra ingresar a la aplicación ingresando credenciales incorrectas.

- El sistema no muestra una retroalimentación al usuario cuando no puede entrar en la aplicación.

Precondiciones No hay precondiciones.

Usuario Personal administrativo de la universidad.

Autor

Fecha de creación

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario digita la dirección web del portal web, en el navegador.

El sistema carga la interfaz de login del portal web.

134

Tabla 23 (Continuación)

2 El usuario ingresa su usuario institucional, y contraseña institucional.

3 El usuario selecciona el botón de ingresar.

La aplicación ingresa a la interfaz de aplicaciones móviles y páginas web.

Finalización del flujo de caso de uso

Postcondiciones Fuente: Elaboración propia Tabla 24: Caso de prueba 2. Módulo de noticas portal web. Caso de prueba Caso de prueba 2: Módulo de noticias portal web.

Identificador de caso de prueba

CP2_MNP

Función a probar Cargar las noticias de la semana, y borrar las noticas de la semana pasadas.

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validar que el usuario pueda cargar las noticias de la semana en la base de datos y puede borrar las noticas de la semana pasada.

135

Tabla 24 (Continuación)

Criterios de éxito - Si el usuario puede cargar las noticias de la semana exitosamente en la base de datos.

- Si el sistema permite al usuario borrar las entradas anteriores de noticias de la base de datos.

-

- Si el usuario recibe nuevas noticias cada semana en la sección de noticias de la aplicación.

- Si no hay conexión a internet se despliega una ventana emergente avisando al usuario que necesita la conexión para poder realizar cambios en la base de datos

Criterios de falla - Si el usuario no puede cargar las noticias de la semana en la base de datos.

- Si el usuario no puede borrar las entradas anteriores de la base de datos

Precondiciones Pasar por la interfaz de logueo.

Usuario Personal administrativo.

Autor

Fecha de creación

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario ve la información presente en la interfaz, y nota que se encuentra en la página principal del portal web, y selecciona noticias que se encuentra en un menú lateral que se encuentra ubicado, en la parte izquierda de la pantalla.

La página web carga la interfaz de noticias.

136

Tabla 24 (Continuación)

2 El usuario ve la interfaz de noticias y nota una lista de noticias, además ve dos botones, “Cargar noticias”, y “Borrar noticias”, el usuario selecciona “Borrar noticias”.

La página web borra todas las entradas de noticias que se encuentran en la base de datos.

3 El usuario nota que la lista de noticias ya no hay entradas, consecuentemente selecciona “Cargar noticas”.

La página web carga las noticias de la semana de un servidor de la universidad en lo guarda en la base de datos de “UAOMovil”

4 El usuario nota que se añaden nuevas entradas a la lista.

Finalización del flujo de caso de uso.

Postcondiciones Guardar los cambios de estados del sistema. Fuente: Elaboración propia. Tabla 25: Caso de prueba 3. Sección de aplicaciones portal web. Caso de prueba caso de prueba 3: sección de aplicaciones portal web

Identificador de caso de prueba

CP3_SAP

Función a probar Consultar, crear, modificar, y eliminar entradas de la base de datos de aplicaciones móviles y páginas web.

137

Tabla 25 (Continuación)

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validar que los usuarios puedan consultar, crear, y eliminar entradas de la base de datos de aplicaciones móviles y páginas web.

Criterios de éxito - Si el usuario puede consultar las aplicaciones móviles y web que se encuentran la base de datos

- Si el usuario puede crear una nueva entrada de una aplicación móvil o página web.

- Si el usuario puede modificar una entrada de la base de datos.

- Si el usuario puede eliminar una entrada de la base de datos.

Criterios de falla - Si el usuario no puede consultar las aplicaciones móviles y web que se encuentran la base de datos

- Si el usuario no puede crear una nueva entrada de una aplicación móvil o página web.

- Si el usuario no puede modificar una entrada de la base de datos.

- Si el usuario no puede eliminar una entrada de la base de datos.

Precondiciones loguearse en la página

Usuario Personal administrativo

Autor

Fecha de creación

138

Tabla 25 (Continuación)

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario ve la información presente en la interfaz, y nota que se encuentra en la página principal del portal web, y selecciona aplicaciones que se encuentra en un menú lateral que se encuentra ubicado, en la parte izquierda de la pantalla.

La página web carga la pantalla de aplicaciones

2 El usuario ve una interfaz donde hay una lista en la cual se ve que las entradas son aplicaciones móviles y páginas web, un buscador para filtrar las entradas de la lista, un botón de “nueva entrada”, y un botón con un icono de un lápiz al lado de cada entrada de la lista, el usuario selecciona el botón con el icono del lápiz.

El portal cargar una interfaz con un formulario.

3 El usuario ve la información en la pantalla y nota que hay un formulario, con información de la entrada que selecciona en la lista, hace unos cambios, y la da al click al botón “Guardar cambios”

El portal vuelve a cargar la interfaz de aplicaciones.

4 En la lista el usuario nota que la entrada que seleccionó anteriormente, cambiaron los valores que había modificado en el formulario. El usuario selecciona el botón de “Nueva entrada”

El portal carga un formulario vacío.

139

Tabla 25 (Continuación)

5 Se carga una interfaz de un formulario en ella están campos de textos vacíos con los títulos: “Nombre de la aplicación”, “Descripción de aplicación”, “icono”, “link”, y “tipo de aplicación”. El usuario rellena los campos de texto vacíos, y selecciona el botón “Guardar entrada”.

El portal carga la interfaz de aplicaciones.

6 El usuario ve que hay una nueva entrada en la lista de aplicaciones.

Finalización del flujo de caso de uso.

Postcondiciones Guardar los cambios de estados del sistema. Fuente: Elaboración propia. Tabla 26: Caso de prueba 4 Caso de prueba Caso de prueba 4: Cerrar sesión.

Identificador de caso de prueba

CP4_CS

Función a probar

Cierre de sesión del portal administrativo.

Objetivo Validar los requerimientos asociados al caso de uso.

Descripción Validación del cierre de sesión del portal administrativo.

Criterios de éxito

- Si el usuario puede cerrar sesión. - Si antes de cerrar sesión aparece una ventana

140

Tabla 26 (Continuación)

emergente, preguntando al usuario si está seguro que quiere salir del portal administrativo.

Criterios de falla - Si el usuario no puede cerrar sesión desde la sección de ajustes.

- Si no aparece una ventana de alerta confirmando la decisión de cerrar sesión.

- Si no se puede seleccionar y deseleccionar los filtros de las noticias.

- Si los cambios en los filtros no se ven reflejados en el módulo de noticias

Precondiciones Loguearse en la aplicación

Usuario Personal administrativo.

Autor

Fecha de creación

Flujo del caso de Prueba

Pasos Usuario Sistema

1 El usuario ve la información presente en la interfaz, y nota que se encuentra en la página principal del portal web, y selecciona el botón de “Cerrar sesión” que se encuentra en la esquina superior derecha de la pantalla.

El portal carga la pantalla de login de la página web.

Finalización del flujo de caso de uso

Postcondiciones Fuente: Elaboración propia