31.8.10

Formación: Windows Phone 7 in 7

Gracias a Jesús Bosch que nos ha pasado este enlace.

En Windows Phone 7 in 7 podremos encontrar videotutoriales para aprender a desarrollar aplicaciones Windows Phone 7.



Son videos cortos y amenos que se centran en un determinado aspecto del desarrollo de aplicaciones para WP7. Así se pueden ver en el orden que uno desee o consultar solamente aquel que necesitéis.

Además son totalmente gratis.

Os paso los enlaces a los videos:

  1. Windows Phone 7 in 7: Introducing Windows Phone 7
  2. Windows Phone 7 in 7: Getting Started with Windows Phone 7
  3. Windows Phone 7 in 7: The Windows Phone 7 Application Architecture
  4. Windows Phone 7 in 7: Silverlight and Windows Phone 7
  5. Windows Phone 7 in 7: XNA and Windows Phone 7
  6. Windows Phone 7 in 7: Windows Phone 7 Controls
  7. Windows Phone 7 in 7: Connecting to Web Services
  8. Windows Phone 7 in 7: Windows Phone 7 and Data
  9. Windows Phone 7 in 7: Using Isolated Storage
  10. Windows Phone 7 in 7: The Application Bar
  11. Windows Phone 7 in 7: Developing for the Windows Phone 7 Web Browser
  12. Windows Phone 7 in 7: Globalization and Localization
  13. Windows Phone 7 in 7: Building a Location-aware Application
  14. Windows Phone 7 in 7: Push Notifications
  15. Windows Phone 7 in 7: Security and Windows Phone 7
  16. Windows Phone 7 in 7: Using the Accelerometer
  17. Windows Phone 7 in 7: Using Media in Windows Phone 7 Apps
  18. Windows Phone 7 in 7: Manipulations
  19. Windows Phone 7 in 7: SIP Layout
  20. Windows Phone 7 in 7: Using the Windows Phone 7 Cameras

Espero que os sean útiles.

30.8.10

Ebook gratuito para aprender XNA

En el blog AprendiendoXNA, he encontrado esta noticia.

En el sitio web de Microsoft Faculty Resource Center han puesto totalmente gratis el ebook "Introduction to Programming Through Game Development Using Microsoft XNA Game Studio".


Este libro os permitirá adentraros poco a poco en el mundo de la programación de videojuegos utilizando la tecnología XNA de Microsoft.

Podéis descargarlo del siguiente enlace:

Descargar ebook gratuito Introduction to Programming Through Game Development Using Microsoft XNA Game Studio.

29.8.10

Aprender Windows Phone 7 (parte 11): Orientaciones con Silverlight en Windows Phone 7

Vamos a aprender a rotar aplicaciones con Windows Phone 7.

A todo el mundo le encanta poder girar su teléfono móvil y que la aplicación rote automáticamente para adaptarse mejor a su punto de vista.

Si queremos hacer aplicaciones que vendan millones de copias, es importante cuidar que la aplicación se adapte a la orientación que el usuario desea usar.

Para hacer este artículo me he basado en “Orientation strategies for Windows Phone 7” en el blog del Petzold (lo tenéis al final del artículo en el apartado de recursos).

Yo voy a hacer un ejemplo parecido con una imagen y un título.

¿Listos? ¿Sí? Empecemos entonces. ¡Aprendamos algo nuevo!

Primero vamos a crear un proyecto pulsando en el menú File -> New Project.

  • Template: Silverlight for Windows Phone
  • Project: Windows Phone Application
  • Name: PruebaOrientacion
  • Location: (la que queráis, yo por ejemplo puse...) C:\A_warterrain_A\Ejemplo\
  • Solution name: PruebaOrientacion

Pulsando en Ok crearemos el proyecto.

Vamos a quitar el control PageTitle de tipo TextBlock porque no lo vamos a utilizar. Para ello lo seleccionamos con el botón izquierdo del ratón y pulsamos en Supr para borrarlo.

