Docencia: Desarrollo Tecnológico

PÁGINA 1
DOCENCIA DE 55
INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE

R-DC-95 PROYECTO DE INVESTIGACIÓN, DESARROLLO TECNOLÓGICO Y VERSIÓN: 01
PRÁCTICA
Desarrollo de prototipo de aplicación Android y micro sitio web para la comunidad de

graduados de las Unidades Tecnológicas de Santander.
Desarrollo Tecnológico
Rodrigo Andrés Vergara Mendoza

1098744839
Luis Ernesto Orejarena Sierra

1098794955
UNIDADES TECNOLÓGICAS DE SANTANDER

FACULTAD CIENCIAS NATURALES E INGENIERÍAS
INGENIERA DE SISTEMAS
BUCARAMANGA – SANTANDER
FECHA DE PRESENTACIÓN: 22 JULIO 2021
ELABORADO POR: REVISADO POR: APROBADO POR : Asesor de planeación

Oficina de Investigaciones soporte al sistema integrado de gestión FECHA APROBACION:
PÁGINA 1
DOCENCIA DE 55
INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE

R-DC-95 PROYECTO DE INVESTIGACIÓN, DESARROLLO TECNOLÓGICO Y VERSIÓN: 01
PRÁCTICA
Desarrollo de prototipo de aplicación Android y micro sitio web para la comunidad de

graduados de las Unidades Tecnológicas de Santander.
Desarrollo Tecnológico

1098744839

1098794955
Trabajo de Grado para optar al título de

Ingeniero de sistemas
DIRECTOR
Víctor Andrés Ochoa Correa
GRUPO DE INVESTIGACIÓN DE INGENIERIA DEL SOFTWARE – GRIS
UNIDADES TECNOLÓGICAS DE SANTANDER

FACULTAD CIENCIAS NATURALES E INGENIERÍAS
INGENIERA DE SISTEMAS
BUCARAMANGA – SANTANDER
FECHA DE PRESENTACIÓN: 22 JULIO 2021
ELABORADO POR: REVISADO POR: APROBADO POR : Asesor de planeación

Oficina de Investigaciones soporte al sistema integrado de gestión FECHA APROBACION:
PÁGINA 2
DOCENCIA DE 55
INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

F-DC-125 DE INVESTIGACIÓN, DESARROLLO TECNOLÓGICO, MONOGRAFÍA, VERSIÓN: 1.0
EMPRENDIMIENTO Y SEMINARIO
Nota de Aceptación
El proyecto “Prototipo de aplicación Android y

micro sitio web para la comunidad de
graduados de las Unidades Tecnológicas de
Santander” realizado por los estudiantes
Rodrigo Andrés Vergara Mendoza y Luis
Ernesto Orejarena Sierra, fue Aprobado.
Firma del Evaluador
Firma del Director
ELABORADO POR: Oficina de Investigaciones REVISADO POR: Soporte al Sistema Integrado de Gestión UTS APROBADO POR: Jefe Oficina de Planeación
FECHA APROBACION: Noviembre de 2019
PÁGINA 3
DOCENCIA DE 55

DEDICATORIA
Esta dedicatoria va dirigida a mi familia primero que todo, gracias al apoyo que me
brindaron en este ciclo, a Dios por ser quien guía mi vida. Gracias a ellos he podido
formarme como persona íntegra y responsable, también, les agradezco a mis
maestros por su entrega y constancia que me brindaron, aportando un granito de
arena a mis conocimientos. Finalmente, a las UNIDADES TECNOLOGICAS por
brindarme un espacio donde pude conocer y aprender no solo a ser un ingeniero
sino una persona.
A mis padres va dirigida especialmente esta dedicatoria, gracias a ellos que me

apoyaron y motivaron en ese camino. Gracias a Dios por que sin él nada de esto
hubiese sido posible, a mis profesores que durante toda la carrera estuvieron
conmigo, brindándonos unos a otros, apoyo para así poder llegar a cumplir nuestra
meta. A mis maestros de carrera gracias por sus enseñanzas y ayuda, también es
esencial su aporte a mi carrera y mi vida profesional, haciendo diferencia como un
estudiante uteista y como persona.
PÁGINA 4
DOCENCIA DE 55

AGRADECIMIENTOS
Es muy importante expresar nuestros más sinceros y especiales agradecimientos a

los profesores y administrativos de la institución, por la disposición y la comprensión
que nos brindaron en todo momento, para poder adquirir el mayor conocimiento y
no desistir en nuestro proceso de formación y aprendizaje a lo largo de la carrera
no solo como ingenieros sino como personas.
Damos un especial reconocimiento a nuestro director de proyecto Víctor Andrés

Ochoa Correa por su interés y disposición que siempre manifestó por nuestro
proyecto en cada una de las asesorías recibidas.
Finalmente agradecerles a nuestros padres por su apoyo incondicional, quienes

siempre nos brindaron motivación para continuar y seguir adelante y a Dios por
permitirnos culminar este ciclo de nuestras vidas y por proporcionarnos lo necesario
para que este proceso culminara satisfactoriamente.
PÁGINA 5
DOCENCIA DE 55

TABLA DE CONTENIDO
RESUMEN EJECUTIVO .................................................................................................. 10
INTRODUCCIÓN ............................................................................................................. 11
1. DESCRIPCIÓN DEL TRABAJO DE INVESTIGACIÓN......................................... 12
1.1. PLANTEAMIENTO DEL PROBLEMA .................................................................. 12

1.2. JUSTIFICACIÓN ................................................................................................... 13
1.3. OBJETIVOS ......................................................................................................... 13
1.3.1. OBJETIVO GENERAL ....................................................................................... 13
1.3.2. OBJETIVOS ESPECÍFICOS .............................................................................. 13
1.4. ESTADO DEL ARTE ............................................................................................. 14
1.4.1 INTERNACIONAL .................................................................................................. 14
1.4.2 NACIONAL ............................................................................................................. 14
2. MARCO REFERENCIAL ...................................................................................... 16
2.1 MARCO TEORICO .................................................................................................... 16
2.2 MARCO CONCEPTUAL............................................................................................ 16
2.2.1 APLICACIONES MÓVILES PARA APOYO INSTITUCIONAL ............................... 16
2.2.2 TECNOLOGIA MOVIL: ........................................................................................... 17
2.2.3 SISTEMAS OPERATIVOS MOVILES..................................................................... 17
2.2.4 APLICACIÓN MÓVIL ............................................................................................. 17
2.2.5 ANDROID ............................................................................................................... 17
2.2.5 MICRO-SITIO WEB ................................................................................................ 18
2.2.6 LIBRERIA ............................................................................................................... 18
PÁGINA 6
DOCENCIA DE 55

2.2.7 FIREBASE.............................................................................................................. 18
2.3 MARCO AMBIENTAL ............................................................................................... 18
3. DESARROLLO DEL TRABAJO DE GRADO ....................................................... 19
3.1 ANÁLISIS DE REQUERIMIENTOS ........................................................................... 19
3.1.1 ANÁLISIS DE REQUERIMIENTOS ........................................................................ 19
3.2 ESPECIFICACIÓN .................................................................................................... 20
3.3 DISEÑO Y ARQUITECTURA .................................................................................... 21
3.3.1 ARQUITECTURA ................................................................................................... 21
3.3.1.1 DESCRIPCIÓN DE CASOS DE USO .................................................................. 26
3.4 PROGRAMACIÓN..................................................................................................... 37
3.4.1 ESTRUCTURA DE DESARROLLO ........................................................................ 37
3.4.1.1 “ACTIVITYS”..................................................................................................................... 38
3.4.1.2 “VISTAS WEB” ................................................................................................................. 42
3.4.2 COLORES Y TEXTOS ............................................................................................ 45
3.4.2.1 COLORES ........................................................................................................... 45
3.4.2.1 TEXTO:................................................................................................................ 46
3.4.3 LIBRERÍAS UTILIZADAS ...................................................................................... 46
3.4.4 SERVIDOR Y SERVICIOS EXTERNOS ................................................................. 47
3.5 PRUEBAS ................................................................................................................. 48
PÁGINA 7
DOCENCIA DE 55

4. RESULTADOS ..................................................................................................... 49
5. CONCLUSIONES ................................................................................................. 50
6. RECOMENDACIONES ......................................................................................... 51
7. REFENCIAS BIBLIOGRAFICAS .......................................................................... 52
8. ANEXOS ............................................................................................................... 54
PÁGINA 8
DOCENCIA DE 55

LISTA DE FIGURAS
Ilustración 1 Mockups Aplicación .......................................................................... 22

