Maqetta es sinónimo de maqueta, parte 1: diseño de una UI móvil en HTML5

Arrastre y suelte creaciones en HTML5 a su navegador

¿Necesita crear el prototipo de una aplicación en HTML5? Olvídese de la codificación. La coordinación mano-ojo es lo único que necesita para crear prototipos con Maqetta, una herramienta basada en Web del tipo WYSIWYG (lo que se ve es lo que se obtiene) para aplicaciones móviles y de escritorio. Este primer artículo de una serie de tres partes presenta este proyecto gratuito de código abierto que se ejecuta en un navegador y les permite a los diseñadores arrastrar y soltar una gran cantidad de widgets para desarrollar bocetos de UI dinámicos. En la Parte 1, conozca las principales funciones y características de Maqetta a partir de la creación del prototipo de una aplicación móvil realista.

Tony Erwin, Software Engineer, IBM

Tony Erwin - author photoTony Erwin es ingeniero de software del grupo IBM Emerging Internet Technologies y miembro principal del equipo de desarrollo de Maqetta. Tony trabaja en IBM desde 1998 y tiene una vasta experiencia en diseño y desarrollo de UI con una gran variedad de tecnologías y herramientas. Antes de unirse a IBM, Tony obtuvo una maestría en Ciencia de la Computación de la Universidad de Indiana y un título de grado en Ciencia de la Computación del Instituto de Tecnología Rose-Hulman.



20-05-2013

Sobre esta serie

Esta serie le muestra cómo usar Maqetta para crear prototipos de interfaces de usuario en HTML5.

  • En la Parte 1, conozca las principales características de Maqetta a través de la creación del prototipo de una sofisticada aplicación móvil.
  • En la Parte 2, lleve su prototipo al siguiente nivel escribiendo JavaScript personalizado para añadir funcionalidades interactivas.
  • En la Parte 3, use PhoneGap para convertir el prototipo de aplicación móvil generado con Maqetta en una aplicación nativa lista para implementar en dispositivos reales.

Aprenda más sobre el uso de Maqetta en el blog de Tony en developerWorks.

Maqetta es una herramienta de creación visual gratuita y de código abierto que hace que el diseño de interfaces de usuario enriquecidas en HTML5 sea simple y divertido. Los diseñadores de UI pueden usar Maqetta, que se ejecuta en un navegador sin plug-ins ni descargas, para desarrollar prototipos funcionales para aplicaciones móviles y de escritorio. Simplemente arrastre y suelte widgets en el canvas de un dispositivo para ensamblar un boceto de UI en tiempo real y luego pase el prototipo de UI a un diseñador para la codificación.

Maqetta y Dojo Foundation

Maqetta fue creada originalmente por IBM y donada a Dojo Foundation como proyecto de código abierto en abril de 2011. Está disponible bajo los términos de licencia liberales y comerciales de código abierto de Dojo. Maqetta comúnmente se actualiza cada unos pocos meses y recibe mejoras continuas desde que se puso a disposición del público. Los releases del segundo semestre de 2012 permitieron una importante reconstrucción de UI y significativas mejoras de rendimiento.


Diseño de UI para una aplicación de registro de peso

En general, las interfaces de usuario de dispositivos móviles constan de una serie de pantallas o paneles llamados vistas, que aparecen y desaparecen a medida que el usuario navega por las distintas partes de la aplicación. El diagrama de flujo de Figura 1 muestra las cuatro vistas que conformarán nuestra aplicación así como también el flujo de navegación de interacción del usuario.

Las flechas continuas del diagrama de flujo representan la navegación hacia adelante y las flechas de líneas de puntos representan la navegación hacia atrás a una vista anterior. La etiqueta en cada vista representa el ID que le asignaremos a esa vista cuando la creemos en Maqetta.

Figura 1. Diagrama de flujo de la aplicación de registro de peso Agrandar la imagen
A flowchart diagram for the weight tracker application.

Las cuatro vistas de la aplicación son:

  • mainView es la primera vista que aparece cuando el usuario inicia la aplicación. Contiene una lista de números que representan los pesos que introduce el usuario. Al hacer clic en cualquiera de los pesos que aparecen en la lista se pasa a la siguiente vista, detailsView. Opcionalmente, un usuario podría hacer clic en el botón más (+) en la cabecera de la aplicación para añadir un peso nuevo.
  • detailsView muestra las propiedades (tales como peso, fecha de introducción y notas) asociadas con una entrada de peso determinada. Al hacer clic en el elemento Date , aparece la vista detailsView_Date . Al hacer clic en el elemento Notes , aparece la vista detailsView_Notes . Al hacer clic en el botón Home , el usuario vuelve a mainView.
  • detailsView_Date le permite al usuario definir la fecha de la entrada de peso con una rueda. Este es un punto final en la navegación, ya que el único lugar al que puede ir el usuario desde aquí es hacia atrás a detailsView. Al hacer clic en el botón Details en la cabecera de la aplicación, el usuario vuelve a detailsView.
  • detailsView_Notes le permite al usuario escribir notas relacionadas con la entrada de peso en un área de texto de forma libre. Este también es un punto final en la navegación, ya que el único lugar al que se puede ir el usuario desde aquí es hacia atrás a detailsView. Al hacer clic en el botón Details en la cabecera de la aplicación, el usuario vuelve a detailsView.

