Casi ningún proyecto web empieza donde parece. Este empezó por la web de Agrícola Ortiz Lavado, una empresa de Almendralejo que lleva desde 1968 suministrando producto, asesorando y ejecutando plantaciones. Su sitio corría sobre Joomla y arrastraba los problemas habituales de un gestor con años encima: dependencia de extensiones, actualizaciones de núcleo que hay que vigilar y una estructura que ya no describía lo que la empresa hacía.
Al abrir el proyecto apareció lo que casi siempre aparece cuando se mira de cerca una empresa consolidada: no era una empresa, era un grupo. Cinco marcas con actividades distintas y complementarias, y una sola de ellas con presencia digital.
Este artículo cuenta las decisiones que tomamos, no el resultado visual. El resultado se puede ver entrando en las webs.
El punto de partida: una web y cuatro marcas sin sitio propio
El grupo cubre la cadena completa de una plantación leñosa. Cada empresa resuelve un tramo:
del grupo
El mismo bloque orbital que ocupa el centro de la portada de Agrícola Ortiz Lavado, reconstruido aquí con la paleta del blog. Es CSS puro: sin JavaScript, sin librerías y sin una sola petición a terceros.
Un grupo así tiene un problema de comunicación concreto: quien busca un vivero de pistacho no está buscando una empresa de drones, y quien busca tratamientos aéreos no llega tecleando «productos fitosanitarios». Meterlo todo en una web habría obligado a cada visitante a atravesar cuatro actividades que no le interesan para llegar a la suya.
Una sola web para cinco actividades distintas reparte mal la atención y compite consigo misma en Google. Cinco dominios permiten que cada marca responda a su intención de búsqueda y se enlacen entre sí cuando el proyecto del cliente sí necesita a las demás.
Por qué HTML estático y no otro gestor de contenidos
La decisión no fue ideológica. Joomla no es un mal gestor: es un gestor que hay que mantener. Y el mantenimiento de un CMS se multiplica por cinco cuando hay cinco sitios.
Con HTML estático desaparecen de golpe tres categorías enteras de trabajo recurrente:
- Actualizaciones de núcleo.
- Actualizaciones de extensiones.
- Incompatibilidades entre ambas.
- Vulnerabilidades de plugins de terceros.
- Panel de administración expuesto.
- Base de datos que respaldar y restaurar.
- Consultas SQL en cada carga de página.
- Migraciones de versión de PHP.
A cambio, todo lo que el CMS resolvía solo hay que construirlo: índices, buscador interno, sitemap, redirecciones y formulario. Ese es el trato, y conviene enunciarlo antes de firmarlo. Lo hemos explicado en detalle en WordPress, PrestaShop o Joomla: cuál elegir.
Para este grupo la ecuación salía a favor por una razón simple: el contenido cambia poco y el catálogo cambia por campaña, no por semana. Nadie iba a entrar a diario en un panel a publicar. Lo que sí importaba era que las cinco webs cargaran rápido en el móvil, en medio del campo, con cobertura irregular.
Cinco marcas, un sistema de componentes
La tentación evidente al construir cinco sitios seguidos es clonar el primero cuatro veces. Produce sitios gemelos y destruye justo lo que se está intentando construir: que cada empresa tenga cara propia.
Lo que se replica es la arquitectura —nombres de variables, escala tipográfica, estructura de los componentes, retícula—, no la piel. Cada web parte de sus propios tokens de color, derivados de su identidad real:
Lo que hay detrás de cada bloque
La parte visible de un proyecto así son seis o siete bloques de portada. La parte que cuesta es que cada uno funcione en las cuatro situaciones en las que un componente se rompe: sin JavaScript, con el movimiento reducido, con lector de pantalla y en una pantalla de 375 píxeles.
Cabecera con fundido y zoom
Cinco fotografías con efecto Ken Burns. El zoom dura más que el pase, así que la imagen nunca llega al final de su recorrido y el movimiento no rebota.
Numeración 01–05 con barra
Sustituye a los puntitos genéricos y hace de temporizador visible. El estado activo se pinta desde aria-selected: un solo atributo para el estilo y para el lector de pantalla.
Bloque orbital
El anillo giratorio es un degradado cónico recortado con una máscara radial. Sin SVG, sin imágenes y sin JavaScript.
Mapa de dos sedes
No es un selector de idioma, es un selector de zona: conmuta silueta, punto y ficha de datos a la vez. Los puntos son botones reales, con foco y aria-pressed.
Acordeón donde la ilustración es el índice
Cada valor ilumina su parte del olivo —raíces, tronco, copa— recortando con clip-path una segunda copia de la misma imagen a plena luz.
Preguntas frecuentes nativas
<details> y <summary> del navegador. Funcionan con JavaScript desactivado, son accesibles de origen y el buscador del navegador las despliega.
Ninguno de estos bloques carga una librería. El conjunto de las cinco webs no hace una sola petición a un dominio de terceros: ni jQuery, ni un paquete de iconos, ni una fuente remota, ni un script de animaciones. Es la diferencia entre una web que depende de que ocho servidores ajenos respondan y una que solo depende del suyo.
Cero dependencias externas no es purismo técnico: es la única forma de que el rendimiento sea predecible. Una web con seis orígenes de terceros no tiene un tiempo de carga, tiene el peor de los seis.
Dos idiomas sin duplicar la empresa
Aquí había una decisión que no era técnica. El grupo trabaja a los dos lados de la frontera, y lo portugués no es una traducción de lo español: es FitoPortugal Lda., con sede en Elvas, teléfono propio y su propia razón social.
Traducir la web española al portugués habría sido más rápido y habría sido mentira. Lo que se construyó fue una versión portuguesa con identidad propia, enlazada desde el selector de idioma de la web española, de modo que el visitante que cambia a PT no aterriza en una copia traducida sino en la empresa que realmente le va a atender.
El bloque del mapa refleja exactamente eso: dos sedes, dos fichas de datos y una ruta animada entre ellas. Al pulsar España o Portugal cambian a la vez la silueta del país, el punto de la sede y el panel de contacto.
Lo que el CMS hacía solo y ahora hay que verificar
Esta es la parte del trato que nadie enseña en las propuestas comerciales. Al quitar Joomla, cada uno de estos elementos pasa a ser responsabilidad explícita del proyecto:
- Inventario de URL antiguas. Qué direcciones existían, cuáles estaban indexadas y cuáles recibían visitas.
- Destino para cada una. Se conserva, se redirige a la página equivalente, se integra en otra y se redirige, o se retira. Nunca todo a la portada.
- Reglas de reescritura. URL limpias, la trampa de la barra final y el orden de las reglas, que decide cuál gana.
- Sitemap y robots. Generados desde el sistema de archivos real, no mantenidos a mano.
- Datos estructurados.
FAQPagegenerado desde la misma fuente que el HTML visible: si divergen, Google marca el marcado como no representativo. - Buscador interno. Índice propio, porque ya no hay base de datos a la que preguntar.
- Formulario. Backend propio, con validación y antispam.
- Verificación completa antes de publicar. Enlaces, canonical, esquemas, render a 1440, 768 y 375 píxeles.
El paso 8 es el que separa un sitio estático bien hecho de uno que parece bien hecho. Y tiene una trampa que conviene conocer: auditar desde file:// no sirve. Los enlaces relativos resuelven distinto abriendo el archivo en local que sirviéndolo desde su URL canónica, y una auditoría local puede dar por buenos enlaces que en producción devuelven 404. Es exactamente el mismo cuidado que describimos en cómo migrar una web sin perder SEO.
Accesibilidad y movimiento: dos reglas que evitan el 90 % de los fallos
Un sitio con esta cantidad de animación se rompe fácil. Dos decisiones sostienen todo lo demás:
- Sin JavaScript, todo queda abierto y legible, nunca vacío.
- Con movimiento reducido no basta con apagar la animación.
- Hay que fijar además el estado final visible.
- Un trazo animado apagado a mitad es un círculo invisible.
- Ratón, foco y pestaña oculta detienen cualquier pase automático.
- La duración de la barra de avance coincide con el temporizador real.
- Los atributos ARIA pintan el CSS, en lugar de duplicar clases.
Esa última es la que más trabajo ahorra a largo plazo: si el estado activo se dibuja a partir de aria-selected o aria-pressed, es imposible que la apariencia y lo que anuncia el lector de pantalla se desincronicen. No hay dos fuentes de verdad que mantener.
Qué aprendemos de este proyecto
El encargo casi nunca es el proyecto
Entró como «renovar una web en Joomla». Salió como cinco sitios, dos idiomas y un sistema de componentes.
Separar marcas es una decisión de negocio
No se separa por estética. Se separa porque cada actividad tiene su propia intención de búsqueda y su propio cliente.
Replicar la arquitectura, no la piel
Copiar paleta y tipografías de un proyecto anterior produce sitios clónicos y anula la ventaja de tener cinco marcas.
Quitar el CMS traslada trabajo, no lo elimina
Desaparece el mantenimiento recurrente y aparece la obligación de verificar. Quien no verifica, cambia un problema conocido por otro invisible.
Traducir no es internacionalizar
Una empresa con sede propia en Portugal merece una web portuguesa, no una versión traducida de la española.
La animación se juzga por cómo se apaga
Un componente que se ve bien solo cuando todo funciona no está terminado.
Un grupo se comunica mejor por partes
El resultado no es que ahora haya cinco webs en lugar de una. Es que cada empresa del grupo puede explicarse en sus propios términos, dirigirse a su propio cliente y aparecer en su propia búsqueda, sin dejar de señalar a las demás cuando el proyecto del agricultor necesita más de una.
En Artemóvil trabajamos así los proyectos de diseño y desarrollo web: partiendo del inventario de lo que ya existe, decidiendo la arquitectura antes que la maqueta y verificando el sitio completo antes de publicarlo. Si trabajas en el sector, tenemos una guía específica sobre diseño web para empresas agrícolas en Extremadura.
¿Tu grupo tiene varias marcas y una sola web?
Analizamos qué actividades merecen sitio propio, qué contenido se conserva y cómo enlazarlas entre sí sin competir en Google.