Plataforma web educacional e inclusiva para o aprendizado prático do alfabeto Braille com apoio da datilologia em Libras.
O BraillePlay é uma aplicação web desenvolvida para tornar o ensino do sistema Braille mais interativo, dinâmico e acessível. Através de uma abordagem de aprendizado incremental e gamificada, o usuário pode praticar e testar seus conhecimentos diretamente no navegador, contando com recursos avançados de áudio e suporte a comandos por teclado.
A aplicação está dividida em três pilares interativos:
- Como funciona: O usuário é desafiado a montar letras sorteadas aleatoriamente em uma célula Braille virtual de 6 pontos.
- Recursos: Feedback visual e sonoro imediato, animações explicativas em caso de erro e botão de ajuda instantânea.
- Como funciona: Jogo tradicional adaptado para dois jogadores no mesmo dispositivo. O Jogador 1 insere uma palavra secreta e o Jogador 2 deve adivinhá-la ativando os pontos correspondentes na célula Braille em vez de usar o teclado convencional.
- Recursos: Cronômetro integrado, gerenciamento de vidas animado e acesso rápido ao painel de referência cruzada.
- Como funciona: Traduz textos livres de até 200 caracteres para o bloco de caracteres Unicode oficiais do Braille (
U+2800aU+28FF). - Recursos: Exibição de mini-células táteis virtuais interativas e sistema de áudio caractere por caractere ou da frase completa.
- Python 3.14 & Flask: Motor do servidor, roteamento de APIs e renderização de templates dinâmicos com Jinja2.
- edge-tts: Síntese de voz neural avançada em português (
pt-BR-FranciscaNeural), garantindo uma narração fluida e natural. - Asyncio & Hashlib: Controle assíncrono de requisições de áudio e geração de cache determinístico via MD5.
- HTML5 Semântico & CSS3 Moderno: Layout responsivo construído com Grid/Flexbox, variáveis CSS para design tokens e animações nativas.
- Vanilla JavaScript (ES6+): Toda a lógica de interação, manipulação de estados do jogo e fallback de acessibilidade local.
Para contornar instabilidades de rede e limitações de sistemas operacionais, o sistema de narração foi projetado com resiliência:
- Camada Primária (Servidor): Requisições na API
/api/ttsgeram arquivos MP3 neurais de alta fidelidade. O servidor conta com um sistema de Cache LRU automático, limitando o armazenamento em disco a 60 arquivos (removendo os menos utilizados recentemente). - Camada de Fallback (Navegador): Se o servidor falhar ou o usuário estiver offline, o JavaScript assume o controle utilizando a Web Speech API (
speechSynthesis) local do sistema operacional.
O projeto foi desenhado sob a perspectiva do design inclusivo:
- Navegação por Teclado: Ao focar na célula Braille, as teclas de 1 a 6 ativam/desativam diretamente os respectivos pontos, com feedback em tempo real para leitores de tela ("Ponto N ativado").
- Semântica ARIA: Utilização rigorosa de atributos como
role="dialog",aria-modal,aria-checkedearia-label. - Referência Cruzada Braille ↔ Libras: Modais globais que mapeiam visualmente e sonoramente o alfabeto completo combinando a célula Braille com a imagem de datilologia em Libras correspondente.
BraillePlay/
├── app.py # Aplicação Flask (rotas, lógica de conversão e TTS)
├── static/
│ ├── script.js # Lógica interativa compartilhada e fallbacks de áudio
│ ├── style.css # Design tokens, componentes e responsividade
│ ├── audio/ # Cache dinâmico de áudios MP3 (LRU)
│ └── libras/ # Banco de imagens da datilologia (A.png a Z.png)
└── templates/
├── base.html # Estrutura master, navbar e modais globais
├── index.html # Dashboard/Página inicial
├── aprender.html # Interface do módulo de aprendizado
├── forca.html # Painel do jogo da forca em dupla
└── conversor.html # Tela de tradução textual e interativa