Configuración visual y estilos

Propósito de la personalización

Anjana Data ofrece amplias posibilidades de configuración funcional —como la definición de roles, permisos, metamodelos, workflows o plantillas— que permiten adaptar la plataforma a los procesos y la estructura organizativa de cada cliente.
Además de esta capa funcional, la plataforma permite una personalización visual que proporciona coherencia estética con la identidad corporativa de cada organización.

Esta guía se centra en esa vertiente visual y estética de la personalización. Aquí se describe cómo adaptar los elementos gráficos de la interfaz de Anjana Data, incluyendo iconografía, logotipos, hojas de estilo (CSS) y ficheros de traducción, para ofrecer una experiencia más alineada con la imagen de marca de cada organización.

El objetivo es facilitar que cada implementación de Anjana Data mantenga su propia identidad visual, sin alterar la configuración funcional ni el comportamiento interno de la plataforma.

Ámbitos de personalización visual en Anjana Data Platform

La personalización visual de Anjana Data Platform permite modificar los elementos gráficos y de presentación que definen el aspecto de la interfaz, respetando la estructura técnica y funcional del producto.
Los principales ámbitos de esta personalización son:

• Iconografía y logotipos
  Permiten adaptar los iconos utilizados en la plataforma y sustituir el logo predeterminado de Anjana Data por el de la propia organización.
  Los iconos se gestionan en formato SVG dentro de carpetas específicas del almacenamiento S3/MinIO, según su propósito (atributos, subtipos, idiomas, etc.).

• Estilos visuales (CSS personalizado)
  A través del fichero custom-css.css, es posible modificar aspectos del diseño como colores, tipografías o fondos. Esta personalización debe realizarse siguiendo las recomendaciones técnicas para garantizar la compatibilidad y el correcto funcionamiento de la interfaz.

• Traducciones e internacionalización (i18n)
  Anjana Data Platform admite entornos multilingües. Las traducciones se gestionan mediante ficheros json generados desde Portuno y almacenados en el bucket i18n. Esto permite adaptar la interfaz a los idiomas de trabajo de cada organización.

En conjunto, estos elementos permiten reflejar la identidad visual y lingüística de la organización en Anjana Data, manteniendo una experiencia de usuario homogénea, profesional y alineada con la marca

Estructura técnica de almacenamiento de los elementos visuales

Anjana Data Platform utiliza un sistema de almacenamiento de ficheros en servidores cloud compatibles con Amazon S3/MinIO. Este entorno actúa como repositorio de datos no estructurados —como imágenes, vídeos, backups o configuraciones— necesarios tanto para el funcionamiento interno como para la personalización visual de la plataforma.

Para garantizar un funcionamiento correcto y organizado, Anjana emplea distintos buckets con finalidades específicas:

• imports → Almacena los ficheros Excel utilizados en la importación masiva de objetos.

• dsa → Guarda los contratos de los DSA y cualquier fichero adjunto a entidades o relaciones.

• workflows → Contiene los ficheros XML con la configuración de los workflows que se ejecutan en Anjana (los nombres de carpeta deben tener más de tres caracteres).

• textarea → Almacena las imágenes que se suben en atributos del tipo ENRICHED_TEXT_AREA.

• cdn → Incluye los recursos visuales y de configuración de la aplicación, como iconos, ficheros de traducción o estilos personalizados. Este contenido debe precargarse desde el repositorio releases.anjanadata.org (releasesraw/com/anjana/cdn bajo la versión correspondiente).

• i18n → Guarda los ficheros de traducción generados desde Portuno para habilitar el multiidioma en Anjana (por defecto, es-ES.json y en-US.json).

Dentro de cdn/ se organiza la personalización de iconografía y estilos según la estructura descrita en este documento:

• /images/attribute-icons → Iconos propios del core de la aplicación (no personalizables).

• /images/subtype-icons → Iconos de subtipos personalizables para entidades y relaciones.

• /brand → Logo de la organización para cabecera e indicador de espera.

• custom-css.css → Fichero de estilos personalizados para adaptar el aspecto visual de la plataforma.

Detalle del bucket cdn/ y contenido personalizable

