OLA — Fundamentos

Especificação da Visualização da Informação e do Conhecimento

Esta página define como especificar uma visualização no OLA, distinguindo o que é mostrado como informação visual e o que será construído como conhecimento por meio da interpretação.

M2 — método Visualização da informação Visualização do conhecimento Modelagem Aprendizagem ativa

Problema resolvido

Como especificar uma visualização para que ela não mostre apenas dados ou figuras, mas ajude o aprendiz a construir conhecimento?

A resposta é separar três elementos: o que será visualizado, como será interpretado e qual conhecimento se pretende construir. Uma visualização não entrega conhecimento sozinha; ela oferece uma representação que precisa ser lida, comparada, interpretada e conectada.

Visualização da informação ou visualização do conhecimento?

Visualização da informação

Mostra elementos observáveis: dados, formas, cores, linhas, picos, mapas, grafos, tabelas, circuitos, fluxos ou estados.

Pergunta central: o que está sendo mostrado?

Visualização do conhecimento

Ajuda o aprendiz a compreender relações, padrões, causas, ciclos, estruturas, dependências e princípios gerais.

Pergunta central: o que o aprendiz deve compreender?

Distinção importante: a visualização mostra informação; o conhecimento surge quando essa informação é interpretada em relação a uma intenção, um modelo mental e um contexto.

Fluxo de especificação

IntençãoO que se quer compreender ou explicar?
Modelo mentalQual estrutura orienta a interpretação?
FerramentasQuais meios serão usados para representar?
VisualizaçãoO que será tornado visível?
InterpretaçãoComo o aprendiz deve ler a visualização?
ConhecimentoQual entendimento deve ser construído?

Camadas da visualização

1. Camada do fenômeno

Define o que existe no mundo real ou conceitual: nervo, sistema, processo, domínio, problema.

2. Camada do modelo

Define como o fenômeno será simplificado: circuito, grafo, mapa, tabela, fluxo ou painel.

3. Camada visual

Define formas, cores, símbolos, setas, gráficos, nós, links, escalas e áreas de interação.

4. Camada de interação

Define como o usuário age: clicar, arrastar, filtrar, alternar, comparar, simular ou navegar.

5. Camada de interpretação

Define como ler: o que significa um pico, uma seta, uma cor, uma distância ou um agrupamento.

6. Camada de conhecimento

Define o entendimento esperado: padrão, princípio, relação causal, ciclo, estrutura ou decisão.

Modelo de especificação

Para cada visualização criada no OLA, recomenda-se registrar uma pequena especificação com os campos abaixo.

Campo Pergunta orientadora Resposta esperada
Intenção Por que esta visualização existe? Define a necessidade cognitiva ou didática.
Fenômeno ou objeto O que está sendo representado? Define o fenômeno, sistema, processo ou conceito.
Modelo mental Qual estrutura orienta o entendimento? Define a forma de pensar: ciclo, rede, fluxo, camada, hierarquia.
Ferramentas Com que meios a visualização será construída? IA, D3.js, Falstad, HTML, tabela, mapa, gráfico, simulador.
Elementos visuais O que aparece na tela? Nós, setas, cores, gráficos, picos, componentes, cartões, linhas.
Interação O que o usuário pode fazer? Clicar, filtrar, arrastar, simular, comparar, expandir, recolher.
Interpretação Como ler o que aparece? Regras de leitura, legenda, significado dos estados e relações.
Conhecimento esperado O que deve ser compreendido? Princípio, ciclo, causa-efeito, estrutura, padrão ou decisão.

Exemplo aplicado: simulador do nervo eletrônico

No simulador do nervo eletrônico, a especificação pode ser registrada assim:

Visualização da informação

  • Circuito: modelo simplificado do neurônio.
  • Interruptor: estímulo aplicado.
  • Corrente: movimento indicado por pontos amarelos.
  • Cores: estados elétricos.
  • Gráfico: comportamento do sinal ao longo do tempo.

