Diseño de un prototipo aplicativo web para el reconocimiento de emociones para la

oficina de bienestar universitario de la Aunar con sede en la ciudad de Villavicencio- Meta

Camilo Andrés Clavijo Fernández

Cristian Humberto Ovalle Varón

Corporación Universitaria Autónoma de Nariño – Extensión Villavicencio

Facultad de Ingeniería
Profesional en Ingeniería Informática
Proyecto de Investigación
Marzo de 2022
 Diseño de un prototipo aplicativo web para el reconocimiento de emociones para la
oficina de bienestar universitario de la Aunar con sede en la ciudad de Villavicencio- Meta

Camilo Andrés Clavijo Fernández

Cristian Humberto Ovalle Varón

Asesor Especifico
Nombre del asesor especifico

Asesor Metodológico
Nombre del asesor metodológico

Corporación Universitaria Autónoma de Nariño – Extensión Villavicencio

Facultad de Ingeniería
Profesional en Ingeniería Informática
Proyecto de Investigación
Marzo de 2022
Copyright © 2021 por Apellido(s) y Nombre(s) de los investigadores. Todos los derechos
reservados.
 iii

Dedicatoria

Este trabajo está dedicado a las personas que han estado a mi lado y que me han apoyado
en el proceso de aprendizaje y crecimiento de forma personal, académica y profesionalmente,
cada una de las personas cercanas que de una u otra manera han influido de manera positiva en
mi vida y que me acompañan en cada paso que doy o meta que cumplo, especialmente a mi hija,
quien es el motor fundamental de mi vida y a quien le quiero brindar el mejor ejemplo.
 iv

Agradecimientos

Gracias a todos los docentes, administrativos y personas que han estado y, que aportan
sus conocimientos para el fortalecimiento de nuestros conocimientos, quienes siempre están
dispuestos a brindar su apoyo, su ayuda, su consejo y sobre todo su tiempo, gracias a ellos a
quienes siempre recurrimos y están disponibles.
 v

Resumen

Mínimo 250 palabras y máximo 300 palabras.

Palabras clave: 5 palabras

 vi

Abstract
 vii

Tabla de contenido

Introducción.........................................................................................................................1
1. Problema......................................................................................................................2
1.1. Antecedentes del problema..................................................................................2
1.2. Planteamiento del problema................................................................................2
1.3. Formulación del problema...................................................................................2
1.4. Sistematización del problema..............................................................................2
2. Justificación.................................................................................................................3
3. Objetivos......................................................................................................................4
3.1. Objetivo general...................................................................................................4
3.2. Objetivos específicos...........................................................................................4
4. Marco Referencial.......................................................................................................5
4.1. Marco teórico.......................................................................................................5
4.2. Marco conceptual.................................................................................................5
4.3. Marco Legal.........................................................................................................5
4.4. Marco institucional..............................................................................................5
4.5. Marco geográfico.................................................................................................5
5. Aspectos Metodológicos de la Investigación..............................................................6
5.1. Línea de investigación.........................................................................................6
5.2. Tipo de estudio....................................................................................................6
5.3. Enfoque................................................................................................................6
5.4. Hipótesis..............................................................................................................6
5.4.1. Hipótesis alternativa........................................................................................6
5.4.2. Hipótesis Nula.................................................................................................6
5.5. Variables..............................................................................................................6
5.5.1. Variable dependiente.......................................................................................6
5.5.2. Variable Independiente...................................................................................6
5.6. Fuentes y Técnicas de recolección de información.............................................6
5.6.1. Fuentes primarias............................................................................................6
5.6.2. Fuentes secundarias.........................................................................................6
5.7. Población.............................................................................................................6
6. Resultados y discusión.................................................................................................7
Conclusiones........................................................................................................................8
Lista de Referencias.............................................................................................................9
 viii

Anexos...............................................................................................................................10
 ix

Lista de Tablas
 x

Lista de Gráficos
 xi

Lista de Figuras
 xii

Lista de Imágenes
 1

Introducción
 2

1. Problema

1.1. Antecedentes del problema

1.2. Planteamiento del problema

1.3. Formulación del problema

1.4. Sistematización del problema

 3

2. Justificación

Al contar con una aplicación web de reconocimiento de estados emocionales confiable, la oficina de
Bienestar Universitario de la AUNAR, mejorara las condiciones laborales del colaborador para una mejor
atención.

Se entrenará una red neuronal capaz de identificar y clasificar los diferentes estados emocionales de los
trabajadores de esta área de la institución de educación superior, ya que al presentar un estado emocional
optimo se podrá obtener ahorro de tiempo, rapidez, eficiencia. Obtener más que un servicio rápido e
informativo.
 4

3. Objetivos

3.1. Objetivo general

