Quando vou fazer novas ferramentas e funções de código, se preciso desenvolver uma parte nova da interface, procuro sempre por seguir minha intuição no sentido de tentar prover a melhor usabilidade possível entre dispositivos e níveis de usuários. Fazer uma interface com elementos que o usuário já é habituado a usar, como barras deslizantes, facilita o aprendizado do programa e permitindo ao usuário desfrutar de maior potencial do sistema.
Então quando a tarefa de ligar/desligar o som do sistema se tornou prioridade, não optei pelo caminho fácil de fazer um simples input do tipo checkbox, onde bastaria deixar selecionado para dar mute e des-selecionar para retornar o áudio. Não deixa de ser uma excelente e compacta solução, porém optei por utilizar uma barra deslizante, assim o usuário pode escolher qualquer valor entre 0 e 100 para o volume de forma amigável, para desligar basta posicionar a barra no 0, não é necessário checkbox. O trabalho de uma hora levaria então um dia, mas por dificuldade adicionais.
Tudo poderia ser mais fácil se eu já tivesse implementado uma barra destas anteriormente, precisei me atualizar muito sobre as tecnologias disponíveis, até mesmo seu nome em inglês eu desconhecia, range bar. Descobri também que o HTML5 possui suporte nativo para isto e achei uma biblioteca JavaScript RangeSlider.js para renderizar o elemento em navegadores antigos e sem suporte, como IE8.
E lógico que tudo poderia terminar por aqui, mas queria levar o teste ao extremo e descobri vários serviços pagos na internet para simular navegadores antigos, dispondo de orçamento zero e com algum tempo para investir, pude atualizar meu wine e winetricks, instalando a versão ubuntu/linux nativa do IE8. Porém este teste ficou para um segundo momento, já que é “impossível” debugar JavaScript neste navegador e o resultado é que o Pomodoros não funciona (ainda) em IE8, tentei instalar o debugbar mas acho que só pelo VirtualBox ou dual boot, portanto outro momento.
Além disto utilizei ícones bootstrap glyphicons e assim dispensei o uso de rótulos para som desligado e som no máximo volume, as indicações são feitas pelos ícones, que de “bater o olho” já são entendidos rapidamente pelo usuário. Com o sistema de grid do bootstrap inseri uma linha com configuração 1-10-1 para um ícone em cada ponta da barra. Assim o usuário enxerga ícone (som desligado) – barra – ícone (som ligado).
Uma dificuldade adicional era salvar o estado desta opção, cada usuário quer regular a altura do som de forma personalizada, assim (obviamente) se eu abaixar o som do meu aplicativo, isto não pode afetar a configuração dos outros usuários. A opção foi adotar rapidamente o update_user_meta() e get_user_meta(), com o current_user_id(), funções nativas do WordPress, embarcando o envio e recebimento destas informações em uma função já existente, que armazena os dados da interface no banco de dados via AJAX, a cada 15 segundos.
Por último os testes no Android 4.3 estavam me desanimando, não só não funcionou inicialmente, como quebrou o aplicativo que já estava no ar. Em um ambiente de testes isso é necessário, mas gostaria de terminar esta tarefa com tudo funcionando perfeitamente, assim precisei voltar para a prancheta e refazer vários trechos do código para não ter nenhum problema, um stress extra.
Pretendo fazer um vídeo ensinando a debugar JavaScript no Chrome do Android, para isto precisa-se conectar por adb (talvez seja necessário root), um emulador de terminal no celular e configurar o serviço para conexão remota. No computador, após instar o abd (apt-get install adb), conecta-se de forma remota e abre o Chrome, tanto no celular quanto no computador, em ferramentas de desenvolvedor você poderã abrir a aba do celular no computador e sua vida vai ficar muito mais fácil (após tanta dificuldade rs).
Este momento de testes ficou registrado como a imagem de miniatura deste post, momento onde consegui enfim terminar os testes e lançar no ar esta nova ferramenta de configuração do volume, muitas dificuldades para a biblioteca Artyom.js, já que ainda não 100% suportada e tanto no Firefox, quanto no Chrome apresenta comportamentos diferentes, algumas coisas funcionando melhor no segundo, mas por incrível que pareça o melhor desempenho para fala e audição é o Android.
Não sei se para o público no geral era prioritário configurar o volume, mas para mim, desenvolvedor, precisava urgente de uma forma de testar rapidamente o sistema sem as constantes falas e sons, que, se repetidos a exaustão podem ser mais torturantes do que uma torneira pingando gotas na cabeça de um refém.
