Simulador interativo de configuração de roteador para aprendizagem de redes

Contexto

O simulador nasceu na Ilha Interdisciplinar de Racionalidade “A invisibilidade do Wi-Fi: por que a internet de 400 Mega trava?”, produzida na Licenciatura em Computação. A investigação relaciona ondas, disputa pelo canal e fila de pacotes à configuração. A versão atual organiza essa prática em seis desafios; o README propõe uma aula de 50 minutos.

Problema pedagógico

Mexer no roteador real da escola ou de casa pode derrubar a rede de todos, e muitas escolas públicas não têm equipamento de laboratório. O simulador oferece um lugar seguro para testar escolhas e receber retorno sem modificar equipamentos.

Meu papel

• desenho e programação do simulador;
• escolha dos conceitos e das telas a reproduzir;
• integração com a investigação e com o guia em PDF;
• publicação no GitHub Pages.

Conceitos trabalhados

• SSID, rádios de 2,4 e 5 GHz, largura de canal e potência.
• Escolha de canal a partir de uma varredura fictícia de redes vizinhas.
• Segurança: rede aberta, WEP, TKIP, WPA2-AES, WPA3, senha e WPS.
• QoS, upload e download, conversão de Mbps para Kbps e prioridade de videochamadas.
• Leitura cronológica de um log fictício e escolha de uma primeira ação.

Resultado implementado

• Simulador publicado, em arquivo único, sem instalação nem cadastro.
• Seis desafios com dicas, verificação automática e feedback específico.
• Separação entre campos editados e configuração salva; aviso de alterações não salvas.
• Marcação de desafios concluídos no navegador e opção Recomeçar tudo.

O relato autoral informa uso na oficina da Ilha de Racionalidade. Não há medição formal de aprendizagem publicada nem evidência de aplicação dos seis desafios atuais que permita afirmar eficácia pedagógica comprovada.

O que este caso demonstra

• Transposição didática de redes
• Desenho de objeto de aprendizagem
• HTML, CSS e JavaScript
• Feedback formativo
• Atenção a escolas com pouca infraestrutura

Como funciona

• HTML, CSS e JavaScript puro em um único index.html, sem dependências externas; o arquivo baixado pode ser aberto offline.
• Menu com Início, Status, Wireless 2,4 GHz, Wireless 5 GHz, QoS e Ferramentas do Sistema.
• Status apresenta o plano fictício de 100 Mbps de download e 20 Mbps de upload e uma tabela fixa de redes vizinhas. Ferramentas contém um log fictício; backup, firmware e reinicialização não são executados.
• Salvar valida os campos do painel e atualiza a configuração em memória: SSID até 32 caracteres, senha de 8 a 63 caracteres e banda de QoS em números inteiros.
• Verificar confere o desafio. Nos exercícios de configuração, usa os valores salvos e avisa se a tela contém alterações ainda não salvas; nos questionários, lê as respostas selecionadas.
• localStorage guarda somente os índices dos desafios concluídos. Configurações, respostas e justificativas não são restauradas ao recarregar a página.
• Atalhos de salto, foco visível e preservado nos botões de desafio, mensagens em região estável e erros associados aos campos apoiam navegação por teclado. Há contraste reforçado e suporte a tela de 320 px/movimento reduzido.

Decisões de design

Parecer um roteador, sem controlar um roteador

O cabeçalho, o menu e os formulários aproximam a organização de um painel doméstico. O aviso de simulação e a confirmação ao salvar esclarecem que nenhum equipamento real é alterado.

Retorno sobre a escolha

Cada desafio combina enunciado, dica opcional e mensagens próprias para erros. Ao acertar, o aluno recebe uma explicação e pode avançar; não se trata apenas de mostrar “certo” ou “errado”.

Operação local e sem cadastro

A atividade funciona no próprio navegador. Se o armazenamento local não estiver disponível, a página segue funcionando, mas o progresso não é preservado entre visitas.

Limitações atuais