Ilustración 2 Mockups Aplicación .......................................................................... 23
Ilustración 3 Diagrama de casos de uso - Usuario ................................................ 24
Ilustración 4 Diagrama de casos de uso - Administrador ...................................... 24
Ilustración 5 Diagrama Entidad Relación............................................................... 25
Ilustración 6 Diagrama de secuencia - Usuario ..................................................... 36
Ilustración 7 Diagrama de secuencia - Administrador ........................................... 36
Ilustración 8 Estructura app ................................................................................... 37
Ilustración 9 Estructura web .................................................................................. 37
Ilustración 10 Interfaz noticias ............................................................................... 38
Ilustración 11 Interfaz principal .............................................................................. 38
Ilustración 12 Interfaz Ofertas de empleo .............................................................. 39
Ilustración 13 Interfaz eventos............................................................................... 39
Ilustración 14 Interfaz Registrar HDV .................................................................... 40
Ilustración 15 Interfaz Huella Uteista ..................................................................... 40
Ilustración 16 Interfaz Webinars/Capacitaciones ................................................... 41
Ilustración 17 Vista principal - Web ....................................................................... 42
Ilustración 18 Vista principal noticias - Web .......................................................... 42
Ilustración 19 Vista formulario noticias - Web........................................................ 42
Ilustración 20 Vista principal eventos - Web .......................................................... 43
Ilustración 21 Vista formulario eventos - Web ....................................................... 43
Ilustración 22 Vista principal webinar/capacitaciones - Web ................................. 43
Ilustración 23 Vista formulario webinar/capacitaciones - Web............................... 44
Ilustración 24 Vista principal Huella Uteista........................................................... 44
Ilustración 25 Vista formulario Huella Uteista ........................................................ 44
Ilustración 26 Servidor ........................................................................................... 47
Ilustración 27 Notificación push ............................................................................. 47
PÁGINA 9
DOCENCIA DE 55

LISTA DE TABLAS
Tabla 1 Caso de uso Consultar Noticias – Usuario ............................................... 26

Tabla 2 Caso de uso Consultar Evento – Usuario................................................. 27
Tabla 3 Caso de uso Consultar Ofertas laborales - Usuario ................................. 28
Tabla 4 Caso de uso Registrar Hoja de vida - Usuario ......................................... 29
Tabla 5 Caso de uso Visualizar la Huella Uteista - Usuario .................................. 30
Tabla 6 Caso de uso Consultar los Webinars y Capacitaciones - Usuario ............ 31
Tabla 7 Caso de uso Registrar Noticias - Administrador ....................................... 32
Tabla 8 Caso de uso Registrar Eventos – Administrador ...................................... 33
Tabla 9 Caso de uso Registrar Huella Uteista – Administrador............................. 34
Tabla 10 Caso de uso Registrar Webinars y Capacitaciones – Administrador...... 35
Tabla 11 Colores utilizados app móvil ................................................................... 45
Tabla 12 Colores utilizados micro sitio web........................................................... 45
Tabla 13 Dispositivos móviles pruebas ................................................................. 48
PÁGINA 10
DOCENCIA DE 55

RESUMEN EJECUTIVO
Con el pasar del tiempo y el surgimiento de nuevos avances tecnológicos que en la

actualidad generan un gran impacto, las aplicaciones móviles juegan un papel
fundamental ya que brindan un apoyo clave en la innovación de procesos en
diferentes ámbitos ya sean sociales, económicos y productivos, por esto se ha
vuelto casi una necesidad estar a la vanguardia de las nuevas tecnologías. Entre
las características más importantes se encuentra su amplia difusión en cuanto a
contenidos y la interacción generada entre el usuario y el medio, ofreciendo una
experiencia más interactiva a la hora de transferir la información que allí está
plasmada. Por ello, se formula el desarrollo de un prototipo de una aplicación móvil
y un micro-sitio web para los egresados de las unidades tecnológicas de Santander,
que permita acceder a información a través de diferentes módulos, generando así
sentido de pertenencia hacia la institución y de la misma manera un espacio de
interacción con la comunidad.
Para el desarrollo del proyecto se usa la metodología del “modelo cascada” o

“modelo lineal” la cual nos permite llevar un proceso de desarrollo secuencial, las
cuales son llamadas etapas que son ejecutadas un tras de otra siguiendo el flujo de
ejecución de arriba hacia abajo como una cascada.
Los usuarios tendrán diferentes módulos en los cuales podrán acceder a

información de interés:
1. Se podrá acceder a la lista de eventos próximos a realizar.
2. Se podrán visualizar los egresados destacados.
3. Se podrá ingresar la hoja de vida, y postular a cargos a través de la bolsa de

empleo.
Finalmente se espera que los egresados puedan encontrar en esta aplicación

temas de interés a través de su celular, de manera sencilla y de fácil acceso, la
entrega final consistirá en la aplicación móvil, el micro-sitio web y documento final.
PALABRAS CLAVE: Egresados, Empleo, Herramienta, Eventos, Universidad
PÁGINA 11
DOCENCIA DE 55

INTRODUCCIÓN
La evolución tecnológica ha ido de la mano con la modernidad, sin embargo, a raíz
de la curiosidad y las ganas de poder mejorar el entorno y las condiciones de vida
es que se ha logrado un desarrollo tecnológico que parecía casi imposible en el siglo
XXI, el internet juega un papel fundamental debido a la mejora en su rapidez de
acceso y en número de usuarios que pueden acceder al mismo. Es por ello que con
estos grandes avances que han surgido con el tiempo, lo que se buscó fue adaptar
un modelo para el beneficio de la sociedad, y es lo que al día de hoy está
sucediendo, la innovación de nuevos tipos de dispositivos inteligentes eficientes en
su funcionamiento junto a las aplicaciones móviles se ha logrado ajustar en las
necesidades de diferentes sectores económicos volviéndolos casi dependientes de
estas mismas tecnologías. (Portafolio, 2017)
Las aplicaciones móviles como herramienta indispensable en el crecimiento de

sectores importantes como lo son la salud, social, entretenimiento y educación,
busca fortalecerse a través de la innovación en sus procesos, creando un canal de
comunicación entre las empresas y los clientes o usuarios de manera inmediata y
desde cualquier parte del mundo. En el sector educativo, las instituciones manejan
unas exigencias de alto nivel, ya no son simplemente sobre plataformas que
almacenan datos y de escritorio (Milenio, 2018) buscan interactividad y que vaya
acorde a las innovaciones. Estas son algunas aplicaciones institucionales
innovadoras que servirán como antecedente en la realización del proyecto:
 EnContacto Egresados: Su funcionalidad principal: ofertas laborales,

descuentos, eventos y noticias.
 AreandinaApp: Su funcionalidad principal: horarios de clase, calificaciones y

carné digital.
Según la información plasmada es importante aportar las UTS una aplicación

funcional que pueda servir de canal de comunicación y que brinde una ayuda real a
los estudiantes y egresados. Posteriormente con el desarrollo de esta aplicación se
genera un aporte importante y de esta manera se invita a estudiantes de la rama de
ingeniera de sistemas a desarrollar proyectos que beneficien la comunidad
educativa y que busquen mejorar la calidad y el bienestar de los mismos. Se utilizará
para el desarrollo de esta aplicación móvil para egresados de las Unidades
Tecnológicas de Santander el modelo lineal, que nos permitirá adaptar las fases
para lograr ejecutar técnicas en el análisis del problema tales como los diagramas
de casos de uso, el diseño de los prototipos, y la descomposición funcional.
PÁGINA 12
DOCENCIA DE 55

1. DESCRIPCIÓN DEL TRABAJO DE INVESTIGACIÓN
1.1. PLANTEAMIENTO DEL PROBLEMA
La sociedad ha avanzado poco a poco en la innovación de servicios que le han

permitido solucionar problemas que con el tiempo se han generado, todo esto ha
sido posible gracias a las nuevas tecnologías que junto a las aplicaciones móviles
han logrado facilitar la distribución de información debido al uso masivo del
Smartphone o dispositivo móvil convirtiéndola en una herramienta fundamental en
la vida diaria (El Comercio, 2014) , esto nos ha permitido en nuestro día a día
obtener acceso a la información en cualquier lugar y a cualquier hora, generando
un canal de comunicación, entretenimiento y experiencias. (Espinoza, 2017)
Los estudiantes de las UTS al finalizar su formación académica normalmente no

