Cómo se construye esto
No te voy a describir una metodología en abstracto. Te voy a enseñar una decisión real, de principio a fin, con sus fechas y sus errores incluidos.
El borde que casi significaba lo contrario
Fíjate en este recuadro:
Ese destello de borde animado que ves en las tarjetas y el logo de este sitio no nació aquí. Nació en otro proyecto mío de gestión, con un nombre de clase muy concreto: attn-live. Y durante un tiempo, se aplicó donde no debía.
Cuando construí el indicador de "conectado" del panel (el interruptor online/offline de la barra lateral), me pareció razonable darle algo de vida visual reutilizando ese borde animado que ya tenía disponible. Quedaba bien. Nadie se paró a pensar qué significaba attn-live como nombre.
En una auditoría posterior (2026-08-13, §07) caí en la cuenta: attn-live significa "esto necesita atención" — un aviso, un recibo atrasado, algo pendiente de resolver. "En línea" es exactamente lo contrario: un estado bueno. Llevarle el mismo borde de alerta era, sin querer, decirle al usuario que algo iba mal justo cuando todo iba bien.
+ class="toggle-online is-online" // el glow/pulse propio de is-online ya comunica "conectado"
// sin tomar prestado el lenguaje visual reservado para atención real
No basta con arreglarlo una vez — alguien (yo mismo, en seis meses) podía volver a cometer el mismo error. Así que el porqué quedó como comentario fijado junto a la propia regla CSS: attn-live es solo para atención real, no decoración. La próxima vez que alguien sienta la tentación de usarlo porque "queda bien", el comentario está justo ahí.
Un script de design-lint (escaneo de texto barato sobre el código fuente, no análisis estático completo) comprueba desde entonces que ningún estado "bueno" cargue el lenguaje visual reservado para alertas. No es una prueba elegante. Es suficiente.
Esa misma técnica — adaptada, en cian, sin el significado de alerta — es la que ves en el logo y en las tarjetas de este sitio. Un accidente de nomenclatura en otro proyecto terminó siendo la firma visual de un portfolio. Así de por medio pasan las cosas cuando documentas de verdad por qué se hizo cada cambio.
Lo que esto dice del método, sin generalizarlo de más
Documentación viva quiere decir esto, en concreto: un comentario que explica por qué una clase no puede reutilizarse, escrito en el momento en que se descubrió el problema, no meses después de memoria. Auditoría fechada quiere decir esto: una revisión con fecha (2026-08-13, §07) que encontró algo que llevaba tiempo sin verse. Y verificación quiere decir esto: un script tonto que impide que el mismo error vuelva a colarse sin que nadie se dé cuenta.
Declaración de uso de IA
Escribo estos proyectos con asistencia de inteligencia artificial, y prefiero contarte cómo se reparte el trabajo en vez de limitarme a declararlo. Yo decido qué se construye y qué se descarta, marco las restricciones que no se negocian — qué datos no se tocan, qué no se publica sin mi visto bueno — y reviso cada cambio antes de aceptarlo. La IA propone código, texto y diseño dentro de esas restricciones, investiga cuando se lo pido, y a veces se equivoca — como cualquier colaborador. La corrección del borde que acabas de leer la encontré yo, revisando; podría haberla encontrado la IA igual, con el mismo criterio.
No lo cuento para presumir de proceso ni para curarme en salud. Lo cuento porque es lo que pasó, y porque un sitio que habla tanto de honestidad técnica no puede quedarse callado en esto.
Si este método te parece razonable, o si ves en él un punto ciego que yo no veo, cuéntamelo: mlandeira72@yahoo.com.