desarrollo de un afinador integrado en un aplicativo de

Desarrollo de un afinador de instrumentos integrado en un aplicativo de cursos online de guitarra eléctrica

Memoria de Proyecto Final de Máster

Máster Aplicaciones Multimedia

Itinerario Profesonalizador

Autor: Breogán Sobral Aspérez

Consultor: Irene Ponsatí Mitjà

Profesor: Laura Porta Simó

Fecha de entrega: 31/12/2020

Desarrollo de un afinador de instrumento integrado en un aplicativo de cursos de guitarra eléctrica. Máster Aplicaciones Multimedia

2 / 99

Créditos/Copyright.

Esta obra está sujeta a una licencia de Reconocimiento

3.0 España de CreativeCommons

http://creativecommons.org/licenses/by/3.0/es/


3 / 99

FICHA DEL TRABAJO FINAL

Título del trabajo: Desarrollo de un afinador de instrumentos integrado

en un aplicativo de cursos de guitarra electrica

Nombre del autor: Breogán Sobral Aspérez

Nombre del consultor/a: Irene Ponsatí Mitjà

Nombre del PRA: Laura Porta Simó

Fecha de entrega (mm/aaaa): 12/2020

Titulación:: Máster en Aplicaciones Multimedia itinerario

profesionalizador

Área del Trabajo Final: Trabajo Fin de Master, area profesionalizadora

Idioma del trabajo: Español

Palabras clave Afinador, cursos de guitarra, web app.

Resumen del Trabajo (máximo 250 palabras): Con la finalidad, contexto de aplicación,

metodología, resultados i conclusiones del trabajo.

Son muchas las facilidades que aportan las tecnologías digitales, entre ellas está la interacción

con el usuario para resolver sus necesidades.

En el presente caso, se ha desarrollado un afinador online para distintos instrumentos, y

aunque la temática ya tiene amplio recorrido, se ha optado por realizar un acercamiento propio.

Así, utilizando tecnologías del lado del cliente: HTML, CSS y JavaScript, se ha desarrollado

una aplicación, de fácil integración, que captura el sonido con el micrófono del dispositivo, y

tras su procesado, muestra la frecuencia principal.

Como se comentaba, este irá integrado en un aplicativo de cursos de guitarra eléctrica a

desarrollar, ya que queda en fase de diseño. Pero la obtención de una maqueta funcional con

la aplicación Justinmind, encamina el proceso y queda pendiente su desarrollo con un back-

end pensado con bases de datos noSQL y persistencia en la nube con Firebase en el futuro.

Abstract (in English, 250 words or less):

There are a lot of facilities that digital technology provides, between them, the interaction with

the user for solve his needs.

At the present case, it has been developed an online tuner for different instruments, and

although the thematic has a large way, it has been opted to realize an own approach. So,

building with client side technologies: HTML, CSS and JavaScript, it has been developed an

app, easy to integrate, capturing the sound by the device’s microphone, and after its

processing, shows the principal frequency.


4 / 99

How it has been said, this app will be integrated in an electric guitar courses application to be

developed, because of it stays in design phase. But the achieving of a functional prototype with

Justinmind, directs the process, and stay pending its develops with a noSQL database back-

end and persistence in the cloud with Firebase in the future.


5 / 99

Dedicatoria/Cita

Mi abuelo siempre decía “A culpa é miña por mandarcho facer, a próxima vez fago eu”, (la culpa es

mía por mandarte hacerlo, la próxima vez lo hago yo).


6 / 99

Agradecimientos

A mi hermano y a mi madre, siempre me ayudan cuando lo necesito.


7 / 99

Resumen

Son muchas las facilidades que aportan las tecnologías digitales, entre ellas está la interacción con el

usuario para resolver sus necesidades.

En el presente caso, se ha desarrollado un afinador online para distintos instrumentos, y aunque la

temática ya tiene amplio recorrido, se ha optado por realizar un acercamiento propio. Así, utilizando

tecnologías del lado del cliente: HTML, CSS y JavaScript, se ha desarrollado una aplicación, de fácil

integración, que captura el sonido con el micrófono del dispositivo, y tras su procesado, muestra la

frecuencia principal.

Como se comentaba, este irá integrado en un aplicativo de cursos de guitarra eléctrica a desarrollar,

ya que queda en fase de diseño. Pero la obtención de una maqueta funcional con la aplicación

Justinmind, encamina el proceso y queda pendiente su desarrollo con un back-end pensado con

bases de datos noSQL y persistencia en la nube con Firebase en el futuro.

Abstract

There are a lot of facilities that digital technology provides, between them, the interaction with the user

for solve his needs.

At the present case, it has been developed an online tuner for different instruments, and although the

thematic has a large way, it has been opted to realize an own approach. So, building with client side

technologies: HTML, CSS and JavaScript, it has been developed an app, easy to integrate, capturing

the sound by the device’s microphone, and after its processing, shows the principal frequency.

How it has been said, this app will be integrated in an electric guitar courses application to be

developed, because of it stays in design phase. But the achieving of a functional prototype with

Justinmind, directs the process, and stay pending its develops with a noSQL database back-end and

persistence in the cloud with Firebase in the future.

Palabras clave

afinador, cursos de guitarra, web app.


8 / 99


9 / 99

Índice

Capítulo 1: Introducción ..................................................................................................... 11

1.Introducción/Prefacio .............................................................................................................. 11

2. Descripción/Definición ............................................................................................................ 12

3. Objetivos generales ................................................................................................................. 14

3.1 Objetivos principales........................................................................................................... 14

3.2 Objetivos secundarios ......................................................................................................... 14

4. Metodología y proceso de trabajo........................................................................................... 15

5. Planificación ............................................................................................................................ 17

6. Presupuesto ............................................................................................................................ 19

7. Estructura del resto del documento ........................................................................................ 22

Capítulo 2: Análisis ............................................................................................................. 23

1. Estado del arte ........................................................................................................................ 23

2. Público objetivo y perfiles de usuario ...................................................................................... 26

2.1 Introducción ....................................................................................................................... 26

2.2 Encuesta ............................................................................................................................. 27

2.3 Resultados y conclusiones................................................................................................... 28

2.4 Personas ............................................................................................................................. 30

4. Definición de objetivos/especificaciones del producto ........................................................... 32

Capítulo 3: Diseño .............................................................................................................. 34

1. Arquitectura general de la aplicación/sistema/servicio .......................................................... 34

2. Arquitectura de la información y diagramas de navegación .................................................... 35

2.1 Introducción ....................................................................................................................... 35

2.2 Navegación ........................................................................................................................ 36

2.3 Test TreeJack a la navegación ............................................................................................. 37

3. Diseño gráfico e interfaces ...................................................................................................... 40

3.1 Estilos Afinador ................................................................................................................... 40

3.2 Estilos aplicativo de cursos de guitarra eléctrica .................................................................. 40

3.3 Usabilidad/UX .................................................................................................................... 42

4. Lenguajes de programación y APIs utilizadas .......................................................................... 43

Capítulo 4: Implementación ............................................................................................... 44


10 / 99

1. Requisitos de instalación ......................................................................................................... 44

2. Desarrollo del afinador ............................................................................................................ 44

Capítulo 5: Demostración ................................................................................................... 46

1. Instrucciones de uso ................................................................................................................ 46

2. Prototipos................................................................................................................................ 49

2.1 Afinador ............................................................................................................................. 49

2.2 Aplicativo de cursos ............................................................................................................ 50

Capítulo 6: Conclusiones y líneas de futuro ........................................................................ 50

1. Conclusiones............................................................................................................................ 50

2. Líneas de futuro....................................................................................................................... 51

Bibliografía ......................................................................................................................... 52

Anexos ................................................................................................................................ 53

Anexo B: Entregables del proyecto.............................................................................................. 53

Anexo C: Capturas de pantalla .................................................................................................... 54

Anexo E: Resultados detallados de una encuesta ........................................................................ 88


11 / 99

Figuras y tablas

Lista de imágenes, tablas, gráficos, diagramas, etc., numeradas, con títulos y las páginas en las que

aparecen.

Índice de figuras

Figura 1: Persona 1 ........................................................................................................................................ 30

Figura 2: Persona 2 ......................................................................................................................... 31

Figura 3: Paleta de colores ......................................................................................................... 41/48

Figura 4: Menú ........................................................................................................................... 41/49

Figura 5: Menú móvil .................................................................................................................. 41/49

Figura 6: Afinador en funcionamiento ............................................................................................... 44

Índice de tablas

Tabla 1: Diagrama de Hitos ............................................................................................................................. 18

Tabla 2: Presupuesto ...................................................................................................................................... 21


12 / 99

Capítulo 1: Introducción

1.Introducción/Prefacio

Sin duda, la principal justificación para elaborar un Trabajo Fin de Máster, es aplicar todo lo

aprendido durante los distintos semestres, y poner en práctica conceptos teóricos y prácticos vistos

en el Máster. En este sentido, se muestra la intención del uso de distintas herramientas y

tecnologías, que resultan propias de un estudio anterior, tanto de manera académica, como personal.

Además, la propia motivación de este, justifica la propuesta. En este caso la motivación, es en parte,

un desafío para demostrar el conocimiento adquirido en años de guitarra eléctrica, plasmado en un

simple afinador online, una plataforma que recoja los conocimientos en desarrollo y diseño de

software, como la aplicación de cursos de guitarra eléctrica, pero su principal motivación y

justificación es la del juego. Vista la informática como un juego, solo queda jugar.


13 / 99

2. Descripción/Definición

La afinación de instrumentos es una disciplina que con el uso de las tecnologías actuales se ha

facilitado, lejos queda el uso del diapasón y un oído adiestrado para diferenciar notas concordantes.

Actualmente, es una posibilidad al alcance de cualquier usuario con un móvil u ordenador, y unos

conocimientos básicos de la disposición de su instrumento.

Entra dentro de las posibilidades de una aplicación para afinar, mostrar elementos que refieran a los

dispositivos físicos, pero aumentando la interactividad de estos: buscando la simplicidad en su

manejo, un diseño de la interacción centrada en el usuario y descriptiva, la indicación de que

instrumento se trata, selección de afinaciones especiales, animaciones,etc.

La propuesta de Trabajo Fin de Máster consta del desarrollo integral de un afinador para distintos

instrumentos, complementado con el diseño de la interacción con prototipo de una aplicación web de

cursos, donde el afinador irá integrado.

El diseño del afinador busca en las numerosas aplicaciones al respecto, como puede ser Pro Guitar

Tuner, implementando un estudio del público objetivo, basado en encuestas online con la aplicación

de Google Formularios, para poder utilizar herramientas de diseño como Personas, recogiendo

referencias de la amplia literatura a cerca del tema, sobre el diseño de la experiencia de usuario,

centrado en este, Carolyn Chandler; Russ Unger (2009),Lisandra Maioli (2018)Andrew Hinton

(2014), además, del conocimiento de los dispositivos físicos de uso en el mercado. Pasará a una

fase de prototipado con el software Justinmind para distintos dispositivos, para a continuación

realizar el desarrollo.

El desarrollo del afinador se basa en tecnologías del lado del cliente: HTML, CSS y Javascript. Para

su programación se necesitan conocimientos de teoría del sonido y musicales.

La aplicación de cursos de guitarra eléctrica consiste en un portal donde se compren cursos en

formato video streaming, por parte de un alumnado, donde tendrán acceso a secciones para editado

del perfil, cursos activos, progreso en ellos, notificaciones, búsqueda, etc. Se Incluye el perfil de

profesor, este subirá los contenidos, con la posibilidad de interactuar con los alumnos mediante un

foro y notificaciones, además, tendrá la capacidad de lanzar ofertas especiales de captación. Por

último, habrá un administrador para gestionar peticiones de usuarios a nivel soporte.

El aplicativo web de cursos online de guitarra eléctrica se queda en la fase de diseño, abriendo la

posibilidad de desarrollo una vez concluido el Máster. Este se basa en el mismo público objetivo,

utilizando las mismas herramientas, y además, tendrán que desarrollarse elementos propios de un

sitio web:

https://www.proguitar.com/es/guitar-tuner



https://www.google.com/intl/es_es/forms/about/

https://www.justinmind.com/


14 / 99

Investigación de la Arquitectura de la Información basada en la experimentación. Se

diseñará un sitemap con la aplicación Flowmapp, para ello se buscará referencias

bibliográficas, Andrew Hinton (2014), para su optimización, y a continuación, realizar un Tree-

testing con la aplicación optimalworkshop. Los resultados de los estudios proporcionan una

mejor experiencia de usuario gracias a una testada Arquitectura de la Información.

Diagramas de flujos de las interacciones. Se utilizarán las aplicaciones Flowmapp y Dia,

para realizar los diagramas de flujo de las interacciones principales, creando casos de uso de

cada una de ellas.

Desarrollo de un prototipo para distintos dispositivos. Con la aplicación JustinMind, se

realizarán prototipos interactivos del aplicativo web de cursos de guitarra eléctrica, para

finalizar el trabajo de diseño con test de usuarios, acabando su optimización.

Para su desarrollo posterior se utilizarán las mismas herramientas que para el afinador en el front-

end, y también, REST APIs con Node.js y una base de datos noSQL en la nube, utilizando Firebase,

para el back-end.

https://www.flowmapp.com/

https://www.optimalworkshop.com/


http://dia-installer.de/

https://www.invisionapp.com/

https://nodejs.org/es/

https://firebase.google.com/?hl=es


15 / 99

3. Objetivos generales

3.1 Objetivos principales

Objetivos de la aplicación/producto/servicio:

Afinación de distintos instrumentos

Portal para subida y visionado de cursos de guitarra en formato streaming bajo demanda en

español.

Objetivos para el cliente/usuario:

Posibilidad de negocio para profesores de guitarra eléctrica.

Portal donde usuarios puedan aprender guitarra de todos los niveles y estilos.

Objetivos personales del autor del TF:

Aprendizaje y perfeccionamiento de lo aprendido durante el Máster.

Perfeccionamiento en el análisis de requerimientos de una aplicación.

Exploración de soluciones de software para ámbitos relacionados con aficiones propias.

3.2 Objetivos secundarios

Objetivos adicionales que enriquecen el TF.

Aprendizaje del procesado de señal por un navegador.

Perfeccionamiento en software de prototipado.


16 / 99

4. Metodología y proceso de trabajo

Este apartado define los procesos y metodología aplicados al trabajo Fin de Máster, para ello se hizo

uso de la terminología y método, de la guía para los fundamentos para la dirección de proyectos,

PMBOK (2012).

Esta guía divide el proyecto en fases, cada una de ellas se corresponde con entregas parciales en el

Trabajo de Fin de Máster:

Escoger el tema. Intercambio con el cliente, en este caso el equipo docente, donde se

acuerda una temática para el Trabajo.

Planificación. Es la parte que ocupa este documento, en ella, después de un previo

análisis, se fijan objetivos, alcance de estos, calidad de los mismos y se presenta un

cronograma para la ejecución de estos. Además, se miden otras dimensiones, como pueden

ser los riesgos, y las posibilidades de atajarlos.

Ejecución. Se pone en práctica todas las tareas antes mencionadas, y se hace un

seguimiento continuo para que se cumpla el cronograma y la presentación de entregas

parciales, en caso contrario proponer alternativas. En referencia al Trabajo Fin de Máster se

resume en las dos entregas previas al Cierre.

Cierre. Esta fase da por cerrado el proyecto una vez entregados el producto definitivo y

acabado los procesos de producción. En el caso del proyecto Fin de Máster se entrega el

producto, memoria y presentación, y se atienden las preguntas del tribunal.

Para afrontar un proceso creativo es necesario proponer unas metas, y a partir de ellas ir

desgranando cada actividad a realizar para conseguir estas.

En el siguiente apartado se muestra el cronograma de hitos del proyecto, en el se especifican las

actividades y duración de estas, pero el proceso de ejecución de estos objetivos permite varios

planteamientos.

Se podría seguir una metodología tradicional o una ágil, la diferencia entre estas radica en la

documentación de los procesos:

En una tradicional, por ejemplo, el departamento de diseño, documentaría todo el proceso de diseño

dando instrucciones precisas al departamento de desarrollo acerca de la ejecución o programación

del producto.

Los procesos ágiles pretenden evitar este proceder, debido a que, en numerosas ocasiones el

diseñador necesita llevar a la práctica sus ideas, ya que un error en la planificación puede acarrear


17 / 99

un embudo en la ejecución. Por lo tanto las metodologías ágiles pretenden que los procesos estén

relacionados, permitiendo cambios en cualquiera de los pasos.

El Trabajo Fin de Máster es individual, lo que necesariamente produce una metodología ágil, ya que,

por ejemplo, los resultados de una encuesta presenta ideas acerca de un posible diseño o desarrollo.

Así la misma persona va creando, analizando, diseñando y desarrollando el producto, y todas estas

tareas pueden ir de forma lineal o paralela.

Por lo que básicamente se pretende seguir el cronograma como en una línea de producción, o

método Kanban, pero la obtención de resultados plantea sprints de producción, o método Scrum.


18 / 99

5. Planificación

Para continuar se tendrá que dar forma y tiempo a las distintas actividades que surgen de los

objetivos propuestos, este cronograma está limitado en tiempo, por las distintas entregas, y así el

proyecto. En él, no solamente se han de mostrar las tareas propias de la ejecución del proyecto, sino

todas las derivadas de documentación, seguimiento e incidencias de este, que se plasmaran

finalmente en el cierre con la memoria.

La distribución de las tres siguientes Pruebas de Evaluación Continua, marcarán las dos entregas

parciales de ejecución y el cierre. La distribución de trabajo en las diferentes PECs es la siguiente:

PEC 3. Primera entrega parcial de ejecución. En ella debe estar prácticamente terminadas

todas las tareas de análisis y diseño, y el trabajo de desarrollo avanzado. Además, de la

documentación del seguimiento del cronograma, posibles incidencias o cambios en este.

PEC 4. Segunda entrega de ejecución. Trabajo de desarrollo finalizado, es decir el producto

casi terminado y preparado para su entrega en el cierre.

PEC 5. Cierre. Tener el producto testado para su entrega, y elaboración de la memoria y

presentación, a la espera de las preguntas del tribunal.

Una vez presentado a grandes rasgos como ha de ser el trabajo que ocupa, este ha de ser

especificado en el tiempo, y para ello se pueden usar dos tipos de diagramas: por hitos y diagrama

de Grantt. En este proyecto se opta por declarar las actividades en un diagrama de hitos, puesto que

marca unos objetivos claros para cada entrega, y estos se deben de desglosar por actividades.

Nombre Duración Inicio Final

PEC 3 27 días 14/10/2020 9/11/2020

Análisis y diseño

del afinador

14 días 14/10/2020 27/10/2020

Estudio de público

objetivo y Personas

6 días 14/10/2020 19/10/2020

Prototipado del afinador 8 días 20/10/2020 27/10/2020

Análisis y diseño

del aplicativo de

cursos

13 días 28/10/2020 9/11/2020

