Exibição de Fórmulas Matemáticas com JQuery Mobile e MathJax

Dicas para exibição de conteúdo matemático com MathJax e JQuery Mobile.

jQuery Mobile, segundo seus autores, é um “Framework UI baseado em HTML5 projetado para desenvolver sites e aplicativos que sejam acessíveis em todos os dispositivos (smartphone, tablet e desktop) de forma responsiva”.
MathJax, novamente segundo seus autores, é um “Mecanismo JavaScript para exibição de textos matemáticos que executa em todos os navegadores”.
Juntando essas tecnologias podemos construir aplicações multi-plataforma que mostram conteúdo matemático dinâmico de uma forma simples e versátil.

O aplicativo

Nesta dica vamos ilustrar uma aplicação muito simples que mostra o poder dessas bibliotecas: O Cálculo de equações quadráticas, como mostrado na figura abaixo:

Aplicativo JQuery Mobile com MathJax
Aplicativo JQuery Mobile com MathJax

Veja como as fórmulas matemáticas são exibidos de uma forma muito profissional. Você pode executar este aplicativo on-line aqui.

O funcionamento do aplicativo é muito simples:

  1. O sistema exibe a tela e espera que o usuário digite os coeficientes da equação
  2. O sistema valida os dados inseridos e, se tudo estiver ok, os resultados são apresentados

Para a edição de código-fonte, eu usei as seguintes ferramentas:

  • NetBeans IDE – Excelente suporte para HTML5, CSS3 e JavaScript
  • RIB – é uma ferramenta de design baseada em navegador para criar a interface do usuário para o jQuery Mobile

O código-fonte

Vamos olhar para o código HTML desta aplicação:


Pontos de interesse:

  1. A biblioteca MathJax pode ser configurada logo no carregamento. Neste caso, usamos o parâmetro AM_HTMLorMML-full. Este arquivo de configuração é para sites que utilizam apenas o formato AsciiMath para exibir suas fórmulas matemáticas. Ele vai usar a saída MathML nos navegadores que a suportam e saída de HTML/CSS3 caso não haja suporte;
  2. AsciiMath é uma biblioteca que converte expressões matemáticas (computacionais) em código MathML on-the-fly. Para isso, a expressão deve ser delimitada com ... ;
  3. A chamada à biblioteca local foi colocada no corpo do documento para garantir o carregamento correto de todas as bibliotecas;

Em seguida, olhar para o código javascript:


Pontos de interesse:

  1. Em JQuery Mobile, o equivalente ao evento onload do elemento BODY é o evento pageinit;
  2. O resultado será atualizado cada vez que o usuário pressiona uma tecla, através da captura do evento KeyUP;
  3. O uso da função eval permite que o usuário insira expressões matemáticas (uma fração, por exemplo) para os coeficientes.
  4. Observe que cada vez que a expressão é alterada pelo usuário, nós chamamos o método MathJax.Hub.Queue que irá atualizar a fórmula que está sendo exibida.

Recursos

Conclusão

Há ainda alguns problemas de compatibilidade entre navegadores que não renderizam o MathJax adequadamente, mas o uso combinado dessas bibliotecas viabiliza a construção de aplicações matemáticas muito interessantes.

Isso é tudo! Espere ter ajudado.

Até a próxima…

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *