Diagram Design: explicaciones visuales con evidencia
Un laboratorio didáctico para Diagram Design: hallazgos junto al archivo renderizado
Propón una interfaz local que explique orden de pintado y cobertura sin presentar como entregada una herramienta todavía no implementada.
Qué aprenderás
- Haz visible el modelo del verificador
- Separa análisis estático y observación del navegador
- Añade interacción donde explique una relación
Antes de empezar
- Conceptos básicos de HTML y SVG
- Distinguir una relación del sistema de su disposición visual
Elige una representación útil, explica simplificaciones e interpreta hallazgos dentro de su alcance real.
Conclusiones clave
- Expón qué reconoce el verificador, no solo si aprueba.
- Usa diferencias con el renderizado para explicar límites.
- Una interfaz de vista previa necesita diseño de ejecución y accesibilidad propio.
Haz visible el modelo del verificador
Una extensión útil mostraría juntos marcado SVG sintético, rectángulos reconocidos y una vista del navegador. Seleccionar una máscara reportada podría resaltar posición en la fuente, dimensiones y nodo posterior. El lector entendería por qué el orden cambia el resultado sin deducir toda la geometría desde una línea de error.
Empieza con parejas de esta revisión: nodo posterior o anterior, solapamiento de una o dos unidades y anchura 200 o 201. Pide una predicción antes de revelar el resultado. Es una interfaz educativa propuesta, no una orden disponible de Diagram Design ni una mejora de aprendizaje ya medida.
Separa análisis estático y observación del navegador
La interfaz debería indicar cuándo un rectángulo no se reconoció por orden de atributos o comillas. También distinguiría hallazgos de coordenadas originales de una vista afectada por transformaciones o relleno. El desacuerdo es evidencia didáctica útil, no algo que ocultar para que el verificador parezca completo.
Usa solo casos sintéticos al principio. Renderizar HTML arbitrario introduce una nueva frontera de ejecución; una implementación futura necesita aislamiento y política de recursos antes de aceptar archivos reales. Un inspector que cargue silenciosamente scripts del usuario o fuentes remotas cambiaría sustancialmente el perfil de riesgo.
Añade interacción donde explique una relación
Una interfaz bidimensional operable con teclado puede explicar directamente solapamiento y orden de pintado. Three.js añadiría cámara y renderizado sin mejorar automáticamente esta lección. Si otra idea trata estructuras realmente espaciales, define primero la tarea educativa y compárala con una representación sencilla antes de elegir un motor 3D.
El siguiente entregable podría ser un explorador de casos versionado con explicación textual accesible de cada resultado, seguido por tareas de predicción de lectores. Esta serie entrega ilustraciones estáticas originales y un experimento reproducible solamente. No se implementó aplicación interactiva, sandbox de navegador, reparación automática ni experimento de aprendizaje.
Pasos de implementación
- 1
Elige parejas sintéticas con resultados distintos.
- 2
Muestra geometría reconocida y orden de fuente.
- 3
Diseña aislamiento antes de aceptar archivos arbitrarios.
- 4
Comprueba predicciones del lector antes de añadir complejidad gráfica.
Ejemplo para copiar
{
"propuesta": "laboratorio del verificador geométrico",
"estado": "no implementado",
"aceptarHtmlArbitrario": false,
"ejecutarScriptsImportados": false,
"reparaciónAutomática": false,
"tareaEducativa": "predecir hallazgos y explicar límites de cobertura"
}Preguntas frecuentes
¿El laboratorio ya está disponible?
No. Es una propuesta editorial. Se entregan diagramas estáticos de los capítulos y un experimento reproducible de dieciséis casos.
¿Por qué no empezar con Three.js?
Orden de pintado y solapamiento rectangular se explican directamente en dos dimensiones. La interfaz 3D debe responder a una necesidad educativa demostrada.
Fuentes
- scripts/verify-geometry.pyFuente verificada 2026-09-08
- docs/adr/0005-label-geometry-is-verified.mdFuente verificada 2026-09-08
- docs/adr/0001-static-by-default-single-pinned-controller.mdFuente verificada 2026-09-08