APLICACIÓN PARA LA ORGANIZACIÓN JUANCHO CORRELÓN
61
1 APLICACIÓN PARA LA ORGANIZACIÓN JUANCHO CORRELÓN Arce Gómez, Camilo Andrés Torres Barandica, Álvaro José Triviño Valderrama, Cyndi Tatiana Universidad San Buenaventura – Cali Facultad de Ingeniería Programa de Ingeniería Multimedia Cali 2016
Transcript of APLICACIÓN PARA LA ORGANIZACIÓN JUANCHO CORRELÓN
1
APLICACIÓN PARA LA ORGANIZACIÓN
JUANCHO CORRELÓN
Arce Gómez, Camilo Andrés
Torres Barandica, Álvaro José
Triviño Valderrama, Cyndi Tatiana
Universidad San Buenaventura – Cali
Facultad de Ingeniería
Programa de Ingeniería Multimedia
Cali
2016
2
APLICACIÓN PARA LA ORGANIZACIÓN
JUANCHO CORRELÓN
Arce Gómez, Camilo Andrés
Torres Barandica, Álvaro José
Triviño Valderrama, Cyndi Tatiana
Trabajo de grado para optar por el título de Ingeniero Multimedia
Dario Fernando Bolívar Gómez, Diseñador Gráfico.
Asesor de Tesis
Universidad San Buenaventura – Cali
Facultad de Ingeniería
Programa de Ingeniería Multimedia
Cali
2016
3
Agradecimientos
En primer lugar le damos gracias a Dios por permitirnos realizar todo este proceso de educación
y por permitirnos llegar hasta aquí. A nuestros padres por todo el esfuerzo, apoyo y ánimos
constantes en todo este proceso de formación como profesionales. A todos los profesores y a la
Universidad de San Buenaventura - Cali por brindarnos todas las herramientas necesarias para
nuestra formación tanto profesional como personal. A los docentes Pablo Anibal Bejarano de la
Hoz, Dario Fernando Bolívar Gómez y al director de carrera, Andres Mauricio Calderon Garces,
que fueron pieza clave para el desarrollo de este proyecto. Gracias a sus esfuerzos, dedicación
conocimiento, paciencia y motivación fueron una gran guía para la culminación de este proyecto
y un gran ejemplo para nuestras vidas profesionales.
Gracias también a todas las personas que en algún momento dado nos brindaron de maneras
diferentes su ayuda para que este proyecto saliera, con información, paciencia, ánimos y su
apoyo, ya que todo esto fue vital para nuestro proceso.
Por último pero no menos importante agradecemos a la Organización Juancho Correlón por
permitirnos realizar este proyecto, que nos lleno de experiencias y conocimientos.
Álvaro José Torres Barandica
Camilo Andrés Arce Gómez
Cyndi Tatiana Triviño Valderrama
4
Contenido
Agradecimientos .................................................................................................................... 3
Contenido .............................................................................................................................. 4
Lista de Figuras ...................................................................................................................... 7
Lista de Tablas ....................................................................................................................... 8
Capítulo 1 .............................................................................................................................. 9
1. Introducción ............................................................................................................................... 9
2. Justificación ................................................................................................................................ 9
3. Objetivos .................................................................................................................................. 10
3.1. Objetivo General .......................................................................................................................... 10
3.2. Objetivo Específicos ..................................................................................................................... 10
4. Metodología y proceso de trabajo ............................................................................................. 11
4.1. Recolección de información ........................................................................................................ 11
4.2 Investigación en diseño y desarrollo. ........................................................................................... 11
5. Planificación ............................................................................................................................. 12
6. Presupuesto ............................................................................................................................. 14
Capítulo 2: Análisis ............................................................................................................... 15
1. Estado del Arte ......................................................................................................................... 15
Desafío de guerreros .......................................................................................................................... 15
Move ................................................................................................................................................... 16
5
Media Maratón de Bogotá (mmB) ...................................................................................................... 17
Soy Maratonistas ................................................................................................................................ 17
Adidas Correr & Entrenamiento ......................................................................................................... 18
2. Público Objetivo ....................................................................................................................... 19
3. Definición de objetivos/especificaciones del producto ............................................................... 19
4. Requisitos de la aplicación ........................................................................................................ 20
Capítulo 3: Diseño ................................................................................................................. 22
1. Diagrama de navegación ........................................................................................................... 22
Mapa de navegación ........................................................................................................................... 23
2. Diseño gráfico e interfaces ........................................................................................................ 24
2.1. Estilos ........................................................................................................................................... 24
2.1.1. Tipografía .................................................................................................................................. 26
4. Diseño de Software .................................................................................................................. 27
4.1. Levantamiento de requisitos ....................................................................................................... 27
4.2 Diseño detallado de software ....................................................................................................... 28
4.2 Arquitectura .................................................................................................................................. 28
Capítulo 4: Desarrollo ........................................................................................................... 34
1. Desarrollo y programación de la aplicación ............................................................................... 34
2. Lenguajes de programación y APIs utilizadas ............................................................................. 39
3. Requisitos de instalación .......................................................................................................... 41
4. Pruebas y resultados de Software ............................................................................................. 42
Capítulo 5: Conclusiones y líneas de futuro ........................................................................... 47
6
1. Conclusiones ............................................................................................................................ 47
2. Trabajo a futuro ....................................................................................................................... 48
Referencias ........................................................................................................................... 49
Anexos ................................................................................................................................. 52
7
Lista de Figuras
Figura 1: Pantalla principal y de perfil de Desafío de Guerreros
Figura 2: Pantalla principal de Move
Figura 3: Pantalla principal de Adidas correr & Entrenamiento
Figura 4: Mapa de navegación
Figura 5: Icono para Android / Icono para IOS
Figura 6: Paleta de colores aplicación Juancho Correlón
Figura 7: Estilo tipografía Helvética y Roboto
Figura 8: Arquitectura de carpetas web y servicios
Figura 8: Respuesta pregunta 1 ¿Es fácil de aprender cómo funciona la aplicación?
Figura 9: Respuesta pregunta 2 ¿Los iconos del menú principal son de fácil interacción?
Figura 10: Respuesta pregunta 3 ¿Considera que el desarrollo de la aplicación ayuda los sistemas
de información y comunicación de la organización?
Figura 11: Respuesta pregunta 4 ¿Considera que la información que se presenta dentro de la
aplicación es completa?
Figura 12: Respuesta pregunta 5 ¿Todos los botones e iconos realizan su función
satisfactoriamente?
Figura 13: Respuesta pregunta 6 ¿Cumple la aplicación con sus expectativas?
8
Lista de Tablas
Tabla 1: Cronograma
Tabla 2: Presupuesto
Tabla 3: Requerimientos Funcionales
Tabla 4: Requerimientos No Funcionales
Tabla 5: Ventajas y desventajas del patrón MVC
Tabla 6: Ventajas y desventajas de aplicaciones nativas
Tabla 7: Ventajas y desventajas de aplicaciones web móviles
Tabla 8: Ventajas y desventajas de aplicaciones híbridas
9
Capítulo 1
1. Introducción
En la ciudad de Cali, existen varias empresas y organizaciones que promueven el deporte. La
gran mayoría cuenta con incontables recursos digitales para llegar a sus usuarios, como páginas
web, cuentas en redes sociales, mailing, entre otras. A medida que avanza el tiempo y la
competencia aumenta, estos recursos se quedan cortos para atraer nuevos usuarios.
La Organización Juancho Correlón, una de las organizaciones promotoras del deporte en la
ciudad, se enfoca específicamente en la práctica de carreras a pie y en bicicleta. Cuenta con 7
carreras distribuidas en el año, con más de mil participantes. Tiene los medios básicos de
comunicación con el usuario, pero con el avance de las tecnologías digitales, busca una conexión
más cercana con los usuarios.
2. Justificación
La Organización Juancho Correlón no cuenta con un desarrollo móvil, por esto se plantea esta
solución, que brindará a todos los usuarios un medio de comunicación. Por medio de esta se
espera fortalecer los medios informativos y la interacción entre usuario-organización, ya que es
importante que exista este lazo para la fidelización del usuario. Esta herramienta facilita ciertas
actividades para los usuarios, como la inscripción a diferentes carreras, información acerca de los
resultados de las mismas, ver el registro de fotos de cada carrera, entre otros.
10
Para el desarrollo de este proyecto es necesario el estudio de tecnologías web y móviles, que
impulsan la investigación e integración de nuevas tecnologías, y que a su vez, pueden ser
aplicadas a los diferentes medios de comunicación con los usuarios.
3. Objetivos
3.1. Objetivo General
Desarrollar una aplicación móvil para la Organización Juancho Correlón, con el fin de interactuar
con sus usuarios.
3.2. Objetivo Específicos
1. Recolectar la información y los requisitos de la Organización y las empresas asociadas.
2. Diseñar el concepto gráfico y funcional por medio de estándares HCI.
3. Diseñar los componentes de software para el desarrollo de la aplicación.
4. Programar los componentes (módulos) de la aplicación.
5. Desarrollar la validación del producto teniendo en cuenta los estándares HCI.
11
4. Metodología y proceso de trabajo
4.1. Recolección de información
En esta etapa se contará con reuniones con los encargados de la Organización Juancho Correlón,
en las cuales se definirán todos los requisitos y requerimientos para un desarrollo óptimo de la
aplicación.
4.2 Investigación en diseño y desarrollo.
Se realizará una investigación en experiencia de usuario, diseño de interacción y usabilidad para
aplicaciones móviles y web. Igualmente se investigara sobre los diferentes Frameworks de
desarrollo multiplataforma, patrones de diseño, arquitectura basada en servicios (SOA, Service
Oriented Architecture).
4.2.1. Maquetación y diseño.
En primer lugar se realizará un boceto donde se mostrará la distribución de la aplicación,
llevando de la mano las filosofías y estándares de cada plataforma. Posteriormente a la
aprobación, se digitalizará obteniendo así los wireframes para Android e IOS, los cuales serán
adaptados para el desarrollo.
12
4.2.2. Etapa de desarrollo desktop
En este proyecto, se implementará un Panel Administrativo, para que la Organización Juancho
Correlón pueda administrar toda la información que desea visualizar en la Aplicación Móvil. Para
este desarrollo, se investigará sobre los diferentes patrones de arquitectura.
4.2.3. Etapa de desarrollo para móvil y servicios web.
Para el desarrollo de la aplicación de Juancho Correlón se investigará sobre los diferentes
métodos para desarrollar una aplicación móvil, bien sea como una aplicación nativa, un aplicativo
web móvil o una aplicación híbrida y de esta forma se procederá a realizar el front-end, basado en
los diseños previos. Por último, en este proyecto se investigará sobre la arquitectura de servicios
(SOA) junto con sus protocolos de transporte, para lograr un desarrollo ágil.
5. Planificación
La planeación de este proyecto cuenta con 10 meses de trabajo donde se desarrollaron diferentes
actividades, como lo fue la recolección de información, levantamiento de requisitos, reuniones,
entre otros. En la imagen de la tabla 1, se puede ver a mayor detalle cada actividad, su tiempo y
su precedencia.
13
Tabla 1: Cronograma
14
6. Presupuesto
La descripción detallada del presupuesto se encuentra en el Anexo 1, donde se explica cada unas
de las actividades. Ver Anexo 1.
Actividad Nombre de Actividad Valor
Actividad 1 Recoleccion de Informacion $ 40.000
Actividad 2 Reunión con Himalaya $ 70.000
Actividad 3 Prototipado y desarrollo de la interfaz $ 30.000
Actividad 4 Capacitaciones $ 1.680.000
Actividad 5 Diseño componentes de Software $ 30.000
Actividad 6 Desarrollo y pruebas $ 26.295.800
Total $ 28.145.800
Tabla 2: Presupuesto
15
Capítulo 2: Análisis
1. Estado del Arte
No es un desconocimiento que el uso de celulares se ha vuelto casi indispensable en la mayoría
de las personas en los últimos años [1]. Y que de un tiempo acá han surgido tendencias de
diseños y frameworks tales como lo es Phonegap, Ionic, Xamarin, para el desarrollo de
aplicaciones. aunque estos frameworks regularmente se usan para desarrollo web [2]. Gracias a
estos avances algunas empresas privadas y grupos de investigadores le están apostando a
aplicaciones para deportistas o atletas aportandoles una herramienta de información y
seguimiento de los diferentes eventos de atletismo. Dentro del marco de este informe se expondrá
las siguientes aplicaciones desarrolladas y disponibles en las tiendas Google Play y App Store:
Desafío de guerreros
Esta aplicación fue diseñada por la empresa Desafío de Guerreros by REebok. Esta permite a los
usuarios ver información de próximas carreras, fotos de todos los eventos y noticias, videos,
descuentos para las carreras, entrenamientos y resultados de las carreras [3].
16
Figura 1: Pantalla principal y de perfil de Desafío de Guerreros
Move
La aplicación move fue creada por tres ingenieros que conforman la empresa APPTITUDE.
Move brinda a los usuarios información de las carreras que están disponibles en costa rica en los
diferentes meses del año. En primera versión permite filtrar las carreras por fechas, distancias,
ubicación y en caso que los organizadores de las carreras lo permitan el usuario se puede inscribir
desde la app a dicha carrera. En su segunda versión agregaron diferentes deportes como MTB,
natación y triatlón logrando así una expansión de usuarios.
17
Figura 2: Pantalla principal de Move
Media Maratón de Bogotá (mmB)
Esta aplicación fue creada en Bogotá para la media maratón del 31-7-2016. mmB permite al
usuario estar conectado a las redes sociales de la media maratón, también muestra el recorrido
con sus puntos de servicios, dispone de álbumes de fotos y permite ver los resultados de la
carrera.
Soy Maratonistas
Las empres soy maratonista y samsung de Venezuela, se unieron para brindar una herramienta
que brinda a los usuarios noticias de las carreras, un calendario, consejos diarios y les permite
usar GPS para llevar un registro del entrenamiento.
18
Adidas Correr & Entrenamiento
La marca adidas le apuesta a las aplicaciones para los usuarios que les gustan los deportes.
Adidas correr & entrenamiento brinda un entrenador personal dando recomendaciones para las
rutinas de ejercicios, mostrando recorridos, y tomando los valores de tu actividad como
frecuencia cardíaca, ritmo, velocidad, rutas, calorías todo esto cuando vinculas “Train & Run”
con un Fit Smart. Adidas permite al usuario crear rutinas a la medida.
Figura 3: Pantalla principal de Adidas correr & Entrenamiento
19
2. Público Objetivo
Este proyecto tiene como fin principal llegar a los deportistas con interés en atletismo y los
seguidores de Juancho Correlón con el fin de tener una interacción entre usuario-organización
brindando una buena información de las diferentes actividades y contenidos de Juancho
Correlón.
3. Definición de objetivos/especificaciones del producto
El producto debe cumplir con los siguientes requisitos:
● Fortalecer la interacción entre usuario y la Organización Juancho Correlón por medio de
la aplicación móvil.
● Realizar un diseño fácil y agradable de manejar para el usuario.
● El diseño de la aplicación debe ser similar para las dos plataformas (Android y IOS).
● El desarrollo debe realizarse para las plataformas Android y IOS.
● La información que se presente en las noticias debe ser la misma que se muestra dentro de
la página web de Juancho Correlón.
20
4. Requisitos de la aplicación
Requisitos funcionales
No Requisito Prioridad
(A,M,B)
Dificultad
(A,M,B)
R1 El usuario podrá iniciar sesión a la aplicación con la cuenta creada
anteriormente. A B
R2 El usuario podrá registrarse (Crear una cuenta), con la que accede a la
aplicación. A M
R3 El usuario podrá inscribirse a una carrera desde la aplicación, por
medio de los formularios suministrados por Himalaya. A B
R4 El usuario podrá consultar el listado de carreras ofrecidas por Juancho
correlón. A M
R5 El usuario podrá consultar información de una carrera (Itinerario,
recorrido, etc). A M
R6 El usuario podrá modificar su información personal (Nombre, edad,
foto) A excepción del nombre de usuario A A
R7 Se contará con un panel administrativo, donde se pueda gestionar la
información de la aplicación (Noticias, Carreras, etc…) A A
R8 El administrador puede gestionar (crear, eliminar, modificar)
notificaciones A M
R9 El administrador puede gestionar (crear, eliminar, modificar) carreras A M
R10 El administrador puede gestionar(crear, eliminar, modificar)
patrocinadores A M
R11 El administrador puede gestionar (crear, eliminar, modificar) noticias A M
R12 El usuario podrá acceder al material fotográfico de su participación en
una carrera. M A
R13 El usuario podrá consultar los resultados de su participación en una
carrera. M A
R14 El usuario podrá consultar el ranking acumulado de las carreras en las
que ha participado. M M
R15 El usuario podrá consultar el ranking histórico de cada carrera M M
R16 El usuario podrá visualizar un mapa con la ruta o recorrido
correspondiente a cada carrera. M M
R17 El usuario podrá visualizar el tiempo faltante del inicio
correspondiente a cada carrera. M M
R18 El usuario recibirá una notificación después de inscribirse a una carrera B M
21
R19
El usuario podrá seleccionar el medio por el cual llegarán las
notificaciones de las carreras a la cual está inscrito: por correo
electrónico, notificaciones al app, ambas.
B M
R20
El usuario podrá seleccionar el medio por el cual llegarán las
notificaciones de recordatorios para inscripción de próximas carreras:
por correo electrónico, notificaciones al app, ambas.
B M
R21 El usuario podrá visualizar noticias e información sobre Juancho
Correlón en la sección HOME. B M
R22 El usuario podrá configurar las notificaciones de la aplicación (sonido,
vibrar, recibir). B M
Tabla 3: Requerimientos Funcionales
Requisitos No funcionales
No. Requisito Prioridad
(A,M,B)
Dificultad
(A,M,B)
R1 La aplicación debe utilizar los colores e imágenes corporativas de
Juancho Correlón
M B
R2 El ingreso al sistema estará restringido bajo contraseñas cifradas y
usuarios definidos
M M
R3 La aplicación debe funcionar en las plataformas IOS versión 7 o
posterior y Android versión 4 o posterior
A A
Tabla 4: Requerimientos No Funcionales
Los requisitos anteriores están representados en una matriz de wieggers se encuentran en el
Anexo 2.
22
Capítulo 3: Diseño
1. Diagrama de navegación
Los mapas de navegación sirven para representar la estructura de un desarrollo, mostrando los
principales conceptos. Es decir, la representación completa o resumida del aplicativo móvil,
orientando así al usuario, y ayudando a la organización de la información dentro del desarrollo.
Que permite a su vez verificar la funcionalidad del diseño.
Inicio – Esta pantalla se mostrará solo la primera vez que el usuario abra la aplicación. (1) Login -
(2) Registro o Registro con Facebook Home - (3) Página de noticias – Se mostrará las noticias más destacadas.
Visualización de noticia – Cada noticia se abrirá en una ventana nueva de la
aplicación. Perfil - (4) Información del Usuario – El usuario podrá visualizar todos sus resultados, carreras en
la que participó y en las que está actualmente inscrito. (4.1) Carreras Inscritas
(4.2) Resultados de carreras (4.3) Ranking Acumulado (4.4) Fotos Notificaciones (5) – Notificaciones cortas, que solo sirven para informar. Carreras - (6) Listado de las carreras – Mostrará todas las carreras en las diferentes modalidades.
(7) Carrera – se visualizará toda la información de la carrera. (7.1) Información (7.1.1) Modalidades (botones) (7.1.2) Patrocinadores (Al final de la página) (7.2) Mapa recorrido (7.2.1) Información recorrido (7.3) Inscripciones (7.4) Resultados de la carrera (7.4.1) Botones categorías (7.4.2) Vista tabla con resultado por categoría (7.5) Videos
23
Configuración (Botón desplegable) - Configuración Cuenta
Editar perfil Foto Nombre Contraseña
Cerrar Sesión (manda la login) Notificaciones
Recibir notificaciones ON/OFF Sonido ON/OFF Vibrar ON/OFF
Redes Instagram (Mandar a la aplicación) Facebook (Mandar a la aplicación) Twitter (Mandar a la aplicación) Youtube (Mandar a la aplicación) Patrocinadores Lista de todos los patrocinadores (Mandar a la página de cada uno) Créditos Universidad San Buenaventura Desarrolladores
Mapa de navegación
Figura 4: Mapa de navegación.
24
Para mejor visualización se anexa el mapa de navegación. Ver Anexo 3.
2. Diseño gráfico e interfaces
2.1. Estilos
Maquetación y diseño
El proceso de maquetación se inició mediante bocetos hechos a mano, de cada una de las vistas
descritas en el mapa de navegación presentado anteriormente, cumpliendo con las filosofías de
diseño de cada plataforma, sin dejar a un lado la herramienta con la que se desarrollara la
aplicación, ya que, esta influye en la implementación del diseño. Una vez aprobados los bocetos
por los encargados de la parte gráfica de la Organización Juancho Correlón, se desarrollaron los
wireframes, los cuales son los prototipos digitales donde se muestra la organización de los
diversos bloques de la aplicación.
Para evaluar la usabilidad del diseño de la interfaces centradas en el usuario se hace referencia a
los atributos más importantes que definen la usabilidad, los cuales son la efectividad, que es la
exactitud e integridad con las que los usuarios alcanzan las tareas propuestas; la eficiencia, que
define los recursos empleados, es decir, el esfuerzo y tiempo que emplearon para realizar las
tareas y por último la satisfacción de los usuarios frente al uso y entendimiento de la aplicación.
Para ello se realizan pruebas en donde participan grupos de usuarios representativos, quienes
mediante las políticas sobre aprendizaje móvil y estándares de usabilidad para el desarrollo de
aplicaciones móviles. Generan datos cuantitativos y cualitativos, ya que son usuarios reales
efectuando tareas reales. [4]
Las pruebas se describen más adelante en este documento.
25
Icono de Aplicación de Juancho Correlón
Los iconos son la primera impresión que tenemos de una aplicación, donde percibimos
visualmente y a grandes rasgos los productos, servicios, o herramientas de una empresa u
organización.
Para el diseño del icono en este proyecto, se utilizó como punto de partida el logo de la
organización, para así, brindar a los usuarios una imagen conocida y que puedan relacionar
fácilmente con la misma. La forma que tiene el icono en IOS es predeterminada por el sistema, a
diferencia de Android, que brinda libertad al desarrollador para el diseño que prefiera. Para tener
afinidad entre los iconos de las dos plataformas, se decidió que el diseño fuera en forma de un
cuadrado. [5]
Figura 5: Icono para Android / Icono para IOS
Estudio del color
El color juega un papel fundamental en el diseño de las GUI (Interfaz Gráfica de Usuario) por
esto la elección de los colores es un recurso vital en el diseño de una aplicación, ya que, el uso de
los mismos se verá reflejado en textos, botones, fondos, entre otros elementos que pueden
conformar una interfaz. La selección de la paleta de colores no debe ser arbitraria ya que este
tiene un objetivo funcional como variable informativa ligada a la función, es decir escoger el
color adecuado para que la información sea contrastada con el color. El contraste es un factor
26
clave para fomentar la buena lectura de la interfaz. Además del aspecto funcional, está también el
estético, donde se tiene presente la combinación de los acabados gráficos por esto se tuvo en
cuenta para el desarrollo de este proyecto la paleta institucional, al tener una gama tan amplia de
color por parte de la organización, se buscó para las partes adicionales de la interface (entiéndase
fondos, textos y botones) colores básicos como el blanco y el negro; el azul se tomó como
referencia, ya que también hace parte de los colores institucionales y es predominante en la
identidad visual de la organización. [6] [7]
Figura 6: Paleta de colores aplicación Juancho Correlón
2.1.1. Tipografía
El objetivo de la tipografía es conseguir que el texto se lea con claridad. Esto se logra seleccionar
seleccionando una buena fuente, un buen tamaño, una separación correcta entre líneas, ancho de
columnas y contraste visual con el fondo. Partiendo de una investigación acerca de las
27
plataformas, se encontró que la tipografía estándar para Android es Roboto [8], y para IOS 9 es
San Francisco [9], en versiones anteriores a IOS 9 es Helvética. Se decide utilizar las guías de
estilo tipográfico estándar, que para Android es Roboto, pero para IOS se opta por Helvética ya
que, la aplicación se soportará desde la versión de IOS 7.1 en adelante.
Figura 7: Estilo tipografía Helvética y Robot
4. Diseño de Software
4.1. Levantamiento de requisitos
Esta etapa es esencial en el inicio de todo proyecto, ya que a través de este proceso, se realiza la
aplicación de ingeniería de requisitos, para obtener y analizar las necesidades que se deben
abarcar. Se anexa el SRS (Especificación de requerimientos de software). Ver Anexo-4, donde se
conocerá una breve introducción al proyecto, propósitos, alcances y posteriormente la
perspectiva, funciones, restricciones de usuario y estudio del contexto en sus cuatro facetas.
Este levantamiento se hace con el fin de tener clara las bases de lo que se desarrollará, ordenando
y priorizando ciertos requisitos.
28
4.2 Diseño detallado de software
En el diagrama de casos de uso se muestra la relación entre actores (usuarios) y las tareas
(representados por un caso de uso) que se puede encontrar en los diferentes sistemas. Este
diagrama se realiza para definir las funciones del software, ya que a través de él podemos
verificar que cada requisito supla un caso de uso, y ayuda a que en un futuro no se genere un
control de cambio como un soporte.
Posterior al diagrama de casos de uso se continúa con las tarjetas CRC (clase, responsabilidades,
colaboradores). En las tarjetas se realiza el resumen, el primer acercamiento a una clase por
medio de la asignación de responsabilidades y colaboradores. Estas tarjetas se realizan con todos
los miembros del proyecto, con el fin de analizar la mejor ruta de diseño del desarrollo, y de
revisar que todas las especificaciones se cumplan a cabalidad.
Finalmente se realizó el diagrama de clases, donde se representa gráficamente la estructura del
sistema, mostrando las clases, sus atributos, operaciones, métodos y las relaciones. Es necesario
ya que de aquí deriva la lógica del desarrollo.
Gracias a este diseño detallado de software se logra abarcar los diferentes puntos del desarrollo,
permitiendo así pulir la estructura planteada para el proyecto. Ver Anexo 5.
4.2 Arquitectura
El patrón utilizado en este desarrollo fue MVC (Modelo, Vista y Controlador); ya que nos da un
desarrollo más limpio, separando de la estructura toda la lógica de negocio de los datos,
optimizando así el código y facilitando su mantenimiento, dentro de este patrón se encuentran los
siguientes componentes:
29
Modelo: Es el responsable de acceder a la capa de almacenamiento de datos (Base de datos), lo
más ideal es que este componente se encuentre independiente de la lógica de negocio. Para lograr
un buen empalme de la información, se utiliza el ORM (Mapeo de Objeto-Relacional) para
gestión de la base de datos, ya que nos facilita las labores básicas de cualquier acceso a datos, el
CRUD (Create, Read, Update y Delete). Realizando todas estas labores a través de un lenguaje de
alto nivel orientado a objetos como PHP, que se utilizará en el desarrollo de este proyecto, el cual
es explicado más adelante. [10]
Vistas: La vista es la capa de la aplicación que ve el usuario en un formato adecuado para
interactuar, en otras palabras, es nuestra interfaz gráfica.
Controlador: Es la capa que controla todo lo que puede realizar nuestra aplicación. Responde a
eventos, usualmente acciones del usuario e invoca cambios en el modelo y probablemente en la
vista. Está compuesto por acciones que se representan con funciones en una clase.
Las ventajas y desventajas de implementar el patrón MVC, se ven reflejadas en la siguiente tabla.
[11]
Ventajas Desventajas
Sencillez para crear distintas
representaciones de los mismos datos.
Tener que ceñirse a una estructura
predefinida, lo que a veces puede
incrementar la complejidad del sistema.
Hay problemas que son más difíciles de
resolver respetando el patrón MVC.
Reutilización de los componentes. La curva de aprendizaje para los nuevos
desarrolladores se estima mayor que la de
modelos más simples como Webforms.
Simplicidad en el mantenimiento de los
sistemas.
La distribución de componentes obliga a
crear y mantener un mayor número de
ficheros.
Facilidad para desarrollar prototipos
rápidos.
30
Los desarrollos suelen ser más escalables. Tabla 5: Ventajas y desventajas del patrón MVC.
A continuación se muestra en un diagrama de despliegue, como se emplea dicho patrón de
arquitectura.
31
Figura 8: Arquitectura de carpetas web y servicios
32
Arquitectura de Servicios
Para una aplicación móvil que necesita constantemente consultar e intercambiar datos con un
sistema basado en la web, para este tipo de casos se introduce una arquitectura orientada a
servicios (SOA) que es un marco para diseñar y desarrollar aplicaciones independientes, a las que
se puede acceder o integrar sus funcionalidades por medio de servicios web. Los servicios son
una funcionalidad a la que se puede acceder desde la red la cual describe las condiciones para
interactuar con ella, así como lo que puede realizar.
No es necesario usar servicios web para implementar un diseño basado en SOA, pero la manera
más común de hacerlo es a través de estos para el transporte e intercambio de información. Estos
están basados en estándares para la intercomunicación de sistemas independientemente de la
plataforma. [12]
La arquitectura SOA presenta dos arquitecturas de software orientadas a servicios web que son
SOAP (Simple Object Access Protocol) y REST (Representational State Transfer). A
continuación, se explicará cada arquitectura, así como sus características.
SOAP: Es un protocolo que se basa en estándares como XML (eXtensible Markup Language)
para la representación de datos y el lenguaje WSDL (Web Services Description Language) para
describir las funcionalidades de un servicio Web, una petición realizada a un servicio web basado
en SOAP es pesada para transferir por medio de una conexión de banda ancha baja o limitada,
además de difícil de manejar en JavaScript. [12][13]
REST: Es una arquitectura de software para la red que implementa o se basa en estándares para
transmitir datos sobre el protocolo HTTP a diferencia de SOAP que añade una capa adicional
33
para definir e implementar el servicio web. Las funcionalidades se solicitan por medio de los
métodos del protocolo HTTP (GET, PUT, DELETE, POST). REST puede implementar los
estándares XML y JSON (JavaScript Object Notation) para la representación de datos, los
servicios se invocan por medio de URL. [14][15]
Para una aplicación móvil la importancia del rendimiento en la comunicación con los servicios y
transporte de datos es importante debido a que en un dispositivo móvil la conexión puede ser
limitada o inestable, por eso en este sentido SOAP es poco conveniente implementar para
servicios web que consumirá una aplicación móvil, ya que supone una complejidad mayor por los
estándares que implementa. Un servicio web basado en REST por su parte no supone de capas
adicionales e implementaciones adicionales. tanto XML como JSON se pueden implementar en
un servicio basado en REST, pero es más conveniente implementar JSON como contenedor de
datos debido a su ligereza, fácil lectura y escritura, además de su compatibilidad con JavaScript
ya que es la notación de objetos de este lenguaje de programación.
Por las razones dadas anteriormente se opta realizar los servicios web que consumirá la
aplicación móvil en una arquitectura REST y no usando el protocolo SOAP.
34
Capítulo 4: Desarrollo
1. Desarrollo y programación de la aplicación
Una aplicación móvil es un software diseñado para ser ejecutado específicamente en dispositivos
móviles como teléfonos inteligentes, tabletas y relojes inteligentes. Estas aplicaciones se
desarrollan bajo diferentes especificaciones y lenguajes de programación dependiendo de la
plataforma o sistema operativo en la que se va a ejecutar. [16]
El campo de las aplicaciones para dispositivos móviles está en constante evolución y cambio,
surgiendo cada vez más nuevas plataformas móviles. Desarrollar una aplicación móvil se ha
convertido en una dificultad, necesitando desarrollar la misma aplicación para distintas
plataformas cada una utilizando el lenguaje y las herramientas de cada plataforma, invirtiendo en
gran cantidad de tiempo, recursos y capacitación para el desarrollo en cada plataforma. [17]
Con la evolución del ecosistema móvil también han evolucionado las tecnologías y herramientas
para el desarrollo de aplicaciones móviles, dividiéndose en dos tipos de aplicaciones;
Aplicaciones nativas y aplicaciones multiplataforma.
Las aplicaciones nativas como se describió anteriormente son las desarrolladas y distribuidas para
una plataforma en específico (Android, iOS, Windows Phone, etc.), utilizando estándares,
protocolos, lenguaje de programación y kit de desarrollo propios de cada plataforma. [18][19]
A continuación, se presenta un cuadro exponiendo las ventajas y desventajas de una aplicación
nativa.
35
Ventajas Desventajas
Buena experiencia de usuario. Diferentes conocimientos, habilidades y herramientas de
desarrollo para cada plataforma.
Acceso a todas las características
del dispositivo.
Costo monetario alto.
Mejor rendimiento de ejecución
posible.
Código no reutilizable entre plataformas.
Envío de notificaciones al usuario.
Disponibilidad en la tienda de
aplicaciones.
Actualizaciones periódicas. Tabla 6: Ventajas y desventajas de las aplicaciones nativas.
Una aplicación multiplataforma es capaz de ejecutarse en múltiples plataformas y diferentes tipos
de dispositivos, partiendo desde un solo código fuente. Las aplicaciones multiplataforma se
pueden clasificar en dos tipos importantes: Aplicaciones web móviles, Aplicaciones híbrida. [20]
● Aplicaciones web móviles: Son aplicaciones desarrolladas con tecnologías web, que se
ejecutan desde un navegador de internet por lo cual no dependen de una plataforma
específica. Simulan la funcionalidad de aplicaciones nativas además de no necesitar
actualizaciones ya que se descargan desde internet lo cual empeora la experiencia de
usuario y rendimiento de la misma. A continuación, se presenta un cuadro exponiendo las
ventajas y desventajas de una aplicación web móvil. [8][11]
Ventajas Desventajas
Código reutilizable entre plataformas. Baja experiencia de usuario.
Desarrollo más sencillo y favorable. No se cuenta con acceso a todas las características del
dispositivo.
No requieren actualizaciones. No disponible en la tienda de aplicaciones.
No requiere aprobación para la
publicación.
Requiere conexión a internet.
Disponibilidad en la tienda de
aplicaciones.
36
Actualizaciones periódicas.
Tabla 7: Ventajas y desventajas de las aplicaciones web móviles.
● Aplicaciones híbridas: Estas tratan de combinar lo mejor de las aplicaciones nativas y
aplicaciones web, son desarrolladas con tecnologías web (HTML, CSS, JavaScript) con
acceso a las características del dispositivo. Se instalan en el dispositivo y se ejecuta por
medio de un contenedor web como un navegador. Además de distribuirse en las tiendas
de aplicaciones como las de tipo nativa que se desarrollan para una plataforma en
específico. A continuación, se presenta un cuadro exponiendo las ventajas y desventajas
de una aplicación híbrida. [16][19]
Ventajas Desventajas
Código reutilizable entre plataformas. Mediana experiencia de usuario.
Desarrollo más sencillo y favorable. Rendimiento medio de ejecución.
Acceso a la mayoría de características
del dispositivo.
Interfaz de usuario no relacionada con las guías de
estilo de las plataformas..
Envío de notificaciones al usuario.
Actualizaciones periódicas.
Instalación nativa.
Tabla 8: Ventajas y desventajas de las aplicaciones híbridas.
Partiendo de las distintas funcionalidades de la aplicación, se concluye que no se requiere un
acceso completo a todas las características del dispositivo, pero si a la instalación y distribución
de la aplicación en las plataformas iOS Y Android.
Por esto para el desarrollo de la aplicación se decidió que sea de tipo multiplataforma más
específicamente una aplicación híbrida, debido a su ágil desarrollo, así como la facilidad de
37
empaquetar para múltiples plataformas y acceder a la mayoría de características nativas del
dispositivo.
Las aplicaciones híbridas se basan en tecnologías web multiplataforma como HTML, CSS y
JavaScript. Existen distintos marcos de trabajos comúnmente conocidos como frameworks para
el desarrollo de aplicaciones híbridas que están basados en diferentes conceptos, prácticas y
patrones de diseño. [20]
En el proceso de desarrollo de una aplicación híbrida, basada en tecnologías web existen
diferentes frameworks que implementan diferentes tipos de filosofías de desarrollo y estructuras
para la creación de una aplicación.
Entre los muchos frameworks existentes, tres de estos cuentan con las comunidades más grandes
de desarrolladores, aportando experiencias, conocimientos y desarrollo para crecimiento del
mismo framework. Estos tres frameworks son: Ionic, Phonegap y Apache Cordova.
Phonegap y Apache Cordova son frameworks open source que se basa en tecnologías web
(HTML, CSS, JavaScript) para el desarrollo de aplicaciones híbridas. Estos frameworks permite
implementar otros frameworks JavaScript o CSS para el desarrollo de las aplicaciones. Su
arquitectura se basa en plugins, los cuales son los que proveen la posibilidad de acceder a las
características nativas del dispositivo, este a su vez se encarga de empaquetar la aplicación para
múltiples plataformas. [21]
Ambos provienen del proyecto original llamado Phonegap que fue cedido a la fundación Apache,
pero a su vez comprado por Adobe para evitar inconvenientes legales la fundación Apache
renombra el proyecto como Cordova. La única diferencia es que Adobe ofrece otros servicios de
pago para implementar en los proyectos Phonegap / Cordova. [22]
38
Ionic es un framework open source basado en el lenguaje de programación JavaScript ofrece
librerías y componentes web orientados a plataformas móviles, que su vez se encuentra
optimizado con AngularJS otro framework JavaScript para definir la estructura y organización
del código de la aplicación, el cual también ofrece componentes listos para utilizar. Ionic es
también un framework basado en Apache Cordova lo cual permite usar los plugins característicos
de este para acceder a los recursos del dispositivo [23]
Para el desarrollo de la aplicación de Juancho Correlón se eligió el framework Ionic frente a
Phonegap o Apache Cordova, debido a las utilidades o librerías que este ofrece como
componentes CSS y de JavaScript listos para utilizar, optimizados con AngularJS para dar
apariencia y funcionalidad de una aplicación nativa conservando los estilos de diseños de
interfaces para cada plataforma. Así como su amplia comunidad de desarrolladores y usuarios
que comparten todo tipo de conocimientos sobre este framework.
A diferencia de Phonegap que se encarga del empaquetado de la aplicación dejando a potestad
del desarrollador la elección de las librerías o frameworks que desee implementar en el proyecto.
Esto puede ser una desventaja si se tiene en cuenta la mayoría de frameworks existentes que no
están optimizados para trabajar conjuntamente creando un código fuente poco sostenible.
La codificación de la aplicación se basa en una serie de tecnologías y lenguajes de programación,
siguiendo los conceptos y patrones especificados por cada framework implementado en el
desarrollo además de las funcionalidades y características que estos proveen.
39
2. Lenguajes de programación y APIs utilizadas
La aplicación al ser de tipo híbrida se basa en tecnologías estándares web para su desarrollo y
codificación. Las tres tecnologías web que conforman el núcleo para el desarrollo de la aplicación
son HTML, CSS y Javascript.
HTML, HyperText Markup Language (lenguaje de marcas de hipertexto) por sus siglas en
inglés, es el encargado de proveer la estructura del contenido de las vistas de la aplicación,
complementandose con la tecnología CSS, cascading style sheets (Hoja de estilo en cascada) por
sus siglas en inglés, que se encarga de describir la presentación de la estructura HTML de la vista
como diseño, colores y fuentes entre otros. [24]
El otro pilar fundamental de las tecnologías usadas en la aplicación es JavaScript que se define
como un lenguaje de programación interpretado por un navegador web. Este lenguaje basa su
funcionamiento en scripts que contienen una serie de instrucciones que el navegador interpreta y
ejecuta cuando la vista esté cargada o dependiendo de un evento generado por el usuario. Su
función principal es la de dotar la interactividad a la vista de la aplicación. [25]
La aplicación mantiene un intercambio de información constante con el servidor. Para el
intercambio de datos se emplea el formato de texto ligero JSON el cual es la notación de objetos
de JavaScript, en comparación de otros formatos de intercambio de datos JSON es fácil de leer y
escribir. [26]
Dentro del marco de desarrollo de una aplicación móvil híbrida existen ciertas API, que proveen
un conjunto de funciones y procedimientos ya establecidos para facilitar la implementación de
características y funcionalidades que definen a una aplicación móvil.
40
En el desarrollo de la aplicación de Juancho Correlón, se implementaron tres APIs: Ionic,
Cordova, AngularJS.
Ionic: Este framework ofrece una serie de librerías y componentes que son utilizados en el
desarrollo para dar apariencia, características y comportamientos de una aplicación móvil.
AngularJS: Además de definir la arquitectura, patrones y organización de archivos y scripts del
proyecto de la aplicación, también ofrece funcionales adicionales que permiten mejorar las
características de la tecnología HTML dándole el dinamismo del que carece, el cual es necesario
para una aplicación que interactúa con el usuario. [27]
Apache Cordova: Se basa en una arquitectura de plugins que son paquetes de códigos los cuales
permiten acceder a las funcionalidades de la plataforma y dispositivo en el que se aloja la
aplicación. [28]
Bower: Es un gestor de paquetes que ayudará a instalar todas las dependencias y componentes
que requiera el proyecto, así como agregar nuevas. [29]
Gulp: Es un sistema de automatización de tareas. Basa su arquitectura en módulos o plugins que
pueden ser utilizados para programar y ejecutar tareas que consuman tiempo de desarrollo. [30]
Estas dos últimas fueron escogidas de un abanico de posibilidades siguiendo el criterio de
compatibilidad con proyectos basados en Apache Cordova. Todas estas APIs son proyectos open
source activos y sostenidos por grandes organizaciones además de una gran comunidad de
desarrolladores que los respalda.
41
3. Requisitos de instalación
Para el desarrollo de la aplicación es indispensable contar con un ambiente conformado por las
herramientas necesarias tanto de software como de hardware que faciliten las tareas de
codificación, pruebas y compilación de la aplicación.
En el ámbito de desarrollo se recomienda contar con un equipo con prestaciones o recursos no
limitados. Aunque las herramientas utilizadas para la realización de proyectos web no sean
consideradas muy exigentes en cuanto a recursos físicos se refiere, hay tareas de las que es
necesario disponer de un equipo con buena capacidad de procesamiento y memoria, como son los
procesos de pruebas de la aplicación en un dispositivo virtual si no se cuenta con uno físico,
como también la compilación o empaquetado de la aplicación.
Desarrollar una aplicación híbrida permite escoger el sistema operativo que se prefiera ya sea
Windows, Linux o Mac OS X. Sin embargo, es necesario disponer de una máquina con el sistema
operativo Mac OS X si se desea implementar aplicaciones para dispositivos que ejecuten iOS
como sistema operativo. El framework usado para el desarrollo soporta dispositivos iOS
superiores a la versión 7, en cuanto a dispositivos Android soporta versiones superiores a la 4.1
(Jelly Bean).
Las APIs mencionadas en el apartado anterior utilizan un flujo de trabajo multiplataforma que se
distribuyen como paquetes, no necesitando compilarse, esto usando un entorno de ejecución
como lo es NodeJS, permitiendo así usar la herramienta de línea de comandos de Ionic y
Cordova. Si se desea desarrollar e implementar una aplicación para el sistema operativo Android
es necesario instalar el entorno de ejecución de Java en su versión para desarrolladores JDK (Java
42
Development Kit) y el kit de desarrollo para programar en Android (Android SDK) así como los
Drivers del dispositivo.
Usando el gestor de paquetes de NodeJS podemos instalar las APIs requeridas para el proyecto.
Toda la información será profundizada en el manual técnico de la aplicación.
4. Pruebas y resultados de Software
Las pruebas de usabilidad son una forma muy sencilla de estimar la facilidad con la que una
persona puede usar una aplicación. Un test de usabilidad es el proceso que permite aprender de
los usuarios como de usable es una aplicación observando o monitorizando sus reacciones
mientras la utilizan, llevando un control de los problemas de uso con los que se encuentran para
poder solucionarlos posteriormente. Este test se realiza seleccionando a un grupo de usuarios, que
pueden ser usuarios habituales de dicha aplicación, y se les solicita que lleven a cabo unas tareas
específicas dentro de la aplicación y posteriormente completen un pequeño cuestionario; mientras
que el equipo de diseño y desarrollo toman nota de la interacción, particularmente en lo que
respecta a los errores y dificultades con las que se encuentren los usuarios.
Las características de las pruebas de usabilidad son que los participantes son una representación
de los usuarios reales y realizan tareas reales dentro de la aplicación; el objetivo del test es
mejorar la usabilidad de la aplicación. Se observa y se registra todo lo que los participantes hacen
y por último se analizan los datos para así diagnosticar problemas reales. [31]
En base a lo anterior, las pruebas de usabilidad desarrolladas son aplicadas a una muestra
pequeña de la población puesto que el desarrollo de este proyecto no cuenta con los recursos
43
reales de la Organización Juancho Correlón. Para realizar pruebas sobre la muestra de la
población total que encierra la organización, se necesitaria la implementacion e integracion
completa ademas de un tiempo extenso e inversion.
Para esto se seleccionaron 50 personas aleatoriamente, a las cuales primero se les dio una
introducción al proyecto. Posteriormente se les entregan unas tareas específicas con el objetivo de
probar las funciones principales desde el aspecto del diseño de interacción. Al finalizar esta fase
se procedió a realizar una encuesta con preguntas sobre la interfaz, la navegación, el contenido y
la utilidad de la aplicación en la cual debían calificar su experiencia. Estas pruebas se realizaron
con el prototipo digital realizado inicialmente.
A continuación se presentan los resultados y el análisis obtenido en las encuestas.
Figura 8: Respuesta pregunta 1 ¿Es fácil de aprender cómo funciona la aplicación?
Figura 9: Respuesta pregunta 2 ¿Los iconos del menú principal son de fácil interacción?
44
Figura 10: Respuesta pregunta 3 ¿Considera que el desarrollo de la aplicación ayuda los sistemas de
información y comunicación de la organización?
Figura 11: Respuesta pregunta 4 ¿Considera que la información que se presenta dentro de la aplicación es
completa?
Figura 12: Respuesta pregunta 5 ¿Todos los botones e iconos realizan su función satisfactoriamente?
45
Figura 13: Respuesta pregunta 6 ¿Cumple la aplicación con sus expectativas?
Es importante conocer la opinión de los usuarios encuestados respecto a la interacción con la
aplicación. Por esto se les preguntó sobre la experiencia que tuvieron al realizar las tareas
solicitadas al inicio de la prueba, lo cual nos arrojó como resultado que el 70% de los usuarios
considera que es fácil aprender su funcionamiento y solo un 6% tuvo inconvenientes con esto.
También se preguntó sobre el diseño y el funcionamiento del menú principal ya que es una parte
fundamental del aplicativo, el resultado a esto fue muy bueno, el 90% de los usuarios considera
que el menú principal es de fácil entendimiento y la interacción es muy eficiente.
Por otra parte, se preguntó por el contenido y el impacto que produce el aplicativo en los sistemas
de comunicación e información entre la organización y sus usuarios, solo un 2% de los
encuestados considera que falta contenido en la aplicación, mientras que el 98% restante
considera que esta completo; respecto a los sistemas de comunicación el 80% considera que la
aplicación si ayuda a tener un acercamiento informativo con los eventos de la organización.
Antes de iniciar las pruebas se les dio una introducción del proyecto, con el fin de crear
expectativas frente al desarrollo de la aplicación, es por esto que la última pregunta del
cuestionario fue si se cumplian dichas expectativas referentes a la aplicación, el resultado fue
muy alentador, ya que, el 90% de los encuestados dijo que si.
46
El resultado de este test es muy importante para el desarrollo de la aplicación, ya que, se hace la
validacion de 3 atributos de calidad en los estándares HCI, los cuales son: la efectividad, la
eficiencia y por último la satisfacción explicadas en el capítulo Diseño Gráfico e Interfaces.
Por medio de estas pruebas y su respectivo analisis, fue posible concluir que el proyecto cumplia
con lo requerido. Las principales dificultades por parte de los usuarios al utilizar la aplicación se
dieron para aquellas personas que no están muy familiarizadas con el uso de este tipo de
herramientas. Por último, los comentarios fueron muy positivos, y se realizaron recomendaciones
a futuro.
47
Capítulo 5: Conclusiones y líneas de futuro
1. Conclusiones
1. En el proceso de este proyecto encontramos que, el desarrollo con aplicaciones híbridas
facilita el desarrollo para varias plataformas como Android e IOS, y que, al realizar un
único código permite ahorrar tiempo e inversión de desarrollo para las dos plataformas.
2. El desarrollo de esta aplicación con el framework Ionic, evidencia lo ágil y conveniente
que es realizar una aplicación móvil híbrida. Gracias a su sencillo proceso de desarrollo.
3. Mediante el desarrollo y análisis de las pruebas de usabilidad, podemos concluir que la
aplicación cumple con los estándares HCI, ya que los usuarios a pesar tener tropiezos por
no tener un conocimiento completo en el manejo de aplicación móviles, completaron
todas sus tareas sin ningún inconveniente y la interacción con esta resulta muy sencilla.
Teniendo buenas impresiones de los usuarios participantes en la prueba.
4. Con el desarrollo del diseño detallado de software, aprendimos que con un buen proceso
de diseño, como es la creación de los diagramas de diseño de software se puede promover
mayor calidad al desarrollo.
5. Con la implementación del Panel Administrativo facilita la experiencia de administrar la
información contenida dentro del aplicativo móvil.
6. Con la implementación de esta nueva tecnología se crea un vínculo mayor por parte de La
organización Juancho Correlón con todos sus usuarios, ya que, se tiene una
comunicación más directa entre las dos partes. Uno de los beneficios que sobresalen, es
48
que, los usuarios que participan en sus carreras pueden acceder a los recursos que les
brinda la organización a través de la aplicación, y conocer resultados, estadísticas y demás
datos concernientes a su desempeño.
7. El hecho de abrir un canal nuevo de comunicación, con la opción de notificaciones al
usuario acerca de nuevos eventos y demás, y así, facilitar el acceso rápido y desde
cualquier lugar a estos datos, haciendo que el usuario tenga una mejor experiencia con la
organización y un mayor manejo de sus actividades en la misma
2. Trabajo a futuro
Como trabajo a futuro se espera poder implementar nuevas funcionalidades, como:
1. Visualizar la ubicación exacta en un mapa del usuario dentro de una carrera utilizando el
chip que es proporcionado al corredor antes de iniciar la carrera.
2. Brindar la opción de pago en línea de la inscripción a la carrera, incorporando diferentes
herramientas para este fin.
3. Los usuarios podrán interactuar entre ellos, es decir que se podrán seguir entre sí y ver los
resultados de otros.
4. Se implementara el chat dentro de la aplicación.
Se espera que con el tiempo se pueda satisfacer nuevas necesidades o agregar nuevas ideas que se
presenten dentro de la Organización Juancho Correlón.
49
Referencias
[1] R.E. y. Negocios, << ¿por qué crece tanto el uso de teléfonos celulares?, >> El espectador, 12 Enero 2016.
[2] G.Fink y I.Flatow, Pro Single Page Application Development Using Backbone.js and ASP.NET, New York:
Apress Media, LLC, 2014, pp.3-5.
[3] Financiero, E. (2016, September 21). Emprendedores crean aplicación que permite inscribirse en carreras de
atletismo. Retrieved September 27, 2016.
[4] Oswaldo, William (2014, Junio). Estándares de usabilidad para el desarrollo de aplicaciones móviles. Avalable:
http://revistas.udistrital.edu.co/ojs/index.php/revcie/article/viewFile/8453/9975
[5] Apple Inc. (2016). App Icon. Available: https://developer.apple.com/ios/human-interface-
guidelines/graphics/app-icon/
[6] Organización Juancho Correlón (2016). ¿Quienes Somos?. Available: http://www.juanchocorrelon.com
[7] Tzec, O. S., & Siegel, M. (2015). Principios de diseño visual para HCI. Avalaible: http://tzec.com/files/capitulo-
diseno-visual-para-ux.pdf
[8] Google (2015). Tipografia Android Material Desing. Available:
https://material.google.com/style/typography.html
[9] Apple Inc (2016). Tipografía Apple. Available: https://developer.apple.com/ios/human-interface-
guidelines/visual-design/typography/
[10] González, Ander (2014). ¿Qué es un ORM?. Avalaible: http://www.tuprogramacion.com/glosario/que-es-un-
orm/
[11] WordPress (2012, Septiembre 23). El Patrón MVC (Modelo Vista Controlador). Avalaible:
https://arlethparedes.wordpress.com/2012/09/23/el-patron-mvc-modelo-vista-controlador/
50
[12] Microsoft Corporation (2006, Diciembre). La Arquitectura Orientada a Servicios (SOA) de Microsoft aplicada
al mundo real. Avalaible: http://download.microsoft.com/download/c/2/c/c2ce8a3a-b4df-4a12-ba18-
7e050aef3364/070717-Real_World_SOA.pdf
[13] Clark, Kim (2015, Marzo 18). Integration architecture: Comparing web APIs with service-oriented architecture
and enterprise application integration. Avalaible:
http://www.ibm.com/developerworks/websphere/library/techarticles/1503_clark/1305_clark.html
[14] Navarro, Rafael (2006). Modelado, Diseño e Implementación de Servicios Web. Avalaible:
http://users.dsic.upv.es/~rnavarro/NewWeb/docs/RestVsWebServices.pdf
[15] QODE (2013, Noviembre 28). Web Services – REST vs SOAP. Avalaible: http://qode.pro/blog/web-services-
rest-vs-soap/
[16] Delía, Lisandro y Galdamez, Nicolás (2014). Análisis Experimental de desarrollo de Aplicaciones Móviles
Multiplataforma. Available:
http://sedici.unlp.edu.ar/bitstream/handle/10915/42355/Documento_completo.pdf?sequence=1
[17] Xanthopoulos, Spyros (2013, Septiembre). A Comparative Analysis of Cross-platform Development
Approaches for Mobile Applications. Available:
https://www.researchgate.net/publication/258010031_A_Comparative_Analysis_of_Cross-
platform_Development_Approaches_for_Mobile_Applications
[18] Optimus Information (2016, Marzo 15). Advantages of Native Mobile App Development. Available:
http://www.optimusinfo.com/advantages-of-native-mobile-app-development-part-1/
[19] LanceTalent (2014, Febrero 20). Los 3 Tipos De Aplicaciones Móviles: Ventajas E Inconvenientes. Available:
https://www.lancetalent.com/blog/tipos-de-aplicaciones-moviles-ventajas-inconvenientes/
[20] Gutierrez, Javier (2014).¿Qué es un framework web?. Available:
http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf
51
[21] Apache Cordova (2012). Documentación Cordova. Available:
http://cordova.apache.org/docs/en/latest/guide/overview/index.html
[22] Alarcón, José (2014, Septiembre 11). PhoneGap o Apache Cordova ¿qué diferencia hay?. Available:
http://www.campusmvp.es/recursos/post/PhoneGap-o-Apache-Cordova-que-diferencia-hay.aspx
[23] Ionic Framework (2013). Available: http://ionicframework.com/
[24] W3C (2016). WEB DESIGN AND APPLICATIONS: HTML & CSS. Available:
https://www.w3.org/standards/webdesign/htmlcss
[25] W3C (2016). WEB DESIGN AND APPLICATIONS: JAVASCRIPT WEB APIS. Available:
https://www.w3.org/standards/webdesign/script
[26] The JSON Data Interchange Standard. Available: http://www.json.org/
[27] Google (2010). Documentación AngularJS. Available: https://angularjs.org/
[28] Apache Cordova (2012). Guía de desarrollo de plugin. Available:
https://cordova.apache.org/docs/es/latest/guide/hybrid/plugins/#construyendo-un-plugin
[29] Bower (2015). Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower
manages all these things for you. Available: https://bower.io/
[30] Bublitz, Blaine (2016). Gulp The streaming build system. Available: https://www.npmjs.com/package/gulp
[31] Cuadrat, Cira (2012, Junio). Estudio sobre Evaluacio n de la Usabilidad Mo vil y Propuesta de un Metodo para
Tests de Usabilidad Cuantitativos. Available:
http://repositori.udl.cat/bitstream/handle/10459.1/45992/ccuadrats_Parte1.pdf?sequence=1
52
Anexos
Anexo 1: Presupuesto
Anexo 2: Tabla de Winger
Anexo 3: Mapa de Navegación de la Aplicación de Juancho Correlón
Anexo 4: Especificaciones de requerimientos del software (SRS)
Anexo 5: Diseño detallado de software
Anexo 6: Código fuente del proyecto
Anexo 7: Manual de desarrollo del software
Anexo 8: Manual de usuario
Anexo 9: Pruebas de Usuario
53
Presupuesto
Juancho Correlon USB Tiempo Descripcion Precio
Valor Valor 1 Hora 5.000
Celular IOS - Iphone 5s 1 $1.502.900 $1.502.900 5 Dias x semana 200.000
Celular Andorid - Motorola G2 1 $549.900 $549.900 4 Semanas x Mes 800.000
iOS 8 & Swift Certification 1 USD $89.00 USD $89.00 6 Meses x Practicas 4.800.000
Material design Android
Android 5 Certification
Suscripcion Play Store 1 Año USD $25.00 USD $25.00 Tiempo Descripcion Precio
Suscripcion App Store 1 Año USD $99.00 USD $99.00 1 Hora 40.000
Equipos iMAC 2013 4 $3.999.000 $15.996.000 8 Horas x Dia 320.000
Desarrolladores 5 Dias x semana 1.600.000
Diseñadores 4 Semanas x Mes 1.600.000
Asesor 1 Hora x 2 asesores $40.000 $40.000 6 Meses x Practicas 4.800.000
Horas DesarrolladoresPresupuesto
Cantidad
Horas Asesores
Producto
1 Hora x 4 practicantes $19.200.000
Valor Unitario
$5.000
54
55
Diagrama casos de uso
DiseñodetalladodeSoftwareDiagramaCasosdeUso
:
56
Cronograma:
57
Pruebas de Usuario Aplicación Juancho Correlón.
Edad: ______ Nombre: __________________________________
TAREAS:
Realice las siguientes tareas en la aplicación.
1. Abrir la aplicación. 2. Registrarse con una cuenta nueva. 3. Iniciar sesión en la aplicación. 4. Visitar su perfil. 5. Ver las carreras en las que está inscrito. 6. Ver los resultados de la última carrera en la que participó. 7. Ver el ranking de resultados. 8. Ver su galería fotográfica. 9. Ingresar a la sección de carreras. 10. Consultar la información de una carrera. 11. Inscribirse a una carrera.
CUESTIONARIO:
Una ves completadas las tarea, por favor responda este cuestionario.
1. ¿Es fácil de aprender cómo funciona la aplicación? Si__ Mas o Menos__ No__
2. ¿Los iconos del menú principal son de fácil interacción? Si__ Mas o Menos__ No__
3. ¿Considera que el desarrollo de la aplicación ayuda los sistemas de información y comunicación de la organización? Si__ Mas o Menos__ No__
4. ¿Considera que la información que se presenta dentro de la aplicación es completa?
58
Si__ Mas o Menos__ No__
5. ¿Todos los botones e iconos realizan su función satisfactoriamente? Si__ Mas o Menos__ No__
6. ¿Cumple la aplicación con sus expectativas? Si__ Mas o Menos__ No__ RESULTADOS:
Pregunta 1
Si 35
Mas o menos 12
No 3
Total 50
Pregunta No % Mas o menos % Si % Total Total %
1 3 6 12 24 35 70 50 100
2 2 4 3 6 45 90 50 100
3 0 - 10 20 40 80 50 100
4 1 2 0 0 49 98 50 100
5 10 20 1 2 39 78 50 100
6 0 - 5 10 45 90 50 100
70%
24%
6%
Si Mas o menos No
59
Pregunta 2
SI 45
Mas o menos 3
No 2
Total 50
Pregunta 3
SI 40
Mas o menos 10
No 0
Total 50
90%
6% 4%
SI Mas o menos No
80%
20%
0%
SI Mas o menos No
60
Pregunta 4
Si 49
Mas o menos 0
No 1
Total 50
Pregunta 5
SI 39
Mas o menos 1
No 10
Total 50
98%
0%2%
Si Mas o menos No
78%
2%20%
SI Mas o menos No
61
Pregunta 6
SI 45
Mas o menos 5
No 0
Total 50
90%
10% 0%
SI Mas o menos No
