senzapaura_es/docs/revision-web-publica-2026-09-11.md

Revisión y corrección de la web pública

Fecha: 11 de septiembre de 2026.

Se han revisado navegación, catálogo, reproducción, acceso, contacto, etiquetas, blog, géneros y adaptación a móvil. Las correcciones mantienen el logotipo, la paleta y las tipografías existentes.

Correcciones aplicadas

Área	Problema encontrado	Resultado
Etiquetas	Se presentaban como una sección pública independiente y, después, su nube alargaba el aside hasta forzar un desplazamiento interno.	El índice y las fichas independientes desaparecen. «Etiquetas» es un toggle integrado junto a «Tarjetas» y «Tabla»; abre la nube bajo el buscador y vuelve a ocultarla al desactivarlo. Incluye «Todas», conserva vista, estilo e idioma y mantiene el estilo ghost con un color estable para cada etiqueta.
Géneros y letristas	Se enlazaba a /generos/bolero-son aunque no tenía ficha publicada. También se suponía que el identificador del género coincidía con el de su capítulo.	Los listados enlazan a una ficha publicada real. Cuando no existe, conservan el nombre del género como información, sin enlace roto. Se aplica a letristas, canciones y portada de géneros.
Reproductor y teclado	La barra espaciadora podía controlar la música mientras se accionaba otro botón; los atajos también alcanzaban los diálogos.	Los controles enfocados y los diálogos tienen prioridad. Se respetan eventos ya gestionados, composición de texto y modificadores.
Cambios rápidos de canción	El rechazo de una solicitud antigua de reproducción podía cambiar el estado de una canción nueva.	Cada intento de reproducción se identifica; una respuesta antigua no altera el estado del intento actual.
Cola de reproducción	Añadir varias veces la misma pista en una sola llamada generaba duplicados. Vaciar la cola dejaba recursos y metadatos pendientes.	Se evitan duplicados en la incorporación; vaciar detiene y libera el audio y limpia carga, errores y metadatos del sistema.
Grabaciones reutilizadas	Una grabación presente en varios discos se duplicaba en descubrimiento y recuentos. Las tarjetas usaban una clave que no distinguía versiones.	Las vistas generales agrupan por grabación, conservan sus versiones y permiten buscar por cualquiera de sus discos. Cada disco mantiene sus pistas y su orden.
Información de las versiones	Un corte de una versión podía mostrar duración, voces o idioma de la grabación principal.	Los cortes utilizan los datos de la versión seleccionada. Las tarjetas muestran el nombre de la versión; una duración desconocida no se sustituye por la de otra grabación.
Contacto	Un error de red podía llevar a la página de error y perder lo escrito. La actualización del aviso también podía vaciar campos.	El formulario conserva nombre, correo, motivo y mensaje, muestra un aviso y permite reintentar.
Acceso	Un error de red perdía el contexto; había identificadores de campos duplicados entre página y modal y podían solaparse solicitudes.	Los errores aparecen dentro del formulario, se conserva el correo y el código, cada instancia tiene identificadores propios y las acciones se bloquean durante el envío. Se puede pegar un código de seis cifras separado por espacios.
Acceso desde una canción	Favoritos, listas y valoración enviaban a la página de acceso aunque la cabecera ya utilizaba un diálogo.	Esas acciones abren el mismo popup de acceso y conservan la canción a la vista. La ruta /entrar se mantiene como respaldo para enlaces abiertos sin JavaScript o en otra pestaña.
Versiones de una canción	La sección solo aparecía cuando existía una alternativa y quedaba escondida bajo el nombre «Alternativas musicales».	Todas las canciones tienen una pestaña «Versiones». Incluye la grabación principal y cada alternativa con idioma, formación vocal, intérpretes, duración y tipo de acceso disponibles.
Protección de la letra	La letra permitía selección, copia, arrastre y menú contextual como cualquier otro texto de la página.	La letra y su traducción bloquean selección, copia, corte, arrastre, menú contextual y pulsación prolongada. El texto se conserva en el DOM para mantener SEO y accesibilidad; la medida actúa como barrera disuasoria, ya que el contenido enviado al navegador no puede protegerse de forma absoluta.
Canciones relacionadas	La ficha terminaba sin ofrecer una continuación basada en el contenido consultado. Sus motivos de relación aparecían después como cápsulas grandes, doradas y ajenas a las etiquetas del catálogo.	Se añade una fila horizontal de hasta ocho canciones. Se priorizan etiquetas compartidas y después género, intérpretes, estilo y disco; cada tarjeta explica por qué se recomienda mediante la misma etiqueta menuda, ghost y con color estable que usa el resto de la aplicación. Se desplaza con flechas, rueda, trackpad o gesto táctil sin mostrar una barra inferior.
Listas desde las tarjetas	Las tarjetas permitían reproducir, guardar en favoritos y comprar, pero no añadir la canción a una lista de reproducción.	Todas las tarjetas incorporan un icono explícito de lista con signo «+» y el texto «Añadir». Sin sesión abre el popup de acceso; con sesión permite elegir una lista o crearla allí mismo mediante acciones compartidas por todo el catálogo.
Valoración en las tarjetas	La nota media solo se veía al abrir la ficha completa de una canción.	Cada tarjeta muestra una estrella, la media sobre cinco y el número de votos. Si todavía no existen votos, lo indica como «Sin valorar». Las medias de todo el catálogo se obtienen con una única consulta agregada.
Alineación de las tarjetas	Los títulos de distinta longitud desplazaban verticalmente las valoraciones y todas las acciones se acumulaban a la derecha.	La valoración se apoya al final del cuerpo y queda alineada entre tarjetas. Favoritos y playlist forman un grupo a la izquierda; la acción de compra permanece separada a la derecha.
Motivo del acceso	El popup pedía el correo sin explicar qué acción había provocado que se solicitara una cuenta.	Antes del formulario aparece un mensaje específico para valorar, guardar en favoritos, añadir a listas, comprar o entrar en la cuenta. El motivo también forma parte de la descripción accesible del diálogo.
Dorados de los controles	Los scrollbars, el progreso y el volumen usaban un color plano o el aspecto nativo del navegador, ajeno al metal del logotipo.	Los desplazamientos y controles de rango comparten los tonos exactos de sombra, oro y brillo de la marca. El carril recorrido, el pulgar, el foco y el estado hover mantienen la misma identidad en Chromium, Safari y Firefox.
Jerarquía del menú	«Géneros» aparecía al mismo nivel que «Taller de letras» aunque forma parte de sus contenidos didácticos.	«Géneros» se retira por completo de la cabecera y se ofrece dentro de la página «Taller de letras», en el bloque «Fichas de género». La sección conserva sus rutas y su navegación interna.
Primera fila de las tablas	En anchuras intermedias, el encabezado pegajoso se desplazaba dentro del contenedor horizontal y tapaba parcialmente la portada, el título y las etiquetas de la primera canción.	El encabezado queda en el flujo normal mientras la tabla necesita desplazamiento horizontal y solo se vuelve pegajoso en pantallas anchas, donde no existe ese conflicto. La primera fila conserva siempre su altura completa.
Álbumes y canciones	En la página de un estilo, los álbumes no tenían encabezado propio y sus tarjetas usaban prácticamente las mismas proporciones que las canciones. «Álbum» quedaba reducido a metadato secundario.	Los lanzamientos forman una sección «Álbumes y publicaciones», muestran su tipo antes del título y usan la misma anchura mínima y los mismos saltos de retícula que las canciones. Sus portadas cuadradas ocupan todo el ancho de la tarjeta.
Catálogo completo de música	La portada de Música fragmentaba los álbumes por bloques de estilo y el filtro por etiqueta solo afectaba a las canciones. Tampoco existía un acceso propio a todo el cancionero.	El aside ofrece «Todo el catálogo», «Todos los álbumes» y «Todas las canciones». /musica?vista=canciones abre directamente las 11 canciones y oculta los álbumes; la vista elegida se conserva al filtrar por estilo o etiqueta. La búsqueda contempla títulos, discos, intérpretes, años y etiquetas.
Directorio de intérpretes	La página quedaba fuera del contenedor general, estiraba una única ficha a todo el ancho y reducía los retratos a 80 píxeles. Si faltaba una imagen, desaparecía por completo la dimensión visual.	El directorio es una galería editorial contenida, con retratos verticales dominantes, jerarquía clara de tipo, nombre y participación, y un monograma de marca cuando falta la foto. La ficha individual usa el mismo tratamiento y ya no rompe su retícula sin imagen.
Cabecera de Música	El enlace a intérpretes aparecía aislado antes del título.	Se integra en la introducción de Música, junto al contenido al que pertenece.
Secciones multimedia	El blog solo admitía un cuerpo Markdown y la inspiración de una canción solo podía contener párrafos.	Ambos contenidos se construyen ahora con bloques ordenables de texto, código, vídeo, imagen o sonido. Cada bloque admite título; código añade lenguaje, imagen añade texto alternativo, vídeo admite YouTube o archivo directo con subtítulos WebVTT y los medios admiten pie. Los textos anteriores se migran automáticamente al primer bloque.
Idiomas en Música	El catálogo permitía acotar por estilo y etiqueta, pero no por el idioma de la interpretación.	El aside incorpora Español, Portugués, Inglés, Francés, Italiano, Armenio, Búlgaro, Latín e Irlandés con sus recuentos. El filtro afecta a canciones y lanzamientos, admite combinaciones con vista, estilo y etiqueta, y agrupa variantes regionales como pt-BR bajo Portugués.
Desplazamiento del aside	La barra formaba una franja azul continua pegada a cifras y opciones; la nube de etiquetas mantenía el lateral más alto que el espacio disponible.	El lateral conserva un canal discreto para ventanas bajas y, al trasladar las etiquetas al desplegable del buscador, deja de desbordar a 1000 × 800. En móvil recupera su flujo natural sin scrollbar interno.
Páginas de error	La reserva usada en los fallos tempranos del servidor había sustituido las páginas musicales de 404 y 500 por una composición genérica sin ilustración ni audio.	Se recuperan las láminas originales de 404 y 500 y su composición dentro del sitio. Ambas ofrecen «Poner música» sin precargar el MP3. El HTML de emergencia también elige la ilustración y el tema según el código, por lo que un fallo anterior al montaje de Svelte conserva la misma experiencia.
Lectura del blog	El título quedaba encerrado en una columna estrecha, el resumen no formaba una cabecera reconocible y la portada genérica de las tarjetas se ampliaba hasta ocupar casi toda la primera pantalla. El cuerpo mantenía esa alineación lateral y una medida pobre para lectura larga.	El detalle incorpora una cabecera de publicación con metadatos, monograma, título fluido de 52–84 px y entradilla; el cuerpo usa una capitular dorada, medida de lectura controlada, titulares con filetes y separación propia para citas, etiquetas, medios y navegación entre artículos. La imagen de reserva sigue completando las tarjetas del índice, pero nunca se presenta como portada del artículo.
Alineación de las migas	En ventanas estrechas el breadcrumb podía encogerse alrededor de su texto y quedar centrado, rompiendo el eje izquierdo de la cabecera.	La ruta ocupa todo el ancho disponible, mantiene su contenido al inicio y comparte exactamente los 16 px de margen izquierdo del logotipo a 336 px.
Navegación entre artículos	Durante la lectura solo existían los enlaces anterior y siguiente al final de la página, por lo que no se veía qué más había publicado ni era posible cambiar de entrada sin terminar el artículo.	El detalle usa una retícula de blog desde la cabecera: artículo a la izquierda y sidebar «Más en el cuaderno» a la derecha, con todas las entradas, fechas, numeración, estado activo y acceso al archivo completo. El lateral permanece visible durante la lectura y se convierte en un archivo compacto al final del cuerpo en pantallas estrechas.

