Imagem de Capa: Código HTML e JavaScript com scripts e funções destacados. Tela de um computador exibindo código-fonte de um desenvolvedor de software. Fotografado por Martin Vorel – https://martinvorel.com CC BY-SA 4.0, 21 de julho de 2016. Fonte: Wikimedia Commons.

Prof. Maurício Veloso Brant Pinheiro
Departamento de Física, UFMG

Introdução

Em minha carreira acadêmica, sempre preferi editores de texto como o Word em vez de códigos LaTeX para preparar manuscritos para publicações científicas. Isso devido à velocidade proporcionada pelo sistema ‘What You See Is What You Get’ (WYSIWYG). Confesso que, décadas atrás, tentei usar LaTeX e até software de conversão de Word para LaTeX, mas eram muito primitivos, e o tempo gasto depurando era maior do que reescrever o código em LaTeX, compilá-lo, visualizar o resultado em postscript e voltar ao código para corrigi-lo. Dominar a sintaxe do LaTeX para submeter um artigo bem formatado tornou-se um rito de passagem para a elite acadêmica… algo que saí pela tangente.

Avançando até o presente, desde que criei o AI-Talks.org e comecei a escrever nele, sempre utilizei ferramentas de edição ‘quase-WYSIWYG’, sem me preocupar em aprofundar em HTML, CSS, JavaScript, etc. Apenas olhar para aqueles enormes livros com milhares de páginas sobre o assunto, que ficam desatualizados a cada ano, confesso que me fez preguiçoso. A decisão de usar o WordPress foi a acertada, pois ao assinar, do meu próprio bolso, um plano mais completo, sempre tive todos os recursos necessários à disposição. Hoje, rotineiramente uso uma ampla variedade de widgets, plugins, temas e outras ferramentas do WordPress para editar este site. Exceto por algum script específico, como os do Google AdSense e algumas equações em LaTeX, editar com WordPress é muito semelhante a um editor de texto, onde se insere parágrafos, marcadores, listas, imagens, links, etc., como objetos.

Com a popularização de grandes modelos de linguagem (LLMs) como o ChatGPT, a partir do final de 2022, percebi imediatamente uma mudança significativa de paradigma — em outras palavras, ‘O que você pergunta é o que você obtém’ (What You Ask is What You Get – WYAIWYG). Bem, não exatamente no início, mas com a evolução desses LLMs, isso está se tornando uma realidade, especialmente no campo do desenvolvimento de software. Se você acompanha meu site (não se esqueça de se inscrever em nossa newsletter na página principal), pode ter notado que publiquei vários tutoriais sobre o assunto e incluí códigos criados com o ChatGPT.

Com a ajuda desses LLMs, estou aprendendo Python, PyTorch, Pandas. TensorFlow, Keras programação na nuvem (Google Colab, Jupyter, etc.) dentre outras coisas.

Neste semestre, fiquei extremamente satisfeito ao ver meus alunos de graduação e pós-graduação no curso de IA (Tópicos Especiais D: IA), alguns com pouca ou nenhuma experiência em programação, terminarem meu curso sabendo usar essas ferramentas e criando excelentes modelos de redes neurais para diversas aplicações. Em suma, esses LLMs também são excelentes professores, e a programação não é mais uma tarefa assustadora restrita aos nerds; tornou-se tão fácil quanto pedir uma receita de Arroz à Piemontesa para a Alexa. Claro, para avaliar a receita, você precisa prepará-la, degustá-la, aperfeiçoá-la, e isso é outra história…

Também ensino Física Experimental Básica. Algo que sempre me incomodou são os softwares de processamento de dados, como o Origin, que são pagos (com licenças caras) ou desatualizados, e o SciDAVis, a versão gratuita do Origin, que funciona mal nos computadores do laboratório. Muitos desses computadores têm sistemas operacionais com mais de dez anos, limitados pelo hardware, o que só complica ainda mais as coisas. A coordenação, técnicos e monitores fazem um trabalho louvável para manter tudo funcionando.

Foram feitas várias tentativas para sugerir mudanças neste sistema para simplificar as análises. No curso de Física Experimental Básica: Mecânica, a maior parte do que fazemos são regressões lineares (nem o Origin nem o SciDAVis são necessários), algo que nos meus tempos de estudante fazíamos com uma calculadora, e quando os gráficos eram cuidadosamente desenhados em papel milimetrado (sem entrar em detalhes em outra mudança de paradigma educacional).

