En Aplicaciones Existentes
La implementación del sistema de diseño en una aplicación ya existente requiere un enfoque cuidadoso para asegurar una transición fluida y evitar interrupciones en la funcionalidad.
Comportamiento en una Aplicación Previamente Generada
Una aplicación ya generada debe continuar operativa al implementar un sistema de diseño. Al abrir las páginas y entidades, se visualiza el sistema de diseño aplicado, aunque algunas propiedades pueden mostrarse como modificadas. Las páginas y entidades que no se publican mantienen su estado original.
La asignación de variables, como de colores, se ejecuta automáticamente siempre que el color exista en el sistema de diseño.
Pasos para la Implementación
Se deben seguir los siguientes pasos al implementar el sistema de diseño en un ambiente de desarrollo, para comprobar el correcto funcionamiento de las aplicaciones ya modeladas y operativas.
1.Verificar que la aplicación funcione correctamente antes de implementar el sistema de diseño.
2.Publicar las páginas y entidades más relevantes de la aplicación, sin publicar la aplicación completa. En esta etapa, las páginas y entidades aún no tienen el sistema de diseño asociado.
3.Comprobar que la aplicación continúe funcionando correctamente luego de esta publicación.
4.Publicar la aplicación para que las páginas y entidades adopten el sistema de diseño.
5.Acceder al modelador y verificar que los elementos de las páginas y entidades se visualicen correctamente, sin alteraciones.
6.Confirmar que la aplicación funcione correctamente una vez aplicado el sistema de diseño de la aplicación publicada.
Si no se detectan errores, se deben realizar un conjunto de ajustes para integrar el sistema de diseño en la aplicación ya implementada.
Ajustes para Integrar el Sistema de Diseño
Se deben considerar las páginas y entidades más representativas de cada aplicación y relevar los estilos y códigos de color de los elementos principales. Estos códigos y estilos pueden copiarse y asignarse a las variables de color y elementos correspondientes, dentro del sistema de diseño.
Modificaciones en las Variables de Estilo
Es fundamental realizar todas las modificaciones de tipografía y color en la pestaña "Variables de Estilo", para mantener una configuración centralizada y evitar cambios individuales en cada interfaz.
1.Revisar la familia tipográfica definida en la variable “Familia tipográfica” y editarla según las fuentes utilizadas en la aplicación.
2.Determinar primero el tema base definido en las propiedades de la aplicación, para luego revisar la configuración en la variable “Paleta de Color”, donde se debe seleccionar el mismo tema base para mantener la coherencia visual de todos los elementos modelados.
3.En la paleta de color, elegir el tema base correspondiente para que se importen automáticamente los colores del tema al sistema de diseño.
4.Una vez verificado que los colores del tema se encuentran aplicados, configurar los colores primario, secundario y terciario.
Color Primario
•En las páginas y entidades más representativas de la aplicación, obtener el código de color del elemento principal.
•Seleccionar el ícono para modificar la variable de color primario en el sistema de diseño.
•Pegar el código de color del elemento en la variable de color primario.
•Repetir este procedimiento para las variables de color secundario y terciario.
Modificaciones en los Elementos
Dentro de la pestaña “Elementos” se realiza la configuración de subtipos, que permite estandarizar el comportamiento y la apariencia de los elementos de la interfaz de usuario.
La configuración de subtipos comprende las siguientes acciones:
•Revisar las páginas y entidades más representativas.
•Identificar el elemento que mejor define cada subtipo en dichos objetos.
•Aplicar sus propiedades al sistema de diseño.
Para cada tipo de elemento, es necesario revisar y configurar sus subtipos específicos.
Texto
Para cada subtipo texto:
•Revisar la jerarquía de textos en las páginas y entidades, y configurar el sistema de diseño para mantener la coherencia visual.
•Verificar que las fuentes estén vinculadas a las variables tipográficas definidas.
•Si los subtipos de texto predeterminados no son suficientes, se pueden crear nuevos, asignándoles un nombre y una descripción clara, por ejemplo "Título de Tarjeta" corresponde a un subtipo agregado.
Botón
Para cada subtipo botón:
•En el sistema de diseño, definir el ancho y el estilo.
•En las páginas y entidades de la aplicación, revisar la fuente utilizada.
Se deben considerar los botones implementados en la aplicación y copiar sus estilos para cada uno de sus estados.
El estilo copiado se debe pegar sobre el subtipo del elemento botón en el sistema de diseño, para cada estado del botón.
Campos
Para cada subtipo campo, es necesario:
•En el sistema de diseño definir el ancho de trabajo, estableciendo el porcentaje que ocupa el elemento, por ejemplo puede ser 12% o 100%.
•En las páginas y entidades de la aplicación, identificar el campo más representativo del elemento para incorporarlo al sistema de diseño.
Se deben considerar los campos implementados en la aplicación y copiar sus estilos para cada uno de sus estados.
El estilo copiado se debe pegar sobre el subtipo del elemento correspondiente en el sistema de diseño.
Otros Tipos de Elementos
Se deben aplicar los mismos principios de revisión, identificación y configuración de subtipos que se describen para textos, botones y campos. Es decir, identificando el elemento en las páginas y entidades de la aplicación, copiando sus propiedades con la opción “Copiar estilos” y pegando sobre el subtipo correspondiente en el sistema de diseño, De esta manera, cada comportamiento del elemento mantiene los estilos configurados.
Puede ocurrir alguna inconsistencia si al copiar y pegar, el elemento de origen utiliza una fuente o un color definidos por fuera del sistema de diseño. Se debe revisar en el sistema de diseño que el subtipo configurado utilice las variables de estilo correspondientes al sistema. Por ejemplo, para un elemento texto, el color de fondo debe ser uno de los definidos en la paleta de colores.
Revisar las Páginas y Entidades con el Sistema de Diseño
Cada elemento debe tener asociado el subtipo correcto del sistema de diseño.
En las páginas y entidades, comprobar que los subtipos no estén en estado "modificado", es decir con un borde color naranja. Si algún subtipo estuviera modificado, se debe revisar la propiedad cambiada y seleccionar un subtipo existente, o bien, estandarizar la modificación en el sistema de diseño.
Consideraciones Adicionales
Páginas Reusables
Las páginas reusables respetan el sistema de diseño de su propia aplicación. Si se utiliza una página reusable proveniente de otra aplicación, la misma mantiene el sistema de diseño de su aplicación de origen.
Asignación Automática de Propiedades
Si el valor de cualquier propiedad del sistema de diseño, como color o fuente, coincide con el valor de un elemento modelado en una página o entidad de la aplicación existente, los nombre el subtipo actualiza automáticamente. Esto simplifica la adaptación de las aplicaciones existentes al nuevo sistema de diseño.
