Use isto quando quiser colocar várias versões da mesma ideia lado a lado — layouts, implantações, planos — e deixar o leitor alternar entre elas para sentir os trade-offs.
assets/lesson-template.html — mantenha os design tokens e o padrão .tech-toggle intactos.
Imagine o mesmo pequeno app web — uma página de agendamento para um estúdio de ioga. Não existe uma única maneira certa de rodá-lo. Você pode colocá-lo em um computador alugado, em três computadores atrás de um guarda de trânsito, ou entregá-lo a uma nuvem que conjura computadores só quando alguém visita. Cada escolha troca dinheiro por segurança e esforço de um jeito diferente.
O alternador abaixo deixa o leitor experimentar cada opção. Clique em um cartão e a imagem muda, e uma nota curta explica o que você acabou de ganhar e o que abriu mão.
Pense nisso como… escolher como ir ao trabalho. Uma única bicicleta é barata, mas se ela quebra você fica na mão. Uma pequena frota de carros mantém você em movimento se um deles falha. Um app de transporte por aplicativo significa que você nunca é dono de um veículo — paga só por viagem, mas fica à mercê do serviço.
Uma galeria de exploração / variantes apresenta N versões de um mesmo assunto para que o leitor as compare no mesmo lugar em vez de rolar entre diagramas separados. A UI central é um alternador: uma tablist de botões de variante que troca um SVG inline mais um painel de trade-offs. O estado vive no JS e é espelhado com aria-selected para que a variante ativa seja anunciada.
Use sempre que a tarefa de ensino for "aqui estão as formas que a mesma coisa pode assumir" — topologias de implantação, layouts de página, opções de modelo de dados, planos de preço. Evite-o para passos sequenciais (use um fluxo) ou para uma única resposta canônica (basta desenhá-la uma vez).
Escolha um layout de implantação. O diagrama e a nota de trade-off se atualizam juntos.
Tudo — web, app, arquivos — vive em uma máquina alugada. A mais barata para começar, a mais simples de raciocinar.
Três servidores idênticos ficam atrás de um balanceador de carga que divide os visitantes entre eles. Um pode falhar e o site continua no ar.
Você não é dono de nenhum servidor. A nuvem roda seu código em funções de vida curta, conjuradas por requisição e cobradas só enquanto rodam.
Os controles são um role="tablist" de elementos <button> reais. Clicar em um define aria-selected="true" nele (e false nos demais), mostra o role="tabpanel" correspondente, troca qual grupo SVG <g data-diagram> é exibido e reescreve o aria-label do SVG + a legenda para que usuários de leitor de tela e videntes fiquem em sincronia.
As setas movem entre as abas e as ativam (foco itinerante), seguindo o padrão de abas WAI-ARIA. Home/End saltam para a primeira/última variante. Os três diagramas vêm em um único SVG inline, então a troca é instantânea e não precisa de rede.