Ahora seleccinamos el control ApplicationTitle de tipo TextBlock, y cambiamos la propiedad Text y ponemos, por ejemplo, “ORIENTACIÓN EN WINDOWS PHONE 7”.

Me he bajado una imagen de Internet que voy a utilizar para hacer la aplicación.

Imagen.

Vamos a agregarla al proyecto. Pinchamos con el botón derecho sobre la carpeta del proyecto en el “Solution Explorer” y seleccionamos Add -> Existing Item.

Buscamos esta imagen en nuestro sistema y la agregamos al proyecto.

Ya la tenemos agregada al proyecto, pero hay que poner el valor correcto en las propiedades de la imgane. Para ello pinchando en la imagen en el “Solution Explorer” con el botón izquierdo. Introducimos estos valores en las propiedades de la imagen (ver figura 1):

  • Build action = Content
  • Copy to output directory = Copy if newer

Figura 1.

Ahora voy a agregar un control Image y dentro metere esta imagen tan chula. Ok, vamos a Toolbox y cogemos el control Image y lo arrastramos dentro de nuestro formulario.

Los valores de las propiedades de este control son:

  • Source: imagen.png
  • Stretch: Uniform

Hasta aquí han sido los preparativos. Ahora vamos a jugar con las orientaciones.

ORIENTACIÓN POR DEFECTO (O SIN ORIENTACIÓN)

Por defecto, si no modificamos nada más, cuando girásemos el teléfono Windows Phone, no habría cambio alguno y manendría la misma orientación la aplicación (ver figura 2).

Figura 2.

Si vemos el código XAML veremos en phone:PhoneApplicationPage el atributos SupportedOrientations con el valor "Portrait". Es decir, la aplicación solo se verá en modo Portrait y aunque cambie la orientación se mantiene la orientación original. En ocasiones esto puede ser lo que busquemos pero vamos a ampliar nuestro repertorio de posibilidades.

ORIENTACIÓN AUTOMÁTICA

Vamos a preparar nuestra aplicación para que rote automáticamente cuando se gire el teléfono.

Es muy sencillo. Solo hay que ir al código XAML y cambiar el atributo SupportedOrientations del phone:PhoneApplicationPage y ponerle el valor “PortraitorLandscape”.

Si compilamos y ejecutamos el programa veremos que ahora cuando giramos el teléfono, automáticamente se colocan los controles en la nueva orientación (ver figura 3 y 4).

Figura 3.


Figura 4.

Esta orientación gira todos los elementos de forma automática. Pero puede que no queden bien así y en muchos casos conviene personalizar la forma en que se rota la aplicación.

ORIENTACIÓN PERSONALIZADA

En este caso vamos a ir a los eventos del elemento phone:PhoneApplicationPage y haciendo doble click en OrientationChanged (ver figura 5) se nos creará el procedimiento que se ejecutará cuando se rote el teléfono Windows Phone 7.


Figura 5.

El código del procedimiento estará vacío (ver figura 6).

Figura 6.

El objeto e contiene una propiedad cuyo nombre es Orientation. Comparando esta propiedad con los valores del rango PageOrientation podremos personalizar cada orientación posible.

En este ejemplo vamos a ampliar el ancho del control Image cuando se rota. En la rotación automática el ancho que tenía era 432 (el mismo que en la orientación portrait). Nosotros vamos a hacerle que tenga un ancho de 653 para que se vea mejor aprovechando que la pantalla tumbada permite una mejor visión de la pantalla.

El código que he introducido en el cuerpo del procedimiento de cambio de orientación es el siguiente:

Figura 7.

Si ejecutamos el programa veremos que se aprovecha mejor el espacio con nuestra rotación personalizada (figura 8) que con la rotación automática (figura 9).


Figura 8. Rotación presonalizada.


Figura 9. Rotación automática.

Queda mejor verlo en vivo y en directo, ¿verdad? Pues os he grabado un video:

Os dejo como ejercicio mejorar mi algoritmo de rotación personalizada para que ocupe toda la pantalla.

Me lo he pasado genial escribiendo este artículo. Espero que vosotros también os lo hayáis pasado bien. Espero que vuestras aplicaciones Window Phone 7 vayan quedando superchulas con todas estas mejoras que estamos metiendo. Yo os veo en el próximo tutorial.

Pasadlo bien.

Recursos de este artículo:

Código fuente: Enlace de descarga.

Jeff Prosise’ blog: understanding page orientation in Silverlight for Windows Phone. Acceder al artículo.

Petzold book blog: Orientation strategies for Windows Phone 7. Acceder al artículo.

Pete Brow’s blog: building your first silverlight for windows phone application. Acceder al artículo.

Sitio web para desarrolladores de Windows Phone 7: Acceder al sitio web.

Groups Live del DotNetClub UCM: Acceder al grupo.

Las imágenes utilizadas y todos sus derechos de propiedad pertenecen a su autor y no pueden ser usadas sin su permiso.

Nuevo canal: Libreyextremo en Youtube

Pues este fin de semana me he estado peleando con Youtube. He visto que en algunos blogs de tecnología se añaden videos de los tutoriales. Así que voy a mejorar las entradas de mi blog añadiéndoles videos.

Me he creado un canal en Youtube (libreyextremo):

Acceder al canal Libreyextremo en Youtube




Será ahí donde voy a ir subiendo los videos que cree. Por el momento he subido dos videos:

Disfrutadlos.

28.8.10

Resumen: cómo desarrollar aplicaciones para Windows Phone 7

Hoy estoy aprendiendo a crear videos y subirlos a Youtube. El objetivo es mejorar los tutoriales que creamos en el DotNetClub de la Universidad Complutense de Madrid.

Si alguno sabéis de un buen programa de grabar video, recomendadmelo en los comentarios de esta entrada, por favor.

Al turrón...

He encontrado en el blog corporativo de Microsoft Ibérica este artículo que resume cómo adentrarse en el mundo de la programación de aplicaciones para Windows Phone 7.

Acceder artículo programando para Windows Phone 7


Os dejo unos cuántos videos de juegos para Windows Phone 7 para que vayáis viendo las aplicaciones que se están creando para este dispositivo.



27.8.10

Crea tus primeros juegos en XNA para Windows Phone 7 con XNA Creators Club

En la página web de XNA Creators Club, hay una sección llamada Getting started: Create Games for Windows Phone 7 dónde podréis aprender a desarrollar vuestros juegos con XNA para Windows Phone 7.



A través de una serie de laboratorios y de ejemplos de código podréis ir convirtiéndoos en una profesionales de crear aplicaciones para estos dispositivos.



Os dejo los enlaces a los ejemplos y laboratorios que vienen en este sitio web:



Revisad este sitio web con asiduidad porque irán apareciendo más contenidos.

24.8.10

Aprender Windows Phone 7 (parte 10): Tutorial ejemplo App bar en Windows Phone 7 (actualizado)

UPDATE 9 - ABRIL - 2011: he corregido el código con los últimos cambios que se han incorporado en la libreria de clases de las herramientas de desarrollo Visual Studio for Windows Phone. Esta versión corrige los problemas que me habéis comentado en vuestros comentarios (muchas gracias por avisarme).

¡Vamos a aprender un nuevo control para WP7!

Estos días estoy ayudando a los chicos de la Complutense con los proyectos que van a presentar al concurso Imagine Mobile. La verdad es que me encanta el entusiasmo y la ilusión que están poniendo en las aplicaciones y es inevitable contagiarse de esa alegría.

Hoy vamos a aprender a trabajar con el control AppBar. Este control le va a dar un aspecto genial a las aplicaciones.

¡Vamos con ello!

Primero vamos a crear el proyecto. Para ello, abrimos Visual Studio 2010. Pulsamos en menú File -> New Project e introducimos los datos del nuevo proyecto:

Installed template: Silverlight for Windows Phone
Project: Windows Phone Application
Name: ColoresConAppBar
Location: (el que queráis, yo por ejemplo he puesto...) C:\A_warterrain_A\Ejemplo\ Solution name: ColoresConAppBar

Figura 1.

Muy bien, pulsando en Ok, crearíamos este nuevo proyecto.

Vamos a cambiar el control ApplicationTitle y ponemos una descripción de este proyecto:

Text = “EJEMPLO APPBAR”


Figura 2.

Vamos a borrar el control PageTitle de tipo TextBlock. Para ello, pinchamos con el botón izquierdo en el control y después pulsamos la tecla Supr. Quedará borrado el control.


Figura 3.

Para hacer que aparezca nuestro control appbar vamos a descomentarlo en el código xaml. Para ello vamos al archivo MainPage.xaml. Tras abrirlo, localizaremos la siguiente parte del código xaml (ver figura 4):


Figura 4.

Vamos a descomentarlo. En la figura 5 podéis ver el aspecto que tendrá el código xaml tras descomentarlo.


Figura 5.

El control appBar trae unos botones por defecto. Nosotros vamos a quitarlos y a poner los nuestros. Nuestra AppBar va a tener dos botones:

  • una flecha apuntando a la izquierda: que pasará al anterior color para el fondo de la pantalla y,
  • una flecha apuntando a la derecha: que mostrará el siguiente color para el fondo de la pantalla.

Vamos a crear una carpeta icons en el proyecto (botón derecho en proyecto -> Add -> New Folder -> introducir el nombre icons).

Después vamos a meter en la carpeta icons estos dos iconos. Los iconos los he sacado del pack de iconos que paso Microsoft a los desarrolladores de WP7, en esta entrada de mi web os indico cómo descargarlos.

Para agregarlos hacemos click con el botón derecho en la carpeta icons y luego seleccionamos Add y luego Existing Items. Los buscamos y los seleccionamos (ver figura 6).


Figura 6.

Hay que indicar en las propiedades de estos iconos los siguientes valores:

  • Build Action: Content.
  • Copy to output directory: Copy if newer.

Figura 7.

Después modificamos el código xaml para que solo haya dos botones y la ruta de los iconos sea la correcta, es decir, apunten a nuestros iconos (ver figura 8).

Figura 8.

Botón Anterior.Poner en las etiquetas:

name="appbar_button_anterior"
iconuri="/icons/appbar.back.rest.png"
text="Anterior"

Botón Siguiente. Poner en las etiquetas:

name="appbar_button_siguiente"
iconuri="/icons/appbar.next.rest.png"
text="Siguiente"

Ahora vamos a crear los eventos asociados a estos eventos.

En las propiedades de cada botón del appBar, en la pestaña de eventos, definiremos el evento Click asociado a cada botón.

El código básicamente lo que va a hacer es cambiar de un color a otro el fondo de la pantalla.

Para ello crearemos un atributo que contendrá el color del fondo de la pantalla y que se iniciará al cargar la pantalla inicial a valor igual a color negro.

private String selectedColor;

private void private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
LayoutRoot.Background = new SolidColorBrush(Colors.Black);
selectedColor = "Black";
}

Cada vez que pulsemos en siguiente, leeremos el valor del color actual de este atributo y pasaremos al siguiente color. Cuando pulsemos en anterior, leeremos el color actual de este atributo y pasaremos al color anterior.

Sencillo, ¿verdad?

Os voy a dejar el código adjunto.

Código botón Siguiente:

private void appbar_button_anterior_Click(object sender, EventArgs e)
{
// secuencia Black -> Green -> Yellow -> Blue -> Red -> Black
switch (selectedColor)
{
case "Black":
LayoutRoot.Background = new SolidColorBrush(Colors.Green);
selectedColor = "Green";
break;
case "Red":
LayoutRoot.Background = new SolidColorBrush(Colors.Black);
selectedColor = "Black";
break;
case "Blue":
LayoutRoot.Background = new SolidColorBrush(Colors.Red);
selectedColor = "Red";
break;
case "Yellow":
LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
selectedColor = "Blue";
break;
case "Green":
LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
selectedColor = "Yellow";
break;
}
}

private void appbar_button_siguiente_Click(object sender, EventArgs e)
{
// secuencia Black -> Red -> Blue -> Yellow -> Green -> Black
switch (selectedColor)
{
case "Black":
LayoutRoot.Background = new SolidColorBrush(Colors.Red);
selectedColor = "Red";
break;
case "Red":
LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
selectedColor = "Blue";
break;
case "Blue":
LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
selectedColor = "Yellow";
break;
case "Yellow":
LayoutRoot.Background = new SolidColorBrush(Colors.Green);
selectedColor = "Green";
break;
case "Green":
LayoutRoot.Background = new SolidColorBrush(Colors.Black);
selectedColor = "Black";
break;
}
}

El del botón anterior es similar al botón siguiente pero en sentido contrario.

Tras todo esto pulsaremos en ejecutar y podrémos ver nuestra estupendo control App bar. Podéis verlo el aspecto que presenta a continuación:

Figura 9.


Figura 10.



Bueno, pues hasta aquí llegamos hoy. Se pueden hacer muchas cosas chulas con el control App bar. Pero eso ya lo veremos en otro artículo.

Espero que os lo hayáis pasado muy bien y os hayáis divertido tanto como yo.

¡Ánimo con vuestros proyectos para Windows Phone 7!

Recursos de este artículo:

Sitio web para desarrolladores de Windows Phone 7:
http://developer.windowsphone.com/windows-phone-7-series/

Groups Live del DotNetClub UCM
http://dotnetclubcomplutense.groups.live.com/

23.8.10

Aprende con Windows Phone 7 Jump Start Training

Acabo de ver esta noticia en el blog de los desarrolladores de Windows Phone 7.

Ya podemos aprender Windows Phone 7 con los vídeos y materiales de formación del programa Windows Phone 7 Jump Start Training.



En 12 sesiones podréis formaros y aprender a programar dispositivos Windows Phone 7 de una manera progresiva y divertida.

A través de las sesiones iremos aprendiendo desde cómo desarrollar aplicaciones en WP7 con Silverlight y con XNA hasta cómo comercializar nuestra aplicación en Marketplace for Windows Phone 7.

Os adjunto los enlaces a las 12 sesiones:

Session 1: Introduction

Session 2: Building a Silverlight Application, Part 1

Session 3: Building a Silverlight Application, Part 2

Session 4: Building Games for the Windows Phone 7 Platform

Session 5: Building XNA Games for the Windows Phone 7 Platform, Part 1

Session 6: Building XNA Games for the Windows Phone 7 Platform, Part 2

Session 7: Advanced Application Development, Part 1

Session 8: Advanced Application Development, Part 2

Session 9: Advanced Application Development, Part 3

Session 10: Marketing Your Windows Phone 7 Application

Session 11: Working with Media

Session 12: Final Silverlight Topics and Wrap-Up



Y el enlace a la web de donde descargar los materiales del curso:

Descargar materiales Windows Phone 7 Jump Start

¡Disfrutadlo!

20.8.10

Nuevos juegos para Windows Phone 7

En el blog de Eduardo Ortega, he encontrado esta noticia de los futuros juegos XBox Live que saldrán para Windows Phone 7.

Os adjunto la lista:
  • 3D Brick Breaker Revolution (Digital Chocolate)
  • Age of Zombies (Halfbrick)
  • Armor Valley (Protégé Games)
  • Asphalt 5 (Gameloft)
  • Assassins Creed (Gameloft)
  • Bejeweled™ LIVE (PopCap)
  • Bloons TD (Digital Goldfish)
  • Brain Challenge (Gameloft)
  • Bubble Town 2 (i-Play)
  • Butterfly ( Press Start Studio)
  • CarneyVale Showtime (MGS)
  • Crackdown 2: Project Sunburst (MGS)
  • De Blob Revolution (THQ)
  • Deal or No Deal 2010 (i-Play)
  • Earthworm Jim (Gameloft)
  • Fast & Furious 7 (i-Play)
  • Fight Game Rivals (Rough Cookie)
  • Finger Physics (Mobliss Inc.)
  • Flight Control (Namco Bandai)
  • Flowerz (Carbonated Games)
  • Frogger (Konami Digital Entertainment)
  • Fruit Ninja (Halfbrick)
  • Game Chest-Board (MGS)
  • Game Chest-Card (MGS)
  • Game Chest-Logic (MGS)
  • Game Chest-Solitaire (MGS)
  • GeoDefense (Critical Thought)
  • Ghostscape (Psionic)
  • Glow Artisan (Powerhead Games)
  • Glyder 2 (Glu Mobile)
  • Guitar Hero 5 (Glu Mobile)
  • Halo Waypoint (MGS)
  • Hexic Rush (Carbonated Games)
  • I Dig It (InMotion)
  • iBlast Moki (Godzilab)
  • ilomilo (MGS)
  • Implode XL (IUGO)
  • Iquarium (Infinite Dreams)
  • Jet Car Stunts (True Axis)
  • Let's Golf 2 (Gameloft)
  • Little Wheel (One click dog)
  • Loondon (Flip N Tale)
  • Max and the Magic Marker (PressPlay)
  • Mini Squadron (Supermono Limited)
  • More Brain Exercise (Namco Bandai)
  • O.M.G. (Arkedo)
  • Puzzle Quest 2 (Namco Bandai)
  • Real Soccer 2 (Gameloft)
  • The Revenants (Chaotic Moon)
  • Rise of Glory (Revo Solutions)
  • Rocket Riot (Codeglue)
  • Splinter Cell Conviction (Gameloft)
  • Star Wars: Battle for Hoth (THQ)
  • Star Wars: Cantina (THQ)
  • The Harvest (MGS)
  • The Oregon Trail (Gameloft)
  • Tower Bloxx NY (Digital Chocolate)
  • Twin Blades (Press Start Studio)
  • UNO (Gameloft)
  • Women's Murder Club: Death in Scarlet (i-Play)
  • Zombie Attack! (IUGO)
  • Zombies!!!! (Babaroga)
Y aquí van algunos videos:







17.8.10

Design Templates para mejorar el diseño de vuestras aplicaciones Windows Phone 7

Navegando por la documentación de Windows Phone 7, he encontrado esta página web donde recopila varios documentos interesantes para mejorar los diseños de vuestras aplicaciones Windows Phone 7.




Os voy a recalcar dos de ellos:

- Design Templates for Windows Phone 7: un enorme paquete (89 MB) lleno de plantillas para vuestras aplicaciones Windows phone 7.







- Windows Phone Design System - Codename Metro: una guía visual para los que todavía no comprendáis qué hay detrás del concepto de Metro.


Espero que os sean de utilidad.

15.8.10

Artículo: Twittear desde Windows Phone 7

Hace unos días descubrí el blog de Raul Mayo en Geeks.ms. Os lo recomiendo porque tiene unos artículos muy interesantes y su forma de escribir es muy agradable.



Hay una entrada que os voy a recomendar que visitéis donde aprenderéis a crear un programa para acceder a Twitter desde Windows Phone 7.







El artículo está genial. Podéis acceder a él a través del siguiente enlace:

Acceder al artículo "Enviando Tweets desde Windows Phone 7" en el blog de Raul Mayo.

12.8.10

Descarga los Requisitos de certificación de aplicaciones Windows Phone 7 en Marketplace

Navegando por el sitio web para desarrolladores de aplicaciones Windows Phone 7, he encontrado el documento que detalla qué requisitos debe cumplir una aplicación para ser certificada y publicada en Marketplace.



Si una aplicación no cumple con estos requisitos, no pasará la fase de certificación y no será publicada en Marketplace.

