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.


Figura 2.1: Página de visita do site Bioquanti, apresentando uma barra lateral contendo acesso para 4 programas de livre distribuição e materiais correlatos ao ensino e à pesquisa


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.


Figura 2.2: Tela única do JSPlotly, apresentando o ecrã gráfico à esquerda e o editor de códigos Ace à direita.

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..


Figura 2.3: O aplicativo JSPlotly, agora “vivo” ! Basta clicar na imagem para uma experiência interativa com o app.


  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).