Subdirección de las Tecnologías de la Información y Comunicaciones

Área de Gobernanza y Calidad

Versión


Normativa front sección Theming Formas Vigente

Versión: 1.0.1
Estado: ACTIVO
Entrada en vigor desde:  
Obligado cumplimiento desde:  Sept-2023



Normativa front sección Theming Formas PRE-RELEASE

Versión: 1.0.0
Estado: RELEASE
Entrada en vigor desde:  
Obligado cumplimiento desde: -


Tabla de Contenido


Cumplimiento Normativo


Las normas expuestas son de obligado cumplimiento. La STIC podrá estudiar los casos excepcionales los cuales serán gestionados a través de los responsables del proyecto correspondiente y autorizados por el Área de Gobernanza de la STIC. Asimismo cualquier aspecto no recogido en estas normas deberá regirse en primera instancia por las guías técnicas correspondientes al esquema nacional de seguridad y esquema nacional de interoperabilidad según correspondencia y en su defecto a los marcos normativos y de desarrollo software establecidos por la Junta de Andalucía, debiendo ser puesto de manifiesto ante la STIC.

La STIC se reserva el derecho a la modificación de la norma sin previo aviso, tras lo cual, notificará del cambio a los actores implicados para su adopción inmediata según la planificación de cada proyecto.

En el caso de que algún actor considere conveniente y/o necesario el incumplimiento de alguna de las normas y/o recomendaciones, deberá aportar previamente la correspondiente justificación fehaciente documentada de la solución alternativa propuesta, así como toda aquella documentación que le sea requerida por la STIC para proceder a su validación técnica.

Contacto Arquitectura: l-arquitectura.stic@juntadeandalucia.es

Histórico de cambios


Los cambios en la normativa vendrán acompañados de un registro de las modificaciones. De este modo se podrá realizar un seguimiento y consultar su evolución. Ordenándose de mas recientes a menos recientes, prestando especial cuidado a las cabeceras de la tablas dónde se indican las fechas de entrada en vigor y versión.

VersiónPre-release AdopciónActivaRetiroAlcance
v01r00

 




  • Versión inicial del documento
v01r01




  • Deprecadas las partes en las que se redefinen variables

1. Definición

Alcance

Esta definición en ningún momento le indica que colores utilizar o cómo definir la identidad corporativa de su solución para la interfaz de usuario, sin embargo sí que define una serie de pautas mínimas a cumplir encaminadas a conseguir interfaces de usuario que puedan llegar a proporcionar experiencias de usuario ordenadas y homogéneas.

De cara a conseguir una experiencia de usuario homogénea y mejorar la eficacia de las SSUI, la interfaz de usuario debe seguir una serie de pautas claras al respecto de cómo mostrar la información.

Para tal fin en este documento se definen pautas para todas la SSUI reutilizables, que indican que formas utilizar y cómo usarlas para expresar jerarquía en la información mostradas como herramienta para centrar la atención del usuario final en la información relevante, identificar componentes y comunicar el estado de los mismos, y dar expresión a la marca global de nuestro producto o aplicación.

La forma puede usarse para comunicar muchas cosas sobre un componente, y puede ser un poderoso elemento para crear una experiencia de usuario guiada por la información.

Todos los componentes tienen una forma, pero es muy interesante ver el modo en que esta puede sugerir interacción y distinguir elementos visualmente dentro de interfaz. Para esto se incluyen en el sistema de diseño los siguientes principios:

  • Forma del componente: Diferentes formas que, dentro de una lógica visual, se pueden dar a los distintos componentes
  • Énfasis: Combinación de colores y posición de los componentes en la interfaz para hacer que unos elementos se distinguen sobre otros.
  • Jerarquía: Modo de diferenciar componentes con similares o diferentes características dentro de la interfaz a través de su posición y superficies.
  • Estados: Las formas han de ser consistentes a través de los mismos estados del componente, de modo que esa forma específica significa siempre lo mismo cada vez que aparezca en la interfaz de usuario.
  • Transformación: Las formas del componente pueden cambiar en respuesta a estados o contenidos del mismo (Morphing), pero dicha transformación siempre debe ser consistente tanto en el elemento en la que se realiza como con relación a la interfaz de usuario.
  • Categorías: Agrupación por tamaño de componentes en categorías, mediante las cuales modificar varios componentes a la vez cambiando los valores de categoría.



2. Conceptos clave

Énfasis

La aplicación de las formas para marcar énfasis debe ser coherente en toda la aplicación. La utilización de formas claramente distinguibles junto con combinaciones de colores acentúan el énfasis en las partes de su SSUI que desee.

Los aspectos normativos regularizados inciden en aspectos muy básicos del funcionamiento, gestión de los valores entre las esquinas de los bordes y el tamaño relativo. Estos aspectos transversales son lo que se normativamente se han de articular consecuentemente para denotar jerarquía y estado en base a las formas.



3. Aplicación de las formas

El mecanismo de aplicación de las formas se encuentra provisto por la definición de un conjunto de variables fijo (theming) que tendrán los valores que su diseño del SSUI haya contemplado y por otro lado la exposición por parte de su SSUI de un conjunto de variables que pueden ser sobreescritas para hacer su componente componente customizable externamente.


Para definir los valores fijos de su theme, se definirán temas desde el nivel del ámbito de aplicación hacia afuera, mientras que la definición de variables customizables se efectúa en el ámbito del componente de su SSUI, y se exponen desde dicho ámbito hacia el exterior:


Loading...


A continuación se listan el conjunto de pautas y reglas a tener en cuenta para integrar su SSUI en el mecanismo de theming.

Tenga en cuenta...

Los ítems marcados con * son obligatorios, por lo tanto su definición del theming debe contemplar valores para dicha implementación obligatoriamente.


La nomenclatura general de las variables en caso de customización será la siguiente:

--<área_de_negocio>-<app>-theme-shape-<categoria-forma>


Recordando que <área_de_negocio> se sustituirá por las siguientes letras dependiendo del ámbito de negocio en el que se encuentre:

  • Servicios Horizontales - sshh
  • Asistencial - asis
  • Recursos Humanos - rrhh
  • Eco-financiero - ecofin
  • STIC - stic


Y qué <categoria-forma> se sustituirá por:

  • Pequeña - small
  • Mediana - medium
  • Grande - large


--theme-shape-<small|medium|large>*

Pautas

Pauta

Variable

Scope de aplicación

Cuando se utiliza

Restricciones

Verificaciones

P1

--theme-shape-<small|medium|large>

Theming

Cuando quiere modificar la curvatura por defecto de 4px en todos los bordes de su SSUI

Se han de utilizar siempre valores absolutos, nunca porcentuales o dependientes del tamaño del viewport disponible.

Storybook

Reglas de asignación de valor

P1.R1

Ámbitos

Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación.

P1.R2

Fallback

Cada ámbito puede definir un valor concreto para la variable del tema, siendo el valor de fallback en dicho ámbito el de la variable en el ámbito inmediatamente superior


Contenido deprecado

El siguiente contenido (Reglas de nomenclatura en la extensión de variables) está marcado como deprecado y no deberá usarse (no se permite la redefinición de variables).

Reglas de nomenclatura en la extensión de variables 

P1.R3

Customización

Se permite la redefinición de este valor en el theming en los ámbitos de Negocio y Aplicación, siguiendo la nomenclatura

--<área_de_negocio>-<app>-theme-shape-<small|medium|large>
  • Sin etiquetas