Así que es un documento importante...

Los podéis descargar del siguiente enlace:

Descargar "Windows Phone 7 Application Certification Requirements"

11.8.10

Ebook gratis "Learning Windows Phone Programming"

En el sitio web para desarrolladores de Windows Phone 7 podéis encontrar enlaces a ebooks y otros recursos gratuítos para aprender a programar con Windows Phone 7.

Uno de los últimos recursos que han puesto a disposición de los desarrolladores son el capítulo 2 y 6 del libro en formato ebook "Learning Windows Phone Programming" de Yochay Kiriaty y Jaime Rodriguez.


Capítulo 2: construyendo tu primera aplicación Windows Phone
Una guía paso a paso para crear tu primera aplicación Windows Phone. Incluye las herramientas de instalación, el proyecto de sistema, plantillas por defecto de Visual Studio y una sencilla aplicación para acceder a Twitter.

Capítulo 6: un viaje adentrándose en Silverlight para Windows Phone
En Windows Phone, está disponible Silverlight 3 con optimizaciones para rendimiento. Además podrás encontrar en este capítulo las Pautas de Diseño y Experiencia de Usuario en Windows Phone. Este capítulo te convertirá de un desarrollador Silverlight en un desarrollador de Windows Phone en menos de 20 minutos.

A mí... en mi sincera opinión... 20 minutos me parece muy poco. Pero la parte de que me expliquen las Pautas de Diseño y Experiencia de Usuario la veo muy útil ya que no hay mucha documentación sobre estos temas.

Podéis acceder a ellos desde la siguiente dirección web o desde el siguiente enlace:

Descargar capítulo 2.

Descargar capítulo 6.

10.8.10

Nueva versión de la Guía de diseño e interacción de Interfaces de Usuario para Windows Phone 7

En el blog del equipo de desarrollo de Windows Phone 7, he encontrado esta noticia que nos informa de que ya está disponible para descarga la última versión de la guía para diseñar interfaces de usuario para Windows Phone 7.



En este documento encontraremos información muy útil sobre los valores recomendados (tamaño, posición, color...) de los controles que trae la versión beta de Windows Phone 7.

Podéis visitar la web y descargaros desde allí este documento o hacerlo a través del siguiente enlace:

Descargar "UI Design and Interaction Guide for Windows Phone 7 v2.0"

9.8.10

Ebook Programming Windows Phone 7 Special Excerpt 2 de Charles Petzold

En la página web de Charles Petzold, he encontrado la última versión de su libro "Programming Windows Phone 7" en formato electrónico gratis para descargar.

Contiene todos los cambios de la última versión beta de las herramientas de desarrollo de aplicaciones Windows Phone 7.


Podéis descargaroslo desde la siguiente dirección web:

Descarga Programming Windows Phone 7 Special Excerpt #2


5.8.10

Aprender Windows Phone 7 (parte 9): tutorial animaciones con Blend con Windows Phone 7

Estoy preparando un artículo sobre XNA, mientras tanto vamos a aprender a hacer alguna animación con Expression Blend.

La animación que vamos a hacer es una transición de inicio de la aplicación. La pantalla empieza totalmente en negro y se va iluminando poco a poco el título de la aplicación.

El titulo que mostraremos es el siguiente:

Figura 1.

Las transiciones dan a nuestra aplicación un mejor aspecto estético evitando los cambios bruscos.

Y para ello vamos a crear el proyecto con Visual Studio 2010 y luego añadiremos la transición con Expression Blend.

Empecemos a crear este divertido proyecto.


PARTE VISUAL STUDIO 2010 (I)

Abrimos Visual Studio 2010.

Pulsamos en el menú File -> opción New Project...

Los datos del proyecto son:
  • Proyecto: Silverlight for Windows Phone
  • Tipo: Windows Phone Application
  • Name: AnimacionTitulo
  • Location: (donde queráis, yo por ejemplo puse...) C:\warterrain\
  • Solution name: AnimacionTitulo
  • Marcar “Create directory for solution”.
