--- title: "Retroalimentación visual en aplicaciones móviles" date: "2019-04-04" categories: - "app-development" - "mobile" - "mobile-development" - "mobiletogether" - "tools" tags: - "cross-platform-mobile-development" - "mobile-development" - "mobile-development-tools" - "mobiletogether" - "visual-feedback" description: Descubra cómo implementar retroalimentación visual en aplicaciones móviles utilizando MobileTogether, mejorando la interacción del usuario a través de respuestas dinámicas de los botones y señales visuales. --- Status: #blog Tags: #cross-platform-mobile-development #mobile-development #mobile-development-tools #mobiletogether #visual-feedback Categories: [mobile-development](/blog/es/category/mobile-development.md) # Retroalimentación visual en aplicaciones móviles La retroalimentación visual en las aplicaciones móviles proporciona una experiencia de usuario más agradable, y las aplicaciones móviles que son divertidas de usar se lanzan con mayor frecuencia que las aplicaciones estáticas y aburridas. MobileTogether, [el marco de desarrollo rápido de aplicaciones móviles (RMAD)](https://www.altova.com/es/mobiletogether) de Altova, incorpora todas las herramientas que necesita para desarrollar aplicaciones móviles multiplataforma con funciones de retroalimentación visual atractivas. La paleta de controles de arrastrar y soltar en el diseñador MobileTogether incluye un control de botón que cambia automáticamente su apariencia al ser pulsado. También puede definir condiciones que añadan o modifiquen texto, imágenes u otras características de cualquier botón mientras la aplicación se ejecuta. Además, se pueden definir muchos otros controles que funcionen como botones, donde una o más acciones se ejecutan cuando se hace clic en el control. Anteriormente, hemos escrito sobre [la aplicación de imágenes de iconos como botones de herramientas](https://www.altova.com/blog/images-as-tool-buttons-in-mobile-apps/) en aplicaciones móviles para crear un menú de herramientas elegante y sofisticado. En esta publicación, añadiremos interactividad a nuestras imágenes de herramientas para proporcionar una retroalimentación visual atractiva para cada clic. ![](/blog/images/wai_700x335_2.jpg) La captura de pantalla que se muestra a continuación muestra una página de la aplicación "Where Am I" que creamos para demostrar el uso de imágenes como botones. [![Imágenes utilizadas como botones en una aplicación móvil.](/blog/images/tool-images.png)](tool-images.png) Cada imagen azul en la sección inferior de la pantalla es un botón que proporciona acceso a una herramienta, diseñada para ofrecer más información sobre la ubicación, ya sea recuperando datos a través de una API o abriendo una página web externa. Un clic breve en cualquier botón realiza la función asignada, mientras que un clic prolongado abre una ventana de mensaje que proporciona información sobre el botón [![Ejemplo de retroalimentación visual en aplicaciones móviles: una pulsación prolongada sobre una imagen](/blog/images/image-long-click-515x1030.png)](image-long-click.png) El botón de clima, ubicado en la esquina inferior izquierda de la captura de pantalla, se colorea para indicar que ha sido pulsado. Al hacer un clic rápido, la imagen se colorea brevemente antes de que se ejecute la acción. Un simple clic en el botón del clima genera una solicitud a la API de OpenWeather y abre una subpágina que muestra los datos meteorológicos en formatos de gráfico y texto [![Informe meteorológico que se muestra al hacer clic en la imagen](/blog/images/weather-subpage.jpg)](weather-subpage.jpg) ### **Definición de la retroalimentación visual en aplicaciones móviles** La retroalimentación visual para un clic del usuario en cualquier imagen se implementa cambiando brevemente el color de fondo detrás del botón de la imagen. Las imágenes en nuestra aplicación se organizan en tablas, como se puede ver en esta vista parcial de MobileTogether Designer: [![Disposición de las imágenes en tablas, tal como se visualiza en el programa MobileTogether Designer](/blog/images/buttton-layout.png)](buttton-layout.png) Cada celda de la tabla tiene un conjunto de propiedades que pueden definirse individualmente, incluyendo el color de fondo de la celda. Cada imagen también tiene una definición específica de las acciones que se ejecutan cuando se hace clic en la imagen. [![Definición del fondo de las celdas de una tabla para implementar retroalimentación visual en aplicaciones móviles](/blog/images/table-cell-background.png)](table-cell-background.png) Podemos registrar un número de índice en el elemento llamado "userButton" cuando se hace clic en la imagen del pronóstico del tiempo. Luego, podemos modificar el color de fondo de la celda en función del contenido del elemento "userButton", tal como se define en la expresión XQuery que se encuentra en la propiedad "Color de fondo". Aquí está la lista de acciones para la herramienta de pronóstico del tiempo: [![Acciones que se ejecutan al hacer clic en una imagen para proporcionar retroalimentación visual en aplicaciones móviles](/blog/images/image-click-actions.png)](image-click-actions.png) En primer lugar, se actualiza el valor del elemento denominado "userButton". A continuación, se ejecutan las acciones que realmente modifican la apariencia de la imagen. Dado que estas acciones serán necesarias cada vez que se haga clic en una imagen, se almacenan en un grupo de acciones específico llamado "Button Flash". MobileTogether ejecuta automáticamente la acción "Actualizar pantalla" una vez al final de cualquier secuencia de acciones. Para implementar una retroalimentación visual, queremos ejecutar "Actualizar pantalla" al principio de la secuencia para cambiar el color de fondo, pausar brevemente, restablecer el valor de "userButton" y, luego, ejecutar "Actualizar pantalla" nuevamente para borrar el color de fondo. La función `sleep()` de XQuery establece la duración de la pausa en milisegundos. Después de que el botón parpadea, la ejecución continúa con el grupo de acciones "Obtener pronóstico del tiempo". Este grupo de acciones genera una consulta a una API de pronóstico del tiempo para obtener el pronóstico de 5 días para cualquier latitud y longitud, y luego abre la subpágina del clima que se muestra arriba. También queremos obtener una respuesta visual al realizar una pulsación prolongada en cualquier imagen. MobileTogether nos permite definir acciones separadas para una pulsación prolongada, como se muestra aquí: [![Acciones que se ejecutan al realizar una pulsación prolongada para proporcionar retroalimentación visual en aplicaciones móviles](/blog/images/long-click-actions.png)](long-click-actions.png) El resultado de la pulsación prolongada se muestra en la segunda captura de pantalla que se muestra arriba, donde la ventana de mensaje describe la función del botón "Obtener el clima". Para la pulsación prolongada, solo necesitamos una función "Actualizar Pantalla" para cambiar el color de fondo, y no necesitamos la función "pausa()" para detener la ejecución. Una acción "Actualizar Pantalla" se ejecuta automáticamente cuando el usuario cierra la ventana del mensaje, por lo que el fondo de la imagen se restaurará. ### **Retroalimentación visual en aplicaciones móviles que utilizan tablas con filas repetitivas** No podemos utilizar la misma técnica de indexación para identificar los iconos de herramientas en las páginas donde presentamos listas basadas en datos recibidos a través de consultas a la API. Por ejemplo, la captura de pantalla que se muestra a continuación muestra los resultados de la búsqueda de hoteles y moteles cerca de una ubicación específica: [![Una tabla con filas repetidas en una aplicación móvil](/blog/images/search-results-515x1030.png)](search-results.png) Se presentan páginas similares para alertas de tráfico y eventos culturales cercanos, y queremos ofrecer una retroalimentación visual para las imágenes de las herramientas en cada entrada, como se muestra aquí con un clic prolongado en una de las imágenes de teléfonos: [![Mantener pulsado un elemento de imagen en una fila repetida](/blog/images/search-results-click-515x1030.png)](search-results-click.png) Cada conjunto de resultados para estas páginas se define como una tabla desplazable con filas repetidas, donde mostramos la información obtenida a través de consultas a la API: [![Una tabla con filas repetidas, tal como se crea en el programa MobileTogether Designer](/blog/images/repeating-rows.png)](repeating-rows.png) MobileTogether incluye una función de extensión XQuery llamada mt-rowgroup-index() que ofrece una solución eficaz para identificar las imágenes en cada fila. Podemos combinar esta función con un valor para identificar la columna dentro de la tabla y así manipular cada imagen individualmente. La imagen del teléfono que se muestra arriba tiene la siguiente definición de color de fondo: [![Definición del color de fondo de una celda de la tabla para una fila que se repite.](/blog/images/rowgroup-background-definition.png)](rowgroup-background-definition.png) Las primeras acciones que se ejecutan cuando el usuario hace clic en la imagen del teléfono para actualizar cualquier resultado son: se modifica el valor del elemento "userButton" y se ejecuta el grupo de acciones "Button Flash" Hemos añadido 300 al índice del grupo de filas para indicar la tercera columna de imágenes en la fila. Nuestra consulta a la API de búsqueda solicita un máximo de 50 resultados, por lo que, dependiendo del número de fila del resultado seleccionado, el valor del elemento "userButton" para esta imagen podría variar entre 301 y 350. La retroalimentación visual solo se aplica a esta única imagen, según lo determinado por la función mt-rowgroup-index() en la definición del color de fondo de la celda de la tabla. MobileTogether incluye muchas otras [funciones de extensión](https://www.altova.com/es/mobiletogether/features) que se pueden utilizar en expresiones XPath/XQuery, lo que evita que los desarrolladores tengan que crear funciones personalizadas para ampliar las bibliotecas estándar de XPath, XQuery y XSLT, y así cubrir las tareas más comunes en aplicaciones móviles. ### Aprenda más y pruébelo usted mismo Si está listo para comenzar a agregar retroalimentación visual en aplicaciones móviles, simplemente descargue el [MobileTogether Designer](https://www.altova.com/es/mobiletogether/download), que es de uso gratuito. Y no olvide visitar la página de [demos de MobileTogether](https://www.altova.com/es/mobiletogether/demos), donde encontrará enlaces a videos, tutoriales y más aplicaciones de demostración. Puede examinar la aplicación descrita en esta publicación descargando una copia desde GitHub en [este repositorio](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I).