Ensinar arquitetura mostrando
a máquina funcionando.
A maior parte do material de arquitetura de computadores é estática: diagramas de blocos com setas que nunca se movem. O InsidePC nasceu de uma pergunta simples — e se, em vez de desenhar o caminho do byte, a gente executasse o byte de verdade e deixasse o desenho ser consequência disso?
O problema pedagógico
Quem aprende arquitetura enfrenta uma inversão desconfortável: os conceitos são concretos — fios, tensões, registradores — mas chegam ao aluno de forma completamente abstrata, em slides. O resultado é que muita gente decora “busca, decodifica, executa” sem nunca ter visto o que isso significa.
Simuladores existem, e bons. Mas costumam cair em um de dois extremos: ou são animações roteirizadas, bonitas e pedagogicamente frágeis (mudar o programa não muda nada), ou são simuladores fiéis com interface de instrumento de laboratório, corretos e intimidadores. O InsidePC tenta ficar no meio: execução real por baixo, apresentação cuidadosamente projetada por cima.
Princípios do projeto
Nenhum passo é escrito à mão. O que aparece na tela é o traço de uma CPU que montou e executou o programa. Se a animação e a execução discordassem, a animação estaria errada.
O modo básico narra em português comum; o modo engenharia mostra RTL, sinais e endereços. São duas leituras do mesmo evento, não dois simuladores.
Um soquete com pinos, um DIMM com contatos dourados e um display de POST não são enfeite: eles ancoram o abstrato em objetos que o aluno vai reconhecer quando abrir um gabinete de verdade.
O manual declara explicitamente o que o modelo não simula — pipeline, MMU, coerência de cache. Um simulador didático que finge ser completo ensina confiança indevida.
HTML, CSS e JavaScript puro. Sem build, sem servidor, sem dependência. Copiar a pasta e abrir o arquivo tem de bastar, inclusive offline.
Todo laboratório pode ter o código-fonte editado e remontado na hora. O aluno que quebra o programa e entende por que quebrou aprendeu mais do que quem só assistiu.
Como o software está organizado
A decisão estrutural mais importante foi separar o motor da apresentação. O arquivo cpu.js não conhece o DOM: dado um código-fonte e algumas condições iniciais, ele devolve um traço completo de microoperações. Isso o torna testável fora do navegador — e foi assim que a máquina foi validada durante o desenvolvimento.
assets/js/cpu.jsMotorConjunto de instruções, montador de duas passagens, modelo de memória, cache, dispositivos de E/S e o sequenciador que emite cada microoperação com sua notação RTL, sinais e custo em ciclos. Nenhuma linha de interface.
assets/js/simulator.jsBancadaConsome o traço do motor e o transforma em animação: rotas ortogonais entre componentes, pacotes de dados, barramentos bit a bit, analisador lógico, dump de memória, tabela de cache e o depurador com pontos de parada.
assets/js/docs.jsManual vivoGera as tabelas do manual a partir do próprio motor e implementa os widgets interativos: conversor de bases, decodificador de opcode, calculadora de cache e laboratório da ALU.
assets/js/home.jsVitrineExecuta o LAB 01 no motor real e reproduz o resultado na miniatura da página inicial. A vitrine e a bancada mostram a mesma máquina.
assets/css/styles.cssSistema visualVariáveis de cor por tipo de sinal (dado, endereço, controle, interrupção), a placa de circuito impresso, os componentes físicos e todos os estados de animação.
*.htmlPáginasLaboratório, bancada, documentação e projeto. Marcação semântica, sem geração dinâmica de estrutura além dos widgets.
O que mudou nesta versão
| Área | Antes (V4) | Agora (V5) |
|---|---|---|
| Motor | Passos de animação escritos manualmente para cada laboratório | CPU completa com montador; a animação é derivada da execução |
| Programas | Fixos e não editáveis | Assembly real, editável e remontável em qualquer laboratório |
| Laboratórios | 5 | 8, incluindo laço, sub-rotina com pilha e editor livre |
| Placa | Blocos retangulares rotulados | Soquete com pinos, DIMMs, flash SOIC-8, M.2, VRM, PCH com dissipador, ventoinha e display de POST |
| Instrumentos | Osciloscópio ilustrativo | Analisador lógico desenhado a partir do traço real, barramentos bit a bit, contagem de ciclos e CPI |
| Depuração | Avançar e reiniciar | Passo por microoperação ou por instrução, pontos de parada, dump de memória e inspeção da cache |
| Documentação | Página curta e genérica | Manual de 20 seções com tabelas geradas pelo motor e quatro widgets interativos |
Uso em sala de aula
Comece pelo modo básico com os LABs 01 e 02. A pergunta que costuma destravar a turma é: “o byte mudou em algum momento do caminho?”. Ele não muda — e entender por quê é entender o que uma máquina faz.
Use o modo engenharia com os LABs 04, 05 e 07. A tabela de cache e a contagem de ciclos permitem exercícios quantitativos: calcular taxa de acerto, CPI médio e o impacto da localidade.
Peça um programa no LAB 08 com um requisito verificável — por exemplo, exibir a soma de dois valores da memória — e avalie pelo traço de execução, não só pelo resultado final.
O relatório de execução do monitor pode ser copiado como texto, útil para montar material de aula com os passos exatos que a turma acabou de ver.
Roteiro de evolução
- Pipeline de 5 estágiosUma segunda visão da CPU mostrando sobreposição de instruções, bolhas e adiantamento de operandos.
- Cache associativa por conjuntosComparar mapeamento direto, 2 vias e totalmente associativa no mesmo programa, medindo conflitos.
- DMATransferir o setor de boot sem passar pela CPU, para contrastar com a cópia byte a byte do LAB 03.
- Modo de comparaçãoExecutar dois programas lado a lado e confrontar ciclos, CPI e acessos à memória.
- Exportação de traçoSalvar a execução em formato tabular para uso em exercícios e correção automática.
Créditos e uso
Projeto desenvolvido como material didático aberto para o ensino de organização e arquitetura de computadores. A máquina IPC-8 é original; algumas convenções foram adotadas de arquiteturas históricas por seu valor de reconhecimento, e estão identificadas no manual.
Você pode usar, adaptar e redistribuir este material em contextos educacionais. Se ele for útil na sua aula, a melhor retribuição é reportar o que confundiu os alunos — é assim que a próxima versão fica melhor.
Tudo isso existe para um momento só.
Aquele em que o aluno percebe que a máquina não é mágica: é um laço curto, repetido muito rápido, com fios que ele consegue apontar.