cuentan con la información y acompañamiento de la institución para dar continuidad
a su proceso como egresados manteniendo el vínculo con las UTS, este hecho
afecta de igual forma la interacción entre los egresados de las mismas áreas de
conocimiento, lo cual es importante para el intercambio de experiencias e
información, adicionalmente no se cuenta con la difusión de las herramientas para
la búsqueda de empleo que permita a los egresados conocer las oportunidades
laborales y aplicar a estas para acceder fácilmente a un empleo. En la actualidad
no existe en la Universidad una aplicación móvil que le permita a los egresados,
acceder a información de interés y acceso al buscador de empleo, Finalmente se
llega a establecer para el desarrollo de la propuesta la siguiente pregunta ¿Sera
posible brindar información a los egresados de las Unidades Tecnológicas de
Santander que facilite el mejoramiento de su perfil profesional y el acceso a las
oportunidades laborales a través de una aplicación para dispositivos móviles?
PÁGINA 13
DOCENCIA DE 55

1.2. JUSTIFICACIÓN
Actualmente las UTS cuenta con el área de extensión encargada de dar continuidad
al vínculo con los egresados, sin embargo, se identifica que la mayoría de
estudiantes desconoce durante su proceso formativo, la existencia de los servicios
que brinda esta área. Esta debilidad puede fortalecerse con la implantación de una
aplicación móvil que facilite el acceso a información de interés para los egresados
como educación continua, convenios y eventos; facilitando así el contacto de los
egresados con la institución, incrementando la participación en las diferentes
actividades de las UTS y promocionando la oferta de educación continua.
Adicionalmente teniendo en cuenta la situación laboral del país se hace importante

aprovechar este espacio para brindar una herramienta que permita a los egresados
acceder a las oportunidades laborales. Esto aportaría significativamente a las UTS
con el proceso de sus egresados, enriqueciendo su perfil profesional, facilitando la
interacción entre ellos y fortaleciendo el sentido de pertenecía.
Por lo anterior es relevante crear un prototipo de software que permita a los

egresados, acceder a información de interés y al buscador de empleo aprovechando
la fácil divulgación de esta aplicación para brindar un espacio virtual donde los
egresados puedan acceder en cualquier lugar con el fin de consultar información a
través de diferentes módulos, y finalmente solucionaría la problemática descrita.
1.3. OBJETIVOS
1.3.1. OBJETIVO GENERAL

 Implementar una aplicación móvil y un micro-sitio web para los egresados de
las unidades tecnológicas de Santander con lenguaje de programación Dart,
php y java con el fin de brindar una herramienta tecnológica que brinde un
espacio virtual donde los egresados puedan acceder al portafolio de servicios
que la uts ofrece.
1.3.2. OBJETIVOS ESPECÍFICOS

 Recolectar los requerimientos funcionales y no funcionales, a través de una
entrevista al Director de Investigaciones Y Extensión UTS, con el fin de
establecer las características del prototipo.
 Realizar el diagrama de casos de uso, secuencia y entidad relación para
representar la arquitectura del software, utilizando lenguaje unificado de
modelado.
PÁGINA 14
DOCENCIA DE 55

 Desarrollar la aplicación móvil, utilizando el IDE IntelliJ con lenguajes de

programación Dart y Java con el fin de crear una aplicación interactiva y de
fácil manejo.
 Desarrollar el micro-sitio web, utilizando el IDE Visual Studio Code con
lenguajes de programación Php con el fin de crear un sitio web administrable
y dinámica.
1.4. ESTADO DEL ARTE
1.4.1 INTERNACIONAL
INCAE Executive Club - Incae Bussines- Costa Rica: Aplicación móvil que tiene
como objetivo ser el punto de encuentro donde los graduados puedan encontrar
atención exclusiva, beneficios como conferencias, webinars, descuentos y su
principal función es la comunicación de los egresados y estudiantes de diferentes
carreras o facultades ya que funciona como una red social, como Facebook o
Linkedln, se encuentra disponible para dispositivos Android e IOS y puede ser
descargada desde Google Play y App Store. (Alvarez, 2020)
App UTP + - Universidad Tecnologica de Perú: Aplicación movil desarrollada por

la UTP y alumnos de la misma, para el ingreso de la app, se realiza con el codigo y
contraseña del correo institucional, sus caracteristicas principales son: Acceso a los
cursos matriculados, consulta de los horarios, informacion acerca de los profesores
y compañeros de clases activos de la UTP, visualizacion de notas academicas, sus
funciones exclusivas son: la consulta de pagos que se encuentran pendientes,
actualizacion de datos, refuerzos academicos y temas de interes tales como:
eventos, conferencias entre otros. Esta disponible para dispositivos Android e IOS
y puede ser descargada desde Google Play Store, App Store y App Gallery
(Universidad Tecnologica de Perú, 2017) .
1.4.2 NACIONAL
Egresado UP- Universidad de pamplona: Aplicación móvil creada por la

Universidad de pamplona, cuyo objetivo general es mantener contacto directo con
los graduados dándoles a conocer su portafolio de beneficios y servicios, como
calendario de programación mensual de actividades e información de programas de
postgrados, se encuentra disponible para dispositivos Android y puede ser
descargada desde Google Play. (Universidad de Pamplona, 2017)
Universidad EAFIT- Medellín: Aplicación móvil donde la comunidad institucional

podrá encontrar servicios tales como tramites, noticias y el portafolio de recursos de
PÁGINA 15
DOCENCIA DE 55

educación continua, posee características destacadas como la disponibilidad de

visualizar en tiempo real los cupos del parqueadero en el campus. Se encuentra
disponible para dispositivos Android e IOS y puede ser descargada desde Google
Play y App Store. (Universidad EAFIT, 2019)
UCundinamarca APP- UDEC: Aplicación móvil desarrollada por la dirección de

sistemas y tecnología, está diseñada para estudiantes, egresados, graduados, su
objetivo es ofrecer servicios tales como; visualizar notas académicas, realizar la
evaluación docente, consulta de sabana de notas y horarios de clase, así mismo
podrá ver estadísticas del rendimiento de semestre a semestre. Se encuentra
disponible para dispositivos Android y se espera próximamente estar para IOS,
puede ser descargada desde Google Play. (Universidad de Cundinamarca, 2016)
AreandinaAPP-Areandina: Aplicación móvil creada para uso exclusivo de

estudiantes, graduados, docentes y colaboradores, sus principales funcionalidades
son: consulta de eventos y noticias propias de la institución; horarios de clase,
calificaciones y calendario académico, así mismo se podrá generar un carné digital
para los estudiantes activos, para los docentes se podrá consultar sus horarios y
asistencia de estudiantes. Finalmente, a los graduados AreandinApp ofrece la
posibilidad de conocer eventos y talleres de interés. Se encuentra disponible para
dispositivos Android e IOS y puede ser descargada desde Google Play y App Store.
(Fundacion Universitaria del Area Andina, 2020)
EnContacto Egresados - Universidad del norte: Aplicación móvil exclusiva para

egresados Uninorte, sus características principales son: Consulta ofertas laborales
por medio de la bolsa de empleo turpial, búsqueda de estudiantes graduados por
año, información del club de beneficios, descuentos, egresados destacados,
noticias y eventos; así mismo tendrá a su disposición módulos de trámites para que
pueda solicitar desde el carné de egresados hasta acompañamiento profesional. Se
encuentra disponible para dispositivos Android e IOS y puede ser descargada desde
Google Play y App Store. (Universidad del Norte, 2019)
JaveMovil – Universidad Pontifica Javeriana : Aplicación movil para estudiantes

de la Universidad Pontificia Javeriana, sus caracteristicas principales son: Consulta
de horarios de clases, disponibilidad de salones de clase y edificios, chat para
contacto entre estudiantes y profesores, ademas de temas de interes como noticias
y eventos, esta aplicación no tiene costo, y se encuentra en constante desarrollo,
por ende si existen actualizaciones se aplican automaticamente en el S.O, esta
disponible para dispositivos Android e IOS y puede ser descargada desde Google
Play Store y App Sotre. (Universidad Pontificia Javeriana, 2014)
PÁGINA 16
DOCENCIA DE 55

2. MARCO REFERENCIAL
2.1 MARCO TEORICO:
Es importante hacer una revisión histórica en cuanto al surgimiento de las
aplicaciones móviles y su exponencial crecimiento en cuanto a ámbitos y
posibilidades en el mundo educativo e institucional, el constante uso de los
dispositivos móviles en la sociedad ha logrado crear una necesidad de tener una
aplicación móvil como un medio de interacción que puede llegar al público esperado,
con características de usabilidad, rapidez y de fácil acceso. Los beneficios que se
obtienen de lograr incluir una app móvil en el mercado son indispensables para
lograr fidelizar la mayor cantidad de usuarios o clientes que “consuman” en su diario
vivir estos contenidos.
Esta herramienta no está enfocada principalmente en el ámbito institucional, sin