Si bien el diseño del registro de peso puede parecer complejo, usted puede crear visualmente un boceto de UI en Maqetta sin necesidad de escribir código. Lo único que necesita es arrastrar y soltar algunos widgets y editar algunas propiedades.


Inicie Maqetta en la nube

Instalación de Maqetta

El equipo de Maqetta ofrece una versión gratuita, no comercial y alojada en la nube en Maqetta.org, que puede usar tal como está, bajo su responsabilidad.

También puede instalar Maqetta en su propio servidor de intranet descargándola desde Maqetta downloads . Necesitará Maqetta 8.0 o posterior para seguir correctamente los ejemplos de esta serie.

Aprovechará al máximo este artículo si sigue y desarrolla la aplicación mientras lo lee. Es fácil — ¡y gratuito! — comenzar:

  1. Vaya a Maqetta.org utilizando el release más reciente de Chrome, Firefox o Safari.
  2. Haga clic en Launch Maqetta .
  3. Si ya tiene una cuenta:
    1. Ingrese su email y contraseña.
    2. Haga clic en Log In.
  4. Si no tiene una cuenta:
    1. Haga clic en el botón Register al final de la página.
    2. En la página Create an Account, ingrese su email y haga clic en Sign up.
    3. Busque un email con un enlace para confirmar el registro y haga clic en él.
    4. Después de confirmar la solicitud, ingrese su email y contraseña, y haga clic en Log In.

Página de presentación de Maqetta

Una vez que inicia sesión, verá un entorno de trabajo que muestra la página de presentación de Maqetta. La página de presentación, que se muestra en la Figura 2, ofrece un punto de inicio práctico para las funciones principales de Maqetta. Es el punto de partida para crear una aplicación nueva y también contiene enlaces a la documentación, tutoriales y hojas de apuntes de Maqetta (consulte Recursos). Además, puede acceder a todas las funciones de la página de presentación desde los menús desplegables en la parte superior de la página.

Figura 2. Página de presentación de Maqetta Agrandar la imagen
The Maqetta welcome page

Creación de un proyecto nuevo

Cuando usa Maqetta por primera vez, trabajará con archivos en el proyecto predeterminado llamado project1. Si bien no es estrictamente necesario, se recomienda crear un proyecto por cada aplicación que desarrolle para mantenerse organizado y facilitar la exportación del trabajo a otras herramientas. Comencemos creando un proyecto nuevo para la aplicación de registro de peso:

  1. Seleccione la opción Create > Project... en el menú de la barra de herramientas en la parte superior de la página de Maqetta.
  2. En el cuadro de diálogo New Project, escriba el nombre "weightTracker" para el proyecto, como se muestra en la Figura 3.
    Figura 3. Cuadro de diálogo New Project
    New Project dialog
  3. Haga clic en Create .

Si desea volver a project1 (o a cualquier otro proyecto), selecciónelo en la lista de proyectos de la paleta Files.

Creación de una aplicación móvil

Ahora, creemos el archivo HTML que utilizará la aplicación. (Cuando haya completado los pasos de este artículo, podrá comparar su trabajo con el archivo HTML de la sección Downloads a continuación).

  1. Seleccione la opción Create > Mobile Application... del menú.
  2. En el cuadro de diálogo Create a Mobile Application (vea la Figura 4), escriba el nombre de archivo "index.html". (Observe que index.html será el nombre de archivo requerido si decide desarrollar la aplicación de registro de peso para implementar en dispositivos móviles usando PhoneGap. Exploraremos esa opción en la Parte 3 de esta serie, así que puede nombrar correctamente el archivo en este momento).
  3. Deje el campo de dispositivo establecido en iphone . Si lo desea, puede cambiar el tipo de dispositivo más adelante.
    Figura 4. Creación de un cuadro de diálogo de la aplicación móvil
    Create a Mobile Application dialog
  4. Haga clic en Create .

Editor de página móvil

Después de descartar el cuadro de diálogo Create a Mobile Application, la página de presentación de Maqetta será sustituida por el Editor de página móvil de Maqetta que muestra la silueta vacía de un iPhone, como ilustra la Figura 5. Además de iPhone, Maqetta es compatible con otros teléfonos y tabletas populares como iPad, Android y Blackberry. Independientemente del dispositivo que haya seleccionado, el Editor de página móvil mostrará una réplica en tamaño real del dispositivo donde se visualiza la aplicación. A medida que arrastra y suelta widgets móviles en la silueta, serán representados con la apariencia y el estilo de la plataforma de destino.

Figura 5. Canvas de la nueva aplicación móvil en la silueta de un iPhone
A new mobile application canvas with the iPhone silhouette

Desarrollo de la vista principal

Después de crear el archivo HTML, es momento de comenzar a diseñar la vista mainView del diagrama de flujo.

