--- title: "Formatee gráficos y diagramas para cualquier dispositivo móvil en su entorno BYOD (Bring Your Own Device)" date: "2014-12-10" categories: - "development" tags: - "charts" - "mobile-development" - "mobiletogether" - "software-tools" description: Descubra cómo formatear gráficos y diagramas para diversos dispositivos móviles en entornos BYOD (Bring Your Own Device), utilizando las variables globales y locales de Altova MobileTogether para mejorar la eficiencia del desarrollo. --- Status: #blog Tags: #charts #mobile-development #mobiletogether #software-tools Categories: [development](/blog/es/category/development.md) # Formatee gráficos y diagramas para cualquier dispositivo móvil en su entorno BYOD (Bring Your Own Device) Uno de los desafíos en el desarrollo de soluciones empresariales móviles es adaptar el formato a los diferentes dispositivos que los usuarios finales utilizarán. Cada sistema operativo móvil admite una variedad de tamaños de pantalla, desde los teléfonos inteligentes más pequeños hasta las tabletas más grandes. Y al cambiar a un sistema operativo diferente, todos los tamaños de pantalla cambian nuevamente. La necesidad de compatibilidad con una gran variedad de dispositivos móviles puede ralentizar el desarrollo de soluciones móviles para empresas que implementan políticas de "trae tu propio dispositivo" (BYOD). ![Gráfico circular para cualquier dispositivo móvil, creado utilizando Altova MobileTogether](https://lh5.ggpht.com/-7Xh6qdjc2N0/VIc8xfEsPgI/AAAAAAAAB30/DNEO_7zmRMg/Opening%252520Chart%252520Capture%25255B2%25255D.png?imgmax=800 "Pie chart for any mobile device created using Altova MobileTogether") Altova MobileTogether es un [marco de desarrollo móvil multiplataforma](https://www.altova.com/es/mobiletogether.html) que le permite crear aplicaciones una sola vez para múltiples plataformas: - Android - iOS - Windows 8 - Windows Phone 8 - Cliente basado en un navegador y desarrollado con HTML5 Además, MobileTogether es compatible con todos los tamaños de pantalla disponibles para cada sistema operativo, y cuenta con funciones especiales para aumentar la productividad de los desarrolladores. **Variables globales al rescate** El diseñador MobileTogether le proporciona acceso a una biblioteca de más de tres docenas de variables globales y locales que puede utilizar para diversos fines durante el diseño de su solución móvil. Las variables globales son estáticas, lo que significa que no cambian durante la ejecución de su solución. Las variables locales son dinámicas y solo pueden estar disponibles en determinadas circunstancias. Muchas variables globales almacenan valores que se utilizan para el dispositivo que ejecuta la solución móvil en tiempo de ejecución: ![Variables globales en Altova MobileTogether](https://lh4.ggpht.com/-vNpe-nYOYfI/VIc8xs2WRLI/AAAAAAAAB34/AMbi82MP8SM/Global%252520Variables%252520Crop%25255B2%25255D.png?imgmax=800 "Global Variables in Altova MobileTogether") Puede utilizar las variables globales directamente en la ventana de propiedades del diseñador MobileTogether, o puede crear funciones que incluyan variables globales y definir resultados basados en el resultado de estas variables. Si no puede encontrar una variable específica que su diseño requiera, incluso puede definir sus propias variables personalizadas. Por supuesto, todas estas variables están disponibles, además de los elementos en sus fuentes de datos que pueden contener valores que también puede utilizar en funciones. **Establecer el tamaño de un gráfico de forma variable** Si asigna la variable global $MT_DeviceWidth como el ancho para la creación del gráfico en la ventana de propiedades, en tiempo de ejecución, su gráfico se ajustará automáticamente al ancho de cualquier dispositivo que se encuentre en orientación vertical, independientemente de su sistema operativo móvil o tamaño de pantalla. No es necesario que defina la altura del gráfico. La altura se genera automáticamente, por lo que se puede visualizar todo el gráfico sin necesidad de desplazarse. También puede utilizar variables globales y locales con visibilidad dependiente del dispositivo, una opción en el menú contextual, para definir el comportamiento en condiciones específicas, como la orientación vertical u horizontal. La solución de "Datos de ventas de widgets" en el servidor de demostración de Altova MobileTogether muestra cómo aplicar variables locales a los datos de los gráficos de diferentes maneras, según la orientación del dispositivo. Por ejemplo, la página "Ventas por región" muestra un gráfico de líneas en orientación vertical o un gráfico de barras en 3D en orientación horizontal. ![Un gráfico de barras tridimensional diseñado en MobileTogether, tal como se visualiza en un teléfono Android](https://lh4.ggpht.com/-7ijQLURgs5c/VIc8xypd59I/AAAAAAAAB4A/hgwqmhCvwFY/Android%252520shot%25255B4%25255D.png?imgmax=800 "A 3-D Bar Graph Designed in MobileTogether as Viewed on an Android Phone") La solución de datos de ventas de widgets está incluida en los ejemplos instalados con MobileTogether Designer, por lo que puede examinarla para ver cómo se construyó. Los gráficos definidos por la variable `$MT_DeviceWidth` mantienen el mismo tamaño cuando el dispositivo se rota y no aprovechan de manera eficiente el espacio disponible en el dispositivo, como se puede observar en el ejemplo del gráfico de barras que se muestra a continuación. ![Ejemplo de un gráfico de barras horizontales 1](https://lh6.ggpht.com/-Q-fzzxWIwwc/VIc8yUVZ97I/AAAAAAAAB4E/A8do4TBfJyE/photo1framed%25255B23%25255D.png?imgmax=800 "Horizontal Bar Graph Example 1") Una alternativa mejor es la variable global $MT_CanvasX. El valor de $MT_CanvasX cambia cuando el dispositivo se rota, y el gráfico se redibuja automáticamente. Si utilizamos $MT_CanvasX para definir el ancho del gráfico en la ventana de propiedades, el gráfico se redibuja de forma más elegante para adaptarse a la pantalla en orientación horizontal, dejando más espacio para el texto de la leyenda a lo largo del eje horizontal. ![Gráfico de barras horizontal que se ajusta automáticamente al tamaño de la pantalla gracias a MobileTogether](https://lh6.ggpht.com/-8-LS-SPDvAU/VIc8yyI_eWI/AAAAAAAAB4M/XfeVo6k1nlQ/photo2framed%25255B3%25255D.png?imgmax=800 "Horizontal Bar Graph Automatically Sized to Fit Screen by MobileTogether") **Puede** [**ver una demostración en video**](https://www.altova.com/es/mobiletogether/demos.html) **sobre la creación de gráficos en MobileTogether Designer en el sitio web de Altova,** [**descargar una versión de prueba gratuita**](https://www.altova.com/es/download/mobiletogether-designer.html) **que incluye más de 30 soluciones de ejemplo y empezar a crear las suyas propias.**