proyectos / olinovembre.es

Olinovembre es una empresa familiar con un objetivo:

Este cultivo lo entendíamos solamente bajo el prisma del respeto a la tierra y al entorno, nuestro objetivo fue llegar a un cultivo totalmente ecológico.

olinovembre.es es un proyecto web personal y familiar que llevo manteniendo desde hace más de 12 años y que recientemente he revisado a todos los niveles.

Servicios

• Diseño.
• Programación y maquetación.
• Mantenimiento del código y contenidos.

Briefing

El proyecto es simple, son cuatro páginas, una por idioma, con información concisa sobre la filosofía, la historia y los productos de la empresa.

• El diseño debía ser minimalista y diferenciarse de las webs del resto del sector la mayoría con diseños muy similares.
• La página debe ser de fácil lectura, teniendo en cuenta la tipografía, los espacios y los colores.
• Los tiempos de carga deben ser ajustados.

Diseño

Se decidió que, ya que el contenido de cada apartado era breve se podía agrupar en una sola página dando espacio a cada uno de los apartados separandolos con imagenes.

Las imágenes son importantes, representan el caracter ecológico del producto y los valores familiares de la empresa, estas tienen deben destacar sin dificultar la lectura.

Proceso de diseño

Se presentó una propuesta en Figma para valorar los aspectos generales y en la fase de maquetación se acabó de tomar decisiones, sobre todo en lo referente al tamaño de los textos y las imágenes.

Tipografía y colores

Se ha optado por el uso de una sola tipografía Martel Sans, de esta tipografía solo se han usado tres estilos de los siete que hay disponibles.

martel-sans-v13-latin_latin-ext-200.woff2
martel-sans-v13-latin_latin-ext-600.woff2
martel-sans-v13-latin_latin-ext-800.woff2

---

Los colores son los corporativos más un naranja usado para resaltar los enlaces cuando se coloca el cursor encima.

• primary: hsla(59, 48%, 36%, 1.00)
• primary-dark: hsla(59, 48%, 22%, 1.00)
• primary-darker: hsla(60, 42%, 18%, 1.00)
• secondary: orange

Como parte del diseño se han añadido algunas animaciones al hacer scroll.

---

Desarrollo

El mismo concepto minimalista aplicado en el diseño se ha aplicado en el desarrollo.

El proyecto tendrá poco mantenimiento, por lo que se decidió:

• No usar gestor de contenidos.
• No usar base de datos.

Html

La maquetación se ha abordado desde la filosofía mobile first usando código semántico, orientado a mejorar el SEO técnico, los tiempos de carga, la comprensión y la accsesibilidad.

Crear una jerarquía de contenidos bien definida y válida es importante para conseguir lo anteriormente mencionado.

└── <h1> Olinovembre
  └── <h2> El aceite de mallorca
  └── <h2> Un objetivo
  └── <h2> Una decisión
  └── <h2> Un resultado
  └── <h2> Son elsebitx     
  └── <h2> Productos 
    └── <h3> Nuestro aceite

Como parte de la estructura Html se han usado landmarks, <sections>, <nav> y otras etiquetas semánticas para agrupar el contenido <header>, <main>, <footer>.

Css

Se han usado variables Css para agrupar estilos y se ha creado un "micro-design-sytem" para usar las variables en colores, tamaños de letra, distancias, anchos y alturas de elementos, transiciones y apariencia de objetos.

La estratégia para definir los nombres de las clases está basada en nombres únicos para los componentes y estilos por herencia dentro de estos.

.nav-main ul {
    display: flex;
    gap: var(--gap-1);
}

Las animaciones también son gestionadas con Css.

Javascript

Las funcionalidades de javascript de este proyecto son dos:

• Abrir el menú de idioma en la versión móvil.
• "Disparar" las animaciones de los elementos cuando entran en el viewport con IntersectionObserver.

Entorno de desarrollo

La herramienta para la generación de paginas y archivos estáticos es Eleventy.js.

Entre las diferentes opciones de lenguage que proporcina Eleventy la elegida es Nunjucks.

Gestion de contenidos

El contenido se gestiona desde tres archivos .json. Los textos, en estos archivos, están separados por idioma y secciones.

• sections.json donde se agrupan los textos de cada sección.
• products.jons para los productos.
• literals.json para las etiquetas y literales.

Me resulta mucho más cómodo gestionar contenidos de pequeños proyectos de esta manera, evitando ir saltando entre archivos para editar contenido relacionado entre idiomas.

Tecnologías

• Html, Css y Javascript
• Nunjucks
• Node 20
• Eleventy 3.0.0
  • Eleventy plugin redirects 1.0

Control de versiones y deploys

Se ha configurado Gitlab como repositorio de versiones y gestión de tareas. Desde gitlab se ejecutan los deploys automáticos al servidor de pruebas alojado en "GitLab Pages" para revisiones por parte del "cliente".

Las subidas a producción, de momento se hacen a mano por FTP, subir 2Mb por Ftp no supone un problema, queda en la lista de "Mejora contínua" la implementación de las subidas desde GitLab.

Rendimiento (Wpo)

Se han usado diferentes técnicas para mejorar los tiempos de carga, como el uso de carga demorada en imagenes loading="lazy" y la optimización de imagenes antes de la puesta en producción.

La fuente Martel Sans carga directamente desde el servidor donde está alojada la web evitando cargar recursos externos.

También se ha configurado una caché a nivel de servidor.

---

Datos obtenidos del inspector de Firefox en una primera carga el 16 de Agosto de 2025.

• 11 Solicitudes
• Peso total de la pagina en la primera carga: 760Kb
• Tiempo de carga: 323ms

Tests

Aunque los primeros tests no son malos hay margen de mejora, sobretodo en las versiones moviles.

Alojamiento

La web está alojada en los servidores de Joopbox empresa local con un gran equipo y soporte.

La web, totalmente estática, no requiere de demasiados recursos a nivel de servidor y permite "cachear" fácilmente todos los archivos.

Mejora continua

Todos los proyectos una vez publicados deben tener un mapa de ruta contemplando el mantenimiento, mejoras de código (refactorización) y nuevas funcionalidades.

En esta caso concreto se pueden mejorar los tiempos de carga y algunos aspectos de la usabilidad y el diseño.