Day 11: ¿Que entendiste de: Interfaces 102: Build Interfaces Using an Expression?
Discussion posts and replies are publicly visible
Fernando Fernández Morales
Interfaces 102 – Creacion de interfaces dinámicas
Conceptos básicos
Modo diseño
Desing mode
Los componentes de pueden arrastrar de la barra izquierda (paleta)
Se pueden editar desde la barra derecha (configuración de componetnes)
En el centro se muestra una vista previa de la interfaz
Expression mode
En este modo se pueden encontrar los componentes pulsando sobre ellos y en el código se marcará la parte en la que esta.
De igual manera se pueden configurar las características del componente
Se pueden mostrar errores de distintas maneras
Las variables locales se definen usando a!localVariables y se definen al inicio
Las variables locales llevna el preijo local!(nombre de la varible)
Si no se le asigna valor a una variable local por defecto es null hasta que se le asigne un valor
Enlaces dinámicos
Convierten texto estático a iconos, estampas y cards en componentes dinámicos que se pueden usar para mostrar, ocultar o alterar otros componentes.
Para esto se usa la función a!dynamicLink() que tiene los parámetros:
label
showWhen
value
saveInto
Cuadriculas editables
Se representan como a!gridLayout().
headerCell no puede estar vacio.
Con el parámetro columnConfigs podemos establecer la configuración de las columnas, este parámetro acepta una lista de a!gridLayoutColumnConfig() para cada una de las columnas.
Cada fila de la cuadricula esta representada por un a!gridRowLayout()
Guardar datos
En appian los botones funcionan similar a los enlaces dinamicos.
Guardar un solo valor
Pueden tener un parámetro de value y un parámetro saveInto
Cuando se hace click el valor especificado en value se escribe en la variable saveInto.
Guardar múltiples valores
Se puede utilizar la siguiente sintaxis
saveInto{
a!save(
target: guarda el valor
value: valor
),
}UX Planning
UX Design and Appian
Las interfaces deben ser
Eficaces: Para disminuir los tiempos de trabajo y hacer mas eficientes los procesos de trabajo.
Intuitivas: Mientras menos pasos tengan para lograr su objetivo mejor también ayudara a hacer más eficiente el trabajo.
Bonitas/agradables: Ayudara a que los usuarios se sientan más cómodos trabajando en la plataforma.
Planificación
Entender tus usuarios: Debes entender quien estará usando la interfaz para hacer flujos más eficaces.
Sketch: Antes de cualquier cosa debemos hacer el diseño para saber como se va a ver la interfaz y como van a interactuar con ella. Wireframe, es un diseño muy básico que ayudara a definir mejor el diseño de las interfaces.
Diseño: Siempre mostrar la cantidad correcta de información y asegurarse de que todos los componentes estén accesibles y disponibles. No crear pasos innecesarios o distracciones.
Test de usabilidad: Se prueban las interfaces para ver que funcionen de manera correcta. Sirve para detectar y corregir errores.
Layouts
Lo principal para hacer buenas interfaces es conocer los límites de la plataforma.
Lo mas común es usar columnas, aunque también se utiliza el side by side layout que aporta mas control en la posición de los componentes.
El box layout también tiene mas orden y aparte aporta un mayor impacto en el diseño ya que pone una barra de titulo y un borde.
El billboard: es meramente decorativo y le da una mejor presentación a la página.
Mejores practicas
Tienen las siguientes propiedades:
Etiquetas:
Pueden ayudar a dar instrucciones o consejos
Buttons
Tienen 2 principales utilidades:
Controlar el flujo de navegación (Pasar de una página a otra)
Para realizar acciones