La pestaña Palette del lado izquierdo del entorno de trabajo contiene todos los widgets que se pueden aplicar según el tipo de aplicación que se está diseñando (en este caso, una aplicación móvil). Los widgets están organizados por sección según su propósito. Los widgets de las carpetas Views, Heading, Lists, Controls y Containers pertenecen a biblioteca móvil de Dojo (consulte Recursos). Para el registro de peso, usaremos solo algunos de los 50 widgets de esas carpetas.

  1. Abra la sección Views para ver los widgets de vistas disponibles, como se muestra en la Figura 6:
    Figura 6. Widgets de vistas móviles de Maqetta
    Maqetta mobile view widgets
  2. Seleccione el widget ScrollableView , el primero de la sección Views, y arrástrelo y suéltelo en la silueta del dispositivo. La pantalla debe ser similar a la de la captura de la Figura 7:
    Figura 7. Cómo añadir ScrollableView a la silueta del iPhone Agrandar la imagen
    Adding ScrollableView to the iPhone silhouette.
    Tenga en cuenta lo siguiente:
    • Ahora, el canvas de la página tiene un fondo gris azulado. Esto se debe a que el primer widget Dojo Mobile que se añadió a la página incorpora las páginas de estilo CSS que recrean la apariencia y el estilo nativos de un dispositivo móvil particular.
    • Hay un rectángulo de selección alrededor de la página. Esto es porque está seleccionada la opción ScrollableView , cuyo ancho y alto predeterminado es 100%.
  3. Ahora, haga clic en la pestaña Widget en el lado derecho del entorno de trabajo de Maqetta. Esto expande la paleta Properties enfocándose en la sección de propiedades específicas del widget, como se muestra en la Figura 8. Observe que el ID está establecido de forma predeterminada en ScrollableView_0 y que la parte superior de la paleta Properties muestra for: ScrollableView #ScrollableView_0 (que indica el tipo y el ID del widget al que pertenecen las propiedades).
    Figura 8. Pestaña Properties del entorno de trabajo de Maqetta Agrandar la imagen
    Maqetta workbench showing the Properties tab
  4. Escriba "mainView" en el campo ID y seleccione Return para confirmar el cambio. Como puede ver en la Figura 9, la parte superior de la paleta Properties ahora muestra for: ScrollableView #mainView. Este ID coincide con el diseño que se muestra en el diagrama de flujo original de la aplicación. (Vea la Figura 1.)
    Figura 9. Paleta Properties para las vistas
    Properties palette for views
    Tenga en cuenta que el ID de una vista es importante. La biblioteca de widgets de Dojo Mobile usa el ID de la vista como referencia de las vistas cuando aparecen y desaparecen durante la navegación del usuario. Teniendo en cuenta esto, determinará la referencia de los IDs de vistas a medida que configure el flujo de navegación de la aplicación con Maqetta. Y si continúa con la Parte 2 de esta serie, usará los IDs en el código, por eso es importante establecerlos correctamente.
  5. Observe la paleta Scenes en la esquina inferior derecha del entorno de trabajo, que se muestra en la Figura 10 a continuación. Todas las vistas que usted crea aparecen bajo el nodo Dojo Mobile Views en esta paleta. En este caso, el nodo ahora debe contener ScrollableView #mainView.
    Figura 10. Paleta Scenes
    The Scenes palette

Adición de una cabecera

Sigamos construyendo la vista mainView añadiendo una cabecera:

  1. Arrastre y suelte un widget Heading de la sección Heading de la paleta Widget en el centro de la silueta del dispositivo. (Si tiene problemas para encontrar un widget, puede escribir el nombre en el cuadro de búsqueda en la parte superior de la paleta de widgets).
  2. Escriba “Weight Tracker” en el cuadro de texto que aparece, como se muestra en la Figura 11y haga clic en OK para establecer el texto de la cabecera. Si desea cambiar el texto más adelante, simplemente haga doble clic en la cabecera para que aparezca nuevamente el cuadro de texto. (Tenga en cuenta que este proceso se aplica a todos los widgets que poseen un cuadro de diálogo para entrada de datos cuando se crean por primera vez).
    Figura 11. Adición de una cabecera
    Add a heading
  3. En la sección Widget de la paleta Properties que se muestra en la Figura 12, cambie el atributo fixed por top. Esto hace que la cabecera permanezca en la misma ubicación (en la parte superior de la pantalla de la aplicación) si se requiere desplazamiento vertical en otra parte de la vista.
    Figura 12. Propiedades de la cabecera
    Set the heading properties

Adición de la lista de pesos

Unidades de medida

Este prototipo usa unidades de medida del sistema inglés, también conocido como Sistema Usual en Estados Unidos. Sin embargo, antes de la implementación, nos gustaría permitirle al usuario elegir entre unidades de medida del sistema inglés o del sistema métrico.

El próximo paso es añadir un widget que muestre la lista de pesos ingresados por el usuario:

  1. Arrastre y suelte EdgeToEdgeDataList de la sección Lists de la paleta Widget y colóquelo en la parte superior del panel que acaba de añadir a la silueta del iPhone. Se crea la lista de datos y un cuadro de diálogo para establecer el contenido de la lista que aparecerá, como se muestra en la Figura 13. En cada línea, el primer valor es la etiqueta que muestra esa fila y el segundo valor es el ID de la vista a la que navegará la aplicación cuando se haga clic en la fila.
    Figura 13. Adición de EdgeToEdgeDataList
    Add EdgeToEdgeDataList
  2. Cambie el contenido del cuadro de texto para el conjunto de pesos (en libras) que se muestra en el Listado 1 y haga clic en OK. Tenga en cuenta que detailsView es el ID de la vista a la que navegará la aplicación cuando se haga clic en un determinado peso o valor de fila. Hemos definido esta navegación en el diagrama de flujo original de la aplicación (vea la Figura 1).
    Listado 1. Entrada para EdgeToEdgeDataList
    149, detailsView
    150, detailsView
    151, detailsView
    148, detailsView
    146, detailsView
  3. Vuelva a la paleta Properties y cambie el ID de la lista a weightList. En este punto, está casi terminada la vista mainView. Debe ver algo similar a la captura de pantalla de la Figura 14:
    Figura 14. Vista principal en el Editor de página móvil con representación de iPhone
    Main view in the Mobile Page Editor with iPhone rendering
    Recuerde que hemos establecido el ID aquí porque será importante en la Parte 2. En general, un diseñador de UI no establece el ID para un widget que no corresponda a una vista, como weightList; eso ocurre durante la codificación de la UI de la aplicación.

