Sistema de design do site

Referência e evidências

A referência visual canônica é o Hub Editorial Studio fornecido, inspecionado em 2026-09-07. O Astro importa diretamente seus tokens independentes de framework e as fontes locais; os estilos do site mapeiam os nomes existentes para esses tokens em vez de manter uma segunda paleta. Ambos os atributos de tema permanecem sincronizados.

O showcase React independente é material de referência, não o runtime do site nem uma lição traduzida. O site Astro usa controles nativos e pequenos módulos JavaScript. Logotipos de produtos e a capa da biblioteca de ícones fornecida não são reaproveitados como identidade do currículo. As ilustrações originais e os diagramas monocromáticos preservam suas proporções e cores nos dois temas.

Tokens de design observados

Os acentos identificam famílias de navegação e cartões e réguas decorativas, não a semântica dos diagramas. Cada diagrama Mermaid mantém a paleta branco/gelo/cinza/preto do repositório e sua legenda acessível. O hero, a galeria de filmes e o rodapé permanecem escuros nos dois temas; eles compartilham um único escopo de tokens invertido em vez de três paletas escritas à mão, então sua tinta, suas réguas e suas superfícies vêm dos mesmos tokens que o restante.

A marca-d’água do hero usa o logo original da Paula Silva com 8% de opacidade. As cores e a proporção permanecem intactas: sem aproximações com texto, rotação ou filtros de cor. É um fundo CSS decorativo, não um elemento interativo nem texto acessível.

Os navegadores móveis mantêm o zoom da página e usam áreas de navegação de 44 px. Os campos de busca e os seletores do estúdio usam texto de 16 px em telas estreitas e dispositivos de toque. Caminhos longos de arquivos quebram linha dentro dos resultados da busca, e as janelas acompanham a área visível dinâmica com rolagem contida; tabelas largas e código rolam dentro das próprias regiões em vez de alargar a página.

Tipografia e layout

A referência usa Inter para a prosa e JetBrains Mono para os pequenos rótulos em maiúsculas. Ambas as fontes são incluídas localmente, com alternativas do sistema e sem requisições a serviços de fontes de terceiros. A licença da Inter e a licença da JetBrains Mono estão incluídas.

• Cabeçalho compacto que permanece fixo durante a rolagem, com controles independentes de navegação, idioma e tema.
• Área de destaque introdutória escura, título editorial marcante e linhas de destaque discretas.
• Contêiner de conteúdo amplo, mas delimitado; largura de artigo legível e espaçamento generoso.
• Cartões quadrados ou sutilmente arredondados, bordas finas e sombra mínima.
• Navegação lateral para documentos de aprendizagem; sumário na página para guias longos.
• Grades responsivas passam a uma única coluna sem ocultar conteúdo essencial.

O texto de leitura mantém o token de corpo de 16 px em telas estreitas. A navegação, os filtros, as ações de origem e os controles de aprendizagem usam o token de área de toque de 44 px. Os seis links de seção continuam visíveis até 1200 px, quando o cabeçalho passa para o menu compacto; os dois títulos de seção mais longos usam rótulos de navegação curtos para que as barras em espanhol e português caibam em uma única linha. Os blocos de código mantêm espaço acima da primeira linha para o controle de cópia. Um documento de aprendizagem usa uma coluna mais larga que uma medida de livro, porque carrega diagramas, tabelas e código além da prosa; a prosa mantém uma medida delimitada dentro dessa coluna.

O espaçamento exato que não consta no CSS da referência inspecionada é uma escolha de implementação, não uma alegação de reprodução pixel a pixel.

Componentes

• Três rotas de idioma reais: inglês, espanhol e português do Brasil.
• Links de idioma para o mesmo documento, nunca uma troca que sempre volta à página inicial.
• Busca delimitada ao idioma selecionado, com entradas de origem claramente rotuladas.
• Explorador do repositório com todos os arquivos fonte, prévias de código e dados e downloads originais.
• Avisos para material histórico, exemplos executáveis sem tradução e licenças preservadas.
• Foco de teclado visível, link para pular, menu móvel sobreposto e comportamento de movimento reduzido.
• A resposta dos cartões atende ao ponteiro, ao foco de teclado e ao toque; a elevação fica reservada a um ponteiro real.
• A busca coloca as lições acima dos caminhos do repositório e limita esses caminhos para que não soterrem uma resposta.
• O modo de alto contraste do Windows preserva cada estado que a cor sozinha transmitiria.

Regras de conteúdo

Design para quem está começando

O README da raiz e Comece aqui devem levar a um primeiro exercício executável antes de apresentar a biblioteca completa. A Ordem de aprendizado identifica o trabalho obrigatório, opcional, avançado e de manutenção. Os Downloads fornecem materiais por laboratório sem exigir uma cópia completa do repositório.

Cada lição principal deve responder: o que estou aprendendo, por que usaria isso, o que já precisa funcionar, onde executo o comando, que resultado devo observar e como me recupero. O encerramento deve ser uma lista de evidências, não uma afirmação publicitária.

