universidad de guayaquilrepositorio.ug.edu.ec/bitstream/redug/52257/1/b-cint-ptg... · 2021. 5....
Post on 06-Aug-2021
3 Views
Preview:
TRANSCRIPT
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS
CARRERA DE INGENIERÍA EN NETWORKING Y
TELECOMUNICACIONES
ANÁLISIS, ESTUDIO Y PROTOTIPO DE LA APLICACIÓN DE
EXPERIENCIA DE USUARIO (UX) EN EL DESARROLLO DE LA
INTERFAZ GRÁFICA DE USUARIO DE LA PLATAFORMA E
INTEGRACIÓN CON COMPONENTES DEL SISTEMA DEL
PROYECTO FCI TEMONET FASE II DE LA UNIVERSIDAD DE
GUAYAQUIL
PROYECTO DE TITULACIÓN
Previa a la obtención del título de:
INGENIERO EN NETWORKING Y TELECOMUNICACIONES
AUTOR (ES):
MICHELLE NYDIA CAMPAÑA HARO
ESTEFANIA LISSET MARTILLO VÁSQUEZ
TUTOR: JORGE CHICALA ARROYAVE, MSc.
GUAYAQUIL-ECUADOR
2020
REPOSITORIO NACIONAL DE CIENCIAS Y TECNOLOGÍA
FICHA DE REGISTRO DE TESIS
TÍTULO: “ANÁLISIS, ESTUDIO Y PROTOTIPO DE LA APLICACIÓN DE EXPERIENCIA DE USUARIO (UX) EN EL DESARROLLO DE LA INTERFAZ GRÁFICA DE USUARIO DE LA PLATAFORMA E INTEGRACIÓN CON COMPONENTES DEL SISTEMA DEL PROYECTO FCI TEMONET FASE II DE LA UNIVERSIDAD DE GUAYAQUIL”
AUTORES:
MICHELLE NYDIA CAMPAÑA HARO
ESTEFANIA LISSET MARTILLO
VASQUEZ
TUTOR: Ing. JORGE CHICALA ARROYAVE, MSc.
REVISOR : Ing. EDUARDO ALVARADO UNAMUNDO, MSc
INSTITUCIÓN: UNIVERSIDAD DE GUAYAQUIL
FACULTAD: CIENCIAS MATEMÁTICAS Y FÍSICAS
CARRERA: INGENIERÍA EN NETWORKING Y TELECOMUNICACIONES
FECHA DE PUBLICACIÓN:
NÚMERO DE PÁGINAS:
AREA TEMÁTICA: TECNOLOGÍA DE LA INFORMACIÓN
PALABRAS CLAVES: UX, Usabilidad, TEMONET, Diseño UI, REACT.
RESUMEN:
El objetivo del presente trabajo de titulación es analizar, estudiar y realizar un prototipo de
la aplicación de Experiencia de usuario (UX) en el desarrollo de la interfaz gráfica para un
sistema de elaboración de terapias para pacientes con dificultad de aprendizaje, Dislexia.
Para ello, se identificó ciertas características de diseño que debían mejorar para iniciar con
la fase II del proyecto TEMONET. Así mismo, se realizó un análisis comparativo entre el
diseño UI tradicional frente a un diseño aplicando UX. Además, por medio de herramientas
para la recolección de datos, encuestas y entrevistas, se evaluó el grado de satisfacción
de los pacientes y usuarios finales con la propuesta planteada del nuevo diseño enfocado
a la Experiencia de usuario para la plataforma TEMONET. Se concluye, que el desarrollo
de diseños orientados en la UX es fundamental para el mejoramiento de las interfaces e
interacción entre los usuarios y los sistemas de información, puesto que, facilitan la
usabilidad del sistema.
NUMERO DE REGISTRO (en base de datos):
NUMERO DE CLASIFICACIÓN:
DIRECCIÓN URL:
ADJUNTO PDF:
x SI
NO
CONTACTO CON AUTORA: MICHELLE NYDIA CAMPAÑA HARO
TELÉFONO: 0978705403
E-MAIL: michelle.campanah@ug.edu.ec
CONTACTO CON AUTORA:
ESTEFANIA LISSET MARTILLO VÁSQUEZ
TELÉFONO:
0979644858
EMAIL:
estefania.martillov@ug.edu.ec
CONTACTO DE LA INSTITUCIÓN:
DIR.: VÍCTOR MANUEL RENDÓN 434 ENTRE BAQUERIZO MORENO Y CÓRDOVA
NOMBRE: AB. JUAN CHÁVEZ ATOCHA
TELÉFONO: 2307729
E-MAIL: juan.chaveza@ug.edu.ec
IV
APROBACIÓN DEL TUTOR
En mi calidad de Tutor del trabajo de investigación, “Análisis, estudio y prototipo de la
aplicación de Experiencia de usuario (UX) en el desarrollo de la interfaz gráfica de usuario de
la plataforma e integración con componentes del sistema del proyecto FCI Temonet fase II
de la Universidad de Guayaquil” elaborado por la Srta. Estefania Lisset Martillo Vásquez y la
Srta. Michelle Nydia Campaña Haro, Alumnos no titulados de la Carrera de Ingeniería en
Networking y Telecomunicaciones, Facultad de Ciencias Matemáticas y Físicas de la
Universidad de Guayaquil, previo a la obtención del Título de Ingeniero en Networking y
Telecomunicaciones, me permito declarar que luego de haber orientado, estudiado y
revisado, la Apruebo en todas sus partes.
Atentamente,
____________________________________
Ing. Jorge Chicala Arroyave, MSc.
TUTOR
V
DEDICATORIA I
Dedico este trabajo de tesis a mi abuelo
Washington Haro, quien fue la inspiración de mi
vida profesional, dándome ánimos en cada
momento duro de la carrera y hasta los
momentos de logros que se dieron en el proceso.
Terminar no fue fácil, iniciar la carrera
tampoco, pero con sacrificio y perseverancia he
podido por fin lograr mi meta alcanzada. Ahora
empieza una nueva etapa profesional, donde ya
puedo brindar aporte profesional como Ingeniera.
Campaña Haro Michelle Nydia
VI
DEDICATORIA II
Con todo mi corazón dedico este trabajo de
titulación a mi mamá, Arelys Vásquez y a mi
hermana, Jenniffer Martillo, pues sin ellas no lo
habría logrado. Su amor y apoyo incondicional a
lo largo de toda mi vida han logrado que me
mantenga de pie. Todos mis logros se los debo a
ellas, porque cada día me motivan para alcanzar
mis más grandes anhelos.
Gracias, mamá y hermana.
Martillo Vásquez Estefania Lisset
VII
AGRADECIMIENTO I
Principalmente le agradezco a mi abuelo
Washington Haro y Mariana Haro por haber
creído en mí, por el apoyo que me han dado
durante toda mi vida y sobre todo por el esfuerzo
que pusieron en mí.
Tengo la necesidad de expresar mi
agradecimiento a mi compañera Estefania
Martillo por cuyo compromiso, amistad y
conocimiento me han sido de incondicional ayuda
en esta titulación, donde me he entretenido y
esforzado durante este proceso.
Campaña Haro Michelle Nydia
VIII
AGRADECIMIENTO II
En primera instancia agradezco a Dios por
brindarme salud, fuerzas y sobre todo permitirme
tener y disfrutar de mi familia. Ellos han sido el
pilar fundamental en cada decisión de mi vida y
hoy en día son quienes están conmigo en
cualquier paso que doy.
Agradezco a mi madre, Arelys Vásquez, quién
es la persona que me brinda su apoyo
incondicional desde el momento de mi
nacimiento, también me motiva a seguir adelante
y me brinda su hombro cuando estoy a punto de
decaer.
Así mismo, agradezco a mi compañera de
tesis Michelle Campaña que fue mi apoyo
durante la elaboración del presente trabajo de
titulación y a nuestro tutor Jorge Chicala quien fue
nuestro guía en todo este proceso.
Martillo Vásquez Estefania Lisset
IX
TRIBUNAL DE PROYECTO DE TITULACIÓN
____________________________
Ing. José González Ruíz, M.Sc
DECANO DE LA FACULTAD CIENCIAS MATEMÁTICAS Y
FÍSICAS
______________________________
Ing. Abel Alarcón Salvatierra, Mgs
DIRECTOR DE LA CARRERA DE INGENIERÍA EN NETWORKING
Y TELECOMUNICACIONES
______________________________
Ing. Fabián Espinoza Bazán, M.Sc
PRESIDENTE DEL TRIBUNAL
_______________________________
Ing. Christian Antón Cedeño, M.Sc
DOCENTE DE ÁREA TRIBUNAL
______________________________
Ing. Eduardo Alvarado Unamuno, M.Sc
DOCENTE REVISOR TRIBUNAL
_______________________________
Ing. Jorge Chicala Arroyave, M.Sc
DOCENTE TUTOR DEL PROYECTO
_______________________________
Ab. Juan Chávez Atocha, Esp.
SECRETARIO DE FACULTAD
X
DECLARACIÓN EXPRESA
“La responsabilidad del contenido de este
Proyecto de Titulación, me corresponden
exclusivamente; y el patrimonio intelectual de la
misma a la UNIVERSIDAD DE GUAYAQUIL”
Michelle Nydia Campaña Haro
CI: 0953577392
Estefania Lisset Martillo Vásquez
CI: 0956162655
XI
.
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS
CARRERA DE INGENIERIA EN NETWORKING Y TELECOMUNICACIONES
“ANÁLISIS, ESTUDIO Y PROTOTIPO DE LA APLICACIÓN DE EXPERIENCIA DE
USUARIO (UX) EN EL DESARROLLO DE LA INTERFAZ GRÁFICA DE USUARIO DE LA
PLATAFORMA E INTEGRACIÓN CON COMPONENTES DEL SISTEMA DEL PROYECTO
FCI TEMONET FASE II DE LA UNIVERSIDAD DE GUAYAQUIL”
Proyecto de Titulación que se presenta como requisito para optar por el título de
INGENIERO EN NETWORKING Y TELECOMUNICACIONES
AUTOR(ES):
Michelle Nydia Campaña Haro
C.I. 0953577392
Estefania Lisset Martillo Vásquez
C.I.: 0956162655
Tutor: Ing. Jorge Chicala Arroyave, MSc.
Guayaquil,18 de marzo de 2021
XII
CERTIFICADO DE ACEPTACIÓN DEL TUTOR
En mi calidad de Tutor del proyecto de titulación, nombrado por el Consejo Directivo de la
Facultad de Ciencias Matemáticas y Físicas de la Universidad de Guayaquil.
CERTIFICO:
Que he analizado el Proyecto de Titulación presentado MICHELLE NYDIA CAMPAÑA HARO
y ESTEFANIA LISSET MARTILLO VÁSQUEZ como requisito previo para optar por el título
de Ingeniero en Networking y Telecomunicaciones cuyo tema es:
“Análisis, estudio y prototipo de la aplicación de Experiencia de usuario (UX) en el desarrollo de la interfaz gráfica de usuario de la plataforma e integración con componentes del sistema del Proyecto FCI Temonet fase II de la Universidad de Guayaquil.”
Considero aprobado el trabajo en su totalidad.
Presentado por:
Michelle Nydia Campaña Haro CI: 0953577392
Estefania Lisset Martillo Vásquez CI: 0956162655
Tutor: Ing. Jorge Chicala Arroyave, MSc.
Guayaquil, 18 de marzo del 2021
XIII
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERIA EN NETWORKING Y TELECOMUNICACIONES
Autorización para Publicación de Proyecto de Titulación en Formato Digital
1. Identificación del Proyecto de Titulación
Nombre Alumno: Michelle Nydia Campaña Haro
Dirección: Guayaquil, Av. El Ejercito y Francisco de Marcos
Teléfono: 0978705403 E-mail: michelle.campanah@ug.edu.ec
Nombre Alumno: Estefania Lisset Martillo Vásquez
Dirección: Durán, Lotización Las Terrazas
Teléfono: 0979644858 E-mail: estefania.martillov@ug.edu.ec
Facultad: Facultad de Ciencias Matemáticas y Físicas
Carrera: Ingeniería en Networking y Telecomunicaciones
Título al que opta: Ingeniero en Networking y Telecomunicaciones.
Profesor tutor: Ing. Jorge Chicala Arroyave, MSc.
Título del Proyecto de titulación:
Análisis, estudio y prototipo de la aplicación de Experiencia de usuario (UX) en el
desarrollo de la interfaz gráfica de usuario de la plataforma e integración con
componentes del sistema del Proyecto FCI TEMONET fase II de la Universidad de
Guayaquil
Tema del Proyecto de Titulación: Interfaz, Plataforma, Dislexia, Javascript
XIV
2. Autorización de Publicación de Versión Electrónica del Proyecto de Titulación.
A través de este medio autorizo a la Biblioteca de la Universidad de Guayaquil y a la Facultad de Ciencias Matemáticas y Físicas a publicar la versión electrónica de este Proyecto de titulación.
Publicación electrónica:
Firma Alumno:
3. Forma de envío:
El texto del proyecto de titulación debe ser enviado en formato Word, como archivo .Doc. O .RTF y .Puf para PC. Las imágenes que la acompañen pueden ser: .gif, .jpg o .TIFF.
DVDROM CDROM X
Inmediata X Después de 1 año
Campaña Haro Michelle Nydia
Martillo Vásquez Estefania Lisset
XV
ÍNDICE GENERAL
DEDICATORIA I ................................................................................................................... V
DEDICATORIA II ................................................................................................................. VI
AGRADECIMIENTO I ......................................................................................................... VII
AGRADECIMIENTO II ....................................................................................................... VIII
TRIBUNAL DE PROYECTO DE TITULACIÓN .................................................................... IX
DECLARACIÓN EXPRESA .................................................................................................. X
CERTIFICADO DE ACEPTACIÓN DEL TUTOR ................................................................ XII
ÍNDICE GENERAL ............................................................................................................ XV
ABREVIATURAS ............................................................................................................ XVII
ÍNDICE DE CUADROS ................................................................................................... XVIII
ÍNDICE DE GRÁFICOS ..................................................................................................... XX
RESUMEN ....................................................................................................................... XXII
ABSTRACT .................................................................................................................... XXIII
INTRODUCCIÓN .................................................................................................................. 1
CAPITULO I ......................................................................................................................... 3
EL PROBLEMA ............................................................................................................................... 3
Planteamiento del problema ....................................................................................................... 3
Ubicación del problema en un contexto .................................................................................. 3
Situación conflictos nudos críticos .......................................................................................... 4
Causas y Consecuencias del Problema .................................................................................. 4
Delimitación del problema ........................................................................................................... 5
Formulación del problema ........................................................................................................... 6
Evaluación del Problema ............................................................................................................. 6
Objetivos .......................................................................................................................................... 7
Objetivo General ......................................................................................................................... 7
Objetivos Específicos ............................................................................................................... 7
Alcances del Problema ................................................................................................................. 7
Justificación e Importancia ......................................................................................................... 8
Metodología del proyecto ............................................................................................................ 8
Metodología de desarrollo ....................................................................................................... 8
XVI
Supuestos y restricciones ....................................................................................................... 9
Supuestos .................................................................................................................................... 9
Plan de Calidad ......................................................................................................................... 10
CAPÍTULO II ...................................................................................................................... 14
MARCO TEORÍCO .......................................................................................................... 14
Antecedentes del estudio ............................................................................................. 14
Fundamentación teórica ............................................................................................... 16
FUNDAMENTACIÓN LEGAL ......................................................................................... 39
Pregunta científica a contestarse ................................................................................. 43
Definiciones conceptuales ........................................................................................... 43
CAPÍTULO III...................................................................................................................... 44
PROPUESTA TECNOLÓGICA ....................................................................................... 44
Análisis de Factibilidad ................................................................................................. 45
Factibilidad Operacional ............................................................................................... 46
Factibilidad técnica ....................................................................................................... 46
Factibilidad legal ........................................................................................................... 47
Factibilidad económica ................................................................................................. 48
Etapas de la metodología del proyecto ....................................................................... 48
El Sprint ...................................................................................................................... 48
Reunión de planificación de Sprint .......................................................................... 48
Creación del Backlog ................................................................................................. 49
Historias de Usuario .................................................................................................. 49
Reunión de Planeación del proyecto ........................................................................ 58
Trabajo de desarrollo durante el Sprint .................................................................... 60
Sprint 1 ....................................................................................................................... 60
Sprint 2 ....................................................................................................................... 61
Sprint 3 ....................................................................................................................... 62
Sprint 4 ....................................................................................................................... 65
Sprint 5 ....................................................................................................................... 68
Entregables del proyecto ................................................................................................. 82
CRITERIOS DE VALIDACIÓN DE LA PROPUESTA ......................................................... 82
Encuesta ..................................................................................................................... 82
Juicio a experto .......................................................................................................... 92
CAPITULO IV ..................................................................................................................... 96
Criterios de aceptación del producto o servicio ......................................................... 96
Recomendaciones ......................................................................................................... 97
XVII
Conclusiones ................................................................................................................. 98
ANEXOS ....................................................................................................................... 103
ABREVIATURAS
UX Experiencia de usuario
DCU Diseño centrado en el usuario
HCI Interacción hombre-computadora
UI Interfaz de usuario
WAI Iniciativa de la accesibilidad web
IDE Entorno de desarrollo integrado
VSC Visual Studio Code
JSON Notación de objetos de JavaScript
UG Universidad de Guayaquil
ART. Articulo
ING Ingeniero
LOT Ley orgánica de telecomunicaciones
URL localizador de fuente uniforme
XVIII
ÍNDICE DE CUADROS
CUADRO 1. CAUSAS Y CONSECUENCIAS ....................................................................... 5
CUADRO 2. DELIMITACIÓN DEL PROBLEMA .................................................................. 5
CUADRO 3. PLAN DE CALIDAD ....................................................................................... 10
CUADRO 4. DISEÑO DE UI VS DISEÑO DE UX ............................................................... 22
CUADRO 5. ETAPA 1: INVESTIGACIÓN .......................................................................... 24
CUADRO 6. ETAPA 2: ORGANIZACIÓN .......................................................................... 26
CUADRO 7. FACTORES PARA MEJORAR LA EXPERIENCIA DE USUARIO ................ 28
CUADRO 8. RECURSOS TÉCNICOS ................................................................................ 47
CUADRO 9. RECURSOS TÉCNICOS DE HARDWARE .................................................... 47
CUADRO 10. RECURSOS TÉCNICOS DE SOFTWARE ................................................... 47
CUADRO 11. TABLA DE PRESUPUESTO ........................................................................ 48
CUADRO 12. RECOPILACIÓN DE INFORMACIÓN ACERCA DE PLATAFORMAS UX .. 50
CUADRO 13. REVISIÓN DE LAS POLÍTICAS EXISTENTES DE EXPERIENCIA DE
USUARIO EN DISEÑO WEB. ............................................................................................. 50
CUADRO 14. REVISIÓN DE POLÍTICAS DE EXPERIENCIA DE USUARIO EN DISEÑO
WEB ................................................................................................................................... 51
CUADRO 15. SELECCIÓN DEL LENGUAJE CON EL QUE SE TRABAJARÁ ................. 51
CUADRO 16. PROGRAMAR EN JAVASCRIPT ................................................................ 52
CUADRO 17. EL ESTILO DEBE ESTAR BASADO EN LA UX.......................................... 52
CUADRO 18. APARIENCIA EN CSS ................................................................................. 53
CUADRO 19. APARIENCIA EN SCSS ............................................................................... 53
CUADRO 20. CREAR RUTA PARA HOME DE LA PLATAFORMA .................................. 54
CUADRO 21. CREAR RUTA PARA LOGOPEDAS. .......................................................... 54
CUADRO 22. CREAR RUTA PARA USUARIOS ............................................................... 55
CUADRO 23. CREAR RUTA PARA REGISTRO USUARIOS ............................................ 55
CUADRO 24. CREAR LOGIN DE LA PÁGINA .................................................................. 56
CUADRO 25. AÑADIR INTERACCIÓN DEL LOGOPEDA CON LA CREACIÓN DE
ACTIVIDADES .................................................................................................................... 56
CUADRO 26. ACTIVIDADES PEDAGÓGICAS PARA LOS NIÑOS CON DISLEXIA ........ 57
CUADRO 27. APRECIACIÓN VISUAL DE LOS ELEMENTOS.......................................... 57
CUADRO 28. PLATAFORMA RESPONSIVE..................................................................... 58
CUADRO 29. REUNIONES DE LOS SPRINT .................................................................... 58
CUADRO 30. HISTORIA DE USUARIO 1 .......................................................................... 60
CUADRO 31. HISTORIA DE USUARIO 2 .......................................................................... 61
XIX
CUADRO 32. HISTORIA DE USUARIO 3 .......................................................................... 61
CUADRO 33. HISTORIA DE USUARIO 4 .......................................................................... 62
CUADRO 34. HISTORIA DE USUARIO 5 .......................................................................... 62
CUADRO 35. HISTORIA DE USUARIO 6 .......................................................................... 64
CUADRO 36. HISTORIA DE USUARIO 7 .......................................................................... 65
CUADRO 37. HISTORIA DE USUARIO 9 .......................................................................... 67
CUADRO 38. HISTORIA DE USUARIO 10 ........................................................................ 68
CUADRO 39. HISTORIA DE USUARIO 11 ........................................................................ 69
CUADRO 40. HISTORIA DE USUARIO 12 ........................................................................ 71
CUADRO 41. HISTORIA USUARIO 13 .............................................................................. 73
CUADRO 42. HISTORIA DE USUARIO 14 ........................................................................ 76
CUADRO 43. HISTORIA DE USUARIO 15 ........................................................................ 78
CUADRO 44. HISTORIA DE USUARIO 16 ........................................................................ 79
CUADRO 45. HISTORIA DE USUARIO 17 ........................................................................ 81
CUADRO 46. INDICADOR DE RESPUESTA 1 .................................................................. 82
CUADRO 47. INDICADORES DE RESPUESTA 2 ............................................................. 83
CUADRO 48. INDICADORES DE RESPUESTA 3 ............................................................. 84
CUADRO 49. INDICADORES DE RESPUESTA 4 ............................................................. 85
CUADRO 50. INDICADORES DE RESPUESTA 5 ............................................................. 86
CUADRO 51. INDICADORES DE RESPUESTA 6 ............................................................. 87
CUADRO 52. INDICADORES DE RESPUESTA 7 ............................................................. 88
CUADRO 53. INDICADORES DE RESPUESTA 8 ............................................................. 89
CUADRO 54. INDICADORES DE RESPUESTA 9 ............................................................. 90
CUADRO 55. INDICADORES DE RESPUESTA 10 ........................................................... 91
CUADRO 56. NIVEL DE CUMPLIMIENTO DE LOS CRITERIOS 1 ................................... 96
CUADRO 57. NIVEL DE CUMPLIMIENTO DE LOS CRITERIOS 2 ................................... 96
XX
ÍNDICE DE GRÁFICOS
GRÁFICO 1. LOS ELEMENTOS DE LA EXPERIENCIA DE USUARIO ............................ 18
GRÁFICO 2. ELEMENTOS DE LA USABILIDAD DEL DISEÑO........................................ 19
GRÁFICO 3. ACCESIBILIDAD ........................................................................................... 20
GRÁFICO 4. INTERACCIÓN HOMBRE-COMPUTADORA ................................................ 21
GRÁFICO 5. PROCESO DE TRABAJO CENTRADO EN EL USUARIO ........................... 22
GRÁFICO 6. ENFOQUES DE LAS ETAPAS DE DESARROLLO DE UN PRODUCTO
DIGITAL ............................................................................................................................. 24
GRÁFICO 7. ETAPA 3: PROTOTIPADO ........................................................................... 26
GRÁFICO 8. ETAPA 4: PRUEBAS .................................................................................... 27
GRÁFICO 9. ETAPA 5: DISEÑO ........................................................................................ 27
GRÁFICO 10. LOGO DE JAVASCRIPT ............................................................................. 31
GRÁFICO 11. LOGO DE REACT ....................................................................................... 33
GRÁFICO 12. LOGO DE NODE.JS .................................................................................... 36
GRÁFICO 13. LOGO DE GIT ............................................................................................. 36
GRÁFICO 14. LOGO DE GITHUB ...................................................................................... 37
GRÁFICO 15. LOGO DE VSC ............................................................................................ 38
GRÁFICO 16. CÓDIGO FUENTE DE RUTAS DEFINIDAS ................................................ 63
GRÁFICO 17. RUTAS DENTRO DE PAGES PRINCIPAL ................................................. 63
GRÁFICO 18. EFECTOS VISUALES EN LA PLATAFORMA ............................................ 64
GRÁFICO 19. CÓDIGO USANDO CSS ............................................................................. 65
GRÁFICO 20. CÓDIGO USANDO SCSS ........................................................................... 66
GRÁFICO 21. CÓDIGO FUENTE PARA PAGINA HOME .................................................. 67
GRÁFICO 22. RUTA PARA PERFIL DEL LOGOPEDA ..................................................... 68
GRÁFICO 23. USUARIO LOGUEADO ............................................................................... 69
GRÁFICO 24. LIST-LESSON PARA EL USUARIO ........................................................... 70
GRÁFICO 25. CÓDIGO FUENTE DE LISTLESSON .......................................................... 70
GRÁFICO 26. CÓDIGO PARA REGISTROS DE USUARIOS ............................................ 71
GRÁFICO 27. PÁGINA PARA MATRICULAR ESTUDIANTES ......................................... 72
GRÁFICO 28. CÓDIGO PARA MATRICULAR LOGOPEDAS ........................................... 72
GRÁFICO 29. PÁGINA PARA MATRICULAR LOGOPEDAS ............................................ 73
GRÁFICO 30. LOGGIN DE LA PÁGINA ............................................................................ 74
GRÁFICO 31. CONDICIÓN DE INGRESO. ........................................................................ 74
GRÁFICO 32. MENSAJES DE AVISOS AL LOGEARSE .................................................. 75
GRÁFICO 33. MENSAJES DE ALERTA ............................................................................ 75
GRÁFICO 34. ELABORACIÓN DE LAS ACTIVIDADES ................................................... 76
XXI
GRÁFICO 35. ACTIVIDADES CON ARCHIVOS MULTIMEDIAS....................................... 77
GRÁFICO 36. ESTRUCTURA DE ARCHIVO JSON .......................................................... 77
GRÁFICO 37. TERAPIAS DISCRIMINACIÓN VISUAL ...................................................... 78
GRÁFICO 38. CÓDIGO DE MULTIPLES ACTIVIDADES .................................................. 79
GRÁFICO 39. USO DE REDUXE ....................................................................................... 80
GRÁFICO 40. USO DEL DROPZONE ................................................................................ 80
GRÁFICO 41. PLATAFORMA EN UNA PANTALLA MOVIL ............................................. 81
GRÁFICO 42. PROPORCIONES DE RESPUESTA 1 ........................................................ 82
GRÁFICO 43. PROPORCIÓN DE RESPUESTA 2 ............................................................. 83
GRÁFICO 44. PROPORCIÓN DE RESPUESTA 3 ............................................................. 84
GRÁFICO 45. PROPORCIÓN DE RESPUESTA 4 ............................................................. 85
GRÁFICO 46. PROPORCIÓN DE RESPUESTA 5 ............................................................. 86
GRÁFICO 47. PROPORCIÓN DE RESPUESTA 6 ............................................................. 87
GRÁFICO 48. PROPORCIÓN DE RESPUESTA 7 ............................................................. 88
GRÁFICO 49. PROPORCIÓN DE RESPUESTA 8 ............................................................. 89
GRÁFICO 50. PROPORCIÓN DE RESPUESTA 9 ............................................................. 90
GRÁFICO 51. PROPORCIÓN DE RESPUESTA 10 ........................................................... 91
XXII
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMATICAS Y FISICAS
CARRERA DE INGENIERIA EN NETWORKING Y TELECOMUNICACIONES
“Análisis, estudio y prototipo de la aplicación de Experiencia de usuario (UX) en el
desarrollo de la interfaz gráfica de usuario de la plataforma e integración con componentes
del sistema del Proyecto FCI TEMONET fase II de la Universidad de Guayaquil”
RESUMEN
RESUMEN
El objetivo del presente trabajo de titulación es analizar, estudiar y realizar un prototipo de la
aplicación de Experiencia de usuario (UX) en el desarrollo de la interfaz gráfica para un
sistema de elaboración de terapias para pacientes con dificultad de aprendizaje, Dislexia.
Para ello, se identificó ciertas características de diseño de la fase I, que debían mejorar para
iniciar con la fase II del proyecto TEMONET. Así mismo, se realizó un análisis comparativo
entre el diseño UI tradicional frente a un diseño aplicando UX. Además, por medio de
herramientas para la recolección de datos, encuestas y entrevistas, se evaluó el grado de
satisfacción de los pacientes y usuarios finales con la propuesta planteada del nuevo diseño
enfocado a la Experiencia de usuario para la plataforma TEMONET. Se concluye, que el
desarrollo de diseños orientados en la UX es fundamental para el mejoramiento de las
interfaces e interacción entre los usuarios y los sistemas de información, puesto que, facilitan
la usabilidad del sistema.
Palabras claves: Experiencia de usuario (UX), Usabilidad, TEMONET, Diseño UI.
Autores:
Michelle Nydia Campaña Haro
Estefania Lisset Martillo Vásquez
Tutor: Ing. Jorge Chicala Arroyave, MSc.
XXIII
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE CIENCIAS MATEMATICAS Y FISICAS
CARRERA DE INGENIERIA EN NETWORKING Y TELECOMUNICACIONES
“Análisis, estudio y prototipo de la aplicación de experiencia de usuario (UX) en el desarrollo
de la interfaz gráfica de usuario de la plataforma e integración con componentes del sistema
del proyecto FCI Temonet fase II de la universidad de Guayaquil”
RESUMEN
ABSTRACT The objective of this degree work is to analyze, study and carry out a prototype of the User
Experience (UX) application in the development of the graphical interface for a system for
developing therapies for patients with learning difficulties, Dyslexia. To do this, certain design
features were identified that should be improved to start phase II of the TEMONET project.
Likewise, a comparative analysis was carried out between the traditional UI design versus a
design applying UX. In addition, through tools for data collection, surveys and interviews, the
degree of satisfaction of patients and end users with the proposed proposal of the new design
focused on User Experience for the TEMONET platform was evaluated. It is concluded that
the development of UX-oriented designs is essential to improve the interfaces and interaction
between users and information systems, since they facilitate the usability of the system.
Key words: User Experience (UX), Usability, TEMONET, UI design.
Autores:
Michelle Nydia Campaña Haro
Estefania Lisset Martillo Vásquez
Tutor: Ing. Jorge Chicala Arroyave, MSc.
1
INTRODUCCIÓN
En los últimos años, la interacción entre las personas y las computadoras es un campo
que ha evolucionado en la búsqueda de aportar aplicaciones con interfaces interactivas que
sean intuitivas, accesibles y faciliten la usabilidad. En este sentido, se evidencia que no es
suficiente que las aplicaciones sean interactivas y fácil de usar, más bien, se apunten en crear
experiencias únicas que influyan en el comportamiento emocional de las personas.
Este apartado está dirigido a personas que sufren Dislexia (específicamente niños), como
el avance y el desarrollo de la tecnología posibilita brindar herramientas para superar las
dificultades de aprendizaje de la lectura y escritura.
Bajo este contexto, una de las problemáticas que se evidencian es que el diseño de
interfaz realizada en la fase I del proyecto TEMONET, se encuentra desarrollada de manera
estática, es decir, carece de dinamismo, posee terapias con actividades ya establecidas y no
permiten que un experto en la disciplina (logopeda) tenga la oportunidad de crear y estructurar
terapias con sus respectivas actividades para el tratamiento de la misma, en base a la edad
del paciente, grado de afectación, características y tipos de dislexia. Además, se evidencia
que la plataforma no es responsive, es decir, su diseño web no se adapta a todos los
dispositivos: tabletas, Smartphone, etc. Esto provoca que la plataforma no sea totalmente
accesible para todos los usuarios.
Dado lo anterior, y ante la problemática presentada se demuestra esfuerzos por parte de
la comunidad para presentar nuevos paradigmas que permitan innovar y mejorar la
interacción con los usuarios. Es así que se propone un concepto enfocado hacia la aplicación
de Experiencia de usuario (UX), con el objetivo de promover un diseño de interface web que
integre usabilidad, accesibilidad, inclusión y emoción.
En este aspecto, y de acuerdo con lo antes expuesto, el objetivo general del presente
trabajo de titulación es analizar y estudiar la aplicación de Experiencia de Usuario (UX) en el
Desarrollo de la Interfaz Gráfica de Usuario de la Plataforma del proyecto FCI Temonet Fase
II de la Universidad de Guayaquil. Para ello, se realizarán los siguientes objetivos específicos:
1. Identificar las características del diseño de la interfaz de usuario de la fase I del
proyecto TEMONET que deben mejorar para dar inicio a la fase II.
2. Evaluar las metodologías existentes para la implementación de UX.
3. Analizar los diseños de las aplicaciones tradicionales versus las aplicaciones que
utilizan UX.
4. Proponer un diseño de interfaz dedicado a la plataforma de elaboración de terapias
para pacientes con dificultad de aprendizaje, Dislexia.
2
5. Evaluar la propuesta de diseño a través de la satisfacción de los usuarios.
3
CAPITULO I
EL PROBLEMA
Planteamiento del problema
Ubicación del problema en un contexto
La interacción entre las personas y las computadoras es un área que ha avanzado en la
búsqueda de aportar aplicaciones con diseños de interfaces interactivas, dinámicos que sean
intuitivas y fácil de usar. En este aspecto, se constata que no es suficiente que las
aplicaciones tengan los aspectos mencionados, más bien, se direccionen en crear
experiencias únicas que intervengan en el comportamiento emocional de las personas.
Bajo este contexto, este apartado está dirigido a grupo de personas que sufren Dislexia
(específicamente niños), como el avance y el desarrollo de la tecnología posibilita brindar
herramientas para superar las dificultades de aprendizaje de la lectura y escritura.
La Dislexia es un trastorno que no desaparece, pero puede tratarse por medio de métodos
de enseñanza y estrategias que ayudan a sobrellevar la condición. Las nuevas tecnologías
hacen hincapié en este asunto ya que a través del tiempo se han convertido en herramientas
fundamentales que facilitan los procesos de aprendizaje.
La falta de personalización de terapias para los niños que presentan dicho trastorno es un
inconveniente de alta gravedad, porque debe estar dirigido en base a las necesidades
específicas del afectado, el tipo de trastorno que padece y a su edad respectiva. Por ello es
primordial crear interés, motivar y llevar a cabo la terapia con actividades previamente
estructuradas.
Herramientas tecnológicas como las plataformas web pueden ser un aliado para tratar las
dificultades en el aprendizaje y más cuando estas están diseñadas bajo la aplicación de
Experiencia de usuario (UX).
(Arias, 2015) Afirma. “La experiencia del usuario se refiere a los esquemas, instrucciones
claras y etiquetas de una página web. El diseño interactivo hará que un usuario entienda
mejor cómo puede interactuar con el sitio” basándose en las necesidades de los usuarios
para el desarrollo de interfaces inclusivas que ayuden a toda la población.
“Una buena navegación por el contenido de un sitio web por parte del usuario, a menudo
depende de la comprensión de los usuarios de cómo funciona el sitio web.” (Arias, 2015).
Factores como navegación clara, párrafos cortos, buscadores, imágenes, música, entre otras.
Son los que se deben tener presente en el desarrollo de una interfaz, esto crea una web
4
accesible y adaptiva para los usuarios con Dislexia, pues, les permite que desarrollen
autonomía, creatividad y expresividad al tener a su disposición infinidad de recursos que les
posibilita educarse.
El no saber que sienten los internautas al usar la plataforma digital genera sentimientos
de desconfianza, frustración e intranquilidad. Debido a que se desconoce qué imagen tienen
los usuarios finales al momento de interactuar con el portal web, sea esta satisfactoria o
negativa. De modo que nuestro planteamiento radica en garantizar la experiencia de usuario
ante el seguimiento evolutivo frente a este trastorno de aprendizaje.
Situación conflictos nudos críticos
Los conflictos de este proyecto surgen de la necesidad de saber que opinan las personas
sobre el producto (plataforma virtual) expuesto a los niños con la condición de Dislexia y a su
vez en el campo profesional de logopedas. Sin embargo, sabemos a quién va dirigido, pero
no conocemos como se sienten ellos al usar el sitio web, dejando la sensación de
incertidumbre al no obtener sus comentarios de cómo se están relacionando. Debido a esto,
es que nuestro proyecto va enfocado al estudio de la aplicación de Experiencia de usuario
con el fin de resolver todas las incógnitas planteadas.
La insatisfacción en los usuarios puede inducir efectos negativos ya que ocasionalmente
se encontrarán con plataformas y/o aplicaciones que puede provocar bajo rendimiento y
productividad, por lo que los desarrolladores deben preocuparse por cubrir las necesidades
de los internautas, para tener efectos favorables al indagar sobre la experiencia que se tuvo
al interactuar.
La cantidad de anuncios o publicidad en los sitios web, reflejándose esto como imágenes,
videos, sms, passbook, ads entre otros; algunos de estos no se pueden pausar o cerrar
mientras se mantiene la interacción o cada vez que se pulsa un botón. Esto causa molestias
al navegar ya que interrumpen y dificultan, impiden que se carguen los datos que uno desea
visualizar provocando incomodidad a los internautas.
Causas y Consecuencias del Problema
Según la investigación de campo de la plataforma web actual se han definido los factores
que influyeron ante la problemática planteada.
5
CUADRO 1. CAUSAS Y CONSECUENCIAS
Causas Consecuencias
Falta de actualización y soporte de la
plataforma web
Contenido repetitivo y limitado de
actividades en el website
Interfaz muy poco amigable para el usuario
final
El sistema web actual cuenta con aspecto
estático.
Diseño web no adaptable para dispositivos
móviles
Limita el consumo de la aplicación web
solo a usuarios que naveguen por
computadoras.
Arquitectura y tecnología muy específicas en
el desarrollo del sistema web
Problemas de compatibilidad con
prestaciones de los servicios de
alojamiento de archivos.
Sistema con escaso grado de intuitivita en su
interacción
Complejidad al momento de interactuar
con los contenidos existentes.
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
Delimitación del problema
CUADRO 2. DELIMITACIÓN DEL PROBLEMA
Campo Salud humana, animal y del ambiente
Área Tecnologías procesos y desarrollo industrial
Aspecto Desarrollo de servicios web
Tema Análisis y Estudio de la aplicación de Experiencia de Usuario (UX) en el
Desarrollo de la Interfaz Gráfica de Usuario de la Plataforma del
proyecto FCI Temonet Fase II de la Universidad de Guayaquil.
Fuente: Datos de Investigación
Elaborado por: Michelle Campaña, Estefania Martillo
6
Formulación del problema
¿Es posible que con las nuevas actualizaciones podrá abarcar a más usuarios con Dislexia
reforzando la usabilidad de la plataforma garantizando una mejor experiencia para el usuario
final?
Evaluación del Problema
Factible: El presente trabajo es viable ya que se tiene los conocimientos básicos y
recursos necesarios para cumplir con desarrollo del prototipo de experiencia de usuario en el
desarrollo de la plataforma ya antes implementada.
Delimitado: El problema planteado se encuentra situado en la provincia del Guayas,
Universidad de Guayaquil. Facultad de Ciencias, Matemáticas y Física, en el 2020. En donde
niños con la condición de Dislexia y logopedas podrán dar a conocer la usabilidad que le dan
a la plataforma digital.
Concreto: Esta propuesta va precisamente enfocada a los usuarios (niños con Dislexia y
logopedas que estudian esta condición) ya que se centra en los resultados de la interacción
que se tiene con la plataforma. De manera que se podrá conocer que sienten los usuarios de
una forma más directa al poder desarrollar la herramienta aplicando los principios de User
Experience
Claro: La plataforma consta con una interfaz amigable por la cual se evidenciará a través
del desarrollo del prototipo, la satisfacción y facilidad que tienen los internautas al usarla.
Relevante: Este prototipo es necesario puesto que puede llegar a demostrar la experiencia
educativa que tienen los usuarios al interactuar con la plataforma con el objetivo de llevar un
control y mejoras sobre las herramientas que usan los niños con Dislexia.
Contextual: Implica tratar la usabilidad y/o experiencia. Debido a que se quiere describir
como las personas experimentan su vida con la plataforma. Para empatizar el interés por los
usuarios, se desarrollará una técnica donde se podrá conocer los resultados de interactividad
y satisfacción de cada uno de ellos.
7
Objetivos
Objetivo General
Analizar y estudiar la aplicación de Experiencia de usuario (UX) en el Desarrollo de la
Interfaz Gráfica de Usuario de la Plataforma del proyecto FCI Temonet Fase II de la
Universidad de Guayaquil.
Objetivos Específicos
1. Identificar las características del diseño de la interfaz de usuario de la fase I del
proyecto TEMONET que deben mejorar para iniciar la fase II.
2. Evaluar las metodologías existentes para la implementación de UX.
3. Analizar los diseños de las aplicaciones tradicionales UI versus las aplicaciones que
utilizan UX.
4. Proponer un diseño de interfaz dedicado a la plataforma de elaboración de terapias
para pacientes con dificultad de aprendizaje, Dislexia.
5. Evaluar la propuesta de diseño a través de una encuesta de satisfacción a los
usuarios.
Alcances del Problema
El presente trabajo de titulación pretende alcanzar mejores prácticas UX con relación a las
personas con condiciones de Dislexia, de tal manera, que éste permita ampliar las
capacidades de la herramienta web TEMONET, por medio de un diseño de interfaz que
consta de tres escenarios, el primer escenario para la parte del administrador. El segundo
escenario para la creación y estructuración de terapias por parte del logopeda, usuario que
estará encargado de modular los recursos de texto, imágenes, audio y video para establecer
actividades inclusivas y accesibles para el usuario. Y el último escenario para el acceso del
paciente con condiciones de dificultad de aprendizaje, a las actividades que se encuentran
previamente creadas y estructuradas en la plataforma.
El diseño de la interfaz web será desarrollado de forma accesible, con la finalidad de cubrir
todas las necesidades de los usuarios mediante factores que ayudan a captar la atención del
usuario y evitan que estos pierdan interés al manejar la plataforma.
No obstante, existen limitaciones como falta de motivación, sentimientos de desconfianza
y frustración que ocasionan la pérdida de interés de los usuarios al momento de manipular
herramientas web. Pero, gracias a la aplicación de UX los internautas con condiciones
cognitivos van a sentir un alto grado de satisfacción y desearán disfrutar ilimitadamente de la
plataforma web, así como cada una de las posibles expansiones y actualizaciones que
8
pudieran salir posteriormente. Por otro lado, si la experiencia no es grata se creará mala
imagen y no van a volver a usar dicho instrumento de aprendizaje.
Todo esto se resume en conseguir una buena experiencia por parte del usuario para captar
su atención e interés, con el fin de que la persona con condiciones de Dislexia desarrolle:
autonomía, creatividad y expresividad al tener a su disposición infinidad de recursos que les
posibilita una educación personalizada
Justificación e Importancia
Se identifica que con la implementación de la UX nos permitirá conocer la experiencia con
la que los niños con Dislexia viven antes, durante y después de interactuar con la plataforma.
Con el estudio se obtendrá estimaciones más precisas, ya que se podrá modificar de una
manera más fácil el diseño inicial de la fase I en caso de ser necesario para incrementar la
satisfacción de los niños que padecen de este trastorno del aprendizaje en lectura.
La importancia de la Fase ll de esta plataforma se basa en el conocimiento de la
experiencia del usuario, siendo necesaria porque permitirá recopilar sus opiniones; para
poder mejorar la herramienta especializada en terapias, presentando información lo más
sintética posible con el fin de conseguir un diseño atractivo e inclusivo, para pacientes con
Dislexia y también como apoyo a los logopedas.
Metodología del proyecto
El presente proyecto tendrá un desarrollo ágil mediante la metodología SCRUM que
consiste en los roles que se designará en el equipo y las practicas que permitirán
colaborativamente lograr las entregas, revisiones y aprobaciones de los procesos de manera
regular para obtener resultados en un tiempo determinado.
El funcionamiento en este proyecto se realizará por medio de los sprints donde se
inspeccionará el progreso del trabajo de este equipo para así poder hacer las adaptaciones
necesarias, reportando cuales fueron los avances e impedimentos, actualizando las listas de
las actividades de la iteración y seguir con los pendientes de forma organizada.
Metodología de desarrollo
Dentro de este proyecto existen parámetros ya definidos para llevar a cabo esta
metodología tales como:
Scrum Master: Es el responsable que se encarga de que las actividades que se
entregan para se adapten tanto a la teoría, practica y reglas de la metodología. Ayuda
9
a personas fuera del equipo dando a conocer que interacción puede ser ventajosa y
cuáles no.
Product Owner: Este puesto lo ocupara el tutor ya que es el encargado de liderar el
equipo, siendo este el encargado de gestionar la lista de actividades para acelerar el
proceso y eliminar obstáculos.
Scrum Team: Este papel lo desempeñaremos el grupo de las tesistas debido a que
está diseñado para entregar tareas de manera frecuente e incremental, agrandando
las oportunidades de adquirir revisiones, retroalimentación y aprobaciones de lo
asignado. Lo enviado asegura que perennemente estará libre una adaptación
potencialmente productiva y funcional. ( Schwaber & Sutherland, 2016)
Supuestos y restricciones
Supuestos
El product Owner y Scrum Team de acuerdo con los horarios establecidos para las
reuniones y pruebas que se den en el transcurso del desarrollo de los capítulos.
Crear una aplicación donde se pueda captar la experiencia de los usuarios.
Utilizar los datos captados por la aplicación en caso de ser negativos, solucionar a
corto plazo.
Agregar contenido multimedia (imágenes, sonidos y videos) para garantizar una
experiencia más gratificante.
Demostrar los resultados del prototipo User Experience en caso de cambios que
beneficien al proyecto como tal.
Restricciones
El periodo de tiempo estimado para la culminación de este proyecto es de cuatro
meses.
Se determinará el alcance del problema de manera clara, sencilla y precisa para
cumplir con cada uno de los objetivos planteados.
El costo que demanda la elaboración de esta tesis no tiene valor alguno más que los
recursos que se tiene a la mano.
10
Plan de Calidad
CUADRO 3. PLAN DE CALIDAD
No. Fecha Actividad Descripción Responsable
1 3/12/2020 Reunión
programada
Reunión con el tutor para
coordinar las fechas de
revisiones.
Estefania
Martillo/Michelle
Campaña
2 4/12/2020 Planteamiento del
problema
Elección de puntos
específicos para determinar
cuáles son los problemas en
nuestra propuesta.
Estefania
Martillo/Michelle
Campaña
3 5/12/2020 Situación conflicto
nudos críticos
Redacción de algunas
situaciones con las cuales se
sustenta el tema planteado.
Estefania
Martillo/Michelle
Campaña
4 6/12/2020 Causas y
Consecuencias del
Problema
Detección de causas al
problema ya redactado.
Estefania
Martillo/Michelle
Campaña
5 6/12/2020
Evaluación del
Problema
Selección de los 6 aspectos
a evaluar.
Estefania
Martillo/Michelle
Campaña
6 7/12/2020 Alcances Definición de las limitantes y
entregables del proyecto.
Estefania
Martillo/Michelle
Campaña
7 8/12/2020 Justificación Respuestas a las preguntas
de importancia donde se
justifica la importancia del
tema.
Estefania
Martillo/Michelle
Campaña
8 8/12/2020 Objetivos Determinación de los
objetivos principales y
específicos.
Estefania
Martillo/Michelle
Campaña
11
9 9/12/2020 Metodología Presentación de la
metodología con la cual se
trabajará mediante los sprint.
Estefania
Martillo/Michelle
Campaña
10 11/12/2020 Marco teórico Inicio del capítulo ll donde se
expondrá las referencias
como campo investigativo.
Michelle
Campaña
11
14/12/2020
a
15/12/2020
Antecedentes Cita de los cinco trabajos con
relación a nuestro tema.
Estefania Martillo
12 19/12/2020
a
22/12/2020
Fundamentación
teórica
Levantamiento del estado
del arte de la Experiencia de
Usuario y ampliación de los
conocimientos.
Estefania
Martillo/Michelle
Campaña
13 23/12/2020 Fundamentación
legal
Sustentación el trabajo de
tesis de acuerdo con los
artículos del COIP.
Michelle
Campaña
14 23/12/2020 Pregunta
científica/variable
Formulación de la pregunta
en base al problema y se
encontró las variables
dependientes/independiente.
Estefania
Martillo/Michelle
Campaña
15
24/12/2020 Feriado de navidad Días no laborables
16 4/01/2021 Feriado de navidad Días no laborables
17 5/01/2021 Corrección de
capítulo I
Realización de las
correcciones de lo indicado
por parte del tutor.
Estefania
Martillo/Michelle
Campaña
12
17 5/01/2021 Reunión con el
Scrum Team.
Inicio del capítulo III Estefania
Martillo/Michelle
Campaña
18 5/01/2021 Revisión de la
plataforma fase l
Análisis del proceso de
Vaadin para la correcta
interacción.
Estefania
Martillo/Michelle
Campaña
19 6/01/2021 Propuesta
tecnológica
Descripción de los aspectos
generales del proyecto.
Estefanía Martillo
20 7/01/2021 Análisis de
factibilidad y
técnico
Determinación del hardware
y software a utilizar; y la
mano de obra técnica.
Michelle
Campaña
21 8/01/2021 Análisis
operacional, legal y
económico
Validación de la parte
operativa de la aplicación, se
comprobará que no se viola
los reglamentos y se realiza
un cuadro de costos.
Estefania
Martillo/Michelle
Campaña
22 11/01/2021
a
12/01/2021
Etapas de
metodología
Cumplimiento de las cinco
fases de Scrum.
Michelle
Campaña
23 13/01/2021
a
19/01/2021
Entregables del
proyecto
Preparación de anexos, tales
como codificación y manual
técnico.
Estefania
Martillo/Michelle
Campaña
24 20/01/2021
a
22/01/2021
Programación de
aplicación UX
Desarrollo de la aplicación. Estefania
Martillo/Michelle
Campaña
25 22/01/2021
a
27/01/2021
Programación de
aplicación UX
Desarrollo de la aplicación,
diseño interactivo en
JavaScript, y componentes
de React.
Estefania
Martillo/Michelle
Campaña
13
26
28/01/2021
a
29/01/2021
Criterios de
aceptación
Comentarios por parte del
tutor y se realiza
correcciones.
Estefania
Martillo/Michelle
Campaña
27 1/02/2021 Recomendaciones,
conclusiones
Redacción de las
recomendaciones en base a
la experiencia ganada y la
conclusión de todo el
proyecto.
Estefania
Martillo/Michelle
Campaña
28 2/02/2021
a
5/03/2021
Desarrollo UX Realización de proceso de
desarrollo operativo.
Estefania
Martillo/Michelle
Campaña
29 9/03/2021 Resultados Demostración de los
resultados del prototipo
Estefania
Martillo/Michelle
Campaña
Fuente: Datos de Investigación
Elaborado por: Michelle Campaña, Estefania Martillo
14
CAPÍTULO II
MARCO TEORÍCO
El presente capítulo detalla las fuentes primarias y secundarias sobre las cuales se
sustenta la investigación y el diseño del estudio realizado. Así mismo amplia la descripción
del problema e integra la teoría con la investigación y los factores que se estudian. Redacta
temas sobre la experiencia del usuario, su importancia y los elementos básicos que contiene.
La dislexia y el desarrollo de interfaces accesibles con relación a la UX, el lenguaje de
programación y todos sus componentes para desarrollar el prototipo de la plataforma web.
De la misma manera, se puntualiza en la fundamentación legal y en las definiciones
conceptuales.
Antecedentes del estudio
Para realizar este proyecto de tercer nivel, se indago en diferentes sitios, desde el
repositorio de la Universidad de Guayaquil, proyectos académicos local y de otros países,
hasta extensas revisiones de artículos científicos, con el fin de recopilar datos necesarios
como fuentes de información y respaldar el tema planteado para validaciones futuras del
mismo. Dejando como sustento trabajos ya existentes para el indicio del estudio propuesto.
Entre las investigaciones y tesis revisadas se mencionan las que tienen mayor similitud y
relevancia a nuestro tema, se citan los siguientes:
El título del proyecto llamado “Análisis de la interfaz de usuario y la experiencia del
usuario en la aplicación Conrades”. (Nomor, 2018) El creador de esta propuesta realizada
manifiesta que su propósito fue realizar el estudio de la interfaz de la aplicación Conrades,
debido a que los usuarios les atrae el diseño. La investigación de esta propuesta fue realizada
mediante el uso de flujos de usuario donde describieron los problemas experimentados,
debido a esto los autores optaron por usar un mapa de experiencia para generar
recomendaciones y de esa manera mejorar el sitio web ya existente.
Un proyecto donde muestra el uso de la experiencia de usuario en plataformas o productos
desarrollados se refleja en el reporte de la investigación: “Estudio de usabilidad en la una
propuesta de sitio Web basado en el diseño de la experiencia del usuario.” (Hidalgo
León & Venero Escobar). Los autores expresan que el propósito del proyecto se obtuvo a
partir de una comparación del sitio web original con la aplicación del Diseño de la Experiencia
de Usuario, donde se optimizo la usabilidad del portal web. De tal manera, que los creadores
tuvieron que estudiar los elementos y aspectos de la UX, para conocer las necesidades de la
Institución propietaria del sitio y de sus suscriptores. Posteriormente de haber analizado la
situación, crearon un prototipo viable donde apreciaron mejoras a través de un instrumento
15
basado en la usabilidad, dando de resultado la facilidad de lectura y retroalimentación de los
estudiantes.
En el informe técnico con el siguiente título “Modelo de evaluación de experiencia de
usuario para Repositorios Institucionales” (González Pérez, Ramírez Montoya, & García
Peñalvo, Salamanca) los autores resaltan el aporte científico en el área del conocimiento con
respecto a la relación que tiene el repositorio institucional con los usuarios, utilizando una
metodología llamada DCU. La cual consiste en técnicas cualitativas y cuantitativas para la
recaudación de datos, centrándose en los que utilizaron, buscaron y depositaron recursos el
repositorio. En una de las fases para alinear la funcionalidad de su prototipo, los diseñadores
y programadores de manera sistematizada implementaron alternativas tecnológicas y
educativas en contextos de uso donde se involucró estrategias y personas para llevar a cabo.
Dándoles como resultados la medición de experiencia, el seguimiento, tendencias, evaluación
de los nuevos requerimientos y retroalimentación sobre lo que se publica.
En el estudio realizado con el siguiente título “El diseño de ofertas de información
basada en la experiencia de usuario” (Paz Enrique, Hernández Alfonso, Tamayo Rueda, &
Frías Guzmán, 2016). Los autores analizaron los aspectos que se consideró para el prototipo
y necesidades. Ellos plantearon como objetivo el estudio de la identificación de las
características de los asociados de la organización y el diseño de una oferta de información
Web para la filial de la Asociación de Bibliotecarios Cubana ubicado en Villa Clara a partir de
lo indagado. Se emplearon métodos en los niveles tanto teórico como empírico para la
recopilación de información, la facilidad de la identificación de las fuentes que usualmente se
emplean para la publicación de artículos, las consultas de información, la investigación
científica y las temáticas de investigación fundamentales.
16
Fundamentación teórica
EXPERIENCIA DE USUARIO
Existen un sinnúmero de definiciones para Experiencia de Usuario por profesionales en
UX, pero para efecto del estudio se detallan dos: La User Experience Professionals
Associatons (UXPA), la define como “Componentes de la interacción entre el usuario y el
producto o servicio. Ellos indican que el diseño es esencial; ya que es una disciplina donde
se sigue un patrón para coordinar todos los elementos que constituyen la interfaz, donde se
incluye los efectos visuales, textos, imágenes, audios y sobre todo la interacción.” (UXPA,
2020)
Los autores (Norman & Nielsen, 2016) indican que, “La UX está conformada por factores
y elementos modelados a la interactividad del internauta con su GUI o dispositivos
específicos, en donde los resultados es la descendencia de una percepción positiva o
negativa del producto lanzado”.
Dichas definiciones tienen en común que involucran y tratan el término percepción, que
no solo se refiere a los factores relativos con el diseño (hardware, software, usabilidad,
accesibilidad, diseño gráfico, etc.) sino también a los aspectos vivenciales, afectivos,
emocionales, significativos y valiosos de la interacción humano-computadora. Además,
elementos fundamentales como accesibilidad, usabilidad, utilidad y eficiencia del sistema.
HISTORIA Y ANTECEDENTES
El concepto de experiencia de usuario comienza a usarse a principio de los 80s con el
modelo de metas, operadores, métodos y reglas de Card, Moran y Newel, a partir de la idea
que la aceptación tecnológica de un producto depende del valor cognitivo y emotivo que un
usuario asigna al proceso de interacción con el sistema. Desde este punto de vista, el modelo
GOMS (Goals, Operators, Methods, Selection), fue el primero en plantear una serie de
métodos para medir las prestaciones de productos tecnológicos a partir del cumplimiento de
metas por parte del usuario cuando utilizaba el sistema. (Córdoba, 2015) Afirma que “El
modelo GOMS se centró exclusivamente en medir las tareas funcionales del sistema debido
a los requerimientos metodológicos que en ese entonces necesitaba el estudio de la
interacción humano-computador.”
Continuando con esta misma línea de investigación, durante los primeros años de la
década de los 90s el trabajo de Jacob Nielsen relacionado a los test de usuarios sobre
usabilidad, que hace referencia a la eficacia, eficiencia y satisfacción con la que un producto
permite alcanzar objetivos específicos a usuarios específicos.
17
Se puede observar que las dos propuestas anteriores se centran en la consecución de
objetivos por medio de la recolección de información del proceso cognitivo de interacción.
“Durante años, la evaluación de la usabilidad de los sistemas por parte de los usuarios ha
sido el primer ámbito de investigación en Experiencia de usuario”. (Córdoba, 2015). Este
criterio es ante todo de carácter cognitivo, lo cual significa una ventaja para determinar la
eficiencia del sistema.
IMPORTANCIA
El diseño y aplicación de la experiencia del usuario en entornos web, es de suma
importancia para la comprensión por parte de los usuarios de cómo funciona un sitio o una
plataforma web. “Los sitios web fáciles de usar son más demandados y más usados, permiten
un aumento en la prevención de errores y reducción de abandonos”. (Liberos, y otros, 2015)
En otras palabras una buena experiencia de usuario causa mayor satisfacción, más
fidelización y aumento de beneficios.
ELEMENTOS DE LA EXPERIENCIA DE USUARIO
El modelo “Elementos de la Experiencia del usuario” expuesto por Jesse James Garrett
en 2011, consta de 5 planos y cada uno funciona como un subproceso donde se tienen que
completar una serie de pasos. (Rodriguez, y otros, 2019)
Cada plano cuenta con las dimensiones de funcionalidad e información y se leen de abajo
hacia arriba.
Estrategia. Incluye no solo lo que los usuarios que ejecutan el sitio o aplicación web
quieren lograr, sino busca alcanzar el propósito para el cual fue creado.
Enfoque. En este plano se definen las características del sitio o aplicación que se
requieren entregar al usuario y hasta donde quiere alcanzar en relación de los contenidos
para cumplir los objetivos.
Estructura. En este plano se detalla cómo se van a organizar las funciones y la
información del sitio o aplicación
Esquema. Una vez organizada las funciones, se distribuyen visualmente para la
percepción del usuario
Superficie. En este plano, el usuario va a percibir finalmente la interfaz del sitio o
aplicación y se definirá en base a su experiencia y satisfacción.
18
GRÁFICO 1. LOS ELEMENTOS DE LA EXPERIENCIA DE USUARIO
Fuente: https://www.hint.mx/
Elaborado por: HINT
ASPECTOS IMPORTANTES PARA MEJORAR LA UX
DISEÑO DE INTERFAZ DE USUARIO, UI
El diseño de la interfaz de usuario (UI) es el proceso que utilizan los diseñadores para
crear interfaces en software o dispositivos informáticos, centrándose específicamente en la
apariencia o el estilo. El principal objetivo de los diseñadores es crear interfaces que los
usuarios encuentren agradables y fáciles de usar.
(Interaction Design Foundation, 2020) Afirma que “Para diseñar mejor las interfaces de
usuario, se debe considerar: Los usuarios juzgan los diseños rápidamente y se preocupan
por la usabilidad y simpatía, las UI también deberían ser agradables o al menos satisfactorias
y sin frustraciones, las interfaces de usuario deben comunicar los valores de la marca y
reforzar la confianza de los usuarios”. En resumen, el diseño de interfaces de usuario debe
brindar facilidad de uso, ajustar las mejores UI para brindar diseños divertidos, y permitir que
los usuarios asocien los buenos sentimientos con las marcas para mantener experiencias
perfectas, placenteras y fluidas.
USABILIDAD
(González & Farnós, 2015). Afirma que “La usabilidad es la medida del grado de facilidad
en el uso de un tipo de producto y del tipo de satisfacción que genera ese uso en el usuario”.
En otros términos, se entiende que un buen ambiente web debe provocar interés del usuario
19
por los contenidos ofertados, por su facilidad de uso y comprensión, y por el grado de
satisfacción del usuario.
La usabilidad es un componente de diseño de Experiencia de usuario UX. Según (Norman
& Nielsen, 2016) “La usabilidad es el segundo nivel de experiencia del usuario” Es decir, que
viene después de la utilidad y antes de la deseabilidad y la experiencia de marca.
La usabilidad de un diseño depende de que las características se adapten a las
necesidades de los usuarios. Por lo tanto (Interaction Design Foundation, 2020) declara que
“La usabilidad del diseño debe contener estos elementos: eficacia, eficiencia, compromiso,
tolerancia a errores y facilidad de aprendizaje”.
Donde:
1. Eficacia: Los usuarios reciben ayuda en la realización de acciones con precisión.
2. Eficiencia: Los usuarios pueden realizar tareas de manera rápida mediante procesos
sencillos.
3. Compromiso: Los usuarios los encuentran agradable y apropiado de usar.
4. Tolerancia a errores: Admite acciones del usuario y solo muestra un error en situaciones
erróneas genuinas.
5. Facilidad de aprendizaje: los nuevos usuarios pueden lograr sus objetivos con facilidad
y aún más fácilmente en futuras visitas.
GRÁFICO 2. ELEMENTOS DE LA USABILIDAD DEL DISEÑO
Fuente: https://www.interaction-design.org/about
Elaborado por: Interaction Design Foundation
20
ACCESIBILIDAD
(González & Farnós, 2015). Afirma que “La accesibilidad es la posibilidad de acceso,
específicamente a que un diseño pueda ser de fácil uso y posibilite el acceso a todos los
usuarios indistintamente de las limitaciones que puedan presentar cada uno de ellos, tal como
discapacidades, dominio de idiomas o también limitaciones enfocadas al uso de hardware y
software, etc.”. En resumen, la accesibilidad se centra en lo fácil o difícil que es acceder a los
contenidos ofrecidos, al máximo rango posible de usuarios, incluyendo a personas con algún
tipo de discapacidad o dificultad especial.
Según las pautas de Web Accessibility Initiative (WAI) o en español, Iniciativa para la
Accesibilidad Web, para que un entorno web sea accesible debe contener un entorno
fácilmente comprensible y navegable. El contenido debe ser claro, con lenguaje simple y con
mecanismos obvios de navegación para moverse entre las páginas.
GRÁFICO 3. ACCESIBILIDAD
Fuente: https://www.eniun.com/diseno-desarrollo-webs-accesibles-accesibilidad-web/
Elaborado por: Enium Diseño web y Marketing Digital
INTERACCIÓN HOMBRE-COMPUTADORA (HCI)
La interacción humano-computadora (HCI), es el estudio de la interacción entre el ser
humano, las computadoras y las tareas que se desarrollan. (Martinez de la Teja, 2015)
Considera que “Existe cuatro componentes principales en un sistema hombre-computadora:
usuario, sistema de computadora, tareas y ambiente”.
Principalmente se enfoca en conocer como las personas y las máquinas pueden
interactuar por medio de interfaces. La ergonomía en HCI se enfoca a buscar los aspectos
de diseños en los sistemas computacionales para que tengan un uso más efectivo y eficiente.
21
HCI es un campo amplio que incorpora áreas como DCU, UI y UX. En varios aspectos,
HCI es conocido como el precursor de diseño de Experiencia de usuario. A pesar de eso, se
mantienen algunas diferencias entre el diseño de HCI y UX. (Interaction Design Foundation,
2020) Afirma que “Los practicantes de HCI tienden a estar más enfocados académicamente,
participan en la investigación científica y desarrollan la comprensión empírica de los usuarios.
Por el contrario, los diseñadores de UX casi siempre se centran en la industria y participan
en la creación de productos y servicios”. Por lo tanto, las consideraciones prácticas de los
productos tienen vínculos directos con los hallazgos de los especialistas en HCI sobre la
mentalidad de los usuarios
GRÁFICO 4. INTERACCIÓN HOMBRE-COMPUTADORA
Fuente: https://www.w3computing.com/systemsanalysis/understanding-human-computer-
interaction/
Elaborado por: W3computing.com
DISEÑO CENTRADO EN EL USUARIO (DCU)
El diseño centrado de usuario (DCU) es una aproximación al diseño de productos y
aplicaciones que sitúa al usuario en el centro de todo proceso. En términos de proceso, el
DCU involucra al usuario en todas las fases a lo largo de las que se desarrolla un producto,
desde su conceptualización hasta su evaluación, incluyendo su desarrollo.
El diseño de UX está centrado en el usuario, dado que, diseñar para usuarios humanos
también significa que se debe trabajar con un mayor alcance en cuanto accesibilidad y
adaptarse a las limitaciones físicas de muchos usuarios potenciales, como la lectura de textos
pequeños.
22
Según (Interaction Design Foundation, 2020) “Los diseñadores de UX trabajan en algún
tipo de proceso de trabajo centrado en el usuario y siguen canalizando sus esfuerzos mejor
informados hasta que abordan todos los problemas relevantes y las necesidades de los
usuarios de manera óptima.” Es decir, que se adquiere la comprensión de los usuarios y su
contexto como punto de partida para todo el diseño y desarrollo de los trabajos UX.
GRÁFICO 5. PROCESO DE TRABAJO CENTRADO EN EL USUARIO
Fuente: https://www.interaction-design.org/literature/topics/ux-design
Elaborado por: Michelle Campaña, Estefania Martillo
DISEÑO DE INTERFAZ DE USUARIO FRENTE A EXPERIENCIA DE USUARIO
A menudo, existe la confusión entre diseño UI y diseño UX, el diseño de interfaz de usuario
se preocupa más por la superficie y visualización general de un diseño, a diferencia de diseño
UX que cubre todo el espectro de las emociones del usuario. A continuación, se presenta una
tabla que detalla el contraste y relación entre UI y UX:
CUADRO 4. DISEÑO DE UI VS DISEÑO DE UX
DISEÑO UI DISEÑO UX
Diseño de la interfaz que puede ser grafica
o desarrollada por tecnologías como HTML,
CSS, YUI o jQUERY
Usabilidad que tiene cierto sitio web desde
la perspectiva del usuario que lo visita.
Ocupa la parte más estratégica Ocupa la parte mecánica de todo el proceso
23
Selección y distribución de los elementos de
la interfaz.
Contenido útil para transmitir la imagen
deseable de la marca.
Permite guiar a los usuarios por la
navegación y los llevara a tomar acciones de
manera natural.
Es la sensación del usuario después de la
navegación.
Características: Razón
Diseño de interacción (cómo responde el
sistema)
Guías de interacción (estados del
sistema)
Diseño de elementos (botones,
formularios)
Diseño visual (iconos, imágenes)
Guías de estilo (paletas de color, Fonts)
Características: Emoción
Diseño satisfactorio
Diseño usable
Diseño intuitivo
Diseño accesible
Diseño y mejora de la apariencia de las
páginas con las cuales el usuario
interactuará.
Investigación sobre el usuario
Arquitectura de la información
Diseño de la interacción
Test de usabilidad
Estrategias de contenido
Fuente: https://racimo.usal.edu.ar/5436/1/completa.pdf
Elaborado por: Michelle Campaña, Estefania Martillo
En conclusión, UX y UI deben ser dos aspectos de diseño y desarrollo web que avancen
de la mano y ser complementarios en todo momento, para que uno funcione, el otro deberá
hacerlo a su manera. Ambos son elementos fundamentales para el éxito integral y sostenido
de un producto, plataforma o sistema.
METODOLOGÍA PARA LA IMPLEMENTACIÓN DE UX EN EL DISEÑO
DE INTERFACES DE USUARIO
Según (Attach Media, 2021) Afirma que “Hay dos formas de enfocar las etapas de
desarrollo de un producto digital: lineal e iterativa. La forma lineal consiste en pasar
24
secuencialmente por las cuatro etapas, mientras que en el enfoque iterativo se van haciendo
repeticiones del propio ciclo hasta lograr el producto deseado”.
GRÁFICO 6. ENFOQUES DE LAS ETAPAS DE DESARROLLO DE UN PRODUCTO DIGITAL
Fuente: https://attachmedia.com/guia-ux/
Elaborado por: Attach media
Para lograr un trabajo exitoso en UX, es necesario tener un esquema de trabajo que nos
permita identificar y no omitir ninguna de las etapas necesarias. Por ello, se tomó la decisión
de utilizar el enfoque iterativo, puesto que, está condicionado a las necesidades del proyecto
Etapa 1: Investigación
En esta etapa se trata de obtener la mayor cantidad de información necesaria para el
proyecto a realizar, acerca de los usuarios y pacientes que van a usar la plataforma. Las
actividades que se realizan en esta etapa son:
CUADRO 5. ETAPA 1: INVESTIGACIÓN
Actividades Descripción
Definir escenarios Existen tres escenarios:
Administrativo
Enseñanza
Aprendizaje
Estudio del contexto Experiencia de usuario
25
Definir perfiles de usuarios Administrador
Logopeda
Paciente
Estudio de usuarios Logopeda: Persona especialista en el
estudio, prevención, detección, evaluación,
diagnóstico y tratamiento de los trastornos
de la comunicación humana.
Paciente: Persona que presenta dificultad
de aprendizaje en la lectura y escritura
Investigar sus necesidades Logopeda: Disponer de una plataforma que
le permita elaborar terapias con actividades
para el tratamiento de la Dislexia
Paciente: Disponer de una herramienta
inclusiva, intuitiva y de fácil uso para el
tratamiento de su condición cognitiva.
Definir la intensión comunicativa del
producto
La intención del producto es facilitar una
herramienta que posea aspectos de
usabilidad, interactividad y dinamismo para
satisfacer las necesidades de los usuarios
finales.
Definir las características del contexto de
uso
Tecnológicas y pedagógicas
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
Etapa 2: Organización
En esta etapa se organiza toda la información previamente obtenida. Las actividades que
se realizan en esta etapa son:
26
CUADRO 6. ETAPA 2: ORGANIZACIÓN
Fuente: https://attachmedia.com/guia-ux/
Elaborado por: Attach media
Etapa 3: Prototipado
Durante esta etapa se plasman lo aplicado en la etapa anterior, ahora con todos los
requerimientos técnicos con la finalidad de que sean comprendidos por usuarios, pacientes,
y el resto del equipo de trabajo. Las actividades que se realizan en esta etapa son:
GRÁFICO 7. ETAPA 3: PROTOTIPADO
Fuente: https://attachmedia.com/guia-ux/
Elaborado por: Attach media
Etapa 4: Pruebas
En esta etapa, se comprueba la propuesta en prototipo y si se han logrado los objetivos
planteados. En esta etapa se realizan las siguientes actividades:
27
GRÁFICO 8. ETAPA 4: PRUEBAS
Fuente: https://attachmedia.com/guia-ux/
Elaborado por: Attach media
Etapa 5: Diseño
En esta etapa final, se define la iconografía, tipografía y estilo de diseño final. Las actividades
que se realizan en esta etapa son:
GRÁFICO 9. ETAPA 5: DISEÑO
Fuente: https://attachmedia.com/guia-ux/
Elaborado por: Attach media
DIFICULTAD DE APRENDIZAJE (DISLEXIA) Y EL DISEÑO DE LA
INTERFAZ WEB
Para la OMS, Organización Mundial de la salud. “La Dislexia es un trastorno cognitivo,
cuyo rasgo principal es la dificultad en el desarrollo de las habilidades para la lectura y la
escritura que no puede explicarse únicamente por la edad mental, discapacidades visuales,
o un bajo rendimiento escolar”. (OMS, Organización Mundial de la Salud, 1997)
La dislexia es un trastorno del aprendizaje caracterizado por la dificultad en la lecto-
escritura en niños y niñas con un coeficiente intelectual normal. Generalmente es un problema
habitual que afecta al 10% o 15% de la población, específicamente niños, que influye en el
fracaso escolar, especialmente si no se trata en edades tempranas. Por lo tanto, es clave
tener en cuenta a esta población y a sus necesidades al momento de diseñar una web
28
inclusiva. Es importante conocer que la dislexia puede conllevar una dificultad con la escritura,
lectura, números, fonética y la organización.
Un grupo de ingenieros dedicados al diseño, programación y desarrollo de aplicaciones
web declara que. “Es importante tener en cuenta ciertos factores de diseño para interfaces
web adaptadas para cada usuario que presente Dislexia”. (Imaginanet S.L., 2020).
A continuación, se presenta una tabla que detalla los factores que deben considerarse
para que un diseño de interfaz web sea accesible e intuitivo y sobre todo mejore la Experiencia
del usuario o UX.
CUADRO 7. FACTORES PARA MEJORAR LA EXPERIENCIA DE USUARIO
FACTORES DESCRIPCIÓN
Navegación clara Fuentes limpias, acompañadas de iconos
básicos, cambios de fuentes desde el
navegador o crear su propia hoja de estilo.
Párrafos cortos y concisos Información sintética y dar opcion a la
navegación por temas.
Justificación de textos Mantener textos justificados a la izquierda,
para facilitar la lectura de los contenidos.
Canales Múltiples Información en distintos formatos: video,
texto, voz.
Plantilla única y limpia Plantilla única o layout consistente.
Imágenes y música Evitar imágenes detrás del texto o música
que suene por defecto.
Fuente: www.imaginanet.com/accesibilidad-para-usuarios-con-dislexia.html
Elaborado por: Michelle Campaña, Estefania Martillo
PAUTAS DE ACCESIBILIDAD POR DIFICULTAD COGNITIVA O DE
APRENDIZAJE
Para que un diseño sea accesible, intuitivo, dinámico e inclusivo es importante seguir las
diferentes pautas para mejorar la Experiencia del usuario (UX) a partir de sus necesidades.
29
El desarrollo de la interfaz de la plataforma que conforma el presente proyecto de titulación
está basado en pautas que han sido estructuradas en 3 partes que se muestran a
continuación:
PAUTAS GENERALES
Diseño atractivo, es importante para llamar la atención de los usuarios.
Navegación en jerarquía, lineal con jerarquía.
Botones grandes y estética similar.
Lenguaje simple, directo y visible.
Enlaces claros y sencillos.
Título y etiquetado en jerarquía.
Elementos de interfaz e interacciones similares.
Menú fijo, puede ayudar a mantener una navegación ágil.
PAUTAS SOBRE EL TEXTO
Espaciado entre caracteres de una palabra
Interlineado 1.5
Ancho de columna
Oraciones cortas
Tipos de fuente: OpenDislexy tipografía diseñada específicamente para Disléxicos
Números escritos como números
Colores de texto (combinaciones legibles) con fondos claros
Aumento del tamaño de texto
PAUTAS SOBRE LA NAVEGACIÓN
Lectura fácil y entendible
Uso de escala de grises para el background
Variaciones de colores
Uso de palabras de fácil comprensión
Uso de imágenes interactivas
Uso de audio, canciones y narraciones
Uso de videos
Presentación visual (sin justificación de texto ni desplazamiento horizontal)
Asimismo, es importante recomendar los factores que se deben evitar y que pueden influir
de manera negativa en el diseño de una interfaz web.
30
Evitar el uso de scroll
Evitar temas con sonidos de fondo
Palabras complejas o tecnicismos
Evitar el texto justificado (centrado o a la derecha)
Evitar animaciones que puedan distraer al usuario
Muchos desarrolladores no siguen las sugerencias de accesibilidad y diseño, por lo tanto,
gran parte de usuarios experimentan dificultades innecesarias al tratar de utilizar sus diseños
y disfrutar del contenido. De tal manera, cierto grupo de usuarios no pueden utilizar el sitio o
plataforma de manera efectiva.
LENGUAJE DE PROGRAMACIÓN PARA EL DESARROLLO DE
INTERFACES
Existen diversos lenguajes que nos permiten desarrollar interfaces web y que pueden
adaptarse a todas las opciones de diseño. Luego de indagar y comparar entre varios
lenguajes, se ha llegado la conclusión de usar JavaScript, puesto que, permite la creación de
software interactivo acoplándose a las necesidades de diseño del presente proyecto de
titulación.
JAVASCRIPT
JavaScript es un lenguaje de programación creado por Netscape y está orientado a
objetos, tiene la finalidad de integrarse en HTML y CSS para facilitar la creación de páginas
interactivas sin la necesidad de utilizar Scripts de GGI o java. (Orós, 2015) Indica que “Está
diseñado para el desarrollo de aplicaciones cliente-servidor a través de internet”. Gracias a
este lenguaje es posible desarrollar programas que se ejecuten directamente en el navegador
(cliente) de manera que este pueda efectuar determinadas operaciones o tomar decisiones
sin necesidad de acceder al servidor.
La gran ventaja de JavaScript es el dinamismo que le ofrece a las páginas, antes con el
uso de HTML, lo único que se podía hacer era poner fotos, texto, sonido y alguna cosa más
pero todos esos objetos de manera estática, a diferencia de este lenguaje que brinda dar más
movimiento a una página web y lograr una verdadera interactividad con los usuarios, una
característica que todos buscan en internet.
31
GRÁFICO 10. LOGO DE JAVASCRIPT
Fuente: https://okhosting.com/resources/uploads/2019/01/tendencias-javascript-2019.png
Elaborado por: Chris Williams
ESTRUCTURA DEL LENGUAJE JAVASCRIPT
(INOVACIÓN Y CUALIFICACIÓN, 2001) Afirma que “El lenguaje JavaScript está
constituido en base a tres bloques particulares” A continuación se enlista los elementos que
componen al lenguaje de programación orientado a objetos:
Variables: Tipos de datos: números, lógicos, cadena de caracteres y el tipo nulo.
Objetos: Contenedor dado para una colección de propiedades.
Funciones: Procedimientos que una aplicación puede ejecutar.
Así mismo, consta de otros elementos principales como:
Operadores: Permiten calcular o comparar valores.
Expresiones: Combinación de variables, operadores y declaraciones.
Sentencias: Toman la forma de condicional, bucle o manipulaciones del objeto.
CARACTERÍSTICAS DE JAVASCRIPT
Es un lenguaje de guiones, es decir, no pueden satisfacer las necesidades de todos los
usuarios, para compensar este pequeño detalle, es común dejar que el usuario
personalice un programa con pequeños guiones (Scripts).
JavaScript está basado en objetos, intenta repartir en un programa una colección de
partes individuales que realizan funciones diferentes y no como una sucesión de
declaraciones que ejecutan una tarea específica.
32
JavaScript maneja eventos, nos indica que durante el tiempo que el usuario visualice la
página con el script en cuestión, el lenguaje podrá reaccionar ante cualquier evento que
se le indique.
JavaScript es independiente de la plataforma, puede ser ejecutado en cualquier
plataforma, el único límite seria la versión y el tipo de browser.
VENTAJAS DE UTILIZAR JAVASCRIPT
Existen decenas de framework o implementaciones que utilizan JS y a pesar de su
facilidad, hay muchas ventajas que brinda JavaScript, entre ellos se destacan los siguientes:
1. Lenguaje sencillo y a su vez poderoso
2. Cuando está integrado en los motores web, ejecuta rápidamente su sintaxis
3. Está integrado en los navegadores web más populares
4. Es versátil para el desarrollo web dinámico y aplicaciones móviles
5. Es multiplataforma, se adapta en computadoras, tablets, móviles y hardware.
6. Elimina el peso adicional que un framework genera disminuyendo el consumo de ancho
de banda.
7. Se relaciona de modo fluido y transparente con HTML y CSS
HTML
“HiperText Markup Language o en español Lenguaje de Marcas de Hipertexto es un
lenguaje de etiquetas que definen elementos que componen una página web: texto,
imágenes, símbolos, etc. Dichas etiquetas son interpretadas por un navegador web que
mostrara adecuadamente la página web al usuario” (Celaya Luna, 2019).
Una de las grandes ventajas de HTML, es que no se limita a ser un lenguaje que solo
permiten definir elementos básicos, si no que combina nuevas etiquetas de lenguaje HTML,
propiedades CSS, JavaScript y algunas otras tecnologías. Todas ellas consideran una
actualización de gran potencia al conjunto de herramientas ya existente, y se pueden crear
páginas web más sofisticadas y útiles.
CSS
“Cascading Style Sheets u Hojas de estilo en cascada, es un lenguaje de programación
muy parecido a HTML que permite aplicar estilos a los distintos elementos de las páginas
web, de modo que los títulos, listas y párrafos pueden verse igual en todas y cada una de las
páginas.” (Celaya Luna, 2019).
33
El uso de CSS ofrece propiedades para ampliar el lenguaje HTML en la representación
visual de las páginas web, puesto que, contiene muchas características y métodos con los
que puede proporcionar elementos ópticos de navegación o un tipo de representación
alternativa conforme a los deseos y necesidades del usuario o grupos de usuarios.
TECNOLOGÍAS PARA EL DESARROLLO DE LA PLATAFORMA WEB
REACT
A lo largo de la realización de este proyecto de tesis se ha optado por basarse
especialmente en una de las tecnologías más actuales para el desarrollo de la parte del lado
del cliente de la aplicación: React.
“React es una librería de JavaScript declarativa, eficiente y flexible para construir
interfaces de usuarios. Permite componer IUs complejas de pequeñas y aisladas piezas de
código llamada componentes”. (Facebook Inc., 2021)
React es una librería de código abierto que facilita la creación de interfaces de usuarios
interactivas de manera sencilla, su característica más significativa es el diseño de vistas
simples para cada estado en la aplicación, esto produce que el código sea más predecible y
fácil de depurar. Como función principal, React se encarga de actualizar y renderizar de
manera eficiente los componentes correctos cuando los datos cambien. Es decir, que toma
los cambios en los datos traduciéndolos en cambios de la vista para que aparezcan en el
navegador del cliente.
GRÁFICO 11. LOGO DE REACT
Fuente: https://www.pngwing.com/en/free-png-yefeo
Elaborado por: Facebook Inc.
34
API DRAG AND DROP
Drag and drop “Es la acción de tomar un elemento manteniendo el clic del ratón sobre él,
desplazarlo y soltar el clic para terminar sobre otro elemento” (Antonio, 2015). Esta
funcionalidad permite al usuario mover un componente de la página web, manteniendo el
botón del ratón pulsado, y depositarlos en otro lugar soltando el botón del ratón.
El beneficio de usar este API es que permite una interacción con el usuario ocasionando
un efecto gráfico agradable, además es una parte integral de la mayoría de las aplicaciones
actuales. Los casos de uso más comunes para arrastrar y soltar en React incluyen:
Subiendo archivos de imágenes soltándolos en el navegador Biblioteca: react-dropzone
Mover elementos entre varias listas
Reorganización de imágenes
API DRAGGABLE
Envuelve un elemento existente y lo amplia con nuevos estilos y controladores de eventos.
Los elementos que se pueden arrastrar se mueven mediante transformaciones CSS, esto
permite que los elementos se arrastren independientemente de su posición actual sea esta:
relativa, absoluta o estática. Los elementos también se pueden mover entre arrastres sin
incidentes
YARN
Se ha utilizado Yarn para manejar las dependencias de nuestro proyecto. Yarn es un
instalador de paquetes y gestor de dependencias promovido por Facebook, google entre
otros, creado específicamente para JavaScript. Hace competencia a NPM, que es el más
usado en la comunidad. Sin embargo, obtenemos mejoras de rendimiento y seguridad frente
a él.
REACT REDUX
“React Redux es el enlace oficial de React para Redux. Permite a sus componentes React
leer datos de una tienda Redux y enviar acciones a la tienda para actualizar los datos” (Dan,
2015)
Instalación
Npm instalar react-redux o Hilo añadir react-redux
Características
35
Oficial: React Redux es mantenido por el equipo de Redux y se mantiene actualizado
con las últimas API de Redux y React .
Previsible: Diseñado para trabajar con el modelo de componentes de React . el
desarrollador tiene la posibilidad de definir cómo extraer los valores que su
componente necesita de Redux, y su componente los recibe como accesorios.
Encapsulado: Crea componentes de envoltura que administran la lógica de
interacción de la tienda por el desarrollador, para que no tenga que escribirla.
Optimizado: Implementa automáticamente complejas optimizaciones de rendimiento,
de modo que su propio componente solo se vuelva a procesar cuando los datos que
necesita realmente hayan cambiado.
API de HOOKs
useSelector()
“Permite extraer datos del estado de la tienda Redux, utilizando una función de selector.
Se llamará al selector con todo el estado de la tienda Redux como único argumento. El
selector se ejecutará siempre que se procese el componente de función (a menos que su
referencia no haya cambiado desde una representación anterior del componente, de modo
que el gancho pueda devolver un resultado almacenado en caché sin volver a ejecutar el
selector). UseSelector() también se suscribirá a la tienda Redux y ejecutará su selector cada
vez que se envíe una acción” (Dan, 2015).
NODE.JS
Para el desarrollo del lado del servidor se ha utilizado Node.js, que es un entorno de
ejecución para JavaScript en el servidor a partir del motor V8 de renderizado de JavaScript
que utiliza el navegador Chrome. Su característica principal es que facilita la creación de
aplicaciones de servidor altamente escalables.
Con Node.js “Podemos generar desde pequeños módulos, hasta aplicaciones completas,
ya que node.js permite manejar cientos de miles de conexiones concurrentes; así mismo por
la manera en que node.js está implementado, es totalmente adecuado para lo que tiene que
ver con intercomunicación a gran escala, como aplicaciones de mensajería, juegos
multijugador, hasta el “cloud computing“o “computación en la nube” y las aplicaciones en
tiempo real, el cual es el tema de énfasis en esta ocasión”. (Gracia, 2014)
Uno de los motivos más significativos al escoger Node.js, es por su utilización para
aplicaciones realtime, ya que necesitan una conexión constante entre el cliente y el servidor.
36
Es útil, especialmente cuando se van a realizar operaciones de manera simultánea, sobre
todo en operaciones de entrada y salida.
GRÁFICO 12. LOGO DE NODE.JS
Fuente: https://nodejs.org/es/about/resources/
Elaborado por: Node.js Authors
GIT Y GITHUB
“Git es un software de control de versiones diseñado por Linus Torvalds, gracias a este
software se puede gestionar código fuente de una manera más eficiente (por ejemplo, ficheros
HTML o PHP, documentación, etc.)” (Cristóbal, 2016). De esta manera, siempre que exista
cambios en el código fuente se podrá llevar un seguimiento de todas las modificaciones, con
la finalidad de utilizar esa información para trabajar de una manera más eficaz, estar al tanto
de los cambios que se realizaron, cuando localizar dichos cambios y volver a las versiones
anteriores.
GRÁFICO 13. LOGO DE GIT
Fuente: https://vabadus.es/blog/otros/primeros-pasos-con-git
Elaborado por: Jason Long
Además de las tecnologías descritas anteriormente también se han utilizado servicios en
línea para un mejor desarrollo y metodología de trabajo. “GitHub es una plataforma de
desarrollo que permite alojar proyectos siguiendo el control de versiones de Git, el código se
37
almacena de forma pública” (Cristóbal, 2016). No obstante, si se desea mantenerlo de forma
privada es necesario adquirir una cuenta de pago.
GRÁFICO 14. LOGO DE GITHUB
Fuente: https://github.com/logos
Elaborado por: GitHub, Inc.
ARCHIVO JSON
JSON, JavaScript Object Notation. “Es un estándar para enviar y recibir datos entre un
servidor y el navegador, que puede utilizarse para el intercambio entre dos aplicaciones, una
aplicación, o dentro de una aplicación del lado del cliente.” (Aguirre, 2020). Una gran ventaja
de JSON es que se puede trabajar desde distintos lenguajes: lenguajes de programación
orientados a objetos, lenguajes de bases de datos o tecnologías del lado del servidor.
Para entender este estándar es necesario tener conocimientos previos del lenguaje
JavaScript, por lo menos la manera de crear objetos en él. Acerca del software que se
necesita para realizar del desarrollo con las líneas de código en JSON, es importante requerir
un navegador web, ya sea Google Chrome, Mozilla Firefox o el Explorador Edge, que viene
instalado por defecto en el Sistema operativo Windows 10. Así mismo, se requiere de un
editor de texto plano, para escribir y editar el código que se va a generar.
CARACTERÍSTICAS DE JSON
JSON cuenta con las siguientes caracteristicas principales:
Independiente de un lenguaje específico
Basado en texto
Formato ligero
Fácil de parsear
No define funciones
38
No tiene estructuras invisibles
No tiene espacios de nombres
No tiene validador
No es extensible
ENTORNO DE TRABAJO: VISUAL STUDIO CODE (VSC)
Delineación del ambiente de desarrollo, a partir de la instalación de herramientas
necesarias, destinadas a realizar algoritmos óptimos. El IDE (Integrated Development
Environment) o en español Entorno de desarrollo integrado, será el encargado de permitir la
estructuración del proyecto que requiere ser programado.
Visual Studio Code es la herramienta seleccionada para poner en marcha la programación
del proyecto, puesto que, es un IDE que está desarrollado bajo el paradigma Open Source y
está disponible para los SO Linux, Windows, y Mac. Así mismo, cuenta con un sistema de
configuración que permite ser adaptado a nuestra necesidad, en este IDE se modifica un
archivo JSON a nivel de código.
GRÁFICO 15. LOGO DE VSC
Fuente: https://github.com/microsoft/vscode/issues/87419
Elaborado por: Microsoft Corporation
39
FUNDAMENTACIÓN LEGAL
CONSTITUCION DE LA REPUBLICA DEL ECUADOR
TITULO II
DERECHOS
Capitulo segundo
Derechos del buen vivir, garantías y deberes
Sección tercera
Comunicación e Información
Art. 16.- Todas las personas, en forma individual o colectiva, tienen derecho a:
1. Una comunicación libre, intercultural, incluyente, diversa y participativa, en todos los
ámbitos de la interacción social, por cualquier medio y forma, en su propia lengua y con sus
propios símbolos.
2. El acceso universal a las tecnologías de información y comunicación.
3. La creación de medios de comunicación social, y al acceso en igualdad de condiciones al
uso de las frecuencias del espectro radioeléctrico para la gestión de estaciones de radio y
televisión públicas, privadas y comunitarias, y a bandas libres para la explotación de redes
inalámbricas.
4. El acceso y uso de todas las formas de comunicación visual, auditiva, sensorial y a otras
que permitan la inclusión de personas con discapacidad.
5. Integrar los espacios de participación previstos en la Constitución en el campo de la
comunicación.
Art. 18.- Todas las personas, en forma individual o colectiva, tienen derecho a:
1. Buscar, recibir, intercambiar, producir y difundir información veraz, verificada, oportuna,
contextualizada, plural, sin censura previa acerca de los hechos, acontecimientos y
procesos de interés general, y con responsabilidad ulterior.
Título VII
RÉGIMEN DEL BUEN VIVIR
Sección primera Educación
Art. 343.- El sistema nacional de educación tendrá como finalidad el desarrollo de
capacidades y potencialidades individuales y colectivas de la población, que posibiliten el
aprendizaje, y la generación y utilización de conocimientos, técnicas, saberes, artes y cultura.
40
El sistema tendrá como centro al sujeto que aprende, y funcionará de manera flexible y
dinámica, incluyente, eficaz y eficiente.
Art. 350.- El sistema de educación superior tiene como finalidad la formación académica y
profesional con visión científica y humanista; la investigación científica y tecnológica; la
innovación, promoción, desarrollo y difusión de los saberes y las culturas; la construcción de
soluciones para los problemas del país, en relación con los objetivos del régimen de
desarrollo. Sección Tercera Del Funcionamiento de las Instituciones de Educación Superior
Art. 144.- Tesis Digitalizadas. - Todas las instituciones de educación superior estarán
obligadas a entregar las tesis que se elaboren para la obtención de títulos académicos de
grado y posgrado en formato digital para ser integradas al Sistema Nacional de Información
de la Educación Superior del Ecuador para su difusión pública respetando los derechos de
autor.
Sección octava
Ciencia, tecnología, innovación y saberes ancestrales
Art. 385.- El sistema nacional de ciencia, tecnología, innovación y saberes ancestrales, en
el marco del respeto al ambiente, la naturaleza, la vida, las culturas y la soberanía, tendrá
como finalidad:
1. Generar, adaptar y difundir conocimientos científicos y tecnológicos.
2. Recuperar, fortalecer y potenciar los saberes ancestrales.
3. Desarrollar tecnologías e innovaciones que impulsen la producción nacional, eleven la
eficiencia y productividad, mejoren la calidad de vida y contribuyan a la realización del buen
vivir.
SOFTWARE LIBRE EN LA ADMINISTRACIÓN PÚBLICA CENTRAL
Decreto Ejecutivo No. 1014
Software libre en ecuador
Art. 1.- Establecer como política pública para las entidades de la Administración Pública
Central la utilización de software libre en sus sistemas y equipamientos informáticos.
Art. 2.- Se entiende por software libre, a los programas de computación que se pueden
utilizar y distribuir sin restricción alguna, que permitan su acceso a los códigos fuentes y que
sus aplicaciones puedan ser mejoradas. Estos programas de computación tienen las
siguientes libertades:
41
a) Utilización del programa con cualquier propósito de uso común;
b) Distribución de copias sin restricción alguna;
c) Estudio y modificación del programa (Requisito: código fuente disponible);
d) Publicación del programa mejorado (Requisito: código fuente disponible).
Art. 3.- Las entidades de la Administración Pública Central previa a la instalación del
software libre en sus equipos, deberán verificar la existencia de capacidad técnica que brinde
el soporte necesario para el uso de este tipo de software.
UTILIZACION DE SOFTWARE LIBRE EN LA ADMINISTRACION PÚBLICA
Art. 4.- Se faculta la utilización de software propietario (no libre) únicamente cuando no
exista una solución de software libre que supla las necesidades requeridas, o cuando esté en
riesgo la seguridad nacional, o cuando el proyecto informático se encuentre en un punto de
no retorno. Para efectos de este decreto se comprende como seguridad nacional, las
garantías para la supervivencia de la colectividad y la defensa de patrimonio nacional. Para
efectos de este decreto se entiende por un punto de no retorno, cuando el sistema o proyecto
informático se encuentre en cualquiera de estas condiciones:
a) Sistema en producción funcionando satisfactoriamente y que un análisis de costo beneficio
muestre que no es razonable ni conveniente una migración a software libre;
b) Proyecto en estado de desarrollo y que un análisis de costo - beneficio muestre que no es
conveniente modificar el proyecto y utilizar software libre. Periódicamente se evaluarán los
sistemas informáticos que utilizan software propietario con la finalidad de migrarlos a software
libre.
Art. 5.- Tanto para software libre como software propietario, siempre y cuando se
satisfagan los requerimientos, se debe preferir las soluciones en este orden:
a) Nacionales que permitan autonomía y soberanía tecnológica;
b) Regionales con componente nacional;
c) Regionales con proveedores nacionales;
d) Internacionales con componente nacional;
e) Internacionales con proveedores nacionales;
f) Internacionales.
42
Art. 6.- La Subsecretaría de Tecnologías de la Información como órgano regulador y
ejecutor de las políticas y proyectos informáticos en las entidades del Gobierno Central
deberá realizar el control y seguimiento de este decreto. Para todas las evaluaciones
constantes en este decreto la Subsecretaría de Tecnologías de la Información establecerá
los parámetros y metodologías obligatorias. Nota: Artículo reformado por Disposición General
Octava de Decreto Ejecutivo No. 726, publicado en Registro Oficial 433 de 25 de abril del
2011.
Art. 7.- Encárguese de la ejecución de este decreto los señores ministros coordinadores y
el señor Secretario General de la Administración Pública y Comunicación.
TITULO I
DE LOS DERECHOS DE AUTOR Y DERECHOS CONEXOS
CAPITULO I DEL DERECHO DE AUTOR
SECCION I
PRECEPTOS GENERALES
Art. 4.-Se reconocen y garantizan los derechos de los autores y los derechos de los demás
titulares sobre sus obras.
Art. 5.- El derecho de autor nace y se protege por el solo hecho de la creación de la obra,
independientemente de su mérito, destino o modo de expresión. Se protegen todas las obras,
interpretaciones, ejecuciones, producciones o emisión radiofónica cualquiera sea el país de
origen de la obra, la nacionalidad o el domicilio del autor o titular. Esta protección también se
reconoce cualquiera que sea el lugar de publicación o divulgación. El reconocimiento de los
derechos de autor y de los derechos conexos no está sometido a registro, depósito, ni al
cumplimiento de formalidad alguna. El derecho conexo nace de la necesidad de asegurar la
protección de los derechos de los artistas, intérpretes o ejecutantes y de los productores de
fonogramas.
Art. 6.- El derecho de autor es independiente, compatible y acumulable con:
a) La propiedad y otros derechos que tengan por objeto la cosa material a la que esté
incorporada la obra;
b) Los derechos de propiedad industrial que puedan existir sobre la obra; y,
c) Los otros derechos de propiedad intelectual reconocidos por la ley.
43
SECCION V
DISPOSICIONES ESPECIALES SOBRE CIERTAS OBRAS PARAGRAFO PRIMERO DE
LOS PROGRAMAS DE ORDENADOR
Art. 28.- Los programas de ordenador se consideran obras literarias y se protegen como
tales. Dicha protección se otorga independientemente de que hayan sido incorporados en un
ordenador y cualquiera sea la forma en que estén expresados, ya sea en forma legible por el
hombre (código fuente) o en forma legible por máquina (código objeto), ya sean programas
operativos y programas aplicativos, incluyendo diagramas de flujo, planos, manuales de uso,
y en general, aquellos elementos que conformen la estructura secuencian y organización del
programa.
Art. 29.- Es titular de un programa de ordenador, el productor, esto es la persona natural
o jurídica que toma la iniciativa y responsabilidad de la realización de la obra. Se considerará
titular, salvo prueba en contrario, a la persona cuyo nombre conste en la obra o sus copias
de la forma usual. Dicho titular está, además legitimado para ejercer en nombre propio los
derechos morales sobre la obra, incluyendo la facultad para decidir sobre su divulgación. El
productor tendrá el derecho exclusivo de realizar, autorizar o prohibir la realización de
modificaciones o versiones sucesivas del programa, y de programas derivados del mismo.
Las disposiciones del presente artículo podrán ser modificadas mediante acuerdo entre los
autores y el productor.
Pregunta científica a contestarse
¿Es posible que aplicando Experiencia de usuario (UX) en el diseño de plataformas web,
este se convierta en un ambiente accesible, útil e inclusivo para los logopedas y niños que
presenten dificultad de aprendizaje, Dislexia?
Definiciones conceptuales
UX: “Es el conjunto de factores y elementos relativos a la interacción del usuario con
un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción
positiva o negativa de dicho servicio, producto o dispositivo” (Norman & Nielsen, 2016).
Interacción: “Es el estudio de la interacción entre el ser humano, las computadoras y las
tareas que se desarrollan, principalmente se enfoca en conocer como las personas y las
máquinas pueden interactuar por medio de interfaces” (Martinez de la Teja, 2015).
Usabilidad: “La usabilidad es la medida del grado de facilidad en el uso de un tipo de
producto y del tipo de satisfacción que genera ese uso en el usuario” (González & Farnós,
2015).
44
Accesibilidad: “La accesibilidad se centra en los fácil o difícil que es acceder a los
contenidos ofrecidos, al máximo rango posible de usuarios, incluyendo a personas con algún
tipo de discapacidad o dificultad especial” (González & Farnós, 2015).
JSON: “Es un estándar para enviar y recibir datos entre un servidor y el navegador, que
puede utilizarse para el intercambio entre dos aplicaciones, una aplicación, o dentro de una
aplicación del lado del cliente.” (Aguirre, 2020).
API: “Es un conjunto de definiciones y protocolos que se utiliza para desarrollar e integrar
el software de las aplicaciones. API significa interfaz de programación de aplicaciones” (Red
Hat, Inc., 2021).
HTML: “Es un lenguaje de programación que utiliza una serie de códigos llamados
etiquetas que van definiendo los elementos que componen una página web: texto, imágenes,
etc. Estas etiquetas serán interpretadas por un navegador de internet que mostrara
adecuadamente la página web al usuario.” (Celaya Luna, 2019).
CSS: “Es un lenguaje de programación muy parecido a HTML que permite aplicar estilos
a los distintos elementos de las páginas web, de modo que los títulos, listas y párrafos pueden
verse igual en todas y cada una de las páginas” (Celaya Luna, 2019).
REACT: “Es una librería de JavaScript declarativa, eficiente y flexible para construir
interfaces de usuarios. Permite componer IUs complejas de pequeñas y aisladas piezas de
código llamada componentes” (Facebook Inc., 2021).
CAPÍTULO III
PROPUESTA TECNOLÓGICA
La propuesta del presente trabajo de titulación está enfocada en la elaboración del diseño
de interfaz de la plataforma web TEMONET basada en Experiencia de usuario, la cual abarca
el estudio de componentes viables para satisfacer las necesidades de los usuarios, tanto
logopedas como usuarios con Dislexia, con la finalidad de presentar una herramienta de
apoyo para el trabajo de creación de terapias y realización de actividades.
Se adaptará el diseño de la herramienta web al perfil de los niños con la condición de
Dislexia, luego realizar búsquedas sobre las necesidades de dichos usuarios, donde se
definió los aspectos visuales que tendrá la capa del frontend, puesto que, la plataforma está
dirigida a un público determinado donde se necesita usabilidad para la facilidad de lectura,
descargas de información, manipulación de imágenes y textos.
45
La vista previa del diseño de interfaz de usuario constará de un lienzo en blanco,
acompañado de un menú y botones para diferentes acciones. El logopeda tendrá la
oportunidad de elaborar terapias deslizando sobre la hoja en blanco los diferentes recursos
como imágenes, audio y video una vez importados desde el ordenador. Así mismo puede
agregar texto y editarlo a su preferencia y añadir diferentes tipos de formularios.
Para los usuarios y pacientes con Dislexia tendrán a la vista las diferentes actividades que
podrán realizar y para mejorar su experiencia van a tener la oportunidad de manipular color
de plantilla y color de background que son los dos puntos importantes para la accesibilidad
web por parte de usuarios que presentan estas condiciones de dificultad de aprendizaje.
El diseño de interfaz gráfica de la plataforma web está desarrollada con el lenguaje de
programación JavaScript, que es un software OpenSource que permite crear contenido
altamente dinámico y también permite implementar funciones complejas en las páginas web
como controlar contenido multimedia, animación de imágenes, mapas interactivos y
desplazamiento de máquinas reproductoras de video. Se pretende incrementar la interacción
de forma sencilla a través de la creación de interfaces usando una biblioteca de JavaScript
denominada REACT.
React es una biblioteca de código abierto que fue diseñada para crear interfaces de
usuario con el fin de facilitar el desarrollo de aplicaciones en una sola página, para la
implementación de dicha biblioteca nos basamos en que es un programa súper sencillo,
declarativo y fácil de combinar, por lo tanto, nos permite construir una interfaz de usuario
interactiva de manera sencilla.
Análisis de Factibilidad
El proyecto de titulación es factible, debido a que, el desarrollo de la interfaz gráfica de
usuario para la plataforma TEMONET contribuirá de manera inclusiva y accesible para los
pacientes con Dislexia, de igual modo, será una herramienta de gran utilidad para los
logopedas que deseen elaborar terapias personalizadas incluyendo actividades que son
necesarias para reforzar el aprendizaje de los usuarios con esta dificultad.
Integrando Experiencia de usuario, el consumidor o la persona que esté interesada en
usar esta herramienta va a sentir un grado de satisfacción sumamente alto, puesto que,
cumple los requisitos necesarios para que la plataforma sea útil, accesible y sobre todo fácil
de usar.
46
El uso de herramientas de código abierto (OpenSource) modernas que son accesibles y
compatibles también causan niveles altos de agrado, porque muchas de ellas ofrecen
características únicas que presentan ventajas al momento de desarrollar interfaces dinámicas
e interactivas.
Factibilidad Operacional
El presente proyecto es factible operacionalmente, puesto que, se logró cumplir los
alcances en base a los fundamentos teóricos, técnicos y en base a herramientas de hardware
y software.
Después de buscar e indagar sobre los programas y lenguajes de programación para el
diseño de interfaces de usuario, realizamos comparaciones entre algunos de ellos para definir
uno que cumpla con nuestras necesidades. Por lo tanto, podemos concluir que JavaScript
fue el lenguaje seleccionado, en virtud de que es uno de los lenguajes más importante en la
web y es esencial para el desarrollo FRONTEND, porque permite implementar funciones
complejas y como resultado nos aporta soluciones eficaces en la mayoría de los ámbitos de
la tecnología.
Por otro lado, JavaScript consta de la librería REACT que ayuda a la creación de interfaces
de usuario de manera sencilla y a su vez diseña vistas simples para cada estado en la
aplicación web.
Factibilidad técnica
El análisis técnico dio como resultado los requerimientos para el proceso de desarrollo de
este prototipo, con los cuales se llevará a cabo la utilización de recursos de hardware y
software, a su vez, tomando en consideración la gestión operativa como recurso humano para
su respectivo progreso.
A continuación, en el cuadro 4 se definen los diferentes recursos técnicos y
especificaciones necesarias para el desarrollo del prototipo:
47
CUADRO 8. RECURSOS TÉCNICOS
Recursos técnicos para el desarrollo de la plataforma
Tipo de recurso Nombre Especificaciones
Recursos Humanos Personal con conocimiento
en el desarrollo de software
Conocedores de lenguaje
de secuencias de comandos
o de programación.
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
CUADRO 9. RECURSOS TÉCNICOS DE HARDWARE
Nombre Especificaciones técnicas
PC
Modelo: Acer, Aspire E5-576
Procesador: Intel Core i3 CPU 2.20GHz
RAM: 6,00GB x 64
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
CUADRO 10. RECURSOS TÉCNICOS DE SOFTWARE
Nombre Especificaciones técnicas
JavaScript
Versión ECMAScript 2016
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
Factibilidad legal
Se ha incorporado de fuentes públicas, artículos de leyes de nuestro país para validar el
cumplimiento de la fundamentación legal de nuestro proyecto. Donde nos regimos en los
Derechos de la República del Ecuador, Plan Nacional del Buen Vivir, Ley Orgánica de
Telecomunicaciones y Marco Legal de Software Libre.
Para este trabajo de grado, en la implementación de nuestro prototipo se utilizó software
de licencia Publica General (GPL) lo cual no infringe ninguna ley ya que por derecho de autor
es ampliamente usada en el área de software libre y código abierto, permitiéndonos usarla,
compartirla o redistribuirla.
48
Factibilidad económica
Se demuestra que nuestro prototipo presenta una factibilidad económica baja y
considerable para la construcción de este proyecto, debido a que, utilizamos herramientas de
hardware de uso propio y de software tipo GLP donde lo usamos de manera libre sin
restricción alguna. Por lo tanto, no se genera altos costos más que en su futura distribución
tomar en cuenta el recurso humano invertido. Se demuestra en el cuadro 7 los gastos
referenciales:
CUADRO 11. TABLA DE PRESUPUESTO
Recursos Costos
Hardware $600.00
Software $0.00
Humano (mano de obra) $200.00
Total de inversión $800.00
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
Etapas de la metodología del proyecto
Se dio a conocer la elección de la metodología Scrum ya que cumple con los
requerimientos de este proyecto. Donde se desarrolló consecutivamente las etapas definidas
en corto plazo para cumplir con el tiempo establecido en el cronograma y entregar el producto
terminado de manera exitosa.
El Sprint
Se determina que el sprint del desarrollo del prototipo durara un tiempo de 2 meses,
durante el cual se presentara el producto ya terminado, operativo y funcional. Para lograr esto
se desarrolló historias del Product Backlog a las que nos hemos comprometido como Team
Scrum para lograr
Reunión de planificación de Sprint
Se determina en la reunión realizada por el Product Owner y Scrum Team para conocer
cómo llevar a cabo el proyecto. Donde se estableció reunirse todos los viernes a las 19:00
pm con una duración de 2 horas a la semana para presentar los incrementos resultantes de
los puntos de cada capítulo y los avances del prototipo. Dicho esto, se aseguró la forma en
la que se ira revisando los sprint dentro del tiempo ya estipulado.
49
Creación del Backlog
Se creó una lista de todo lo que sería necesario para el desarrollo de forma ordenada,
siendo esta de requisitos y cambios a realizarse durante el proceso para que sea factible. Se
detalla a continuación todos los procedimientos de acuerdo con las directrices del Scrum
Master.
Recopilación de información acerca de plataformas basadas en UX.
Revisión de las políticas existentes de Experiencia de Usuario en diseño web
Análisis y estudio de lenguajes de programación para uso adaptativo y dinámico.
Selección del lenguaje con el que se trabajara.
Conocimiento sobre las dependencias del JavaScript.
Programar funcionalidad del sitio web.
El estilo debe estar basado en la UX.
Agregar estilo con SCSS y CSS
Crear ruta para home de la plataforma.
Crear ruta para logopedas.
Crear ruta para (usuarios) estudiantes.
Crear ruta de actividades.
Crear ruta de registro de usuarios.
Crear Login de página.
Añadir interacción del logopeda con la creación de actividades.
Actividades pedagógicas para los niños con Dislexia.
Apreciación visual de los elementos.
Plataforma responsive
Historias de Usuario
Son utilizadas en los procedimientos agiles para memorizar y redactar en una tarjeta la
descripción breve como explicación de los requisitos. Antes de ser estos implementados
pasan por un criterio de validación por los participantes del equipo en la planificación del
sprint. (Menzinsky, López, & Palacio, 2018)
A continuación, se definen las cartas de la lista ya establecida del producto backlog o pila
de trabajo anteriormente mencionada.
50
CUADRO 12. RECOPILACIÓN DE INFORMACIÓN ACERCA DE PLATAFORMAS UX
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 13. REVISIÓN DE LAS POLÍTICAS EXISTENTES DE EXPERIENCIA DE USUARIO EN DISEÑO WEB.
Historia de Usuario
Número 2
Nombre historia Revisión de las políticas existentes de Experiencia de
Usuario en diseño web.
Descripción Verificación de libros UX donde se estipulan ciertas
nomas para satisfacer la capacidad visual de los
usuarios y especificaciones para la condición de
Dislexia.
Prioridad para el
proyecto
9
Puntos estimados 10
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 1
Nombre historia Recopilación de información acerca de plataformas
basadas en UX.
Descripción Verificación de páginas web donde se aplican las
normas de User Experiencia.
Prioridad para el
proyecto
8
Puntos estimados 8
51
CUADRO 14. REVISIÓN DE POLÍTICAS DE EXPERIENCIA DE USUARIO EN DISEÑO WEB
Revisión de las políticas de Experiencia de Usuario en diseño web
Número 3
Nombre historia Análisis y estudio de lenguajes de programación para
uso adaptativo y dinámico.
Descripción Indagación sobre diferentes lenguajes, comparando
cuales se acoplarían a los requerimientos de la
propuesta.
Prioridad para el
proyecto
10
Puntos estimados 10
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 15. SELECCIÓN DEL LENGUAJE CON EL QUE SE TRABAJARÁ
Historia de Usuario
Número 4
Nombre historia Selección del lenguaje con el que se trabajara.
Descripción Después de investigaciones realizadas se validó que
JavaScript cumple los requisitos del prototipo.
Prioridad para el
proyecto
10
Puntos estimados 10
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
52
CUADRO 16. PROGRAMAR EN JAVASCRIPT
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 17. EL ESTILO DEBE ESTAR BASADO EN LA UX.
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 5
Nombre historia Programar en JavaScript.
Descripción Aplicación de la lógica del código en lenguaje para su
respectiva funcionalidad.
Prioridad para el
proyecto
7
Puntos estimados 8
Historia de Usuario
Número 6
Nombre historia El estilo debe estar basado en la UX.
Descripción Para cumplir lo solicitado se aplicó estilo usando CSS.
Prioridad para el
proyecto
8
Puntos estimados 8
53
CUADRO 18. APARIENCIA EN CSS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 19. APARIENCIA EN SCSS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 7
Nombre historia Apariencia en CSS
Descripción Creación de sentencias del ancho, altura, tamaño de
grid, headers de lo títulos-subtítulos y display de las
páginas que contendrá.
Prioridad para el
proyecto
9
Puntos estimados 10
Historia de Usuario
Número 8
Nombre historia Apariencia en SCSS
Descripción Declaración de sentencias y variables para las
condiciones de clickeos dentro de las páginas home,
sigan, signup, logopeda, actividades, entre otras.
Prioridad para el
proyecto
9
Puntos estimados 10
54
CUADRO 20. CREAR RUTA PARA HOME DE LA PLATAFORMA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 21. CREAR RUTA PARA LOGOPEDAS.
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 10
Nombre historia Crear ruta para logopedas.
Descripción Declaración de componente dentro del archivo principal
para agregar home como página inicial.
Prioridad para el
proyecto
8
Puntos estimados 8
Historia de Usuario
Número 9
Nombre historia Crear ruta para home de la plataforma
Descripción Declaración de componente dentro del archivo
principal para agregar home como página inicial.
Prioridad para el proyecto 8
Puntos estimados 8
55
CUADRO 22. CREAR RUTA PARA USUARIOS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 23. CREAR RUTA PARA REGISTRO USUARIOS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 12
Nombre historia Crear ruta para registro de usuarios
Descripción Declaración de componente dentro del archivo principal
para agregar home como página inicial.
Prioridad para el
proyecto
8
Puntos estimados
8
Validación
Historia de Usuario
Número 11
Nombre historia Crear ruta para (usuarios) estudiantes.
Descripción Declaración de componente dentro del archivo principal
para agregar página de los estudiantes que se
registraran.
Prioridad para el
proyecto
8
Puntos estimados 8
56
CUADRO 24. CREAR LOGIN DE LA PÁGINA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 25. AÑADIR INTERACCIÓN DEL LOGOPEDA CON LA CREACIÓN DE ACTIVIDADES
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 13
Nombre historia Crear Login de la página.
Descripción Botón para logueo de usuarios que ya tienen cuenta
registrada.
Prioridad para el
proyecto
10
Puntos estimados 10
Historia de Usuario
Número 14
Nombre historia Añadir interacción del logopeda con la creación de
actividades
Descripción Dentro de la página del logopeda se crea cartillas para
cargar dinámicamente actividades multimedia.
Prioridad para el
proyecto
8
Puntos estimados 8
57
CUADRO 26. ACTIVIDADES PEDAGÓGICAS PARA LOS NIÑOS CON DISLEXIA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
CUADRO 27. APRECIACIÓN VISUAL DE LOS ELEMENTOS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario
Número 15
Nombre historia Actividades pedagógicas para los niños con Dislexia.
Descripción Se programó en archivo Json las actividades de
palabras a ordenar para formar oraciones.
Prioridad para el
proyecto
10
Puntos estimados 10
Historia de Usuario
Número 16
Nombre historia Apreciación visual de los elementos
Descripción Uso de extensiones mapreduxe, react-draggable (drag
and drop) y react-dropzone; para efectos visuales como
cambio de colores, dinamismo y paso de String.en
arreglos.
Prioridad para el
proyecto
9
Puntos estimados 10
58
CUADRO 28. PLATAFORMA RESPONSIVE
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Reunión de Planeación del proyecto
El Producto Owner se reúne cada viernes a las 19pm con el Scrum team para planificar
los Sprint y revisar las historias de Usuarios. Puesto que se realiza un consenso de las
desarrolladas, se aprueban y se indica si se debe realizar mejoras; ya que se debe cumplir
con el tiempo estipulado.
CUADRO 29. REUNIONES DE LOS SPRINT
ID Historia de usuario Esfuerzo Importancia Esfuerzo/
horas
Sprint
1
Recopilación de
información acerca de
plataformas basadas
en UX.
7 8 5 1
2 Revisión de las
políticas existentes de
Experiencia de
8 9 5
Historia de Usuario
Número 17
Nombre historia Plataforma responsive
Descripción EL sitio web se adapta las pantallas de los ordenadores,
dispositivos celulares y tablets. Logrando ser optima a los
internautas.
Prioridad para el
proyecto
9
Puntos estimados 10
59
Usuario en diseño
web.
3 Análisis y estudio de
lenguajes de
programación para
uso adaptativo y
dinámico.
8 10 7 2
4 Selección del lenguaje
con el que se
trabajara.
10 10 3
5 Aplicación de la lógica
del código en lenguaje
para su respectiva
funcionalidad.
10 10 12 3
6 El estilo debe estar
basado en la UX.
10 10 5
7 Apariencia en CSS 8 9 4
8 Apariencia en SCSS 8 9 4
9 Crear ruta para home
de la plataforma
7 8 3 4
10 Crear ruta para
logopedas.
7 8 3
11 Crear ruta para
(usuarios)
estudiantes.
7 8 3
12 Crear ruta para
registro de usuarios
7 8 3
13 Crear Login de la
página.
7
8
4
60
14 Añadir interacción del
logopeda con la
creación de
actividades
10 10 16 5
15 Actividades
pedagógicas para los
niños con Dislexia.
10 10 7
16 Apreciación visual de
los elementos
10 10 7
17 Plataforma responsive 9 9 9
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Trabajo de desarrollo durante el Sprint
En esta fase de desarrollo se da importancia que se haya cumplido los requisitos del Sprint
para la creación del prototipo requerido. Se realizará la concesión de todas las actividades
para solución de las historias de usuarios, el esfuerzo que se dio para realizarlo y el criterio
de aceptación.
Sprint 1
CUADRO 30. HISTORIA DE USUARIO 1
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario 1
Nombre historia Recopilación de información acerca de plataformas
basadas en UX.
Tarea Verificación de páginas web donde se aplican las normas
de User Experiencia.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Se adquiere información para conocimiento.
61
CUADRO 31. HISTORIA DE USUARIO 2
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Sprint 2
CUADRO 32. HISTORIA DE USUARIO 3
Historia de Usuario 3
Nombre historia Análisis y estudio de lenguajes de programación para uso
adaptativo y dinámico.
Descripción Indagación sobre diferentes lenguajes, comparando
cuales se acoplarían a los requerimientos de la propuesta.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Se verifico proyectos anteriores para verificación de que
lenguaje es más recomendable.
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario 2
Nombre historia Revisión de las políticas existentes de Experiencia de
Usuario en diseño web.
Descripción Verificación de libros UX donde se estipulan ciertas nomas para satisfacer la capacidad visual de los usuarios y especificaciones para la condición de Dislexia.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Se adquirió libros online para validación de normas.
62
CUADRO 33. HISTORIA DE USUARIO 4
Historia de Usuario 4
Nombre historia Selección del lenguaje con el que se trabajara
Descripción Después de investigaciones realizadas se validó que
JavaScript cumple los requisitos del prototipo.
Esfuerzo en hora 10
Importancia 10
Criterio de aceptación Lenguaje revisado para beneficios de proyecto.
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Sprint 3
CUADRO 34. HISTORIA DE USUARIO 5
Historia de Usuario 5
Nombre historia Programar en JavaScript.
Descripción Aplicación de la lógica del código en lenguaje para su
respectiva funcionalidad.
Declaración de componentes, elementos y rutas
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Inicio de lógica del código en lenguaje mencionado.
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
63
GRÁFICO 16. CÓDIGO FUENTE DE RUTAS DEFINIDAS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC (Visual Studio Code)
Importación de las librerías, extensiones, funciones, rutas y componentes dentro de la
estructura general de lo que se irá complementando a los requisitos.
GRÁFICO 17. RUTAS DENTRO DE PAGES PRINCIPAL
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC (Visual Studio Code)
Demostración de los componentes que se visualizaran al redireccionar de una página a
otra, según la acción que solicite el usuario o logopeda para acceder a los contenidos.
El administrador el único capaz de modificar, eliminar o decidir sobre las rutas.
64
CUADRO 35. HISTORIA DE USUARIO 6
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 18. EFECTOS VISUALES EN LA PLATAFORMA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
Historia de Usuario 6
Nombre historia El estilo debe estar basado en la UX.
Descripción Para cumplir lo solicitado se aplicó estilos recomendados
en libros de las UX y plataformas similares.
Se aplicó CSS y SCSS para satisfacción visual.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Apariencia de elementos.
65
Sprint 4
CUADRO 36. HISTORIA DE USUARIO 7
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 19. CÓDIGO USANDO CSS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Importación de Css como base de todo el diseño de la plataforma en especial en la
elaboración de la barra de progreso (progressBar) que contendrá la ruta de actividades para
el incremento de las acciones en las actividades realizadas por el usuario.
Historia de Usuario 7
Nombre historia Apariencia en CSS
Descripción Creación de sentencias del ancho, altura, tamaño de grid,
headers de los títulos-subtítulos y display de las páginas
que contendrá.
Esfuerzo en hora 9
Importancia 10
Criterio de aceptación Apariencia de elementos.
66
CUADRO 34. HISTORIA DE USUARIO 8
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
GRÁFICO 20. CÓDIGO USANDO SCSS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
Fragmento de código fuente usando SCSS para configurar el display flexible para
adaptarse tanto en ordenadores y dispositivos móviles; la altura y ancho de la carta; los
bordes, cajas de textos con sombras, estilo del cursor, los elementos y textos justificados.
Historia de Usuario
Numero 8
Nombre historia Apariencia en SCSS
Descripción Declaración de sentencias y variables para las
condiciones de clickeos dentro de las páginas home,
signin, signup, logopeda, actividades, entre otras.
Prioridad para el proyecto 9
Puntos estimados 10
67
CUADRO 37. HISTORIA DE USUARIO 9
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 21. CÓDIGO FUENTE PARA PAGINA HOME
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
En el grafico 22 se demuestra la página de inicio del estudiante para tener acceso a las
otras páginas de actividades luego de haberse logueado con su perfil de usuario.
Historia de Usuario 9
Nombre historia Crear ruta para home de la plataforma
Descripción Declaración de componente dentro del archivo principal
para agregar home como página inicial.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Página de inicio
68
Sprint 5
CUADRO 38. HISTORIA DE USUARIO 10
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 22. RUTA PARA PERFIL DEL LOGOPEDA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
Ruta de Home será la página para el encargado de realizar las terapias a través de
evaluaciones y actividades, para su tratamiento e intervención de los problemas que
presenten los niños con Dislexia. En el Anexo 2 se demuestra cómo realizar paso a paso las
actividades, utilizando archivos multimedia y recursos propios de VSC.
El perfil del logopeda tiene programado la capacidad de crear y asignar a sus estudiantes las
actividades que ellos crean conveniente.
Historia de Usuario 10
Nombre historia Crear ruta para logopeda
Descripción Declaración de componente dentro del archivo principal
para agregar home como página inicial.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Página para logopedas.
69
CUADRO 39. HISTORIA DE USUARIO 11
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 23. USUARIO LOGUEADO
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
Página que retorna un Loogedlayout para tener acceso como usuario, este debe acceder
a la página a través de un loggin con sus credenciales registradas. Este proceso esta
detallado en el Anexo 2, para mayor conocimiento de cómo deben acceder los usuarios
Historia de Usuario 11
Nombre historia Crear ruta para (usuarios) estudiantes
Descripción Declaración de componente dentro del archivo principal
para agregar página de los estudiantes que se registraran.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Página que contiene los usuarios
70
Después de que el estudiante se haya logueado correctamente se tendrá acceso a las
actividades y el progreso de estas, como se puede demostrar en el grafico 24. Le reflejara
una lista de terapias a realizar, según la materia que le asigne el logopeda.
GRÁFICO 24. LIST-LESSON PARA EL USUARIO
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
GRÁFICO 25. CÓDIGO FUENTE DE LISTLESSON
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
71
CUADRO 40. HISTORIA DE USUARIO 12
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 26. CÓDIGO PARA REGISTROS DE USUARIOS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
En la función EnrollmentStudent se programó sentencias para matricular al estudiante,
tales como: los nombres, apellidos, dirección, edad, sexo, tutor, grado de dificultad en la
lectura/verbal, entre otros datos.
Historia de Usuario 12
Nombre historia Crear ruta para registro de usuarios
Descripción Declaración de componente para agregar a los estudiantes
y logopedas.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Página para registro
72
GRÁFICO 27. PÁGINA PARA MATRICULAR ESTUDIANTES
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
Demostración de las matrículas a través de la interfaz gráfica usando el servidor Yarn para
su respectiva compilación.
GRÁFICO 28. CÓDIGO PARA MATRICULAR LOGOPEDAS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
73
En la función EnrollmentTeacher se matriculará a los logopedas para que tengan un perfil
como docentes terapeutas y puedan crear sus actividades.
GRÁFICO 29. PÁGINA PARA MATRICULAR LOGOPEDAS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
En el grafico 29 se visualiza la página de registro de matrículas para los logopedas, a
través de la interfaz gráfica usando servidor Yarn para su respectiva compilación.
CUADRO 41. HISTORIA USUARIO 13
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario 13
Nombre historia Crear Login de la página.
Descripción Botón para logueo de usuarios que ya tienen cuenta
registrada.
Esfuerzo en hora 10
Importancia 10
Criterio de aceptación Página para logueo de administrador, estudiante y
logopeda.
74
GRÁFICO 30. LOGGIN DE LA PÁGINA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
Página donde se puede loggear según su rol, entre ellos tenemos al administrador,
logopeda y estudiante. A su vez, permite redireccionar a la página de registros de usuario.
GRÁFICO 31. CONDICIÓN DE INGRESO.
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
75
GRÁFICO 32. MENSAJES DE AVISOS AL LOGEARSE
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
Condición de avisos ante acción de inicio de sesión por parte del usuario, donde se
incorporó sentencias if para cuando se ingrese la contraseña correcta, se pase un true para
los ingresos válidos, y un false para las credenciales inválidas.
GRÁFICO 33. MENSAJES DE ALERTA
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
76
Sprint 5
CUADRO 42. HISTORIA DE USUARIO 14
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 34. ELABORACIÓN DE LAS ACTIVIDADES
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
Interacción al crear actividades y evaluaciones para los estudiantes, de una forma más
dinámica. El maestro o logopeda podrá arrastrar los elementos que se visualizan en el grafico
34 y 35; según su gusto, cambiar los colores recomendados por parte de las UX, y también
subir archivos multimedia tales como imágenes, audios y videos.
Historia de Usuario 14
Nombre historia Añadir interacción del logopeda con la creación de
actividades
Descripción Dentro de la página del logopeda se crea cartillas para
cargar dinámicamente actividades multimedia.
Esfuerzo en hora 8
Importancia 8
Criterio de aceptación Asignación de actividades para los usuarios.
77
GRÁFICO 35. ACTIVIDADES CON ARCHIVOS MULTIMEDIAS
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
El archivo quiz-data.json contendrá la codificación para agregar actividades y modificar
contenido según lo desee el logopeda. Este manual será explicando en el Anexo 2 como guía
de elaboración de estas. A continuación, se presenta en el grafico 36 como estará
estructurado por categorías, tipo, dificultad, preguntas y selección de banco de respuestas.
GRÁFICO 36. ESTRUCTURA DE ARCHIVO JSON
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
78
CUADRO 43. HISTORIA DE USUARIO 15
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 37. TERAPIAS DISCRIMINACIÓN VISUAL
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Plataforma
Historia de Usuario 15
Nombre historia Actividades pedagógicas para los niños con Dislexia
Descripción Se programó en archivo Json las actividades de palabras a
ordenar para formar oraciones
Esfuerzo en hora 10
Importancia 8
Criterio de aceptación Actividades agregadas para usuario.
79
GRÁFICO 38. CÓDIGO DE MULTIPLES ACTIVIDADES
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
En el grafico 39 se demuestra el retorno que se da al responder las preguntas, sean estas
correctas e incorrectas. En caso de ser correcta se apunta a la siguiente actividad. Al culminar
estas, se redirigiría por defecto al home del estudiante. Entre las terapias creadas se tienen
las siguientes: Significado de las palabras según el contexto, formando palabras,
discriminación visual de una palabra real, Formulación de preguntas, encontrar letras en
palabras y Misceláneas.
CUADRO 44. HISTORIA DE USUARIO 16
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
Historia de Usuario 16
Nombre historia Apreciación visual de los elementos
Descripción Uso de extensiones map-reduxe, react-draggable (drag
and drop) y react-dropzone; para efectos visuales como
cambio de colores, dinamismo y paso de String.en
arreglos.
Esfuerzo en hora 9
Importancia 10
Criterio de aceptación Mejoras en la apariencia.
80
GRÁFICO 39. USO DE REDUXE
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
Redux se usó como una librería para controlar el estado de nuestra plataforma, de una
forma más amigable y consistente entre cliente y servidor. Esta extensión se agregó en todas
las páginas puesto que, si el usuario presiona un color de la paleta flotante y el contenido se
le cambiara de contraste, basado en las normas UX.
GRÁFICO 40. USO DEL DROPZONE
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: VSC
81
Dropzone como librería proporcionará el drag and drop, para tener una vista previa de las
imágenes, ya que con esta extensión podemos arrastrar archivos multimedia, desde el
ordenador hasta el sitio web.
CUADRO 45. HISTORIA DE USUARIO 17
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de la investigación
GRÁFICO 41. PLATAFORMA EN UNA PANTALLA MOVIL
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Dispositivo móvil
Historia de Usuario 17
Nombre historia Plataforma responsive
Descripción EL sitio web se adapta las pantallas de los ordenadores,
dispositivos celulares y tablets. Logrando ser optima a los
internautas.
Esfuerzo en hora 9
Importancia 10
Criterio de aceptación Diseño web responsivo
82
Entregables del proyecto
De acuerdo con la metodología utilizada se hará la entrega de los siguientes anexos:
código fuente, manual de implementación de actividades, manual de uso para usuarios,
formato de encuesta y prototipo terminado.
CRITERIOS DE VALIDACIÓN DE LA PROPUESTA
Se realizó una encuesta de satisfacción con una población de 100 personas a las cuales
se les realizo las preguntas, dando como resultado los siguientes análisis de resultados.
Encuesta
1. ¿Te resulta fácil navegar por plataformas digitales, sitios web o aplicaciones de smartphone?
CUADRO 46. INDICADOR DE RESPUESTA 1
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 42. PROPORCIONES DE RESPUESTA 1
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Totalmente de acuerdoNi de acuerdo ni en desacuerdoEn desacuerdo
OPCIONES FRECUENCIA RELATIVA
Totalmente de acuerdo 68,52
Ni de acuerdo ni en desacuerdo 3,70
En desacuerdo 0,93
Totalmente en desacuerdo 0,00
De acuerdo 26,85
TOTAL 100
83
Análisis: Como resultado de esta pegunta podemos ver el 68.52 está totalmente de acuerdo
con la pregunta, esto nos indica que, se les hace fácil navegar por los sitios web, plataformas
o aplicaciones de smartphones.
2. ¿Alguna vez has navegado por una plataforma que ofrece terapias médicas?
CUADRO 47. INDICADORES DE RESPUESTA 2
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 43. PROPORCIÓN DE RESPUESTA 2
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 29.63% si ha navegado por
una plataforma que ofrece terapias médicas, el 29.63% indican que talvez, el 34,26%
respondieron que no, mientras que el 6.48% nunca
han utilizado este tipo plataformas o aplicaciones de smartphones.
Si No Talvez Nunca
OPCIONES FRECUENCIA RELATIVA
Si 29,63
No 34,26
Talvez 29,63
Nunca 6,48
TOTAL 100
84
3. Si la respuesta anterior fue afirmativa debe contestar esta pregunta ¿Qué le pareció su diseño visual?
CUADRO 48. INDICADORES DE RESPUESTA 3
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 44. PROPORCIÓN DE RESPUESTA 3
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 45,03% estuvo de acuerdo
con la pregunta anterior y estuvieron de acuerdo con el diseño de esa aplicación. Mientras
que el 32,41 no estuvo ni de acuerdo, ni en desacuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
OPCIONES
FRECUENCIA RELATIVA
Totalmente de acuerdo 12,04
Ni de acuerdo ni en desacuerdo 32,41
En desacuerdo 3,70
Totalmente en desacuerdo 6,48
De acuerdo 45,37
TOTAL 100
85
4. Si la respuesta anterior fue afirmativa debe contestar esta pregunta ¿Se adaptó a sus
necesidades?
CUADRO 49. INDICADORES DE RESPUESTA 4
OPCIONES
FRECUENCIA RELATIVA
Totalmente de acuerdo 13,89
Ni de acuerdo ni en desacuerdo
33,33
En desacuerdo 7,41
Totalmente en desacuerdo 6,48
De acuerdo 38,89
TOTAL 100
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 45. PROPORCIÓN DE RESPUESTA 4
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 38,89% estuvieron de
acuerdo con el cumplimiento de sus necesidades, un 33,33% les pareció regular ya que,
estuvieron ni de acuerdo ni en desacuerdo, un 13,89% totalmente de acuerdo, un 7,41
estuvieron en desacuerdo y un 6,48% en total de acuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
86
5. ¿Le resulto rápido navegar por el sitio web y moverse de una página a otra?
CUADRO 50. INDICADORES DE RESPUESTA 5
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 46. PROPORCIÓN DE RESPUESTA 5
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 45,37% les resulto rápido
navegar por el sitio web y moverse de una página a otra, un 22,22% les pareció regular ya
que, estuvieron ni de acuerdo ni en desacuerdo, un 26,85% totalmente de acuerdo, un 4%
estuvieron en desacuerdo y 2% en total de acuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
OPCIONES
FRECUENCIA RELATIVA
Totalmente de acuerdo 26,85
Ni de acuerdo ni en desacuerdo 22,22
En desacuerdo 3,70
Totalmente en desacuerdo 1,85
De acuerdo 45,37
TOTAL 100
87
6. ¿Cree usted que la interfaz gráfica de ese sitio permite que sea intuitiva su uso y navegación?
CUADRO 51. INDICADORES DE RESPUESTA 6
OPCIONES
FRECUENCIA
RELATIVA
Totalmente de acuerdo 13,89
Ni de acuerdo ni en desacuerdo
33,33
En desacuerdo 7,41
Totalmente en desacuerdo 6,48
De acuerdo 38,89
TOTAL 100
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 47. PROPORCIÓN DE RESPUESTA 6
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 48% les resulto intuitivo y
fácil de navegar, un 19% les pareció regular ya que, estuvieron ni de acuerdo ni en
desacuerdo, un 25% totalmente de acuerdo, un 6% estuvieron en desacuerdo y el 1% en
totalmente en desacuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
88
7. ¿Cuándo navego por las páginas de la plataforma le pareció lento al cargar el contenido?
CUADRO 52. INDICADORES DE RESPUESTA 7
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 48. PROPORCIÓN DE RESPUESTA 7
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 20,37% les pareció lento al
navegar, un 35% les pareció lenta ya que, estuvieron ni de acuerdo ni en desacuerdo, un 7%
totalmente de acuerdo, un 35% estuvieron en desacuerdo y el 2% en totalmente en
desacuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
OPCIONES
FRECUENCIA
RELATIVA
Totalmente de acuerdo 37,04
Ni de acuerdo ni en desacuerdo
25,00
En desacuerdo 6,48
Totalmente en desacuerdo 0,93
De acuerdo 30,56
TOTAL 100
89
8. ¿Qué posibilidades existen para que usted recomiende esa plataforma a familiares o
amigos?
CUADRO 53. INDICADORES DE RESPUESTA 8
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 49. PROPORCIÓN DE RESPUESTA 8
Análisis: Como resultado de esta pregunta podemos ver que el 31% si recomendarían esta
plataforma a sus amigos, familiares o conocidos, un 25% estuvieron ni de acuerdo ni en
desacuerdo, un 37% totalmente de acuerdo, un 6% estuvieron en desacuerdo y el 1% en
totalmente en desacuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
OPCIONES
FRECUENCIA
RELATIVA
Totalmente de acuerdo 37,04
Ni de acuerdo ni en desacuerdo
25,00
En desacuerdo 6,48
Totalmente en desacuerdo 0,93
De acuerdo 30,56
TOTAL 100
90
9. ¿Conoce el termino UX?
CUADRO 54. INDICADORES DE RESPUESTA 9
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 50. PROPORCIÓN DE RESPUESTA 9
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 40% conoce el termino UX,
un 18% estuvieron ni de acuerdo ni en desacuerdo, un 17% totalmente de acuerdo, un 14%
estuvieron en desacuerdo y el 12% en totalmente en desacuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
OPCIONES
FRECUENCIA
RELATIVA
Totalmente de acuerdo 16,67
Ni de acuerdo ni en desacuerdo
17,59
En desacuerdo 13,89
Totalmente en desacuerdo 12,04
De acuerdo 39,81
TOTAL 100
91
10. ¿Conoce usted que con el uso de la UX se puede adaptar las plataformas a las
necesidades de los usuarios?
CUADRO 55. INDICADORES DE RESPUESTA 10
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Google form
GRÁFICO 51. PROPORCIÓN DE RESPUESTA 10
Elaborado por: Michelle Campaña, Estefania Martillo
Fuente: Datos de Investigación
Análisis: Como resultado de esta pregunta podemos ver que el 27% conoce que con las UX
se puede adaptar a las necesidades de los usuarios, un 21% estuvieron ni de acuerdo ni en
desacuerdo, un 41% totalmente de acuerdo, un 8% estuvieron en desacuerdo y el 3% en
totalmente en desacuerdo.
Totalmente de acuerdo Ni de acuerdo ni en desacuerdo
En desacuerdo Totalmente en desacuerdo
De acuerdo
OPCIONES
FRECUENCIA
RELATIVA
Totalmente de acuerdo 40,74
Ni de acuerdo ni en desacuerdo
21,30
En desacuerdo 8,33
Totalmente en desacuerdo 2,78
De acuerdo 26,85
TOTAL 100
92
Juicio a experto
Para validar la propuesta de nuestro tema de tesis se realizó la entrevista a cuatro expertos
del área de desarrollo de software, con el fin de tener un mejor criterio sobre el diseño basado
en las necesidades de los usuarios. Los entrevistados fueron dos Ingenieros de la Universidad
de Guayaquil y un experto de la empresa de telecomunicaciones, Claro; para tratar temas
claves con respecto a la UX.
Entrevista 1
Alvarado Unamuno Eduardo, Ingeniero Electrónico.
1. ¿Cómo explicaría usted el término UX?
UX se refiere a cómo se siente una persona al interactuar con un sistema.
2. ¿Qué es lo más importante que se debe considerar en un proyecto donde se aplica
UX?
La facilidad de uso, el valor percibido, la utilidad, la eficiencia a la hora de realizar una tarea
propuesta en el sistema.
3. ¿Cuáles son los factores a considerar para que una interfaz web sea accesible,
intuitiva y fácil de usar?
Patrones de diseño, escoger los elementos adecuados para una interfaz (módulos,
desplegables, galerías) en función de la tarea a realizar hace que el usuario entienda
instintivamente.
4. ¿Qué buenas prácticas recomendaría para un diseño de interfaz web para personas
con dificultad de aprendizaje (Dislexia)?
Un diseño sencillo, limpio y claro, siempre va a facilitar la usabilidad y el usuario se va a sentir
cómodo, y va a encontrar lo que busca.
5. ¿Cuáles son los factores que ocasionan en el usuario, una resistencia al uso de una
aplicación o plataforma digital?
El desconocimiento de la tecnología.
6. ¿Cuál o cuáles son las metodologías de desarrollo de software que más se adaptan
en la aplicación de UX en diseños de interfaz web?
Agile UX.
7. ¿Cómo se podría generar un impacto positivo con el uso de las UX?
El uso del color, la/s tipografía/s escogida, el espacio entre elementos, las imágenes, los
elementos audiovisuales.
8. ¿Por qué cree usted que las mínimas acciones pueden dañar la estructura de una
interfaz web?
No
93
9. ¿Cree usted que las críticas positivas o negativas de un diseño pueden influir en el
avance de un desarrollo? Explique en cada uno de los casos.
Cada usuario percibe de una manera diferente el entorno en que vivimos, y se debe escuchar
tanto las críticas positivas como negativas, las positivas nos mostraran las fortalezas de
nuestro diseño, las críticas negativas las debilidades de nuestro diseño y esto nos permitirá
corregirlas para mejorar nuestro diseño.
10. ¿Cómo cree usted que el texto en una aplicación web puede llegar a identificarse o
conectarse con el usuario?
La apariencia visual que tenga el texto es esencial en UX, porque se relaciona con su
legibilidad, una parte esencial para que la navegación sea amena en una página web.
Entrevista 2
Apolinario Arzube Oscar, Licenciado en sistemas de información
1. ¿Cómo explicaría usted el término UX?
El valor por el uso que le dan los usuarios finales a aplicaciones de TIC SEAN de impacto
positivo reflejado en los índices de calidad por ejemplo NPS.
2. ¿Qué es lo más importante que se debe considerar en un proyecto donde se aplica
UX?
Si por un lado el UI direcciona al usuario y a lo que debe hacer mientras usa el sitio o
aplicación, el papel del UX es hacer que la navegación sea agradable.
3. ¿Cuáles son los factores a considerar para que una interfaz web sea accesible,
intuitiva y fácil de usar?
UI es sobre razón, UX es sobre emoción.
4. ¿Qué buenas prácticas recomendaría para un diseño de interfaz web para personas
con dificultad de aprendizaje (Dislexia)?
En el Occidente, las personas normalmente leen de arriba hasta abajo, de la izquierda a la
derecha, sin contar los varios sistemas existentes, pero ¿qué tiene que ver esto con UI y UX?
5. ¿Cuáles son los factores que ocasionan en el usuario, una resistencia al uso de una
aplicación o plataforma digital?
Se resumen en las 6 generaciones del conocimiento digital GENERACIÓN SILENCIOSA
Baby boomers
Generación x
Millennials
Generación z
94
Generación alpha
6. ¿Cuál o cuáles son las metodologías de desarrollo de software que más se adaptan
en la aplicación de UX en diseños de interfaz web?
La expresión UI viene de User Interface, que significa Interfaz del Usuario. La idea del UI es
guiar al usuario por tu aplicación durante el tiempo que él la usa. Ahora te diré que el UI afecta
directamente al UX, ya que si la navegación de tu sitio es mala, es bastante difícil proporcionar
una buena experiencia.
7. ¿Cómo se podría generar un impacto positivo con el uso de las UX?
1. Generación de alto valor para el público.
2. Altas posibilidades de retener y encantar a los usuarios.
3. Fortalecimiento de la marca.
8. ¿Por qué cree usted que las mínimas acciones pueden dañar la estructura de una
interfaz web?
Al final, aunque no todos los visitantes estén listos para tomar una acción inmediata, es
probable que vuelvan si el trabajo del UI y el UX está bien realizado.
9. ¿Cree usted que las críticas positivas o negativas de un diseño pueden influir en el
avance de un desarrollo? Explique en cada uno de los casos.
Con ambos, una interfaz bien proyectada y conocimiento profundo sobre cómo tu buyer
persona se comporta, es posible generar mucho más valor para tu público que si solo tuvieras
a uno de los elementos en tu estrategia. Muchos sitios y aplicaciones tienen como una de las
principales métricas de éxito el tiempo que los usuarios han estado en el sitio web. Este
indicador es utilizado cuando el engagement es importante para el éxito del proyecto.
10. ¿Cómo cree usted que el texto en una aplicación web puede llegar a identificarse o
conectarse con el usuario?
Un buen texto de diseño UI te permitirá guiar a los usuarios por la navegación y los llevará a
tomar dichas acciones de manera natural.
Entrevista 3
Arizaga Gamboa Jenny, Ingeniera de sistemas computacionales.
1. ¿Cómo explicaría usted el término UX?
Interfaz amigable e intuitiva para el usuario final.
2. ¿Qué es lo más importante que se debe considerar en un proyecto donde se aplica
UX?
Claridad y ser precisa la interfaz.
95
3. ¿Cuáles son los factores a considerar para que una interfaz web sea accesible,
intuitiva y fácil de usar?
Estética en el diseño, claridad de lo requerido por el usuario para ingresar, consultar o algún
tema de reporte.
4. ¿Qué buenas prácticas recomendaría para un diseño de interfaz web para personas
con dificultad de aprendizaje (Dislexia)?
Control de acceso al software
5. ¿Cuáles son los factores que ocasionan en el usuario, una resistencia al uso de una
aplicación o plataforma digital?
El no ser un software intuitivo, no siendo claro.
6. ¿Cuál o cuáles son las metodologías de desarrollo de software que más se adaptan
en la aplicación de UX en diseños de interfaz web?
Definir los requerimientos, analizar, realizar un bosquejo de lo que requiere el cliente antes
del desarrollo.
7. ¿Cómo se podría generar un impacto positivo con el uso de las UX?
Se puede crear contenido en las aplicaciones.
8. ¿Por qué cree usted que las mínimas acciones pueden dañar la estructura de una
interfaz web?
Si está asegurada la plataforma no debería de dañar la estructura de la interfaz.
9. ¿Cree usted que las críticas positivas o negativas de un diseño pueden influir en el
avance de un desarrollo? Explique en cada uno de los casos.
Si el software no brinda las prestaciones por el cual fue desarrollado, va a tener críticas
negativas, el cual va a influir el uso del mismo.
10. ¿Cómo cree usted que el texto en una aplicación web puede llegar a identificarse o
conectarse con el usuario?
Por la familiaridad de las palabras usadas en una aplicación.
96
CAPITULO IV
Criterios de aceptación del producto o servicio
Para que se efectúen los criterios de aceptación del presente proyecto se cumplieron con los
objetivos y requerimientos de cada Sprint. A continuación, se presenta la siguiente tabla con
el criterio y su respectivo nivel de cumplimiento:
CUADRO 56. NIVEL DE CUMPLIMIENTO DE LOS CRITERIOS 1
Criterio Nivel de cumplimiento
La propuesta del proyecto cumple con los
objetivos planteados
100%
La propuesta es una buena herramienta de
apoyo para los logopedas
100%
El diseño de interfaz cumple con los factores
de usabilidad, accesibilidad e interactividad.
100%
La propuesta del proyecto es adecuada para
cubrir las necesidades tanto del logopeda
como para los pacientes con Dislexia.
100%
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
CUADRO 57. NIVEL DE CUMPLIMIENTO DE LOS CRITERIOS 2
Criterios técnicos Nivel de cumplimiento
Registro de usuarios: logopedas y Pacientes 100%
Inicio de sesión de usuarios: logopedas y
Pacientes
100%
Elección de color de background 100%
Creación de actividades con imágenes,
audio y video
100%
Guardar actividades 100%
Selección de terapias 100%
Realización de actividades 100%
Revisión de calificaciones 100%
Cierre de sesión 100%
Fuente: Datos de la investigación
Elaborado por: Michelle Campaña, Estefania Martillo
97
Recomendaciones
TEMONET, es un proyecto que consta de varias fases para su mejora y óptimo
desempeño, actualmente se trabajó en la fase II, donde se aplicó Experiencia de usuario a
su diseño de interfaz, con el fin de que sea una herramienta usable, accesible e intuitiva para
los usuarios que naveguen en la aplicación web, específicamente usuarios con Dislexia.
Con el avance de la tecnología es necesario que las plataformas web estén en constante
cambio, por ello, es necesario realizar actualizaciones en cuanto su diseño para que se vaya
adaptando cada vez más a las necesidades de los usuarios y por consecuente, sientan un
nivel de satisfacción alto cada vez que decidan usar la herramienta.
Para la persona o grupo de personas que decidan continuar con la fase III del presente
proyecto, con respecto al desarrollo del diseño de interfaz de usuario adaptada para usuarios
con Dislexia, se recomienda lo siguiente:
Contraste entre color del texto y el fondo, por lo que, es recomendable elegir texto en
color negro sobre un fondo blanco o fondo colores pasteles claros.
Fuentes adaptables, parte los usuarios finales son usuarios que padecen de Dislexia, por
ello es importante adaptar tipografías en base a sus necesidades. Se recomienda usar
OpenDislexy, porque la forma de caracteres únicos y pesados en la parte inferior ayuda
a que sea más difícil confundir las letras.
Cada contenido textual que se añada debe ser claro y visible, con palabras simples y
fáciles de leer, además de párrafos cortos y directos alineados a la izquierda para el buen
entendimiento del usuario.
Al momento de añadir botones, es importante seguir una estética o un patrón similar caso
contrario el usuario pierde el foco de lo que se está haciendo. Además, su diseño ser
visible, llamativo para que estimule la atención del usuario.
Inserción de imágenes y videos adaptables, no solamente con el ancho y alto del canvas,
si no con respecto al peso y transferencia de datos
Por otro lado, es necesario evitar el uso de scroll, sonidos de fondo y animaciones todos
estos elementos tienden a confundir al usuario provocando emociones negativas cuando
usan la plataforma web.
Por último, no sobrepasar de elementos la interfaz web. Se debe establecer elementos
que en verdad sean útiles para la mayoría, para que la web funcione para todos y de todas
las formas posibles.
98
Conclusiones
De acuerdo con el análisis de la fase I, el estudio de las políticas establecidas del uso de
las UX y elaboración del prototipo podemos concluir que la plataforma que creamos cumple
todas las factibilidades que se encuentran explícitamente expuestas en el capítulo III, donde
se determinó un presupuesto económico en caso de ser implementado para una futura fase
o versión de esta.
Se identificó las características del diseño de la interfaz de usuario de la fase I del proyecto
TEMONET que deben mejorar, para iniciar la fase II. Esto se logró revisando el gran aporte
del proyecto anterior, donde se detectó que el prototipo creado no contaba con estrategias
dinámicas en la interacción y tampoco es responsiva. Debido a lo concerniente, se aplicó la
User Experience en la elaboración de la nueva plataforma, para esto, se utilizó herramientas
propias de REACT, tales como son el Dropzone para cargar los archivos, con el uso de
Draggable, que nos permitió tener el mando de los controladores: mover y arrastrar los
elementos en transformaciones CSS, dejando que estos pierdan la independencia de su
posición actual, generando lo requerido, la perdida de la estática en el diseño del sitio web.
Se evaluó las metodologías existentes para la implementación de UX; en base al estudio
que realizamos, decidimos usar el tipo iterativa, ya que se ajusta los requerimientos del diseño
de interfaz gráfica. Para esto se planteó cinco fases, las que se resumen a continuación:
Investigación: En esta etapa se obtuvo la mayor cantidad de información necesaria
para el proyecto, acerca de los usuarios y pacientes que van a usar la plataforma. Las
actividades que se realizan en esta fase son: Los escenarios definidos, el estudio del
contexto, se definió perfiles de usuarios, se estudió a los usuarios, se investigó a los
usuarios, se identificó la intensión comunicativa del producto con respecto a su
usabilidad, se identificó las características del contexto de uso sean estas
tecnológicas y pedagógicas.
Organización Se ordenó toda la información previamente obtenida de las actividades.
Prototipado: Se aplicó los recursos de la etapa anterior, bajo los requerimientos
técnicos con la finalidad de que sean comprendidos por usuarios, pacientes, y el resto
del equipo de trabajo.
Pruebas: Se comprobó la propuesta inicial del diseño del prototipo.
Diseño: Se definió la iconografía, tipografía y estilo de diseño final a visualizar.
Se analizó los diseños de las aplicaciones tradicionales UI versus las aplicaciones que
utilizan UX; para lograr este objetivo se realizó un cuadro comparativo del diseño de la User
Experience e Interface User, donde se demuestra que son dos aspectos complementarios el
99
uno, con el otro. Puesto que, en el desarrollo web que se realice debe ir de la mano en todo
momento, para que uno funcione, el otro deberá hacerlo a su manera. Ambos son elementos
fundamentales para el éxito integral y sostenido de un producto, plataforma o sistema.
Se propuso un diseño de interfaz dedicado a la plataforma de elaboración de terapias para
pacientes con dificultad de aprendizaje, Dislexia. Se cumplió la propuesta con la elaboración
de una plataforma web con el uso REACT, una importante biblioteca de JavaScript. Realizada
para los estudiantes (niños con la condición de Dislexia), los administradores y los logopedas,
siendo estos maestros, psicólogos o médicos que brindaran las terapias.
Se evaluó la propuesta de diseño a través de una encuesta de satisfacción a los usuarios.
Compartida desde Googleform hacia el público en general, para conocer las respuestas de
las personas acerca de uso de las UX. El formato se encuentra anexado en el capítulo 4.
100
Bibliografía
Schwaber, K., & Sutherland, J. (2016). Obtenido de www.scrumguides.org
Antonio, M. (2015). Aprenda los lenguajes HTML5, CSS3 Y JavaScript para crear su primer
sitio web. Barcelona: Editions ENI.
Arias, A. (2015). Desarrollo web con CMS. Drupal y Joomla 2da Edicion. IT CAMPUS
ACADEMY.
Attach Media. (Marzo de 2021). Guía UX. Obtenido de Indice de la guía:
https://attachmedia.com/guia-ux/
Córdoba, C. (2015 de junio de 2015). Experiencia de Usuario: de la utilidad al afecto.
ICONOFACTO, 56-70. Obtenido de Dialnet-LaExperienciaDeUsuario-5204339.pdf
Cristóbal, J. (2016). Crear páginas web estáticas con GitHub. Obtenido de De manera limitada
y gratuita:
https://books.google.com.ec/books?id=3jx1CQAAQBAJ&pg=PT5&dq=github+que+e
s&hl=es-
419&sa=X&ved=2ahUKEwiIxbP1yIDvAhVFVTABHaf5BQMQ6AEwAXoECAkQAg#v=
onepage&q=github%20que%20es&f=false
Cruz Gardey, J., & Garrido, A. (2019). Métodos y herramientas de desarrollo y evaluación de
refactorings para la mejora de la Experiencia del Usuario en aplicaciones web. Trabajo
de Invetigación. Universidad Nacional de La Plata, Buenos Aires.
Dan, A. (2015). Reaccionar Redux. Obtenido de Fijaciones oficiales de React para Redux:
https://react-redux.js.org/
Díaz Gutiérrez, E., & Valderrama García, C. (2018). Evaluación de la usabilidad de los EVA
(entornos virtuales de aprendizaje) a partir de la experiencia de usuarios aplicando
lógica difusa. Revista Vínculos: Ciencia, Tecnología y Sociedsd, vol 15, n° 2,, 56-65.
Facebook Inc. (2021). Tutorial: Introducción a react. Obtenido de
https://es.reactjs.org/tutorial/tutorial.html#what-is-react
González Pérez, L. I., Ramírez Montoya, M. S., & García Peñalvo, F. J. ( Salamanca). Modelo
de evaluación de experiencia de usuario para Repositorios Institucionales.
Salamanca: Grupo GRIAL.
101
González, Á., & Farnós, J. (2015). Usabilidad y accesibilidad para un e-learning inclusivo.
Revista educacion inclusiva Vol 2, 49-60.
Gracia, O. (2014). Northware. Obtenido de Software Development:
http://www.northware.mx/wp-
content/uploads/2014/03/northware_marzo2014_aplicaciones_tiemporeal_nodejs.pdf
?x69168
Hidalgo León, P. V., & Venero Escobar, E. B. (s.f.). Estudio de usabilidad en la una propuesta
de sitio Web basado en el diseño de la experiencia del usuario. Tesis de pregrado.
Universidad Andina del Cusco, Cusco.
HINT. (2020). Hint México. Obtenido de https://www.hint.mx/
Imaginanet S.L. (2020). Obtenido de https://www.imaginanet.com/quienes-somos.html
INOVACIÓN Y CUALIFICACIÓN, S. (2001). JavaScript. España: INOVA.
Interaction Design Foundation. (2020). Diseño de Experiencia de usuario. Obtenido de
https://www.interaction-design.org/literature/topics/ux-design
Interaction Design Foundation. (2020). Escuela de diseño online. Obtenido de
https://www.interaction-design.org/about
Liberos, E., Núñez, Á., Bareño, R., Garcia, R., Gutierrez, C., & Pino, G. (2015). El libro del
marketing interactivo y la publicidad digital. Madrid: ESIC.
Martinez de la Teja, G. (28 de abril de 2015). Ergonomía e interfaces de interacción humano-
computadora. Obtenido de http://www.semac.org.mx/archivos/9-6.pdf
Menzinsky, A., López, G., & Palacio, J. (Abril de 2018). Gestion de proyectos con Scrum
Manager. Obtenido de Scrum Manager:
https://scrummanager.net/files/historias_usuario_scrum_manager.pdf
Nomor, J. D. (2018). Análisis de la interfaz de usuario y la experiencia del usuario en la
aplicación Conrades. Serie de conferencias IOP, 112-116.
Norman, D., & Nielsen, J. (2016). NN/g Grupo Nielsen Norman. Obtenido de La definicion de
experiencia de usuario (UX): https://www.nngroup.com/articles/definition-user-
experience/
OMS, Organización Mundial de la Salud. (1997). Obtenido de https://www.who.int/es
Orós, J. (2015). Diseños de páginas web con XHTML, JavaScript y CSS. RA-MA .
102
Paz Enrique, L. E., Hernández Alfonso, E., Tamayo Rueda, D., & Frías Guzmán, M. (2016).
El diseño de ofertas de información basado en la experiencia de usuarios. El caso del
boletín Reportes de Información. Santa Clara, Cuba: MEI .
Rodriguez, G., Álvarez, M., Martín, C., Barraza, R., De la Torre, A., Husted, S., . . . Boelter,
V. (2019). Tecnologías Emergentes y Realidad Virtual: Experiencias lúdicas e
inmersivas. Sevilla: Ediciones Egregius.
UXPA, I. (2020). Definiciones de experiencia de usuario y usabilidad. Obtenido de
https://uxpa.org/definitions-of-user-experience-and-usability/
103
ANEXOS
104
ANEXO 1
ENCUESTAS
1. ¿Te resulta fácil navegar por plataformas digitales, sitios web o aplicaciones de
Smartphone?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
2. ¿Alguna vez has navegado por una plataforma que ofrece terapias médicas?
Si ( )
No ( )
Talvez ( )
Nunca ( )
3. Si la respuesta anterior fue afirmativa debe contestar esta pregunta ¿Qué le pareció
su diseño visual?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
4. Si la respuesta anterior fue afirmativa debe contestar esta pregunta ¿Se adaptó a
sus necesidades?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
5. ¿Le resulto rápido navegar por el sitio web y moverse de una página a otra?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
6. ¿Cree usted que la interfaz gráfica de ese sitio permite que sea intuitiva su uso y
navegación?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
105
Totalmente en desacuerdo ( ) 7. ¿Cuándo navego por las páginas de la plataforma le pareció lento al cargar el
contenido?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
8. ¿Qué posibilidades existen para que usted recomiende esa plataforma a familiares o amigos?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
9. ¿Conoce el termino UX (EXPERIENCIA DE USUARIO)?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
10. ¿Conoce usted que con el uso de la UX (EXPERIENCIA DE USUARIO) se puede adaptar las plataformas a las necesidades de los usuarios?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
11. ¿Conoce usted que se puede conocer la experiencia de los usuarios con un diseño
UX (EXPERIENCIA DE USUARIO)?
Totalmente de acuerdo ( )
De acuerdo ( )
Ni de acuerdo ni en desacuerdo ( )
En desacuerdo ( )
Totalmente en desacuerdo ( )
106
ANEXO 2
MANUAL TÉCNICO - IMPLEMENTACIÓN DE LAS TERAPIAS PARA LOGOPEDAS QUE
TRATAN LA CONDICIÓN DE DISLEXIA EN NIÑOS
Ingresar a la plataforma TEMONET WEB-APP con las credenciales asignadas para tener
acceso como logopeda.
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
Una vez logueado a la Plataforma Temonet web-app, se accede a la pantalla principal,
donde se accederá por media de la interfaz gráfica para dirigirse a la opción que permite crear
las terapias o múltiples actividades.
En el sidebar se observa las tres opciones con las que se puede crear de manera
gráfica, sin necesidad de acceder al código.
107
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
Si escoges la opción de CREAR ACTIVIDAD IMÁGENES, tendrás acceso a lienzo en
blanco, donde se encontrará elementos que se pueden arrastrar como usted lo requiera.
Crear actividad imagen
Se puede añadir imágenes desde tu ordenador, cargándolas con doble clic encima de la
cartilla que se demuestra a continuación:
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
108
En los 3 elementos seleccionados se puede apreciar el añadir texto, añadir imágenes
y añadir opciones. Estos se pueden arrastrar con el mouse a cualquiera parte de la
pantalla.
Una vez creada la actividad le das clic a Guardar Lección y esta se quedará
posicionada sin moverse.
En la paleta THEMES con semáforos de colores se puede cambiar al color que uno
desee, la visualización de la pantalla y elementos.
Crear actividad imagen
Se puede añadir audios desde tu ordenador, cargándolas con doble clic encima de la
cartilla que se demuestra a continuación:
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
En los 3 elementos seleccionados se puede apreciar el añadir texto, añadir imágenes
y añadir opciones. Estos se pueden arrastrar con el mouse a cualquiera parte de la
pantalla.
Una vez creada la actividad le das clic a Guardar Lección y esta se quedara
posicionada sin moverse.
En la paleta THEMES con semáforos de colores se puede cambiar al color que uno
desee, la visualización de la pantalla y elementos.
109
Crear actividad audio
Se puede añadir audios desde tu ordenador, cargándolas con doble clic encima de la
cartilla que se demuestra a continuación:
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
En los 3 elementos seleccionados se puede apreciar el añadir texto, añadir audio y
añadir opciones, estas son cajas de textos; en caso de querer agregar respuestas
múltiples. Estos se pueden arrastrar con el mouse a cualquiera parte de la pantalla.
Una vez creada la actividad le das clic a Guardar Lección y dicha actividad se quedará
posicionada sin moverse.
En la paleta THEMES con semáforos de colores se puede cambiar al color que uno
desee, la visualización de la pantalla y elementos.
Nota: Texto
añadido de
ejemplo.
Donde se
puede agregar
la descripción
que desee.
110
Crear actividad video
Se puede añadir videos desde tu ordenador, cargándolas con doble clic encima de la
cartilla que se demuestra a continuación:
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
En los 3 elementos seleccionados se puede apreciar el añadir texto, añadir audio y
añadir opciones, estas son cajas de textos; en caso de querer agregar respuestas
múltiples. Estos se pueden arrastrar con el mouse a cualquiera parte de la pantalla.
Una vez creada la actividad le das clic a Guardar Lección y dicha actividad se quedará
posicionada sin moverse.
En la paleta THEMES con semáforos de colores se puede cambiar al color que uno
desee, la visualización de la pantalla y elementos.
Otra manera de crear las terapias
En caso de que prefiera ir por medio del código para editar o crear actividades con otros
requerimientos, se debería tener acceso al código fuente y acceder al repositorio, donde
encontrara todas las dependencias de la biblioteca React de JavaScript.
Nota: Texto añadido
de ejemplo. Donde se
puede agregar la
descripción que
desee.
111
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
Se accede a la carpeta DATA donde se desplegaran varias opciones y encontraras
terapias ya creadas por nosotros con sus respectivas id, o el archivo lesson.json, donde se
puede editar las terapias que uno desee.
Ejemplo con archivo JSON.
Actividad creada para guía de elaboración de futuras terapias.
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
112
Uso de archivo JSON para elaboración terapia
Archivo JSON editable donde pueden acceder los logopedas o personas que vayan a
agregar o crear sus terapias.
[
{
"category": "Entertainment%3A%20Video%20Games",
"type": "multiple",
"difficulty": "hard",
"question": "What%20was%20the%20name%20of%20the%20herod%20video%20game%2
0%27Dragon%27s%20Lair%27%3F",
"correct_answer": "Dirk%20the%20Daring",
"incorrect_answers": [
"Arthur",
"Sir%20Toby%20Belch",
"Guy%20of%20Gisbourne"
]
},
{
"category": "Animals",
"type": "multiple",
"difficulty": "easy",
"question": "What%20is%20the%20scientific%20name%20for%20modern%20day%20
humans%3F",
"correct_answer": "Homo%20Sapiens",
"incorrect_answers": [
"Homo%20Ergaster",
"Homo%20Erectus",
"Homo%20Neanderthalensis"
]
},
{
"category": "Entertainment%3A%20Books",
"type": "multiple",
"difficulty": "hard",
"question": "What%20is%20Ron%20Weasley%27s%20middle%20name%3F",
"correct_answer": "Bilius",
"incorrect_answers": ["Arthur", "John", "Dominic"]
},
{
"category": "Entertainment%3A%20Comics",
"type": "multiple",
"difficulty": "easy",
"question": "Who%20is%20the%20creator%20of%20the%20comic%20series%20%22T
he%20Walking%20Dead%22%3F",
"correct_answer": "Robert%20Kirkman",
"incorrect_answers": [
113
"Stan%20Lee",
"Malcolm%20Wheeler-Nicholson",
"Robert%20Crumb"
]
},
{
"category": "Entertainment%3A%20Board%20Games",
"type": "multiple",
"difficulty": "medium",
"question": "At%20the%20start%20of%20a%20of%20the%20Monopoly%2C%20if%20y
ou%20six%2C%20which%20square%20would%20you%20land%20on%3F",
"correct_answer": "Electric%20Company",
"incorrect_answers": ["Water%20Works", "Chance", "Community%20Chest"]
},
{
"category": "Geography",
"type": "multiple",
"difficulty": "easy",
"question": "What%20is%20the%20capital%20of%20Jamaica%3F",
"correct_answer": "Kingston",
"incorrect_answers": ["Rio%20de%20Janeiro", "Dar%20es%20Salaam", "Kano"]
},
{
"category": "History",
"type": "multiple",
"difficulty": "medium",
"question": "When%20did%20Jamaica%20recieve%20its%20independence%20from%
20England%3F%20",
"correct_answer": "1962",
"incorrect_answers": ["1492", "1963", "1987"]
},
{
"category": "Animals",
"type": "boolean",
"difficulty": "easy",
"question": "Kangaroos%20keep%20food%20in%20their%20pouches%20next%20to%
20their%20children.",
"correct_answer": "False",
"incorrect_answers": ["True"]
},
{
"category": "General%20Knowledge",
"type": "multiple",
"difficulty": "medium",
"question": "In%202013%20how%20much%20money%20was%20lost%20by%20Nigerian
%20scams%3F",
"correct_answer": "%2412.7%20Billion",
114
"incorrect_answers": [
"incorrect_answers": ["True"]
},
{
"category": "Entertainment%3A%20Video%20Games",
"type": "multiple",
"difficulty": "medium",
"question": "In%20Left%204%20Dead%2C%20which%20campaign%20has%20the%20in
%20order%20to%20reach%20a%20hospital%20for%20evacuation%3F",
"correct_answer": "No%20Mercy",
"incorrect_answers": [
"Subway%20Sprint",
"Hospital%20Havoc",
"Blood%20Harvest"
]
},
{
"category": "History",
"type": "multiple",
"difficulty": "hard",
"question": "What%20was%20the%20last%20colony%20the%20UK%20ceded%20marki
ng%20the%20end%20of%20the%20British%20Empire%3F",
"correct_answer": "Hong%20Kong",
"incorrect_answers": ["India", "Australia", "Ireland"]
}
]
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
Para crear las actividades o terapias se deber tener en cuenta lo siguiente:
Category: En este requisito se debe registrar la categoría que tendrá la actividad
que va a elaborar. Puede ser esta
Type: Respuestas opcionales, escoger, ordenar o completar la respuesta
correcta.
Difficulty: La dificultad que tendrá la actividad, poder ser: media, baja o alta.
Question: La pregunta que le desee agregar, texto explicativo, indicación de
actividad.
Correct_answer: Se debe escribir las respuestas correctas que estarán dentro de
las opciones válidas.
Incorrect_answer: Se debe escribir las respuestas incorrectas para tener
opciones a rellenar en los apartados, que más delante de demostraran.
115
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
En caso de querer empezar desde cero puede crear su propio archivo JSON para
personalizar la ID de la actividad.
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
116
Cuando ya se haya creado o modificado estos archivos indicados, se deberá guardar
cambios con Ctrl + S y luego activar el servidor con comando “yarn” e iniciar con “yarn start”.
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
Estos archivos se actualizarán en minutos y podrán ser visualizados por medio del
navegador con la siguiente dirección: http://localhost:300/
117
Anexo 3
EVIDENCIAS
Petición de Entrevista a Juicio de experto
Fuente: GUI
Elaborado por: Campaña Michelle, Martillo Estefania
Fuente: Correo electrónico
Elaborado por: Campaña Michelle, Martillo Estefania
top related