Blog ·
Dos familias de cinco
Cinco páginas necesitaban una ilustración y el estilo de la casa resultó no existir. Un recuento de píxeles lo zanjó, y una cinta naranja perdió ante un cero.
Por Provibr
Cinco páginas de nuestro sitio no tenían ilustración: el índice de documentación, el índice de tutoriales, la página de socios, el índice del blog y la página de contacto. Todo lo demás tenía una. La tarea era dibujar cinco imágenes que parecieran pertenecer al conjunto.
Parecer que pertenecen ¿a qué, exactamente? Esa es la pregunta, y no es una que se pueda responder mirando. Diez imágenes existentes, vistas de una en una en diez páginas distintas a lo largo de varios meses, producen una impresión segura de un estilo de la casa. Esa impresión no vale nada, y tenemos el recuento para demostrarlo.
El estilo no existía
Un script corto recorrió las diez imágenes sobre un lienzo y contó los píxeles oscuros: luminancia igual o inferior a 110, alfa igual o superior a 200, cuantizado a dieciséis niveles para que el suavizado de bordes no produzca mil colores casi idénticos.
El resultado fueron dos grupos de cinco, sin ningún solapamiento.
| Grupo | Color del contorno | Píxeles de negro neutro |
|---|---|---|
| Las cinco ilustraciones de función | un azul marino profundo, dominante, con dos azules al lado | cero |
| Las cinco ilustraciones de comparación | negro neutro y casi negro, con grises | muchos |
Cinco a cinco. No hay mayoría. Si alguien lo hubiera juzgado a ojo, habría elegido el grupo que hubiera mirado más recientemente y habría producido una sexta imagen que encajaría con la mitad del sitio.
Las cinco nuevas siguen al primer grupo, y la razón no es el recuento. Las imágenes de comparación son una subfamilia con su propio componente, su propia proporción y su propio lugar en el producto; son una clase distinta de página haciendo un trabajo distinto. Las ilustraciones nuevas se sitúan junto al primer grupo, así que dibujan como el primer grupo. La medición no tomó la decisión. Hizo posible la decisión, al sustituir una sensación sobre un estilo de la casa por dos hechos sobre dos conjuntos.
Un color que no está en la hoja de estilos es un color inventado
El azul marino que domina el primer grupo no aparece en ninguna parte de nuestra hoja de estilos. Es un color que llegó con esas imágenes y no tiene nombre en el sistema de diseño.
Copiarlo en cinco ficheros nuevos habría sido exactamente lo que esta ronda debía evitar: un valor que existe solo porque alguien muestreó un píxel. Así que las imágenes nuevas usan el token cuyo valor está más cerca de él y que vive en la misma familia que el color de marca. No es idéntico. Es defendible, y se mueve si se mueve el sistema.
El primer borrador tenía además una cinta de lectura naranja en la imagen de documentación, usando el color de acento, porque una cinta es naranja. Un segundo recuento zanjó también aquello: de las diez ilustraciones existentes, a lo largo de 1,79 millones de píxeles opacos, el número de las que tienen algún píxel cálido es cero. No pocas, cero. Un solo elemento naranja habría hecho del dibujo nuevo la única cosa cálida del sitio, que es una decisión que alguien puede querer tomar a propósito algún día y no una decisión que deba tomar una cinta por su cuenta.
El blanco es donde aterriza el ojo
La última propiedad compartida es una que nadie había escrito y que las diez cumplen: cada imagen tiene exactamente un plano blanco, y es adonde va el ojo. El frente de una cámara acorazada, el interior de un escudo, las baldosas alrededor de un concentrador.
Cuatro de los cinco dibujos nuevos lo recogieron de forma natural, porque una hoja de papel, un artículo, una carta y un botón de reproducción son cosas blancas. La imagen de socios no: dos tonos de azul, nada de blanco en ninguna parte.
En la página de socios se veía bien. Estaba obviamente mal en una hoja de contacto, que es una única página generada que pone las quince imágenes una al lado de otra sobre el color de fondo real. Un dibujo en una fila de quince que no tiene plano focal se lee como más plano que el resto, de inmediato, y no se lee como nada cuando se mira solo. El hexágono izquierdo se apoya ahora en el color de superficie.
Si va a hacer un conjunto, mire el conjunto. Las páginas individuales son la superficie de revisión equivocada para una propiedad que solo existe en la comparación.
Una línea dibujada antes que las formas es una línea que no se ve
La primera versión de la imagen de socios tenía una línea de conexión entre los dos hexágonos: un único trazo horizontal, de 433 píxeles de ancho, declarado antes que las dos formas.
El orden del pintor hizo el resto. Los hexágonos taparon el centro, dejando dos muñones asomando por los lados y, como el hexágono derecho tenía una opacidad de relleno algo por debajo de uno, la parte tapada se transparentaba como una franja fantasma que lo cruzaba. Dos defectos de un solo error de orden, y los dos parecen un problema de dibujado y no un problema de fuente.
La conexión es ahora el propio solapamiento, recortado a la intersección de las dos formas, y no hay transparencia parcial en ningún punto del fichero. Ese es un dibujo mejor además de uno que funciona: el área compartida entre dos socios es la idea, y una línea entre ellos era una forma más débil de decirlo.
Dos guiones terminan un comentario XML
Cada uno de estos ficheros lleva comentarios que explican la geometría, y los comentarios de un SVG viajan al navegador. Medido en la primera versión: de 10.160 bytes repartidos en los cinco ficheros, 5789 eran comentario. El cincuenta y siete por ciento de lo que habríamos publicado era una explicación de lo que publicábamos.
La explicación vive ahora en el componente que referencia las imágenes, donde es al menos igual de útil y no llega al navegador de nadie. Ese es un punto general sobre la diferencia entre los comentarios del código fuente y los comentarios de un recurso: unos son gratis y otros son carga útil.
El segundo punto es una regla y no una medición, y es de la clase de reglas que solo se necesitan una vez. Un guion doble termina un comentario XML. Referirse a una propiedad personalizada de CSS por su nombre dentro de un comentario de un SVG termina por tanto el comentario antes de tiempo, en mitad de una frase, y el resto de esa frase pasa a ser marcado. El fichero deja entonces de analizarse, y un SVG que no se analiza no produce un mensaje de error. Produce una respuesta 200 y una imagen vacía.
Los cinco actuales no contienen ningún guion doble dentro de ningún comentario y los cinco se analizan como XML válido. El modo de fallo es real; del incidente concreto no puedo entregar una medición, porque ese estado nunca se llegó a confirmar en el repositorio.
El texto alternativo no es una decisión de diseño
Una ilustración que no dice nada que el título contiguo no diga ya es decoración, y la respuesta de accesibilidad para la decoración es un atributo alt vacío, para que un lector de pantalla no lea «cámara acorazada con llave» junto a un título sobre credenciales que se quedan en el host propio. Ese razonamiento es correcto y lo seguimos durante mucho tiempo.
Tampoco es la imagen completa, porque un rastreador no distingue decoración de contenido. Una auditoría SEO cuenta un alt vacío como un alt ausente, y un informe lleno de atributos alt ausentes es un informe que nadie lee.
Así que cada ilustración lleva ahora una descripción corta del catálogo de traducciones, una descripción por imagen y no por colocación, dado que el mismo dibujo significa lo mismo en dos páginas distintas. La guarda exige un alt no vacío en cada ilustración, lo que significa que esconder una del árbol de accesibilidad no es una opción que alguien pueda tomar en silencio. Una ilustración nueva necesita una descripción en los nueve idiomas antes de poder publicarse.
Desplazamiento cero, y la contraprueba
El ancho y el alto de cada imagen son las dimensiones de su propia caja de vista, y están ahí por exactamente una razón: para que el navegador reserve el espacio antes de que lleguen los bytes. El ancho visible viene de las clases y no tiene nada que ver con esos números.
El desplazamiento acumulado de disposición a lo largo de cuarenta y cinco estados de página midió 0,00000, que es un número que por sí solo no significa nada. Cualquier medición que informa de un cero perfecto tiene que responder a la pregunta de si estaba mirando.
Así que se repitió la misma ejecución con las dimensiones quitadas y un retardo de 1500 milisegundos inyectado delante de las imágenes. Trece de quince estados se desplazaron. Los dos que no lo hicieron están en la celda más corta de una rejilla, donde la imagen no puede cambiar la altura de la fila haga lo que haga, así que su cero es estructural y no accidental. Eso se comprobó uno por uno en lugar de despacharlo, porque dos ceros sin explicar en una contraprueba son justo el sitio donde se escondería un hueco real.
Hay un detalle mecánico más que merece decirse, ya que es fácil equivocarse en el otro sentido: estas imágenes se saltan por completo el optimizador de imágenes del framework. Eso no es pereza. El optimizador rechaza el SVG salvo que se active una bandera específicamente peligrosa, así que pasarlas por él produciría una imagen rota en vez de una más pequeña.
Un hallazgo que no formaba parte de la ronda
Al medir anchos, una clase de utilidad de una página sin relación resultó no hacer absolutamente nada. Fija un ancho máximo que queda anulado por una clase declarada más adelante en la hoja de estilos, así que el valor lleva inerte desde que se escribió.
Nadie se había dado cuenta, porque el elemento se ve razonable con su ancho real. Esa es la manera corriente en que sobrevive el estilo muerto: no está mal en pantalla, simplemente no es lo que hace el trabajo, y la única forma de encontrarlo es medir una propiedad que ya se estaba midiendo por otro motivo.
Lo que dejaríamos por escrito
- Un estilo de la casa que nunca se ha contado puede no existir. Diez imágenes, dos familias, cinco cada una, y toda impresión de mayoría era falsa.
- Una medición hace posible una decisión; no la toma. Ninguno de los dos grupos era mayor; las imágenes nuevas siguen a las ilustraciones de función por la clase de página en la que están.
- Un color muestreado de un píxel es un color inventado. Use el token más cercano y acepte que no es idéntico.
- El cero es una respuesta fuerte. Ningún píxel cálido en 1,79 millones zanja una discusión sobre una cinta naranja más rápido que el gusto.
- Revise un conjunto como conjunto. Las propiedades que solo existen en la comparación son invisibles en una página individual.
- Declare un conector después de las cosas que conecta, o quedará tapado, y la transparencia parcial hará que el error parezca un fallo del motor de dibujado.
- Los comentarios de un recurso son carga útil. Más de la mitad de lo que estuvimos a punto de publicar era explicación.
- Un XML inválido en un SVG es una imagen vacía, no un error. No hay ningún mensaje que buscar.
- Un alt vacío es correcto para una persona y ausente para un rastreador. Elija el compromiso a propósito y hágalo cumplir con una prueba.
- Un cero perfecto necesita una contraprueba. Rompa la cosa a propósito y compruebe que el número se mueve.
Para que quede claro qué es esto: las cinco imágenes están en producción en nueve idiomas con descripciones, los recuentos vienen de una ejecución sobre lienzo con los ficheros reales, y todo se midió contra un servidor de desarrollo y no contra una compilación de producción. No hay tema oscuro contra el que comprobar, lo que se verificó en lugar de suponerse: con el modo oscuro emulado, la captura es byte a byte idéntica a la clara.
Del trabajo de plataforma en Provibr. Un defecto de disposición que produjo cero píxeles de desbordamiento está en una barra más estrecha que su ventana, y lo que nueve idiomas le hacen a un conjunto de controles fijos está en dieciséis mil claves y nueve idiomas.
