universidad de guayaquilrepositorio.ug.edu.ec/bitstream/redug/52257/1/b-cint-ptg... · 2021. 5....

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: [email protected]

CONTACTO CON AUTORA:

ESTEFANIA LISSET MARTILLO VÁSQUEZ

TELÉFONO:

0979644858

EMAIL:

[email protected]

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: [email protected]

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.


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.


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

.


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):


C.I. 0953577392


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


Guayaquil, 18 de marzo del 2021

XIII


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: [email protected]

Nombre Alumno: Estefania Lisset Martillo Vásquez

Dirección: Durán, Lotización Las Terrazas

Teléfono: 0979644858 E-mail: [email protected]

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



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


XIX







CUADRO 38. HISTORIA DE USUARIO 10 ........................................................................ 68



CUADRO 41. HISTORIA USUARIO 13 .............................................................................. 73





CUADRO 46. INDICADOR DE RESPUESTA 1 .................................................................. 82

CUADRO 47. INDICADORES DE RESPUESTA 2 ............................................................. 83








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 51. PROPORCIÓN DE RESPUESTA 10 ........................................................... 91

XXII


FACULTAD DE CIENCIAS MATEMATICAS Y FISICAS


“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:




XXIII


FACULTAD DE CIENCIAS MATEMATICAS Y FISICAS


“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:




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


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



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


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


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



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



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



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



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



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


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.



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



CUADRO 10. RECURSOS TÉCNICOS DE SOFTWARE

Nombre Especificaciones técnicas

JavaScript

Versión ECMAScript 2016



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



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



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



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



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



52

CUADRO 16. PROGRAMAR EN JAVASCRIPT



CUADRO 17. EL ESTILO DEBE ESTAR BASADO EN LA UX.



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



CUADRO 19. APARIENCIA EN SCSS



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



CUADRO 21. CREAR RUTA PARA LOGOPEDAS.



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



CUADRO 23. CREAR RUTA PARA REGISTRO USUARIOS



Historia de Usuario

Número 12

Nombre historia Crear ruta para registro de usuarios



Prioridad para el

proyecto

8

Puntos estimados

8

Validación

Historia de Usuario

Número 11

Nombre historia Crear ruta para (usuarios) estudiantes.


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



CUADRO 25. AÑADIR INTERACCIÓN DEL LOGOPEDA CON LA CREACIÓN DE ACTIVIDADES



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



CUADRO 27. APRECIACIÓN VISUAL DE LOS ELEMENTOS



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



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



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



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




Sprint 2



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.




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



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.



Sprint 3



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.



63

GRÁFICO 16. CÓDIGO FUENTE DE RUTAS DEFINIDAS


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


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




GRÁFICO 18. EFECTOS VISUALES EN LA PLATAFORMA


Fuente: Plataforma


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




GRÁFICO 19. CÓDIGO USANDO CSS



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.


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



Fuente: VSC

GRÁFICO 20. CÓDIGO USANDO SCSS


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




GRÁFICO 21. CÓDIGO FUENTE PARA PAGINA HOME


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.


Nombre historia Crear ruta para home de la plataforma



Esfuerzo en hora 8

Importancia 8

Criterio de aceptación Página de inicio

68

Sprint 5




GRÁFICO 22. RUTA PARA PERFIL DEL LOGOPEDA


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.


Nombre historia Crear ruta para logopeda



Esfuerzo en hora 8

Importancia 8

Criterio de aceptación Página para logopedas.

69




GRÁFICO 23. USUARIO LOGUEADO


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


Nombre historia Crear ruta para (usuarios) estudiantes


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


Fuente: Plataforma

GRÁFICO 25. CÓDIGO FUENTE DE LISTLESSON


Fuente: VSC

71




GRÁFICO 26. CÓDIGO PARA REGISTROS DE USUARIOS


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.


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


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


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


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




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


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.


Fuente: VSC

75

GRÁFICO 32. MENSAJES DE AVISOS AL LOGEARSE


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


Fuente: Plataforma

76

Sprint 5




GRÁFICO 34. ELABORACIÓN DE LAS ACTIVIDADES


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.


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


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


Fuente: Plataforma

78




GRÁFICO 37. TERAPIAS DISCRIMINACIÓN VISUAL


Fuente: Plataforma


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


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.





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


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


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.




GRÁFICO 41. PLATAFORMA EN UNA PANTALLA MOVIL


Fuente: Dispositivo móvil


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


Fuente: Google form

GRÁFICO 42. PROPORCIONES DE RESPUESTA 1



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


Fuente: Google form

GRÁFICO 43. PROPORCIÓN DE RESPUESTA 2



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?



Fuente: Google form




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



En desacuerdo 3,70


De acuerdo 45,37

TOTAL 100

85

4. Si la respuesta anterior fue afirmativa debe contestar esta pregunta ¿Se adaptó a sus

necesidades?


OPCIONES

FRECUENCIA RELATIVA


Ni de acuerdo ni en desacuerdo

33,33

En desacuerdo 7,41


De acuerdo 38,89

TOTAL 100


Fuente: Google form




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.



De acuerdo

86

5. ¿Le resulto rápido navegar por el sitio web y moverse de una página a otra?



Fuente: Google form




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.



De acuerdo

OPCIONES

FRECUENCIA RELATIVA



En desacuerdo 3,70


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?


OPCIONES

FRECUENCIA

RELATIVA



33,33

En desacuerdo 7,41


De acuerdo 38,89

TOTAL 100


Fuente: Google form




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.