Arquitectura de la

Información

5 días 28/10/2020 1/11/2020


19 / 99

Diagramas de flujo 6 días 2/11/2020 7/11/2020

Estudio de casos 2 días 8/11/2020 9/11/2020

Documentación y

seguimiento

27 días 14/10/2020 9/11/2020

PEC 4 30 días 10/11/2020 9/12/2020

Desarrollo del

afinador

14 días 10/11/2020 23/11/2020

Implementar el diseño 3 días 10/11/2020 12/11/2020

Implementar los

algoritmos

9 días 13/11/2020 21/11/2020

Test 2 días 22/12/2020 23/11/2020

Análisis y diseño

del aplicativo de

cursos

16 días 24/11/2020 9/12/2020

Prototipado 8 días 24/11/2020 1/12/2020

Test de usabilidad 5 días 2/12/2020 6/12/2020

Mejoras e Integración

del afinador

3 días 7/12/2020 9/12/2020

Documentación y

seguimiento

30 días 10/11/2020 9/12/2020

PEC5 22 días 10/12/2020 31/12/2020

Producto 8 días 10/12/2020 17/12/2020

Test finales 6 días 10/12/2020 15/12/2020

Preparado para entrega 2 días 16/12/2020 17/12/2020

Memoria 10 días 18/12/2020 27/12/2020

Recopilar

documentación

3 días 18/12/2020 20/12/2020

Redactar memoria 7 días 21/12/2020 27/12/2020

Presentación 4 días 28/12/2020 31/12/2020

Planificar presentación 2 días 28/12/2020 29/12/2020


20 / 99

Video para entregar 2 días 30/12/2020 31/12/2020

Tabla 1. Diagrama de hitos.

Algunas aclaraciones necesita este diagrama de hitos, sin duda su construcción indica estos

términos, así se han resaltado los hitos de cada entrega en negrita, y las celdas de texto normal

indican las actividades a realizar.


21 / 99

6. Presupuesto

En este apartado, se trata de buscar en todo el esfuerzo hecho, una cantidad, en todo caso

aproximada, que refleje el dinero invertido durante los distintos procesos, que han dado a lugar la

realización del proyecto Fin de Máster.

Es necesario en todo proyecto estimar, con bastantes garantías, el presupuesto, ya que en caso de

firmar una contratación con un cliente este puede ser inamovible, aunque este tipo de presupuestos

actualmente están en desuso.

Tratar al cliente como pieza clave en la ejecución del proyecto, y que adquiera su responsabilidad en

este, fue uno de los fundamentos de los nuevos contratos, los contratos ágiles, y dentro de estos se

estipula el alcance, duración y coste, abriendo la posibilidad de modificación de estos parámetros.

En el caso que ocupa, el trabajo Fin de Máster, tenemos una duración determinada, pero podemos

variar el alcance y el coste, siempre en acuerdo con el equipo docente, que son nuestro cliente.

Hay una ventaja a la hora de presupuestar en esta fase de ejecución, el cierre, ya que toda tarea ha

concluido, por lo tanto se puede generar un precio acorde con lo desarrollado e invertido. Esta no

suele ser la situación general de contratación, puesto que el cliente pedirá un presupuesto a priori.

Ya presentada la situación actual se especifican las partidas y gasto de planificación, análisis, diseño

y ejecución, en forma de tabla. Para ello se hace uso de la planificación presentada e iterando por

cada punto se alcanzará el coste total:

Actividad horas Precio x hora(€) Coste(€)

Propuesta

Documentación 8 20 160

Ejecución 8 20 160

Mandato


Ejecución 14 20 280

Entrega 1

Estudio público

objetivo y Personas



22 / 99

Encuesta 16 28 448

Análisis de resultados 10 28 280

Prototipo Personas 10 28 280

Prototipo afinador

Adquisición Justinmind 60

ejecución 15 28 420

Arquitectura de la

Información


Estudio 10 28 280

Sitemap 12 28 336

TreeJack 15 28 420

Diagramas de flujo


Ejecución 12 28 336

Estudio de casos


ejecución 5 28 140

Total entrega 1 4580

Entrega 2

Implementar diseño

del afinador



Implementar

algoritmos del afinador



Test

Planificación 8 28 224



23 / 99

Prototipado de

aplicación de cursos

Documentación 18 20

Ejecucion ordenador 20 30 600

Ejecución movil 20 30 600

Test usabilidad



Mejoras e integración

del afinador en el

aplicativo de cursos


Total entrega 2 3660

Cierre

Producto

Test Finales 10 30 300

Preparar para entrega 5 20 100

Memoria


Redacción 20 28 560

Presentaciones

planificar 5 20 100

Grabar y edición 10 30 300

Total cierre 1560

Presupuesto total 9800

Tabla 2. Presupuesto.

Con este cálculo se cierra este apartado, pero se han de hacer observaciones, sobre todo en la

asignación del precio por hora. Para ello se han establecido tres rangos: 20€, 28€, 30€. Que van

encaminados a diferenciar la dificultad de la tarea a desarrollar. Así, para la búsqueda de


24 / 99

documentación se estima un precio de 20€, en cambio para la implementación de los algoritmos del

afinador 30€.

Esta aproximación van en acuerdo con la diversidad de las funciones a la hora de desarrollar el

proyecto al completo.


25 / 99

7. Estructura del resto del documento

En los siguientes apartados se hará un recorrido por todos los elementos de análisis, diseño y

desarrollo, tocando puntos claves como puede ser la investigación en público objetivo y Personas, el

análisis de la arquitectura de la información testada, el diseño y posterior desarrollo del afinador y la

obtención de un prototipo funcional para móvil y ordenador de la aplicación de cursos de guitarra.


26 / 99

Capítulo 2: Análisis

1. Estado del arte.

Al comenzar un proyecto como es el Fin de Máster, siempre se plantean dudas acerca del producto a

desarrollar, y para ello, el estudio de propuestas relacionadas en múltiples ámbitos, se muestra como

la estrategia correcta para la elaboración de la idea a desarrollar, acercando al lector los diferentes

puntos de vista en el estado del arte o la cuestión.

Como indica el enunciado de esta memoria se ha decidido desarrollar al completo un afinador online,

por lo tanto, esta será la primera parte en la búsqueda y proposición de relaciones con lo

desarrollado en otros proyectos hasta el momento.

No es difícil encontrar una aplicación que realice las tareas de afinación, términos como “online guitar

tuner”, muestra múltiples resultados en buscadores como Google. Además, podemos hacer uso de

diferentes dispositivos, como el móvil, para en sus plataformas de aplicaciones encontrar más

resultados que los del mencionado buscador.

Una vez estudiados estos términos podemos sacar conclusiones, que ayudan a comprender la

problemática y atisbar “insights” que permiten encaminar el proyecto de Fin de Máster.

Sin duda existen dos modelos de afinador, ambos realizados con mayor o menor acierto:

Afinador sin ayudas de software. Este tipo de afinador no tiene ayudas de software, es

decir, no utiliza el micrófono para procesar la señal y encontrar la frecuencia principal del

sonido, fundamental para lograr encontrar la nota que suena y el posible ajuste. Este

simplemente hace sonar la nota de la cuerda de la guitarra a afinar, y es el usuario con su

oído el que debe comprobar el ajuste.

Afinador con ayudas de software. En lugar del anterior, este procesa la señal y encuentra

la frecuencia principal, indicando mediante animaciones el posible ajuste.

Ambas alternativas tienen ventajas e inconvenientes, y los resultados dependen de factores como:

experiencia del usuario, fidelidad del hardware, precisión del algoritmo, diseño acertado, procesador,

necesidad de precisión, etc. Por lo que se usará un ejemplo de ambos modelos que plasmen la

diferencia y se muestran como patrones a seguir.

El primer afinador a estudiar es del tipo sin ayuda de software, pertenece a Fender, reputada marca

de guitarras eléctricas. Para mostrar su interactividad se muestra el enlace, afinador Fender, donde

se puede comprobar el tipo de afinador.

https://www.fender.com/online-guitar-tuner/electric-guitar-tuning


27 / 99

En él se encuentran elementos que demuestran el buen diseño de este: imagen apropiada para el

tipo de instrumento, posibilidad de cambiar a otras afinaciones e instrumentos, posibilidad de tocar la

nota en bucle y un diseño de interacción cuidado donde los elementos llaman a la acción, como su

utilización, ya que simplemente pulsando los botones circulares, suena la nota adecuada.

Sin duda la parte más complicada es su diseño, donde el análisis previo de público objetivo para

trabajar con la herramienta Personas, y el posterior prototipado, son claves para obtener un buen

resultado.

El desarrollo de este tipo de afinadores tiene menos alcance, simplemente se necesita programar

una serie de elementos estándar, como: button, radiobutton, checkboxes, imágenes, etc. Pero la

obtención de un sonido fidedigno del instrumento es complicada.

Como modelo para el segundo tipo de afinador online, que procesa la señal y encuentra la frecuencia

principal, es ProGuitar Tuner. Además de analizarlo como afinador, la aplicación que lo contiene,

ProGuitar, es uno de los modelos en el apartado de cursos, ya que contiene muchas de las

características adecuadas al proyecto Fin de Máster. En esta aplicación se resumen los objetivos,

concernientes a la parte de diseño y desarrollo, de un afinador online.

En cuanto al diseño, optaron por una apariencia retro, referencia a los antiguos dispositivos, muy

recurridos por amplios sectores de músicos. Pero profundizando más allá de su apariencia, vemos

muchos aciertos en la interacción:

Uso simple, presionando un botón y permitiendo el acceso al micrófono, este ya recoge los