Cambio de tipo de dispositivo

Con frecuencia, los diseñadores desean ver la representación del diseño de una UI para diferentes entornos. Afortunadamente, es fácil cambiar el tipo de dispositivo y representarlo en Maqetta.

  1. Abra el menú Document Settings, que es el segundo ícono desde la derecha en la barra de herramientas del editor móvil, y haga and clic en Choose device. (Observe que este menú también tiene una opción para rotar el dispositivo).
    Figura 15. Menú Document Settings
    Document Settings menu
  2. Si hay cambios sin guardar en el archivo HTML, recibirá una advertencia de que debe guardar los cambios antes de cambiar de dispositivo, como se muestra en la Figura 16. Haga clic en el botón Save .
    Figura 16. Advertencia.
    Screenshot of a warning message
  3. Al hacer clic en Save aparece el cuadro de diálogo para elegir la silueta de un dispositivo. El cuadro de diálogo contiene una lista desplegable con una cantidad de opciones de dispositivos, como se muestra en la Figura 17:
    Figura 17. Elija la silueta de un dispositivo
    Choose a device silhouette
  4. Elija el dispositivo en el que desea ver la representación de la UI (por ejemplo, android_340x480) y haga clic en Select. La representación del dispositivo en Maqetta cambiará para que coincida con el dispositivo seleccionado, como se muestra en la Figura 18:
    Figura 18. Representación de la vista mainView para Android en el editor de página de Maqetta
    The Maqetta page editor renders mainView for Android
    Puede continuar arrastrando y soltando widgets, y editando sus propiedades como si nunca hubiese cambiado de dispositivo, pero la apariencia y el estilo será la del nuevo dispositivo seleccionado.
  5. Para restablecer la representación, seleccione Choose device en el menú Document Settings, seleccione iphone de la lista de dispositivos y haga clic en Select.

Inicio de la vista Details

A continuación, comenzaremos a construir la vista Details (detailsView) del diagrama de flujo que se muestra en la Figura 1. Esta vista muestra los detalles de entradas de peso determinadas.

  1. Seleccione una vista ScrollableView en la sección Views de la paleta Widget y arrástrela y suéltela en la vista mainView. Esta acción añade una nueva vista como un hermano (es decir, en el mismo nivel del árbol de elementos) a la vista actual (mainView, en este caso). La vista añadida recientemente estará vacía y seleccionada.
  2. En la paleta Properties, cambie el ID de la nueva vista a detailsView. Como se mencionó anteriormente, es muy importante establecer el ID correctamente. Cuando configuramos EdgeToEdgeDataList en mainView, la configuramos para navegar a otra vista con un ID de detailsView.
  3. Mire la paleta Scenes en la Figura 19:
    Figura 19. Vista nueva en la paleta Scenes
    Scenes palette showing the new view
    Observe lo siguiente:
    • Ahora, hay dos vistas en Dojo Mobile Views: ScrollableView #mainView y ScrollableView #detailsView. La nueva vista es hermana de la primera.
    • La segunda vista pasa a estar seleccionada y visible (al igual que lo que ocurre cuando se añade un widget nuevo), pero observe también que el widget de la primera vista ahora está visible. Con Dojo Mobile, hay un solo widget visible por vez. Maqetta imita este comportamiento en tiempo de ejecución al momento del diseño administrando la visibilidad de los widgets de la vista de modo que cuando se muestre una vista, se oculten todos los widgets de la vista hermana.
    • Puede alternar entre widgets de vistas haciendo clic en ellos en Dojo Mobile Views. La vista seleccionada aquí estará visible en la silueta del dispositivo.

Adición de la cabecera de la vista Details

Sigamos construyendo la vista detailsView añadiendo una cabecera:

  1. Asegúrese de que detailsView está seleccionada en la paleta Scenes.
  2. Seleccione el widget Heading en la sección Heading de la paleta Widget y arrástrelo y suéltelo en la vista.
  3. En el cuadro de diálogo que aparece, escriba "Details" en el cuadro de texto y haga clic en OK para cambiar el texto de la cabecera.
  4. Haga los siguientes cambios en la paleta Properties, que se muestra en la Figura 20:
    • Cambie el atributo back por Home. Esto crea un botón con la etiqueta "Home" dentro de la cabecera, que envía al usuario a la vista anterior.
    • Cambie el atributo moveTo del botón por mainView seleccionando mainView desde el menú desplegable. Esto hace que la aplicación navegue a la vista principal siempre que se haga clic en el botón Back .
    • Cambie el atributo fixed del botón por top.
    Figura 20. Paleta Properties para la cabecera
    Properties palette for heading

La vista detailsView ahora debe ser similar a la captura de pantalla de la Figura 21.

Figura 21. Vista Details con una cabecera
Details view with a heading

Vista previa y ejecución de la aplicación