El bucket cdn/, ubicado en el entorno de almacenamiento de MinIO o S3, reúne todos los elementos personalizables que definen la apariencia visual de la plataforma Anjana Data.
Su propósito es permitir que cada organización adapte aspectos como iconos, logotipos, traducciones y estilos visuales, de modo que la interfaz refleje su identidad corporativa.

Estos elementos se encuentran organizados en subcarpetas según su finalidad, que se detallan a continuación.

Carpeta i18n

Esta carpeta contiene los ficheros de traducción utilizados por la plataforma para soportar múltiples idiomas.

Las traducciones se generan y actualizan desde el Portal de Configuración, utilizando el botón Actions > Upload translations files disponible en la cabecera. Este proceso recupera la información almacenada en base de datos y genera automáticamente los ficheros correspondientes, que luego se suben al almacenamiento MinIO/S3.

En conjunto, el contenido del bucket cdn/ constituye la base visual de la personalización en Anjana Data.
Mediante la correcta configuración de sus carpetas y ficheros, es posible mantener una identidad visual coherente y adaptada a la marca de cada cliente, sin comprometer la estabilidad ni el funcionamiento de la plataforma.

Carpeta images

Dentro de cdn/, la carpeta images/ agrupa las imágenes e iconos utilizados en la interfaz de usuario. A su vez, se organiza en varias subcarpetas, cada una con un propósito concreto:

Carpeta attribute-icons

Esta carpeta situada en cdn/images contiene los iconos asociados a atributos de tipo SELECT_IMG, MULTI_SELECT_IMG, SELECT_IMG_TXT y MULTI_SELECT_IMG_TXT.
Estos iconos pueden personalizarse para mejorar la identificación visual de valores en la aplicación.

Carpeta brand

Esta carpeta situada en cdn/images permite personalizar la imagen corporativa de la plataforma.
En ella puede subirse el logo de la organización, que se mostrará tanto en la cabecera principal como en el indicador de espera durante los procesos de carga.

Si no se desea incluir un logotipo propio, la carpeta debe permanecer vacía, en cuyo caso se aplicará el diseño por defecto de Anjana Data Platform.

Carpeta subtype-icons

Esta carpeta situada en cdn/images permite incluye los iconos personalizables de subtipos de entidades y relaciones que aparecen en el Portal de Datos.
Gracias a esta carpeta, cada organización puede asignar iconos específicos a los diferentes tipos de objetos, mejorando la claridad y la usabilidad de la interfaz.
Los requisitos técnicos y la convención de nombres se detallan igualmente en el apartado Iconos personalizados de este documento.

Iconografía

Anjana Data utiliza un conjunto de iconos que contribuyen a la usabilidad, coherencia visual y personalización de la plataforma.
Los iconos se clasifican en dos grandes grupos: iconos por defecto, que forman parte del núcleo del producto, y iconos personalizables, que permiten adaptar la apariencia de la plataforma a la identidad visual de cada organización.

Iconos por defecto

Los iconos por defecto están incluidos de manera nativa en Anjana Data Platform y no pueden modificarse por el usuario.
Representan módulos de la plataforma, acciones comunes y estados del sistema, y se acompañan de tooltips descriptivos que facilitan la comprensión de su función, mejorando así la experiencia de usuario.

Iconos de banderas para los idiomas

El sistema incluye un conjunto predefinido de banderas que representan los idiomas disponibles en la plataforma (incluyendo las lenguas cooficiales de España).
Para configurar correctamente los idiomas, debe utilizarse la tabla de correspondencias de códigos i18n incluida en el anexo de este documento.

Iconos de estado

Anjana Data emplea iconos específicos para representar los estados de los objetos y flujos de trabajo, que se incluyen por defecto en la aplicación.

Los estados actualmente soportados son:

• Aprobado

• Deprecado

• Deshabilitado

• Borrador

• Expirado

• Importado

• Pendiente

• Rechazado

• En espera.

Iconos personalizables

Además de los iconos por defecto, Anjana Data Platform permite personalizar determinados elementos gráficos para adaptar la apariencia de la plataforma.
Estas personalizaciones se gestionan en el bucket cdn/images/, dentro de las subcarpetas específicas que se describen a continuación.

Iconos para atributos con imagen (attribute-icons/)

Esta carpeta contiene los iconos utilizados en los atributos configurados con tipos de dato:
SELECT_IMG, MULTI_SELECT_IMG, SELECT_IMG_TXT y MULTI_SELECT_IMG_TXT.

