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 destaques identificam famílias de navegação/cartões e linhas decorativas, não a semântica dos diagramas. Cada diagrama Mermaid mantém a paleta branca/gelo/cinza/preta do repositório e uma legenda acessível.

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.

A leitura do texto permanece no token base de 16 px em telas estreitas. Navegação, filtros, ações de origem e controles de aprendizado usam o token de alvo de toque de 44 px. A barra superior muda para o menu compacto em 1280 px para deixar espaço para rótulos traduzidos; os blocos de código mantêm espaço acima da primeira linha para o controle de cópia.

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 reais de idioma: inglês, espanhol e português brasileiro.
• Links de idioma para o mesmo documento, nunca um seletor que sempre retorne à página inicial.
• Busca restrita ao idioma selecionado, com entradas da fonte original claramente identificadas.
• Explorador do repositório com todos os arquivos-fonte, prévias de código/dados e downloads dos originais.
• Avisos para material legado, exemplos executáveis não traduzidos e licenças preservadas.
• Foco de teclado visível, link para pular conteúdo, menu para dispositivos móveis e comportamento de movimento reduzido.

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 todos os tamanhos de tela; a página inicial também mostra os nomes dos três idiomas. A troca de idioma preserva o documento, o fragmento do título e os filtros ativos da biblioteca.

A seção principal contém um acordeão de cinco etapas do fluxo de trabalho que pode ser operado pelo teclado. A biblioteca combina filtros por tema, busca localizada e marcações de leitura opcionais. As marcações de leitura são um estado local do navegador informado pelo próprio usuário, nunca uma comprovação de que um lab ou teste passou; os estudantes podem limpar apenas as marcações deste site mediante confirmação explícita.

Animações de entrada, revelações únicas de seções, transições delimitadas dos contadores, respostas dos 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 continua legível sem JavaScript; os elementos nativos de expansão do fluxo de trabalho continuam funcionando.

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.

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. Cada uma tem um poster do primeiro quadro, uma descrição visual localizada, controles nativos de reprodução e um retorno explícito à imagem estática. Nenhuma fonte de vídeo é carregada até o aluno escolher reproduzir. Apenas um clipe é reproduzido por vez. Ocultar a página ou mudar para movimento reduzido restaura o poster sem retomada automática. 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.