jueves, 20 de octubre de 2011

Primeros elementos gráficos para tu aplicación Windows Phone

Saludos

Como ya saben me gusta mucho compartir con ustedes las aventuras que vivo en esto de aprender Windows Phone, pues bien, un poco cansada de enseñarlo y no aplicarlo empecé a hacer ya mi propia aplicación, algo sencilla pero espero usarla para enseñarles cosas y por que no subirla un día al Marketplace.

Hoy quiero entonces hablarles de por donde empecé yo, no se si sea lo primero o lo último que se deba hacer, a mi me gusta eso de trabajar viendo las apps lindas de una vez.

Mi aplicación se llama Viajero Móvil y tiene por objeto permitir que las personas que viajan mucho conserven el historial de sus viáticos en el celular, tediosa tarea que hay que hacer cada que se llega al trabajo a informar los gastos de viaje. Así es como planee que se viera:


Pues bien, tenemos 3 imagenes básicas de todas nuestras aplicaciones, si bien podemos nombrarlas como queramos cambiando la configuración de la aplicación por defecto encontraremos 3 imagenes nombradas por defecto, así que vamos a aprender para que se usan.

La primera imagen es SplashscreenImage.jpg sus dimensiones son 480 x 800. Esta es la primera pantalla que ve el usuario cuando abre nuestra aplicación, por mucho duraría unos 10 segundos así que no es recomendable colocar texto, más bien una buena imagen que de contexto y recordación a nuestra aplicación.



La segunda imagen corresponde al ícono que aparecerá en el Menú General de aplicaciones, por defecto se encuentra nombrada como ApplicationIcon.png y sus dimensiones son 62 x 62. Como ven es muy pequeño y debe llevar un icono que identifique nuestra aplicación, tenemos 2 opciones, colocar un fondo transparente y un icono blanco preferiblemente dejando que el fondo sea el color de "acento" que el usuario tenga seleccionado como tema de su telefono, o bien, colocarle colores propios, quizá asociados a nuestra marca o la imagen reconocida de la aplicación en otros contextos, sin olvidar su pequeño tamaño y que debe ser claro.


La segunda imagen se llama Background.png, sus dimensiones son 173 x 173 y se usa cuándo el usuario decide colocar nuestra aplicación como favorita en la pantalla inicial del teléfono, aquí debemos tener las mismas consideraciones con respecto a los colores, y algo más, típicamente configuraremos el nombre de nuestra aplicación para que aparezca aquí, es el caso en la imagen del "Internet Explorer". El nombre de la aplicación aparecerá en esa posición si nosotros lo configuramos en el Manifiesto (no se impacienten que ya aprenderemos que es). En mi caso, yo quería colocarle mi propio letrero y quite de la configuración el nombre para que no se viera mal, ando investigando si esto es o no recomendado y les cuento, por que todas las aplicaciones que veo en mi móvil hasta el momento lo tienen.


Bien, para contarles un poquito donde voy, mi aplicación iniciará con un panorama, insisto se que voy de a pasitos pero tranquilos ya les enseñaré acerca de Pivots y Panoramas, por el momento les muestro la vista inicial de mi panorama.


Tengo que decirles que la verdad, elegí trabajar con mis propios colores para la aplicación y no usar los colores por defecto, por que actuando como usuario cambiaba los temas del dispositivo y se me hace laborioso lograr que la aplicación se vea bien en todos los temas, así que al ver como funcionaban algunas de las aplicaciones que he descargado opté por tener una gama controlada de colores, recordando que un usuario puede usar fondo blanco y fondo negro y varios colores de acento.

Por el momento es todo, les puedo decir de acuerdo a algunas cosas que he leido acerca de por que puede ser rechazada nuestra aplicación en el App Hub es la estética, así que sabiendo que como desarrolladores no somos muy buenos para el tema, yo recomendaría o buscar un diseñador que nos ayude o bien optar por escenarios controlados o básicos ofrecidos por el mismo Expression Blend.

Les recomiendo ver los recursos de diseño de MSDN para Windows Phone y la colección de íconos de http://thenounproject.com

Espero poder hacerles pronto un video para que vean como va quedando mi aplicación.

Sorey ;)

No hay comentarios: