Gráficos publicables sin pasar por diseño
El problema
Un periodista deportivo que quiere publicar la formación de un equipo no puede hacerlo solo. Necesita un diseñador y software de diseño especializado. Eso significa esperar, coordinar, y que un gráfico simple compita por la agenda de otra persona.
El problema no era la calidad del resultado — los diseñadores hacen bien su trabajo. Era que cada gráfico requería a alguien más.
Qué construí
Una herramienta web de intranet donde periodistas y editores arman el gráfico ellos mismos y lo exportan listo para publicar. El primer elemento es un pizarrón táctico de fútbol: campo configurable con capas de jugadores, flechas y zonas, cuatro estados de orientación y serialización del tablero.
Una fuente, todas las salidas
Un único IR
SvgScene
Se construye desde el estado del tablero. La vista de React y los exporters consumen exactamente el mismo objeto: no hay un "SVG para la vista" distinto del "SVG para exportar".
Vectorial
SVG
Con transparencia, reutilizable en cualquier escala.
Web
HTML embebible
Listo para pegar en el CMS del medio.
Imagen
PNG
Alta resolución con transparencia, para impresión o digital.
Vista ilustrativa · datos de ejemplo
Capas
- ✓Cancha
- ✓Jugadores
- ✓Flechas
- ✓Zonas
- ✓Nombres
Orientación
- ✓Horizontal
Exportar
Las decisiones que costaron
Un único intermedio para la vista y para los exports. Con tres salidas, la consistencia visual podría haber quedado en manos de la disciplina: acordarse de tocar los cuatro lugares cada vez. La decisión fue que exista un solo objeto intermedio y que tanto la vista como los tres exporters lo consuman.
La diferencia es de naturaleza, no de esfuerzo: la consistencia deja de depender de que alguien se acuerde y queda garantizada por construcción.
Serializador propio en lugar del del navegador. Serializar el nodo React montado arrastra atributos que no son del gráfico — marcas del framework, espacios de nombres duplicados — y ata el export al DOM.
Escribir un serializador propio cuesta trabajo y compra dos cosas: el resultado es determinístico, y se puede testear sin navegador, en milisegundos.
Convertir una regla en algo imposible de violar. El número del jugador tiene que ser texto SVG nativo: si se usara un elemento HTML incrustado, el export se rompe en algunos destinos.
Eso podría haber sido una convención escrita en un documento. En cambio, el tipo del intermedio directamente no admite ese elemento — no hay forma de escribir el error. Una regla que depende de que la gente la recuerde es una regla que en algún momento se rompe.
Un anillo de tests con navegador, y sólo uno. La transparencia real de un PNG no se puede verificar con simulaciones: la función que lo genera no existe fuera de un navegador. Hacen falta pruebas con un navegador de verdad.
Pero esas pruebas son lentas y pesadas. La decisión fue aislarlas en su propio anillo: el ciclo diario de desarrollo corre sin navegador y termina en segundos, y el anillo caro se ejecuta aparte. Como es una herramienta de intranet, además tenía que funcionar sin conexión.
Resultado
El periodista arma el gráfico y lo exporta. El proyecto lleva más de 700 commits y sigue en desarrollo activo: la última incorporación es el camino de impresión, con perfil de color para papel de diario.