Creación de una pantalla
Como estándar de uso, debes comenzar con una app preconstruida que ya tenga pantallas de ejemplo. Los datos de la pantalla deben modificarse antes de guardarlos, para garantizar que se adapten a las necesidades específicas del proyecto.
Si no se puede usar una pantalla prediseñada, debes leer la documentación de Plantillas de Diseño de Apps y Flex Container para asegurarte de seguir los estándares y las mejores prácticas definidas para crear una nueva pantalla.
Las pantallas se crean y configuran mediante el editor de pantallas de Studio. Para obtener más información sobre el uso del editor y sus funciones, lea Editor de pantallas.
Configuración de la pantalla
Al crear una pantalla en tu app, es crucial seguir ciertas prácticas recomendadas para garantizar la coherencia a medida que avanza el proyecto. Estas prácticas se aplican en diferentes instancias durante la construcción:
Definición de configuración básica
Antes de guardar la pantalla, debes completar los siguientes campos:
Importante
El campo Name, junto con el campo View/área y el campo Sequence conforman el id de la pantalla que aparece en la navegación y siempre que necesites invocar esa pantalla desde otra entidad (por ejemplo, desde un evento o un proceso lambda). Por ejemplo: VV01|contents1:S009;footer:S008
View/area: Este menú desplegable incluye las áreas definidas para el layout que se utilizará. Debes comprender la configuración de diseño para definir el diseño adecuado.
Nota
En el caso de una app móvil, la vista/área es siempre Contents1.
Sequence: Es un dato alfanumérico, que debe comenzar con la letra S seguido del identificador del campo Name (ver más abajo).
Name Identifica la pantalla. De hecho, es parte del nombre completo. Importante: estos tres identificadores juntos conforman el id que aparece en la navegación. Por ejemplo: VV01|contents1:S009;footer:S008.
Description: breve texto que explica el propósito de la pantalla.
Tags: palabras que te ayudan a ti y a tu equipo de proyecto a identificar fácilmente la pantalla. También debes seguir Convenciones de nomenclatura para etiquetas.
Lea las convenciones de nomenclatura de pantalla a continuación para aplicar las mejores prácticas al definir la configuración mencionada.
Convenciones de nomenclatura
El nombre de pantalla debe definirse de acuerdo con las convenciones de nomenclatura definidas para las entidades de Veritran. Para obtener información sobre las convenciones de nomenclatura de las pantallas y sus componentes, lee Nomenclatura. Además, ten en cuenta las siguientes prácticas recomendadas para guiarlo en la definición del nombre.
Idioma: usa inglés.
Consistencia y semántica: nombra las pantallas de forma clara y consistente, utilizando nombres descriptivos que reflejen su función, como logino user_profile.
Nombres compuestos: preferiblemente, agrega contexto en lugar de palabras abreviadas y evita duplicar información innecesaria.
Palabras reservadas: no utilices palabras reservadas por la plataforma o palabras demasiado genéricas como: Main, Page1, Component, Test, Screen1entre otros.
Organización visual: agrupa las pantallas por características o módulo. Para nombrarlas, siga estos estándares:
Use prefijos y sufijos para agrupar pantallas relacionadas por sección, al tiempo que facilita la búsqueda y el mantenimiento. Ejemplo: login_intro, login_onboardingentre otros.
Si las pantallas están dentro de un módulo y el módulo ya lleva el nombre de la sección, no lo uses en el nombre de la pantalla.
Evita usar la expresión screen.
Como recomendación, utiliza un mapa del sitio o un documento de arquitectura de la información (IA) para ayudarle a definir la estructura jerárquica de las pantallas, utilizando separadores como / o - para representar saltos de sección.
Colaboración interdisciplinaria: la nomenclatura debe definirse en colaboración con el líder técnico y el diseñador, asegurando que el mapa del sitio refleje la estructura y el flujo de la aplicación.
Conversaciones con el equipo: Involucra a otros miembros del equipo en las decisiones de nomenclatura para asegurarse de que los identificadores sean intuitivos y funcionales.
Importante
En esta etapa, se definen acrónimos, nombres y estructuras. A medida que avanza el proyecto, estas definiciones son cruciales para el orden y la coherencia. Es importante dedicar tiempo a definir y acordar con el equipo cómo nombrar las pantallas. El líder a cargo de los aspectos técnicos del proyecto es el encargado de asegurar una adecuada organización del proceso de construcción de pantallas.
Revisión de Treeview
Como se mencionó anteriormente, el estándar es duplicar las pantallas prediseñadas para tu app y configurarlas de acuerdo con las necesidades de tu proyecto. Luego, debes revisar la vista de árbol de tu pantalla. Es fundamental asegurarse de que la estructura visual de la pantalla sea óptima y se adapte correctamente a los diferentes dispositivos, especialmente para los dispositivos móviles. Para ello, debes aplicar las mejores prácticas definidas a continuación.
Componentes en el canvas
Para configurar una pantalla, debes arrastrar y soltar los componentes del panel izquierdo en el canvas de la pantalla, para asegurarte de seguir las mejores prácticas de construcción y nomenclatura.
El uso de componentes en la construcción de pantallas implica arrastrar y soltar elementos en el área de trabajo. Es importante seguir las prácticas establecidas para garantizar que los componentes se integren de manera coherente y funcional.
Los componentes se arrastran y sueltan dentro de las áreas definidas del diseño. Como práctica recomendada, los componentes no deben ubicarse fuera de un área específica (como un encabezado, contenido o pie de página).
Para obtener más información sobre los componentes y cómo usarlos, lee Editor de pantallas.
Al agregar componentes al canvas de la pantalla, debe seguir las prácticas recomendadas que se enumeran a continuación, relacionadas con los atributos de los componentes configurados en el panel derecho.
Componentes de Veritran
La configuración de los componentes en el canvas es el paso final en el proceso de construcción de pantallas. Este documento detalla cómo configurar los componentes de la biblioteca para garantizar una integración eficiente y efectiva en el producto final.
Un componente, ya sea nativo o configurable, es un conjunto reutilizable de piezas de interfaz diseñadas y desarrolladas con consistencia visual y funcional. Cada componente encapsula tanto la apariencia como el comportamiento, lo que facilita su integración en cualquier parte del producto digital.
La correcta implementación de componentes básicos y avanzados, junto con el uso estratégico de los componentes de Veritran, garantiza una experiencia de usuario consistente y de alta calidad. El uso de componentes en el editor de pantallas ofrece los siguientes beneficios:
Escalabilidad: permite construir productos digitales más rápido. Así, se reduce el trabajo duplicado.
Consistencia: garantiza una experiencia unificada en toda la interfaz.
Velocidad de desarrollo: reduce el time-to-market al evitar tener que diseñar y configurar cada funcionalidad desde cero.
Reducción de errores: menos código repetido significa menos errores.
Mejora de la colaboración: facilita la comunicación entre diseñadores, desarrolladores y managers.
El editor de pantallas de Studio contiene la pestaña Components, que incluye tanto componentes nativos como configurables.