sonidos y los analiza en vivo, dando la frecuencia de estos.

Tanto el marcador central, con la nota capturada, como los indicadores en el carrusel de

notas, son visibles y fácilmente interpretables.

La aguja de ajuste es precisa, y marca la desviación para una precisión fina, cambiando el

color a verde del marcador central si es exacta.

Tiene botones de elección de instrumento, tipo de afinación y además, permite escuchar las

notas del instrumento seleccionado.

En resumen, vemos las características deseables para este tipo de productos: manejo simple, que

refieran a dispositivos físicos, que extiendan la interactividad de estos, animaciones, precisión,

múltiples instrumentos.


https://www.proguitar.com/


28 / 99

El desarrollo de este tipo de afinadores, donde el software procesa la señal, es más complejo, y

requiere de conocimientos musicales, teoría del sonido y conocimiento profundo de las herramientas

de programación.

Sin duda, para la obtención de los algoritmos se aconseja siempre no reinventar la rueda, y el

proyecto abierto de Github, perteneciente al Googlearchive, guitar-tuner referencia en bibliografía,

tiene que ser una referencia obligada. También se encuentran referencias de como captar y procesar

la señal en mozilla developer.

Una vez terminado el análisis del estado del arte para el aplicativo de afinador online, es tiempo de

centrarse en el sitio web donde iría integrado, la aplicación de cursos. Para ello, se siguen las

mismas pautas que en el estudio anterior, mostrando dos patrones, en donde su principal diferencia

es el modelo de negocio, lo cual tiene implicaciones en los elementos a diseñar y desarrollar.

El primer ejemplo ya se comentó en este documento, es el sitio web ProGuitar. En él, concurren

características propias de este proyecto: afinador integrado, clases de pago, foro de notificaciones y

cuestiones, video en streaming, diseño cuidado, posibilidad de realizar clases gratuitas, etc.

Pero la principal diferencia con el que se mostrará a continuación, es su modelo de negocio. En este

solamente hay dos perfiles: alumno y administrador. El administrador es el responsable de cambiar

los contenidos y responder en el foro, y su beneficio se obtiene por la venta de cursos, o

suscripciones al total del contenido, es decir, el propio profesor decide crear una web con contenido,

en este caso clases de guitarra, y de esta manera hace el papel de profesor y administrador.

En cambio, en el segundo ejemplo se estudia la web de cursos de contenido general, en la que

también se ofertan clases de guitarra como uno de los temas, Udemy.

En esta existen tres perfiles: alumno, profesor y administrador, y dentro de ella puedes registrarte

como alumno, que consume contenido, o profesor, que crea el contenido. El beneficio del

administrador puede ser a través de una cuota en las ventas, en la subida de contenidos, o ambas.

Las diferencias de un modelo y el otro, tienen consecuencias en diseño y desarrollo. Añadiendo el

perfil de profesor, tendrán que diseñarse todas las páginas referentes al perfil, junto con los

diagramas de flujo de las interacciones. Además, en la parte de desarrollo implica cambios desde la

base de datos al servidor, hasta el front-end.

Ya vistos ambos modelos, el proyecto puede encaminarse hacia varios rumbos, y esto es lo deseable

a desarrollar en este punto, ya que las alternativas hacen que un proyecto prospere ante

adversidades.

https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getFloatFrequencyData

https://www.proguitar.com/

https://www.udemy.com/


29 / 99

2. Público objetivo y perfiles de usuario

2.1 Introducción.

A la hora de hacer una investigación sobre público objetivo, son muchos los factores a tener en

cuenta, por lo que se ha de clasificar según: los resultados que quiere la audiencia, el rol que va a

desarrollar, datos demográficos, la experiencia del usuario, etc.

Es adecuado tener una idea previa sobre este, debido a que cada uno de estos factores serán

ponderados para cada caso de estudio, y esta labor previa se ha de hacer con una audiencia en

mente. Por lo que toda labor de investigación parte de una hipótesis previa, y ha de ser corroborada

o corregida por la experimentación.

La parte experimental, fundamental en perfilar y definir el público objetivo, en este caso se realiza

con una encuesta online, gracias a la aplicación Google formularios. Se podrían haber usado otros

métodos, como: entrevistas personales a posibles usuarios, una investigación contextual, o grupos

de enfoque. Pero dadas las características y medios de los que se dispone, tanto de presupuesto

como de tiempo, las encuestas online son el método de elección para este trabajo.

La limitación de tiempo en la ejecución del proyecto no permite una muestra muy amplía, pero esta

es significativa, y además, se limita el estudio a la ejecución de un primer resultado. Un estudio más

amplio permitiría una muestra más amplia, y el refinamiento de un primer resultado con una segunda

encuesta. Además, no debe ser muy extensa, buscando una buena respuesta.

Ya presentado el método a desarrollar, se ha de mostrar la idea a priori del público al que va dirigido,

y para ello, se ha de contextualizar con el tipo de aplicación a desarrollar. En este caso tenemos una

aplicación sobre cursos online de guitarra, con un afinador integrado, llamada Guitarreo, donde los

posibles usuarios son alumnos, que buscan contenido, y profesores, con cierta experiencia

profesional.

Detallando el alumnado, este debe tener un rango de edad bastante amplio, de los 15 a los 45,

inquietud por aprender de una manera lúdica, que tengan tiempo libre y disposición, con gustos por

la música contemporánea, es decir, a partir de los 60s, y entre estas el Blues, Rock, Pop, Metal,

Punk y sus derivados, paciencia al enfrentarse a nuevos retos y uso activo de las nuevas

tecnologías, con iniciativa propia y cierto sentido musical, que permita aprender o incorporar nuevas

habilidades.

El profesorado debe tener cierta experiencia profesional: pertenecer a un grupo, titulaciones, años de

experiencia, o se dedique a la enseñanza. Además de todo lo valorado para el alumnado, ya que un

alumno puede ser también profesor según el contexto, o viceversa.


30 / 99

2.2 Encuesta.

A continuación, se muestra el cuestionario, directo en sus preguntas y con finalidad de etiquetar al

encuestado, para mostrar unos resultados de manera gráfica con preguntas tipo radiobutton,

checkboxes y pequeños textos, para su fácil catalogación. El motivo de cada pregunta y las opciones

que abren cada respuesta se muestra a continuación:

¿Te gusta la música?. Pregunta que pretende saber si el encuestado está dispuesto a seguir

con el cuestionario. En caso afirmativo continúa la encuesta, si no, muestra la pregunta final.

¿Qué estilo de música te gusta? Y ¿tocas algún instrumento?. Saber los gustos musicales es

importante para conocer el público objetivo, se hace con una serie de checkboxes

encaminadas a la temática de la web. La segunda pregunta cataloga la muestra entre

posibles profesores/alumnos, o solamente posibles alumnos.

¿Qué instrumento tocas?, ¿experiencia con el instrumento? Y ¿Has dado clases o colgado

algún video tuyos en internet?. Preguntas que solamente se realizan si respondes

afirmativamente a si tocas algún instrumento. Las dos primeras permiten saber más acerca

del tipo de músico dentro de la muestra. La última permite saber si tiene experiencia en subir

contenido a internet, fundamental para el papel de profesor.

¿En qué forma?. Pregunta que profundiza en el contenido subido y a que tipo de

plataformas, solo se realiza si la anterior pregunta es afirmativa.

¿Te gustaría dar clases por internet? Para los que no han subido ningún contenido se le

pregunta acerca de este aspecto.

¿Has utilizado internet para recibir clases? Cataloga la muestra entre posibles alumnos o no.

¿Qué aplicación?, ¿Te gustó? Y ¿Qué te gustó?. Si la anterior pregunta es afirmativa se

pregunta acerca de su experiencia en otras aplicaciones donde aprendieron. Dando los

resultados de los motivos por los que se acercaron a ellas.

¿Cómo tendrían que ser las clases en internet? En el caso de que no utilizaran internet para

su aprendizaje se les pregunta las preferencias de como debían ser. Esta pregunta también

va encaminada a posibles alumnos que no toquen ningún instrumento, que en el transcurso

de la encuesta se les pregunta esta cuestión.

¿Te gustaría con afinador? ¿Usas aplicaciones de afinación?¿Cuál usas? Y ¿Cómo tendría

que ser una aplicación de afinación? Estas preguntas muestran las preferencias del público

sobre el uso de software de afinación en dispositivos móviles y ordenador.

¿Has pensado alguna vez en tocar algún instrumento? Pregunta que se formula a los que no

tocan instrumentos, para saber si podrían ser posibles alumnos.

¿Cuál te gustaría tocar?¿Usarías internet para aprender? Trata de saber las preferencias

dentro del grupo que no toca instrumentos, y su uso de internet para aprender. Si la

respuesta es afirmativa se le preguntará ¿Cómo tendrían que ser las clases en internet? Y

las pertinentes sobre afinador.


31 / 99

¿Por qué tocas o te gustaría tocar? Una pregunta relacionada con los motivos por los que

tocan o le gustaría tocar.

¿Cómo te consideras? Una pregunta relacionada con la edad, con una serie de respuestas

que indican el momento en el que se encuentran. Esta pregunta se realiza a todos los

encuestados.

2.3 Resultados y conclusiones.

Una vez presentado el cuestionario es momento de presentar los resultados. Antes de ello, cabe

mencionar que la muestra está seleccionada por mensajería, es decir, se le ha enviado el enlace de

la encuesta a conocidos y dentro de este grupo hay bastantes integrantes de grupos, con cierta

experiencia musical, o con afinidad por la música. Sin duda, estos pertenecen al grupo de estudio,

