Cambiar el estilo de un botón en Windows Phone

Este sencillo post lo hago para responder una pregunta de alguien en el Diplomado de Windows Phone que se está dictando virtualmente en México, intente decirlo en prosa pero definitivamente mejor con imágenes, es cuestión de cinco minutos, ¿Como cambiar el color blanco que se vé cuando presionas un botón en las aplicaciones Windows Phone?

1. Agregas el botón y das sobre el clic derecho en la opción Editar Plantilla y  seleccionas Editar una copia.

2. Se te pedirá que asignes un nombre al estilo y además la ubicación del mismo. Si piensas usar este estilo en todos los botones de tu aplicación ponlo en un diccionario o a nivel de la aplicación. Es bueno cuando tenemos muchos estilos en nuestra aplicación poner nombres representativos que luego sean claros para bien sea aplicándolo a otros controles o leyendo el código.

3. Al entrar a editar la plantilla en la pestaña de estados podrás ver como cuando te ubicas sobre el estado Pressed, el botón muestra el color que se quiere cambiar. 

4. Intente cambiar este color directamente desde el selector en Blend, pero altera todos los colores de fondo de los demás estados así que recomiendo ir al XAML en donde hayamos ubicado nuestro estilo.

5. En el marcado veremos el estilo y como se ha generado el código de estilo asociado a los diferentes estilos y veremos claramente la sección del estado Pressed. Ahí podemos cambiar los colores por otros recursos que tengamos o por valores fijos el nombre de un color por ejemplo Red o el Hexadecimal asociado, y puedes probar el cambio. (Clic en la imagen para agrandar)

6. Luego debes regresar a tiempo de diseño, con el botón que se encuentra en la parte superior del mismo con el que pasaste al marcado. Además puedes salir de la edición de la plantilla.

7. (Actualización del post) Para el diplomado se deben añadir los elementos programáticamente así que para el caso del botón puede crearse usando el estilo que se editó, así:

8. Para crear más botones en edición con el mismo estilo puedes copiar y pegar el botón, o bien a los botónes existentes aplicarles el estilo, seleccionando el botón y en el menú editar plantilla seleccionas el estilo existente.

Esta es la misma mecánica para la mayoría de estilos en Windows Phone, cuando el tema no tiene que ver con los estados se puede editar directamente con el Expression Blend.

Saludos y que te sea útil

Sorey

Metro: Cambiando la experiencia de usuario con Windows Phone y Windows 8

Hace unos días les había compartido mi presentación y algo de analisis adicional sobre mi charla en Mobile Monday Medellín. Hoy gracias a Carlos Valencia (@cvalenciamazo) de EventoStream quienes realizar el streaming del evento, tengo la posibilidad de compartirles el video de mi presentación, espero les guste.

La presentación que usé en la charla pueden verla en mi anterior post sobre Metro.

Metro: Cambiando la experiencia de usuario con WP7 y Win8 from Sorey Garcia on Vimeo.

Para ver las demás presentaciones de Mobile Monday Medellín visita el blog oficial.

Espero les guste, hasta la próxima

Sorey

Publicando en el Marketplace de Windows Phone

Después de haber creado nuestra aplicación de ejemplo, lo que sigue es publicarla en el Marketplace de Windows Phone, ese se proceso se hace a través de unos simples pasos.

1. Valide que tiene su cuenta activa como desarrollador iniciando sesión http://create.msdn.com e ingrese a través del menú al dashboard de Windows Phone. Si no esta registrado siga las indicaciones para ser un desarrollador oficial del Marketplace.

2. Cuando carguen el dashboard podrá ver la opción Submit New App, de clic para iniciar el proceso de envió de la aplicación

 3. El primer paso del proceso es subir el archivo XAP de la aplicación.

4. Después de dar clic en Next se iniciará la subida de nuestra aplicación antes de continuar al siguiente paso del proceso. 

5. En el siguiente paso debemos seleccionar la categoría y subcateoría si existiese, donde estará publicada nuestra aplicación en Marketplace, es muy importante ubicar bien la categoría para que los usuarios encuentren la aplicación.

6. En la misma etapa del proceso de envío debemos proporcionar información acerca de nuestra aplicación. 

7. También en la misma etapa debemos subir el arte o gráficas asociadas a nuestra aplicación, de acuerdo a las indicaciones que puede encontrar en esa misma sección. 

8. Para capturar las pantallas de muestra o screenshots que vemos en la parte inferior, debemos desplegar nuestra aplicación en el emulador, para esto usamos el XAP Deployment que se encuentra en el SDK 7.1 y que podemos encontrar en la ruta C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XAP Deployment. 