embargo, busca posicionarse dejando atrás el uso de apps de escritorio, obsoletas
y sin interacción, convirtiéndose así en referente principal de las instituciones
educativas para mantener no solamente el sentido de pertenencia por su institución,
sino también para lograr dinamizar y mejorar el aprendizaje tradicional. (Yois Smith
Pascuas-Rengifo, 2020)
En ámbitos sociales, las aplicaciones móviles han logrado cambiar la forma de

interacción de las personas, no importa el lugar donde se encuentre, con solo tener
el dispositivo a la mano se podrá tener acceso a leer un periódico, ver cartelera de
cine, navegar en redes sociales, o simplemente jugar con pájaros como balas en
una resortera (Impacto Social Consultores, 2013). Esto con el fin de sacar el mejor
provecho a estas tecnologías.
Finalmente, las aplicaciones móviles se han convertido una herramienta de gran

importancia en la vida cotidiana de las personas, empresas e instituciones,
brindando así soluciones eficaces a infinidad de problemas que con el tiempo se
van generando. Estas apps van en pro de mejora día a día, buscando siempre
hacerle la vida más fácil a quienes las usan, y buscando posicionarse por completo
en la tecnología.
2.2 MARCO CONCEPTUAL:
2.2.1 APLICACIONES MÓVILES PARA APOYO INSTITUCIONAL:

Dada las necesidades de comunicación, es necesario tener un canal efectivo que
pueda servir como contacto directo en esta nueva era de las tecnologías, por esto
PÁGINA 17
DOCENCIA DE 55

las instituciones han optado por apostarle a llevar sus procesos o tener mayor
presencia en aplicativos móviles. (La Republica, 2015). Debido a la gran acogida
que han tenido los Smartphone y el gran cambio en el comportamiento de los
estudiantes que antes iba enfocado a la televisión, luego paso a los computadores
y ahora migro a los dispositivos móviles, ha llevado a la necesidad de estar a la
vanguardia y poder impulsar este tipo de tecnologías que brindan rapidez, agilidad
y que se pueden adaptar a cualquier tipo de necesidad que pueda surgir desde
acceso al pensum, hasta matricula en línea.
2.2.2 TECNOLOGIA MOVIL:

Es conocida como un medio de comunicación móvil o inalámbrico, funciona a través
de ondas electromagnéticas. Esta tecnología ha crecido con gran auge y no se ha
limitado en ejecución de llamadas o envió de mensajes de texto, ha incorporado
características y la posibilidad de tener acceso a internet. Así mismo las
aplicaciones móviles, han logrado posicionar en el mercado estos dispositivos que
generan beneficio al público en general con enfoque hacia el entretenimiento, o
como una estrategia empresarial debido a que el 67% de la población cuenta con
dispositivos móviles. (Kienyke, 2016)
2.2.3 SISTEMAS OPERATIVOS MOVILES:

Es el sistema encargado de controlar el dispositivo móvil, y será sobre el cual corran
los diferentes programas o aplicaciones del dispositivo, es aquel que pone en
funcionamiento cada uno de los componentes de hardware del dispositivo. Estos
sistemas operativos, aunque funcionen similar a los SO de pc o escritorio, no son
tan complejas, estas son un poco más simples (Mariana Pernía, 2016)
2.2.4 APLICACIÓN MÓVIL:

Son programas que pueden ser ejecutados en dispositivos como celulares, tabletas,
relojes inteligentes, etc., a través de los sistemas operativos; son capaces de
realizar tareas específicas y acceder a servicios, estas apps móviles se han
convertido en una herramienta indispensable tanto para los usuarios en sus labores
cotidianas, como a las empresas, debido a la cercanía y la inmediatez que
proporcionan y a la penetración de esta tecnología en la sociedad. (Marketing, 2016)
2.2.5 ANDROID:
Es un sistema operativo empleado para dispositivos móviles, está basado en Linux,
fue creado por Android Inc., que es de propiedad de Google, una de sus principales
características es su seguridad, posee muy pocas vulnerabilidades, ya que google
está en constante análisis de su código (Garcia, 202), así mismo su adaptabilidad
para poder soportar diferentes resoluciones de pantalla y conexiones.
PÁGINA 18
DOCENCIA DE 55

2.2.5 MICRO-SITIO WEB

Son mini webs que tienen como objetivo difundir información precisa y clara para el
cliente que accede a la misma, estas pueden tener un dominio propio, y no
necesariamente igual al del website principal. Una de sus características principales
es la agilidad en el proceso de desarrollo, ya que no posee tantas especificaciones
en sus contenidos, también permite la medición de alcance y los logros de manera
eficaz, puntual y segmentada. (Diaz, 2017)
2.2.6 LIBRERIA
Su definición se centra en un conjunto de archivos y pautas que tienen una
definición en cuanto su estructura, es código de programación, el cual se puede
reutilizar en proyectos, su función principal es hacer lo más fácil y rápido el
desarrollo de algunas funciones dentro de un proyecto de desarrollo, se dice que
para considerar como “librería” a un archivo este debe usarse en diferentes páginas,
no solo del mismo sitio, sino de varios sitios. (Aprende Web, 2018)
2.2.7 FIREBASE
Es una plataforma utilizada para el desarrollo de plataformas web y móviles, es
multiplataforma, su objetivo principal es que a través de sus herramientas se pueda
lograr un desarrollo más ágil sin perder la calidad necesaria, las funcionalidades que
ofrece están basadas en desarrollo, crecimiento y monetización, una de las más
significativas es la de notificaciones push, especialmente para aplicaciones móviles
que requieran informar a sus usuarios sobre algún acontecimiento, evento o
promoción, lo que resalta de esta opción es su propiedad de segmentación para
todo tipo de público ya sea en base a algún usuario, idioma o el tipo de dispositivo
que usa. (López, 2020)
2.3 MARCO AMBIENTAL:

En el desarrollo de esta aplicación móvil que permitirá a los egresados de las
Unidades Tecnológicas de Santander acceder a temas de interés tales como
eventos, cursos, egresados destacados y bolsa de empleo, se podrá disminuir el
uso de papel ya que, en cuanto a todos los procesos y procedimientos pertinentes
que se llevan a cabo se realizan de forma digital a través del celular, evitando el uso
de papel excesivo.
PÁGINA 19
DOCENCIA DE 55

3. DESARROLLO DEL TRABAJO DE GRADO
Para el desarrollo del proyecto se manejó el MODELO CASCADA el cual permite

llevar un proceso de desarrollo secuencial, las cuales son llamadas etapas que son
ejecutadas una tras de otra siguiendo el flujo de ejecución de arriba hacia abajo
como una cascada, estas etapas son:
3.1 Análisis de Requerimientos:
3.1.1 Análisis de Requerimientos:

En esta fase se definieron los requisitos del aplicativo móvil, por medio de un análisis
de problemática para el correcto funcionamiento y óptimo desarrollo, antes de
comenzar a programar. A continuación, se enumerarán datos importantes en la
realización del proyecto:
 Las tecnologías utilizadas para el desarrollo de la parte front-end fueron

flutter y para la parte back-end php y mysql.
 Los datos que sostendrán la aplicación móvil serán llenados a través del
micro sitio web administrable a través de peticiones realizadas por algunas
librerías prediseñadas.
 Los equipos de cómputo que se utilizarán serán 2 con las siguientes

especificaciones, procesador Intel Core i7-4200U, RAM 16GB, Disco
500GB, Tarjeta de video Amd Radeon Rx 580 4gb.
 Los equipos móviles que se utilizarán para las pruebas de la aplicación

serán 4 con las siguientes especiaciones: Motorola G9 plus – Android 10
procesador Snapdragon 730G, 4GB RAM, 128 ROM, Samsung Galaxy
A51 – Android 10, procesador Exynos 9611, 4GB RAM,128GB ROM,
Xiaomi Mi 9t – Android 9, procesador Snapdragon 730G, 6GB RAM, 64GB
ROM, Hawei Y9s – Android 9.1, procesador Kirin 710, RAM 6GB, ROM
128GB.
 La aplicación Extensión UTS va a permitir mostrar información de interés

como eventos, noticias, capacitaciones, consulta de ofertas laborales,
registro de hoja de vida, huella uteista en los dispositivos móviles con
sistema operativo Android Lollipop (5.0) o superior a través de internet
PÁGINA 20
DOCENCIA DE 55