Ahora, puede ejecutar una vista previa en tiempo real en cualquier momento mientras trabaja en Maqetta. Después de diseñar dos vistas y definir la navegación entre ellas, ejecutemos la vista previa de la versión del prototipo de registro de peso para asegurarnos de que todo se configuró correctamente hasta el momento.

  1. En la paleta Scenes, comience seleccionando la vista mainView. la vista seleccionada cuando se ejecuta la vista previa es la primera que se muestra.
  2. En la barra de herramientas, haga clic en el ícono Preview in Browser (la última entrada de la barra de herramientas). Esto abre una nueva pestaña del navegador que contiene la aplicación de registro de peso en ejecución dentro de la silueta del dispositivo móvil iPhone, como se muestra en la Figura 22:
    Figura 22. Vista previa del registro de peso en ejecución en la silueta del iPhone
    Weight tracker preview running in the iPhone silhouette
  3. Haga clic en las entradas de la lista desplegable de pesos y observe que la vista detailsView reemplaza a la vista mainView. Los widgets de la aplicación en el modo de vista previa responden a la interacción del usuario como si estuvieran ejecutándose en el dispositivo.
  4. Haga clic en el botón Home en la cabecera detailsView y observe que vuelve a aparecer mainView .

De esta forma, ¡la prueba del prototipo se realizó correctamente!

Cambio de dispositivo y orientación en la vista previa

Aquí incluyo algunas sugerencias más para la vista previa. En primer lugar, observe que la vista previa tiene controles para cambiar de dispositivo, ajustar el nivel de zoom y cambiar la orientación de la vista de la aplicación de vertical a horizontal. Puede experimentar con estos controles cambiando de dispositivo y utilizando el botón Angle para deslizar la vista hacia un lado. Mi representación actualizada puede verse en la Figura 23.

Figura 23. Vista previa horizontal de Android Agrandar la imagen
Android preview in landscape

Observe que el código permanece activo, así que puede seguir probando el flujo de navegación entre mainView y detailsView con la nueva configuración.

Ejecución de la aplicación en un navegador móvil

Finalmente, observe el URL junto a la etiqueta Previewing en la vista previa de Maqetta, que se muestra en la Figura 24.

Figura 24. Barra de herramientas de vista previa con URL Agrandar la imagen
Preview toolbar with URL

Puede usar este URL para ver un prototipo en el navegador de un dispositivo móvil, por ejemplo, pegándolo en un navegador Safari en un iPhone. Si bien es muy útil realizar la vista previa de la aplicación en un navegador móvil (especialmente si su objetivo final es crear una aplicación alojada en la Web), tenga en cuenta que es diferente que instalar y ejecutar la aplicación como una aplicación nativa real. Veremos cómo funciona esto en la Parte 3 de esta serie, cuando combinemos Maqetta con PhoneGap.


Creación de una rueda para la vista Details

Después de realizar la vista previa de las funciones básicas y navegación de nuestra aplicación móvil, volvamos a la vista Details y construyamos los widgets que les permiten a los usuarios especificar el peso.

Construiremos un widget RoundRect (etiquetado con RoundRectCategory) para que actúe como contenedor de un widget SpinWheel . La rueda SpinWheel es similar a una balanza. Lo llenaremos con números que representan los pesos en libras (recuerde que usamos unidades de medida del sistema inglés deliberadamente para el prototipo de la aplicación) y ajustaremos un poco la presentación. En el proceso, usaremos algunas partes de la paleta Properties que aun no hemos explorado — , por ejemplo, las pestañas Layout y Margin.

Construcción de RoundRect y SpinWheel

  1. Vuelva al editor de página de Maqetta y seleccione detailsView en la paleta Scenes.
  2. Seleccione el widget RoundRectCategory en la sección Lists de la paleta Widget y arrástrelo y suéltelo en el canvas de detailsView . Esto actuará como la etiqueta de nuestro SpinWheel. Escriba "Weight (lbs)" en el cuadro de texto que aparece, como se muestra en Figura 25y haga clic en OK.
    Figura 25. Adición de RoundRectCategory a la vista Details
    Adding RoundRectCategory to the Details view
  3. Ahora, arrastre y suelte un RoundRect desde la sección Containers > Dojo de la paleta Widget en la vista que está debajo de RoundRectCategory, tal como se muestra en la Figura 26.
    Figura 26. Adición de RoundRect a la vista Details
    Adding a RoundRect to the Details view
  4. Arrastre un widget SpinWheel de la sección Controls > Pickers de la paleta Widget, y suéltelo en la parte superior de RoundRect, como hijo del rectángulo (es decir, contenido por el rectángulo).

El widget SpinWheel que se muestra en la Figura 27 consta de dos ranuras que contienen letras. Ocasionalmente, necesitamos tres ranuras que contengan dígitos, simulando una balanza.

Figura 27. SpinWheel predeterminado en la vista Details
The default SpinWheel in the Details view

