01Resumen del proyecto
ostohlo.com es el sitio propio del estudio, y está en esta lista por la misma razón que los otros: fue diseñado, construido y se mantiene de la manera en que construimos para los clientes. Las páginas viven en una base de datos y son renderizadas por nuestro propio motor; las plantillas permanecen en archivos; la interfaz es un sistema de diseño escrito desde cero en lugar de un tema comprado en algún lugar.
También es un producto funcional, no una tarjeta de presentación. Hay herramientas gratuitas que no requieren registro, un estimador de proyectos, un programa de socios de tres niveles con su propio panel de control, y un blog que se alimenta de nuestra plataforma en tres idiomas.
02Por qué un sitio de estudio es difícil
Un sitio de estudio no tiene un propietario que se queje. Se escribe entre proyectos de clientes, y cada atajo en él sobrevive durante años: un idioma que se quedó atrás, una página que nadie se atreve a editar porque está escrita en HTML a mano, una galería de trabajos que dejó de coincidir con el trabajo.
Tuvimos exactamente esa historia. El sitio comenzó como archivos estáticos, y la primera migración a una base de datos mostró el costo de ello: comparar el texto visible decía que todo coincidía, mientras que cientos de páginas habían perdido silenciosamente su paquete de estilos. Desde entonces, la regla aquí es que un cambio se prueba mediante una medición, no por cómo se ve la página.
03Objetivos del proyecto
- contenido en una base de datos y plantillas en archivos, por lo que un cambio de texto no requiere un desarrollador;
- tres idiomas que nunca divergen: una clave añadida a uno se añade a los tres en la misma tarea;
- un sistema de diseño propio: movimiento, escenas de WebGL y tipografía que pertenecen a esta marca;
- herramientas que son genuinamente útiles y genuinamente gratuitas, sin nada almacenado en el servidor;
- un programa de socios con números reales en un panel de control, no una promesa en una página de aterrizaje;
- calidad medible: diseño hasta 320 px, datos estructurados limpios, sin enlaces rotos.
04El motor: páginas en una base de datos
Cada página — un servicio, un estudio de caso, un artículo, un texto legal — es una fila: ruta, idioma, título, descripción, cuerpo, datos estructurados, banderas de publicación. Un punto de entrada lo renderiza con una plantilla elegida por tipo, y el encabezado y pie de página compartidos provienen de archivos que un generador escribe, por lo que el diseño de trescientas páginas cambia en un solo lugar.
La sutileza está en el sistema de archivos, no en el código: el servidor web entrega cualquier archivo que exista en el disco y solo entonces pasa a la aplicación. Colocar un archivo con el nombre de una página antigua en el directorio público desconectaría silenciosamente esa página de la base de datos, que es exactamente el tipo de fallo que no deja error en ninguna parte.
05Tres idiomas, inglés en la raíz
El inglés vive en la raíz, el ruso bajo /ru/, el ucraniano bajo /uk/. Qué idioma se encuentra en la raíz está escrito en exactamente un lugar en el código, y el front end conoce el mismo hecho a partir de una constante: una verificación los compara, porque dos respuestas a esa pregunta es cómo nacen los sitios medio traducidos.
Las cadenas de interfaz son un diccionario con paquetes por idioma, y la regla es absoluta: una clave añadida a un idioma se añade a los tres en la misma tarea. Una clave faltante no genera un error, muestra el idioma incorrecto a un lector — el tipo de silencio más costoso.
06Un sistema de diseño propio
La interfaz actual es la cuarta generación de este sitio, y está escrita desde cero: tokens, tipografía, componentes, movimiento y un conjunto de escenas de WebGL que se encuentran detrás de los bloques principales. Las fuentes viven en un solo lugar y se compilan en paquetes con hash; editar el archivo compilado a mano simplemente se perdería en la próxima construcción, así que no hay nada de qué discutir.
El movimiento siempre está activo aquí — no hay puerta de reducción de movimiento — lo cual es una decisión deliberada del propietario, y viene con un deber: todo debe seguir siendo legible y accesible a 320 px, y cada animación de aparición debe realmente terminar. Ambos son verificados por una sonda que desplaza la página dos veces y espera la revelación, porque un bloque que nunca aparece es invisible para una captura de pantalla tomada demasiado pronto.
07Herramientas gratuitas que no almacenan nada
Siete pequeñas herramientas: un generador de contraseñas y un chequeo de filtraciones, un generador de QR, un constructor de UTM, un creador de slugs, un contador de caracteres y un verificador de teléfonos. Sin registro, sin cuenta, y — la parte que importa — sin almacenamiento del lado del servidor. Lo que una herramienta recuerda, lo recuerda en el propio navegador del visitante, y solo la configuración, nunca el contenido.
El chequeo de filtraciones es el ejemplo más claro: nunca envía la contraseña. Solo un corto prefijo de su hash sale del navegador, y la respuesta se ensambla localmente, que es la diferencia entre una herramienta útil y una forma bellamente diseñada de recopilar contraseñas.
08Programa de socios con un panel real
Tres niveles de referencias: un socio gana por los clientes que trae, por los socios que esos clientes traen y por el nivel inferior a eso. El panel muestra lo que realmente sucedió: clics por campaña, registros, acumulaciones, y se puede acceder a él a través de un enlace con un token en lugar de una contraseña que nadie recordaría.
El token se elimina de la dirección antes de que se envíe la primera solicitud, las solicitudes no llevan credenciales ni referencia, y el modo de demostración nunca toca el servidor. Un gabinete de socios es un lugar donde se muestra el dinero; no debería ser el lugar donde un enlace filtre la cuenta.
09Un blog que se llena solo
Los artículos llegan de Astrina — nuestra propia plataforma — a través de un punto final firmado: un material, tres versiones en diferentes idiomas, cada una aterrizando en su propio árbol de idioma con alternativos recíprocos. Las imágenes se extraen y se almacenan localmente en lugar de estar vinculadas directamente, y la tarjeta de índice del blog para ese artículo se escribe en el mismo pase.
La automatización como esta es donde ocurre el daño silencioso, así que la entrada normaliza lo que recibe: los enlaces internos se reescriben al idioma del artículo, y los enlaces que quedan como markdown en bruto se convierten en reales. La regla es simple: un lector de la versión rusa nunca debe ser enviado a la página en inglés por un enlace que simplemente se vea bien en la fuente.
10SEO, GEO y los lectores de máquinas
Cada página lleva un título, una descripción, una dirección canónica, alternativos recíprocos para los tres idiomas más uno por defecto, Open Graph y datos estructurados, y todo se imprime desde un solo lugar, porque las páginas que son responsables de sus propias etiquetas meta son páginas que las olvidan.
Para los lectores de máquinas, hay un archivo resumen que lista las secciones, los productos y los idiomas, ensamblado a partir de la base de datos en lugar de ser escrito a mano: el escrito a mano había reclamado el número incorrecto de productos durante meses. Los sitemaps —páginas e imágenes— se reconstruyen cada noche, y cualquier cosa que cambie se anuncia a los motores de búsqueda en la misma ejecución.
11Formularios, correo y el mundo exterior
El formulario breve es el único lugar en el sitio donde comienza el dinero, por lo que es el más protegido: un método de lista permitida, un honeypot, límites de tasa por dirección y globales, verificaciones de tamaño en cada campo, y un archivo adjunto que se acepta por su verdadero tipo de contenido en lugar de por su nombre. La solicitud se escribe en la base de datos antes de que se envíe cualquier cosa, porque una carta perdida no debe significar un cliente perdido.
Todo lo que el sitio envía hacia afuera — correo, notificaciones, llamadas externas — pasa a través de un proxy y falla en cerrado si ese proxy está caído. La dirección del servidor no llega a terceros, y las cartas se envían desde un buzón que los registros del dominio realmente autorizan.
12Pila tecnológica
- PHP 8.4 y MariaDB: páginas en la base de datos, plantillas en archivos, un punto de entrada;
- un sistema de diseño propio — tokens, componentes, movimiento, escenas de WebGL, compilados en paquetes con hash;
- tres idiomas con paquetes de diccionario por idioma y una verificación de paridad;
- herramientas gratuitas escritas en el navegador, sin nada almacenado del lado del servidor;
- un motor de socios con tres niveles de referencia y un panel basado en tokens;
- una entrada firmada para artículos de Astrina, nuestra propia analítica, nuestra propia red de anuncios solo en el blog.
13El resultado
Un sitio donde un cambio de texto es una edición en un panel, no un despliegue; donde tres idiomas se mantienen al mismo nivel porque la regla se aplica en la misma tarea; donde la sección de trabajo se genera a partir de un registro, por lo que agregar un caso no puede dejar a la mitad del sitio reclamando un conteo antiguo.
Y un sitio que se mide como un proyecto de cliente: cada dirección publicada respondida, enlaces internos sin redirecciones ni errores, un título y una descripción por página, imágenes declaradas en su propio mapa del sitio, y diseño verificado hasta 320 px en los tres idiomas.
14Conclusiones
Hacer tu propio sitio al estándar que vendes es incómodo, y ese es el punto: cada atajo que habrías tomado aquí es uno que podrías tomar para un cliente. El nuestro nos enseñó tres cosas.Coloca el contenido donde las personas que lo escriben puedan acceder a él. Haz de los idiomas una regla, no una intención — cualquier otra cosa se desvía en un mes. Demuestra los cambios con mediciones: este sitio una vez pasó una comparación visual mientras cientos de sus páginas habían perdido sus estilos.
Si quieres un sitio que sea un producto en lugar de un folleto — con herramientas, un panel de control, varios idiomas y una interfaz que te pertenece — eso es exactamente lo que hacemos.