• Não calcula fisicamente interferência, alcance, velocidade ou comportamento de pacotes. São critérios didáticos, não um modelo de desempenho de rede.
• A varredura e o log são fixos: todos recebem o mesmo cenário. Canal 11 e potência alta são respostas desse laboratório, não recomendações universais de produção.
• No desafio 3, a explicação livre é conferida somente pelo mínimo de 40 caracteres; seu conteúdo precisa de comparação com a referência e discussão com o professor.
• O professor não recebe respostas ou relatórios; a marcação de conclusão registra só que o desafio foi resolvido.
• Respostas e critérios estão públicos no JavaScript e no README. Não há separação protegida entre versão do aluno e gabarito do professor.
• Não há DHCP configurável, firewall, VLAN, rotas ou atualização de firmware. A suíte de interface cobre Chromium e duas telas emuladas, não aparelhos físicos, outros navegadores ou auditoria completa de acessibilidade.

Próximos recursos propostos

• Cenários variados de varredura e log, sem apresentar o cenário fixo como medição real.
• Exportação das respostas para avaliação formativa pelo professor.
• Painel DHCP e desafio de rede de convidados isolada.
• Validação com tecnologias assistivas e usuários, além de organização dos materiais de aluno e professor.

O simulador está publicado: abrir a atividade (abre em nova aba). Esta descrição foi conferida em 23/10/2026 contra o código no commit 7b50973 (abre em nova aba) e seu README versionado (abre em nova aba).

Os seis desafios têm testes de interface automatizados com Playwright, executados no GitHub Actions em tela de computador e de celular: ver execuções (abre em nova aba).

Testes automatizados de interface

Em 23/10/2026, a execução na main (abre em nova aba), no commit 4a4286f, aprovou 38 execuções: 19 cenários em duas telas Chromium, computador (1280 × 800) e celular emulado (390 × 844), sem retentativas. A suíte versionada (abre em nova aba) completa os seis desafios pelos controles reais e verifica feedback, configuração não salva, campos inválidos, progresso, reset, falhas de armazenamento, teclado básico e abertura do arquivo offline.

Na adição dessa suíte de interface, o HTML da atividade permaneceu inalterado. Os testes usam dados fictícios e não acessam equipamentos ou respostas de alunos. O resultado valida o artefato local, não disponibilidade do Pages, aparelhos físicos, leitores de tela, contraste/WCAG completos ou aprendizagem em turma. Para a evidência mais recente, consulte o workflow de interface na main (abre em nova aba).

Revisão delimitada de acessibilidade

Em 23/10/2026, o commit e54bbd7 corrigiu contraste, perda de foco ao trocar de desafio, identificação de painéis/campos e mensagens instáveis. A execução na main (abre em nova aba) aprovou 58 execuções: 29 cenários em duas telas Chromium, sem retentativas. São os 19 cenários anteriores e 10 de acessibilidade em cada tela.

A suíte de acessibilidade (abre em nova aba) analisa regras automáticas A/AA com axe-core nos painéis e desafios/feedbacks examinados e verifica teclado, foco, atalhos, erro associado ao campo, mensagem persistente, tela de 320 px e movimento reduzido. Os enunciados e critérios dos seis desafios foram preservados.

Ausência de violações automáticas nos estados testados não equivale a certificação WCAG. Os relatórios preservam itens inconclusivos para avaliação humana. Não houve validação com NVDA/JAWS/VoiceOver, aparelhos físicos ou usuários com deficiência, nem medição de aprendizagem em turma.

// Verifica o desafio e detecta alterações não salvas (excerto)
function verify() {
    var ch = challenges[current];
    var result = ch.check();
    var fb = document.getElementById('feedback');
    var pending = unsavedPanels(ch.panels).map(function(id) {
        return PANEL_NAMES[id];
    });
    // ... feedback e atualização do progresso
}

Objetivo de aprendizagem

Configurar e justificar escolhas de alcance, canal, faixa, segurança e QoS; interpretar o log fictício antes de escolher uma ação. A verificação automática apoia a atividade, mas a justificativa e a transferência para outros cenários precisam de mediação.

