Simulações Interativas com JSPlotly em Química

Este é um livro diferente em desenvolvimento.

Nele você não encontrará o conteúdo vasto e tampouco a cobertura completa para conceitos e definições comumente espelhados em livros didáticos da área. Também não poderá usufruir da diagramação artística ímpar que obras afins convencionalmente apresentam, desde a formatação até a oferta de inúmeras figuras, gráficos, tabelas, diagramas, “boxes”, textos marginais e outras formas de representação visual da informação, minuciosamente arranjadas para o melhor aproveitamento possível de seus conteúdos.

Aqui você encontrará apenas um texto básico, com alguns conceitos principais e figuras ilustrativas em número reduzido para cada assunto ao longo de poucos capítulos.

Contudo, encontrará um livro vivo .

Foi pensado para oferecer uma experiência imersiva embasada numa trilha didática diferente e pontuada por ilustrações vivas. Essas ilustrações remetem a objetos didáticos interativos para ação do usuário, e produzidos com uma plataforma aberta auxiliada por Inteligência Artificial para a construção de seus códigos. Como um todo, esse material busca agregar competências digitais avançadas para o pensamento computacional, a lógica e a linguagem de programação, e diretamente voltadas para simulações em diversos temas da área. Em síntese, busca oferecer códigos para conteúdos didáticos.

Cada objeto interativo dentro do livro pode ser acessado por simples clique de mouse ou tela capacitiva de dispositivo móvel a partir da legenda em cada figura. Alternativamente, um JSPlotly personalizado também foi utilizado para produção de QRCodes para cada figura do texto QRPlotly, facultando ao aprendiz experimentar o objeto interativo à distância, como numa apresentação multímidia, por exemplo.

Quer experimentar ? Basta selecionar qualquer Figura do texto, clicar no LINK que aparece na legenda e depois em add no botão abaixo do editor de códigos !. O texto próximo à Figura explica como utilizar o app e testá-lo em cenários de simulação.

Uma vez acessado, cada simulação é acompanhada por uma rápida instrução de uso e aplicações diversas que tangenciam o mundo real, no intuito de propiciar uma melhor absorção e apropriação em cada tema abordado. Dessa forma, o usuário lê um trecho, observa a figura pertinente, roda a simulação para gráficos e animações sobre seu conteúdo, e modifica o código e/ou ajusta um widget buscando visualizar um outro panorama interativo. Em suma, um ciclo virtuoso de leitura, visualização interativa e interferência direta na exploração de conteúdos.

O material também acompanha alguns desenhos de linha contínua obtidos com outro app de JSPlotly, Gizz, esse voltado à simulação de uma lousa digital.

Estrutura

A trilha de aprendizagem do livro também é diferente. Buscou-se reduzir o quantitativo de conteúdos normalmente encontrados em obras de referência, reduzindo-se o número de capítulos embora privilegiando-se a integração para mais de tema por capítulo. Em adição, o livro possui um caminho intencionalmente autoinstrucional, tanto para apreensão dos conceitos como para aplicação dos mesmos junto às diversas aplicações de JSPlotly dispersas de forma crescente ao longo do texto, o que permite sua utilização em modalidades diversas de ensino (presencial, remoto, EaD).

Como apresentado na capa da obra, a área é tratada como uma estrutura arbórea de conhecimento composta por tronco, ramos, galhos, folhas, frutos e sementes. Cada parte compõe uma interpretação correlata às seções específicas de cada capítulo. O *tronco* remonta ao tema principal do capítulo, propriamente dito. Os *ramos* referem-se à experimentação do “leitor-usuário” em aplicações temáticas de JSPlotly sem a preocupação de compreender o que está sendo conduzido.

Os ramos reportam à situações-problema ou questões que foram levantadas ao início do capítulo, e agora formalizadas em conceitos técnico-científicos. Dessa forma, tronco e ramos simbolizam a estrutura básica de sustentação do livro. As *folhas* remetem às indagações propostas iniciamente no capítulo, mas agora revestidas da teoria e do uso consciente de aplicações JSPlotly pelo aluno, à semelhança do que ocorre pela conversão luminosa em energia química. As *flores* pontuam estruturas de fecundação para consolidar conceitos e instigar questionamentos sobre o conteúdo, testáveis ou não com os JSPlotly temáticos. Os *frutos* retratam as várias possibilidades em que o tema é aplicado em contextos e cenários diferentes do apresentado no capítulo. Por fim, as *sementes* oferecem a lógica de programação e a estrutura de pseudocódigo que podem ser compreendidas e dispersadas em outras “semeaduras” digitais.

