# Guía de los cambios de la Home

Qué hace cada cambio de esta entrega, en palabras sencillas: qué verá quien entre en la web y por qué.
El cómo (código, selectores, medidas y orden) está en el `LEEME.md` de la entrega y en el detalle de
cada cambio del laboratorio.

La entrega cubre **la portada** y **la cabecera en todas las páginas** (portada, listados y ficha de
producto), más dos limpiezas que valen para todas. Cada cambio lleva un código (UX-HOME-01,
UX-CAB-03...), que es el mismo en el laboratorio, en el código y en el LEEME.

Para verlo en vivo, el laboratorio (https://uxlab-home-ale.pampl.ing) enseña cada página dos veces,
lado a lado: a la izquierda como está hoy y a la derecha con los cambios. Cada cambio se puede
encender y apagar para verlo por separado.

## 1. La portada

### La parte de arriba

- **La cabecera va encima de la foto principal** (UX-CAB-01). En vez de una franja blanca encima de la
  foto, el logo, el menú y los iconos van en blanco sobre la propia foto, con una sombra suave para que
  se lean bien. "Last Chance" sigue en su rosa. Cuando se abre Catálogo, Snoopy y licencias o Comunidad, la
  cabecera vuelve a ponerse blanca. **Por qué:** en el móvil, la cabecera y la foto ocupaban casi toda
  la primera pantalla y los productos empezaban muy abajo.
- **La foto principal, más alta, y la franja de ofertas, más fina y justo debajo** (UX-HOME-11 y
  UX-CAB-06; en móvil y tablet). La franja negra de ofertas (por ejemplo "Calcetines 3x2") queda fina,
  pegada a la foto, y el título "Cada día 1 nueva camiseta" viene después, con aire. En móvil, ese
  título es un poco más pequeño para que quepa en una sola línea. En ordenador no cambia nada. Los dos
  cambios van juntos: el primero da forma a la franja y el segundo la deja en su medida final.
  **Por qué:** con la franja más alta de antes, la foto perdía sitio.

### Las secciones de producto

Orden de la portada después del cambio: "Cada día 1 nueva camiseta", "Explora nuestras camisetas",
**"Nuestras sudaderas"** (nueva), **"Nuevas licencias"** (nueva) y el resto, como hoy.

- **"Explora nuestras camisetas", más corta** (UX-HOME-01). Pasa de 20 camisetas a 8 en ordenador (dos
  filas) y 6 en tablet y en móvil. **Por qué:** 20 seguidas obligaban a bajar mucho y escondían todo
  lo que venía después, incluido Bestsellers.
- **Vuelve el botón "Ver todo" a las camisetas** (UX-HOME-05). Debajo de la sección, un botón lleva a
  todas las camisetas, como en las demás secciones. **Por qué:** si se recorta una lista, hay que dar
  el camino para ver el resto; si no, parece que no hay más.
- **Sección nueva: "Nuestras sudaderas"** (UX-HOME-02). Justo después de las camisetas: 12 sudaderas en
  ordenador (tres filas de cuatro) y 6 en tablet y en móvil, con su botón "Ver todo". **Por qué:** la
  portada no enseñaba ninguna sudadera como producto, y es el artículo de más precio.
- **Sección nueva: "Nuevas licencias"** (UX-HOME-03). Después de las sudaderas: 8 productos de licencia
  en ordenador (dos filas) y 6 en tablet y en móvil, mezclando camisetas, tazas y calcetines, con su
  botón "Ver todo". **Por qué:** las licencias oficiales atraen por sí solas y solo aparecían en
  banners y en el menú.
- **Las dos secciones nuevas, con el mismo aspecto que las de siempre** (UX-HOME-04). Mismo tipo de
  tarjeta, misma separación y el mismo botón al final. Es lo que hace que en cada tamaño se vea el
  número de productos que dicen los dos puntos anteriores.
- **Bestsellers, 12 en vez de 20** (UX-HOME-08). Tres filas de cuatro en ordenador, como las demás
  secciones, y seis filas de dos en móvil. **Por qué:** era la sección más larga de la portada.
- **El botón de "Con mucha categoría" dice "Ver todo"** (UX-HOME-09), en vez de "Ver más". **Por qué:**
  todos los botones de sección de la portada dicen lo mismo, y "Ver todo" explica mejor adónde lleva.

### Los huecos y los servicios

- **Huecos de la portada, a la medida de Scuffers** (UX-HOME-07). Las rejillas de producto van casi de
  borde a borde, las tarjetas más juntas, el texto pegado a la foto y más aire entre una sección y la
  siguiente que entre dos filas de la misma. **Por qué:** hoy todo se lee como una lista continua; así
  el ojo ve dónde acaba cada sección y las fotos salen más grandes.
- **Los cinco servicios se deslizan de lado en móvil** (UX-HOME-06). "Apoyas a los artistas",
  "serigrafía", "envío", "satisfacción" y "precio" pasan de ocupar dos filas a una sola que se
  desliza con el dedo: se ven dos enteros y asoma el tercero. En ordenador no cambia. **Por qué:** en
  móvil ocupaban más de 400 píxeles de alto para cinco frases cortas.

## 2. La cabecera, en todas las páginas

- **La cabecera vuelve al subir** (UX-CAB-03; portada, listados y ficha). Al bajar por la página se va,
  como hoy. En cuanto se sube un poco, baja deslizando y se queda fija arriba, en blanco. Arriba del
  todo vuelve a su sitio. La barra rosa de arriba no se mueve. **Por qué:** para buscar, entrar en la
  cuenta o ir a la cesta ya no hay que volver arriba del todo, y mientras se miran productos la
  cabecera no quita pantalla.
- **Snoopy y licencias y Comunidad se abren como Catálogo** (UX-CAB-08; en ordenador, en las tres
  páginas). Al pasar el ratón por ellos, la cabecera se pone blanca y debajo sale una banda blanca a
  todo el ancho, igual que la de Catálogo, con el nombre del apartado y sus enlaces. **Por qué:** se
  abrían en una caja pequeña, distinta del menú de Catálogo; así los tres se ven y se usan igual.
- **El desplegable del idioma, de cristal oscuro** (UX-CAB-07; en ordenador, en las tres páginas). Se
  abre una tarjeta negra translúcida con esquinas redondas y un pico hacia el idioma; las opciones van
  en blanco y se ponen rosas al pasar el ratón. En la portada, la cabecera se queda encima de la foto.
  **Por qué:** con la cabecera encima de la foto de la portada, la caja blanca de hoy quedaba mal.

## 3. Los listados

- **La cabecera, sin sombra** (UX-CAB-02). **Por qué:** la sombra cortaba la página en franjas.
- **El botón "Filtros" se queda en su sitio** (UX-CAB-09; móvil y tablet). Con la cabecera que vuelve
  al subir, un programa de la web haría flotar abajo el botón "Filtros" del listado. Este cambio lo
  deja en su sitio, como hoy. **Por qué:** es un efecto no buscado de la cabecera nueva. Hoy no se
  nota porque la cabecera se va con la página.

## 4. En todas las páginas

- **Fuera la flecha de volver arriba** (UX-HOME-12 en la portada y UX-CAT-84 en listados y ficha; es
  el mismo cambio). **Por qué:** el círculo negro de la esquina tapaba producto.
- **Fuera dos programas que no hacen nada** (UX-LIMPIEZA-01 y UX-LIMPIEZA-02). Son el contador de
  cuenta atrás antiguo y la librería que usaba. Se cargan en cada visita y ya no hacen nada. Quien visite la
  web no verá ninguna diferencia. **Por qué:** son peticiones de más en cada página.

## 5. Lo que tiene que resolver IT en la web

Son cosas que en el laboratorio se hacen con un apaño y en la web conviene hacer bien. El detalle está
en el punto 4 del `LEEME.md`.

- **Los productos de las secciones nuevas** (sudaderas y licencias) están puestos a mano, como ejemplo.
  En la web tienen que salir de la tienda, elegidos y ordenados desde el panel de Pampling, sin tocar
  código.
- **Menos productos desde el servidor.** En el laboratorio las camisetas y los Bestsellers sobrantes se
  esconden. En la web, lo limpio es que el servidor mande directamente 8 camisetas y 12 Bestsellers.
  Lo mismo con la flecha: mejor quitarla de la plantilla que esconderla.
- **Los dos programas muertos**, fuera de las plantillas, comprobando antes que nada más los usa.
- **El botón "Filtros"**: quitar de la web el trozo de programa que lo hace flotar. Hecho eso, el
  cambio UX-CAB-09 sobra.
- **Los enlaces a categorías** no guardan el filtro en la dirección: dependen de la sesión del
  visitante. Si un enlace se abre donde no llega esa sesión, se aterriza en el catálogo completo. Esto
  pasa en todas las categorías de la web, no solo en estas; la petición es que cada categoría tenga
  una dirección propia que funcione sola.