3.2 Especificación:
En esta fase se establece la interfaz y la manera en que se podrá mostrar las
funcionalidades de la aplicación.
Esta aplicación móvil, cuenta con 4 Menús y 6 vistas:
1 Menú – Noticias y Eventos:
 Vista Noticias: En esta vista el usuario podrá ingresar e interactuar con las
noticias publicadas, estas constan del título, una descripción y su respectiva
imagen, el usuario podrá darle like a cada una de las mencionadas, y de la
misma manera podrá compartirla en alguna red social, por mensaje o correo
electrónico.
 Vista Eventos: En esta vista el usuario podrá ingresar e interactuar con los
eventos publicados, estos constan de un título y una descripción, el usuario
podrá darle like a cada una de los mencionados, y de la misma manera podrá
compartirlo en alguna red social, por mensaje o correo electrónico.
2 Menú – Bolsa de empleo:
 Vista Ofertas de empleo: En esta vista el usuario podrá visualizar, buscar y

postularse a las ofertas de empleo disponibles, podrá filtrarlas dependiendo
del salario, ciudad, fecha de publicación y área de trabajo, y así mismo podrá
ordenarlas por fecha de publicación.
 Vista Registrar HDV: En esta vista el usuario podrá registrar la hoja de vida
y también visualizar las ofertas, ingresar al portal elempleo, visualizar
noticias, y buscar ayuda si tiene algún problema.
3 Menú – Huella Uteista:
 Vista Principal: En esta vista el usuario podrá visualizar las huellas uteistas
de los estudiantes o egresados de la institución, consta de un título, la
descripción y su respectiva imagen, el usuario podrá darle like a cada una
de las huellas, y de la misma manera podrá compartirla en alguna red social,
mensaje o correo electrónico.
4 Menú – Webinar / Capacitaciones:
PÁGINA 21
DOCENCIA DE 55

 Vista Principal: En esta vista el usuario podrá visualizar las webinars y

capacitaciones disponibles, consta de un título, una descripción, su
respectiva imagen y su respectiva hora y fecha en la que se va a realizar, el
usuario podrá darle like a cada una de las mencionadas, y de la misma
manera podrá compartirla en alguna red social, por mensaje o correo
electrónico.
Las características de esta aplicación se explicarán más a detalle en el Manual de

la explicación (Anexo 1)
3.3 Diseño y Arquitectura:

En esta etapa el estilo que se utilizó para para el diseño esta versión de la aplicación,
fue con colores de (Google Material Desing) temas, imágenes y el tipo de tipografía.
Para el diseño de la aplicación se realizaron unos Mockups para tener una guía de
boceto establecido en el cual se pudiera fijar los módulos de funcionamiento. Estos
podrán visualizarse más detalladamente al final del documento (Anexo 3)
3.3.1 Arquitectura:
Para la construcción de la arquitectura de la aplicación móvil para egresados de las
Unidades Tecnológicas de Santander fue necesario 3 etapas:
1. Primera Etapa: En esta etapa empezamos con una maquetación de la

aplicación móvil a través de diferentes imágenes (Mockups) para lograr
visualizar los componentes necesarios para el correcto funcionamiento,
después se pasa a la programación del cascaron que sería solo el diseño sin
funcionalidades.
2. Segunda Etapa: En esta etapa pasamos a programar la página trasera, para

poder tener información en la base de datos.
3. Tercera Etapa: En esta etapa se hace la conexión de la parte trasera que

sería el micro sitio web con la parte delantera de la aplicación para lograr que
funcionar el aplicativo y puedan cargar todos los datos que ya fueron
ingresados.
En esta etapa logramos adaptar el sistema de notificaciones a través de un

servicio de google llamado “Firebase” el cual permite tener analíticas de la
aplicación y también permite utilizar “notificaciones push” que llegan al celular
a través de la app.
PÁGINA 22
DOCENCIA DE 55

Ilustración 1 Mockups Aplicación
Autores: Andrés Vergara, Luis Orejarena
PÁGINA 23
DOCENCIA DE 55

Ilustración 2 Mockups Aplicación
PÁGINA 24
DOCENCIA DE 55

Ilustración 3 Diagrama de casos de uso - Usuario
Ilustración 4 Diagrama de casos de uso - Administrador
PÁGINA 25
DOCENCIA DE 55

Ilustración 5 Diagrama Entidad Relación
PÁGINA 26
DOCENCIA DE 55

3.3.1.1 Descripción de casos de uso:

A continuación, se describen de forma específica los casos de uso relacionado con
cada actor dentro de la aplicación y su relación con las actividades que se desean
ejecutar en los módulos de la aplicación.
Caso de uso Consultar noticias – Usuario
Tabla 1 Caso de uso Consultar Noticias – Usuario
Ítem Definición
Nombre Consultar noticias
Descripción Para consultar una noticia el usuario debe ingresar a la sección de Noticias y
eventos, allí deberá seleccionar la pestaña de noticias donde encontrará un
listado de las noticias actuales, allí podrá visualizar el título, una descripción y
su correspondiente imagen, podrá abrir la imagen y hacerle zoom si es
necesario, el usuario finalmente podrá compartir y darle like a esta noticia.
Actor Usuario.
Precondiciones El usuario debe haber ingresado a la sección de noticias y eventos y haber

dado clic en la pestaña noticias.
Quién lo inicia Usuario.
Quién lo finaliza Usuario.
Secuencia Paso Acción

Normal
1 El usuario carga la interfaz de inicio al sistema.
2 El usuario ingresa la sección noticias y eventos.
3 El usuario selecciona la pestaña noticias
4 El usuario podrá visualizar las noticias disponibles
Post-condición El usuario podrá consultar las noticias, con sus respectiva descripción e
imagen.
PÁGINA 27
DOCENCIA DE 55

Caso de uso Consultar eventos – Usuario
Tabla 2 Caso de uso Consultar Evento – Usuario
Ítem Definición
Nombre Consultar eventos
Descripción Para consultar un evento el usuario debe ingresar a la sección de Noticias y

eventos, allí deberá seleccionar la pestaña de eventos donde encontrará un
listado de los eventos actuales, allí podrá visualizar el título y una descripción,
el usuario finalmente podrá compartir y darle like a este evento.
Actor Usuario.
Precondiciones El usuario debe haber ingresado a la sección de noticias y eventos y haber

dado clic en la pestaña eventos.

Normal
2 El usuario ingresa la sección noticias y eventos.
3 El usuario selecciona la pestaña eventos
4 El usuario podrá visualizar las eventos disponibles
Post-condición El usuario podrá consultar los eventos, con sus respectiva descripción.
PÁGINA 28
DOCENCIA DE 55

Caso de uso Consultar Ofertas laborales – Usuario
Tabla 3 Caso de uso Consultar Ofertas laborales - Usuario
Ítem Definición
Nombre Consultar Ofertas laborales
Descripción Para consultar las ofertas laborales el usuario debe ingresar a la sección de
Empleo, allí deberá seleccionar la pestaña de Ofertas de empleo, se
desplegara una lista de ofertas disponibles, allí el usuario podrá buscar algún
empleo especifico con el buscador de palabras, filtrar por salario, fecha y
áreas, el usuario también podrá aplicar a las ofertas dándole clic a la oferta de
interés, allí se abrirá una descripción de la oferta y un botón de postularme a
la oferta el cual deberá oprimir el usuario.
Actor Usuario.
Precondiciones El usuario debe haber ingresado a la sección de empleo y haber dado clic en
la pestaña Ofertas de empleo

Normal
2 El usuario ingresa la sección de empleo
3 El usuario selecciona la pestaña ofertas laborales
4 El usuario podrá visualizar las ofertas disponibles y aplicar a la de interés.
Post-condición El usuario podrá consultar, filtrar y buscar ofertar laborales y de la misma

manera aplicar a alguna de las mismas.
PÁGINA 29
DOCENCIA DE 55

Caso de uso Registrar Hoja de vida – Usuario
Tabla 4 Caso de uso Registrar Hoja de vida - Usuario
Ítem Definición
Nombre Registrar Hoja de vida
Descripción Para Registrar la hoja de vida el usuario deberá ingresar a la sección de

empleo, allí deberá seleccionar la pestaña de registrar HDV, se abrirá una
vista de la bolsa de empleo elempleo, allí el usuario deberá dar clic en el menú
situado en la parte superior izquierda de la pantalla, allí aparecerá un botón
rojo el cual el usuario deberá hacer clic, allí la aplicación re direccionará un
formulario para crear una cuenta, después el usuario podrá llenar los datos
necesarios para poder tener actualizada la hoja de vida.
Actor Usuario.
Precondiciones El usuario debe haber ingresado a la sección de empleo y haber dado clic en
la pestaña registrar HDV

