--- title: "Cree un panel de control móvil que impresionará a cualquier ejecutivo" date: "2017-03-16" categories: - "development" - "mobile" - "software" tags: - "mobile-dashboards" - "mobile-development" - "mobiletogether" description: Aquí se explica cómo crear un panel de control móvil con una apariencia atractiva y una gran funcionalidad utilizando Altova MobileTogether. --- Status: #blog Tags: #mobile-dashboards #mobile-development #mobiletogether Categories: [mobile-development](/blog/es/category/mobile-development.md) | [low-code+no-code](/blog/es/category/low-codeno-code.md) # Cree un panel de control móvil que impresionará a cualquier ejecutivo En una publicación anterior, titulada "[Creación de aplicaciones móviles elegantes](https://www.altova.com/blog/build-an-elegant-mobile-app-that-delights-end-users/)", mostramos ejemplos de una aplicación sencilla y un panel móvil completo que se ejecuta en múltiples dispositivos móviles. Los desarrolladores de aplicaciones móviles también pueden complacer a los usuarios finales al permitirles personalizar la experiencia de la aplicación. MobileTogether permite a los desarrolladores adaptar las aplicaciones multiplataforma a cada plataforma móvil **y** permite a los usuarios personalizar el tamaño del texto de forma sencilla e intuitiva. Permitir que cada usuario final configure el tamaño de texto preferido según sus condiciones de visualización y el dispositivo es una muestra de cortesía hacia los usuarios, y también libera a los desarrolladores de la tarea de determinar el tamaño de texto adecuado para que funcione en todos los dispositivos. ![](/blog/images/MT_text_size1.jpg) ### Permitir que los usuarios seleccionen el tamaño del texto Puede utilizar dos botones separados o un control deslizante para permitir que los usuarios ajusten el tamaño del texto que se muestra en una aplicación móvil. ### Tamaño del texto: dos opciones La aplicación de informes de ventas de la empresa, mencionada en nuestra publicación anterior, utiliza la técnica de los dos botones. ![Aplicación para informes de ventas de MobileTogether – versión para Android](/blog/images/Android-Landscape.png) La fila inferior de controles incluye dos botones para ajustar el tamaño del texto, con etiquetas claras e intuitivas: ![Botones para ajustar el tamaño de la fuente en una aplicación MobileTogether](/blog/images/Android-Bottom-Row.png) Estos botones aumentan o disminuyen el valor de un elemento de datos persistente llamado "textSize" dentro de un rango de valores que va de 10 a 50. Aquí se muestra la acción de control asignada al botón de disminución: ![Control para aumentar el tamaño del texto en MobileTogether](/blog/images/decrease-text-size.png) Y la acción asociada al botón de incremento: ![Control para aumentar el tamaño del texto en MobileTogether](/blog/images/increase-text-size.png) El elemento `textSize` se utiliza en una función sencilla de MobileTogether para construir una cadena de texto válida que se asignará al tamaño del texto: ![Definición de una función de usuario en MobileTogether para ajustar el tamaño del texto](/blog/images/set-text-size-function.png) Finalmente, el tamaño del texto de cada elemento de texto en la aplicación se establece mediante una expresión XPath, en lugar de a través del menú desplegable de tamaños en la ventana de propiedades ![Propiedades de "MobileTogether" para un elemento de texto](/blog/images/text-size-property.png) Dado que el elemento "textSize" se define en el árbol de datos persistente, la selección de tamaño de texto realizada por el usuario se guarda y se mantiene para la próxima vez que se ejecute la aplicación en ese dispositivo. Este método de dos botones funciona bien para una aplicación con solo unas pocas páginas principales, como el informe de ventas de la empresa, porque el usuario ve el resultado de inmediato y puede ajustarlo al tamaño preferido. A continuación, se muestran ejemplos del informe de ventas de la empresa con texto pequeño y texto grande: ![Una aplicación MobileTogether con texto pequeño](/blog/images/small-text-sample.png) ![Una aplicación MobileTogether con texto grande](/blog/images/large-text-sample.png) Tenga en cuenta que el título principal es más grande que el texto del cuerpo. Esto se logra mediante una segunda función para el usuario, destinada al texto del título, que establece una relación entre el tamaño del texto del cuerpo y el tamaño del título: ![Función de MobileTogether para el tamaño del texto del título](/blog/images/headline-text-function.png) ### Control deslizante para el tamaño del texto Otra forma de permitir que el usuario controle el tamaño del texto es mediante el uso de un control deslizante. Los desarrolladores seguirán queriendo crear un elemento de datos persistente para el tamaño del texto, crear funciones de usuario para construir la cadena de tamaño, y asignar la propiedad del tamaño del texto como una expresión XPath, como se describió anteriormente. Pero a veces, el espacio disponible en la pantalla no es suficiente para dedicar dos botones a la modificación del tamaño del texto. En ese caso, puede utilizar un solo botón para acceder a un control deslizante. La aplicación móvil de panel de control de ventas, que se muestra a continuación, presenta datos de ventas para cualquier fecha en diversos formatos gráficos. La fila de controles en la parte superior ofrece una variedad de selectores de fecha rápidos, pero solo tiene espacio para un botón más, que se utilizará para ajustar el tamaño del texto. ![Aplicación móvil "MobileTogether" para paneles de control, versión para Android](/blog/images/Dashboard-app-Android.png) En esta aplicación, el botón "A±" abre una subpágina que contiene un control deslizante que permite a los usuarios ajustar el valor del elemento "textSize": ![Control deslizante para ajustar el tamaño del texto en la aplicación móvil del panel de control](/blog/images/resize-slider.png) El texto de ejemplo que aparece en la línea superior se redimensiona automáticamente a medida que el usuario ajusta el control deslizante. Cuando el usuario hace clic en el botón de "volver", la página principal se vuelve a mostrar con los elementos de texto redimensionados. Al igual que con la técnica de los dos botones, el elemento "textSize" se guarda como datos persistentes, y la selección del usuario se restaurará la próxima vez que se inicie la aplicación. Algunas aplicaciones tendrán varios elementos que son adecuados para ser guardados como configuraciones del usuario, como por ejemplo, pulgadas frente a centímetros, dólares frente a euros, o una dirección predeterminada o un nombre de archivo de imagen. En esos casos, los desarrolladores pueden crear una única página de preferencias para que el usuario pueda ver y modificar todas las configuraciones persistentes en un solo lugar. MobileTogether Designer es la herramienta gratuita que permite implementar rápidamente todas estas funciones avanzadas para aplicaciones multiplataforma, compatibles con Android, iOS, Windows 8, Windows 10, Windows Phone 8, y un cliente basado en navegador HTML-5. [Descargue una copia](https://www.altova.com/es/download/mobiletogether.html) y empiece hoy mismo.