Case study
Dobleg Premoldeados — Sitio corporativo Dobleg Premoldeados — Corporate website
Reescribir el sitio de una fábrica de hormigón sin una línea de JavaScript de framework. El bug más instructivo del proyecto fue que la página quedaba invisible si el navegador no ejecutaba scripts. Rewriting a concrete plant’s website without a single line of framework JavaScript. The most instructive bug of the project was that the page went invisible if the browser did not run scripts.
Contexto Context
Dobleg Premoldeados fabrica galpones, tanques y estructuras de hormigón armado en Paraná, con más de 23 años en el rubro. Tenían un sitio viejo que ya no los representaba. El encargo fue el rebranding completo: identidad, contenido y sitio nuevo. Dobleg Premoldeados manufactures sheds, tanks and reinforced concrete structures in Paraná, with more than 23 years in the trade. They had an old site that no longer represented them. The brief was a full rebrand: identity, content and a new site.
Problema Problem
El público define casi todo el diseño acá: productores agropecuarios, industriales y particulares de Entre Ríos, que abren el link desde WhatsApp, en el celular, a plena luz del día y muchas veces con señal mala. Eso descarta el tema oscuro, descarta las animaciones pesadas y descarta cualquier framework que mande cientos de kilobytes de JavaScript para mostrar texto y fotos. The audience defines almost everything about the design here: farmers, industrial buyers and individuals in Entre Ríos, who open the link from WhatsApp, on a phone, in broad daylight and often on poor signal. That rules out a dark theme, rules out heavy animation, and rules out any framework shipping hundreds of kilobytes of JavaScript to display text and photos.
El bug que más me enseñó The bug that taught me the most
Las secciones aparecían con una animación al entrar en pantalla. La técnica habitual: los elementos arrancan invisibles y el JavaScript los revela cuando entran al viewport. Funciona perfecto — hasta que el JavaScript no corre. Si fallaba el script, si el navegador lo bloqueaba, o si un crawler no lo ejecutaba, la página quedaba en blanco. Todo el contenido estaba en el HTML, presente y correcto, y no se veía nada. El arreglo cambió el orden de las prioridades: el estado por defecto es visible, y la animación es una mejora que se aplica encima. Lo mismo apliqué al formulario de contacto: la base es un envío nativo que funciona con JavaScript apagado, y el script solo lo mejora, nunca lo reemplaza. Es la diferencia entre una mejora progresiva y una dependencia disfrazada. Sections appeared with an animation as they scrolled into view. The usual technique: elements start invisible and JavaScript reveals them when they enter the viewport. It works perfectly — until the JavaScript does not run. If the script failed, if the browser blocked it, or if a crawler did not execute it, the page came up blank. All the content was in the HTML, present and correct, and nothing was visible. The fix inverted the priority: the default state is visible, and the animation is an enhancement layered on top. I applied the same to the contact form: the baseline is a native submit that works with JavaScript off, and the script only improves it, never replaces it. That is the difference between progressive enhancement and a dependency in disguise.
Solución y decisiones técnicas Solution and technical decisions
- Astro estático, sin framework de cliente. El sitio se sirve como HTML y CSS: no hay hidratación que esperar.
- Una sola familia tipográfica variable, de una fundición argentina, autoalojada. Los ejes de peso y ancho dan el contraste entre títulos y texto sin cargar una segunda fuente, y va con ajuste de métricas para que el cambio de fuente no mueva el layout.
- Paleta definida en OKLCH con los contrastes medidos, no estimados a ojo. Es un sitio que se lee al sol.
- Antes de escribir una sola sección de la interfaz hubo una fase bloqueante de trazabilidad de contenido: cada afirmación del sitio tiene que apuntar a una fuente del cliente. Nada inventado, nada de relleno de agencia.
- Antes de tocar una sola foto hubo otra fase bloqueante de curaduría: ficha por imagen con uso propuesto, recorte, foco y texto alternativo, y recién con la aprobación se ejecutaba el procesamiento.
- Cabeceras de seguridad, datos estructurados y sitemap automático desde el primer deploy.
La migración de dominio The domain migration
El dominio ya existía y apuntaba a otro proveedor, con el mail del cliente colgando de los mismos registros. Mover eso mal deja a una empresa sin correo. Lo hice por etapas con verificación en cada una: primero un inventario completo de los registros externos, después el cruce contra el panel del proveedor viejo para no perder ninguno, después la zona nueva verificada, y recién ahí el cambio. Al cerrar, el sitio quedó dado de alta en Search Console con el sitemap enviado. The domain already existed and pointed to another provider, with the client’s email hanging off the same records. Getting that wrong leaves a company without mail. I did it in stages with a check at each one: first a full inventory of the external records, then a cross-check against the old provider’s panel so none were lost, then the new zone verified, and only then the switch. On closing, the site was registered in Search Console with its sitemap submitted.
Mi rol My role
Freelance, de punta a punta: dirección de arte, contenido, desarrollo, optimización de imágenes, SEO, deploy y la migración de DNS. Freelance, end to end: art direction, content, development, image optimization, SEO, deployment and the DNS migration.
Resultado Result
En producción sobre su dominio propio, desplegado en Cloudflare Pages, con nueve líneas de producto y contacto directo por WhatsApp. Cero JavaScript de framework en el cliente. Live in production on its own domain, deployed on Cloudflare Pages, with nine product lines and direct WhatsApp contact. Zero framework JavaScript on the client.