Entre as várias estratégias, foram escritos até códigos em LabVIEW (uma linguagem científica de automação completamente inadequada para isso, usada apenas porque o antigo técnico de laboratório a dominava). Mais recentemente, foram incluídas sugestões de aplicativos móveis e páginas da web de terceiros para realizar essas regressões lineares. Portanto, foi necessário escrever tutoriais para ensinar o uso de cada um desses recursos. No entanto, esses métodos frequentemente não se ajustam às realidades de nossos laboratórios, que nem mesmo têm WiFi adequado e são pontos cegos para as tecnologias 4G/5G.

Assim, decidi aprender a criar aplicativos em HTML/JavaScript para uso em laboratórios de ensino e em minhas salas de aula. Sem experiência prévia nessas linguagens, recorri ao ChatGPT, e o resultado foi excelente. A produção foi significativa, e confesso que aprendi o básico de HTML/JavaScript (+CSS) em algumas semanas, e até um pouco de LaTeX, com MathJax, inserindo equações nessas páginas da web (Ah, a vingança é um prato que se come frio).

Ao criar uma página com um aplicativo para calcular regressões lineares e gráficos neste formato, a modernização dos laboratórios de ensino torna-se uma realidade potencial. E, ao substituir gradualmente os PCs desatualizados por plataformas baratas como o Raspberry Pi, os laboratórios de ensino já estão sendo modernizados.

Ao desenvolver programas de coleta de dados usando Arduinos, com sua ampla variedade de sensores e atuadores (ao invés de gastar uma fortuna importando caríssimos sistemas da Pasco ou Phywe), combinados com essas páginas HTML dedicadas para análise simples de dados, a padronização e modernização dos laboratórios de forma econômica (pelo menos três vezes mais econômica) e eficiente está verdadeiramente ao nosso alcance. Bem, para mim, restava apenas aprender HTML/JavaScript, e neste artigo mostrarei como fiz isso, como é feito e o que produzi em três semanas desde que comecei.

---

HTML e JavaScript para Leigos

HTML (HyperText Markup Language) e JavaScript são duas tecnologias fundamentais para a criação e funcionamento da web. Elas desempenham papéis distintos, mas complementares, no desenvolvimento de páginas e aplicações web. A seguir, exploraremos o que são HTML e JavaScript, como funcionam e como se inter-relacionam para criar experiências web ricas e interativas.

HTML, que significa HyperText Markup Language, é a linguagem padrão usada para criar e estruturar conteúdo na web. É uma linguagem de marcação que define a estrutura básica de uma página web, organizando o conteúdo em elementos e seções.

O HTML utiliza “tags” para marcar diferentes partes do conteúdo. Cada tag tem um propósito específico e é escrita entre colchetes angulares. Por exemplo:

• <h1> a <h6>: Tags de cabeçalho, usadas para definir títulos e subtítulos. <p>: Tag de parágrafo, usada para definir blocos de texto.
• <a>: Tag de link, usada para criar hiperlinks.
• <img>: Tag de imagem, usada para inserir imagens.

Aqui está um exemplo básico de um código em HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is an example paragraph.</p>
    <a href="https://en.wikipedia.org/wiki/HTML">Click here to learn more about what HTML is</a>
    <br>
    <br>
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" alt="HTML5 Logo" width="100" height="100">
</body>
</html>

Neste exemplo, temos:

• <body>: Seção que contém o conteúdo visível da página, como títulos, parágrafos, links e imagens.
• <!DOCTYPE html>: Declaração do tipo de documento, informando ao navegador que este é um documento HTML5.
• <html>: Tag raiz que envolve todo o conteúdo da página.
• <head>: Seção que contém metainformações sobre o documento, como o título.

Por outro lado, JavaScript é uma linguagem de script poderosa que permite adicionar interatividade e dinamismo às páginas da web (está presente em 99% de todos os websites). Ao contrário do HTML, que define a estrutura e o conteúdo estático, o JavaScript é usado para criar conteúdo dinâmico que pode responder às ações do usuário e eventos em tempo real.

