Bienvenido a la Academia de Música Virtual Soul Keys Academy, una plataforma en línea que permite a los usuarios practicar y aprender a tocar instrumentos musicales desde cualquier parte del mundo. Actualmente, nuestro sitio web ofrece un piano virtual completamente funcional, junto con páginas adicionales para la academia, información de contacto y una sección para instrumentos en desarrollo donde podrás jugar mientras te traemos nuevos instrumentos.
- Descripción del Proyecto
- Características
- Tecnologías Utilizadas
- Estructura del Proyecto
- Prototipo de Figma
- Demo
- Guía de Instalación
- Próximos Pasos
- Créditos
- Contacto
Soul Keys Academy es un proyecto web desarrollado durante el bootcamp de desarrollo web de Factoria F5 y Orange Digital Center. El objetivo es crear una plataforma interactiva donde los usuarios puedan acceder a instrumentos virtuales y practicar sus habilidades musicales. El sitio web incluye:
- Un piano virtual funcional donde los usuarios pueden tocar notas usando el teclado o el ratón.
- Una página "Nuestra historia" que describe la misión y visión de nuestra academia.
- Una página de "Partituras" donde el usuario puede encontrar una variedad de partituras para practicar.
- Una página de "Contacto" para que los usuarios se pongan en contacto con nosotros.
- Una página "En Construcción" de los instrumentos que estarán disponibles próximamente, que cuenta con un juego para el entretenimiento de nuestros usuarios.
- Piano Virtual: Interfaz interactiva con teclas funcionales.
- Responsive Design: Diseño adaptativo para diferentes dispositivos y tamaños de pantalla.
- Nomenclatura BEM: Uso de la metodología BEM (Block, Element, Modifier) para un CSS más limpio y organizado.
- Interactividad con JavaScript: Uso de JavaScript puro (vanilla) para la funcionalidad del piano y otras interacciones en la página.
Estilización del contenido utilizando la metodología BEM.
Funcionalidad interactiva del piano, validación de formulario de contacto, juego en página en construcción y otras características.
Herramienta de diseño para la maquetación de la página.
El proyecto sigue una estructura organizada para facilitar su desarrollo y mantenimiento. A continuación se muestra la estructura básica del proyecto:
/SoulKeysAcademy
│
├── /pages
│ ├── aboutus.html
│ ├── contact.html
│ ├── piano.html
│ ├── scores.html
│ └── wip.html
│
├── /public
│ └── /assets
│ ├── /images
│ ├── logo.png
│ ├── piano-keys.png
│ └── ...
│ └── /sounds
│ ├── do.mp3
│ ├── re.mp3
│ └── ...
│
├── /src
│ ├── /css
│ ├── style.css
│ └── stylesPiano.css
│ └──/scripts
│ ├── contact.js
│ ├── home.js
│ ├── piano.js
│ └── main.js
│
├── index.html
├── .gitignore
└── README.md
Puedes ver el diseño de nuestro sitio web en Figma a través del siguiente enlace:
El prototipo incluye los diseños para cada página de la plataforma, proporcionando una visión clara de la estética y funcionalidad planeada.
Explora una demo en vivo de nuestra Academia de Música Virtual Soul Keys Academy haciendo clic en el siguiente enlace:
Esta demo te permitirá interactuar con el piano virtual y explorar las páginas disponibles actualmente.
Para instalar y ejecutar el proyecto localmente, sigue estos pasos:
-
Clona este repositorio:
git clone https://github.com/DarthVada36/SoulKeysAcademy.git
-
Navega al directorio del proyecto:
cd SoulKeysAcademy
-
Abre el archivo
index.html
en tu navegador web preferido: Simplemente haz doble clic en el archivo index.html o ábrelo con tu navegador desde el menú de archivo.
Aquí te presentamos algunas ideas para futuras mejoras y adiciones al proyecto:
- Desarrollo de Nuevos Instrumentos:
- Guitarra Virtual: Interfaz interactiva para practicar acordes y escalas.
- Batería Virtual: Simulación de una batería con sonidos reales.
- Tuba Virtual: Implementación de una tuba que los usuarios puedan tocar en línea.
- Mejoras en la Interfaz de Usuario:
- Optimización de la experiencia del usuario para dispositivos móviles.
- Mejoras en la accesibilidad para usuarios con discapacidades.
- Integración de Tutoriales:
- Adición de tutoriales en video para guiar a los usuarios en el uso de los instrumentos.
- Incorporación de guías interactivas paso a paso.
- Implementación de una API:
- Creación de una API para permitir a los desarrolladores externos integrar nuestros instrumentos en sus plataformas.
Este proyecto fue desarrollado por un gran equipo de estudiantes durante el bootcamp de desarrollo web de Factoria F5 y Orange Digital Center. Agradecemos a todos los que contribuyeron con su tiempo y esfuerzo para hacer posible la realización de Soul Keys Academy.
Para consultas, sugerencias o colaboraciones, por favor contáctanos a través de nuestro repositorio en GitHub