Padrão editorial de Markdown

• Um título principal e uma breve declaração de propósito antes dos detalhes.
• Uma tabela inicial com escopo, pré-requisitos, estimativa de tempo e evidência esperada.
• Títulos semânticos e links que descrevam seu destino.
• Notas, dicas e avisos GFM para decisões reais; não depender apenas da cor.
• Ações numeradas, comandos copiáveis com contexto do diretório de trabalho e pontos de verificação.
• Uma ilustração ou um diagrama específico do conceito com texto alternativo significativo.
• Execução obrigatória e opcional claramente separadas, especialmente para serviços reais.
• Navegação para o próximo passo e um reinício seguro que proteja outros projetos.

Ilustrações explicam um conceito; não substituem evidência executável. Capturas históricas de interfaces não devem sugerir disponibilidade atual de funcionalidades. A trilha profissional de exercícios permanece sem fantasia; as histórias continuam nas aventuras.

Traduza a prosa atual de aprendizagem, a navegação e os metadados dos documentos. Preserve identificadores, comandos, exemplos de código, dados exatos e URLs para que os exercícios continuem reproduzíveis. O material histórico e os arquivos consumidos por máquinas permanecem disponíveis como fonte original com um aviso localizado, sem serem falsamente identificados como lições traduzidas.

Nenhuma tradução automática de terceiros, solicitação a modelos, análise de uso ou credencial é necessária para ler o site.

Compilação e verificação

Use o build estático do Astro, as coleções de conteúdo validadas e a publicação pelo GitHub Actions. Traduções ausentes, links locais quebrados, cobertura incompleta das fontes e rotas de idioma inválidas são erros de build, não substituições silenciosas por inglês.

Antes de publicar, verifique a navegação em desktop e dispositivos móveis, a operação pelo teclado, a troca de idioma na mesma página, a busca localizada, os downloads das fontes e a renderização do Mermaid.

O guia de publicação documenta o build, os arquivos gerados e as referências oficiais do Astro e do GitHub. O layout é original; não requer um tema de terceiros nem um framework de aplicativos no lado do cliente.

Interação e movimento

O seletor de idioma permanece visível no cabeçalho em qualquer tamanho de tela, e o rodapé nomeia os três idiomas por extenso. Trocar de idioma preserva o documento, o fragmento do título e os filtros ativos da biblioteca.

O destaque inicial prioriza o título e as ações de aprendizagem, sem um painel lateral. A página inicial mostra a trilha real de aventuras: seis níveis construídos a partir do catálogo publicado, cada um com suas aulas. O catálogo de aventuras repete essa ordem em faixas de capas, e o índice de exercícios práticos agrupa os labs conforme seu catálogo, com cada cartão indicando sua tecnologia. Cada aula começa com uma ficha baseada nos próprios metadados: a capacidade que ensina, o nível, a duração estimada e o status. A biblioteca combina filtros por tema, busca localizada e marcações de leitura opcionais.

O encerramento da aula separa marcar esta página de gerenciar todas as marcações de leitura. Marcar é opcional, nunca bloqueia a próxima aula e nunca comprova que um lab foi concluído ou um teste passou. O gerenciamento fica em uma seção expansível secundária com uma confirmação que dá foco primeiro ao cancelamento; redefinir remove apenas as marcações de leitura deste site, não os checklists de evidências nem os arquivos de lab. Falhas de armazenamento mostram um estado indisponível em vez de zero ou uma mensagem de sucesso, com opções de recarregar e redefinir para recuperação. Os links de código-fonte e contribuição permanecem em outra seção expansível nativa que funciona sem JavaScript.

A página inicial oferece duas entradas ilustradas, aventuras e labs práticos profissionais, antes da progressão detalhada. A visão geral completa permanece em uma seção expansível nativa em vez de repetir toda a introdução. O rodapé usa uma ilustração compacta da mantenedora e separa links de aprendizagem, idiomas, créditos e licenças de fontes; diagramas decorativos não competem com a aula.

Animações de entrada, revelações únicas de seções, transições limitadas de contadores, feedback visual de cartões e um indicador de rolagem acrescentam movimento sem canvas nem framework de animação. As preferências de movimento reduzido desativam os efeitos. O conteúdo essencial permanece legível sem JavaScript; as seções expansíveis nativas continuam funcionando.

Algumas lições abrem com uma cena de mecanismo: um SVG original embutido que desenha o modelo ensinado na ordem de leitura, seguido de três legendas curtas. A cena é acionada ao entrar na tela e pode ser repetida; com movimento reduzido ela aparece completa e parada. A página inicial traz uma cena do mesmo tipo para o ciclo Ask, Plan, Agent, Revisão e Evidência, incluindo o caminho de retorno que uma lacuna não resolvida percorre. Lições longas trazem uma trilha de sessão que numera as seções, marca as já percorridas e mostra a posição atual. Cada aventura e cada laboratório trazem uma verificação de recuperação antes da seção em que a evidência é registrada: nada vem pré-selecionado, a opção escolhida explica por que ela se sustenta ou falha, e sem JavaScript cada opção e seu motivo continuam legíveis. A própria lista de evidência pode ser marcada durante o laboratório; as marcas ficam apenas naquele navegador e nunca substituem um comando que rodou. Uma lição termina com um cartão da próxima lição da trilha em vez de um link solto, e a navegação entre páginas faz uma transição suave onde o navegador oferece suporte. Tudo isso para quando a pessoa pede movimento reduzido.

