Proyecto: Aplicación Windows Phone para la Federación Venezolana de Fútbol – Parte 2


Hola Comunidad,

Continuando con la parte previa del proyecto, Aplicación Windows Phone para la Federación Venezolana de Fútbol - Parte 1, previamente definimos la arquitectura básica de los componentes que queremos desarrollar y algunas consideraciones iniciales sobre cómo dichos componentes deberían comunicarse entre si. Ahora, lo que haremos en esta segunda parte es trabajar sobre la base de un prototipo simple de lo que queremos que sea la aplicación (visión).

Para costruir el prototipo, me ayudaré con una herramienta gratuita que fue colocada en Codeplex. Se trata de SketchFlow Template for Windows Phone 7 (pueden utilizar también Balsamiq, pero deben comprar la licencia). Este proyecto, agrega extensiones a Expression Blend para crear prototipos de aplicaciones para dispositivos con Windows Phone 7. Una vez que descargan e instalan las plantillas, su Expression Blend debería presentar las siguientes opciones:

Una vez instalado, procedí a "imaginar" como quería que la aplicación se visualizará en el teléfono. Para esto, hice una lista de la información que quería que la aplicación me mostrará:

  • Logo de la Federación Venezolana de Fútbol (que por cierto, no se si puedo utilizarlo, así que si me pueden ayudar a validar se los agradezco :)), como ícono de inicio.
  • Anclaje de la aplicación en las opciones de los menús del teléfono.
  • Pantalla de bienvenida que haga mención visual a los colores de la selección nacional (Vino Tinto).
  • Pantala que brinde información sobre los últimos resultados (jornadas) del fútbol nacional.
  • Pantalla que brinde información sobre la tabla de clasificación de los equipos para una temporada indicada.
  • Noticias del fútbol nacional (pueden ser noticias que provengan de redes sociales, porque no he encontrado algún servicio de RSS que hable solamente del fútbol)
  • Pantalla que permita seleccionar mi equipo favorito del torneo y el torneo que quiero visualizar.

Por los momentos, esto sería lo ideal para iniciar el proyecto. Entonces, iniciamos el proyecto en Expression Blend 4 y lo llamamos "FVFPrototype". Una de las características más interesantes que me ofrece Expression Blend es que me brinda un conjunto de opciones para "dibujar" esquemas o prototipos de como las aplicaciones se deberían visualizar. Inicialmente, Expression Blend provee de 3 pantallas (XAML) típicas de cualquier ambiente Windows Phone 7: a) Home, b) Search y c) AppList:

 

En la figura anterior, ya había hecho la modificación para que el título de la pantalla de inicio (Home) tuviera la capa de presentación inicial de un teléfono Windows Phone. Para esto, en la sección "Assets" de la interfaz de Expression Blend (si no puedes visualizar la sección Assets, puedes activarla en el menu Window->Assets), busca hasta la entrada "Categories" -> "Mockups" y allí encontraras una lista de controles y estilos que puedes utilizar con la interfaz de la plantilla de Windows Phone para emular visualmente el comportamiento de las ventanas. Para la pantalla "Home", seleccioné el Mockups "HomeScreenMockup" que es el que ven en la figura. Para las siguientes pantallas (Search y AppList), utilice los Mockups "SearchScreenMockup" y "AppListMockup" respectivamente:

Una vez realizado este proceso, procedo a diseñar las pantallas que inicialmente habiamos conceptualizado. La primera pantalla es la de bienvenida de la aplicación. Esta pantalla se accedera mediante la navegación desde las pantallas de "Home->Federación Venezolana de Fútbol" o desde la pantalla "AppList->FVF". Para agregar la pantalla y enlazarla desde los dos modelos de navegación descritos, utilicé la sección "SketchFlow Map" en la parte inferior de la ventana de Expression Blend (si no puedes visualizar la sección SketchFlow Map, puedes activarla presionando la combinación de teclas Shift+F12 o en el menu Window->SketchFlow Map). En esta sección, cuando pasas el mouse sobre cualquiera de las pantallas indicadas, se activa un menu contextual, en el cuál se pueden agregar nuevas ventanas enlazadas o crear un vinculo de navegación hacia una ventana existente:

Seleccionando la opción "Create a connected screen" desde la ventana "Home", Expression Blend crea una nueva pantalla enlazada, donde diseñaremos la ventana de bienvenida de la aplicación: Seleccione el nombre "WelcomeFVF" para identificarla. Además, utilizando el mismo menú, pero en la pantalla "AppList", cree un enlace de navegación a "WelcomeFVF". Para hacer esto, simplemente hago click sobre la opción "Connect an existing screen" y arrastro este icono hasta la pantalla "WelcomeFVF" y listo!. Tu pantalla debería verse de la siguiente forma:

Posteriormente, diseñé (pido disculpas a los diseñadores que me leen, como saben yo no se dibujar :)) la pantalla de inicio de la aplicación. Lo que imagine fue un título superior a la pantalla y una barra de progreso de carga de la aplicación (en la parte de atras) pienso colocar una imagen (background):

Siguiendo los procesos descritos anteriormente, agregue y diseñé las pantallas que conversamos previamente:

Pantalla: Competiciones

 

 

Pantalla: Clasificación

 

Pantalla: Noticias

 

Pantalla: Mi Equipo

Pantalla: Configuración

Las pantallas que quedarían pendientes son las pantallas de configuración para agregar las fuentes RSS (por defecto Twitter) y algunas pantallas menores de manejo de mensajes de error (por ejemplo, cuando el dispositivo no tenga conexión a la red de datos o no pueda comunicarse con los servidores de servicios, etc).

Esto es todo por el momento. En el próximo post, escribiré sobre la base fundamental de la capa de datos. Por supuesto y como siempre, todos estan bienvenidos a aportar ideas, comentarios y mejoras sobre este proyecto.

Estamos en contacto!

Nestor Guadarrama

Gerente de Programas para Empresas de Desarrollo de Software

Comments (0)

Skip to main content