Recons­truindo a dsti.school: dezoito meses de estrada, três semanas no teclado

Esta é a versão longa de como reconstruímos dsti.escola - e por que uma escola de engenharia pequena e seletiva no Riviera Francesa acabou escrevendo sua própria cadeia de construção de site estático, seu próprio validador schema.org e seu próprio mecanismo de geolocalização de borda. A versão resumida é uma frase: a maior parte do que parece ser marketing é na verdade engenharia, e a maior parte da engenharia só faz sentido quando você sabe o que é para. Portanto, esta postagem faz as duas coisas – os sistemas, na íntegra, e as razões por trás deles.

Dois esforços correm paralelamente ao longo da história. Um deles são dezoito meses construindo uma rede global de parceiros, na estrada, uma instituição por vez. A outra são três semanas reconstruindo o site do zero. Eles parecem não relacionados. São o mesmo projeto: uma tentativa sustentada de ganhar a confiança de uma família numa escola da qual muitas vezes nunca ouviram falar, num país que raramente é o seu primeiro instinto. O site faz parte desse esforço que acontece enquanto todos dormem, então é melhor que seja bom.

01A razão pela qual existe: uma rede, não um mercado de origem

Antes de qualquer código: o site foi reconstruído por causa da origem real dos nossos alunos. Nos últimos dezoito meses, a rede de parceiros-conselheiros da DSTI cresceu de algumas dezenas de relacionamentos para 92 parceiros aprovados em 78 países e territórios. Esse crescimento aconteceu pessoalmente – feiras, visitas ao campus, longas conversas – e mudou a função do site. Já não é uma brochura para quem já nos conhece. É, cada vez mais, o primeiro encontro sério que um futuro aluno em Lagos, La Paz, Hanói ou Bogotá tem com a escola, por telefone, numa ligação desigual, numa língua que pode não ser a primeira.

Esse único fato estabelece quase todas as restrições técnicas que se seguem: tem que ser rápido no celular, legível para máquinas e também para pessoas, disponível em mais de um idioma como cidadão de primeira classe, e impossível enviar quebrado, porque raramente há alguém acordado para pegá-lo. Nenhuma dessas são escolhas estéticas. São consequências de quem está do outro lado.

02A aposta: excelência artesanal como único fator de igualdade

Somos pequenos. Não temos um nome famoso nem um orçamento enorme e não vamos adquirir nenhum deles neste trimestre. Que equipe pequena pode controle é a qualidade daquilo que ele realmente envia. Portanto, a aposta por trás da reconstrução foi deliberadamente antiquada: superar a engenharia do problema. Tornar o site mais rápido, mais limpo, mais correto e mais legível por máquina do que escolas cem vezes maiores que o nosso tamanho, porque essa é uma competição decidida pelo cuidado e pela disciplina, e não pelos gastos.

É também por isso que a reconstrução criou um volante em vez de uma reformulação única. Todas as propriedades de qualidade que queríamos – velocidade, validade, legibilidade por máquina – foram transformadas em algo que a construção pode confira cada lançamento, então o padrão é válido sem que ninguém se lembre de mantê-lo.

03Velocidade, porque milissegundos recrutam

Um futuro aluno em uma conexão irregular em altitude não espera por uma página lenta; eles vão embora. Por isso, medimo-nos em termos de dispositivos móveis, onde isso realmente importa, em comparação com as escolas de engenharia mais famosas do mundo – não para afirmar que ensinamos melhor, mas para estabelecer uma ordem de grandeza técnica.

Um único instantâneo rápido é sorte; um site rápido é engenharia. Os três números que o Core Web Vitals do Google realmente usa – a rapidez com que o conteúdo principal aparece, a rapidez com que a página responde a um toque e o quanto ela muda visualmente durante o carregamento – todos ficam dentro da faixa “boa”, e a construção mantém essa linha em cada lançamento. HTML pré-renderizado no S3 atrás de um CDN significa que não há renderização por solicitação; além disso, estão imagens AVIF, dicas de pré-carregamento direcionadas, um caminho crítico deliberadamente leve e uma otimização que vale a pena destacar porque parece trivial e não é.

O acompanhamento do V308: remova o trabalho evitável antes de alterar a arquitetura

