01Visão geral do projeto
ostohlo.com é o site do estúdio, e está nesta lista pelo mesmo motivo que os outros: foi projetado, construído e é mantido da maneira que construímos para os clientes. As páginas vivem em um banco de dados e são renderizadas pelo nosso próprio motor; os templates ficam em arquivos; a interface é um sistema de design escrito do zero em vez de um tema comprado em algum lugar.
É também um produto funcional, não um cartão de visita. Existem ferramentas gratuitas que não precisam de cadastro, um estimador de projetos, um programa de parceiros em três níveis com seu próprio painel, e um blog que se preenche a partir da nossa plataforma em três idiomas.
02Por que um site de estúdio é difícil
Um site de estúdio não tem um proprietário que reclama. É escrito entre projetos de clientes, e cada atalho nele sobrevive por anos: uma linguagem que ficou para trás, uma página que ninguém se atreve a editar porque é HTML escrito à mão, uma galeria de trabalhos que parou de corresponder ao trabalho.
Tivemos exatamente essa história. O site começou como arquivos estáticos, e a primeira migração para um banco de dados mostrou o custo disso: comparar o texto visível dizia que tudo correspondia, enquanto centenas de páginas haviam silenciosamente perdido seu pacote de estilos. Desde então, a regra aqui é que uma mudança é comprovada por uma medição, não pela aparência correta da página.
03Objetivos do projeto
- conteúdo em um banco de dados e templates em arquivos, então uma mudança de texto não requer um desenvolvedor;
- três idiomas que nunca divergem: uma chave adicionada a um é adicionada a todos os três na mesma tarefa;
- um sistema de design próprio — movimento, cenas WebGL e tipografia que pertencem a esta marca;
- ferramentas que são genuinamente úteis e genuinamente gratuitas, sem nada armazenado no lado do servidor;
- um programa de parceiros com números reais em um painel, não uma promessa em uma página de destino;
- qualidade mensurável: layout até 320 px, dados estruturados limpos, sem links quebrados.
04O motor: páginas em um banco de dados
Cada página — um serviço, um estudo de caso, um artigo, um texto legal — é uma linha: caminho, idioma, título, descrição, corpo, dados estruturados, bandeiras de publicação. Um ponto de entrada renderiza isso com um template escolhido por tipo, e o cabeçalho e rodapé compartilhados vêm de arquivos que um gerador escreve, então o chrome de trezentas páginas muda em um só lugar.
A sutileza está no sistema de arquivos, não no código: o servidor web entrega qualquer arquivo que exista no disco e só então recorre à aplicação. Colocar um arquivo com o nome de uma página antiga no diretório público desligaria silenciosamente essa página do banco de dados — que é exatamente o tipo de falha que não deixa erro em lugar nenhum.
05Três idiomas, inglês na raiz
O inglês está na raiz, o russo sob /ru/, o ucraniano sob /uk/. Qual idioma está na raiz está escrito em exatamente um lugar no código, e o front end conhece o mesmo fato a partir de uma constante — uma verificação compara-os, porque duas respostas para essa pergunta é como sites meio traduzidos são criados.
As strings da interface são um dicionário com pacotes por idioma, e a regra é absoluta: uma chave adicionada a um idioma é adicionada a todos os três na mesma tarefa. Uma chave ausente não gera um erro, ela mostra o idioma errado para um leitor — o tipo de silêncio mais caro.
06Um sistema de design próprio
A interface atual é a quarta geração deste site, e foi escrita do zero: tokens, tipografia, componentes, movimento e um conjunto de cenas WebGL que ficam atrás dos blocos principais. As fontes vivem em um só lugar e são compiladas em pacotes com hash; editar o arquivo compilado manualmente simplesmente seria perdido na próxima construção, então não há nada a discutir.
O movimento está sempre ativo aqui — sem portão de movimento reduzido — o que é uma decisão deliberada do proprietário, e vem com um dever: tudo deve ainda ser legível e acessível a 320 px, e cada animação de aparição deve realmente terminar. Ambos são verificados por uma sonda que rola a página duas vezes e espera pela revelação, porque um bloco que nunca aparece é invisível para uma captura de tela feita muito cedo.
07Ferramentas gratuitas que não armazenam nada
Sete pequenas ferramentas: um gerador de senhas e um verificador de vazamentos, um gerador de QR, um construtor de UTM, um criador de slugs, um contador de caracteres e um verificador de telefone. Sem cadastro, sem conta, e — a parte que importa — sem armazenamento do lado do servidor. O que uma ferramenta lembra, ela lembra no próprio navegador do visitante, e apenas as configurações, nunca o conteúdo.
O verificador de vazamentos é o exemplo mais claro: ele nunca envia a senha. Apenas um curto prefixo de seu hash sai do navegador, e a resposta é montada localmente, que é a diferença entre uma ferramenta útil e uma maneira lindamente projetada de coletar senhas.
08Programa de parceiros com um painel real
Três níveis de referências: um parceiro ganha com os clientes que traz, com os parceiros que esses clientes trazem e com o nível abaixo disso. O painel mostra o que realmente aconteceu — cliques por campanha, registros, acumulações — e é acessível por um link com um token em vez de uma senha que ninguém se lembraria.
O token é removido do endereço antes que a primeira solicitação seja enviada, as solicitações não carregam credenciais e nem referenciador, e o modo de demonstração nunca toca o servidor. Um gabinete de parceiro é um lugar onde o dinheiro é mostrado; não deve ser o lugar onde um link vaza a conta.
09Um blog que se preenche sozinho
Os artigos chegam de Astrina — nossa própria plataforma — através de um endpoint assinado: um material, três versões de idioma, cada uma aterrissando em sua própria árvore de idioma com alternâncias recíprocas. Imagens são puxadas e armazenadas localmente em vez de serem linkadas diretamente, e o cartão de índice do blog para esse artigo é escrito na mesma passagem.
Automação como essa é onde danos silenciosos acontecem, então a entrada normaliza o que recebe: links internos são reescritos para o idioma do artigo, e links deixados como markdown bruto são transformados em reais. A regra é simples — um leitor da versão russa nunca deve ser enviado para a página em inglês por um link que apenas parece bom na fonte.
10SEO, GEO e os leitores de máquina
Cada página carrega um título, uma descrição, um endereço canônico, alternâncias recíprocas para os três idiomas mais um padrão, Open Graph e dados estruturados — e tudo isso é impresso de um só lugar, porque páginas que são responsáveis por suas próprias meta tags são páginas que as esquecem.
Para leitores de máquina, há um arquivo resumo que lista as seções, os produtos e os idiomas, montado a partir do banco de dados em vez de ser escrito à mão: o escrito à mão havia afirmado o número errado de produtos por meses. Sitemaps — páginas e imagens — são reconstruídos todas as noites, e qualquer coisa que mudou é anunciada aos motores de busca na mesma execução.
11Formulários, e-mail e o mundo exterior
O formulário breve é o único lugar no site onde o dinheiro começa, então é o mais protegido: um método de lista de permissão, um honeypot, limites de taxa por endereço e globais, verificações de tamanho em cada campo, e um anexo que é aceito pelo seu verdadeiro tipo de conteúdo em vez de pelo seu nome. A solicitação é escrita no banco de dados antes que qualquer coisa seja enviada, porque uma carta perdida não deve significar um cliente perdido.
Tudo que o site envia para fora — e-mails, notificações, chamadas externas — passa por um proxy e falha de forma segura se esse proxy estiver fora do ar. O próprio endereço do servidor não chega a terceiros, e as cartas são enviadas de uma caixa de correio que os registros do domínio realmente autorizam.
12Pilha de tecnologia
- PHP 8.4 e MariaDB: páginas no banco de dados, templates em arquivos, um ponto de entrada;
- um sistema de design próprio — tokens, componentes, movimento, cenas WebGL, compilados em pacotes com hash;
- três idiomas com pacotes de dicionário por idioma e uma verificação de paridade;
- ferramentas gratuitas escritas no navegador, sem nada armazenado no lado do servidor;
- um motor de parceiros com três níveis de referência e um painel baseado em tokens;
- uma entrada assinada para artigos da Astrina, nossa própria análise, nossa própria rede de anúncios apenas no blog.
13O resultado
Um site onde uma mudança de texto é uma edição em um painel, não uma implantação; onde três idiomas permanecem em nível porque a regra é aplicada na mesma tarefa; onde a seção de trabalho é gerada a partir de um registro, de modo que adicionar um caso não pode deixar metade do site reivindicando uma contagem antiga.
E um site que é medido como um projeto de cliente: cada endereço publicado respondido, links internos sem redirecionamentos ou erros, um título e uma descrição por página, imagens declaradas em seu próprio sitemap, e layout verificado até 320 px em todos os três idiomas.
14Principais aprendizados
Fazer seu próprio site de acordo com o padrão que você vende é desconfortável, e esse é o ponto: cada atalho que você teria tomado aqui é um que você poderia tomar para um cliente. O nosso nos ensinou três coisas.Coloque o conteúdo onde as pessoas que o escrevem possam alcançá-lo. Faça das línguas uma regra, não uma intenção — qualquer outra coisa se desvia em um mês. Prove as mudanças com medições: este site uma vez passou por uma comparação visual enquanto centenas de suas páginas haviam perdido seus estilos.
Se você quer um site que seja um produto em vez de um folheto — com ferramentas, um painel, várias línguas e uma interface que pertence a você — é exatamente isso que fazemos.