por lo que los resultados serán más encaminados a catalogar.

Al final del trabajo se mostrarán los resultados de la encuesta y el enlace a esta, donde el tamaño de

la muestra es 31.

A más del 90% le gusta la música, un resultado esperado, ya que es un aspecto fundamental en la

vida cotidiana. Dentro de los estilos más populares destacan el Rock con un 71% y el Blues con un

46%, y casi un 60% de los encuestados toca un instrumento. Este grupo podría considerarse

formado por aquellos que podrían desempeñar el rol de alumno o profesor.

Dentro del grupo de los que tocan algún instrumento, destaca como instrumento la guitarra, donde

los participantes afirman pertenecer en su mayoría a algún grupo y tener años de experiencia

tocando. Se puede concluir que este grupo está formado por músicos amateur o profesionales. La

mayoría de ellos usa las redes sociales o un canal para retransmitir parte de su contenido grabado, o

directamente dan clases a través de internet, y tienen suficiente experiencia tecnológica para dar

clases. Los de este grupo, que no usan redes sociales o no tienen un canal, en su mayoría no les

gustaría dar clases por internet.

La siguiente sección pregunta sobre el uso de internet para aprender, y la mayoría de los que tocan

han usado internet para este fin. En su mayoría les gusto la experiencia, entre las aplicaciones

usadas destaca Youtube, y sus preferencias muestran que es debido a que son gratis y pueden

visualizarlas cuando quieran.

A continuación, van una serie de preguntas acerca de un afinador integrado en la aplicación, a lo que

la mayoría contestan afirmativamente a que estuviese integrado. La mayoría usa aplicaciones para

afinar, y sin especificar, una del móvil. Destacan su fácil manejo y su utilidad.


32 / 99

La siguiente pregunta va dirigida a los posibles alumnos que no tocan ningún instrumento, y sus

preferencias acerca de como deben ser las clases en internet. Destacan en ellas que estén

catalogadas por niveles y que enseñen buenos temas.

Previa a esta pregunta, a los encuestados que no tocan instrumento, se les pregunta si les gustaría

tocar uno, a lo que contestan mayoritariamente sí. El instrumento de elección mayoritario, entre ellos,

sería la guitarra, y estarían dispuestos a recibir clases por internet.

Finalmente, a los que tocan o les gustaría tocar, se les pregunta los motivos, y en su mayoría lo

eligen como hobby o tocar con amigos.

La pregunta final, dedicada a conocer sus impresiones acerca de la edad que tienen, con la que se

muestra no solo su posible edad, sino su actitud, se le hace a todos los encuestados y las respuestas

que cubren más del 80% son: Joven, Veterano y la edad no importa, importa la actitud.

Después de vistos los resultados se concluye que la hipótesis no iba desencaminada, pero con

algunos matices:

Aquellos que no tienen experiencia tecnológica no les gustaría desempeñar el rol de

profesor online, aunque tengan suficiente experiencia musical para ello.

Los estilos de elección son los de la hipótesis, destacados Rock y Blues, pero hay que

destacar un nicho de amantes del Jazz, a los que se podría enganchar con algún tema

clásico de este estilo.

La referencia de Youtube como aplicación donde aprenden, es un buen ejemplo para

implementar videos en streaming bajo demanda, puesto que las preferencias muestran que

les gusta visualizarlas cuando quieran.

La aplicación integrada de afinación tiene que destacar por su fácil manejo y utilidad, es

decir, tiene que ser accesible en todo momento.

Hay un nicho de posibles alumnos de guitarra que verían con buenos ojos las clases online.

Dispuestos a tocar por diversión, es decir, con tiempo libre, que quieren ocupar tocando con

amigos.

Su momento vital muestra que se encuentran en el rango de edad de la hipótesis.

Para finalizar incluimos un enlace a la encuesta, ¿Te gusta la música?, y se completa con un anexo

de los resultados.

https://docs.google.com/forms/d/e/1FAIpQLSfqMNS8GbN9_MHcBZnmzBtF87dlEvw6OPJn2CaTb3pjPqqkhg/viewform?usp=sf_link


33 / 99

2.4 Personas.

Personas es una herramienta del diseño de la experiencia de usuario, que ayuda tanto al equipo de

diseño, como al cliente, a empatizar con sus posibles usuarios. Consiste en un documento que

describe prototipos de usuarios objetivo, es un recordatorio a la hora de diseñar de los usuarios

finales, cuestión que debe estar presente en todas las etapas de diseño.

La efectividad de la herramienta Personas es que esté basada en una investigación previa, como se

ha hecho en la encuesta online, y mezclar aspectos representativos de los datos para crear los

usuarios prototipos.

En el diseño de la aplicación de cursos online de guitarra con afinador integrado, Guitarreo, se

identifican dos roles: profesor y alumno. Por lo que se desarrollara dos de estos documentos. En

ellos se detallan datos biográficos, ocupación, estudios, preferencias, motivaciones, metas y paint

points. Los pain points son los problemas con los que se encuentra tu audiencia y que tu aplicación

puede resolver.

Ya dada una explicación de los documentos que vienen a continuación, se muestran a continuación...

Figura 1. Persona 1.


34 / 99

Figura 2. Persona 2.


35 / 99

4. Definición de objetivos/especificaciones del producto

A la hora de definir objetivos, propósito de esta sección, la guía PMBOK (2012) menciona que estos

deben cumplir unos principios, que por las siglas en inglés SMART, serían los siguientes:

Específico (Specific). Objetivo concreto y sencillo.

Medible (Measurable). Criterios para medir el progreso y evaluar el trabajo final.

Alcanzable (Attainable). Realista.

Relevante (Revelant). Relevante tanto para el estudiante como la comunidad.

Limitado en el tiempo (Time-bound). Debe ser realizable en los límites de tiempo.

Siguiendo estos principios conseguimos definir objetivos y su alcance, y se muestran estos como una

guía a seguir, y fin último a conseguir en el proyecto Fin de Máster. De tal manera que este apartado

será fundamental a lo largo de todo el proceso de ejecución, y el cambio de estos solo puede estar

justificado por imposibilidad de cumplimiento de calendario.

A continuación, se muestran y definen los siguientes objetivos para el proyecto Fin de Máster:

1. Estudiar el posible público objetivo para el aplicativo de cursos con afinador integrado, que

permita desarrollar herramientas de análisis de diseño como Personas.

2. Estudiar la disposición de información (Arquitectura de Información), interacciones con

usuario (Diagramas de flujo), prototipado y test de usabilidad, para conseguir un diseño

centrado en el usuario y de simple manejo.

3. Implementar un afinador online con características de procesado del sonido para encontrar la

frecuencia principal, precisión, fácil manejo, interactivo, para distintos instrumentos y

afinaciones.

4. Diseñar un aplicativo de cursos de guitarra online con tres perfiles: usuario, profesor y

administrador. Que permita el intercambio de preguntas y notificaciones entre usuario y

profesor, con clases en video streaming. Donde el contenido de los cursos, y su precio, sea

administrado por el profesor, y el administrador sea el encargado del soporte.

5. Diseñar la integración del afinador en el aplicativo de cursos.

Es adecuado mostrar las tecnologías que acompañarán la consecución de los objetivos, y de tal

manera, se muestra la siguiente lista, que a priori muestra los elementos tecnológicos:

Para el objetivo 1 se utiliza la bibliografía referente al tema Carolyn Chandler; Russ Unger

(2009),Lisandra Maioli (2018)Andrew Hinton (2014), donde se opta por una encuesta online

con Google formularios y su posterior análisis.

Para el objetivo 2 se hará uso de la siguiente bibliografía Louis M. Rea; Richard A. Parker

(1992), y las tecnologías usadas serán: Flowmapp, para crear el sitemap y diagramas de

https://es.wikipedia.org/wiki/Guía_de_los_fundamentos_para_la_dirección_de_proyectos

https://www.google.com/intl/es_es/forms/about/



36 / 99

flujo, optimalworkshop, para testar la Arquitectura de la Información y Justinmind para el

prototipado

Las tecnologías que se usarán para el desarrollo del objetivo 3 serán: HTML, CSS y

Javascript.

El objetivo 4 se realiza con las mismas herramientas que el 2.

No están fuera de riesgos el cumplimiento del enumerado de objetivos, ya que comporta el

perfeccionamiento de muchos de los temas estudiados en el Máster, del software a utilizar y

herramientas de programación. Para atender a estos se debe llevar un registro y seguimiento, y

planes para actuar en caso de bloqueo.

https://www.optimalworkshop.com/

https://www.invisionapp.com/


37 / 99

Capítulo 3: Diseño

1. Arquitectura general de la aplicación/sistema/servicio

SI bien es cierto que el proyecto queda para futuras actualizaciones, solamente se desarrolla un

front-end del afinador totalmente funcional, el aplicativo de cursos, a pesar de finalizar en esta fase

en estado pendiente de desarrollo, con el diseño acabado en un prototipo funcional. La idea general

está totalmente acabada.

Desde un principio se planteó la posibilidad de alcanzar el desarrollo del aplicativo de cursos, por lo

que se decidieron tanto las tecnologías, como el diseño de software a seguir. Por falta de tiempo no

se puede incluir en esta entrega, pero queda abierto su desarrollo.

Así, la aplicación quedaría, en una visión general, de la siguiente manera:

Front-end: Angular es la tecnología adecuada y elegida para este fin, además de incorporar

todo lo desarrollado en el prototipo se puede ampliar con librerias propias de este framework.

Back-end: Se elige Node.js, es una decisión sencilla, debido a su alto rendimiento por su

arquitectura basada en eventos, lo que proporciona una facil integración con el front-end.