De acuerdo

88

7. ¿Cuándo navego por las páginas de la plataforma le pareció lento al cargar el contenido?



Fuente: Google form




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.



De acuerdo

OPCIONES

FRECUENCIA

RELATIVA



25,00

En desacuerdo 6,48


De acuerdo 30,56

TOTAL 100

89

8. ¿Qué posibilidades existen para que usted recomiende esa plataforma a familiares o

amigos?



Fuente: Google form


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





De acuerdo

OPCIONES

FRECUENCIA

RELATIVA



25,00

En desacuerdo 6,48


De acuerdo 30,56

TOTAL 100

90

9. ¿Conoce el termino UX?



Fuente: Google form




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.



De acuerdo

OPCIONES

FRECUENCIA

RELATIVA



17,59

En desacuerdo 13,89


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?



Fuente: Google form




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





De acuerdo

OPCIONES

FRECUENCIA

RELATIVA



21,30

En desacuerdo 8,33


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


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.


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.



UI es sobre razón, UX es sobre emoción.



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?



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



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.


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.


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.



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.



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.


Interfaz amigable e intuitiva para el usuario final.


UX?

Claridad y ser precisa la interfaz.

95



Estética en el diseño, claridad de lo requerido por el usuario para ingresar, consultar o algún

tema de reporte.



Control de acceso al software



El no ser un software intuitivo, no siendo claro.



Definir los requerimientos, analizar, realizar un bosquejo de lo que requiere el cliente antes

del desarrollo.


Se puede crear contenido en las aplicaciones.


interfaz web?

Si está asegurada la plataforma no debería de dañar la estructura de la interfaz.



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.



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%



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%



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?


De acuerdo ( )


En desacuerdo ( )


4. Si la respuesta anterior fue afirmativa debe contestar esta pregunta ¿Se adaptó a

sus necesidades?


De acuerdo ( )


En desacuerdo ( )


5. ¿Le resulto rápido navegar por el sitio web y moverse de una página a otra?


De acuerdo ( )


En desacuerdo ( )


6. ¿Cree usted que la interfaz gráfica de ese sitio permite que sea intuitiva su uso y

navegación?


De acuerdo ( )


En desacuerdo ( )

105

Totalmente en desacuerdo ( ) 7. ¿Cuándo navego por las páginas de la plataforma le pareció lento al cargar el

contenido?


De acuerdo ( )


En desacuerdo ( )


8. ¿Qué posibilidades existen para que usted recomiende esa plataforma a familiares o amigos?


De acuerdo ( )


En desacuerdo ( )


9. ¿Conoce el termino UX (EXPERIENCIA DE USUARIO)?


De acuerdo ( )


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?


De acuerdo ( )


En desacuerdo ( )


11. ¿Conoce usted que se puede conocer la experiencia de los usuarios con un diseño

UX (EXPERIENCIA DE USUARIO)?


De acuerdo ( )


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


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


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


Fuente: GUI


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




109

Crear actividad audio

Se puede añadir audios desde tu ordenador, cargándolas con doble clic encima de la


Fuente: GUI


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á




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


Fuente: GUI


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á




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


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


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",


"Homo%20Ergaster",

"Homo%20Erectus",

"Homo%20Neanderthalensis"

]

},

{

"category": "Entertainment%3A%20Books",

"type": "multiple",


"question": "What%20is%20Ron%20Weasley%27s%20middle%20name%3F",

"correct_answer": "Bilius",

"incorrect_answers": ["Arthur", "John", "Dominic"]

},

{

"category": "Entertainment%3A%20Comics",

"type": "multiple",


"question": "Who%20is%20the%20creator%20of%20the%20comic%20series%20%22T

he%20Walking%20Dead%22%3F",

"correct_answer": "Robert%20Kirkman",


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",


"question": "What%20is%20the%20capital%20of%20Jamaica%3F",

"correct_answer": "Kingston",

"incorrect_answers": ["Rio%20de%20Janeiro", "Dar%20es%20Salaam", "Kano"]

},

{

"category": "History",

"type": "multiple",


"question": "When%20did%20Jamaica%20recieve%20its%20independence%20from%

20England%3F%20",

"correct_answer": "1962",

"incorrect_answers": ["1492", "1963", "1987"]

},

{

"category": "Animals",

"type": "boolean",


"question": "Kangaroos%20keep%20food%20in%20their%20pouches%20next%20to%

20their%20children.",

"correct_answer": "False",

"incorrect_answers": ["True"]

},

{

"category": "General%20Knowledge",

"type": "multiple",


"question": "In%202013%20how%20much%20money%20was%20lost%20by%20Nigerian

%20scams%3F",

"correct_answer": "%2412.7%20Billion",

114


"incorrect_answers": ["True"]

},

{

"category": "Entertainment%3A%20Video%20Games",

"type": "multiple",


"question": "In%20Left%204%20Dead%2C%20which%20campaign%20has%20the%20in

%20order%20to%20reach%20a%20hospital%20for%20evacuation%3F",

"correct_answer": "No%20Mercy",


"Subway%20Sprint",

"Hospital%20Havoc",

"Blood%20Harvest"

]

},

{

"category": "History",

"type": "multiple",


"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


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


En caso de querer empezar desde cero puede crear su propio archivo JSON para

personalizar la ID de la actividad.

Fuente: GUI


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


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


Fuente: Correo electrónico


universidad de guayaquilrepositorio.ug.edu.ec/bitstream/redug/52257/1/b-cint-ptg... · 2021. 5....

Documents