JavaScript frequentemente é usado em conjunto com HTML e CSS (Cascading Style Sheets). Ele permite manipular o DOM (Document Object Model), que é a representação da estrutura HTML da página no navegador. Com JavaScript, você pode adicionar, remover ou modificar elementos da página, realizar cálculos, validar formulários, fazer gráficos e animações interativas e muito, muito mais.

Aqui está um exemplo simples de JavaScript que exibe um alerta quando um botão é clicado:

<!DOCTYPE html>
<html>
<head>
    <title>Example of JavaScript</title>
    <script>
        function showAlert() {
            alert("Button clicked!");
        }
    </script>
</head>
<body>
    <h1>Interactivity with JavaScript</h1>
    <button onclick="showAlert()">Click me</button>
</body>
</html>

Isso é o que precisamos saber sobre HTML e JavaScript para começar a programar com LLMs. É importante notar que, embora não essencial, uma ferramenta de visualização de HTML/JavaScript como o Codebeautify é extremamente útil. Ela permite visualizar o código e fazer pequenas correções de forma rápida e eficiente (em outras palavras, como WYSIWYG). Você pode até mesmo incluir seu código em um arquivo de texto usando o Bloco de Notas, editá-lo e salvá-lo como HTML. Isso significa que não é necessário ter ferramentas sofisticadas para começar a criar páginas web simples. No entanto, para iniciantes, o Codebeautify oferece uma interface intuitiva para testar e editar seu código em tempo real, facilitando o aprendizado e a melhoria das habilidades em HTML e JavaScript. Essas habilidades são cruciais não apenas para entender os fundamentos da programação web, mas também para explorar as possibilidades mais avançadas oferecidas pelos modelos de linguagem em larga escala.

---

Programando HTML/JavaScript com o ChatGPT

ChatGPT pode ser uma ferramenta incrivelmente útil para gerar rapidamente código completo em HTML e JavaScript (e, incidentalmente, para aprender como essas linguagens funcionam). Em questão de segundos, você pode obter modelos personalizados e trechos de código com base em prompts simples. Ele pode até fornecer explicações detalhadas de código, linha por linha, se necessário. Isso acelera significativamente o processo de desenvolvimento, pois você não precisa começar do zero ou procurar exemplos adequados na web.

Quando você precisa criar uma página web ou aplicação com recursos específicos, como formulários interativos, gráficos dinâmicos ou até mesmo jogos simples, o ChatGPT pode fornecer o código inicial necessário. Por exemplo, você pode pedir ao ChatGPT para gerar um formulário de contato que valide as entradas do usuário em tempo real com apenas um prompt.

Prompt: "Gerar código HTML e JavaScript para um formulário de contato que valide o e-mail do usuário."

E como vimos, a resposta realmente chega em segundos. Visualizando o resultado no Codebeautify, temos:

Agora que dominamos o uso de ferramentas como ChatGPT e Codebeautify, temos tudo o que precisamos para desenvolver códigos HTML/JavaScript tão complexos quanto desejarmos. A chave está em saber exatamente o que queremos e como traduzir isso em um prompt para o ChatGPT. Dessa forma, estamos programando através do conceito de ‘O que você pergunta é o que você obtém e vê’, aprendendo as linguagens ao pedir ao ChatGPT para explicar o código, fazer alterações, corrigir erros de sintaxe, realizar depuração, entre outras tarefas, e visualizar os resultados em um visualizador.

Esta abordagem não apenas acelera o processo de desenvolvimento, mas também facilita a aprendizagem contínua e a melhoria das habilidades em programação web. Com a ajuda do ChatGPT e ferramentas como o Codebeautify, podemos explorar e experimentar livremente, criando soluções robustas e interativas para diversos projetos web.

---

Exemplo: Movimento Retilíneo Uniformemente Acelerado (MRUA)

Definindo o Problema

Um dos experimentos do curso de Física Experimental Básica, realizado no laboratório de ensino, aborda o Movimento Retilíneo Uniformemente Acelerado (MRUA). Neste experimento, um objeto (carrinho) desliza sobre uma pista sem atrito, suportado por uma camada de ar gerada por um compressor. O objeto acelera devido à força gravitacional exercida por um peso ligado a ele através de um fio inextensível e uma polia. Essa configuração permite estudar a relação entre a força aplicada e a aceleração resultante, conforme descrito pela segunda lei de Newton. Além disso, o experimento proporciona uma compreensão prática das leis do movimento e a oportunidade de analisar o comportamento de corpos em sistemas quase ideais, minimizando os efeitos de forças externas indesejadas, como o atrito.