Persistencia: el back-end lleva anclado tecnologías de acceso a la nube, y con firebase se

pretende generar todas las colecciones necesarias en una base noSQL.

SI bien el diseño general parece adecuado, este lleva mucho desarrollo, y la imposibilidad de

acabarlo para esta entrega, pero con este esquema es posible el producto completo, ya que se

conocen las tecnologías y su aplicación.


38 / 99

2. Arquitectura de la información y diagramas de navegación

2.1 Introducción. La Arquitectura de la Información no tiene un único significado, ya que es una disciplina que está

presente en muchos campos, donde la presentación de la información es fundamental para su

entendimiento, clarificación y facilidad de comprensión. Así, se pueden encontrar distintas

definiciones dependiendo del ámbito de aplicación:

El diseño de la estructura de información compartida entre varios entornos.

Sintetizar la organización, el etiquetado, la búsqueda, y sistemas de navegación en

ecosistemas de múltiples canales, tanto digitales como físicos.

El arte y ciencia de dar forma a los productos y experiencias de información para su

usabilidad, búsqueda y entendimiento.

La disciplina emergente y prácticas comunes enfocadas a extraer principios de diseño y

arquitectura en el mundo digital.

Por lo que puede deducirse de estas definiciones se puede concluir que no existe un método único

para conseguir una buena Arquitectura de la Información, de tal manera que consiga siempre los

resultados. Así, en la intersección de tres grupos encontraremos la posible solución, estos son:

contexto, contenido y usuarios.

Todos los proyectos digitales tienen un contexto que los aplica, puede ser una organización, una

empresa, etc, estas tienen su propia idiosincrasia y unas reglas que habrá que respetar. En el caso

del proyecto Fin de Máster, se tiene más libertad en este aspecto, y podemos hacer coincidir criterios

de los otros conjuntos en este.

El contenido tiene una definición más amplia, y abarca documentos, aplicaciones, servicios,

esquemas y metadatos, que las personas necesitan usar o encontrar en sus sistemas.

Los usuarios son una abstracción del conjunto de personas que usarán la aplicación, y no hay que

olvidarse que son personas, con deseos, preocupaciones, sueños, etc. En un diseño orientado a la

experiencia del usuario, esta es la pata más importante, y a la que todas deben hacer pie, como es el

caso.


39 / 99

2.2 Navegación

El primer aspecto a desarrollar es la navegación para la aplicación Guitarreo, para ello tendremos

tres sistemas de navegación:

En el encabezado la navegación global.

En un menú secundario la navegación local

Dentro del contenido la navegación contextual.

Es aconsejable hacer el esquema de navegación flexible logrando que la jerarquía de información

esté interconectada. Así se diseña un sitemap con la aplicación Flowmapp, donde muestra los

elementos de una navegación global, pero la interconexión entre estos se realizará con los sistemas

de navegación local y contextual, en el momento que se produzca una relación entre estos.

Por lo tanto se muestra en el anexo el sitemap de la aplicación, adjunto, aparte, una imagen en alta

calidad del del mismo. Sin duda, este tiene aspectos a destacar, relacionados con la investigación

previa en público objetivo:

Tenemos enlaces propios del negocio de la aplicación, como son: carrito, iniciar sesión/ registrarse,

apuntarse como profesor, notificaciones y mis Cursos. Estos son aclarados en funcionamiento con

diagramas de flujo. Hay que destacar que son parte fundamental en la experiencia del usuario y el

resultado de estos vendrá de una interconexión entre ellos, es decir, además de una campana de

alertas en el menú principal para notificaciones, esta tiene que redirigir al curso pertinente donde se

realizó la notificación. Además, algunos enlaces solo son visibles, por ejemplo, cuando iniciamos

sesión, como son perfil y mis Cursos.

Sin duda los enlaces de catalogación en estilos, grupos, temas y técnicas avanzadas, parten de la

investigación previa, y muchos de ellos forman parte de las preferencias del público, además todos

los cursos se catalogarán por niveles. Cabe destacar que parte de la información que rellena el

profesor, a la hora de subir un curso, es etiquetar según esta temática, fundamental para una

correcta presentación.

Un sistema de filtrado no podría abarcar tantos campos como grupos o temas hay, por lo que se

optaría por un listado alfabético, pero, siempre se podría filtrar las catalogaciones por otras etiquetas,

como: precio, estilos, dificultad, oferta, satisfacción, puntuaciones, etc.

Un campo de búsqueda en el encabezado se hace fundamental para un catálogo de cursos, este no

forma parte de la jerarquía de navegación, por lo que no está presente en el sitemap. En la etapa de

prototipado se diseña la funcionalidad del buscador, este pertenece a los sistemas de navegación por

búsqueda y en este tipo de aplicaciones es necesario que esté presente.


40 / 99

En general el diseño del sitemap es amplio, es decir, presenta muchos enlaces en el inicio, pero con

poca profundidad. Este diseño se ajusta al caso de Guitarreo, donde, necesitamos tener presente

muchos enlaces propios del negocio de la aplicación, ya que presentar esta información de manera

clara, permite agilidad y comprensión por parte del usuario.

2.3 Test TreeJack a la navegación

Además de seguir unos principios de diseño para la elaboración del sitemap, es pertinente probarlo

con usuarios, para ello se elabora un Treejack con la aplicación optimalworkshop. Esta permite hacer

un test de la arquitectura del sitemap, creando una serie de tareas, que usuarios pertenecientes al

público objetivo, es decir, a los encuestados, mediante enlace web, acceden a las tareas.

El Treejack es una de las formas de testar la Arquitectura de la Información, donde mediante tareas o

preguntas, se pide al usuario que marque la opción correcta dentro del arbol de navegación,

previamente se asignan las respuestas correctas, así, las cuestiones pretenden averiguar la

desviación en las respuestas al test.

El estudio permite estudiar múltiples parámetros de la interacción del usuario con la prueba, como:

porcentaje de acierto, directo o indirecto, porcentaje de fallo, primer click, tiempo de ejecución, etc.

Todos ellos serán presentados y analizados a continuación.

Uno de los problemas que se encuentra, es que la aplicación optimalworkshop solo permite una

muestra de diez participantes y tres tareas en la versión gratuita. Por lo tanto, el estudio estará

limitado en este aspecto, aún así, se obtienen conclusiones que con un resultado más amplio podrían

ser corroboradas.

Sin más, se describen y se analizan los resultados.

Las tres tareas que componen el Treejack son las siguientes:

Tarea 1. Guitarreo es una web dedicada a cursos de guitarra. Estás interesado en recibir

unas lecciones de Punk para mejorar en tu grupo. ¿Dónde las encontraras en la web?.

◦ Respuesta correcta: Inicio > Estilos > Punk > curso de Punk.

◦ Motivo: Es fundamental que los usuarios entiendan el sistema de navegación, y en el

apartado de cursos la parte de estilos es una catalogación principal, necesaria en su

entendimiento.

Tarea 2. Guitarreo es una web dedicada a cursos de guitarra. Has visto un solo de Satriani y

te asombro el tapping del solo, te gustaría aprender algo parecido. ¿Dónde puedes

encontrarlo en la web?


41 / 99

◦ Respuesta correcta: Inicio > Técnicas avanzadas > Tapping > curso de Tapping.

◦ Motivo: Es una pregunta para público con ciertos conocimientos de guitarra eléctrica, que

sepan diferenciar el término tapping como una de las técnicas avanzadas.

Tarea 3. Guitarreo es una web dedicada a cursos de guitarra. Te gustaría resolver una duda

acerca de un punteo en uno de los cursos en que estás apuntado. ¿ a dónde te dirigirías?

◦ Respuesta correcta: Inicio > Mis Cursos > Curso > Preguntas y respuestas.

◦ Motivo: En el funcionamiento de los cursos es fundamental que los usuarios entiendan el

enlace que lleva a visualizarlo y las distintas características, como el foro de preguntas y

respuestas.

Se ha seleccionado que el árbol de enlaces se ordene de forma aleatoria, al igual que las tareas, así

se pretende asegurar que el orden de estos no muestre pistas a la hora de realizar el test.

En líneas generales destaca el alto acierto, que en el menor de los casos es del 80%. La duración del

test es de poco más de 2 minutos, un tiempo largo para tres tareas, debido a que el sitemap es

bastante amplio. Los participantes fueron bastante directos al encontrar la respuesta correcta, es

decir, no tuvieron que subir por el árbol de navegación para rectificar, lo que muestra que los enlaces

se entienden claramente.

A continuación, se analizan tarea a tarea los parámetros más significativos:

Tarea 1.

Todos los participantes respondieron bien esta tarea, y la mayoría de forma directa, es decir, el 80%

de los que buscaron la respuesta la encontraron sin tener que rectificar en el camino escogido. Lo

que muestra la buena elección del nodo, ya que además de servir para encontrar claramente un

curso según preferencias, es una catalogación clara de estos.

El tiempo de resolución es corto 22s, los participantes buscan un criterio que marque los estilos que

enseñan los cursos, y lo encuentran fácilmente. Y como se comentaba anteriormente el parámetro de

respuesta directa marca un 80%, muy elevado.

La posible confusión se encuentra con el nodo Grupos, es natural que duden con este nodo, ya que

muchas veces identificamos un estilo musical por un representante de este, es decir, un grupo.

Tarea 2.

Aquí se encuentra un resultado bueno de acierto, con un 80%, pero dos de los participantes fallaron.

Si vemos los caminos escogidos, se encuentra que en primer click, escogen nodos como Grupos o

Temas, ya que la pregunta presenta la ambigüedad de presentarnos a un músico, además, los


