Skip to content

DarthVada36/SoulKeysAcademy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Soul Keys Academy 🎶

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.

Tabla de Contenidos

Descripción del Proyecto

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.

Características

  • 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.

Tecnologías Utilizadas

HTML5 Estructura del contenido web.

CSS3 Estilización del contenido utilizando la metodología BEM.

JavaScript Funcionalidad interactiva del piano, validación de formulario de contacto, juego en página en construcción y otras características.

Figma Herramienta de diseño para la maquetación de la página.

Estructura del Proyecto

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

Prototipo de FIGMA

Puedes ver el diseño de nuestro sitio web en Figma a través del siguiente enlace:

Prototipo de Figma

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.

Demo

Explora una demo en vivo de nuestra Academia de Música Virtual Soul Keys Academy haciendo clic en el siguiente enlace:

Demo en vivo

Esta demo te permitirá interactuar con el piano virtual y explorar las páginas disponibles actualmente.

Guía de Instalación

Para instalar y ejecutar el proyecto localmente, sigue estos pasos:

  1. Clona este repositorio:

    git clone https://github.com/DarthVada36/SoulKeysAcademy.git
  2. Navega al directorio del proyecto:

    cd SoulKeysAcademy
  3. 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.

Próximos Pasos

Aquí te presentamos algunas ideas para futuras mejoras y adiciones al proyecto:

  1. 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.
  1. 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.
  1. 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.
  1. Implementación de una API:
  • Creación de una API para permitir a los desarrolladores externos integrar nuestros instrumentos en sus plataformas.

Créditos

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.

Contacto

Para consultas, sugerencias o colaboraciones, por favor contáctanos a través de nuestro repositorio en GitHub

Logo SKA

¡Gracias por visitar Soul Keys Academy! Esperamos que disfrutes explorando y practicando con nuestros instrumentos en línea.

🎶 ¡Feliz aprendizaje musical! 🎶