Os diagramas de mecanismo inicialmente se ajustam ao contêiner, inclusive em telas estreitas. Os rótulos dos nós quebram linha dentro de limites com espaçamento interno, e as legendas se empilham conforme a largura da figura, não da tela. Um controle explícito de ampliação mostra o diagrama em tamanho de leitura, com uma região nomeada de rolagem horizontal acessível por teclado e orientação localizada; ajustar novamente à largura reinicia a rolagem horizontal. Esses controles manuais continuam funcionando com movimento reduzido. Sem JavaScript, a visão geral completa e as legendas permanecem visíveis.

Estúdio de prática integrado

O estúdio de prática está disponível nos três idiomas, com links na página inicial, no cabeçalho, no rodapé, na navegação de aprendizado e nas lições relacionadas. Suas abas usam fragmentos estáveis, navegação por teclado e alternativas legíveis sem JavaScript. A busca e o mapa do site incluem a página.

• Fluxo: reprodução explícita, pausa, etapa individual, velocidade, reinício e uma revisão com falha que bloqueia a etapa final de evidência. A reprodução pausa quando a página fica oculta ou quando o estudante sai da aba do fluxo; nada reproduz automaticamente.
• Contexto: um exercício delimitado de seleção com estados de material ausente, orçamento excedido, distração e foco. As unidades exibidas são sintéticas, não tokens de um modelo.
• Verificação: três verificações fixas de JavaScript executam no navegador contra implementações incompletas ou corrigidas. Alterar a implementação invalida os resultados anteriores. O módulo não avalia código arbitrário nem chama um serviço.

O estado das simulações é temporário e nunca é armazenado como conclusão do curso. As marcações de leitura continuam sendo um estado separado, escolhido explicitamente e local do navegador, que se sincroniza entre abas. Nenhuma simulação afirma que um agente, terminal ou laboratório real foi executado.

Tratamento de imagens e ícones

Os ícones lineares do site são pequenos SVGs originais com traço uniforme e semântica decorativa; os controles mantêm texto ou nomes acessíveis. As ilustrações dos cartões são decorativas ao lado dos títulos das lições. As imagens dos artigos preservam o texto alternativo descritivo, podem ser ampliadas em um diálogo operável por teclado e mantêm um link para a imagem original. Fechar o diálogo restaura o foco. Nenhuma imagem é invertida, esticada ou recolorida para simular o modo escuro.

Algumas aulas também trazem uma referência visual contextual da coleção fornecida. Cada referência preserva a proporção e tem uma descrição localizada do que observar. Capturas de interface são registros de um momento, não garantias de disponibilidade atual de recursos ou modelos. Capturas de benchmarks e fotografias de banco de imagens sem direitos de reutilização verificados não são apresentadas como evidência de aula nem como capas decorativas.

O layout estreito apresenta a navegação de aprendizado como um elemento expansível nativo, em vez de removê-la. Os controles principais usam o alvo de toque mínimo do design system. As preferências de movimento reduzido desativam o movimento sem desativar as ferramentas de aprendizado.

Capas de aventuras e montagens animadas

As 14 aventuras usam capas WebP otimizadas de 1456 x 832 recebidas da mantenedora, enquanto suas ilustrações conceituais SVG originais e localizadas permanecem em elementos expansíveis nativos. O inventário de capas registra cada par. A arte de fantasia fica limitada à trilha de aventuras; as ilustrações hands-on permanecem inalteradas.

A página inicial e o catálogo de aventuras incluem 3 montagens animadas silenciosas de 10 segundos em uma seção editorial de largura total. Cada uma tem um poster do primeiro quadro e uma descrição visual localizada. Passar o mouse ou focar com o teclado inicia uma cena sem um botão de reprodução separado; sair da cena restaura o poster. Em telas de toque, tocar na imagem alterna a reprodução. Apenas um clipe é reproduzido por vez.

Nenhuma fonte de vídeo é carregada antes da interação. Ocultar a página ou mudar para movimento reduzido restaura o poster sem retomada automática. Com movimento reduzido, mouse e foco mantêm a imagem estática e exigem um toque ou uma ativação explícita. Os links diretos continuam disponíveis sem JavaScript.

Os JPEGs e MP4s originais são preservados; capas otimizadas, cópias silenciosas de reprodução e posters são recursos separados. O inventário de mídia mapeia os arquivos, e as notas dos vídeos descrevem os limites de reprodução. As cenas geradas são introduções visuais, não capturas de interfaces nem prova de execução de um lab, agente de nuvem ou sessão SDK.