Personalización de SpinWheel con tres ranuras

  1. Use la paleta Properties para cambiar el ID de SpinWheel por weightSpinWheel. A continuación, seleccione la primera ranura de SpinWheel , hágale doble clic y escriba "0,1,2,3,4,5,6,7,8,9" en el cuadro de texto que aparece. Haga clic en OK.
    Figura 28. Modificación del contenido de la primera ranura de SpinWheel
    Changing the content of first SpinWheel slot
  2. Con la primera ranura todavía seleccionada, cambie el atributo value en la sección Widget de la paleta Properties por 1. Observe cómo el valor del atributo labels que se muestra en la Figura 29 ahora coincide con lo especificado:
    Figura 29. Definición de propiedades para la primera ranura de SpinWheel
    Set properties for the first SpinWheel slot
  3. Haga clic en la pestaña Layout en la paleta Properties y establezca el atributo witdth de la primera ranura de SpinWheel en 70 px, como se muestra en la Figura 30. Observe cómo cambia el tamaño de la ranura en el editor de página dejando menos espacio alrededor de los dígitos.
    Figura 30. Propiedades de diseño de la primera ranura de SpinWheel
    Layout properties for the first SpinWheel slot
  4. Seleccione la segunda ranura de SpinWheel y hágale doble clic. Escriba "0,1,2,3,4,5,6,7,8,9" en el cuadro de texto que aparece y presione la tecla Return .
  5. Con la segunda ranura seleccionada, cambie el atributo value en la sección Widget de la paleta Properties por 5y establezca el atributo width en la sección Layout en 70 px.
  6. Ahora, arrastre una tercera ranura de SpinWheelSlot desde la sección Controls > Pickers de la paleta Widget al SpinWheel y suéltela del lado derecho de la segunda ranura. Esta nueva ranura será hija de SpinWheel y hermana de las otras dos ranuras.
  7. Cambie el texto en el cuadro de texto que aparece por "0,1,2,3,4,5,6,7,8,9" y haga clic en OK.
    Figura 31. Adición de la tercera ranura
    Adding the third slot
  8. Con la tercera ranura seleccionada, cambie el atributo value en la sección Widget de la paleta Properties por 0 y establezca el atributo width en la sección Layout en 70 px. La tercera ranura debe verse como en la Figura 32:
    Figura 32. Tercera ranura terminada
    The finished third slot

Sugerencia.

En ocasiones, puede resultar complicado seleccionar un widget padre cuando sus widgets hijos también se pueden seleccionar. Una forma fácil de seleccionar un widget padre es haciendo clic con el botón secundario en cualquier widget hijo seleccionado y elegir Select parent .

Modificación del diseño

El SpinWheel es demasiado ancho para sus tres ranuras, pero podemos arreglar esto cambiando el atributo width de SpinWheel :

  1. Seleccione SpinWheel haciendo clic en el área junto a la última ranura.
  2. En la sección Layout de la pestaña Properties, establezca el atributo width en 222 px. SpinWheel debe verse como en la Figura 33.
    Figura 33. SpinWheel mejorado
    Improved SpinWheel

A continuación, observe todo el espacio en blancoqueda a la derecha de SpinWheel en el canvas del iPhone. Si se centra SpinWheel , se mejorará el diseño general de la UI. Podemos ajustar los márgenes de SpinWheel de la siguiente manera:

  1. Haga clic en la sección Margins de la paleta Properties.
  2. Marque la casilla junto a Show t/r/b/l.
  3. Cambie margin-right y margin-left a auto.

Estos ajustes se muestran en la Figura 34.

Figura 34. Ajuste de los márgenes de SpinWheel
Adjusting the SpinWheel's margins

El SpinWheel ahora está terminado con un valor de 150 y una alineación centrada dentro del rectángulo, como se muestra en Figura 35.

Figura 35. SpinWheel terminado
The completed SpinWheel

Terminación de la vista Details

Completaremos la vista Details agregando un widget RoundRectList que muestre la fecha y las notas del usuario asociadas con una entrada de peso determinada. Los usuarios de la aplicación usarán RoundRectList para navegar a las vistas Date y Notes. Antes de desarrollar el widget RoundRectList, tenemos que crear marcadores de posición para las vistas Date y Notes, que facilitarán la configuración de los flujos de navegación.

Adición de marcadores de posición a las vistas

Comience creando dos marcadores de posición:

  1. Arrastre un widget ScrollableView desde la paleta Widget a la vista actual (en la cabecera o en el área gris). Como se observó anteriormente, esto creará una vista vacía que aparece seleccionada.
  2. Use la paleta Properties para cambiar el ID de la nueva vista a detailsView_Date.
  3. Arrastre otro widget ScrollableView de la paleta Widget a detailsView_Date.
  4. Use la paleta Properties para cambiar el ID de la nueva vista a detailsView_Notes.

Ahora, debe ver las cuatro vistas del diagrama de flujo en la paleta Scenes, como se muestra en la Figura 36.

Figura 36. Las cuatro vistas en la paleta Scenes
Scenes palette showing all four views

Creación de una lista para navegar por las vistas

El próximo paso es añadir un widget RoundRectList , que le permitirá al usuario navegar desde la vista Details de un peso determinado a las vistas Date y Notes.

  1. Seleccione detailsView en la paleta Scenes para que sea la vista activa.
  2. Arrastre un widget RoundRectList de la paleta Widgets a la vista, debajo de RoundRect que contiene SpinWheel.
  3. En el cuadro de texto que aparece, cada línea será traducida por la etiqueta para ListItem. Escriba "Date" en una línea y "Notes" en la segunda línea, como se muestra en la Figura 37:
    Figura 37. Entrada de RoundRectList
    RoundRectList input
  4. Haga clic en OK.