Essa estrutura arbórea é iconificada ao lado cada subtítulo dos capítulos. Esses subtítulos são provocativos ao leitor, estão dispersos numa sequência fixa ao longo da obra, e encabeçam blocos de cores distintas para reconhecimento pelo aluno.

Trilha didática

Cada capítulo abre com a seção "O Mundo te Chama", escrito para instigar curiosidade e contextualizar o cotidiano do leitor no tema central. Envolve uma ou mais situações reais provocativas, e termina com os objetivos esperados para o capítulo, embora sob o título Depois de explorar, você consegue:.

O capítulo prossegue com "Mexa Antes de Entender", uma seção para colocar o leitor em contato direto com o fenômeno abordado por meio de um JSPlotly convidativo e mais simples. A seção permite que o leitor experimente por sua conta o app, manipulando-o sob um guia tutorado, como também por tentativa, erro e descoberta. A seção visa uma exploração do tema junto ao app de forma despretenciosa, flexibilizando o aprendizado sem a preocupação de seu embasamento teórico. Na verdade, cada app temático de JSPlotly que aparece nesse livro possui um tutorial de uso identificado pelo subtítulo "Agite antes de usar".

Segue-se a essa a seção "Fazendo Aparecer", e cujo objetivo é apresentar o conteúdo do modo mais formalizado, junto a outras aplicações de JSPlotly direcionadas ao tema do capítulo, essas de maior complexidade e usabilidade adicional facilitada por widgets. A seção que a sucede, "E se...", testa o leitor e o provoca para situações-problema visando a consolidação e abstração do conteúdo abordado juntem conjunto com os apps.

A seção "Mesmo Padrão, Outros Mundos" traz o leitor para outras realidades e aplicações apresentadas, embora com conceitos idênticos ou semelhantes aos tratados no texto principal. Por fim, a seção "Por Dentro da Ferramenta" apresenta uma flexibilidade estrutural para competências digitais, e que é descrita abaixo.

Embora a mesma trilha didática tenha sido idealizada para permear toda a obra, o livro também pretende ser vivo, no sentido em que busca estimular aos poucos o leitor por meio de um quantitativo de páginas e apps temáticos paulatinamente crescentes ao longo de seus. A inserção de pensamento computacional e de lógica de programação foram também pensados de forma a flexibilizar um aprendizado crescente do leitor-usuário. Até pouco mais da metade da obra, cada capítulo é finalizado apontando um pseudocódigo referente a um único JSPlotly temático na seção "Por dentro da ferramenta". Na continuidade dos capítulos entretanto, diversas inserções para lógica em programação referentes aos apps são explicadas brevemente e de forma crescente no texto. A partir do capítulo 5, a seção "Por dentro da ferramenta" amadurece para envolver uma introdução prática e de curva suave ao uso da linguagem JavaScript, a "verdadeira ferramenta" de JSPlotly.

No fechamento dessa trilha de aprendizagem, os dois últimos capítulos do livro são devotados ao entendimento da construção de objetos didáticos com o simulador JSPlotly e seu gerador de códigos GSPlotly (cap. 9), bem como à estrutura e sintaxe dos scripts do livro junto à biblioteca Plotly.js. Dessa forma, os capítulos finais acabam por oportunizar, desde uma edição mais consciente dos códigos, como sua construção mediada por IA, até a criação de novos para outras propostas do leitor.

A concepção pedagógica do livro vivo também foi refletida para uma perspectiva construtivista e sociointeracionista, com aprendizagem significativa, modelagem científica e aprendizagem baseada em investigação, ao partir de situações-problema contextualizadas e conduzir o estudante à elaboração progressiva de explicações por uso de simulações em cenários específicos.

A linguagem empregada no texto busca, além da simplicidade para interação direta com o aprendiz, o foco na ação desse para uma aprendizagem autônoma, passível de adaptação para diferentes contextos e modalidades educacionais (presencial, híbrido, remoto, EaD). Em adição, o conjunto de JSPlotly personalizados para simulações em cada tema são acessíveis e editáveis por um simples clique de mouse, tela capacitiva ou leitura por QRCode, permitindo o uso do livro vivo desde desktops a tablets e celulares, e quer por sua versão digital disponível no site Bioquanti, ou livremente impressa frente à licença CC BY-NC-SA que traz consigo.

Além disso, e diferente do que é comumente apresentado em livros didáticos, aqui os questionamentos não são alocados como um bloco de questões ao final de cada capítulo, mas ao longo desses, e tanto antes como após um experimento com app de JSPlotly personalizado a determinado assunto.

Como um todo, esse livros vivo integra texto, código, visualização e experimentação digital para favorecer autonomia intelectual, pensamento crítico, e coautoria em modelos computacionais para novos contextos.

Dessa forma, a trilha didática é disposta no livro como :

