“Laboratorio Digital de Blasones”

 Rediseña esta aplicación web HTML/CSS/JavaScript como un “Laboratorio Digital de Blasones”, tomando como referencia la estética, distribución y experiencia visual del archivo proporcionado, pero sustituyendo por completo el contenido dedicado a la construcción de la letra B romana.

OBJETIVO PRINCIPAL

Crear una herramienta interactiva y pedagógica para diseñar, componer, personalizar e interpretar blasones heráldicos. La aplicación debe permitir al usuario elegir un modelo de escudo, arrastrar figuras y accesorios hacia una mesa de trabajo cuadriculada, moverlos, escalarlos, recolorearlos y comprender su significado simbólico.

ESTILO VISUAL

- Mantener una estética editorial, académica y contemporánea, de alto contraste.

- Fondo general oscuro, con detalles en dorado antiguo, cobre, plata, azul heráldico, rojo, verde y púrpura.

- Usar una tipografía serif elegante para títulos y una sans serif legible para controles e interfaz.

- Evitar una apariencia infantil o genérica; el resultado debe parecer un laboratorio de diseño heráldico profesional y didáctico.

- Incluir una cuadrícula tenue y visible en la mesa de trabajo para facilitar alineación, proporción y composición.

- El diseño debe ser completamente responsivo: escritorio, tableta y móvil.

ENCABEZADO

Crear un encabezado con:

- Título: “Laboratorio Digital de Blasones”.

- Subtítulo: “Diseño, composición e interpretación simbólica de emblemas heráldicos”.

- Breve explicación: “Seleccione un modelo de escudo, arrastre figuras heráldicas, ajuste su tamaño, colores y posición, y analice el significado de su composición”.

- Acciones principales: “Nuevo blasón”, “Guardar proyecto”, “Exportar PNG”, “Exportar SVG”, “Restablecer”.

ESTRUCTURA DE LA INTERFAZ

Diseñar la interfaz en tres áreas principales más una paleta inferior:

1. PANEL IZQUIERDO: BIBLIOTECA HERÁLDICA

Ubicar un panel vertical al lado izquierdo de la mesa de trabajo. Debe contener pestañas o secciones plegables.

Secciones:

- Modelos de escudo.

- Particiones del campo.

- Piezas heráldicas.

- Figuras naturales.

- Figuras animales.

- Figuras míticas.

- Objetos y emblemas.

- Ornamentos exteriores.

- Tipografía y divisas.

MODELOS DE ESCUDO

Presentar miniaturas arrastrables de:

- Escudo francés.

- Escudo español.

- Escudo inglés.

- Escudo suizo.

- Escudo italiano.

- Escudo alemán.

- Escudo ovalado.

- Cartela barroca.

- Escudo moderno minimalista.

PARTICIONES DEL CAMPO

Incluir elementos arrastrables o aplicables al escudo:

- Partido.

- Cortado.

- Tronchado.

- Tajado.

- Cuartelado.

- Terciado.

- Chevronado.

- Gironado.

- Freteado.

- Losanjado.

- Ondado.

- Franjas y bandas.

FIGURAS HERÁLDICAS

Incluir miniaturas SVG de buena calidad y estilo coherente:

- León rampante.

- Águila explayada.

- Grifo.

- Dragón.

- Torre.

- Castillo.

- Corona.

- Estrella.

- Sol.

- Luna creciente.

- Cruz latina.

- Cruz de Santiago.

- Flor de lis.

- Llave.

- Libro.

- Espada.

- Laurel.

- Olivo.

- Ancla.

- Rueda dentada.

- Antorcha.

- Pluma.

- Pergamino.

- Montaña.

- Río o banda ondada.

- Árbol.

- Mano.

- Ojo simbólico.

ORNAMENTOS EXTERIORES

Incluir:

- Yelmo.

- Corona mural.

- Corona real genérica.

- Manto.

- Lambrequines.

- Soportes animales.

- Ramas de laurel.

- Ramas de olivo.

- Cinta o filacteria.

- Medallas y condecoraciones.

- Lema institucional.

2. ÁREA CENTRAL: MESA DE TRABAJO CUADRICULADA

Crear una gran mesa de trabajo central donde se compone el blasón.

Características:

- Cuadrícula visible de 20 px o 25 px, con líneas discretas.

- Guías horizontal y vertical centrales.

- Reglas opcionales superior e izquierda.

