← Volver al laboratorio · Entrega para IT

Entrega 1 — Home (portada y cabecera)

Primera de las cinco entregas de UX (ver ..\LEEME.md). No necesita nada antes. Trae la estética de la portada y la cabecera nueva en todas las páginas (portada, listados y ficha): transparente sobre la foto en la portada, sin sombra en los listados, que baja al subir por la página, con la foto principal más alta y la franja de ofertas más fina debajo; Snoopy y licencias y Comunidad se abren como el menú de Catálogo, y el idioma, de cristal oscuro. También lo que es común a todas las páginas: fuera la flecha de volver arriba y dos scripts muertos. Después vienen Catálogo (2), Ficha (3), Newsletter (4) y Filtros (5).

1. Qué cambia

Portada

Código	Qué se ve
UX-HOME-01	"Explora nuestras camisetas": 2 filas en ordenador y 6 prendas en móvil
UX-HOME-02	Sección nueva "Nuestras sudaderas" (12 en ordenador, 6 en móvil)
UX-HOME-03	Sección nueva "Nuevas licencias" (dos filas en ordenador, 6 en móvil)
UX-HOME-04	Las dos secciones nuevas, con el mismo aspecto que las de la web
UX-HOME-05	"Explora nuestras camisetas" vuelve a tener su botón "Ver todo"
UX-HOME-06	Los cinco servicios se deslizan de lado en móvil
UX-HOME-07	Huecos de la portada, a la medida de Scuffers
UX-HOME-08	Bestsellers: 12 productos en vez de 20
UX-HOME-09	El botón de "Con mucha categoría" dice "Ver todo"
UX-HOME-11	La franja de ofertas en móvil. Después, UX-CAB-06 la deja en 30 px (7 arriba y abajo), justo debajo de la foto: van las dos reglas, en ese orden

Orden de la portada después del cambio: "Cada día 1 nueva camiseta" → "Explora nuestras camisetas" + "Ver todo" → "Nuestras sudaderas" + "Ver todo" → "Nuevas licencias" + "Ver todo" → el resto, como hoy.

Todas las páginas

Código	Qué se ve
UX-HOME-12 = UX-CAT-84	Fuera la flecha de volver arriba (es un solo cambio con dos códigos)
UX-LIMPIEZA-01	Fuera el contador antiguo, que no hace nada (portada y ficha)
UX-LIMPIEZA-02	Fuera `jquery.countdown`, que no usa nadie (portada, listados y ficha)

Cabecera

Código	Dónde	Qué se ve	Va en
UX-CAB-01	Portada	La cabecera va transparente encima de la foto principal, con menú, logo e iconos en blanco, como Cold Culture. Detalles en la lista de debajo	`portada.css`
UX-CAB-02	Listados	Sin la sombra de debajo de la cabecera	`listados.css`
UX-CAB-03	Las tres	La cabecera baja al subir por la página. Detalles en la lista de debajo	`comun.js` y `comun.css`
UX-CAB-07	Las tres	El desplegable del idioma pasa a ser una tarjeta de cristal oscuro. Detalles en la lista de debajo	`comun.css`
UX-CAB-08	Las tres	Snoopy y licencias y Comunidad se abren como el menú de Catálogo: la cabecera se pone blanca y debajo sale una banda blanca a todo el ancho, con el nombre del apartado y sus enlaces. Detalles en la lista de debajo	`comun.css`
UX-CAB-06	Portada	En móvil y tablet, la foto principal crece y la franja negra de ofertas, más fina, va justo debajo; después, el título y el resto de la web. Detalles en la lista de debajo	`portada.css`
UX-CAB-09	Listados	Con la cabecera fija, el botón "Filtros" de la web se queda en su sitio, como hoy (ver 4)	`listados.css`

UX-CAB-01, en detalle:

