proyectos / lorienbar.com
https://lorienbar.com Activo
Oct 12, 2025
Índice de contenidos
Lorien es el bar de referéncia en Palma especializado en cervezas artesanales.
Cerveseria des de 1990 a Palma.
lorienbar.com es un proyecto web personal que llevo manteniendo desde hace más de 11 años y que recientemente he revisado.
Descripción
La web está basada principalmente en el listado de productos actualizados frecuentemente en tres idiomas.
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.
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
sessionStoragepara 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
- 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.
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.
| Archivo | Tipo | Transferido | Tamaño |
|---|---|---|---|
| index.html | html | 39,63KB | 677kB |
| main.css | css | 4,31kb | 18,82 |
| varios archivos | js | 69,10kb | 273KB |
- 20 Solicitudes
- Peso total de la pagina en la primera carga: 407Kb
- Tiempo de carga: 1.32s
Tests
Tests en PageSpeed Insights móvil Oct 12, 2025.
-
Rendimiento
98
-
Accesibilidad
95
-
Buenas prácticas
96
-
SEO
100
Tests en PageSpeed Insights desktop Oct 12, 2025.
-
Rendimiento
99
-
Accesibilidad
95
-
Buenas prácticas
100
-
SEO
100
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.