- Zoom mediante botones “+” y “−”, rueda del mouse y porcentaje visible.

- Herramientas de encaje: activar/desactivar ajuste a cuadrícula.

- Posibilidad de mostrar/ocultar cuadrícula.

- Posibilidad de bloquear y desbloquear capas.

- Función de deshacer y rehacer.

- Botón para centrar el escudo en la mesa.

- Zona de trabajo preparada para SVG vectorial, no rasterizada.

INTERACCIÓN DE OBJETOS

Los modelos de escudo, figuras, piezas y ornamentos deben poder:

- Arrastrarse desde el panel izquierdo hacia la mesa de trabajo.

- Soltarse dentro del escudo o alrededor de él.

- Seleccionarse con clic.

- Moverse libremente.

- Escalarse mediante controladores en las esquinas.

- Rotarse mediante un control superior.

- Duplicarse.

- Eliminarse.

- Enviarse al frente o al fondo.

- Bloquearse para evitar movimientos accidentales.

- Ajustarse automáticamente al centro del escudo.

- Mantener proporciones al escalarse.

- Limitarse visualmente al interior del escudo cuando sean cargas internas.

- Permitir que coronas, yelmos, soportes, lambrequines y cintas se ubiquen fuera del contorno del escudo.

Implementar la composición en SVG. Usar una máscara o clipPath para que las figuras internas queden recortadas dentro del campo del escudo, mientras que los accesorios exteriores no sean recortados.

3. PANEL DERECHO: PROPIEDADES Y CAPAS

Ubicar un panel vertical a la derecha, con pestañas: “Objeto”, “Capas”, “Blasonamiento” e “Interpretación”.

PESTAÑA OBJETO

Cuando se seleccione un elemento, mostrar:

- Nombre del objeto.

- Tipo de elemento: escudo, partición, pieza, figura, ornamento o texto.

- Posición X e Y.

- Ancho y alto.

- Escala porcentual.

- Rotación.

- Opacidad.

- Orden de capa.

- Botones: duplicar, bloquear, desbloquear, traer al frente, enviar al fondo, eliminar.

- Opción de invertir horizontalmente o verticalmente cuando aplique.

PESTAÑA CAPAS

Mostrar una lista ordenada de capas con:

- Icono o miniatura.

- Nombre del elemento.

- Indicador de visibilidad.

- Indicador de bloqueo.

- Posibilidad de reordenar mediante arrastre.

- Posibilidad de seleccionar una capa.

- Posibilidad de ocultar o eliminar una capa.

PESTAÑA BLASONAMIENTO

Generar automáticamente una descripción heráldica textual del diseño conforme el usuario agrega componentes.

Ejemplo de salida:

“En campo de azur, un león rampante de oro, acompañado de tres estrellas de plata; bordura de gules y corona mural al timbre”.

Incluir:

- Área de texto editable.

- Botón “Generar blasonamiento”.

- Botón “Copiar descripción”.

- Botón “Limpiar texto”.

- Advertencias si existen combinaciones cromáticas poco recomendables según la regla de los esmaltes.

PESTAÑA INTERPRETACIÓN

Crear un intérprete de signos y símbolos que analice los elementos presentes en el blasón.

Debe identificar automáticamente:

- Color o esmalte usado.

- Figura o mueble.

- Posición dentro del escudo.

- Tipo de partición.

- Presencia de ornamentos.

- Relación entre figuras.

Debe mostrar, para cada elemento:

- Nombre.

- Descripción visual.

- Significado simbólico tradicional.

- Interpretación contemporánea sugerida.

- Profundidad icónica.

- Nivel de abstracción: icónico, indicial o simbólico.

- Función comunicativa: identidad, poder, protección, memoria, conocimiento, territorio, linaje, espiritualidad, servicio, justicia, autoridad o transformación.

Ejemplo:

“León rampante de oro: representa valor, soberanía, nobleza y vigilancia. En una lectura contemporánea puede comunicar liderazgo institucional, fortaleza académica o capacidad de transformación. Profundidad icónica alta, porque conserva una semejanza reconocible con el animal y moviliza una tradición cultural extensa”.

Otro ejemplo:

“Libro abierto de plata: representa conocimiento, estudio, memoria, enseñanza y transmisión cultural. En un escudo universitario puede reforzar la identidad académica y el compromiso con la formación”.

PANEL INFERIOR: PALETA CROMÁTICA DEL BLASÓN

