Toquen el DOM

Descripción

Trabajaremos en crear una web para una escuela de música online, con el plus de que los usuarios van a poder practicar con algunos de los instrumentos porque estos van a reproducir sonidos con click o con pulsaciones de teclado. La Escuela de música quiere ver las ofertas de diferentes grupos de desarrolladores para ver con cuál decide quedarse.

Contexto del proyecto

La tecnología ha permitido que se puedan migrar a la virtualidad muchas de las actividades que eran estrictamente presenciales, entre esas la educación, y en este caso puntual, las escuelas de música.

Desarrolla una aplicación web para la escuela de música "Toquen el DOM", en la que los usuarios pueden acceder al instrumento de su preferencia y practicar en él de forma didáctica. El diseño de la web queda a criterio de el equipo de desarrollo, aunque cabe aclarar que en los requerimientos de la escuela está la creatividad como punto importante a tener en cuenta.

Requerimientos funcionales obligatorios

1. La aplicación debe ofrecer tres instrumentos como minímo a elegir entre: piano, batería, guitarra y bajo.
2. Los sonidos deben estar en el orden correcto y corresponder con las teclas del piano o las cuerdas de la guitarra y el bajo. Asimismo, deben coincidir con las distintas partes de la batería.
3. La aplicación DEBE constar de las siguientes páginas: home, instrumentos y about us.
4. La home DEBE mostrar una pequeña presentación del equipo y una galería de los instrumentos.
5. La página de instrumentos DEBE mostrar los instrumentos que se van a utilizar para practicar.
6. La página de about us se DEBE mostrar una imagen de las integrantes del grupo como si fuesen artistas, junto a una breve descripción.
7. La barra de navegación DEBE mostrar un menú con las opciones de home, instrumentos y about us. Debe estar accesible siempre.
8. La aplicación debe tener un diseño agradable, alusivo a la educación y a la música.
9. Cada instrumento se DEBE poder tocar con el mouse.
10. Cada instrumento se DEBE poder tocar con el teclado.
11. Se DEBE poder tocar de manera repetida y cuantas veces quiera el usuario.
12. El sonido de una parte del instrumento DEBE poder sonar a la par con las demás partes (Teclas para el piano, platillos, bombo, redoblante, etc para la batería).
13. Cuando se toque un elemento del instrumento DEBE mostrar algún movimento ( Ya sea Vibración, movimiento, o el efecto de que se oprime en el caso de las teclas)

Requerimientos técnicos

• Utilizar el framework SCRUM para desarrollar el proyecto.
• Utilizar GitFlow para el desarrollo del código.
• La aplicación debe ser responsive y adaptable a dispositivos de distinto tamaño.
• El desarrollo del código debe hacerse sin frameworks ni librerías, a excepción de su uso par la gestión del sonido y las animaciones.
• Se debe desplegar en producción

Modalidades Pedagógicas

• Los equipos serán de 4-5 personas.
• Se trabajará durante 2 semanas, realizándose 2 sprints.
• La fecha de presentación y entrega es el 5 de Diciembre.
• Se trabajará mediante GitHub Classroom.

Modalidades de Evaluación

• La evaluación se realizará mediante comentarios orales el día de la presentación.
• Se hará también una dinámica de autoevaluación.

Bonus Track

1. Crear el apartado Gramola, donde el usuario pueda seleccionar una canción y elegir los tres instrumentos para ser interpretada.
2. Crear un apartado con documentación sobre primeros pasos para tocar los instrumentos.
3. Incluir videos tutoriales de cómo tocar un instrumento con canciones sencillas y notas de cada instrumento para tocar en vivo.

Entregables

• Repositorio de classroom con el fichero README.md explicando:
  • Descripción del proyecto
  • Link del despliegue
  • Demo (Figma)
  • Herramientas utilizadas
  • Cómo instalar el proyecto en el ordenador (local)
  • Autor@s
• Presentación del proyecto

¿Qué competencias se evalúan?

• Maquetar una web nivel 2
• Desarrollar una interfaz de usuario dinámica nivel 2
• Crear una interfaz de usuario web estática y adaptable nivel 1

¿Qué implica este nivel?

Maquetar una web nivel 2

Partiendo de una herramienta de maquetación determinada, reproducir una maquetación hecha con la misma herramienta. Describir los elementos de la carta gráfica utilizada, así como los elementos de seguridad previstos. Formalizar la secuencia de interfases tomando como base el modelo proporcionado. Demostrar que la maqueta puede adaptarse a diferentes dispositivos móviles. Ser capaz de justificar la elección de la ergonomía para una buena experiencia de usuario.

Justificar el vínculo entre las interfaces creadas y los casos de uso o historias de usuario. Añadir nuevas interfaces que correspondan a otros casos de uso respetando los criterios anteriores de carta gráfica, seguridad, ergonomía y adaptabilidad.

Desarrollar una interfaz de usuario dinámica nivel 2

Partiendo de la descripción de necesidades y de una página web dinámica existente (realizada o no por el alumno):

• Hacer cambios importantes (añadiendo campos o procesamientos en el lado del cliente),

• Añadir páginas dinámicas,

• Añadir pruebas de procesamientos del lado del cliente que no habrían sido tomados en cuenta hasta entonces.

Crear una interfaz de usuario web estática y adaptable nivel 1

Partiendo de una descripción de necesidades (maquetación) y de una interfaz de usuario estática existente:

• Adaptar el contenido de la interfaz (cambiar el texto,...)

• Hacer pequeños cambios en la estructura de la interfaz (añado un título, un párrafo,...)

• Adaptar el diseño de la interfaz (cambio el color de un título, cambio la fuente,...)

Recursos

• Página de inspiración 1
• Página de inspiración 2
• Librería Keypress