Visualização do conhecimento

  • Repouso: o sistema tem estado estável.
  • Estímulo: uma entrada altera o estado do sistema.
  • Disparo: há uma resposta quando o limiar é atingido.
  • Recuperação: o sistema retorna ao equilíbrio.
  • Ciclo: estímulo → resposta → recuperação → repetição.
Especificação completa:
Intenção: entender o disparo do nervo.
Modelo mental: transformar algo invisível em algo visível.
Ferramenta: IA + simulador Falstad + HTML.
Visualização: circuito, corrente, cores e gráfico.
Interpretação: reconhecer repouso, estímulo, disparo e recuperação.
Conhecimento: compreender o fenômeno como ciclo.

Aplicação prática

Ver a implementação desta especificação aplicada ao objeto de aprendizagem:

🔗 Simulador de Nervo Eletrônico Interativo

Esta página mostra a aplicação prática da especificação: modelo mental, circuito, interação, interpretação dos ciclos e conhecimento obtido.

Reflexão metacognitiva sobre a visualização

Esta seção registra uma reflexão sobre o próprio processo de aprendizagem utilizado para construir e interpretar esta visualização. O objetivo não é apenas compreender o fenômeno do nervo eletrônico, mas também compreender como o conhecimento foi construído.

Pergunta orientadora:
O que foi aprendido além do funcionamento do nervo?

Intenção inicial

A intenção não era programar um circuito eletrônico nem estudar profundamente a matemática do modelo FitzHugh-Nagumo.

O objetivo era compreender:

Como um nervo gera um sinal elétrico.

Modelo mental utilizado

Foi usado um modelo mental baseado em:

Tornar visível algo que normalmente é invisível.

O fenômeno biológico foi transformado em uma representação observável usando circuitos, gráficos e interação.

Mediação por ferramentas

O conhecimento não foi construído diretamente por programação manual.

Foram utilizadas ferramentas de apoio:

  • IA
  • Falstad
  • HTML
  • Visualização gráfica

As ferramentas atuaram como instrumentos cognitivos.

Conhecimento sobre o fenômeno

O simulador mostrou que o comportamento do nervo pode ser entendido como um ciclo:

estímulo → resposta → recuperação → repetição

Conhecimento sobre a aprendizagem

Surgiu também um conhecimento sobre o próprio processo de aprender:

intenção → modelo mental → ferramenta → visualização → interpretação → conhecimento

O aprendizado ocorreu por modelagem, uso de ferramentas e interpretação da representação.

Reflexão geral

O aprendizado não foi apenas:

  • sobre nervos;
  • sobre circuitos;
  • sobre simuladores.

Houve também aprendizado sobre:

Como transformar uma intenção de compreensão em uma representação interpretável usando mediações adequadas.
Síntese metacognitiva:

O simulador tornou explícita uma forma de trabalho já utilizada no OLA:

compreender → modelar → representar → visualizar → interpretar → aprender

Critérios de qualidade

Clareza

O usuário entende o que está sendo mostrado e por que aquilo importa.

Legibilidade

Cores, textos, símbolos e legendas são compreensíveis em celular, tablet, desktop e TV.

Interpretação guiada

A página orienta como transformar sinais visuais em significado.

Conexão com o problema

A visualização responde a uma intenção clara, e não é apenas decorativa.

Conhecimento explícito

A página declara qual conhecimento foi obtido ou deve ser construído.

Reutilização

A especificação pode ser reaproveitada para grafos, simuladores, mapas e dashboards.

Uso no OLA

Esta página pode ser usada como referência para especificar visualizações em diferentes áreas do OLA: grafos D3.js, mapas de domínio, simuladores, dashboards, trilhas de aprendizagem e páginas de análise.

Regra prática: toda visualização importante do OLA deve explicitar: o que mostra, como deve ser lida e qual conhecimento ajuda a construir.

Páginas relacionadas