Instruções para o aluno

1. Abra o simulador e leia o desafio no quadro Desafios.
2. Use o menu para consultar Status ou Ferramentas e encontrar os campos pedidos.
3. Nos desafios de configuração, altere os campos e clique em Salvar em cada painel modificado. Nos questionários, responda no próprio quadro.
4. Clique em Verificar, leia o feedback e corrija o que faltar. Use a dica apenas se precisar.
5. Anote a escolha e sua justificativa; compartilhe com o professor, pois o simulador não envia respostas.

Os seis desafios implementados

1. Mais alcance na rede 2,4 GHzAjuste rádio, largura de canal e potência para o cenário de uma sala distante.
2. Escolha o canal com menos interferênciaConsulte a varredura fictícia em Status, escolha o canal e justifique pela ocupação e pelo sinal dos vizinhos.
3. 2,4 GHz ou 5 GHz?Classifique cinco frases e explique a diferença entre as faixas com suas palavras.
4. Encontre a configuração inseguraRevise segurança, senha e WPS, sem deixar a outra faixa insegura.
5. Priorize as aulas on-lineConsulte o plano fictício de 100/20 Mbps, converta para Kbps e configure QoS para videochamadas.
6. Interprete o log de eventosLeia a sequência de autenticações, identifique o padrão e escolha a primeira atitude no cenário proposto.

Feedback ao aluno

O botão Verificar já retorna mensagens específicas: por exemplo, explica a ocupação do canal 1, por que uma banda de QoS acima do plano atrapalha a lógica do exercício e qual linha do log mostra a WAN estável. Ao acertar, apresenta uma explicação do conceito. Alterações ainda não salvas geram aviso, porque não mudam a configuração verificada.

Na explicação livre do desafio 3, só o tamanho mínimo de 40 caracteres é verificado; não há avaliação semântica. Peça ao aluno para comparar com a resposta de referência e defender sua escolha. A discussão mediada complementa o feedback, não é mais sua única fonte.

Critérios de referência para o professor — públicos

1. No cenário de alcance, rádio 2,4 GHz ligado, largura de 20 MHz e potência Alta. Discuta por que potência alta não é solução universal em redes com vários APs.
2. Canal 11 e largura de 20 MHz para a tabela fictícia apresentada. Não é uma indicação fixa de canal para qualquer ambiente.
3. Na ordem das cinco frases, 2,4 GHz; 5 GHz; 2,4 GHz; 5 GHz; 2,4 GHz. A explicação deve ter pelo menos 40 caracteres, mas seu sentido é avaliado pelo professor.
4. Nas duas faixas, WPA2-AES ou WPA3, senha com pelo menos 12 caracteres, sem padrão numérico ou repetição de um único caractere e fora da lista didática de senhas comuns; WPS desligado em 2,4 GHz. Não use senhas reais na atividade.
5. QoS ligado, download de 80.000 a 100.000 Kbps, upload de 16.000 a 20.000 Kbps e prioridade para videochamadas, de acordo com o plano fictício de 100/20 Mbps.
6. No cenário do log, reconhecer oito falhas do mesmo MAC seguidas de associação; escolher identificar o aparelho, trocar a senha e reforçar a segurança. São dados fictícios para discussão, não evidência de ataque real.

Esses critérios também estão disponíveis no README e no código. Ocultar um bloco com details não protege um gabarito; a atividade não deve ser usada como prova individual sem adaptação.

Para outros professores

O README traz uma sequência sugerida de 50 minutos (abre em nova aba), conhecimentos prévios e critérios dos desafios. Para uma nova turma em computador compartilhado, use Recomeçar tudo. Recarregar a página restaura os campos iniciais, mas pode manter os desafios marcados como concluídos no armazenamento local.

Recolha justificativas separadamente e registre resultados reais apenas após uma aplicação autorizada e anonimizada. Conclusão automática de desafios é evidência de interação com o artefato, não medida suficiente de aprendizagem.