1. O Mundo Te Chama (tronco);
2. Mexa Antes de Entender (ramos);
3. Volta pro Mundo (galhos);
4. Fazendo Aparecer (folhas) ;
5. E se... (flores);
6. Mesmo Padrão, Outros Mundos (frutos);
7. Por Dentro da Ferramenta (sementes).

BNCC

Os conteúdos, atividades e objetos interativos apresentados no livro foram concebidos em consonância com as competências gerais e específicas previstas pela Base Nacional Comum Curricular (BNCC) para o Ensino Médio e anos finais do Ensino Fundamental, contemplando habilidades associadas à investigação científica, pensamento crítico, cultura digital, competências digitais e resolução de problemas. Nesse sentido, o livro incorpora modelos conceituais e quantitativos alinhados às competências da área por meio de simulações computacionais personalizáveis, permitindo visualizações dinâmicas e ambientes interativos para o desenvolvimento do pensamento computacional e da lógica de programação para uma formação integral dos estudantes, bem como para sua atuação em ambiente acadêmico, profissional e social contemporâneos.

Conteúdo dos capítulos

Em desenvolvimento.

Simulador JSPlotly e gerador de códigos GSPlotly

JSPlotly é um aplicativo de livre distribuição e edição (licença CC BY-NC 4.0) para visualização de objetos interativos em browser. Foi desenvolvido para um contêiner de HTML dividido entre ecrã gráfico e editor de códigos, e personalizado com folhas de estilo em cascata (CSS). Possui apenas uma janela e utiliza JavaScript, uma linguagem de programação moderna para criação de aplicativos, sites e interatividade na web, bem como bibliotecas correlatas, como Plotly.js para a confecção de gráficos e mapas interativos.

Mediante a necessidade de JavaScript para o pleno uso de JSPlotly ao ensino e pesquisa, buscou-se desenvolver um GPT personalizado, GSPlotly, para conversão de linguagem natural em códigos prontos para uso no programa. O gerador permite ao aprendiz sobrelevar o foco diretamente ao conteúdo ou tema desejado, trocando diálogos com o assistente de IA por engenharia de prompts. Como não há qualquer necessidade para conhecimento prévio em programação por parte do usuário, a plataforma converge o interesse principal de seu uso para o conteúdo que se deseja abordar (tema), e não para a forma exigida à sua experiência (código).

Não obstante, e ainda que não necessite de conhecimento em linguagem JavaScript, o código gerado pelo GSPlotly e executado por cópia/cola no JSPlotly abre um caminho virtualmente infinito para a aprendizagem das linguagens, frente à sua modificação para novas condições que envolvam o fenômeno em estudo (exploração paramétrica ou comandos sintáticos). Dessa forma, a plataforma flexibiliza a simples reprodução do objeto interativo, a visualização de novo objeto por modificação pontual de seu código e feedback imediato, e mesmo a reconstrução do código para outro interesse do usuário, características que coadunam para um ensino reprodutível, educação e pesquisa abertas. Ao mesmo tempo, a solução naturalmente acaba por instigar no aprendiz a leitura e interpretação pontuais ou progressivas da própria linguagem de programação envolvida.

Entre as principais funcionalidades do JSPlotly destacam-se a inserção de dados ou equação pelo usário, edição de funções matemáticas, manipulação de parâmetros e comandos, sobreposição de gráficos, construção de mapas, animações, sonorização, alternância de cores, exclusão de curvas, e exportação do objeto em diferentes formatos (HTML interativo, PNG, SVG). O usuário também pode interagir com o objeto didático por meio de recursos como hover (passagem de mouse para popup de dados), escalonamento, e movimentação de eixos, e com controles acessados por barra de ferramentas.

Por conseguinte, o aplicativo pode ser utilizado para a construção de objetos interativos variados. Ilustrando-se junto ao site Bioquanti, encontram-se gráfico 2D e 3D, tabela, diagrama, mapa, cálculo, animação, treinamento em JS, mapa com animação, simulação, experimentação simulada, sonorização, jogo, inclusão e acessibilidade, multimídia interativa (instrumento musical, game), e interfaceamento físico a sensores (celular, placa microcontroladora-Arduino). Dessa forma, é possível o emprego da ferramenta para diversas abordagens em ensino e aprendizagem, tais como baseadas em casos, problemas, projetos, animações, simulações, investigação, gamificação, jogos, cenários, e STEAM (Ciência, Tecnologia, Engenharia, Arte, e Matemática).

Como um todo, acredita-se que o simulador (JSPlotly) e seu gerador de códigos (GSPlotly) configurem uma plataforma educacional interativa, com potencial para agregar valor junto a uma aprendizagem significativa por construção ativa de conhecimento e feedback imediato.