9. Luego usando las opciones adicionales del emulador podemos capturar estas imágenes de muestra, recuerda que para que la imagen quede de calidad el zoom del emulador debe establecerse en 100% 

10. En el siguiente paso del proceso podemos establecer el valor de nuestra aplicación de 0.49 centavos de dólar a 499 dólares. Además decidimos en que lugares del mundo se publicará y podemos establecer un precio en cada país. Si tuviésemos funcionalidades que usen el modo Trial dentro de nuestra aplicación debemos activarlo en este punto para las aplicaciones de pago. 

11. En el siguiente paso podemos elegir si nuestra aplicación se publica inmediatamente o si la dejaremos oculta para distribuirla de forma privada. También podemos elegir si temporalmente queda oculta y luego la publicaremos. 

12. Si completamos los pasos correctamente recibiremos una notificación de que nuestra aplicación se ha enviado y desde aquí podemos visitar el estado actual. 

13. Esta vista nos muestra en que parte del proceso se encuentra nuestra aplicación

14. En esta vista que es accesible desde la página principal del dashboard podemos ver el estado en que se encuentra nuestra aplicación 

15. El proceso puede tardar hasta 5 días hábiles.

Éxitos con la publicación de sus aplicaciones.

Sorey

Creando un lector RSS para Windows Phone usando AppMakr

Hola, hoy he conocido por cuenta de Walter Novoa (@warnov) el AppMakr un sitio que seguro les resultará muy útil a algunos de ustedes, si lo que desean es hacer una aplicación RSS facilmente.

Actualización 2012/5/18: Ahora puedes descargar esta guía desde mi Slideshare

Antes de empezar seleccione sus fuentes RSS favoritas y diseñe las imágenes base de su aplicación

• Background.png: 173 x 173 – Puede usar transparencias 
• ApplicationIcon.png: 62 x 62 – Puede usar transparencias 
• SplashScreenImage.jpg: 480 x 800 – Sin transparencias 

Aquí mi ejemplo

Visite MSDN para aprender más sobre el ArtWork de su aplicación.

Ahora vamos a empezar con el paso a paso para crear una aplicación a través de AppMakr 

1. Cree su cuenta en http://www.appmakr.com

2. Verifique su correo y active su cuenta 

3. Inicie sesión en AppMakr y seleccione la opción Create New App

 

4. Busque la opción para crear una aplicación Windows Phone y seleccione Choose This 

5. Ingrese la URL del RSS que desea consumir y presiones Create App 

6. Aparecerá unos indicadores gráficos mientras se crea la base de su aplicación, espere que cargue el proceso hasta el final 

7. Verá el área de trabajo donde se nuestra los pasos a seguir y un emulador 

8. En la primera etapa seleccione la imagen que corresponde al icono de su aplicación, siga las indicaciones con respecto a las dimensiones, note que le piden una imagen de 512X512 y hay un link donde se explica por qué.

 9. Seleccione además el archivo que será la imagen inicial de su aplicación, en este caso la imagen tiene las dimensiones que se indicaron previamente para esta imagen. 

10. Después de esto presione el botón Save y espere que la página se cargue, verá que en el emulador de la derecha aparecerá el icono que ha establecido para la aplicación. Recuerde tener cuidado con los derechos de autor de las imágenes que usa.

En el emulador se puede ver como queda la ventana de inicio de la aplicación

Además como se verá el icono de la aplicación

11. Note que en la parte superior se le da un aviso sobre el resultado de la operación de guardado

12. En el segundo paso del proceso podrá configurar si desea añadir varios RSS a su aplicación o incluso un álbum de fotos

13. En el tercer paso podrá personalizar una imagen de cabecera y los colores por defecto de la barra de aplicaciones y del texto.

14. Observe con cuidado las dimensiones de la imagen que le piden para la cabecera, sin embargo tiene la opción de subir una imagen más grande y recortarla. 

15. Cuando esté listo presione el botón Save y pruebe en el emulador su aplicación para que vea que la personalización se ve correctamente. 

16. En el siguiente paso debe dar información sobre su aplicación 

17. Luego puede Monetizar su aplicación colocando publicidad en ella o bien seleccionar que la aplicación no contiene publicidad. 

18. Como último paso aparece la opción de publicar que le indicará el numero de compilaciones que ha realizado y el número de la compilación inicial.

19. Después de presionar el botón Build App aparecerá la aplicación en una lista indicando que está pendiente de compilar. 

20. Pasados unos minutos puede actualizar la página y verá un botón donde podrá descargar el archivo XAP de su aplicación.