42 / 99

participantes pueden no identificar la técnica de tapping, por lo que estos son los mayores problemas

encontrados en esta tarea.

De todos modos se encuentra un tiempo de respuesta bueno, de 17s, y en su mayoría la dirección es

correcta en un 70%.

Tarea 3.

Esta tarea muestra parte del negocio de la aplicación, ya que los usuarios deben acudir a este nodo

para empezar o continuar sus cursos. Las dudas de los participantes reflejan que el nodo puede

llevar a confusión con el de contacto, pero la dinámica web es entendida por un 80% que acertaron.

La duración en la respuesta refleja las dudas que tienen los usuarios, con un tiempo de 28s, pero en

su mayoría encuentran que Mis Cursos es el nodo adecuado. Esta estructura es propia de otras web

de cursos, lo que facilita su comprensión por los usuarios.

Los resultados indican pocas mejoras en el sitemap, ante estos podemos concluir que son acertadas

las decisiones, por lo tanto no se realizan cambios a priori, pero la comprensión definitiva de la

dinámica, o user flow, se entenderá con diagramas de flujo en siguientes secciones.

Se adjunta toda la documentación referente al estudio, junto con los siguientes enlaces de resultados

y al propio test:

Test. https://n70fwsng.optimalworkshop.com/treejack/nkfq6oq6-0

Resultados: https://app.optimalworkshop.com/treejack/n70fwsng/nkfq6oq6-0/shared-

results/ma20kt55v703n5w447z4v11jt3ls1og3

https://n70fwsng.optimalworkshop.com/treejack/nkfq6oq6-0

https://app.optimalworkshop.com/treejack/n70fwsng/nkfq6oq6-0/shared-results/ma20kt55v703n5w447z4v11jt3ls1og3

https://app.optimalworkshop.com/treejack/n70fwsng/nkfq6oq6-0/shared-results/ma20kt55v703n5w447z4v11jt3ls1og3


43 / 99

3. Diseño gráfico e interfaces

Se han desarrollado en paralelo, el afinador y el aplicativo de cursos. Respecto al afinador hay que

destacar que se han seguido los estilos y línea gráfica del prototipo, como se puede comprobar en la

presentación y entregas de producto. De tal manera que en esta sección se describen los estilos del

afinador, y a continuación los del aplicativo de cursos.

3..1 Estilos afinador

Se han escogido formas simples: rectángulos, círculos y triángulos para la línea gráfica, ya que son

fácilmente adaptables al lenguaje de estilos en cascada CSS.

Las características destacadas del diseño han sido destacar:

el panel de ajuste fino, con una escala de rectángulos que se colorean para marcar la

desviación.

El marcador de nota, el cual no es dinámico por la imposibilidad de capturar sonido.

Las notas de cada instrumento y afinación, que se le ha dado un evento de sonido.

Por último, los selectores de instrumento y afinación, que en el prototipo final escogen la

imagen de fondo.

A la hora de acabar el prototipo es fundamental escoger una paleta de color, donde se ha escogido la

siguiente:

#79d70f

#d32626

#f5a31a

#edf4f2

Para dar elementos de forma y profundidad se han utilizado gradientes de difusión. Y para finalizar

se ha escogido imágenes de los instrumentos en el banco de imágenes pexels, las cuales son de

libre uso, para tener un elemento visual del instrumento seleccionado. Para su correcta visualización

se ha dado transparencia al resto de formas, ya que la imagen se sitúa en el fondo.

3.2 Estilos aplicativo de cursos online de guitarra eléctrica

La línea gráfica del aplicativo se ha facilitado gracias a la herramienta adquirida Justinmind, esta

presenta facilidades a la hora de escoger iconos y formas.

Lo primero ha sido elegir la paleta de colores, la cual se presenta a continuación:

https://www.pexels.com/es-es/


44 / 99

Figura 3. Paleta de colores

Esta refleja una gama de grises, dorado y plateado, que en general se ha respetado, ha no ser por

alguna iconografía.

El sitemap presentado con anterioridad, ha sido la guía para desarrollar el menú principal, el cual

está presente en la mayoría de páginas.

Figura 4. Menú

En el podemos ver las líneas generales de estilo, donde se consigue integrar los elementos de forma

acertada, el logotipo un poco gamberro, recuerda a un grafiti de un adolescente, los iconos sacados

de font-awesome, y el uso del color

Figura 5. Menú móvil

3.3 Usabilidad/UX

Ya se hizo referencia a este apartado en secciones anteriores, debido a que el estudio de la

arquitectura de la información presenta el site map y su test treejack. Aquí se profundiza en las

interacciones del usurio con el aplicativo de cursos.


45 / 99

Para ello se elaboran diagramas de flujo, o user flows, para las principales interacciones del usuario.

Estos serán adjuntados, junto al sitemap, en formato imagen, para un mejor examen.

Como descripción, se han desarrollado 4 diagramas de flujo: compra de curso, carrito, iniciar sesión y

apuntarse como profesor. Todos ellos se incorporan al prototipo con acierto y consiguen una

interaccion fluida con el usuario.

A continuación describiremos distintos casos de uso:

Caso 1. Usuario pretende iniciar sesión, pero ha olvidado la contraseña.

El usuario pretende iniciar sesión, por ello se dirige al botón iniciar sesión, allí escribe su usuario y

contraseña, pero le da error de contraseña. Entonces se dirige al enlace “¿Has olvidado tu

contraseña?”, la cual dirige a una página donde se le pide el email. Recibe en su correo el enlace

para cambiarla, vuelve a la página con el usuario y contraseña, e inicia sesión. A continuación, se le

dirige al inicio y son accesibles el perfil y Mis cursos.

Caso 2. Un usuario quiere registrarse como profesor y subir un curso.

Va a la pantalla de inicio y pulsa el enlace de Apuntarse como profesor. Se le pide que inicie sesión,

lo cual hace. Se le muestra las condiciones del servicio que debe aceptar. Añade los datos de

facturación a su cuenta, donde se realizarán los pagos y los cobros. Se le añaden al perfil y Mis

cursos los campos de profesor. Se le redirige a Mis cursos, donde pulsa el botón añadir curso,

rellena los campos, sube el video, se le redirige a Mis cursos al añadirlo y ve el nuevo curso como

profesor.

Caso 3. Un usuario pretende comprar un curso, por lo que lo añade a carrito y

completa la compra

El usuario quiere un curso de Rock, se dirige a estilos y elige Rock, selecciona un curso por la

puntuación de los usuarios y la descripción, donde enseñan temas que le gustan. Pulsa comprar por

lo que se le dirige a carrito. Se le pide que inicie sesión y se le muestra los detalles de la compra. Le

da a seguir con la compra y se le dirige a que introduzca los datos de la tarjeta y se le pregunta si

quiere guardarla, lo que acepta. Se confirma el trámite bancario y se le imprime la orden de compra

con botón seguir. Finalmente se le redirige a Mis cursos y tiene su nuevo curso en su colección.


46 / 99

4. Lenguajes de programación y APIs utilizadas

Para el desarrollo del afinador se ha escogido un marco sencillo, con tecnologías del lado del cliente:

HTML, CSS y JavaScript, se ha programado un afinador de fácil integración en cualquier desarrollo

posterior.

Gracias a la API de procesado de señal que incorpora el navegador, se ha podido procesar la señal,

para a continuación encontrar la frecuencia principal del sonido. Esta aproximación se aleja de otras

que requieren de más procesado.

En un principio se proponía desarrollarlo con el framework Angular, pero no se vio la necesidad de

utilizarlo, porque simplemente había que desarrollar un componente y no necesitava interacción entre

otros a través de servicios.


47 / 99

Capítulo 4: Implementación

1. Requisitos de instalación

Tanto el ejecutable del afinador como los prototipos se presentan en formato HTML, por lo tanto,

simplemente habrá que hacer doble click sobre el index.html y se ejecutan.

2. Desarrollo del afinador.

Se ha completado otro de los objetivos del proyecto de Trabajo Fin de Máster. En este caso se trata

del afinador con ayudas de software, para ello se ha utilizado referencias en la web como: mozilla

developer, proyecto libre de Google Archive guitar-tuner y referencias varias.

Si en un principio, se había optado por seguir la referencia de Google, pronto se valoró la primera

opción, la de mozilla developer:

La opción de Google opta por un algoritmo de autocorrelación, lo que implica hacer el cálculo para

cada frecuencia, y al utilizar varios instrumentos, el rango de estos es muy amplio, lo que da

problemas de cálculo y precisión.

La opción que se ha escogido es utilizar las herramientas del navegador para capturar y analizar

sonidos. Así construyendo la representación en frecuencias, como indica el enlace de mozilla

developer, se puede sacar la frecuencia dominante y testarla con todos los instrumentos, creando

una función de afinación para cada uno de estos. Para su alta precisión se han dividido el rango de

frecuencias en 2 elevado a 15, 32768 divisiones.

Todo este desarrollo se ha simplificado con tecnologías web del lado del cliente: HTML, CSS y

JavaScript. Dando la posibilidad de ejecutarse en cualquier navegador. Si bien, el propósito inicial era

utilizar frameworks como Angular, no se vio la necesidad dado las características del proyecto: solo

abarcaba una página y una serie de eventos con select de HTML.

Figura 6. afinador en funcionamiento



https://github.com/googlearchive/guitar-tuner


48 / 99

El diseño se ha respetado en lo máximo posible a su versión de prototipo, añadiendo interactividad,

donde:

Al seleccionar el instrumento y afinación se muestran las notas a afinar, sonando si pulsas en

ellas.

