Historial de página
Subdirección de las Tecnologías de la Información y Comunicaciones
Área de Gobernanza y Calidad
| Table Excerpt Include | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Versión
| Table Excerpt Include | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Tabla de Contenido
| Tabla de contenidos | ||||||
|---|---|---|---|---|---|---|
|
Cumplimiento Normativo
| Advertencia |
|---|
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.
| Expandir | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
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.
Los estados comunican al usuario la situación en la que se encuentra cada elemento de la interfaz. Cada estado ha de ser visualmente similar y no modificar completamente al componente, pero debe tener características que los distingan claramente de otros estados y de los componentes que tenga alrededor en la interfaz.
Los estados disponibles para los componentes de nuestra interfaz son los siguientes:
- Enabled: Se comunica que se está ante un componente interactivo.
- Disabled: Se comunica que se está ante un componente que no es interactivo.
- Hover: Se comunica que se ha colocado el cursor sobre un componente interactivo.
- Focus: Se comunica que se ha resaltado un componente usando un método de entrada, como pueden ser teclado o voz.
- Selected: Se comunica que se ha producido una elección del usuario.
- Pressed: Se comunica que se ha realizado una pulsación del usuario.
- Dragged: Se comunica que el usuario presiona y mueve (arrastra) un elemento.
2. Conceptos clave
Overlay
Envoltura semitransparente sobre el elemento que indica su estado, proveyendo una manera sistemática de visualizar los estados del componente usando la opacidad. Puede ser aplicado al componente completo o dentro del propio componente de forma circular.
Overlay en: (1) Listado (2) Chip (3) Radio button
Se ha de incidir en dos puntos básicos dentro de este concepto:
- El estado deshabilitado (disabled) no se incluye dentro del overlay, ya que no se aplica una capa de overlay para mostrarlo, sino que la opacidad se aplica directamente sobre el propio componente marcado con este estilo.
- Todos los demás estados incluyen una capa de overlay que se sitúa entre el contenedor (superficie del propio componente) y el contenido (texto/icono) del componente. Se distinguen los siguientes casos:
- Overlay sobre superficie (On surface): El componente carece de superficie propia y por ello se toma como superficie del propio tema (Surface), aplicando como color de overlay el color de superficie por defecto del tema (por ejemplo, una label). En este punto hay una excepción que se trata del estado selected, ya que el este aplica como color de overlay el color primario en lugar del color de superficie.
- Overlay sobre componente sin relleno (Primary): en este caso el componente si que tiene superficie propia, pero esta carece de entidad y se aplica como color de overlay el color de fondo (normalmente color primario/secundario) del componente (por ejemplo, un botón tipo text/outlined).
- Overlay sobre componente con relleno (On primary): En este último caso el componente si que tiene superficie propia y esta posee entidad, por lo que se toma como color de overlay el color del texto/icono del componente (por ejemplo, un botón tipo text/outlined).
Elevación
La elevación se define como la distancia entre las superficies de dos componentes. Dicha distancia (desde el frente de una superficie de un componente hasta el frente de otro) se mide a lo largo del eje z en píxeles independientes de la densidad (DPs) y se representa (de forma predeterminada) mediante sombras.
Tomando como referencia la documentación de Material Design al respecto, se dispondrá de los valores para trabajar con la elevación indicados en la página principal de la normativa de theming (sección Variables Custom CSS globales - Estados).
3. Aplicación de los estados
El mecanismo de aplicación de los estados 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 sobrescritas 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 el componente, y se exponen desde dicho ámbito hacia el exterior.
Lucidchart lcId b453573f-52ae-4ec0-a0c9-f2895808bd9c rich-viewer true autoUpdate true autofit false name DIagrama Aplicacion Estados - uklq7IM38Wa1 width 912 convertedFrom onprem origParams eyJzaW1wbGVWaWV3ZXIiOiJ0cnVlIiwiYXV0b1VwZGF0ZSI6InRydWUiLCJhdHRhY2htZW50SWQi OiIxMTM2NTE4NjYiLCJ2ZXJzaW9uIjoiMTAifQ== documentToken v2_7000f14be1e5f7d5b09a7e5ca938e45948d161db6346025e0cec1a7435f2e659-a=171816341&c=d1873183-daff-4cd4-a0ef-3f5bcb960f8c&d=76fc4d81-3175-43ac-b611-f05437918285&p= id 76fc4d81-3175-43ac-b611-f05437918285 align Left height 830
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 para los estados será la siguiente:
| |||
La nomenclatura general de las variables en caso de customización será la siguiente:
|
Disabled
--theme-state-disabled-opacity
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P1 | --theme-state-disabled-opacity | Theming | Indica el valor por defecto de la opacidad en todos los componentes cuyo estado es Disabled | Se define como un valor entre 0 y 1, con, a lo sumo, dos decimales | 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 |
| Expandir | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Reglas de nomenclatura en la extensión de variables
|
|
--theme-state-disabled-elevation
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P2 | --theme-state-disabled-elevation | Theming | Indica el valor por defecto de la elevación (sombra) para todos los componentes cuyo estado es Disabled | Solo se usarán para darle valor las variables Custom CSS definidas aquí (sección Estados) | Storybook |
Reglas de asignación de valor
P2.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P2.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 |
| P2.R3 | Valores permitidos | Solo se podrán usar como valor las variables Custom CSS definidas aquí (sección Estados). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-disabled-color
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P3 | --theme-state-disabled-color | Theming | Indica el valor por defecto del color de superficie para todos los componentes cuyo estado es Disabled | Se definirá el color en formato HSL, con el siguiente patrón: hsl(X, X%, var), siendo var solamente las variables definidas aquí (Sección color). | Storybook |
Reglas de asignación de valor
P3.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P3.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-disabled-on-color
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P4 | --theme-state-disabled-on-color | Theming | Indica el valor por defecto del color de texto/icono para todos los componentes cuyo estado es Disabled | Se definirá el color en formato HSL, con el siguiente patrón: hsl(X, X%, var), siendo var solamente las variables definidas aquí (Sección color). | Storybook |
Reglas de asignación de valor
P4.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P4.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Hover
--theme-state-hover-overlay-opacity
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P5 | --theme-state-hover-overlay-opacity | Theming | Indica el valor por defecto del overlay para todos los componentes cuyo estado es Hover | Se define como un valor entre 0 y 1, con, a lo sumo, dos decimales | Storybook |
Reglas de asignación de valor
P5.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P5.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-hover-elevation
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P6 | --theme-state-hover-elevation | Theming | Indica el valor por defecto de la elevación (sombra) para todos los componentes cuyo estado es Hover | Solo se usarán para darle valor las variables Custom CSS definidas aquí (sección Estados) | Storybook |
Reglas de asignación de valor
P6.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P6.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 |
| P6.R3 | Valores permitidos | Solo se podrán usar como valor las variables Custom CSS definidas aquí (sección Estados).). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Focus
--theme-state-focus-overlay-opacity
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P7 | --theme-state-focus-overlay-opacity | Theming | Indica el valor por defecto del overlay para todos los componentes cuyo estado es Focus | Se define como un valor entre 0 y 1, con, a lo sumo, dos decimales | Storybook |
Reglas de asignación de valor
P7.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P7.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-focus-elevation
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P8 | --theme-state-focus-elevation | Theming | Indica el valor por defecto de la elevación (sombra) para todos los componentes cuyo estado es Focus | Solo se usarán para darle valor las variables Custom CSS definidas aquí (sección Estados) | Storybook |
Reglas de asignación de valor
P8.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P8.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 |
| P8.R3 | Valores permitidos | Solo se podrán usar como valor las variables Custom CSS definidas aquí (sección Estados). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Selected
--theme-state-selected-overlay-opacity
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P9 | --theme-state-selected-overlay-opacity | Theming | Indica el valor por defecto del overlay para todos los componentes cuyo estado es Selected | Se define como un valor entre 0 y 1, con, a lo sumo, dos decimales | Storybook |
Reglas de asignación de valor
P9.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P9.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-selected-elevation
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P10 | --theme-state-selected-elevation | Theming | Indica el valor por defecto de la elevación (sombra) para todos los componentes cuyo estado es Selected | Solo se usarán para darle valor las variables Custom CSS definidas aquí (sección Estados) | Storybook |
Reglas de asignación de valor
P10.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P10.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 |
| P10.R3 | Valores permitidos | Solo se podrán usar como valor las variables Custom CSS definidas aquí (sección Estados).sección Estados). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Pressed
--theme-state-pressed-overlay-opacity
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P11 | --theme-state-pressed-overlay-opacity | Theming | Indica el valor por defecto del overlay para todos los componentes cuyo estado es Pressed | Se define como un valor entre 0 y 1, con, a lo sumo, dos decimales | Storybook |
Reglas de asignación de valor
P11.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P11.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-pressed-elevation
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P12 | --theme-state-pressed-elevation | Theming | Indica el valor por defecto de la elevación (sombra) para todos los componentes cuyo estado es Pressed | Solo se usarán para darle valor las variables Custom CSS definidas aquí (sección Estados) | Storybook |
Reglas de asignación de valor
P12.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P12.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 |
| P12.R3 | Valores permitidos | Solo se podrán usar como valor las variables Custom CSS definidas aquí (sección Estados). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Dragged
--theme-state-dragged-overlay-opacity
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P13 | --theme-state-dragged-overlay-opacity | Theming | Indica el valor por defecto del overlay para todos los componentes cuyo estado es Dragged | Se define como un valor entre 0 y 1, con, a lo sumo, dos decimales | Storybook |
Reglas de asignación de valor
P13.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P13.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 |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
--theme-state-dragged-elevation
Pautas
Pauta | Variable | Scope de aplicación | Cuando se utiliza | Restricciones | Verificaciones |
P14 | --theme-state-dragged-elevation | Theming | Indica el valor por defecto de la elevación (sombra) para todos los componentes cuyo estado es Dragged | Solo se usarán para darle valor las variables Custom CSS definidas aquí (sección Estados) | Storybook |
Reglas de asignación de valor
P14.R1 | Ámbitos | Los ámbitos permitidos dónde se define el valor reutilizable: Negocio y Aplicación. |
P14.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 |
| P14.R3 | Valores permitidos | Solo se podrán usar como valor las variables Custom CSS definidas aquí (sección Estados). |
| Expandir | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Reglas de nomenclatura en la extensión de variables
|
Vista general
Herramientas de contenido
- Impreso por Atlassian Confluence 8.7.2