proyectos / lorienbar.com

Lorien es el bar de referéncia en Palma especializado en cervezas artesanales.

Cerveseria des de 1990 a Palma.

loriebar.com es un proyecto web personal que llevo manteniendo desde hace más de 11 años y que recientemente he revisado. El bar, es mi refugio mi "Bat-cueva" llena de parroquianos.

Descripción

La web está basada principalmente en el listado de productos, que se publican en tres idiomas. La web está constantemente actualizada con las novedades que llegan al bar.

Servicios

• Re-Diseño, a medias con Celeste.
• Programación y maquetación.
• Mantenimiento.

Briefing de la actualización

La idea era destacar el color de cada cerveza, las fotos y dar un aspecto ligeramente diferente a la web para dar sensación de renovación.

Proceso de diseño

El proceso de actualización se ha realizado en un servidor de pruebas, donde se han aplicado y revisado los cambios.

Tipografía y colores

Se han mantenido las tipografías que ya existían en la versión anterior.

montserrat-v26-latin_latin-ext-100.woff2
montserrat-v26-latin_latin-ext-400.woff2
coustard-v16-latin-400.woff2

---

En esta actualización se ha cambiado totalmente la gestión de color. Para los elementos de la web se ha usado una paleta basada en la gama de color (Ebc).

Los colores aplicados en las tarjetas de cada cerveza lo define "Pep" desde el administrador, teniendo libertad de crear y editar colores para cada tipo de cerveza.

Mejoras de código en el proyecto

En lo referente al desarrollo se planteron varios objetivos, eliminar dependencias, actualizar las versiones de las aplicaciones y mejorar los tiempos de carga.

• Se ha sustituido Gulp.js por scripts en package.json.
• Se ha prescindido de jquery en favor de javascript
• Actualizado Eleventy a la versión 3.1.2
• Actualizada la versión de Decap Cms
• Actualizada la versión de Sass

Html

La maquetación, en lineas generales se ha mantenido. Mobile first usando código semántico, orientado a mejorar el SEO técnico, los tiempos de carga, la comprensión y la accsesibilidad.

Se ha mantenido la jerarquía de contenidos (Ejemplo de la pagina de inicio).

└── <h1> Cerveseria des de 1990 a Palma
  └── <h2> Barril itinerant
    └── <h3> Nom de cervesa
  └── <h2> Variat de barril itinerant
    └── <h3> Nom de cervesa
  └── <h2> Novetats
    └── <h3> Nom de cervesa
  └── <h2> Ubicació
  └── <h2> Horari     
  └── <h2> Menú de xarxes socials
  └── <h2> Menú legal  

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, Sass

El proyecto Sass se ha redefinido para usar la metodología "The 7-1 pattern" descrita en la guia de uso de Sass.

Se han usado varaibles Sass para la gestión de variables y variables Css para modificar el valor de algunas variables de forma dinámica, cuando ha sido necesario.

:where(a) {
    --color: #{color.$surface-1-color};
    --color-hover: #{color.$surface-1-color-dark}; 
    color: var(--color);
    &:hover{
        color: var(--color-hover);
    }
    @media(min-width: breakpoint.$breakpoint_nav_main) {
        --color: #{color.$color-link};
        --color-hover: #{color.$color-link-hover};           
    }      
}

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);
}

Heredado de la antígua versión aún quedan algunos componentes basados en BEM que se irán migrado al nuevo sistema a medida que se pueda.

Se han añadido al proyecto algunas animaciones, gestionadas con Css, al cargar las paginas.

Javascript

Se ha intentado minimizar el uso de javascript en el proyecto:

• Abrir el menú en la versión móvil.
• En los filtros en los listados de cervezas.
• Los "carouseles" en la pagina de inicio
• Uso de sessionStorage para la selección de edad.

La carga de javascript más importante procede de los scripts de netlify para el acceso al administrados del CMS Decap.

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.

Tecnologías

• Html, Css y Javascript
• Nunjucks
• Node 20
• Eleventy 3.1.2
  • Eleventy plugin redirects 1.0
• Sass 1.77.6

Control de versiones y deploys

Se ha configurado Gitlab como repositorio de versiones, gestor de tareas y documentación del proyecto.

Desde Netlify se ejecutan los deploys automáticos al servidor de producción.

Gestión de contenidos

El contenido se gestiona desde Decap Cms, para facilitar la actualización de los contenidos.

Rendimiento (Wpo)

Se han usado diferentes técnicas para mejorar los tiempos de carga, como el uso de carga demorada en imagenes loading="lazy".

Las fuentes cargan directamente desde el servidor donde está alojada la web evitando cargar recursos externos.

Datos obtenidos del inspector de Firefox en una primera carga el 12 de Octubre de 2025.

• 20 Solicitudes
• Peso total de la pagina en la primera carga: 407Kb
• Tiempo de carga: 1.32s

Tests

Primeros test tras publicar la web.

Alojamiento

La web está alojada en Netlify.

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, algunos aspectos de la usabilidad y errores de marcado.