Use isto quando você está ensinando um backlog de trabalho que passa por etapas — colunas de cartões que você pode avançar um passo de cada vez, como uma lista de bugs indo de identificado a entregue.
Este é um exemplar copiável. Leve a seção do quadro abaixo para uma lição real construída a partir de assets/lesson-template.html — mantenha os tokens de design e o padrão Simples → Técnico intactos.
Uma equipe encontra bugs mais rápido do que consegue corrigi-los. Para manter a sanidade, ela fixa cada bug em uma parede dividida em três colunas — Triagem (recém-identificado), Em andamento (alguém está cuidando) e Concluído (entregue). Um bug sempre fica em exatamente uma coluna, e o trabalho flui da esquerda para a direita.
Cada cartão abaixo carrega as mesmas coisas que um rastreador de issues real mostra: um título curto, uma etiqueta colorida para a área do app que ele afeta e um ponto de prioridade. Aperte a seta de um cartão para deslizá-lo para a próxima coluna — ou pegue um cartão e arraste-o para qualquer lugar. As contagens no topo permanecem honestas o tempo todo.
Pense nisso como… bilhetes adesivos numa parede de cozinha. Um bilhete nunca fica em dois lugares; você o descola do "a fazer" e o cola em "fazendo". Nada se perde — cada bilhete está em uma coluna, e a parede sempre te diz quanto ainda falta.
O quadro é uma pequena máquina de estados. Cada bug é um objeto que guarda um campo col que só pode ser triage, progress ou done. As colunas na tela não são a fonte da verdade — o array de objetos de bug é. Mover um cartão apenas muda esse único campo e repinta; tanto o botão de seta quanto um arrastar-e-soltar caem na mesma função moveTo(), então as duas interações nunca podem discordar.
Como a interface é reconstruída a partir do estado a cada mudança, as contagens nunca podem se desviar: render() lê o array, os selos o contam, e um cartão fisicamente não pode aparecer em duas colunas. Este é o mesmo formato de um kanban real — Jira, Linear, Trello — menos a rede. Sem framework, sem biblioteca: um array, uma função de renderização, eventos nativos de arrastar do HTML.
function render() { cols.forEach(c => lists[c].innerHTML = ''); // limpa as 3 colunas bugs.forEach(bug => lists[bug.col].append(cardEl(bug))); cols.forEach(c => badge[c].textContent = bugs.filter(b => b.col === c).length); }moveTo — o único lugar onde a coluna de um bug muda
function moveTo(id, col) { const bug = bugs.find(b => b.id === id); if (!bug || bug.col === col) return; bug.col = col; // fonte única da verdade render(); // repinta a partir do estado }
Um quadro de triagem transforma uma ideia abstrata — o trabalho tem etapas, e os itens se movem entre elas — em algo que o leitor pode sentir clicando. As colunas dão ao olho uma leitura instantânea de "quanto está onde", e a seta mantém a interação óbvia para quem nunca arrastou nada. Recorra a ele sempre que estiver ensinando pipelines, filas de revisão, ciclos de vida de tickets ou qualquer fluxo de trabalho "isto vai de A para B para C".