A primeira versão após a reconstrução ainda expôs um aviso intermitente do Lighthouse em nosso próprio tempo de execução: um manipulador de rolagem poderia escrever a barra de progresso de leitura e, em seguida, solicitar ao navegador uma nova geometria de seção no mesmo turno. O V308 reorganizou esse caminho em torno de um requestAnimationFrame: a altura do cabeçalho fixo e as posições da seção são armazenadas em cache, a geometria é lida uma vez e as classes de progresso ou estado ativo são gravadas somente depois. A mesma versão moveu folhas de estilo vinculadas à frente de blocos JSON-LD substanciais nas páginas mantidas, páginas geradas e caminhos de construção colaterais, preservando a ordem das folhas de estilo. Foi deliberadamente a opção conservadora - nenhuma divisão crítica do CSS, nenhum truque de folha de estilo assíncrona e nenhuma nova cascata para provar.

A primeira execução de laboratório móvel pós-implantação refletiu a mudança sem fingir que uma execução são dados de campo: Primeira Contentful Paint realizada em 0,9s; Maior pintura com conteúdo movido de 2,9s a 2,7s; O tempo total de bloqueio caiu de 190ms a 30ms; Índice de velocidade movido de 1,1 sa 0,9 sa; e a mudança cumulativa de layout permaneceu 0. O caminho crítico máximo medido encurtado de 159ms a 98ms. O Lighthouse ainda relata corretamente uma solicitação de bloqueio de renderização - a folha de estilo de 19,5 KiB removida da página - porque escolhemos uma primeira renderização previsível em vez de remover um aviso a qualquer custo.

Uma folha de estilo por página – e por que isso é difícil

A maneira usual de construir um site é uma grande folha de estilo compartilhada, o que significa que cada página baixa, analisa e aplica milhares de regras que nunca usará. Fazemos o oposto: cada página envia uma folha de estilo ajustada às regras que a página realmente precisa. Menos para enviar, menos para o navegador trabalhar antes de poder pintar. O problema é que você não pode podar pelo que está no HTML da página.

A versão ingênua – “remover qualquer regra cujo seletor nunca apareça nesta página” – quebra silenciosamente o site, porque as classes que mais importam não estão no HTML salvo. JavaScript os adiciona em tempo de execução: um menu se torna open quando tocado, um cabeçalho gira sticky e scrolled conforme você se move, uma caixa de diálogo se torna active, o banner do cookie alterna consent, um item se torna selected ou loading. Retire essas regras “não utilizadas” e cada interação perderá seu estilo. Portanto, o otimizador mantém uma lista de permissões deliberadamente conservadora desses marcadores de estado dinâmico e nunca os remove. Mais três coisas tornam isso complicado: os seletores não leem da esquerda para a direita (:is(), :where(), :has() aninham outros seletores, portanto a correspondência é recursiva); at-rules são divididas de duas maneiras (@media/@container regras de encapsulamento e devem ser acessadas, enquanto @font-face/@keyframes são referenciadas pelo nome e mantidas opacas); e alguns CSS modernos que realmente usamos - consultas de contêiner, com unidades container-type e cqi - são novos o suficiente para que o próprio validador HTML/CSS relate-o como uma propriedade que “não existe”, então o pipeline carrega aqueles como falsos positivos conhecidos e revisados. Como a exclusão de CSS é perigosa, cada página removida é verificada novamente em relação ao original por um verificador separado antes de ser enviada.

04Alcance: três idiomas de primeira classe

O site cresceu bilíngue – inglês e francês. O espanhol (es-MX) é a adição mais recente, e vale a pena expor o raciocínio porque é uma decisão de negócios, não um exercício de tradução. O espanhol é a única língua que abre um continente inteiro: uma edição abre a América Latina (menos o Brasil) de uma só vez, onde as muitas línguas da Ásia abririam apenas uma pequena parte cada. Assim, o espanhol ganha o seu lugar não porque seja a “segunda língua empresarial” em abstrato, mas devido ao seu alcance incomum por edição.

Crucialmente, os locais não são um site primário com traduções complementares. Cada um é um cidadão de primeira classe produzido a partir de uma fonte, com reciprocidade adequada de hreflang e um x-default, e uma lista estrita de não traduzir para nomes de programas, marcas registradas, nomes de certificadores e campus, e nomes de modo de estudo - as coisas que devem permanecer idênticas em todos os idiomas para permanecerem encontráveis ​​e corretas.

A governança da tradução passou a fazer parte da memória da construção