Lo primero que vamos a hacer es quitar el TextBlock “PageTitle” y el TextBlock”ApplicationTitle”. Para quitarlos basta seleccionarlos y luego pulsar la tecla “Supr”.

A continuación vamos a agregar la imagen del título.

Primero copiamos la imagen (llamada “titulo41Mobile.PNG”) al directorio raíz de la aplicación.

Depués pulsamos con el botón derecho del ratón en el nombre del proyecto en la ventana de “Solution Explorer”, luego en el menú seleccionar “Add”, luego eleccionar “Existing Item...”.

Seleccionar el archivo PNG y agregarlo al proyecto.

Vamos a agregar un control Image. Para ello vamos a Toolbox seleccionamos Image y arrastramos el elemento hasta el grid de nuetra aplicación.

Vamos a las propiedades del control Image y en “Source” pinchamos y seleccionamos el archivo titulo41Mobile.PNG.


Figura 2.

Si lanzasemos la aplicación tendría el aspecto siguiente en la aplicación.


Figura 3.


PARTE EXPRESSION BLEND

Vamos a meter ahora la Animación abriendo el proyecto con Expression Blend.

Pulsamos en File -> opción Open Project/Solution. Seleccionamos nuestra solución.


Figura 4.


En la figura 4 vemos nuestro proyecto en Expression Blend.

La animación que vamos a crear es un objeto StoryBoard. Para crear esta animación, primero pulsamos en el signo “+” En la pestaña de “Objects y Timeline”. Luego pulsar “New...”.


Figura 5.

En la figura 6 se puede ver la ventana donde se pide un nombre para el StoryBoard. Vamos a ponerle el nombre “StoryBoardInicio” después pulsamos “Ok”.


Figura 6.

Una vez creado el StoryBoard, expandimos el árbol jerárquico del XAML en “Objects andTimeline” hasta llegar al control imageTitulo. Lo seleccionamos (ver figura 7).


Figura 7.

Para que la imagen esté oculta al principio de la animación vamos a poner en la pestaña Properties -> Appearance la propiedad Opacity al 0%. De esta forma el control no será visible.
A continuación, vamos a pulsar en el triángulo de “Go to the next frame” en la pestaña Objects and Timeline, hasta llegar a 2 segundos (ver figura 8).


Figura 8.

Al llegar a dos segundos, seleccionamos imageTitulo y ponemos la propiedad Opacity a 100%. Al dar a enter, Blend automáticamente calculará la transformación entre opacity = 0% y opacity = 100% haciéndose el cambio en dos segundos (ver figura 9).


Figura 9.

Si pulsamos en Play en la pestaña “Objects and Timeline” podremos ver cómo será el aspecto final de la animación.

Pulsamos en la casilla de grabación para que se deje de grabar la animación (ver figura 10) y podamos grabar los cambios.


Figura 10.

Damos a salvar. Y nos volvemos a Visual Studio 2010 donde abrimos de nuevo la solución.


PARTE VISUAL STUDIO(II)

Ahora vamos a indicar que se ejecute la animación al iniciarse la aplicación.

Para ello, hacemos doble click en el evento Loaded del control ContentGrid (ver figura 11).


Figura 11.

En el cuerpo del código de este evento añadiremos la linea de código “StoryBoardInicio.Begin();” que ejecuta completamente la animación que hemos creado cuando se carga la aplicación.

Y ahora solo queda ejecutar el programa y ver cómo ha quedado.


Figura 12.


Figura 13.


Figura 14.

¡Genial! ¡Buen trabajo!

Pues nada. Espero que os lo hayáis pasado bien. Se pueden hacer muchas animaciones diferentes utilizando este método tan simple. Solo tenéis que echadle imaginación.

Os dejo unos cuántos recursos.


Recursos de este artículo:

Sitio web para desarrolladores de Windows Phone 7
Groups Live del DotNetClub UCM