2 O aplicativo
JSPlotly é um aplicativo pra criar objetos virtuais de aprendizagem. Com ele é possível criar gráficos 2D e 3D, tabelas, diagramas, fluxogramas, realizar cálculos, produzir objetos tridimensionais, animações, simulações, jogos, sonorização, objetos multimídia (animação+som), e até prototipagem experimental (Arduino, por ex).
Ainda que possibilite isso tudo (e um pouco mais…), apresenta-se como um pequeno arquivo HTML pra ser carregado em qualquer navegador de internet. Assim, JSPlotly não depende de sistema operacional (Windows, Linux, Android, iOS) e nem de dispositivo (desktop, notebook, tablet, celular). Por ser pequenino e com atributo HTML, pode-se compartilhar o programa e o objetos produzidos por qualquer meio físico ou digital, incluindo redes sociais.
O JSPlotly é livre !!! Tanto pra baixar como para personalizá-lo, como garantido por sua licença CC BY-NC 4.0. Assim, você pode utilizá-lo, copiá-lo, distribui-lo e mesmo adaptá-lo para fins não comerciais, desde que mencione o autor original.
2.0.1 O site Bioquanti
O aplicativo, suas características, seu modo de uso e mais de uma centena de objetos de aprendizagem interativos estão abertamente disponíveis junto ao website Bioquanti. O site é uma iniciativa para propagar a ideia de se utilizar código de programação voltados para a construção de objetos didáticos para conteúdos curriculares, tanto para o ensino básico como para o ensino superior e pesquisa científica. Numa “frasezinha” de efeito: códigos para conteúdos.
O Bioquanti foi desenhado para seu autoinstrucional, ou seja, para que você consiga acompanhar o seu conteúdo e reproduzir/adaptar os códigos para a construção de diversos tipos de objetos didáticos sem necessitar de um(a) professor(a). Lá você encontrará tutoriais, ebooks, objetos didáticos interativos, códigos diversos, vídeos, e intruções gerais para o uso de quatro programas de distribuição livre.
Esses programas são o JSPlotly, para construção de objetos de aprendizagem interativos variados, o Jmol para visualização tridimensional de moléculas, o R e sua interface gráfica RStudio para tudo que possa pensar em ensino e pesquisa, e o Sisma, um programa feito na UNIFAL-MG para simular a dinâmica de fluxos em um diagrama. Todos esses programas são livres, assim como todos os materiais contidos no site. Veja uma imagem da página principal do site abaixo.
2.1 Botando a mão na massa !
Agora, voltando ao JSPlotly. Quer ver como é simples utilizá-lo ? Dê uma olhada na tela única do aplicativo abaixo.
2.2 Estrutura do aplicativo
Observe que o aplicativo é dividido entre uma área gráfica (esquerda) e um editor de códigos com alguns botões (direita).A área de códigos serve para o que naturalmente se apresenta: digitar, colar, ou editar códigos. A área gráfica apresenta a interpretação da linguagem para esses códigos. Os comandos são introduzidos por JavaScript (JS), uma linguagem de programação moderna, utilizada por grandes empresas e big techs, e focada na interatividade entre a página web e o usuário. Diferente de outras linguagens, JavaScript não precisa ser compilada, já que é interpretada a partir de máquinas homônimas de navegadores comuns (browser).
Agora vamos à parte divertida !!!
Segue abaixo novamente a mesma tela do JSPlotly. Aparentemente é igual à anterior. Mas quer saber a diferença ? Clique na imagem e você será direcionado ao aplicativo presente no Bioquanti, um site desenvolvido para apresentar códigos para conteúdos em ensino superior e básico, e com vários exemplos de objetos pro JSPlotly..
O aplicativo “vivo” pode ser utilizado de forma independente, armazenado em mídia ou compartilhado facilmente pela web. Contudo, esse material pretende abordá-lo diretamente em nuvem, misturando texto e programa. Nesse caso, estamos falando de verdadeiros livros vivos!!!
Para experimentar esse conceito de livro vivo, observe abaixo o aplicativo JSPlotly, inteirinho e funcional, mas desta vez inserido nesta página web.
É desta forma que pretende-se abordar os diferentes tópicos com o programa, ou seja, combinando instruções na página com o próprio JSPlotly e, dessa forma, “vivificando” o aprendizado de temas com o aplicativo.
Bom, seguindo neste tópico sobre a estrutura do aplicativo, passe o mouse sem clicar em nada na imagem acima, e veja quanta interatividade é visualizada na mudança do ponteiro do mouse: links para sites na barra superior (JavaScript, Plotly.js, Bioquanti, GSPlotly), ícones acima do gráfico, o próprio gráfico, o botão de carregamento de arquivos (browse), o editor de códigos, e os botões abaixo desse.
2.3 Uso do JSPlotly vivo na página
Segue novamente o aplicativo, agora pra você experimentar algumas ações.
Observe que há um código JS no editor, contendo linhas de comando. Clique no botão “add” abaixo do editor e veja que surge um gráfico de parábola. Esse gráfico, assim como todos os objetos produzidos com o JSPlotly são interativos. Isto quer dizer que você pode interagir com o objeto produzido, no caso o gráfico. Essa interatividade do objeto é garantida por uma biblioteca específica desenvolvida em JavaScript, Plotly.js.
Bibliotecas (ou pacotes) são conjuntos de códigos que, quando inseridos num algoritmo, permitem automatizar tarefas dentro de uma linguagem de programação, e sem a necessidade de escrevê-las “do zero”. Há diversas bibliotecas para JavaScript, algumas utilizadas no JSPlotly, como tone.js para sons e p5.js para objetos multimídia.
2.3.1 Redimensionando a página para conforto visual do JSPlotly
Observe que o aplicativo apresenta-se junto à barra lateral, o que acaba causando sua redução visual e mesmo omissão de alguns detalhes. Para melhor conforto e trabalho com o JSPlotly, você pode clicar no ícone do canto superior esquerdo da página, próximo ao título deste capítulo, experimentará o encolhimento da barra lateral, e consequente readequação visual do JSPlotly. Assim, poderá ajustar como deseja que o JSPlotly seja apresentado. Isso é útil quando se quer explorar o aplicativo visualizando-o de modo mais confortável.
Adicionalmente, a disposição esquerda/direita também adequa-se ao tipo de dispositivo utilizado. Se for um celular, por exemplo, ela poderá mudar para cima/embaixo, bastando-se colocá-lo na vertical, ou esquerda/direita se o dispositivo ficar na horizontal (com permissão para girar a tela, claro).