Ostohlo — notre propre site, construit selon les mêmes normes

01Aperçu du projet

ostohlo.com est le site du studio, et il figure sur cette liste pour la même raison que les autres : il a été conçu, construit et est maintenu de la manière dont nous construisons pour nos clients. Les pages vivent dans une base de données et sont rendues par notre propre moteur ; les modèles restent dans des fichiers ; l'interface est un système de design écrit de zéro plutôt qu'un thème acheté quelque part.

C'est aussi un produit fonctionnel, pas une carte de visite. Il existe des outils gratuits qui ne nécessitent pas d'inscription, un estimateur de projet, un programme de partenaires à trois niveaux avec son propre tableau de bord, et un blog qui se remplit à partir de notre plateforme en trois langues.

02Pourquoi un site de studio est difficile

Un site de studio n'a pas de propriétaire qui se plaint. Il est écrit entre les projets clients, et chaque raccourci qu'il contient survit pendant des années : une langue qui a pris du retard, une page que personne n'ose éditer parce qu'elle est en HTML écrit à la main, une galerie de travaux qui ne correspond plus au travail.

Nous avons exactement cette histoire. Le site a commencé comme des fichiers statiques, et la première migration vers une base de données a montré le coût de cela : comparer le texte visible disait que tout correspondait, tandis que des centaines de pages avaient discrètement perdu leur ensemble de feuilles de style. Depuis, la règle ici est qu'un changement est prouvé par une mesure, pas par l'apparence correcte de la page.

03Objectifs du projet

• contenu dans une base de données et modèles dans des fichiers, donc un changement de texte ne nécessite pas de développeur;
• trois langues qui ne divergent jamais : une clé ajoutée à l'une est ajoutée aux trois dans la même tâche;
• un système de design qui nous est propre — mouvement, scènes WebGL et typographie qui appartiennent à cette marque;
• des outils qui sont réellement utiles et réellement gratuits, sans rien stocké côté serveur;
• un programme de partenaires avec de vrais chiffres dans un tableau de bord, pas une promesse sur une page d'atterrissage;
• qualité mesurable : mise en page jusqu'à 320 px, données structurées propres, pas de liens brisés.

04Le moteur : des pages dans une base de données

Chaque page — un service, une étude de cas, un article, un texte légal — est une ligne : chemin, langue, titre, description, corps, données structurées, drapeaux de publication. Un point d'entrée unique le rend avec un modèle choisi par type, et l'en-tête et le pied de page partagés proviennent de fichiers qu'un générateur écrit, donc le chrome de trois cents pages change à un seul endroit.

La subtilité réside dans le système de fichiers, pas dans le code : le serveur web distribue tout fichier qui existe sur le disque et ne tombe sur l'application qu'ensuite. Mettre un fichier avec le nom d'une ancienne page dans le répertoire public désactiverait discrètement cette page de la base de données — ce qui est exactement le genre de défaillance qui ne laisse aucune erreur nulle part.

05Trois langues, l'anglais à la racine

L'anglais se trouve à la racine, le russe sous /ru/, l'ukrainien sous /uk/. Quelle langue se trouve à la racine est noté à un seul endroit dans le code, et le front-end connaît le même fait à partir d'une constante — un contrôle les compare, car deux réponses à cette question est comment naissent les sites à moitié traduits.

Les chaînes d'interface sont un dictionnaire avec des bundles par langue, et la règle est absolue : une clé ajoutée à une langue est ajoutée aux trois dans la même tâche. Une clé manquante ne déclenche pas d'erreur, elle montre la mauvaise langue à un lecteur — le type de silence le plus coûteux.

06Un système de design qui nous est propre

L'interface actuelle est la quatrième génération de ce site, et elle est écrite de zéro : tokens, typographie, composants, mouvement et un ensemble de scènes WebGL qui se trouvent derrière les blocs héros. Les sources vivent à un seul endroit et sont compilées en bundles hachés ; éditer le fichier compilé à la main serait simplement perdu lors de la prochaine construction, donc il n'y a rien à discuter.

Le mouvement est toujours actif ici — pas de porte de réduction de mouvement — ce qui est une décision délibérée du propriétaire, et cela vient avec un devoir : tout doit encore être lisible et accessible à 320 px, et chaque animation d'apparence doit réellement se terminer. Les deux sont vérifiés par une sonde qui fait défiler la page deux fois et attend la révélation, car un bloc qui n'apparaît jamais est invisible à une capture d'écran prise trop tôt.

07Outils gratuits qui ne stockent rien

Sept petits outils : un générateur de mots de passe et un vérificateur de fuites, un générateur de QR, un constructeur UTM, un créateur de slugs, un compteur de caractères et un vérificateur de téléphone. Pas d'inscription, pas de compte, et — la partie qui compte — pas de stockage côté serveur. Ce qu'un outil se souvient, il le souvient dans le propre navigateur du visiteur, et seulement les paramètres, jamais le contenu.

Le vérificateur de fuites est l'exemple le plus clair : il n'envoie jamais le mot de passe. Seul un court préfixe de son hachage quitte le navigateur, et la réponse est assemblée localement, ce qui est la différence entre un outil utile et une manière joliment conçue de collecter des mots de passe.

08Programme partenaire avec un véritable tableau de bord

Trois niveaux de parrainages : un partenaire gagne sur les clients qu'il apporte, sur les partenaires que ces clients apportent, et sur le niveau en dessous. Le tableau de bord montre ce qui s'est réellement passé — clics par campagne, inscriptions, accumulations — et il est accessible par un lien avec un token plutôt que par un mot de passe que personne ne se souviendrait.

Le token est retiré de l'adresse avant que la première requête ne soit envoyée, les requêtes ne portent aucune information d'identification et aucun référent, et le mode démo ne touche jamais le serveur. Un cabinet de partenaire est un endroit où l'argent est affiché ; ce ne devrait pas être l'endroit où un lien fuit l'accès au compte.

09Un blog qui se remplit tout seul

Les articles arrivent de Astrina — notre propre plateforme — via un point de terminaison signé : un matériel, trois versions linguistiques, chacune atterrissant dans son propre arbre linguistique avec des alternates réciproques. Les images sont récupérées et stockées localement plutôt que liées à chaud, et la carte d'index du blog pour cet article est écrite dans le même passage.

L'automatisation comme celle-ci est là où des dommages silencieux se produisent, donc l'entrée normalise ce qu'elle reçoit : les liens internes sont réécrits dans la langue de l'article, et les liens laissés en markdown brut sont transformés en liens réels. La règle est simple : un lecteur de la version russe ne doit jamais être envoyé à la page anglaise par un lien qui semble simplement correct dans la source.

10SEO, GEO et les lecteurs de machines

Chaque page porte un titre, une description, une adresse canonique, des alternates réciproques pour les trois langues plus un défaut, Open Graph et des données structurées — et tout cela est imprimé depuis un seul endroit, car les pages qui sont responsables de leurs propres balises méta sont des pages qui les oublient.

Pour les lecteurs de machines, il existe un fichier résumé qui liste les sections, les produits et les langues, assemblé à partir de la base de données plutôt que rédigé à la main : le document manuscrit avait revendiqué le mauvais nombre de produits pendant des mois. Les sitemaps — pages et images — sont reconstruits chaque nuit, et tout ce qui a changé est annoncé aux moteurs de recherche lors de la même exécution.

11Formulaires, mail et le monde extérieur

Le formulaire bref est le seul endroit sur le site où l'argent commence, il est donc le plus protégé : une méthode de liste blanche, un pot de miel, des limites de taux par adresse et globales, des vérifications de taille sur chaque champ, et une pièce jointe qui est acceptée par son véritable type de contenu plutôt que par son nom. La demande est écrite dans la base de données avant que quoi que ce soit ne soit envoyé, car une lettre perdue ne doit pas signifier un client perdu.

Tout ce que le site envoie vers l'extérieur — courriels, notifications, appels externes — passe par un proxy et échoue en mode fermé si ce proxy est hors service. L'adresse du serveur ne parvient pas aux tiers, et les lettres sont envoyées depuis une boîte aux lettres que les enregistrements du domaine autorisent réellement.

12Pile technologique

• PHP 8.4 et MariaDB : pages dans la base de données, modèles dans des fichiers, un point d'entrée ;
• un système de design à nous — tokens, composants, mouvement, scènes WebGL, compilés en paquets hachés ;
• trois langues avec des paquets de dictionnaires par langue et un contrôle de parité ;
• outils gratuits écrits dans le navigateur, sans rien stocké côté serveur ;
• un moteur partenaire avec trois niveaux de parrainage et un tableau de bord basé sur des tokens ;
• une admission signée pour des articles d'Astrina, nos propres analyses, notre propre réseau publicitaire uniquement dans le blog.

13Le résultat

Un site où un changement de texte est une modification dans un panneau, pas un déploiement ; où trois langues restent au même niveau car la règle est appliquée dans la même tâche ; où la section de travail est générée à partir d'un registre, donc ajouter un cas ne peut pas laisser la moitié du site prétendre à un ancien compte.

Et un site qui est mesuré comme un projet client : chaque adresse publiée répondue, liens internes sans redirections ni erreurs, un titre et une description par page, images déclarées dans leur propre sitemap, et mise en page vérifiée jusqu'à 320 px dans les trois langues.

14Leçons à retenir

Faire votre propre site selon la norme que vous vendez est inconfortable, et c'est le but : chaque raccourci que vous auriez pris ici est un que vous pourriez prendre pour un client. Le nôtre nous a appris trois choses.Mettez le contenu là où les personnes qui l'écrivent peuvent y accéder. Faites des langues une règle, pas une intention — tout le reste dérive en un mois. Prouvez les changements par des mesures: ce site a une fois passé une comparaison visuelle alors que des centaines de ses pages avaient perdu leurs styles.

Si vous voulez un site qui est un produit plutôt qu'une brochure — avec des outils, un tableau de bord, plusieurs langues et une interface qui vous appartient — c'est exactement ce que nous faisons.