-Diseñar un prototipo aplicativo web para el reconocimiento de emociones para la oficina
de bienestar universitario de la AUNAR con sede en la ciudad de Villavicencio- Meta

3.2. Objetivos específicos

- Entrenar una red neuronal que permita diferenciar emociones a partir de las expresiones
faciales de los sujetos.
-Diseñar una interfaz web que permita usar una cámara para la identificación las
emociones antes de reconocerlo en tiempo real.
- Efectuar pilotajes periódicos de los avances de la aplicación y sus pruebas de
funcionamiento.
 5

4. Marco Referencial

4.1. Marco teórico

4.2. Marco conceptual

4.2.1. WEB

El Web es un medio de interactividad. El potencial del Web para reemplazar ciertos

aspectos de la comunicación impresa se basa en el hecho de que puede ser la mejor opción para
el diseño, presentación y realización de proyectos. (Solórzano, 2006)
4.2.2. Aplicaciones web:

(Zofio, 2013, pág. 7)define que una aplicación web al software que reside en un
ordenador, denominado servidor web, que los personas pueden utilizar a través de Internet o de
una intranet, con un navegador web, para obtener los servicios que ofrezca. Existen multitud de
aplicaciones web, de muy diversos tipos, tales como gestores de correo, web mails, wikis, blogs,
tiendas en línea, etc. Según el tipo de acceso, las aplicaciones web pueden ser:
– Públicas: como las tiendas virtuales, diarios digitales, portales de Internet, etc.
- Restringidas: como las intranets, que ofrecen servicios para mejorar las gestiones
internas de una empresa, tales como el control de horas de su personal, gestión de proyectos y
tareas, gestores documentales, etc. También suele estar restringido el acceso a aplicaciones web
en la extranet cuyo objetivo es aumentar y mejorar el servicio con distribuidores, clientes,
proveedores, comerciales o colaboradores externos.

Una aplicación web es un programa informático que permite que los personas puedan
acceder a la información distribuida en la red Internet. Por ejemplo, este blog es una aplicación
que me permite agregar información y te permite acceder a esta información de forma interactiva
ya que puedes dejar un comentario. (Franco, 2012)
 6

(Zofio, 2013, pág. 8) Las aplicaciones web generan dinámicamente una serie de páginas
web en un formato estándar, como HTML o XHTML, soportados por los navegadores web
comunes. Se utilizan lenguajes interpretados en el lado del cliente, directamente o a través de
plugins, tales como JavaScript, applets de Java, Flash, etc., para añadir elementos dinámicos en
la interfaz de la persona. Generalmente, cada página web en particular se envía al cliente como
un documento estático, pero la secuencia de páginas ofrece a la persona una experiencia
interactiva. Durante la sesión, el navegador web y, por lo tanto, el ordenador del cliente
interpreta y muestra en pantalla las páginas, actuando como cliente para cualquier aplicación
web.
4.2.3. Para qué sirve una aplicación web

(Franco, 2012)
La función esencial de una aplicación web es comunicar y ahorrar tiempo. Hay una
aplicación web para cada tipo de función o conjunto de funciones que necesitemos hacer para
comunicarnos, hacer tareas, y en general para poder trabajar de forma más productiva por
internet. Hay aplicaciones web que sirven para:
 Enviar email
 Hacer búsquedas en la red
 Encontrar lugares
 Hacer llamadas de voz
 Chatear
 Hacer una tienda online
 Montar un negocio por Internet, etc.

Beneficios de una aplicación web

 Te permite ahorrar tiempo y trabajo
 No ocupa espacio físico
 Siempre hay actualizaciones
 Consume bajos recursos
 Es multiplataforma
 Es portable
 Es de alta disponibilidad
 Puede ser colaborativa, etc.

4.2.4. Inteligencia Artificial:

Según (Ponce, 2014, pág. 15) es una de las ramas de las ciencias de la computación que
más interés ha despertado en la actualidad, debido a su enorme campo de aplicación.
La búsqueda de mecanismos que nos ayuden a comprender la inteligencia y realizar
modelos y simulaciones de estos, es algo que ha motivado a muchos científicos a elegir
esta área de investigación.
 7

4.2.5. Redes Neuronales Artificiales:

Según (Mañas, 2010)Son un modelo computacional vagamente inspirado en el
comportamiento observado en su homólogo biológico. Consiste en un conjunto de unidades,
llamadas neuronas artificiales, conectadas entre sí para transmitirse señales. La información de
entrada atraviesa la red neuronal (donde se somete a diversas operaciones) produciendo unos
valores de salida.

4.2.6. Cámara web:

(Ecured, 2012)Es una cámara digital conectada a una computadora, la cual puede capturar
imágenes y transmitirlas a través de Internet, ya sea a una página Web o a otra u otras
computadoras de forma privada.