Espero que se animen a hacer este intento y configuren sus fuentes favoritas de RSS en una aplicación de Windows Phone, para su comunidad o su blog personal.

Mira este tutorial en video en el blog de Walter Novoa

Sorey

Añadiendo Pushpins con el gesto Tap en un Mapa de Bing en Windows Phone

Siguiendo nuestra serie de post de Bing, ahora vamos a permitir que cuando el usuario haga el gesto Tap sobre el Mapa de Bing, se añada un nuevo pushpin o marcados.

Para esto debemos crear el método asociado el evento Tap, seleccionamos nuestro mapa y en la sección de propiedades vamos a Eventos, allí buscamos el evento Tap y damos doble clic para que se cree el método.

Vaya al método y escriba el siguiente código.

 private void map1_Tap(object sender, GestureEventArgs e)   
    {   
     var puntoPantalla = new Point(e.GetPosition(map1).X, e.GetPosition(map1).Y);   
     var puntoMapa = map1.ViewportPointToLocation(puntoPantalla);   
     Pushpin newLocation = new Pushpin();   
     newLocation.Template = (ControlTemplate)(App.Current.Resources["PushpinSuggested"]);   
     newLocation.Location = puntoMapa;   
     map1.Children.Add(newLocation);   
    }  

Si ejecutamos la aplicación veremos como con los clic o tap aparecerán pushpins

Sin embargo todos los pushpin aparecen igual que los que habíamos graficado nosotros y no se distinguen de los que el usuario está añadiendo. Recuerden que en un post anterior aprendimos como personalizar la apariencia de los pushpin.

¿Que tal si personalizan la apariencia?

Espero que esto les resulte útil y doy gracias a mi amigo @hernandgr por ayudarme a completar la serie de post de Bing.

Sorey

Metro no es solo una interfaz es una filosofía

Llevaba ya varios días con este post, en el "tintero", el título hace referencia a la publicación de Mashable acerca de su entrevista a Microsoft sobre el estilo Metro, artículo del que me es inevitable retomar algunas de sus partes, que describen de forma practica y directa la filosofía del estilo Metro.

Y es que uno podría hablar de mi forma de el estilo Metro y aun así encontrar más que decir, es así como la entrevista además de dejar muy claro que "Metro no es solo una interfaz si no una filosofía" y reitera que Metro es un lenguaje de diseño único, dinámico y vivo, rápido y fluido, definido por el reduccionismo, la tipografía y las formas sin adornos.

Además una frase que incluso fue polémica entre algunos de los comentarios fue "La tipografía es la nueva iconografía", pero si uno interactúa con Metro en Windows Phone o Windows 8, se da cuenta que debatir el tema está fuera de lugar, y que no es ni mucho menos un desprecio a las imágenes, de hecho metro hace un llamado también a la comunicación directa a través de imágenes simples, más bien es un llamado al orden y hasta al énfasis de forma que se capture y comuniquen a los usuarios acciones, posibilidades y rutas de navegación usando diferentes tamaños tipografía y jugando con opacidad.

Continuando con esas frases que recordé y que me cautivan cada vez que las escucho, viene otro principio de "Metro es auténticamente digital", creo que no habría entendido mucho este principio si antes no me lo hubiesen explicado, el llamado a la honestidad trata de no tratar de llevar los objetos de la vida real a las pantallas de nuestros dispositivos, aceptar lo digital y las interacciones que son más adecuadas en ese entorno antes que intentar llevar interacciones más complejas solo por intentar trasladar nuestra realidad a ambientes digitales.

Como explicaba en mi presentación sobre el cambio en la experiencia de usuario con Metro, no sirve opinar sin sentir Metro, sin tocarlo o interactuar con el y darse cuenta de que significa sentirse conectado a la nube a través de aplicaciones enfocadas en el contenido, que no te distraen y te inspiran confianza por su atención a los detalles, seguridad, fiabilidad, simetría y equilibrio, deleitándose con el movimiento y el diseño para el tacto, sensible, intuitivo, inmersivo y convincente.

A modo personal y ahora que Metro se vuelve palabra en boca de muchos, creo que algunos desarrolladores creen que Metro sigue dejando su rol exclusivamente a los diseñadores, si bien es así y un diseñador puede hacer grande una aplicación, lo cierto de Metro de la cantidad de guías de diseño y ejemplos disponibles es que los desarrolladores también podemos hacerlo e involucrarnos de forma directa con la usabilidad, la accesibilidad y todo aquello que diá a día cobra importancia en la experiencia de usuarios cada vez más exigentes.

Saludos y hasta la próxima.

Sorey