Ubicar el panel de colores en la parte inferior, horizontal y siempre visible en escritorio. Debe poder colapsarse en pantallas pequeñas.

Incluir los esmaltes heráldicos principales:

- Oro: #D4A853.

- Plata: #E8E6E1.

- Gules: #B22222.

- Azur: #1E5AA8.

- Sinople: #2E8B57.

- Sable: #1B1B1B.

- Púrpura: #6A3D9A.

- Naranja: #D97925.

- Carnación: #F0C7B0.

Además, incluir:

- Selector de color personalizado.

- Campo hexadecimal editable.

- Control de transparencia.

- Muestras de combinaciones armónicas.

- Botón “Aplicar al relleno”.

- Botón “Aplicar al borde”.

- Control de grosor del contorno.

- Selector de acabado: plano, metal, textura suave, pergamino, grabado o esmalte brillante.

REGLA DE LOS ESMALTES

Incorporar un validador visual basado en la regla heráldica tradicional:

- Metales: oro y plata.

- Colores: gules, azur, sinople, sable y púrpura.

- Advertir cuando se coloque color sobre color o metal sobre metal.

- No bloquear la creatividad del usuario; mostrar solo una advertencia explicativa.

- Permitir ignorar la advertencia en diseños contemporáneos, institucionales o experimentales.

HERRAMIENTAS SUPERIORES

Incluir una barra superior sobre la mesa de trabajo con:

- Seleccionar.

- Mano para desplazar la mesa.

- Insertar texto.

- Añadir forma.

- Duplicar.

- Eliminar.

- Deshacer.

- Rehacer.

- Ajustar a cuadrícula.

- Mostrar/ocultar cuadrícula.

- Centrar composición.

- Zoom menos.

- Zoom más.

- Vista al 100%.

- Vista completa.

- Exportar.

MODO DIDÁCTICO

Agregar un interruptor: “Modo didáctico”.

Cuando esté activo:

- Resaltar el nombre de cada componente seleccionado.

- Mostrar líneas guía y etiquetas explicativas.

- Explicar la diferencia entre campo, partición, pieza, mueble, timbre, soporte, lema y ornamento exterior.

- Mostrar una leyenda visual de los esmaltes.

- Indicar advertencias de composición y legibilidad.

- Mostrar una ficha de análisis semiótico del elemento seleccionado.

- Permitir generar una ficha pedagógica imprimible del blasón terminado.

FICHA PEDAGÓGICA

Añadir un botón “Generar ficha de análisis” que produzca una vista imprimible con:

- Título del blasón.

- Imagen final del escudo.

- Blasonamiento.

- Paleta cromática utilizada.

- Lista de figuras y ornamentos.

- Significados simbólicos.

- Interpretación semiótica e icónica.

- Reglas heráldicas aplicadas o transgredidas.

- Fecha de creación.

- Autor o institución.

- Espacio para observaciones.

REQUISITOS TÉCNICOS

- Implementar sin dependencias pesadas; usar HTML, CSS y JavaScript moderno.

- Preferir SVG para escudos, símbolos y composición vectorial.

- Utilizar eventos Pointer Events para arrastre compatible con mouse y pantallas táctiles.

- Crear una arquitectura clara mediante objetos o clases: CanvasHeraldico, ElementoHeraldico, GestorCapas, PaletaEsmaltes, GeneradorBlasonamiento e InterpreteSimbolico.

- Guardar el proyecto en localStorage y permitir exportar/importar JSON.

- Incluir datos de ejemplo para al menos 25 símbolos y su interpretación.

- Incorporar accesibilidad: etiquetas ARIA, navegación por teclado, contraste suficiente, foco visible y descripciones textuales.

- No usar imágenes externas para los elementos principales; generar los escudos y símbolos como SVG editables.

- Evitar textos de relleno. Usar español correcto y terminología heráldica comprensible.

- Mantener el código ordenado, comentado solo cuando sea necesario y separado por secciones: estilos, estructura HTML, datos heráldicos y lógica JavaScript.

RESULTADO ESPERADO

Entregar un único archivo index.html completamente funcional. Debe abrirse directamente en un navegador moderno y ofrecer una experiencia real de edición: seleccionar un escudo, arrastrar figuras, escalarlas, colorearlas, ordenarlas por capas, producir un blasonamiento automático y analizar sus significados simbólicos.