Las cámaras Web necesitan una computadora para transmitir las imágenes. Sin embargo,
existen otras cámaras autónomas que tan sólo necesitan un punto de acceso a la red informática,
bien sea ethernet o inalámbrico. Para diferenciarlas las cámaras Web se las denomina cámaras de
red.
4.2.7. Funcionamiento de una webcam:

Según (Quiroga & Igandea, 2005) El funcionamiento de una webcam es muy simple: una
cámara de vídeo toma imágenes y las pasa a un ordenador que las traduce a lenguaje binario y las
envía a través de internet para disfrute de todo aquel que quiera verlas. Estos son los pasos:
1.       Una cámara toma imágenes que envía regularmente a un ordenador, algunas se
actualizan cada pocos segundos y otras cada varias horas.
2.       El ordenador mediante el hardware/software adecuado, traduce las imágenes a
formato binario, generalmente ficheros de imágenes jpeg, dada su buena relación
calidad/tamaño.
3.       Las imágenes ya traducidas son incluidas dentro de una dirección de Internet, lo
que les proporciona la posibilidad de ser vistas en toda la red, de manera que está siempre
disponible la imagen más reciente. Así, cuando alguien solicita la página de una webcam, puede
ver en su navegador la última imagen tomada por la misma.
4.       Existen webcams cuyo ritmo de refresco es muy alto y que pueden llegar a dar la
sensación de transmitir imágenes de vídeo en directo. Sin embargo, son fotogramas sueltos que
se actualizan normalmente al pasar el ratón por el enlace o pulsarlo.
 8

4.2.8. HTML:

(Alvarez, 2001) Dice que HTML es un lenguaje con que se define el contenido de las
páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y
otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc.
HTML es un lenguaje de marcación de elementos para la creación de documentos
hipertexto, muy fácil de aprender, lo que permite que cualquier persona, aunque no haya
programado en la vida, pueda enfrentarse a la tarea de crear una web.

4.2.9. CSS:
(Eguiluz, LIBROS WEB, 2000) dice que CSS es: un lenguaje de hojas de estilos creado
para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y
XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible
para crear páginas web complejas.
4.2.10. JAVA SCRIPT:

(Eguiluz, 2000) dice que JavaScript es: un lenguaje de programación que se utiliza
principalmente para crear páginas web dinámicas.

4.2.11. JSON:

(Garibay, 2016) dice que JSON es el acrónimo para JavaScript Object Notation, y aunque
su nombre lo diga, no es necesariamente parte de JavaScript, de hecho es un estándar basado en
texto plano para el intercambio de información, por lo que se usa en muchos sistemas que
requieren mostrar o enviar información para ser interpretada por otros sistemas, la ventaja de
JSON al ser un formato que es independiente de cualquier lenguaje de programación, es que los
servicios que comparten información por éste método, no necesitan hablar el mismo idioma, es
decir, el emisor puede ser Java y el receptor PHP, cada lenguaje tiene su propia librería para
codificar y decodificar cadenas de JSON.
4.2.12. MATERIALIZE CSS:

Según (Web, 2018) dice que Materialize CSS te ofrece una base de CSS sobre la cual
implementar cualquier proyecto, ya sea un sitio web o aplicación basada en estándares web. Es a
base de código contiene una cantidad enorme de interfaces ya diseñadas, que puedes incorporar a
tu proyecto a base de aplicar clases (class CSS). Además tiene una serie de código Javascript
 9

asociado, ya que muchas de las interfaces de usuario requieren código de programación para
funcionar.

Entre las cosas que te ofrece Materialize encuentras todo tipo de interfaces, como colores,
transiciones, tipografías, botones, navegadores, cabeceras, base de datos de iconos, elementos de
formulario, tarjetas, tooltips, acordeones, menús desplegables, botones flotantes, migas de pan,
menús con pestañas, sistemas de paginación, listas, así como un sistema de rejilla y mucho más.
Por supuesto, todos los componentes y las utilidades de layout son responsive y a se adaptan a
todo tipo de pantallas, grandes y pequeñas. Por todo, este framework de diseño web es un
auténtico regalo para el desarrollador.

4.3. Marco Legal

4.3.1. LEY 1834 DE 2017:

(Justicia, 2017)La presente ley tiene como objeto desarrollar, fomentar, incentivar y
proteger las industrias creativas. Estas serán entendidas como aquellas industrias que generan
valor en razón de sus bienes y servicios, los cuales se fundamentan en la propiedad intelectual. 

4.3.2. Ley 1266 de 2008:

