Relatório do Mapa Base do Piano e Teclado

Visão técnica e navegável do mapa do piano, organizada para estudo, leitura e demonstração do fluxo do app.

visão geral

Mapa visual de teclas

No piano, a referência principal é a relação entre tecla, nota, grau da escala, dedo e mão. Por isso a tela principal usa um teclado interativo de duas ou três oitavas.

O fluxo de uso é direto: escolher uma tonalidade, observar as teclas da escala, clicar em uma nota para entender sua função e fechar com uma prática curta de leitura, acorde ou campo harmônico.

Abaixo, cada parte da apresentação fica em uma aba própria para manter a leitura rápida e organizada.

Conteúdos do mapa

Esta aba resume o que o mapa apresenta diretamente no produto, sempre conectado ao teclado visual.

Notas no teclado Nome internacional e solfejo aparecem juntos para ligar C, D, E a Dó, Ré, Mi.
Escalas Escalas maiores e menores naturais acendem as teclas correspondentes.
Dedilhado Sugestões para mão direita e esquerda ajudam a praticar com menos dúvida.
Harmonia Acordes básicos e campo harmônico mostram tríades, sétimas e graus romanos.
Som integrado Cada tecla pode soar com Web Audio, controle de volume, duração e timbre.
Cores de apoio A legenda separa notas naturais e funções como tônica, terça, quinta e sensível.

Fluxo de estudo

O fluxo foi pensado para reduzir atrito: escolher uma referência, tocar pouco, receber uma tarefa clara e encerrar antes de cansar.

Escolher tonalidade O estudante escolhe uma escala e vê imediatamente as teclas acesas.
Tarefa pequena O app sugere ações curtas, como tocar uma escala ou uma tríade.
Blocos curtos Sessões de 5 ou 10 minutos ajudam a manter foco e repetição.
Menos distração O conteúdo fica dividido em modos para evitar excesso de texto durante a prática.
Reforço visual Cores, pauta e teclado ajudam a fixar a mesma informação por caminhos diferentes.
Repetição leve O objetivo é repetir pouco, com clareza, em vez de estudar muito tempo sem direção.

Modos do app

Os modos são diferentes formas de olhar para o mesmo teclado: nota, leitura, acorde e função harmônica.

Teclado Mostra a escala selecionada, a tônica, o grau e os dedos sugeridos.
Leitura Gera uma nota aleatória para o estudante encontrar no teclado.
Acordes Mostra as notas do acorde escolhido, como tríade, 7ª, sus4 ou diminuto.
Campo harmônico Exibe I, ii, iii, IV, V, vi e vii° dentro da tonalidade escolhida.
Prática curta Gera tarefas rápidas e usa timer para organizar blocos de estudo.
Nota selecionada Mostra nome, grau, dedo sugerido e referência de pauta da tecla clicada.

Pauta desenhada

Este módulo conecta o teclado à leitura tradicional. A ideia é mostrar onde a tecla selecionada aparece na pauta, tanto na clave de sol quanto na clave de fá.

Teclado de exemplo

Escolha uma tecla para ouvir a nota e vê-la marcada nas duas pautas.

Partitura em clave de sol Clave de sol C4 / Dó central
Partitura em clave de fá Clave de fá C4 / Dó central

Clave de sol

Mostra notas médias e agudas, geralmente associadas à mão direita.

  • Ajuda a ligar a tecla tocada com a leitura acima do Dó central.
  • Serve para melodias, escalas na mão direita e leitura inicial no registro médio.
  • Permite destacar a nota na pauta enquanto a tecla correspondente aparece no teclado.

Tempo e notação

O relatório mostra marcações de andamento e compasso como apoio visual: por exemplo, `♩ = 80` e `4/4`. Essas marcações devem usar `aria-label` e ter opção de ativar/desativar o metronomo no exemplo interativo. Evite animações rápidas na pauta e garanta contraste suficiente para leitura no modo claro e escuro.

Exercícios por nível

Este módulo organiza a prática em trilhas graduais, mantendo tarefas pequenas e blocos curtos para facilitar continuidade.

Iniciante Encontrar notas, tocar cinco dedos, reconhecer Dó central e tríades simples.
Intermediário Escalas maiores e menores, inversões simples, I-IV-V e leitura com saltos curtos.
Leitura rápida Reconhecer notas aleatórias, responder no teclado e alternar clave de sol/fá.
Blocos curtos Séries de 3, 5 ou 10 minutos para manter foco e sensação de progresso.

Áudio das notas

Este módulo usaria Web Audio para ligar tecla, nome, altura e memória auditiva, sem depender de arquivos externos.

Nota clicada Ao tocar em uma tecla, o app reproduz a frequência correspondente.
Escala guiada O app pode tocar a escala selecionada lentamente, nota por nota.
Treino auditivo Ouvir uma nota e tentar encontrar a tecla antes de mostrar a resposta.
Controle simples Volume, repetição e botão para silenciar quando o estudo precisar ser visual.

Dados em JSON

Este módulo separaria escalas, acordes, dedilhados, textos e exercícios em dados editáveis, facilitando manutenção e versões para outros instrumentos.

Escalas Notas, graus, dedilhados e nomes podem morar em arquivos de dados.
Exercícios Tarefas por nível podem ser adicionadas como listas editáveis.
Instrumentos O mesmo motor visual poderia carregar piano, trombone ou outro mapa.
Manutenção Corrigir uma escala ou adicionar conteúdo ficaria mais rápido e menos arriscado.

Cores e legenda

As cores foram pensadas como apoio de memorização. O estudante pode estudar por nome da nota, por função harmônica, combinando as duas camadas ou desligando as cores quando quiser uma leitura mais limpa.

Notas naturais Dó, Ré, Mi, Fá, Sol, Lá e Si recebem cores próprias para localização rápida no teclado.
Funções importantes Tônica, terça, quinta e sensível recebem destaque porque estruturam escala, acorde e resolução.
Modos de visualização O seletor permite alternar entre notas, funções, ambas as camadas ou teclado sem cores.
Uso pedagógico No começo, cores ajudam a fixar padrões; depois, podem ser reduzidas para treinar autonomia.

PWA e acesso

O mapa foi estruturado como PWA para abrir rápido, funcionar offline depois do primeiro acesso e ficar disponível na tela inicial do celular.

Instalação O navegador pode oferecer “Adicionar à tela inicial” ou “Instalar app”.
Uso offline Service worker e manifesto mantêm os arquivos principais disponíveis sem internet.
Tema persistente Modo claro e escuro ficam salvos no navegador e valem para mapa e relatório.
Sem dependências pesadas Som, visual e interação usam recursos nativos do navegador.

Próximos passos

A base já permite estudar visualmente e com som. As próximas melhorias podem transformar o app em uma trilha de estudo mais completa.

Salvar preferências Guardar volume, duração, timbre e modo de cores para restaurar ao abrir o app.
Exercícios avaliativos Contar acertos em leitura, reconhecimento auditivo e formação de acordes.
Mais escalas Adicionar menor harmônica, menor melódica, pentatônicas e modos gregos.
Separar dados Mover conteúdo musical para JSON e reaproveitar o motor em novos instrumentos.