Implementación en Aplicaciones Existentes
La implementación del Sistema de Diseño en proyectos ya existentes requiere un enfoque cuidadoso para asegurar una transición fluida y evitar interrupciones en la funcionalidad.
Comportamiento del SD en aplicaciones ya generadas
Las aplicaciones ya generadas continúan operativas. Al abrir las páginas, se visualiza el sistema de diseño aplicado, aunque algunas propiedades pueden mostrarse como modificadas. Las páginas que no se publican mantienen su estado original.
La asignación de variables, como los colores, se ejecuta automáticamente siempre que el color exista en el sistema de diseño.
Pasos para incorporar el SD en aplicaciones existentes
En los ambientes de desarrollo se deben realizar los siguientes pasos para comprobar el correcto funcionamiento de las aplicaciones ya modeladas y operativas.
1.Verificar que cada aplicación funcione correctamente con la versión 9.0.1 de Deyel.
2.Publicar las páginas y entidades más relevantes de cada 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 antes de aplicar el sistema de diseño.
4.Publicar cada aplicación para que las páginas y entidades adopten el sistema de diseño correspondiente.
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.
7.Notificar al equipo de Deyel en caso de detectar errores relevantes durante el proceso de revisión.
Si no se detectan errores, se deben realizar los siguientes ajustes para integrar el sistema de diseño en las aplicaciones ya implementadas.
Adaptación y aplicación del SD
Se deben tomar las páginas más representativas de cada aplicación y relevar los estilos y códigos de color de los elementos principales. Estos códigos o estilos pueden copiarse y asignarse a las variables de color y elementos correspondientes, dentro del sistema de diseño.
Es fundamental realizar todas las modificaciones de tipografía y color dentro de las Variables de estilo del sistema de diseño, para mantener una configuración centralizada y evitar cambios individuales en cada interfaz.
Variables de Estilo
1.Se debe revisar la familia tipográfica definida en la variable “Familia tipográfica” y editarla según las fuentes utilizadas en la aplicación.
2.Se debe revisar la configuración en la variable “Paleta de color” y determinar primero el tema definido en la aplicación a través de sus propiedades.
3.Se debe acceder al sistema de diseño y seleccionar el tema base utilizado en la aplicación para mantener la coherencia visual de todos los elementos modelados.
4.En la paleta de color, se debe elegir el tema base correspondiente. En este paso, Deyel importa automáticamente los colores del tema al sistema de diseño.
5.Una vez verificado que los colores del tema se encuentran aplicados, se deben configurar los colores Primario, Secundario y Terciario.
Determinación de los colores Primario, Secundario y Terciario
Color Primario
1.Se deben tomar los objetos más representativas de la aplicación y obtener el código de color del elemento principal.
2.Se debe modificar la variable de color Primario en el sistema de diseño.
3.Se debe pegar el código de color del elemento en la variable.
4.Se debe repetir este procedimiento para el color Secundario y Terciario.
Elementos
Dentro de la pestaña “Elementos” se encuentra la configuración de subtipos, que permite estandarizar el comportamiento y la apariencia de los componentes de la interfaz de usuario.
El proceso de configuración de subtipos comprende las siguientes acciones
1.Se deben revisar las páginas más representativas.
2.Se debe identificar el elemento que mejor define cada subtipo.
3.Se debe aplicar sus propiedades al sistema de diseño.
Para cada tipo de elemento, es necesario revisar y configurar sus subtipos según corresponda.
Textos
Para cada subtipo de texto, como title 1, title 2 o subtitle 1:
•Se debe revisar la jerarquía de textos en las páginas y configurar el SD para mantener la coherencia visual.
•Se debe verificar que las fuentes estén vinculadas a las variables tipográficas definidas.
•Si los subtipos de texto por defecto no son suficientes, se pueden crear nuevos, asignándoles un nombre y una descripción clara.
Botones
Para cada subtipo de botones se debe:
•Definir el ancho y el estilo de los botones.
•Revisar la fuente utilizada.
El procedimiento para configurar los subtipos de los botones es similar al de los textos. Se deben considerar los botones implementados en la aplicación y copiar sus estilos.
Posteriormente se debe pegar esos estilos sobre el elemento botón en el sistema de diseño.
Campos
Para cada subtipo de los campos, es necesario:
•Definir el ancho de trabajo estableciendo el porcentaje que ocupa el elemento, por ejemplo puede ser 12% o 100%.
•Identificar el campo más representativo del elemento para incorporarlo al sistema de diseño.
•Comprobar que los subtipos no estén en estado "modificado" en los objetos. Si algún subtipo está modificado, se debe revisar la propiedad alterada y reasignar el subtipo o bien, estandarizar la modificación en el sistema de diseño si es válida.
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.
Se debe identificar el elemento, copiar sus propiedades con la opción “Copiar estilos” y pegarlas sobre el subtipo correspondiente en el sistema de diseño, para que cada comportamiento del elemento mantenga los estilos configurados.
Posibles inconcistencias al copiar y pegar
Puede ocurrir una 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, en el caso del elemento Texto, el color de fondo debe ser uno de los definidos en la paleta de colores.
Revisar las páginas y entidades de la aplicación con el SD aplicado
•Cada elemento debe tener asociado el subtipo correcto del sistema de diseño.
•Si el subtipo del elemento está “modificado” se debe revisar cuál es la propiedad modificada, indicada con borde naranja, y evaluar si la modificación es necesaria. Si es necesario corregir la situación, asignar nuevamente el subtipo para que el elemento adopte correctamente la configuración del sistema de diseño.
Consideraciones Adicionales
Páginas reusables y SD de otras aplicaciones
Las páginas reusables respetan el sistema de diseño de su propia aplicación.
Si en un objeto se incluye una página proveniente de otra aplicación, esa página mantiene el sistema de diseño de su aplicación de origen.
Asignación automática de atributos
Si el valor de un atributo del sistema de diseño, como color o fuente, coincide con el valor de un elemento modelado, los nombres de los atributos se actualizan automáticamente.
Esto simplifica la adaptación de las aplicaciones existentes al nuevo sistema de diseño.