O objetivo deste experimento é determinar experimentalmente a aceleração constante de um objeto em uma pista. A aceleração é determinada pela posição do carrinho em função do tempo e comparada com a aceleração teórica, que depende das massas dos objetos envolvidos e do ângulo da pista em relação à horizontal.

O carrinho se move ao longo da pista, acelerado pela queda de um peso sob a ação da gravidade. A posição linear do carrinho é determinada por um sensor angular na polia, conectado ao computador através de uma interface com conversão A/D. O sensor mede a posição angular. No computador, a posição angular da polia em função do tempo é convertida pelo software de aquisição de dados DataStudio. O software transforma esses dados em posição, velocidade e aceleração linear do carrinho, plota os três gráficos e realiza os ajustes de curva necessários (quadrático para posição e linear para velocidade e aceleração). A análise dos dados envolve esses três ajustes simultâneos e é feita com alguns cliques no programa DataStudio.

Inicialmente, vamos desenvolver uma aplicação simples em HTML/JavaScript que leia um arquivo de tabela .TXT contendo seis colunas: três para o tempo e outras três para posição, velocidade e aceleração linear, realize os três ajustes simultaneamente e calcule com base nos parâmetros físicos (massas, ângulo e aceleração devido à gravidade).

Esta aplicativo pode ser uma alternativa mais barata e uniforme para laboratórios de ensino, em vez de usar interfaces importadas caras e inflexíveis, com software de aquisição de dados desatualizado que é difícil para os estudantes entenderem. O programa de coleta de dados, com algumas linhas de código, pode ser carregado em um Arduino, que gera a tabela a ser analisada em nossa aplicação HTML/JavaScript, gravada em um Raspberry Pi. Nosso objetivo aqui é criar esta aplicação de análise. Para isso, utilizaremos um conjunto de dados no formato apropriado.

O aplicativo gerado pelo ChatGPT

Inicialmente, vamos criar um aplicativo apenas para visualizar os gráficos com um prompt simples no ChatGPT.

Prompt: "Gerar um aplicativo em HTML e JavaScript que leia um arquivo local contendo uma tabela .txt de seis colunas com posição, velocidade e aceleração, e plote esses três gráficos."

A resposta do ChatGPT inclui o código HTML, o script JavaScript e explicações didáticas sobre o projeto. O código original requer alguns ajustes e três prompts adicionais para corrigir pequenos erros.

Prompt: "Dê-me o código completo e funcional sem explicações."

Prompt: "Reescreva este código para que a tabela com as seis colunas tenha os dados correspondentes: 'Tempo (s) Posição (m) Tempo (s) Velocidade (m/s) Tempo (s) Aceleração (m/s²)'. Nos gráficos, não conecte os pontos. O separador decimal para os dados do arquivo .txt é um ponto."

Prompt: "Adicione eixos e linhas de grade a todos os gráficos, incluindo também títulos nos eixos com suas respectivas unidades."

O resultado final pode ser executado no Codebeautify, e os gráficos podem ser exportados com um clique.

Sem alterar manualmente o código, então passamos para o segundo passo. Inclua a rotina de ajuste de curvas simultâneo no script.

Prompt: "No código a seguir, inclua no script JavaScript uma rotina que execute o ajuste simultâneo por mínimos quadrados da posição (função quadrática) e da velocidade (v=A*t) (funções lineares). Para o gráfico de aceleração, calcule a média dos pontos. Exiba as funções de melhor ajuste nos gráficos em linhas vermelhas (use uma linha reta para o valor médio da aceleração). Após os gráficos, apresente os resultados dos ajustes: a aceleração 'a' para cada um dos gráficos. Calcule a aceleração média dos resultados dos ajustes, seu desvio padrão e escreva o resultado final como a = (valor numérico +/- desvio padrão) m/s²."