Seleccione el elemento de la lista que tiene la etiqueta "Date" y realice los siguientes cambios en la sección Widget de la paleta Properties:

  1. Establezca moveTo en detailsView_Date seleccionándolo de la lista desplegable junto a la etiqueta del campo. La aplicación de registro de peso navegará a la vista detailsView_Date cuando el usuario haga clic en este elemento.
  2. Modifique rightText por "2012-10-09", que hará que el texto aparezca del lado derecho del elemento. (Tenga en cuenta que no estamos realizando la localización de este prototipo; todas las fechas tendrán el formato según la norma genérica ISO-8601 . Utilice este formato ya que será importante para la Parte 2 de esta serie).
  3. Cambie el ID por dateListItem.
    Figura 38. Propiedades del elemento de la lista Date
    Date list item properties
  4. Seleccione el segundo elemento de la lista (con la etiqueta “Notes”) y realice los siguientes cambios en la paleta Properties:
    • Establezca moveTo en detailsView_Notes seleccionándolo de la lista desplegable junto a la etiqueta del campo. La aplicación de registro de peso navegará a la vista detailsView_Notes cuando el usuario haga clic en este elemento.
    • Modifique rightText por "Ran 5 mi..." Esto le da al usuario una vista previa de la nota completa, que en este caso es: "Ran 5 miles and ate lots of broccoli!"
    • Cambie el ID por notesListItem.

La vista detailsView está completa y debe verse como la captura de pantalla de la Figura 39.

Figura 39. Vista Details terminada
The completed Details view

Desarrollo de la vista Data

El desarrollo de la tercera vista, detailsView_Date, debería ser bastante intuitivo en este momento. Siga estos pasos:

  1. Seleccione la vista detailsView_Date en la paleta Scenes.
  2. Arrastre y suelte un widget Heading de la paleta Widgets en la vista. Escriba "Date" en el cuadro de texto que aparece y haga clic en OK.
  3. En la paleta Properties, cambie el atributo back por "Details", el atributo moveTo por detailsView (para que coincida con el diseño del diagrama de flujo) y el atributo fixed por top.
  4. Arrastre y suelte un widget SpinWheelDatePicker (desde la sección Controls > Pickers ) debajo de la cabecera.
  5. En la paleta Properties, cambie el ID por dateSpinWheel.
  6. En la sección Margins de la paleta Properties, haga clic en la casilla de verificación junto a show t/r/b/l y cambie margin-top por 10 px para añadir un pequeño espacio entre la cabecera y la rueda.

La vista terminada debe verse como en la captura de pantalla de la Figura 40.

Figura 40. Vista Date terminada
Completed Date view

Desarrollo de la vista Notes

Ahora, desarrollaremos la cuarta, y última, vista:

  1. Seleccione detailsView_Notes en la paleta Scenes.
  2. Arrastre y suelte un widget Heading de la paleta Widgets en la vista. Escriba "Notes" en el cuadro de texto que aparece y haga clic en OK.
  3. En la sección Widget de la pestaña Properties, cambie el atributo back por "Details", el atributo moveTo por detailsView (para que coincida con el diseño del diagrama de flujo) y el atributo fixed por top.
  4. Arrastre y suelte un widget RoundRect (desde la sección Containers > Dojo ) debajo de la cabecera.
  5. Arrastre y suelte un widget TextArea (desde la sección Controls > TextBox ) a RoundRect.
  6. Haga doble clic en el nuevo cuadro de texto que aparece, escriba "Ran 5 miles and ate lots of broccoli!" y haga clic en OK.
  7. Aumente el tamaño del área de texto. En la sección Layout de la pestaña Properties, establezca el atributo width en 100 % y el atributo height en 150 px.
  8. Cambie el ID por notesTextArea.

La vista Notes debe verse como en la captura de pantalla de la Figura 41.

Figura 41. Vista Notes
Notes view

Ajustes de precisión y terminación de la aplicación

En este punto, el prototipo de la UI está prácticamente completo, pero aún es necesario proporcionar un mecanismo para que el usuario pueda añadir widgets para nuevas entradas. Para ello, añadiremos el botón "más" (+). Además, añadiremos una última pieza para pulir la UI de nuestro registro de peso permitiendo que los usuarios vean la fecha junto con la entrada de peso en todas las filas de la lista de pesos.

Adición del botón "más" (+)

Para añadir el botón:

  1. Seleccione la vista mainView en la paleta Scenes para activarla.
  2. Arrastre y suelte un widget ToolbarButton (desde la sección Heading de la paleta Widget) en la cabecera "Weight Tracker". Cambie el valor en el cuadro de texto que aparece por "+" y haga clic en OK.
  3. Los botones para añadir nuevas entradas en aplicaciones móviles generalmente están ubicados a la derecha de la cabecera. Para hacer esto, cambie el atributo float por right en la sección Layout de la paleta Properties.
  4. En la sección Widget de la pestaña Properties, cambie el atributo moveTo por detailsView para que la navegación empiece cuando el usuario haga clic en el botón.
  5. Cambie el atributo ID por addWeightButton.

Figura 42 muestra cómo debe verse la vista mainView después de completar estos pasos.

Figura 42. Botón "más" (+) para añadir una entrada de peso
Plus button to add a weight entry

Adición de texto a la derecha EdgeToEdgeDataList

