proyectos / etnografic-campos.com

Un espacio por descubrir y preservar la cultura tradicional de Mallorca. Objetos y testimonios del pasado te acercan a la vida, costumbres y patrimonio de la isla. Explora la riqueza de nuestro legado etnográfico.

La web es un resumen del amplio contenido que ofrece el museo.

Servicios

• Adaptación de diseño.
• Programación y maquetación.
• Mantenimiento.

Resumen del proyecto

Crear una página web en Wordpress Classic como gestor de contenidos en tres idiomas.

Diseño

El diseño está basado en el Theme Loquet se optó por rehacer el Theme usando solo los recursos necesarios, mejorando la semántica del código (el theme original se basa en el uso de Elementor). También se tuvieron en cuenta los costes anuales asociados al Theme original.

Tipografía y colores

Se han mantenido las tipografías usadas en el theme original.

jost-v18-latin_latin-ext-300.woff2
jost-v18-latin_latin-ext-400.woff2
jost-v18-latin_latin-ext-600.woff2
cormorant-garamond-v16-latin_latin-ext-300.woff2
cormorant-garamond-v16-latin_latin-ext-400.woff2
cormorant-garamond-v16-latin_latin-ext-500.woff2

La paleta de colores es la definida en el Theme de referencia.

• black: hsla(0, 0%, 7%, 1.00)
• bokara-grey: hsla(0, 0%, 16%, 1.00)
• dove-gray: hsla(0, 0%, 45%, 1.00)
• grey: hsla(0, 0%, 60%, 1.00)
• zircon: hsla(0, 0%, 88%, 1.00)
• white-lilac: hsla(0, 0%, 91%, 1.00)
• desert-storm: hsla(0, 0%, 97%, 1.00)
• white: white
• tallow: hsla(41, 27%, 56%, 1.00)
• ecru-white: hsla(45, 47%, 93%, 1.00)
• wafer: hsla(26, 27%, 76%, 1.00)

Se han usado variables semánticas para aplicar la paleta de color.

:root {
    --background-color-light-grey: var(--desert-storm);
    --link-color: var(--tallow);
    --link-color-hover: var(--dove-gray);
    ...
}

Mejoras de código en el proyecto

En lo referente al desarrollo se plantearon varios objetivos, eliminar dependencias, mantener el aspecto del theme original mejorando la semántica e indexación de contenidos.

Html

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

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

└── <h1> Descobreix la major col·lecció etnogràfica de Mallorca. Coneix com van viure, van treballar i van conservar les seves tradicions els nostres avantpassats a l'illa.
    └── <h2> Des d'eines d'oficis antics fins a estris quotidians, la col·lecció s'ha format al llarg de dècades mitjançant un meticulós procés de selecció i posterior recuperació.
    └── <h2> Sobre l'exposició
        └── <h3> Ordre i estatus de la col·lecció
        └── <h3> Seccions destacades
        └── <h3> Peces singulars  

Como parte de la estructura Html se han usado landmarks, <section>, <article>, <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 basada en "The 7-1 pattern" descrita en la guía de uso de Sass, con algunas adaptaciones para organizar las clases de Wordpress.

Se han usado variables Sass excepto en los colores que se ha optado por variables Css.

:root {
    --black: hsla(0, 0%, 7%, 1.00);
    --bokara-grey: hsla(0, 0%, 16%, 1.00);
    --dove-gray: hsla(0, 0%, 45%, 1.00);
    --grey: hsla(0, 0%, 60%, 1.00);
    ...  

    $mediaQuerie-mobile: 380px;
    $mediaQuerie-tablet-vertical: 768px;
    $mediaQuerie-tablet-horizontal: 1024px;
    $mediaQuerie-aside: 1200px;
    $mediaQuerie-desktop: 1360px;
    ... 

Se ha usado BEM como estrategia para definir los nombres de las clases, clases únicas para los componentes y elementos dentro del mismo para evitar conflictos, rebajar la especificidad y diferenciar claramente los elementos de Wordpress de los propios de la plantilla.

.co-com-hero {
    &__content { ... }
    &__pretitle { ... }
    &__title { ... }
    &__link { ... }
}

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.

La carga de javascript más importante procede de los plugins implementados y el propio Wordpress.

Dependencias del Theme

• Wordpress
• Plugin Advanced Custom Fields PRO. Facilita la gestión de contenidos en Wordpress.
• Plugin Classic Editor. Activa el editor clásico de Wordpress y elimina la carga de gutenberg.

Al margen de las necesidades del Theme se han instalado otros Plugins para dar funcionalidades al proyecto como: formularios de contacto, gestión de cookies, copias de seguridad, compra de entradas, seguridad, gestión de idiomas y gestión de SEO.

Tecnologías de desarrollo

• Html, Css y Javascript
• Php
• Node 20
• Sass 1.86.3

Control de versiones y tareas

Se ha configurado Gitlab como repositorio de versiones y gestor de tareas.

Gestión de contenidos

Todo el contenido lo gestiona el cliente desde el administrador de Wordpress.

Rendimiento (Wpo)

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

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

Tests

Tests en PageSpeed Insights móvil May 19, 2026.

Tests en PageSpeed Insights desktop May 19, 2026.

Mantenimiento

El mantenimiento del proyecto consiste en supervisar las actualizaciones de Wordpress y sus plugins, la configuración de los plugins de seguridad y copias de seguridad programadas.

Creditos

Quiero dar las gracias a Tomeu Fiol por la ayuda en la gestión del proyecto y las fantásticas fotos que ha realizado para la web del museo.