Detrás de la cabecera hay una sombra suave arriba de la foto, para que el blanco se lea.
Con Catálogo, Snoopy y licencias o Comunidad abiertos (los tres se abren a todo el ancho, UX-CAB-08) la cabecera vuelve a blanco, como en la web. Con el idioma abierto se queda en la foto: su desplegable va de cristal oscuro (UX-CAB-07).
"Last Chance" se queda en su rosa (#f92b89) también encima de la foto, como cuando la cabecera flota: el blanco no se aplica a los enlaces a.rosa.
En móvil (hasta 450 px), la foto pasa a 406 de alto; UX-CAB-06 la sube después a 521.

UX-CAB-07, en detalle (solo en ordenador; por debajo de 941 px la web esconde el idioma):

El desplegable del idioma es una tarjeta negra translúcida (negro al 62 %) con lo de detrás desenfocado, esquinas de 12, borde fino claro, sombra y un pico que apunta al idioma.
Cada idioma, con su bandera, en su fila redondeada, en blanco; al pasar el ratón, la fila se pone rosa.
En todas las páginas: sobre blanco se ve como una tarjeta gris oscura. También con la cabecera fija.

UX-CAB-08, en detalle (solo en ordenador, desde 941 px):

Al pasar el ratón por Snoopy y licencias o por Comunidad, la cabecera se pone blanca y debajo sale una banda blanca a todo el ancho, como la de Catálogo: el mismo relleno (40 arriba y abajo, 20 a los lados), el nombre del apartado en negrita con su raya y los enlaces con la letra de Catálogo (Raleway de 14, en negro, subrayados al pasar el ratón). Aparece igual que Catálogo: baja 15 px con un fundido de 0,3 s.
Entre el título del menú y la banda hay un puente invisible, copia del de Catálogo: al bajar el ratón no se cierra.
Mientras está abierta, el bloque de la cabecera (.cabecera-principal) lleva contain: layout y z-index: 9, el del menú de Catálogo: así la banda, que va con position: fixed, se coloca respecto a la cabecera y queda por encima de la página también en listados y ficha.
El nombre del apartado ("Snoopy y licencias", "Comunidad") lo pone el CSS (content). En la web puede ir en el HTML, como el "Ver todo >" de Catálogo, y entonces sobran esas dos reglas (ver 4).

UX-CAB-06, en detalle (hasta 991 px; en ordenador no cambia):

La foto principal, más alta:
hasta 450 px, de 406 a 521;
de 451 a 554, del 60 % del alto de la pantalla al 60 % + 113;
de 555 a 991, donde la web pone otra foto, del 70 % al 70 % + 113.
La franja de ofertas (Calcetines 3x2...), de 88 (UX-HOME-11) a 30 de alto: 7 px arriba y abajo, con el mismo texto de 16.
Entre la franja y el título, 21 px de aire hasta las letras en móvil y 26 en tablet: el margen de abajo de la franja pasa de -20 (UX-HOME-11) a -21.
La franja va justo debajo de la foto y, después, "Cada día 1 nueva camiseta" y todo lo demás. A 402 px de ancho (contando los 45 de la barra rosa de arriba): la foto acaba en 566, la franja va de 566 a 596 y el título empieza en 610.
En móvil (hasta 450 px), ese título pasa de 32 a 26 px para que tenga aire a los lados: a 32 solo le quedaban 3 px a cada lado a 402 y se partía en dos líneas a 360. Su margen de arriba pasa de 17 a 19, para que sigan quedando 21 hasta la franja. Los demás títulos no cambian.

UX-CAB-03, en detalle:

Al bajar, la cabecera se va con la página, como hoy.
En cuanto se sube 5 px, baja deslizando (0,25 s) y se queda fija, en blanco (#ffffff), sin transparencia ni sombra.
Arriba del todo vuelve a su sitio sin salto.
Solo se mueve la franja de logo, menú e iconos: la barra rosa no.
Con la cabecera fija, los menús (Catálogo, Snoopy y licencias, Comunidad e idioma) se abren y se pueden usar igual que arriba. Para eso, a la vista va con transform: none y no con translateY(0): con un transform y el overflow-x: clip de la web, el ratón no llegaba a lo que cuelga de la cabecera y los menús se cerraban al bajar hacia ellos (medido).

UX-CAB-09, en detalle: la web tiene en catalogo.js un bloque ("hacer que el boton de filtro se cambie de sitio cuando deje de verse en pantalla") que pone .btn-fixed al botón "Filtros" en cuanto la cabecera tapa el listado, y su hoja lo deja flotando abajo, centrado. Hoy nunca salta, porque la cabecera se va con la página. Con la cabecera fija saltaría en móvil y tablet: medido, el botón pasa a flotar a 10 px del borde de abajo. UX-CAB-09 lo deja como hoy, en su sitio (en ordenador ese botón no se ve).

2. Qué hay en esta carpeta

Archivo	Qué es
`GUIA.md`	Qué hace cada cambio y por qué, sin tecnicismos (para leer antes que este LEEME)
`codigo/comun.css`	CSS para todas las páginas: la flecha, la cabecera fija y los desplegables
`codigo/comun.js`	JavaScript para todas las páginas: la cabecera que baja al subir
`codigo/portada.css`	CSS de la portada: secciones, huecos, cabecera transparente, foto y franja
`codigo/listados.css`	CSS de los listados: sin sombra bajo la cabecera y el botón "Filtros" en su sitio
`html/comun.md`	Los dos `<script>` muertos que se quitan
`html/portada.md`	Las dos secciones nuevas, el botón "Ver todo" y el texto del botón de categorías
`capturas/`	Portada, listados y ficha antes y después, en móvil (402), tablet (820) y ordenador (1440); cada página "al subir", con la cabecera fija; y los desplegables del menú abiertos. El "antes" es la web de hoy, sin ningún cambio

La ficha de producto no lleva archivo propio: en ella todo es común (la cabecera, la flecha y los dos scripts muertos).

En el código, cada bloque empieza con /* >>> UX-... | título | paginas: ... */ y su explicación: qué hace, por qué y las medidas. En el HTML, cada cambio dice qué hacer (Quitar o Añadir), dónde (el selector) y lleva el HTML exacto.

3. Cómo aplicarla

CSS. Cada archivo se carga en su plantilla, después de las hojas de estilo del sitio:

Archivo	Plantilla
`codigo/comun.css`	Todas las páginas
`codigo/portada.css`	Portada
`codigo/listados.css`	Listados (todos usan la misma)

Van separados porque la web no marca en qué página está (el <body> no lleva clase), y hay reglas de una plantilla que tocarían piezas de otra.

Los archivos son ASCII puro: no se rompen con la codificación de la web (Windows-1252).
Algunos selectores llevan un div. de más o un !important. En el laboratorio hacía falta para ganar a las hojas del sitio, y el comentario de cada uno dice por qué. Se pueden simplificar si se pasan a las hojas del sitio, pero entonces hay que volver a mirar las medidas.

HTML. En html/ va una lista por plantilla, en el orden en que se aplican:

html/comun.md: quitar los dos <script> muertos.
html/portada.md: añadir las dos secciones y el botón "Ver todo", y cambiar el texto del botón de categorías.

Los caracteres especiales van como entidades (á). Las rutas son las de la web (con su <base href="https://www.pampling.com/">).

JavaScript. codigo/comun.js al final del <body> de portada, listados y ficha, después de los scripts del sitio. No usa jQuery, espera a que la página esté cargada y es ASCII puro, con las tildes escritas en código.

No se sube nada solo del laboratorio en esta entrega.

4. Lo que pide desarrollo

Productos de las secciones nuevas de la portada (UX-HOME-02 y 03). En la maqueta están puestos a mano, con nombre, precio, foto y enlace copiados del catálogo. En la web deben salir de la plantilla, con los productos elegidos y ordenados desde el panel de Pampling, sin tocar código. Es lo mismo que se pidió para el carrusel de la cesta.
Mejor en origen que con CSS. Estas tres cosas se esconden con CSS en la maqueta, pero lo limpio es resolverlas en la plantilla o en el servidor. Hecho eso, su CSS sobra.
"Explora nuestras camisetas" (UX-HOME-01): que el servidor mande 8 productos en vez de 20.
Bestsellers (UX-HOME-08): que mande 12 en vez de 20.
La flecha (UX-HOME-12 = UX-CAT-84): quitar el enlace a#link_subir y su bloque "Link subir" de comunes.inc.js.
Scripts muertos (UX-LIMPIEZA-01 y 02). Quitar las etiquetas <script> de modulo_contador_xpresstee.class.js y jquery.countdown.min.js de las plantillas, y los archivos si nada más los usa. Antes, comprobar que ningún otro archivo llama a .countdown(.
Quitar de catalogo.js el bloque que pone .btn-fixed al botón de Filtros (UX-CAB-09). Es el que empieza por el comentario "hacer que el boton de filtro se cambie de sitio cuando deje de verse en pantalla". Mientras no se quite, UX-CAB-09 lo anula; quitado el bloque, UX-CAB-09 sobra.
Cabecera, detalles técnicos (los comentarios del código los explican):
La cabecera fija va con position: fixed y deja un hueco de su alto. No se usa position: sticky porque la web pone overflow-x: hidden en html y body, y con eso no funciona.
Mientras flota, lleva la clase ux-cab-fija. En la portada, UX-CAB-01 no se aplica mientras flota, así que la cabecera se ve blanca.
Va con z-index: 99998, por debajo del menú lateral de móvil (99999).
La web ya pone la clase isSticky a la cabecera cuando la página no está arriba del todo (comunes.inc.js). No choca con esta entrega.
A la vista, la cabecera fija va con transform: none: con un transform y el overflow-x: clip que la web le pone a la cabecera, los menús se cerraban al bajar el ratón hacia ellos.
El nombre del apartado de Snoopy y licencias y de Comunidad (UX-CAB-08) lo pone el CSS. Si se prefiere, se escribe en el HTML del menú, como el "Ver todo >" de Catálogo, y se quitan las dos reglas content.

5. Cómo comprobarla

Medido en el laboratorio (alto de la cabecera: 64 en móvil, 70 en tablet y 67 en ordenador; arriba del todo empieza a 45, debajo de la barra rosa):

[ ] Portada.
"Nuestras sudaderas" y "Nuevas licencias" en su sitio.
6 prendas en móvil en cada sección.
Bestsellers con 12.
Todos los "Ver todo" llevan a su listado.
[ ] Portada, arriba del todo:
La cabecera va transparente sobre la foto, con el texto y los iconos en blanco, salvo "Last Chance", que sigue en rosa.
Al abrir Catálogo, Snoopy y licencias o Comunidad, la cabecera se pone blanca. Al abrir el idioma, se queda en la foto con el menú en blanco.
[ ] Portada, foto y franja (medido):
En móvil, la foto mide 521 y la franja de ofertas 30, justo debajo de la foto.
De la franja a las letras de "Cada día 1 nueva camiseta", 21 px en móvil y 26 en tablet.
Ese título, a 26 px en móvil y en una sola línea: 23 px a cada lado a 360, 44 a 402 y 68 a 450.
En tablet, la foto es 113 px más alta que el 70 % de la pantalla (60 % + 113 de 451 a 554).
[ ] Desplegables del menú (en ordenador): Snoopy y licencias y Comunidad se abren como Catálogo, en una banda blanca a todo el ancho con el nombre del apartado y su raya; el idioma, en una tarjeta negra translúcida de 176 de ancho con pico. Igual en las tres páginas y con la cabecera fija: al mover el ratón del menú a su banda o a su tarjeta no se cierra, y se puede pulsar cada enlace (también en Catálogo).
[ ] En las tres páginas:
Al bajar, la cabecera se va.
Al subir un poco, baja y se queda fija arriba (en 0), blanca del todo.
Arriba del todo vuelve exactamente a su sitio.
Sin la flecha de volver arriba, también al bajar.
En el código de la página no están los dos scripts.
[ ] Listados:
Sin sombra bajo la cabecera.
Al bajar y volver a subir con la cabecera fija, el botón "Filtros" de la web se queda en su sitio y no se pone a flotar abajo (móvil y tablet).
El resto del listado, como hoy.
[ ] En móvil, el menú lateral sale por encima de la cabecera fija.
[ ] La consola no da errores nuevos.
[ ] Compararlo con capturas/portada-*, listados-*, ficha-* (antes/después), portada-al-subir-*, listados-al-subir-*, ficha-al-subir-* y menu-* (móvil/tablet/ordenador).

Comprobado también: el código de esta entrega es el mismo, bloque a bloque, que el que iba en la entrega conjunta anterior, salvo UX-CAB-09, que es nuevo, y UX-CAB-03, cuya cabecera fija pasa a blanco del todo (antes, blanco al 85 % con desenfoque). Todo lo que buscan las instrucciones y el código está igual en la web de hoy (HTML del 2026-09-29).

6. Lo que NO va en esta entrega

Catálogo (entrega 2): banda negra, rejilla y huecos de los listados, y 64 productos por página.
Ficha (entrega 3): los huecos de la ficha y el contador de fin de oferta.
Newsletter (entrega 4): la oferta de la portada, la línea junto al precio de la ficha y el bloque del pie.
Filtros (entrega 5): "Ordenar por" y "Filtros" bajo las migas, el panel de filtros y el botón flotante.

7. Petición relacionada (no bloquea esta entrega)

El "Ver todo" de licencias (el de "Nuevas licencias", UX-HOME-03). Lleva al "Ver todo" del menú (buscar-catalogo/menu/Licencias), que hoy devuelve solo camisetas de licencia y se titula "Catálogo completo". Se pide que ese listado reúna todos los productos de licencia (camisetas, tazas y calcetines) y lleve su propio título.