Comprobación

• Pruebas unitarias y de componentes: 421 aprobadas, 25 omitidas por las condiciones de sus entornos.
• Regresión de la web pública: 200 pruebas de navegador aprobadas. Incluye catálogo, carrito, acceso, formularios, reproducción, taller y comportamiento visual.
• Tras la última corrección de Letristas se repitieron las pruebas del taller y las nuevas pruebas de esta revisión: 36 aprobadas.
• La plantilla editorial del blog se comprobó en tema oscuro y claro, escritorio y móvil; sus 16 pruebas de navegador pasaron después de la refactorización.
• Compilación de producción correcta. Comprobación de Svelte y TypeScript sin errores ni avisos; también se comprobaron las aplicaciones que comparten componentes. Formato y ESLint correctos.
• Inspección de 16 páginas en escritorio y móvil, con 64 destinos internos comprobados. No se detectaron errores de JavaScript, desbordamiento horizontal, imágenes cargadas rotas ni respuestas de error en esos destinos.
• Capturas guardadas en docs/assets/revision-web-publica/. El detalle de rutas y estados HTTP está en comprobacion.json dentro de esa carpeta.

Las pruebas nuevas están en e2e/revision-publica.e2e.ts, src/lib/player/player.svelte.spec.ts, src/lib/catalogo/lanzamientos.spec.ts y src/lib/catalogo/recomendaciones.spec.ts.

Alcance y límites

La revisión y la compilación se han realizado en local. La vista pública revisada está disponible en http://127.0.0.1:4180/.

No se ha desplegado en producción ni se han modificado sus contenidos. Las pruebas de pérdida de conexión y verificación de códigos interceptan las peticiones. Se excluyeron de la regresión dos casos que podrían enviar correos; no se han realizado pagos reales ni se ha validado la entrega externa de correo. Los recorridos de usuario autenticado y las integraciones externas no quedan certificados por esta revisión.

Los géneros sin ficha publicada y los datos de intérpretes todavía incompletos siguen siendo tareas editoriales. No se han inventado fichas ni créditos para rellenarlos.