Normal
2 El usuario ingresa la sección de empleo
3 El usuario selecciona la pestaña registrar HDV
4 El usuario selecciona el menú de la vista
5 El usuario podrá ingresar los datos para el registro de la hoja de vida
Post-condición El usuario podrá registrar su hoja de vida actualizada
PÁGINA 30
DOCENCIA DE 55

Caso de uso Visualizar la Huella Uteista – Usuario
Tabla 5 Caso de uso Visualizar la Huella Uteista - Usuario
Ítem Definición
Nombre Visualizar la Huella Uteista
Descripción Para visualizar la huella uteista el usuario deberá ingresar a la sección de la

huella uteista, allí se desplegarán las huellas donde podrá visualizar el título,
una descripción y su correspondiente imagen, podrá abrir la imagen y hacerle
zoom si es necesario, el usuario finalmente podrá compartir y darle like a las
huellas disponibles.
Actor Usuario.
Precondiciones El usuario debe haber ingresado a la sección de huella uteista.

Normal
2 El usuario ingresa la sección de huella uteista
3 El usuario podrá visualizar las huellas uteistas disponibles.
Post-condición El usuario podrá visualizar la huella uteista, con sus respectiva descripción e
imagen.
PÁGINA 31
DOCENCIA DE 55

Caso de uso Consultar los Webinars y Capacitaciones – Usuario
Tabla 6 Caso de uso Consultar los Webinars y Capacitaciones - Usuario
Ítem Definición
Nombre Consultar los Webinars y Capacitaciones
Descripción Para consultar los webinars y capacitaciones el usuario deberá ingresar a la

sección de Webinars y capacitaciones, allí se desplegarán una lista de
capacitaciones y webinars disponibles, el usuario podrá visualizar el título, una
descripción, una imagen y su respectiva fecha el usuario, podrá abrir la imagen
y hacerle zoom si es necesario, el usuario finalmente podrá compartir y darle
like a las capacitaciones o webinars disponibles.
Actor Usuario.
Precondiciones El usuario debe haber ingresado a la sección Webinars y Capacitaciones.

Normal
2 El usuario ingresa la sección webinars y capacitaciones
3 El usuario podrá consultar las webinars y capacitaciones disponibles
Post-condición El usuario podrá consultar los webinars y capacitaciones con su respectiva

descripción, imagen y fecha.
PÁGINA 32
DOCENCIA DE 55

Caso de uso Registrar Noticias – Administrador
Tabla 7 Caso de uso Registrar Noticias - Administrador
Ítem Definición
Nombre Registrar noticias
Descripción Para registrar noticias el administrador deberá ingresar al micro sitio con sus
respectivas credenciales, allí se desplegará un menú donde el administrador
deberá ingresar a la sección noticias, y hacer clic en el botón crear noticia, allí
se desplegará un formulario donde deberá ingresar los datos tales como: título,
imagen y contenido de la noticia, al finalizar deberá dar clic en el botón registrar
noticia.
Actor Administrador
Precondiciones El Administrador debe haber ingresado al micro sitio con las credenciales
Quién lo inicia Administrador
Quién lo finaliza Administrador

Normal
1 El administrador ingresa al micro sitio administrable
2 El administrador deberá ingresar a la sección noticias
3 El administrador deberá llenar el formulario
4 El administrador deberá hacer clic en el botón registrar noticia
Post-condición El Administrador podrá verificar la noticia subida con los respectivos datos
PÁGINA 33
DOCENCIA DE 55

Caso de uso Registrar Eventos – Administrador
Tabla 8 Caso de uso Registrar Eventos – Administrador
Ítem Definición
Nombre Registrar eventos
Descripción Para registrar eventos el administrador deberá ingresar al micro sitio con sus
respectivas credenciales, allí se desplegará un menú donde el administrador
deberá ingresar a la sección eventos, y hacer clic en el botón crear evento, allí
se desplegará un formulario donde deberá ingresar los datos tales como: título,
fecha, imagen y contenido del evento, al finalizar deberá dar clic en el botón
registrar evento.
Actor Administrador
Precondiciones El Administrador debe haber ingresado al micro sitio con las credenciales

Normal
2 El administrador deberá ingresar a la sección eventos
4 El administrador deberá hacer clic en el botón registrar evento
Post-condición El Administrador podrá verificar el evento subido con los respectivos datos
PÁGINA 34
DOCENCIA DE 55

Caso de uso Registrar Huella Uteista – Administrador
Tabla 9 Caso de uso Registrar Huella Uteista – Administrador
Ítem Definición
Nombre Registrar Huella Uteista
Descripción Para registrar la huella uteista el administrador deberá ingresar al micro sitio
con sus respectivas credenciales, allí se desplegará un menú donde el
administrador deberá ingresar a la sección huella uteista, y hacer clic en el
botón crear huella uteista, allí se desplegará un formulario donde deberá
ingresar los datos tales como: nombre, carrera y foto del estudiante junto con
una imagen y contenido de la huella, al finalizar deberá dar clic en el botón
registrar huella.
Actor Administrador
Precondiciones El administrador debe haber ingresado al micro sitio con las credenciales

Normal
2 El administrador deberá ingresar a la sección huella uteista
4 El administrador deberá hacer clic en el botón registrar huella
Post-condición El Administrador podrá verificar la huella subida con los respectivos datos.
PÁGINA 35
DOCENCIA DE 55

Caso de uso Registrar Webinars y Capacitaciones – Administrador
Tabla 10 Caso de uso Registrar Webinars y Capacitaciones – Administrador
Ítem Definición
Nombre Registrar Webinars y Capacitaciones
Descripción Para registrar los webinars y capacitaciones el administrador deberá ingresar

al micro sitio con sus respectivas credenciales, allí se desplegará un menú
donde el administrador deberá ingresar a la sección webinars, y hacer clic en
el botón crear webinar/capacitación ,allí se desplegará un formulario donde
deberá ingresar los datos tales como: título, fecha, imagen, link externo de la
capacitación y la descripción, al finalizar deberá dar clic en el botón registrar
capacitación.
Actor Administrador
Precondiciones El administrador debe haber ingresado al micro sitio con las credenciales

Normal
2 El administrador deberá ingresar a la sección webinars
4 El administrador deberá hacer clic en el botón registrar capacitación
Post-condición El Administrador podrá verificar la capacitación/webinar subida con los

respectivos datos.
PÁGINA 36
DOCENCIA DE 55

Ilustración 6 Diagrama de secuencia - Usuario
Ilustración 7 Diagrama de secuencia - Administrador
PÁGINA 37
DOCENCIA DE 55

3.4 Programación:
3.4.1 Estructura de desarrollo:
En el desarrollo de la aplicación, se organizó la estructura de la siguiente manera:
Ilustración 8 Estructura app Ilustración 9 Estructura web
PÁGINA 38
DOCENCIA DE 55

3.4.1.1 “Activitys”
Se presentarán las actividades principales del proyecto, que se encargaran de cargar las
respectivas vistas de la aplicación, cada una de estas actividades tiene asociado un diseño
visual o de interfaz llamado layout.
Ilustración 11 Interfaz principal Ilustración 10 Interfaz noticias
PÁGINA 39
DOCENCIA DE 55

Ilustración 13 Interfaz eventos Ilustración 12 Interfaz Ofertas de empleo
PÁGINA 40
DOCENCIA DE 55

Ilustración 14 Interfaz Registrar HDV Ilustración 15 Interfaz Huella Uteista
PÁGINA 41
DOCENCIA DE 55

Ilustración 16 Interfaz Webinars/Capacitaciones
PÁGINA 42
DOCENCIA DE 55

3.4.1.2 “Vistas web”

Se presentarán las vistas principales del proyecto web, donde se carga la información para
ser mostrada desde la app móvil.
Ilustración 17 Vista principal - Web
Ilustración 18 Vista principal noticias - Web
Ilustración 19 Vista formulario noticias - Web
PÁGINA 43
DOCENCIA DE 55

Ilustración 20 Vista principal eventos - Web
Ilustración 21 Vista formulario eventos - Web
Ilustración 22 Vista principal webinar/capacitaciones - Web
PÁGINA 44
DOCENCIA DE 55

Ilustración 23 Vista formulario webinar/capacitaciones - Web
Ilustración 24 Vista principal Huella Uteista
Ilustración 25 Vista formulario Huella Uteista
PÁGINA 45
DOCENCIA DE 55