O código gerado não estava funcional. Eu não me dei ao trabalho de analisá-lo; simplesmente o colei no Codebeautify e vi que não funcionava. Então, pedi ao ChatGPT para fazer o debug.

Prompt: "Este código não está funcional, encontre os erros e corrija-os."

E funcionou! Os resultados dos ajustes são:

• Position Fit: a_x = 0.9331 m/s²
• Velocity Fit: a_v = 0.9926 m/s²
• Acceleration Fit: a_a = 0.9328 m/s²
• Mean Acceleration: a = (0.95 ± 0.03) m/s²

E os gráficos são:

Agora, basta salvar o código em um arquivo de texto usando o Bloco de Notas, com a extensão HTML, para ter uma aplicação para analisar dados deste experimento específico, que funcionará em qualquer navegador e em qualquer computador, incluindo um barato Raspberry Pi.

Este aplicativo foi gerado pelo ChatGPT em apenas meia hora e alguns prompts. Claro, podemos refinar o código editando diretamente no visualizador HTML ou usando o ChatGPT para isso.

Ao concluir, o próprio ChatGPT pode comentar sobre o código, explicar passo a passo o que ele faz (ajudando você a aprender sobre HTML e JavaScript), escrever um tutorial para o usuário e até fornecer sugestões para melhorias de frontend e backend. Em resumo…

> Esta é uma aplicação simples para análise de dados de experimento, criada usando HTML e JavaScript. Vamos entender como funciona:
> 
> **Análise Passo a Passo dos Dados**
> 
> **Carregamento de Arquivo:**
> 
> - Você seleciona um arquivo de texto com dados do experimento.
> - O aplicativo lê este arquivo e extrai os dados de posição, velocidade e aceleração.
> 
> **Ajuste de Dados:**
> 
> - **Posição vs Tempo:** Calcula um ajuste de curva quadrático para a posição usando mínimos quadrados (X = X0 + V0t + At²/2).
> - **Velocidade vs Tempo:** Ajusta uma linha reta aos dados de velocidade (v = A*t).
> - **Aceleração Média:** Calcula a média dos valores de aceleração fornecidos.
> 
> **Visualização Gráfica:**
> 
> - **Gráfico de Posição vs Tempo:** Exibe os pontos de dados de posição como marcadores e a curva ajustada em vermelho.
> - **Gráfico de Velocidade vs Tempo:** Mostra os pontos de velocidade e a linha ajustada em vermelho.
> - **Gráfico de Aceleração vs Tempo:** Apresenta os pontos de aceleração e uma linha horizontal representando a aceleração média.
> 
> **Resultados e Conclusões:**
> 
> - No final, são apresentados os valores de A (aceleração calculada) para os ajustes. A aceleração média calculada e seu desvio padrão são exibidos para análise.
> 
> **Melhorias Futuras e Edições**
> 
> - **Esta aplicação pode ser expandida e melhorada de várias maneiras:**
>   - **Melhorias no Backend:** Refinar algoritmos de ajuste para lidar com diferentes tipos de dados ou adicionar suporte para mais regressões.
>   - **Melhorias no Frontend:** Melhorar a interface do usuário com mais opções de personalização nos gráficos ou interatividade adicional.
>   - **Edição Direta no Visualizador HTML:** Você pode editar diretamente o código HTML e JavaScript neste arquivo para ajustar o comportamento da aplicação.
>   - **Uso do ChatGPT:** Continue usando o ChatGPT para explorar e aprender mais sobre HTML, JavaScript e como melhorar esta aplicação.
> 
> **Conclusão**
> 
> Esta aplicação demonstra como você pode rapidamente criar uma ferramenta de análise de dados usando tecnologias web simples. O ChatGPT pode ajudar a entender cada parte do código e como ele interage para realizar análises estatísticas básicas. Sinta-se à vontade para editar e expandir esta aplicação para atender às suas necessidades específicas de análise de dados de experimento.

Incrementando o Código

Nesta seção, demonstramos como, utilizando um único comando que inclui o carregamento de uma figura (criada manualmente em um editor como CorelDRAW e exportada como JPG), podemos deduzir corretamente a equação da aceleração do carrinho em termos de massas, ângulo e aceleração gravitacional. Isso é feito com base na segunda lei de Newton, e toda a dedução é apresentada na página HTML usando LaTeX.