Requisitos técnicos para atributos con imagen:

Para que los iconos se vean correctamente es necesario que cumplan los siguientes requisitos:

• Únicamente en formato: SVG

• Tamaño máximo recomendado: 5KB

• Tamaño máximo recomendado: 20px * 20px

• Aspect Ratio necesario: 1:1

• El nombre del archivo debe seguir la siguiente estructura (respetando mayúsculas y minúsculas): <nombreAtributo>_<valor>.svg

Logo corporativo (brand/)

La carpeta brand/ permite incluir el logo de la organización, que se mostrará tanto en la cabecera de la plataforma como en el indicador de espera durante la carga.
Si no se desea incluir un logotipo, esta carpeta puede dejarse vacía.

Características que deben cumplir el logo corporativo de cliente para la cabecera

Para que el logo se vea correctamente es necesario que los iconos cumplan los siguientes requisitos:

• Únicamente en formato: SVG

• Tamaño máximo recomendado del archivo: 5KB

• Tamaño máximo recomendado: 80px * 25px

• Aspect Ratio necesario: 3.2:1

• El nombre del archivo debe ser: logo.svg

Iconos de subtipo (subtype-icons/)

Anjana Data permite personalizar los iconos asociados a los subtipos de objetos en el Portal de Datos, mejorando la identificación visual de entidades y relaciones.

Características que deben cumplir los iconos de subtipo

Para que los iconos se vean correctamente en todas las pantallas de la aplicación es necesario que los iconos cumplan los siguientes requisitos:

• Únicamente en formato: SVG

• Tamaño máximo recomendado: 5KB

• Tamaño máximo recomendado: 20px * 20px

• Aspect Ratio necesario: 1:1

• El nombre del fichero subido a Minio debe ser igual que el subtipo de objeto en minúsculas. Por ejemplo: para el subtipo de entidad DATASET el icono debe llamarse dataset.svg

Personalización de estilos (CSS)

Anjana Data permite personalizar los estilos visuales de la interfaz mediante la inclusión de un fichero CSS adicional.
Esta funcionalidad posibilita adaptar colores, fuentes, tamaños o fondos a la identidad visual de la organización, manteniendo al mismo tiempo la estructura base de la plataforma.

Fichero de estilos personalizado

Para aplicar una personalización de estilos, debe crearse un fichero denominado custom-css.css y almacenarlo en la raíz del bucket cdn/ del entorno MinIO/S3.
Este fichero sobrescribirá o complementará los estilos predefinidos de la plataforma en el momento de la carga de la interfaz.

Requisitos técnicos del fichero de estilos:

• El fichero debe llamarse exactamente custom-css.css.

• Debe ubicarse en la raíz de cdn/, no dentro de subcarpetas.

• Se recomienda emplear comentarios dentro del CSS para documentar los cambios realizados.

• En los estilos modificados se debe utilizar la regla !important para garantizar que los cambios prevalezcan sobre las definiciones originales de la aplicación.

Buenas prácticas de personalización

• Limitar los cambios a elementos de estilo cosmético (colores, fuentes, iconos o tamaños), evitando alterar componentes estructurales o de interacción.

• Comprobar los resultados en diferentes módulos y resoluciones de pantalla antes de aplicar los cambios en producción.

• Mantener un registro o control de versiones del fichero custom-css.css para facilitar la trazabilidad y recuperación ante incidencias.

• Coordinar las modificaciones con el equipo de diseño o producto para asegurar coherencia con la identidad visual corporativa.

Ejemplo de personalización

A continuación se muestra un ejemplo de cómo modificar el color de fondo de la pantalla de inicio de sesión utilizando el fichero custom-css.css:

El fondo de la pantalla de inicio de sesión mostrará el color corporativo definido en el fichero personalizado.

ANEXO

Este anexo detalla las banderas e identificadores de idioma incluidos en Anjana Data Platform, así como su correspondencia con la configuración del Portal de Configuración.
Cada bandera está asociada a un código i18n que se utiliza en la tabla Languages y en la columna language de la tabla Translations. Para información ampliada sobre la configuración de idiomas y traducciones, consulta la Guía de configuración funcional de Anjana Data.