A continuación (y por último), queremos mostrar la fecha junto con el peso en todas las filas de la lista de pesos. Para ello, aprovecharemos la capacidad de Maqetta de adjuntar EdgeToEdgeDataList a los datos en un archivo.

  1. Elija Create > JavaScript File... en el menú principal de Maqetta para crear el archivo donde colocaremos los datos nuevos.
  2. En el cuadro de diálogo que aparece, cambie el nombre de archivo por weights.json y haga clic en el botón Create . Esto hará que aparezca una nueva pestaña en el editor.
  3. Sustituya el contenido del editor con los contenidos del Listado 2.
    Listado 2. Contenido para weights.json
    {
        "items": [
            {label: "149", moveTo: "detailsView", rightText: "2012-10-01"},
            {label: "150", moveTo: "detailsView", rightText: "2012-10-09"},
            {label: "151", moveTo: "detailsView", rightText: "2012-10-15"},
            {label: "148", moveTo: "detailsView", rightText: "2012-10-23"},
            {label: "146", moveTo: "detailsView", rightText: "2012-11-01"}
        ]
    }

    Observará que los datos son similares a lo que introdujimos en el cuadro de entrada inteligente cuando creamos por primera vez EdgeToEdgeDataList. Recuerde que en el cuadro de texto cada fila tenía una etiqueta y un valor moveTo separado por coma. En el archivo, cada fila tiene propiedades explícitas de etiqueta, moveTo y (nuevo) rightText .
  4. Guarde y cierre el archivo.
  5. Vuelva al editor de página y haga doble clic en EdgeToEdgeDataList que contiene los pesos. Esto abrirá el cuadro de diálogo donde se definió por primera vez el contenido de la lista.
  6. Cambie la lista desplegable Comma separated data por Data file from workspace.
  7. Ingrese weights.json (el nombre de su archivo) en el cuadro de texto (como se muestra en la Figura 43) y haga clic en OK. (Observe que también puede navegar a un archivo de su espacio de trabajo haciendo clic en el ícono de carpeta junto al cuadro de texto).
    Figura 43. Especificación de un archivo de datos del espacio de trabajo
    Specifying a data file from workspace

Ahora, debe ver la fecha a la derecha de cada entrada de la lista, como se muestra en la Figura 44.

Figura 44. Fechas añadidas a la lista de pesos
Dates added to weight list

Verificación del prototipo

El prototipo de nuestra aplicación de registro de peso está terminado — ¡y no hemos grabado ninguna línea de código! Si todavía no lo hizo, abra la vista previa de la aplicación (use el ícono Preview in Browser de la barra de herramientas) y verifique que puede navegar hacia adelante y avanzar a todas las vistas y regresar a la primera vista.

También querrá probar algunos de los widgets móviles, como las ruedas para ajustar el peso de la aplicación y las variables de fecha, y verificar que el botón "más" (+) de la vista mainView pase a la vista detailsView.


Conclusión

En este artículo, ha visto cómo desarrollar rápidamente el prototipo razonablemente completo de una aplicación personal de registro de peso para un dispositivo móvil. Si se tratara de una aplicación para producción, debería seguir alguno de estos pasos:

  • Use la función de vista previa en tiempo real de Maqetta para:
    • Entregar una demostración de la prueba de concepto a su jefe y convencerlo de que la compañía debe ingresar al negocio de aplicaciones de registro de peso para dispositivos móviles.
    • Llevar a cabo pruebas de usabilidad con clientes potenciales antes de pasar a la fase de desarrollo.
  • Use la función Review & Commenting de Maqetta (vea la opción del menú Create > Review... ) para obtener comentarios del resto del equipo.
  • Continúe desarrollando el prototipo; por ejemplo, un aplicación para producción posiblemente necesite la vista Settings para establecer unidades de medida del sistema inglés o del sistema métrico. También se podrían añadir paneles para administrar diferentes usuarios, establecer objetivos, introducir comidas y realizar el seguimiento de rutinas de ejercicio o el progreso.
  • Cree un tema personalizado para su aplicación con Maqetta Mobile Theme Editor. Por ejemplo, puede aplicar el esquema de colores de la marca de su empresa al estilo de la UI.
  • Opte por un diseño sólido y listo para pasarlo al equipo de desarrollo para que lo conviertan en un producto. En ese caso, puede usar el mecanismo de Maqetta para exportar proyectos en un archivo .zip, que luego se puede importar en otro entorno de desarrollo de Eclipse o Rational Application Developer de IBM.

En este artículo, ha aprendido cómo desarrollar un prototipo sofisticado y bastante complejo de la UI de una aplicación móvil — ¡sin escribir código! En la Parte 2, añadiremos algo de JavaScript personalizado para administrar las interacciones de los usuarios. En la Parte 3, usaremos PhoneGap para desarrollar otro prototipo como aplicación nativa que se pueda implementar en dispositivos móviles reales. Mientras tanto, consulte la sección Recursos para aprender más sobre Maqetta, HTML5 y Dojo Mobile.

Reconocimientos

Agradecimiento especial para el equipo de Maqetta (Jon Ferraiolo, Javier Pedemonte, Adam Peller y Bill Reed) por revisar detenidamente y aportar valiosos comentarios constructivos a esta serie de artículos.


Descargar

DescripciónNombretamaño
Resulting HTML filemaqetta_part1.zip3KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

  • Únase al Maqetta user group: interactúe con otros diseñadores y desarrolladores que usan Maqetta para crear UIs móviles y de escritorio.
  • Participe en la Comunidad developerWorks. Póngase en contacto con otros usuarios de developerWorks mientras explora los blogs conducidos por desarrolladores, foros, grupos y wikis.

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Desarrollo móvil
ArticleID=930566
ArticleTitle=Maqetta es sinónimo de maqueta, parte 1: diseño de una UI móvil en HTML5
publish-date=05202013