La paleta e imágenes se han respetado según el prototipo inicial.

Fácil activación, donde el marcador central indica PLAY para comenzar a capturar, previo a

permitir el acceso al micrófono.

Se ha cambiado el color del triángulo central de la pantalla de ajuste fino, causaba confusión,

se ha elegido el color cálido de la paleta.

Una vez que empieza a capturar, el ajuste fino se superpone en color, y captura cualquier

frecuencia indicando la nota en el marcador, y la desviación en la pantalla de ajuste fino.

El resultado es amable y presenta precisión para el rango de instrumentos y afinaciones, y otros

como adaptabilidad al tamaño de pantalla, que lleva trabajo con la hoja de estilos. Pero en definitiva

el trabajo parece conseguido.

Para ello se adjuntan el ejecutable y un video demostrativo afinando una guitarra eléctrica, que

forman parte de los test.


49 / 99

Capítulo 5: Demostración

1. Instrucciones de uso

Previo al uso se recomienda ver las demostraciones en video, donde se explica el proceder para las

principales acciones tanto en el afinador, como en el prototipo de aplicativo de cursos.

Aun así, cabe decir que su uso es intuitivo. Por ejemplo, el afinador simplemente hay que pulsar el

play y permitir la recogida de audio por el micrófono. A partir de este punto ya recoge el audio y lo

analiza. Si quieres afinar un instrumento simplemente tienes que seleccionarlo y tocar las notas para

ver su corrección en el panel.

Para el uso del aplicativo de cursos, se intenta que las acciones sean habituales para el usuario,

también vienen descritas en sus correspondientes flujos. Para más información se debe consultar las

demostraciones en video.


50 / 99

2. Prototipos

2.1 Afinador

El proceso recursivo de test de usabilidad y prototipado es la fase final en el proceso de diseño. En

este caso se desarrolla el prototipo de un afinador de varios instrumentos y afinaciones, que irá

integrado en la web Guitarreo, aplicación de cursos de guitarra eléctrica online.

El prototipo está pensado para un afinador con ayudas de software, pero su funcionalidad solo se

puede llevar a cabo en la fase de desarrollo, ya que el software de prototipado no permite capturar

sonido. Aun así, se ha conseguido un prototipo bastante interactivo, ya que cambia el estado al

seleccionar instrumentos y afinaciones, con la posibilidad de escuchar las notas a afinar.

Debido a la dificultad de elaborar un prototipo responsive, ya que los elementos gráficos son

difícilmente adaptables sin perder su elemento visual. Se ha optado por construir un prototipo para

ordenador, y otro para móvil, este si es adaptable a la rotación de pantalla, es decir, portrait y

landscape.

Para elaborarlo se ha adquirido una licencia del software Justinmind, dentro de las opciones de

software, era una de las posibles. Además, se cuenta con experiencia y práctica con la herramienta,

lo que permite ejecutar la labor de manera fluida, este factor ha sido determinante para su

adquisición.

El primer paso ha sido realizar un prototipo en blanco y negro, en él se ha adaptado formas estándar,

por su facilidad a la hora de implementarlas en la web, como rectángulos, círculos, triángulos, y

elementos de HTML como selectores.

Las características destacadas del diseño del prototipo en blanco y negro, han sido destacar:

el panel de ajuste fino, con una escala de rectángulos que se colorean para marcar la

desviación.

El marcador de nota, el cual no es dinámico por la imposibilidad de capturar sonido.

Las notas de cada instrumento y afinación, que se le ha dado un evento de sonido.

Por último, los selectores de instrumento y afinación, que en el prototipo final escogen la

imagen de fondo.

A la hora de acabar el prototipo es fundamental escoger una paleta de color, donde se ha escogido la

siguiente:

#79d70f


51 / 99

#d32626

#f5a31a

#edf4f2

Para dar elementos de forma y profundidad se han utilizado gradientes de difusión. Y para finalizar

se ha escogido imágenes de los instrumentos en el banco de imágenes pexels, las cuales son de

libre uso, para tener un elemento visual del instrumento seleccionado. Para su correcta visualización

se ha dado transparencia al resto de formas, ya que la imagen se sitúa en el fondo.

El último paso ha sido dar la interacción sonora, para ello se ha grabado los diferentes sonidos para

cada instrumento y afinación, los cuales suenan al pulsar la nota correspondiente.

2.2 Aplicativo de cursos

Se han completado el prototipado en versión ordenador y móvil, ambos en diferentes archivos

ejecutables. Para ello, se han elaborado una serie de decisiones respecto al diseño, tanto en

apariencia como interacción.

Lo primero ha sido elegir la paleta de colores, la cual se presenta a continuación:

Figura 3. Paleta de colores

Esta refleja una gama de grises, dorado y plateado, que en general se ha respetado, ha no ser por

alguna iconografía.

El sitemap presentado en la anterior entrega ha sido la guía para desarrollar el menú principal, el cual

está presente en la mayoría de páginas.

https://www.pexels.com/es-es/


52 / 99

Figura 4. Menú

Las que no presentan este menú son utilizados para el flujo de acciones como: compra, subir cursos,

iniciar sesión, etc. Estos han sido desarrollados con los diagramas de flujo de la anterior entrega.

Su diseño en interacción parece acertado, ya que permite versatilidad en sus funciones, con campos

de búsqueda, filtrado por estilos y técnicas, búsqueda alfabética de temas y grupos, lo que permite al

usuario alternativas en su uso.

Los flujos se presentan de manera intuitiva, donde un paso lleva al siguiente, creando un diálogo con

el usuario. Para simplificar se ha decidido prescindir del carrito en la versión móvil, lo cual parece

acertado, ya que consigue simplificar el proceso de compra, y no hay mucha gente que adquiera más

de un curso en una compra.

Figura 5. Menú móvil

La herramienta Justinmind permite mucha versatilidad, pero precisa perfeccionamiento, el cual se ha

ido adquiriendo, por lo que el prototipo móvil probablemente este mejor acabado. A pesar de ello,

toda la funcionalidad propuesta durante la anterior entrega, basada en investigación con el público,

se ha aplicado a ambos prototipos.

Se adjuntan en anexos las capturas de pantalla del prototipo tanto móvil como ordenador, ademas de

en los archivos adjuntados al proyecto


53 / 99

Capítulo 5: Conclusiones y líneas de futuro

1. Conclusiones

El trabajo ha sido duro y satisfactorio, ni yo creía que lo pudiese llevar a cabo, para ello ha sido

fundamental planificarse, para asentar las ideas sobre el proyecto, el trabajo continuo y mucho

ingenio. Estas son las recetas para que un proyecto finalice bien.

Debido a la situación de pandemia no se pudo lograr realizar los test de usabilidad previstos, se

pospusieron, pero estos entrañan la participación directa de terceros, lo cual es algo de lo que se

dispuso.

La planificación ha seguido su curso y se ha permanecido fiel a ella, con los objetivos propuestos

como meta, cabe decir que se han cumplido. Esto fue debido a una metodología continua donde se

analizaron los problemas a priori, y pensado en planes alternativos para lograrlos.

Sin duda el cambio que se propondría sería la carga de trabajo, ya que concurrieron durante el

proyecto dos asignaturas del Máster y un curso para desempleados, que estuve obligado a hacer, de

ingles. Si estas no fueran las circunstancias, probablemente estaría más satisfecho con el trabajo

final.


54 / 99

2. Líneas de futuro

Por todo lo dicho con anterioridad el proyecto queda abierto a su futuro desarrollo, con grandes

posibilidades de lograr. No es el fin un proyecto de un semestre, sino, el comienzo de trabajar

planificando y desarrollando toda la documentación necesaria, para que posteriormente, yo mismo, o

un tercero pueda retomarlo con garantías.


55 / 99

Bibliografía

GitHub Googlearchive, proyecto guitar-tuner, enlace:

https://github.com/googlearchive/guitar-tuner, Licencia: Apache 2.0.

Project Management Institute (2012) A Guide to the Project Management Body of

Knowledge.

Louis M. Rea; Richard A. Parker (1992) Designing and Conducting Survey Research: A

Comprehensive Guide

Carolyn Chandler; Russ Unger (2009) A Project Guide to UX Design: For user experience

designers in the field or in the making

Lisandra Maioli (2018) Fixing Bad UX Designs.

Andrew Hinton (2014) Understanding Context: Environment, Language, and Information

Architecture

.

https://github.com/googlearchive/guitar-tuner


56 / 99

Anexos

Anexo A: Entregables del proyecto

Proyecto:

Afinador ejecutables

Prototipo móvil ejecutables.

Prototipo ordenador ejecutables.

Capturas de los tres productos

Demostraciones de los tres productos

sitemap y diagramas de flujo

Informe de trabajo

archivos de trabajo

archivo justinmind móvil

archivo justinmind ordenador

memoria

Presentación académica

Presentación pública

Anexo B: Capturas de pantalla


57 / 99


58 / 99


59 / 99


60 / 99


61 / 99


62 / 99


63 / 99

.


64 / 99


65 / 99


66 / 99


67 / 99


68 / 99


69 / 99


70 / 99


71 / 99


72 / 99


73 / 99


74 / 99


75 / 99


76 / 99


77 / 99


78 / 99


79 / 99


80 / 99


81 / 99


82 / 99


83 / 99


84 / 99


85 / 99


86 / 99


87 / 99


88 / 99


89 / 99


90 / 99

Anexo C. Resumen de resultados


91 / 99


92 / 99


93 / 99


94 / 99


95 / 99


96 / 99


97 / 99


98 / 99


99 / 99

desarrollo de un afinador integrado en un aplicativo de

Documents