3.4.2 Colores y textos
3.4.2.1 Colores
Los colores que se utilizaron tanto para la aplicación móvil, como para el micro sitio web
está basado en la gama de colores de las UTS, se trató de plasmar los colores más
sobresalientes de la página web oficial. Estos colores están almacenados en los archivos
values.xml para la app, y para el micro sitio en las carpetas css y boostrap.
Tabla 11 Colores utilizados app móvil
HEX COLOR
Color 1 #B4D404
Color 2 #D5D7D7
Color 3
#282D29
Tabla 12 Colores utilizados micro sitio web
HEX COLOR
Color 1 #6BB433
Color 2
#09681D
Color 3 #282D29
PÁGINA 46
DOCENCIA DE 55

3.4.2.1 Texto:
Los textos que se utilizaron en el desarrollo del aplicativo móvil y el micro sitio tienen
características especiales que le dan un toque más moderno como lo es Font-family:
“Nova” en web y en móvil Serif-alegreya. Se tuvo en cuenta en el diseño de los
títulos y descripciones el tamaño de cada uno, el espaciado entre cada una de las
letras y palabras, su justificación e interlinea.
Las fuentes utilizadas poseen ventajas al ser utilizadas en este proyecto ya que
generan una identidad visual, debido su contraste, la forma y el ancho de las letras.
3.4.3 Librerías Utilizadas:

Tras la finalización de cada una de las etapas anteriores se procede a explicar
diferentes características empleadas a lo largo del desarrollo y programación de la
aplicación y el micro sitio, en cada uno de los procedimientos empleados.
Los siguientes componentes utilizados son tanto de Flutter que fue la parte del front-
end como de php que fue la parte back-end.
 En la aplicación móvil en la sección de empleo se utilizó webview_flutter,

esta librería permite hacer uso del componente WebView que es un
contendor el cual permite cargar una página web, en este caso se cargó un
link externo el cual fue el del portal de la bolsa de empleo (elempleo.com) el
cual tiene convenio con las UTS, para lograr crear una conexión entre la
aplicación y las ofertas laborales disponibles en la bolsa de empleo.
 En la aplicación móvil en cada una de las secciones se utilizó una librería

llamada PhotoView la cual permite manipular las imágenes que allí estén
disponibles, las funciones que ofrece esta librería es poder rotarlas,
moverlas o hacerles zoom, en la aplicación solo se dejó la función de
hacerle zoom.
 En la aplicación móvil se utilizó la librería ShareSheet la cual permite

compartir información fuera de la aplicación con solo presionar el icono
correspondiente a destinos como WhatsApp, Facebook, Messenger,
Mensaje de texto, entre otros.
 En la aplicación móvil se utilizó la librería Font Awesome la cual permite la

importación de iconos basados en css con una licencia gratuita.
PÁGINA 47
DOCENCIA DE 55

 En la aplicación móvil se utilizó una librería Http para poder realizarle

peticiones a la parte back-end donde se encuentran los archivos php, los
cuales hacen las consultas a la base de datos de la aplicación.
 En la parte web se utilizó un framework ligero llamado Meedo, el cual

permite hacer conexiones a la base de datos de forma rápida y eficaz, posee
un sistema para evitar que se hagan inyecciones SQL, para impedir el robo
de datos.
 En la parte web se utilizó una librería llamada ImageWizard el cual permite

que, al subir las imágenes a través del panel de administración el peso de
estas disminuya y de esta manera puedan ser cargadas más rápido
generando una disminución en el uso de datos de la aplicación.
3.4.4 Servidor y servicios externos:

En la parte del back-end se utilizaron MySQL y Php, para esto se utilizó un servidor
básico contratado en internet, allí se almacenan los datos y las imágenes.
Ilustración 26 Servidor
Como servicio externo se utilizó Firebase, el cual permite autenticar, analizar la

información y además enviar notificaciones push a los celulares de las personas
que utilicen la aplicación, estas notificaciones cumplen un rol importante en la parte
de notificar los eventos y las capacitaciones, con este servicio podemos guardar el
dispositivo del usuario como un id y conectarlo con la aplicación, todo es posible a
través de una librería que posee Firebase y que ya es implementada por Google.
De esta manera se envían las notificaciones.
Ilustración 27 Notificación push
PÁGINA 48
DOCENCIA DE 55

3.5 Pruebas:
Una vez terminado el desarrollo de la aplicación, es necesario una serie de pruebas
con diferentes tipos de dispositivos móviles donde podrá correr la app:
Tabla 13 Dispositivos móviles pruebas
MOTOROLA G9 PLUS
SAMSUNG A51
XIAOMI MI 9T
HAWEI Y9S
PÁGINA 49
DOCENCIA DE 55

4. RESULTADOS
La finalidad del desarrollo de este proyecto es una aplicación móvil totalmente

funcional, para sistemas operativos Android, de igual manera componentes que son
necesarios para poder llegar al aplicativo final tales como:
Objetivo Resultado
1 Requerimientos de la aplicación móvil ( Funcionales y no funcionales)
2 Diagrama de secuencia
2 Modelo entidad relación
2 Diagrama casos de uso
3 Prototipo de la aplicación móvil
4 Micro-sitio web
PÁGINA 50
DOCENCIA DE 55

5. CONCLUSIONES
En el desarrollo del actual proyecto de grado de la modalidad de desarrollo
tecnológico como autores tuvimos presente conocimientos que fueron adquiridos
durante nuestra formación en las UTS, de esta manera también se hizo importante
la investigación de nuevos temas que eran desconocidos y a la vez eran claves en
la implementación de este apartado, como lo fue la inclusión de una bolsa de empleo
ya existente a nuestra app móvil y el uso de librerías que permitieron la articulación
de este módulo con el micro-sitio requiriendo de constante indagación para sacar
satisfactoriamente el proyecto adelante.
Estamos seguros que, en este ámbito de las aplicaciones móviles y el constante

desarrollo que se viene dando día tras día, estar en constante aprendizaje garantiza
nuevos métodos, técnicas y procesos que servirán como base para lograr
profundizar temas desconocidos. De esta manera pudimos lograr nuestra meta
trazada.
Con el desarrollo de esta herramienta institucional se genera un aporte general tanto

a las UTS, como también a los egresados ya que genera un lazo de comunicación,
que estará disponible 24/7 y será totalmente digital, de la misma manera genera un
aporte positivo al medio ambiente, ya que no se hace uso de papel.
Adicionalmente en el desarrollo de este proyecto de grado logramos adquirir

conocimientos que son de gran aprecio y aporte a nuestra formación como
ingenieros, pues se asumió un reto, que al principio causo miedo y temor, que
finalmente se logró plasmando conocimientos que fueron adquiridos en cada uno
de los peldaños como estudiantes.
Se concluye de manera exitosa el desarrollo de este aplicativo, cumpliendo con

cada uno de los objetivos que fueron planteados desde el principio, y dando como
resultado el prototipo de aplicación móvil junto a su micro-sitio web administrable.
PÁGINA 51
DOCENCIA DE 55

6. RECOMENDACIONES
En el desarrollo de aplicaciones móviles y en el mundo digital es importante estar

en constante actualización, para lograr cautivar a nuevos usuarios y lograr retener
a los antiguos, por ello esta aplicación móvil podrá contar a futuro con diferentes
módulos e interfaces, tales como creación de foros de interés, donde cada usuario
podrá hacer su aporte desde su conocimiento, también podrá tener un chat privado,
creando un lazo social entre estudiantes de diferentes áreas de la institución.
Adicionalmente se espera que se esta aplicación pueda llegar a estar disponible en

diferentes sistemas operativos, tales como WINDOWS PHONE, IOS,
BLACKBERRY OS, y pueda ser descargada desde las diferentes tiendas móviles
que encontramos en el mercado: PLAY STORE, APP STORE, MICROSOFT
STORE, NOKIA STORE, con el fin de que toda la comunidad pueda acceder a
disfrutar de esta herramienta y no limitar su acceso de descarga de la APK.
Finalmente se espera que este esté aplicativo móvil pueda tener diferentes idiomas
disponibles en la APP, para que estudiantes de intercambio puedan también
acceder a esta herramienta.
PÁGINA 52
DOCENCIA DE 55

7. REFENCIAS BIBLIOGRAFICAS
Alvarez, T. (13 de Noviembre de 2020). INCAE BUSINESS SCHOOL. Obtenido de INCAE