A tradução francesa da história mais longa da equipe DSTI tornou visível uma distinção importante: um bom livro de regras de tradução precisa de ambos regras normativas e as evidências que os produziram. No V308, a transferência, portanto, trazia uma autoridade de tradução mantida, além de sidecars separados de origem francesa e mexicana-espanhola. A autoridade diz o que deve ser preservado – identificadores, URLs, nomes oficiais de programas e modos de estudo, agência em primeira pessoa, marcação e significado legível por máquina. Os sidecars registram como é realmente a linguagem pública natural em cada localidade: francês internacional neutro com vous; espanhol mexicano profissional com usted; diferentes convenções numéricas; terminologia recorrente; verificações de falso amigo e variante espanhola.

Esses arquivos não são notas soltas. Eles são membros obrigatórios do pacote do próximo modelo com curadoria, incluídos em sua ordem de leitura, somas de verificação, manifestos e relatório de estrutura. Isso significa que um futuro tradutor – humano ou modelo – recebe não apenas a regra, mas também sua proveniência e o vocabulário de controle de qualidade necessário para testar o resultado. A localização tornou-se outra superfície de engenharia reproduzível, em vez de uma memória mantida por quem traduziu a última página.

05Legível para humanos e para máquinas

Pela primeira vez na história da web, dois tipos de leitores são importantes: as pessoas e os sistemas de IA que respondem cada vez mais às suas perguntas. Uma escola que quer ser descoberta agora tem que ser legível para ambos, para que cada página carregue mais do que aquilo que você vê.

O HTML visível é para pessoas e rastreadores; Schema.org JSON-LD diz às máquinas exatamente qual programa, taxa ou data é; um fiel Markdown gêmeo de cada página e um llms.txt índice mão sistemas de IA uma cópia limpa e inequívoca. Quando um futuro aluno pergunta a um assistente “onde posso estudar engenharia de dados na França, em inglês?”, os sistemas que respondem estão lendo dados estruturados e texto limpo, e não olhando de soslaio para uma página bonita. A maioria das instituições não publicou versões legíveis por máquina de si mesmas. Nós temos.

O gate do Schema.org é nosso e não trapaceia

Dois detalhes merecem ser explícitos. Primeiro, esse validador do schema.org é internamente. O vocabulário é publicado e há um verificador interativo na web, mas nada que você possa executar de forma autônoma em uma construção da maneira que você faz com o validador HTML - então escrevemos um verificador especialmente desenvolvido que busca o vocabulário oficial do schema.org e reproduz, página por página, o que o Schema Markup Validator online mostraria, sem nenhum humano no loop. Em segundo lugar, e mais importante: nunca perseguimos a vaidade “zero erros, zero avisos” excluindo marcações. schema.org é deliberadamente abrir vocabulário, então uma propriedade que não declara formalmente é um aviso, não é um erro - e a maneira preguiçosa de silenciá-los é retirar os campos ofensivos, o que elimina o significado. Em vez disso, os erros bloqueiam a liberação completamente enquanto os avisos são revisados ​​e mantidos onde quer que a marcação seja genuinamente correta e útil. Validamos a estrutura sem amputá-la.

06Construído para não quebrar

Estático não significa frágil; feito corretamente, significa o oposto. Todo o site é HTML pré-renderizado em armazenamento de objetos, bloqueado para que só possa ser servido por meio do CDN, com firewall de aplicativo da web e proteção DDoS gerenciada na borda e DNS na frente. Não há servidor de aplicativos para cair às 2 da manhã, porque não há servidor de aplicativos.

A única migração realmente complicada foi o comportamento da URL. A configuração anterior dependia da lógica try_files de um servidor web para mapear URLs limpos e sem extensão para arquivos; a nova vantagem precisava replicar isso com uma pequena função CDN e lidar com a peculiaridade de que uma origem bloqueada retornasse um status diferente para um objeto ausente do que as pessoas esperavam. Acertar a lógica de reescrita - para que todos os links antigos sejam resolvidos e nada de 404s por acidente - foi a maior parte do trabalho genuinamente complicado das três semanas, junto com um mapa de redirecionamento dos mapas do site antigo para a nova estrutura.

07Compro­vadamente correto: nove gates e a recusa de publicar

Aqui está a parte que mais surpreende as pessoas. O sistema se recusa a publicar uma versão que falha em suas próprias verificações. Não “tenha cuidado ao implantar” – uma máquina que não permitirá que uma página quebrada ou não validada entre no ar. No fundo, a publicação é uma máquina de estado finito.

Nada parcial é enviado: uma porta com falha retorna o sistema para um candidato retido e uma versão pode ser revertida para uma versão anterior marcada. As portas de bloqueio, em sequência, são: construir (esbuild analisa e minimiza todos os .js e .css externos, enquanto o minificador HTML é executado com minificação inline-JavaScript forçada desligado então os scripts nunca são reescritos) → VNU HTML e CSS (a saída deve estar vazia) → Validade inline-JavaScript (cada manipulador executável <script>, on* e URL javascript: deve ser analisado) → preservação exata de bytes inline-JavaScript através da minificação → otimização conservadora por página CSS (somente reescritas permitidas, cada página comprovadamente equivalente) → Validade JSON-LD/schema.org → prova de reconstrução de bytes idênticos → autoridade de versão de origem cruzada (cinco documentos devem concordar com a versão ativa) → publicar, com um marcador do-not-deploy e marcação de versão para reversão.

# publish() — simplified; every step is a hard gate
def publish(candidate):
    stage(candidate)                  # into a verified temp tree
    for gate in [
            build,                # esbuild parses/minifies every .js and .css; inline JS untouched
            vnu_html, vnu_css,    # W3C/VNU must print nothing — HTML and CSS alike
            inline_js_valid,      # every inline script, on-handler, javascript: URL must parse
            inline_js_preserve,   # inline JS byte-identical, before vs after minification
            css_allowlist,        # per-page CSS pruned; only allow-listed rewrites, proven equivalent
            schemaorg,            # JSON-LD validates against the live vocabulary
            byte_identical,       # published == validated source, to the byte
            version_authority]:   # five documents agree on the active version
        if not gate(candidate).ok:
            mark("DO_NOT_DEPLOY"); keep(candidate)   # retained for retry; nothing ships
            return Blocked
    aws_publish(candidate); tag_version(candidate)   # transactional; rollback enabled
    return Published

Um portão que você executa em cada versão precisa ser rápido, por isso aceleramos drasticamente a validação de HTML e CSS - e, o que é crucial, provamos que o caminho rápido retorna o exatamente os mesmos veredictos como confiável, mesmo em equipamentos deliberadamente quebrados e caminhos Unicode estranhos. Velocidade sem essa prova seria trapaça; velocidade com isso é apenas uma boa engenharia.

08A máquina inteira, de ponta a ponta

Antes do “como”, aqui está tudo em uma página – todas as linguagens e ferramentas da cadeia que transforma uma linha da planilha em uma página na borda. É deliberadamente poliglota e vendido: o núcleo Python tem zero dependências de terceiros e ferramentas mais pesadas viajam dentro do projeto, fixadas, tanto para Windows quanto para macOS, para que qualquer máquina possa reproduzir uma compilação sem instalações globais.

Um condutor Python sem dependências de terceiros orienta o conjunto de ferramentas - uma ferramenta de inventário de conteúdo .NET 8, um verificador interno do schema.org Python, o Nu Html Checker baseado em Java (que valida HTML e CSS), um minificador de nó flanqueado no mesmo estágio de construção por um validador inline-JavaScript e um otimizador CSS conservador por página e um mecanismo de geolocalização XML/XSD. A saída é um site estático com arquivos identificados por hash – cada byte contabilizado por somas de verificação e um manifesto por arquivo – servido a partir do armazenamento de objetos por meio do CDN. As duas peças herdadas ainda em migração são uma instalação do WordPress que contribui com imagens em tempo de construção (não em tempo de execução) e um único formulário de aplicativo com estado.

Um mecanismo de conteúdo para todos, não apenas para engenheiros

O objetivo de toda essa disciplina é que não engenheiros pode contribuir com segurança. A superfície de edição é uma planilha; uma ferramenta de inventário de conteúdo lê; o orquestrador Python conduz cada etapa; e as portas acima significam que um colega editando uma taxa ou data não pode enviar acidentalmente algo inválido. O ciclo é fechado e autoverificável.

09Dinâmico onde é importante

Um site estático não precisa ser inerte. Onde ajuda genuinamente o visitante, a página se adapta – mas por meio de um mecanismo de regras pequeno e validado, em vez de scripts ad-hoc. O roteamento com reconhecimento de região (por exemplo, enviar um visitante do Sul da Ásia ao representante regional correto) é expresso como um Conjunto de regras XML validado em seu próprio XSD antes de ser executado. O mesmo reflexo aparece em todos os lugares da construção: os próprios parâmetros de implantação são validados em relação a um esquema antes que qualquer comando possa agir sobre eles, de modo que um alvo de implantação malformado é capturado em repouso, em vez de no meio da implantação. Verifique e prossiga – tanto na borda quanto no pipeline.