Prompt: "No código abaixo <código anterior>, adicione as equações em LaTeX que demonstram a equação de aceleração do bloco com massa m1 na figura, em função de m2, g e theta, conforme mostrado na figura."

O resposta do ChatGPT vem novamente em segundos:

Para adicionar as equações em LaTeX que demonstram a equação de aceleração do corpo com massa m1 em termos de m2, g e θ, podemos modificar o código HTML da seguinte forma. Vou incluir uma seção LaTeX dentro do corpo HTML para mostrar a derivação da fórmula, usando MathJax para renderização.

Aqui está o código HTML modificado:  

<novo código>

Este código HTML modificado inclui uma nova seção intitulada 'Dedução da Equação de Aceleração' que usa MathJax para renderizar as equações em LaTeX. Essas equações explicam a derivação da fórmula para a aceleração do corpo com massa m1 em função de m2, g e θ. Você pode abrir este arquivo HTML em um navegador para visualizar as equações renderizadas e interagir com o carregamento e plotagem dos dados.

E voilà.

O conjunto de dados de teste e o código acima estão todos disponíveis em nosso GitHub: Data & MRUA.

---

Expandindo o Espectro

Como os códigos acima são gerados em menos de uma hora, com poucos prompts o resultado em termos de qualidade e quantidade é fascinante. Todos os dias, surgem para mim novas ideias para aplicações inovadoras, desde calculadoras online adaptadas para cursos específicos como Álgebra Linear até laboratórios virtuais para experimentos em Física Experimental, como circuitos AC RLC, e ambientes educacionais para ensinar Redes Neurais, entre muitos outros recursos valiosos para educação e pesquisa (alguns dos quais podem ser visualizados, baixados e executados através do link abaixo; tudo que você precisa é de um navegador da web).

https://ai-talks.org/apps/

Pretendo continuar desenvolvendo essas ferramentas e outras, incluindo diversos Modelos de Linguagem Natural (NLMs), para atender às necessidades de estudantes, educadores e pesquisadores. Compartilharei (de graça) todas essas aplicações e ferramentas com você aqui no AI-Talks.org.

---

Conclusão

Este artigo detalhou minha jornada de adaptação e aprendizado das tecnologias essenciais para o desenvolvimento de aplicações web e ferramentas de análise de dados, destacando a importância de editores WYSIWYG e ferramentas modernas de inteligência artificial como o ChatGPT. A adoção de HTML e JavaScript, com suporte do ChatGPT, mostrou ser uma estratégia eficaz para modernizar laboratórios de ensino, fornecendo uma solução acessível e robusta para análise de dados experimentais. O desenvolvimento de uma aplicação para ajuste de curvas e visualização de gráficos em HTML/JavaScript exemplifica como a tecnologia pode ser utilizada para resolver problemas práticos e aprimorar as experiências de aprendizado dos estudantes. Além disso, a integração do LaTeX com a dedução e apresentação de fórmulas matemáticas, juntamente com a explicação detalhada dos códigos gerados pelo ChatGPT, mostrou como essas ferramentas podem facilitar o aprendizado contínuo e a autonomia no desenvolvimento web. O uso de ferramentas modernas e acessíveis como Raspberry Pi e Arduino, combinadas com aplicações web desenvolvidas colaborativamente com assistentes de IA, tem se mostrado uma abordagem viável para modernizar laboratórios, tornando-os mais eficientes e economicamente viáveis.

Em resumo, este artigo demonstra que, com as ferramentas e abordagens corretas, é possível transformar desafios tecnológicos em oportunidades de aprendizado e inovação, promovendo a inclusão e o desenvolvimento de habilidades essenciais em programação e análise de dados. O conhecimento adquirido e as soluções desenvolvidas têm o potencial de impactar positivamente a educação e a pesquisa, proporcionando recursos mais eficientes e acessíveis para todos.

---

#IA, #Aplicativos, #InteligênciaArtificial, #Chatbot, #ProgramaçãoComChatGPT, #Educação, #HTML, #Javascript, #LaTeX, #LLM, #UARM, #OQueVocêPedeÉOQueVocêRecebe, #OQueVocêVêÉOQueVocêRecebe, #WYAIWYG, #WYSIWYG

---

Copyright 2026 AI-Talks.org