BUSINESS SCHOOL: https://www.incae.edu/es/blog/2020/11/13/incae-lanza-su-
primera-app-movil-exclusiva-para-graduados-de-la-institucion.html
Aprende Web. (13 de Julio de 2018). Aprende Web. Obtenido de Aprende Web:
http://aprende-web.net/librerias/
Diaz, M. (23 de 02 de 2017). FuegoYamana. Obtenido de FuegoYamana:
https://www.fuegoyamana.com/blog/que-es-un-microsite-funciones/
El Comercio. (22 de Enero de 2014). El Comercio. Obtenido de El Comercio:
https://www.elcomercio.com/tendencias/tecnologia/aplicaciones-moviles-facilitan-
vida-diaria.html
Espinoza, J. (Octubre de 2017). Socialgeek. Obtenido de Socialgeek:
https://socialgeek.co/startups/apps-canal-comunicacion-clientes-empresa/
Fundacion Universitaria del Area Andina. (27 de 01 de 2020). Areandina. Obtenido de
Areandina: https://www.areandina.edu.co/es/content/empezamos-la-decada-con-
areandina-app
Garcia, A. (30 de Enero de 202). adslzone. Obtenido de adslzone:
https://www.adslzone.net/2020/01/30/android-mas-seguro-ios-seguridad/
Impacto Social Consultores. (23 de 08 de 2013). Impacto Social. Obtenido de Impacto
Social: http://www.impactosocialconsultores.com/blog/2013/8/23/apps-con-
impacto-social-cambiando-paradigmas-en-la-provisin-de-servicios-pblicos-y-la-
participacin-ciudadana
Kienyke. (2016). Kienyke. Obtenido de Kienyke: https://www.kienyke.com/tecnologia/el-67-
de-la-poblacion-cuenta-con-un-dispositivo-movil
La Republica. (21 de Julio de 2015). La Republica. Obtenido de La republica:
https://www.larepublica.co/empresas/estas-aplicaciones-moviles-fueron-
desarrolladas-por-y-para-universidades-2279306
López, S. (17 de Mayo de 2020). Digital 55. Obtenido de Digital 55:
https://www.digital55.com/desarrollo-tecnologia/que-es-firebase-funcionalidades-
ventajas-conclusiones/
Mariana Pernía. (15 de Agosto de 2016). dytoc. Obtenido de dytoc:
https://dtyoc.com/2016/10/03/sistemas-operativos-moviles/
Marketing, S. (7 de Octubre de 2016). Digital Hub. Obtenido de Digital Hub:
https://digitalisthub.com/el-impacto-de-las-aplicaciones-moviles/
Milenio. (8 de Julio de 2018). Milenio. Obtenido de Milenio:
https://www.milenio.com/opinion/varios-autores/ciencia-tecnologia/el-uso-de-las-
aplicaciones-moviles-en-el-sector-educativo
Portafolio. (17 de Septiembre de 2017). Portafolio. Obtenido de Portafolio:
https://www.portafolio.co/negocios/varios-sectores-de-la-economia-ya-viven-de-
las-aplicaciones-509779
Universidad de Cundinamarca. (2016). Universidad de Cundinamarca. Obtenido de
Universidad de Cundinamarca:
https://www.ucundinamarca.edu.co/index.php/ucundinamarca-app
Universidad de Cundinamarca. (s.f.). Universidad de Cundinamarca.
PÁGINA 53
DOCENCIA DE 55

Universidad de Pamplona. (24 de Agosto de 2017). Universidad de pamplona. Obtenido de

Universidad de pamplona:
http://www.unipamplona.edu.co/unipamplona/portalIG/home_1/recursos/noticias_2
017/agosto/23082017/app_egresados.jsp
Universidad del Norte. (2019). Universidad del Norte. Obtenido de Universidad del Norte:
https://www.uninorte.edu.co/web/egresados/app
Universidad EAFIT. (2019). EAFIT. Obtenido de EAFIT:
https://www.eafit.edu.co/appmovil/Paginas/appmovil.aspx
Universidad Pontificia Javeriana. (30 de Abril de 2014). Universidad Pontificia Javeriana.
Obtenido de Universidad Pontificia Javeriana:
https://www.javeriana.edu.co/javemovil/
Universidad Tecnologica de Perú. (12 de Abril de 2017). Universidad Tecnologica de Perú.
Obtenido de Universidad Tecnologica de Perú: https://www.utp.edu.pe/utpmas
Yois Smith Pascuas-Rengifo, J. A.-Q.-V. (2020). DISPOSITIVOS MÓVILES EN LA
EDUCACIÓN: TENDENCIAS E IMPACTO PARA LA INNOVACIÓN. Revista
Politecnica, vol.16, no.31 pp.97-109.
PÁGINA 54
DOCENCIA DE 55

8. ANEXOS
Anexo 1: Manual de Usuario de la aplicación móvil

Anexo 2: Manual de Administrador del micro sitio web
Anexo 3: Mockups Aplicación móvil
Anexo 4: Informe de los escenarios de prueba de la aplicación móvil

Docencia: Desarrollo Tecnológico

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Docencia: Desarrollo Tecnológico

Cargado por

Copyright:

Formatos disponibles

PÁGINA 1

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE

Desarrollo de prototipo de aplicación Android y micro sitio web para la comunidad de

Rodrigo Andrés Vergara Mendoza

Luis Ernesto Orejarena Sierra

UNIDADES TECNOLÓGICAS DE SANTANDER

FECHA DE PRESENTACIÓN: 22 JULIO 2021

ELABORADO POR: REVISADO POR: APROBADO POR : Asesor de planeación

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE

Desarrollo de prototipo de aplicación Android y micro sitio web para la comunidad de

Rodrigo Andrés Vergara Mendoza

Luis Ernesto Orejarena Sierra

Trabajo de Grado para optar al título de

Víctor Andrés Ochoa Correa

GRUPO DE INVESTIGACIÓN DE INGENIERIA DEL SOFTWARE – GRIS

UNIDADES TECNOLÓGICAS DE SANTANDER

FECHA DE PRESENTACIÓN: 22 JULIO 2021

ELABORADO POR: REVISADO POR: APROBADO POR : Asesor de planeación

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

El proyecto “Prototipo de aplicación Android y

Firma del Evaluador

Firma del Director

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

Luis Ernesto Orejarena Sierra

A mis padres va dirigida especialmente esta dedicatoria, gracias a ellos que me

Rodrigo Andrés Vergara Mendoza

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

Es muy importante expresar nuestros más sinceros y especiales agradecimientos a

Damos un especial reconocimiento a nuestro director de proyecto Víctor Andrés

Finalmente agradecerles a nuestros padres por su apoyo incondicional, quienes

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

RESUMEN EJECUTIVO .................................................................................................. 10

1. DESCRIPCIÓN DEL TRABAJO DE INVESTIGACIÓN......................................... 12

1.1. PLANTEAMIENTO DEL PROBLEMA .................................................................. 12

2. MARCO REFERENCIAL ...................................................................................... 16

2.1 MARCO TEORICO .................................................................................................... 16

2.2 MARCO CONCEPTUAL............................................................................................ 16

2.2.1 APLICACIONES MÓVILES PARA APOYO INSTITUCIONAL ............................... 16

2.2.2 TECNOLOGIA MOVIL: ........................................................................................... 17

2.2.3 SISTEMAS OPERATIVOS MOVILES..................................................................... 17

2.2.4 APLICACIÓN MÓVIL ............................................................................................. 17

2.2.5 ANDROID ............................................................................................................... 17

2.2.5 MICRO-SITIO WEB ................................................................................................ 18

2.2.6 LIBRERIA ............................................................................................................... 18

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

2.3 MARCO AMBIENTAL ............................................................................................... 18

3. DESARROLLO DEL TRABAJO DE GRADO ....................................................... 19

3.1 ANÁLISIS DE REQUERIMIENTOS ........................................................................... 19

3.1.1 ANÁLISIS DE REQUERIMIENTOS ........................................................................ 19

3.2 ESPECIFICACIÓN .................................................................................................... 20

3.3 DISEÑO Y ARQUITECTURA .................................................................................... 21

3.3.1 ARQUITECTURA ................................................................................................... 21

3.3.1.1 DESCRIPCIÓN DE CASOS DE USO .................................................................. 26

3.4.1 ESTRUCTURA DE DESARROLLO ........................................................................ 37

3.4.1.2 “VISTAS WEB” ................................................................................................................. 42

3.4.2 COLORES Y TEXTOS ............................................................................................ 45

3.4.2.1 COLORES ........................................................................................................... 45

3.4.3 LIBRERÍAS UTILIZADAS ...................................................................................... 46

3.4.4 SERVIDOR Y SERVICIOS EXTERNOS ................................................................. 47

3.5 PRUEBAS ................................................................................................................. 48

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO

7. REFENCIAS BIBLIOGRAFICAS .......................................................................... 52

INFORME FINAL DE TRABAJO DE GRADO EN MODALIDAD DE PROYECTO