10Construído com IA – e deliberadamente portátil

Muito disso foi construído com assistência de IA, mas não da maneira descartável, colada em um chatbot. O princípio é simples: a memória do projeto reside no projeto, não em qualquer conversa ou modelo. Cada decisão importante é gravada em arquivos de continuidade versionados que viajam com o repositório - um para conteúdo (versão de referência, regras de tradução, invariantes UI/UX, URLs, mídia, decisões de não regressão), um para ferramentas (validações, procedimentos AWS, incidentes conhecidos). Um novo colaborador, humano ou modelo, começa a partir desses arquivos e do pacote de autoverificação, e não do histórico de bate-papo de alguém.

Isto não é teórico: a transferência foi exercida em diferentes modelos, com um segundo modelo reconstruindo independentemente a versão ativa e verificando cada soma de verificação antes de propor uma alteração. No V308, a transferência compacta era uma lista de permissões com curadoria rigorosa, em vez de um despejo de pasta conveniente: fonte e saída mantidas, ContentInventory ativo, autoridade de tradução e evidência de localidade, fonte de ferramenta, estrutura de pacote gerada, manifesto por arquivo e uma linha de base de soma de verificação verificada independentemente. Vincular o site de uma escola à memória de um fornecedor de IA seria apenas uma nova forma de dependência tecnológica e um novo ponto único de falha – por isso eliminamos essa dependência do projeto. E buscá-lo não deve custar a um colega uma semana de configuração: um único comando verifica as ferramentas que a construção precisa, instala as peças vendidas e se recusa a se considerar “pronto” até que os parâmetros do projeto sejam validados em relação ao seu esquema.

11Por que o mundo, e não o mercado interno

É justo perguntar por que uma escola francesa investe tanto no mundo e comparativamente pouco no mercado à sua porta. A resposta honesta está na natureza do que construímos. O DSTI é uma instituição projetada, desde o primeiro dia, para o mercado internacional: um corpo docente deliberadamente misto de mais de 50 acadêmicos e profissionais; uma Direção de Estudos que é, na verdade, uma função de controle de operações e qualidade de um tipo que a França mal reconhece como disciplina, e muito menos como valores; modos de estudo hiperflexíveis; bolsas de estudo por mérito; programas e avaliações exigentes; certificações profissionais; e instrução inteiramente em inglês. Nada disso foi moldado para uma captação local.

E por razões estruturais – e não uma questão de qualidade – os mercados franceses de graduação e pós-graduação são em grande parte insensíveis exatamente a essas coisas. Então fazemos a coisa mais francesa que se possa imaginar: exportamos. A França é uma das grandes economias exportadoras do mundo; nós também. Aproveitamos o melhor que a França e o DSTI têm a oferecer ao mundo e trazemos estudantes de qualidade para aproveitar ao máximo.

12Uma palavra honesta: investir durante um ano difícil

Candura, porque é devida. O mercado do ensino superior está difícil neste momento, para todos. Estamos a resistir melhor do que a maioria, mas seria desonesto enfeitar a situação: o número de estudantes manteve-se estável em vez de crescer desde 2024. Nesse clima, manter a linha é mais do que muitas instituições podem dizer – mas não é crescimento, e tudo nesta reconstrução é uma aposta no retorno do crescimento.

A atitude fácil em um ano difícil é cortar e esperar. Fizemos o oposto – investindo em programas, em pessoas, em professores e em exposição internacional: a rede de parceiros, o site, as garantias. Isso foi possível graças ao apoio paciente do nosso Presidente e dos acionistas (todos particulares, todos engenheiros e cientistas) — apoio que não consideramos garantido.

13Para que serve tudo isso

A rede em 78 países, as páginas rápidas, a marcação limpa, os lançamentos prováveis, os três idiomas – nada disso é importante por si só. A questão é o que é para: que um jovem, em algum lugar onde ainda não estivemos, com talento e nada mais, tenha uma chance real de uma educação séria, uma boa profissão e uma carreira duradoura. Somos pequenos e jovens, sem nome famoso nem orçamento vasto. O que temos é a decisão de fazer o melhor trabalho possível com a mais alta qualidade possível – e, cada vez mais, a engenharia para provar que o fizemos.

As figuras são produzidas a partir da construção real; alguns detalhes técnicos são simplificados para o público geral de engenharia. Os valores de desempenho são medições laboratoriais das execuções declaradas e não substituem os dados de campo.