(Jurídica, 2008)La presente ley tiene por objeto desarrollar el derecho constitucional que
tienen todas las personas a conocer, actualizar y rectificar las informaciones que se hayan
recogido sobre ellas en bancos de datos, y los demás derechos, libertades y garantías
constitucionales relacionadas con la recolección, tratamiento y circulación de datos personales a
que se refiere el artículo 15 de la Constitución Política, así como el derecho a la información
establecido en el artículo 20 de la Constitución Política, particularmente en relación con la
información financiera y crediticia, comercial, de servicios y la proveniente de terceros países.

4.4. Marco institucional

4.5. Marco geográfico

 10

5. Aspectos Metodológicos de la Investigación

5.1. Línea de investigación

5.2. Tipo de estudio

5.3. Enfoque

5.4. Hipótesis

5.4.1. Hipótesis alternativa

5.4.2. Hipótesis Nula

5.5. Variables

5.5.1. Variable dependiente

5.5.2. Variable Independiente

 11

5.6. Fuentes y Técnicas de recolección de información

5.6.1. Fuentes primarias

5.6.2. Fuentes secundarias

5.7. Población
 12

6. Resultados y discusión

- Con el desarrollo de este aplicativo web se espera que sea capaz de identificar y clasificar el
estado emocional de los usuarios.

- Se espera que las funcionalidades del aplicativo web se ejecuten efectivamente.

 13

Conclusiones
 14

Lista de Referencias

Referencias
Alvarez, M. (01 de 01 de 2001). desarrolloweb.com. Recuperado el 11 de Marzo de 2021, de
desarrolloweb.com: https://desarrolloweb.com/articulos/que-es-html.html
Ecured. (22 de Enero de 2012). Ecured. Recuperado el 11 de Marzo de 2021, de Ecured:
https://www.ecured.cu/Cámara_Web
Eguiluz, J. (01 de Enero de 2000). LIBROS WEB. Recuperado el 11 de Marzo de 2021, de
LIBROS WEB: https://librosweb.es/libro/css/capitulo-1.html
Eguiluz, J. (1 de Enero de 2000). LIBROS WEB. Recuperado el 11 de Marzo de 2021, de
LIBROS WEB: https://librosweb.es/libro/javascript/capitulo-1.html
Franco. (23 de 07 de 2012). Maestro Financiero. Recuperado el 11 de Marzo de 2021, de
Maestro Financiero: http://maestrofinanciero.com/como-funciona-y-para-que-sirve-una-
aplicacion-web
Garibay, V. (17 de Julio de 2016). Medium.com. Recuperado el 23 de Marzo de 2021, de
Medium.com: https://medium.com/@victor.garibayy/qué-es-y-para-qué-sirve-json-
be05fe02e67d
Jurídica, D. (31 de Diciembre de 2008). REGIMEN LEGAL DE BOGOTÁ. Recuperado el 11 de
Marzo de 2021, de REGIMEN LEGAL DE BOGOTÁ:
http://www.bogotajuridica.gov.co/sisjur/normas/Norma1.jsp?i=34488
Justicia, M. d. (23 de Mayo de 2017). Sistema único de información Normativa. Recuperado el
11 de Marzo de 2021, de Sistema único de información Normativa: http://www.suin-
juriscol.gov.co/viewDocument.asp?ruta=Leyes/30030647
Mañas, A. (16 de Junio de 2010). Bookdown. Recuperado el 11 de Marzo de 2021, de
Bookdown: https://bookdown.org/amanas/traficomadrid/métodos-basados-en-deep-
learning.html
Ponce, J. &.-A. (1 de Marzo de 2014). Researchgate. doi:10.13140/2.1.3720.0960
 15

Quiroga, E., & Igandea, I. (2005). GOBIERNO DE ESPAÑA - MINISTERIO DE EDUCACION

Y DEL DEPORTE. Recuperado el 11 de Marzo de 2021, de GOBIERNO DE ESPAÑA -
MINISTERIO DE EDUCACION Y DEL DEPORTE:
http://recursostic.educacion.es/observatorio/web/eu/equipamiento-tecnologico/
hardware/265-eduardo-quiroga-gomez?format=pdf
Solórzano, P. (2006). Planeación y desattollo de website. En P. Solórzano, La Web del
Programador (pág. 75). México D.F: Red Revista de Especialidades Médico-
Quirúrgicas. Recuperado el 11 de Marzo de 2021
Web, D. (24 de Julio de 2018). Desarrollo Web. Recuperado el 10 de Marzo de 2022, de
Desarrollo Web: https://desarrolloweb.com/articulos/materialize-framework-css.html
Zofio, J. (2013). Aplicaciones web. En J. Zofio, Aplicaciones web (pág. 7). Madrid, España:
Macmillan Iberia, S.A. Recuperado el 11 de Marzo de 2021, de
https://ebookcentral.proquest.com/lib/bibliouniminutosp/reader.action?
docID=3217129&query=aplicaciones+web
 16

Anexos