Em especial, a possibilidade de edição do código aberto contido em qualquer dos apps temáticos desse livro, abre a oportunidade para que o usuário modifique suas instruções, visando adaptar o objeto interativo às suas necessidades, ao aprimoramento e mesmo às correções pontuais que lhe aprouver. Dessa forma, a plataforma permite instigar o usuário:

1. À observação e uso imediato de uma linguagem de programação, embora sem conhecimento prévio algum em lógica homônima ou sintaxe;
2. Ao aprendizado de lógica de programação de forma direcionada a conteúdos didáticos de textos afins;
3. Ao aprendizado da linguagem "JavaScript" que envolve a aplicação, por degustação junto ao editor de códigos;
4. Ao aprendizado dos códigos propriamente ditos, e referentes a um conteúdo didático (ou não) desejado;
5. A uma apropriação ativa, interativa, e gradual, para determinado tema da grade curricular (ou não);
6. À experimentação de novos gráficos, mapas, simulações, objetos multimídia e experimentos virtuais, em função de um ciclo virtuoso inerente ao "ensino reprodutivel" (reprodução, modificação, e recriação de códigos para conteúdos).

Aplicativos de JSPlotly acessórios no livro

Além do programa principal e de seu gerador de códigos, esse livro foi produzido com auxílio adicional de aplicações desenvolvidas com o próprio JSPlotly, como Gizz, ZeMol, e MentMapa. Gizz constitui um app autônom de lousa digital para simulação de giz ou caneta, e foi usado em todos os desenhos autorais introdutórios de cada capítulo (garatujas de qualidade discutível, melhor dizendo).

Por sua vez, MentMapa é um construtor de mapas mentais, e foi empregado para a criação de diagramas ao longo do texto. Além desses apps ocasionais que permeiam o texto, cada ilustração de JSPlotly contou com um QRCode para acesso direto à simulação envolvida. Esses códigos bidimensionais foram gerados com auxílio de outro app de JSPlotly, QRPlotly.

Por fim, o livro também conta com o JSPlotly_treinoJS, um app personalizado para um aprendizado prático e suave da linguagem JavaScript. Como seu “progenitor digital”, basta copiar os trechos em JS, colar no editor e rodar o trecho de código explicitado nas seções.

Em síntese

O autor espera que o leitor e usuário desse livro possa aproveitar seu conteúdo e aplicações interativas em um ritmo pesssol e da melhor forma possível. Assim foi pensado, para que essa obra concretize a oferta de conteúdos didáticos de forma ampla e irrestrita, para uma apropriação ativa do leitor, e tanto do conteúdo programático da área como para competências digitais variadas: Códigos para Conteúdos.

Em suma….esse é um livro diferente em desenvolvimento.

Outros capítulos em finalização envolvendo códigos para conteúdos em temas da área serão brevemente disponibilizados junto ao site.

Notas

  1. Esta obra é fruto de parceria humano-máquina realizada com contribuição de alguns assistentes de Inteligência Artificial, e em particular Chat GPT (Open AI). Engenharia de prompts foi utilizada na criação e aprimoramento dos scripts de JSPlotly, montagem de pseudocódigos e soluções de contorno em programação e ajustes de texto. Todo o material produzido por IA foi posteriormente checado por curadoria autoral.

  1. O livro foi produzido com Visual Studio Code (VSCode) como ambiente de edição e programação. Utilizou-se linguagem Markdown para escrita estilizada, sistema Quarto para publicação técnico-científica de documentos dinâmicos e recursos LaTeX para composição matemática e tipográfica. Esse fluxo de produção permite integrar texto, código, gráficos, simulações e objetos interativos em um modelo de publicação digital reprodutível, portátil e multiplataforma, condizente aos princípios de ciência aberta, educação aberta e compartilhamento livre do conhecimento.

  2. O livro e seus objetos interativos são oferecidos com propósito educacional e experimental, buscando estimular exploração, criatividade e aprendizagem ativa. Apesar do cuidado empregado em seu desenvolvimento, o autor não garante ausência de falhas, interrupções ou inadequações para usos específicos. O uso das simulações, códigos e conteúdos é de responsabilidade do usuário, incluindo interpretação de resultados, adaptações e aplicações práticas. Por fim, o autor não se responsabiliza por usos indevidos, interpretações incorretas, danos diretos ou indiretos, perdas de dados, decisões técnicas, acadêmicas, profissionais ou educacionais tomadas a partir do uso do software, scripts, simulações ou materiais derivados.

  3. O uso da plataforma JSPlotly e GSPlotly pode ser apreciado junto ao site Bioquanti a partir de alguns Trabalhos de acesso aberto desenvolvidos pelo autor: