[Christmas Mobile Apps Sessions] Material de “Herramientas y toolkits para Universal Apps”

DownloadEl evento

El pasado Miércoles 10 de Diciembre tenía lugar el cuarto webcast de las Christmas Mobile Apps Sessiones. Las Christmas Mobile Apps Sessions son un conjunto 10 webcasts sobre desarrollo de apps móviles con variada  temática.

En esta sesión, vimos novedades de Visual Studio en XAML y C# relacionadas con aplicaciones universales, profundizamos en todas las posibilidades que nos brinda el emulador de Windows Phone, repasamos algunas características fundamentales de Blend, probamos la herramientas de análisis de rendimiento además de ver muchas otras herramientas variadas.

El material

La presentación utilizada:

Podéis descargar el conjunto de ejemplos realizados en el webcast a continuación:

Por último, podéis ver en cualquier momento el webcast en el siguiente video:

Más información

Anuncios

[Evento] Material del Madrid Mobility Day

dateEl evento

El pasado Martes, 30 de Septiembre tuve el enorme placer de participar en el Madrid Mobility Day junto a Josué Yeray, Alejandro Campos y Luis Guerrero. El evento constaba de múltiples sesiones de desarrollo para Windows y Windows Phone, publicación y marketing, desarrollo de videojuegos con Unity y desarrollo de aplicaciones móviles multiplataforma con Xamarin.

Microsoft Ibérica

Microsoft Ibérica

Las charlas

Participé con dos charlas de desarrollo:

  • Desarrollo de aplicaciones Windows Phone con Silverlight 8.1.
  • Introducción al desarrollo de apps móviles multiplataforma con Xamarin.Forms. En esta ocasión con la inestimable ayuda de Josué Yeray.

Desarrollo de aplicaciones Windows Phone con Silverlight 8.1

Con la llegada de Windows Phone 8.1 tenemos nuevas formas posibles de desarrollar nuestras aplicaciones. Por un lado se habla de Silverlight 8.1, por otro de Windows XAML, WinJS, etc. La idea de la charla era:

  • ¿Que diferencia hay entre Silverlight 8.1 y Windows XAML?
  • ¿Si ya tengo una App Windows Phone 8.0, que uso?
  • ¿Y si es Windows Store?

En Windows Phone 8.1 podemos desarrollar con:

  • Silverlight Windows Phone 8.0: Todas las aplicaciones Windows Phone 8.0 funcionan en Windows Phone 8.1 aunque evidentemente sin tener acceso a las nuevas APIs.
  • Silverlight 8.1: Nueva versión destinada a migrar aplicaciones con rapidez y sencillez.
  • Windows XAML: Gran novedad, llega a Windows Phone una nueva versión de XAML, el ya usado en aplicaciones WinRT. La convergencia entre las paltaformas se potencia gracias a esta nueva opción dando lugar a los proyectos universales.
  • WinJS: Permite desarrollar aplicaciones nativas con HTML5, CSS y JS. Ahora además de aplicaciones Windows Store permite crear aplicaciones Windows Phone, incluso aplicaciones universales.

Las conclusiones básicas de la charla fueron:

  • Si tienes una aplicación Windows Phone 8.0 y no necesitas ninguna de las nuevas APIs disponibles en Windows Phone 8.1 no tienes que hacer nada. Las aplicaciones Windows Phone 8.0 funcionan en los dispositivos Windows Phone 8.1.
  • Si tienes una aplicación Windows Phone 8.0 y quieres utilizar las nuevas APIs de Windows Phone 8.1, Silverlight 8.1 es una buena opción. Silverlight 8.1 nos permite migrar aplicaciones con suma facilidad. Si tu aplicación utiliza:
    • CameraCaptureTask
    • Camera Lenses
    • Lockscreen background image provider
    • Alarmas
    • Recordatorios

Silverlight 8.1 es tu opción ya que estas opciones son exclusivas de Silverlight.

Desde Windows Phone 8.0

  • Sin embargo, hay opciones disponibles en Windows Phone 8.0 que no estan disponibles en Silverlight 8.1 como por ejemplo Background Audio. En este caso Windows XAML es la opción adecuada.
  • Si partimos de una aplicación Windows Store, Windows XAML es más directo.
  • Si partimos de una aplicación Windows Store desarrollada con WinJS, utilizar WinJS para Windows Phone es lo más idóneo.
  • Si partimos de cero, podemos elegir entre Windows XAML, WinJS o Silverlight 8.1. Todo depende de los conocimientos que tengas en los lenguajes y que quieras realizar. Si quieres cubrir teléfonos y tabletas (aplicaciones Windows Phone y Windows Store), realizar una aplicación universal es lo más idóneo.

Nueva Aplicación

Introducción al desarrollo de apps móviles multiplataforma con Xamarin.Forms

Con la reciente actualización a la versión 3 de Xamarin nos llega Xamarin.Forms. Es un toolkit para crear una abstracción sobre la interfaz de usuario de Android, iOS y Windows Phone permitiendo desarrollarla una única vez con código C# o Extensible Application Markup Language (XAML).

En esta sesión junto a Josué Yeray teníamos como objetivos:

  • Trasmitir en que consiste y como funciona Xamarin.Forms.
  • Crear y explicar una App desde cero.
  • Aplicar MVVM.
  • Comparar con alternativas como MVVMCross.

El material

Desarrollo de aplicaciones Windows Phone con Silverlight 8.1

Os dejo a continuación la presentación utilizada en esta sesión:

Además de los ejemplos.

Introducción al desarrollo de apps móviles multiplataforma con Xamarin.Forms

Presentación utilizada en esta sesión:

Y ejemplos.

Extra

No quisiera terminar sin agradecer a los chicos de DX por su colaboración,  facilitarnos la sala y en definitiva hacer que todo sea tan sencillo. También me gustaría agradecer a Cristina Guerrero, nuestra MVP Lead por realizarnos una visita. Era la primera vez que la conocía en persona y solo puedo decir que es aun más encantadora en persona si cabe. Y por supuesto, como no, gracias a todos los asistentes.

Madrid Mobility Day

Madrid Mobility Day

Más información

[Windows Phone 8.1] Cambios en controles

WP8.1 LogoIntroducción

Con la llegada de nuevo SDK siempre esperamos novedades significativas que nos permitan crear cada vez mejores aplicaciones y otorgar experiencias de usuario más completas. Hasta ahora, en determinadas ocasiones,  podíamos echar de menos algunos controles que cubriesen necesidades básicas. Por ese motivo, en ocasiones hemos analizado controles del Toolkit de Windows Phone, Coding4Fun, Cimbalino, MyToolkit y otras herramientas para suplir ciertas carencias.

Con la llegada de este nuevo SDK muchos de estos aspectos se cubren perfectamente además de conseguir controles comunes con la plataforma Windows lo que nos permite compartir una mayor cantidad de código también en XAML.

¿Te apuntas a descubrir todas las novedades disponibles en controles?

Que hemos dejado atrás

Hay cambios importantes en controles muy básicos usados practicamente en cualquier aplicación Windows Phone. Por este motivo, vamos a comenzar hablando de los controles que “hemos dejado atrás”.

Hasta siempre Panorama, bienvenido Hub

Comenzamos hablando del Panorama. Control usado como eje básico de muchas aplicaciones. Permite mostrar una gran cantidad de información más alla de los límites de la pantalla a la que accedemos realizando scroll horizontal.

Pues… es nuestra primera pérdida. Pero, tranquilos!, no, no perdemos ni se modifica dráticamente la experiencia de usuario otorgada por el control Panorama ya que ha sido sustituido por el control Hub.

<Hub Header="Header">
    <HubSection Header="Sub header 1">
        <DataTemplate>
            <Grid />
        </DataTemplate>
    </HubSection>
    <HubSection Header="Sub header 2">
        <DataTemplate>
            <Grid />
        </DataTemplate>
    </HubSection>
</Hub>
Hub

Hub

 WebBrowser pasa a ser WebView

Para aquellos que trabajasen con el control WebBrowser en Windows Phone, la llegada del WebView no será un simple “cambio de nombre”. El control WebView llega cargado de grandes cambios que permiten el trabajo con contenido HTML de forma mucho más trasparente y sencilla.

<WebView />

Ahora en lugar del LongListSelector usamos el SemanticZoom

El control LongListSelector era un control listado  avanzado que puede mostrar dos listas, una  plana y otra agrupada. Ayuda a los usuarios a navegar a través de largas listas, le permite saltar entre las diferentes secciones de la lista mediante una rejilla que se superpone a la lista cuando el usuario selecciona uno de los encabezados.

Ahora en su lugar usaremos el control SemanticZoom ya existente en aplicaciones Windows Store previamente. El control SemanticZoom a pesar de no ser un control listado es mucho más potente. Cuenta con dos estados ZoomedInView y ZoomedOutView. De esta forma podemos permitir cambiar entre las dos vistas de manera sencilla incluyendo un control lista en la vista ZoomedIn y un GridView en la vista ZoomedOut.

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <!-- ListView or GridView -->
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <!-- ListView or GridView -->
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>
SemanticZoom

SemanticZoom

RickTextBox es ahora RichTextBlock

Este control nos permite texto con formato: imágenes en líneas, enlaces y otro tipo de contenido enriquecido.

<RichTextBlock>
    <Paragraph>
        <Bold>Interesante<Bold> control
    </Paragraph>
</RichTextBlock>

Adios MultiScaleImage

Este control ha quedado atrás sin sustituto directo. Permitía utilizar imágenes con múltiples resoluciones y realizar diferentes gestos. Sin embargo, podemos utilizar en su lugar el control Image por defecto.

<MultiScaleImage Source="source/source.xml" />

NOTA: Si actualizamos una aplicación existente a Silverlight 8.1 el control seguirá estando disponible.

CommandBar

El control CommandBar esta compartido entre Windows y Windows Phone. Nos permite crear application bars con facilidad.

<Page.BottomAppBar>
        <CommandBar x:Name="commandBar">
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="edit" Icon="Edit" />
                <AppBarButton Label="favorite" Icon="Favorite" />
                <AppBarSeparator />
                <AppBarToggleButton Label="play" Icon="Play" />
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="help" Icon="Question" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
</Page.BottomAppBar>

 

CommandBar en aplicaciones Windows Store

CommandBar en aplicaciones Windows Store

CommandBar en Windows Phone

CommandBar en Windows Phone

NOTA: En Windows Phone sustituye al control ApplicationBar. En Windows existe también el control AppBar, la diferencia recae en el tipo de contenido que puede albergar, el CommandBar solo puede contener controles ICommandBarElement.

Que hay de nuevo

Una gran cantidad de controles estan disponibles en Windows 8.1 y Windows Phone 8.1 pero no es asi con todos. A continuación, vamos a ver una introducción a controles nuevos disponibles en Windows Phone 8.1:

PickerFlyout

Flyout con una propiedad llamada ConfirmationButtonsVisible que nos permite mostrar los botones aceptar/cancelar en la parte inferior del flyout.

var pickerFlyout = new PickerFlyout();
var textBlock = new TextBlock { Text = "flyout textblock", FontSize = 24 };
pickerFlyout.Content = textBlock ;
pickerFlyout.ConfirmationButtonsVisible = true;
await pickerFlyout.ShowAtAsync(targetFrameWorkElement);

DatePickerFlyout

Podemos mostrar un flyout que permite seleccionar fechas:

var datePickerFlyout = new DatePickerFlyout();
await datePickerFlyout.ShowAtAsync(targetFrameWorkElement);

TimePickerFlyout

Control muy similar al DatePickerFlyout permitiendo seleccionar horas en lugar de fechas.

var timePickerFlyout = new TimePickerFlyout();
await timePickerFlyout.ShowAtAsync(targetFrameWorkElement);

ListPickerFlyout

Flyout que muestra un listado indicado por la propiedad ItemsSource.

var listPickerFlyout = new ListPickerFlyout();
listPickerFlyout.ItemsSource = source;
await listPickerFlyout.ShowAtAsync(targetFrameWorkElement);

AutoSuggestBox

Control totalmente nuevo exclusivo de Windows Phone 8.1 (en Windows podemos conseguir lo mismo de otras formas).  Muestra una caja de texto de modo que segun el usuario va escribiendo, va recibiendo sugerencias. Las sugerencias las podemos indicar gracias a la propiedad ItemsSource:

<AutoSuggestBox TextChanged="AutoSuggestBox_TextChanged"
    ItemsSource="{Binding Suggestions}">
    <AutoSuggestBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </AutoSuggestBox.ItemTemplate>
</AutoSuggestBox>

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender,
        AutoSuggestBoxTextChangedEventArgs args)
{
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        Suggestions.Clear();
        Suggestions.Add(sender.Text + "1");
        Suggestions.Add(sender.Text + "2");
        Suggestions.Add(sender.Text + "3");
        Suggestions.Add(sender.Text + "4");
        Suggestions.Add(sender.Text + "5");
    }
}
AutoSuggestBox

AutoSuggestBox

A su vez, tenemos eventos para determinar cada vez que el usuario escribe para poder cambiar las sugerencias dinámicamente.

ContentDialog

Control que nos permite crear mensajes popups personalizados.

private async void ShowContentDialog()
{
    ContentDialog dialog = new ContentDialog()
    {
        Title = "Download updates?",
        Content = "This update will clean the slate for Iron Man",
        PrimaryButtonText = "Yes, clean it",
        SecondaryButtonText = "No, Dont!"
    };
    dialog.SecondaryButtonClick += dialog_SecondaryButtonClick;

    ContentDialogResult result = await dialog.ShowAsync();
    if (result == ContentDialogResult.Primary) { /* do some more Primary logic */ }
    else if (result == ContentDialogResult.Secondary) { /* else do Secondary logic */ }
}
ContentDialog

ContentDialog

Podemos mostrar el popup en modo a pantalla completa o de forma parcial.

Controles compartidos con Windows

Tenemos un gran listado de controles que son exactamente iguales (en funcionalidad, comportamiento, nombres, namespaces, etc.) tanto en Windows 8.1 como en Windows Phone 8.1. Esto nos facilita enormemente la tarea de compartir código entre ambas plataformas.

De los controles vistos previamente, algunos de ellos, cumplen esta característica:

  • Hub
  • SemanticZoom
  • WebView

Además de los ya nombrados tenemos otros nuevos o que ya existían para crear aplicaciones Windows Store y llegan por primera vez a la plataforma Windows Phone.

DatePicker

No podía continuar por otro control. Cumple unas necesidades básicas que hasta ahora teníamos que cubrir con el Toolkit de Windows Phone u otras herramientas. Por fin llega a Windows Phone un control para introducir fechas de manera fácil e intuitiva de la misma forma que lo hacíamos hasta ahora usando el Toolkit por ejemplo, pero de forma directa con el SDK.

<DatePicker/>

Además llega localizado entre otra serie de características que nos facilitan mucho su uso.

TimePicker

Al igual que el anterior, este control también era muy esperado. Control usado para insertar horas en nuestras aplicaciones.

<TimePicker/>
TimePicker

TimePicker

Frame

En las aplicaciones de la plataforma Windows, usamos un objeto de tipo Frame que contendrá cada una de las páginas que componen la aplicación permitiendo la navegación entre ellas. Hasta ahora, el control Frame de Windows Phone y Windows eran diferentes. Ya son iguales. Esto permite utilizar el mismo sistema de navegación en ambas plataformas. Contiene comandos para regresar hacia atrás o navegar a otras páginas.

ProgressRing

Control que ya teníamos en aplicaciones Windows Store pero no en Windows Phone donde contábamos con el control ProgressIndicator. Este control muestra un progreso con una serie de puntos que giran formando un círculo.

<ProgressRing IsActive="True"/>

FlipView

Control que ya existía en Windows y llega a Windows Phone. Permite pasar por los elementos de una colección, uno a uno.

ListView

Control ya habitual en aplicaciones Windows Store que ahora es común a ambas plataformas. El control ListView es una lista vertical que hereda del control ListBox siendo más flexible permitiendo el uso del SemanticZoom asi como el uso de columnas, diferentes vistas, etc.

<ListView ItemsSource="{Binding Items}" />

También el control GridView

Uno de los controles principales desde la llegada de Windows 8 ahora es común a ambas plataformas. El control GridView un listado con scroll horizontal (por defecto) que funciona y permite unas opciones similares al ListView.

<GridView ItemsSource="{Binding Items}" />

ToggleSwitch

En Windows Phone teníamos el control CheckBox al que podíamos lograr asignarle un aspecto visual similar al control ToggleSwitch disponible en aplicaciones Windows Store. Además, podíamos utilizar librerías de terceros para conseguir el resultado. Ya no será necesario realizar ninguna de las dos tareas ya que tenemos incluido el control en el SDK de manera compartida entre plataformas.

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch"
              OnContent="On" OffContent="Off"
              Toggled="ToggleSwitch_Toggled"/>
ToggleSwitch

ToggleSwitch

NOTA: Utiliza el color Accent del teléfono para resaltar el Switch al estar activado.

Flyout

Con este control podemos crear nuestros flyouts totalmente personalizados. Puede contener cualquier tipo de control que necesitemos.

<Flyout>
    <StackPanel>
        <TextBlock>Flyout</TextBlock>
        <Button>Clic</Button>
    </StackPanel>
</Flyout>
Flyout

Flyout

En Windows Phone se posiciona en la parte superior de la pantalla mientras que en Windows se posicionará en la parte superior del control target.

MenuFlyout

Es el nuevo context menu. Muy similar al control anterior con la diferencia básica recayendo en el contenido. El control MenuFlyout solo puede contener MenyFlyoutItem, ToggleMenuFlyout y MenuFlyoutSeparator.

<Page.BottomAppBar>
  <CommandBar>
    <AppBarButton Icon="Camera" Label="brag">
      <AppBarButton.Flyout>
        <MenuFlyout>
          <MenuFlyoutItem Text="Photo" />
          <MenuFlyoutItem Text="Video" />
        </MenuFlyout>
      </AppBarButton.Flyout>
    </AppBarButton>
    <AppBarButton Icon="Pin" Label="Like"/>
  </CommandBar>
</Page.BottomAppBar>
MenuFlyout

MenuFlyout

WrapGrid

Panel que posiciona los elementos secuencialmente de izquierda a derecha o de arriba a abajo. Cuando un elemento excede el tamaño del panel, se posiciona en la siguiente fila o columna.

<ListView.ItemsPanel>
     <ItemsPanelTemplate>
          <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
     </ItemsPanelTemplate>
</ListView.ItemsPanel>

NOTA: Se utiliza para cambiar la forma de posicionamiento en un control ItemsControl.

VariableSizedWrapGrid

Panel que permite organizar a sus elementos en filas y columnas. Cada elemento puede ocupar más de una fila y/o columna.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80"
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80"
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80"
               VariableSizedWrapGrid.RowSpan="2"
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>
VariableSizeWrapGrid

VariableSizeWrapGrid

NOTA: VariableSizedWrapGrid no usa virtualización, puede impactar en el rendimiento.

Más información

Material de “De WP8 a WP8.1” en el Gusenet

Gusenet LogoEl evento

Este fin de semana se ha celebrado el evento “Back To My Roots” de Gusenet, el Grupo de Usuarios .NET del sureste. Tras una superación año tras año, este año ha habido una participación expectacular con una excelente asistencia, un número elevado de charlas con ponentes de un enorme nivel y una variedad temática sorprendente.

Además de poder disfrutar de las charlas, hablar y desvirtualizar a muchos  de los asistentes, tuve la oportunidad de poder participar con una charla en el evento.

La charla

Con la llegada de Windows Phone 8.1 tenemos nuevas formas posibles de desarrollar nuestras aplicaciones. Por un lado se habla de Silverlight 8.1, por otro de Windows XAML, WinJS, etc. La idea de la charla era:

  • ¿Que diferencia hay entre Silverlight 8.1 y Windows XAML?
  • ¿Si ya tengo una App Windows Phone 8.0, que uso?
  • ¿Y si es Windows Store?

En Windows Phone 8.1 podemos desarrollar con:

  • Silverlight Windows Phone 8.0: Todas las aplicaciones Windows Phone 8.0 funcionan en Windows Phone 8.1 aunque evidentemente sin tener acceso a las nuevas APIs.
  • Silverlight 8.1: Nueva versión destinada a migrar aplicaciones con rapidez y sencillez.
  • Windows XAML: Gran novedad, llega a Windows Phone una nueva versión de XAML, el ya usado en aplicaciones WinRT. La convergencia entre las paltaformas se potencia gracias a esta nueva opción dando lugar a los proyectos universales.
  • WinJS: Permite desarrollar aplicaciones nativas con HTML5, CSS y JS. Ahora además de aplicaciones Windows Store permite crear aplicaciones Windows Phone, incluso aplicaciones universales.

Las conclusiones básicas de la charla fueron:

  • Si tienes una aplicación Windows Phone 8.0 y no necesitas ninguna de las nuevas APIs disponibles en Windows Phone 8.1 no tienes que hacer nada. Las aplicaciones Windows Phone 8.0 funcionan en los dispositivos Windows Phone 8.1.
  • Si tienes una aplicación Windows Phone 8.0 y quieres utilizar las nuevas APIs de Windows Phone 8.1, Silverlight 8.1 es una buena opción. Silverlight 8.1 nos permite migrar aplicaciones con suma facilidad. Si tu aplicación utiliza:
    • CameraCaptureTask
    • Camera Lenses
    • Lockscreen background image provider
    • Alarmas
    • Recordatorios

Silverlight 8.1 es tu opción ya que estas opciones son exclusivas de Silverlight.

Desde Windows Phone 8.0

Desde Windows Phone 8.0

  • Sin embargo, hay opciones disponibles en Windows Phone 8.0 que no estan disponibles en Silverlight 8.1 como por ejemplo Background Audio. En este caso Windows XAML es la opción adecuada.
  • Si partimos de una aplicación Windows Store, Windows XAML es más directo.
  • Si partimos de una aplicación Windows Store desarrollada con WinJS, utilizar WinJS para Windows Phone es lo más idóneo.
  • Si partimos de cero, podemos elegir entre Windows XAML, WinJS o Silverlight 8.1. Todo depende de los conocimientos que tengas en los lenguajes y que quieras realizar. Si quieres cubrir teléfonos y tabletas (aplicaciones Windows Phone y Windows Store), realizar una aplicación universal es lo más idóneo.
Nueva Aplicación

Nueva Aplicación

El material

Os dejo a continuación la presentación utilizada:

Además de los ejemplos. Partimos de una aplicación Windows Phone 8 que podéis descargar a continuación:Realizamos la migración a Windows Phone 8.1 ( la aplicación Windows Phone 8.0 contaba con alarmas, por lo que era la opción más adecuada):Posteriormente a una aplicación Universal (sin añadir la opción de recordatorios de la aplicación original):No quisiera terminar sin agradecer a todos que este tipo de eventos sean posibles, asistentes, ponentes y por supuesto a Eladio Rincón, Oscar Montesinos y Pedro Hurtado organizadores del evento. Gusenet ha sido un gran evento donde aprender y compartir muchos conocimientos, con un ambiente excepcional que nos ha dejado un divertido fin de semana.

Hasta el año que viene Gusenet!

Más información

Usar fuentes pesonalizadas en Apps Windows Phone y Windows Store

FontsIntroducción

La interfaz de usuario de las aplicaciones Windows Phone y Windows Store se basa en el uso del lenguaje Modern UI donde el correcto uso de fuentes obtiene un gran peso permitiendo otorgar un aspecto espaciado y ordenado facilitando el uso de la aplicación.

Segun las guías de estilo de ambas plataformas existen una serie de recomendaciones en cuanto al uso de fuentes que afectan al tipo de fuente, tamaño y espacio donde la fuente Segoe tiene un peso especial. Estas guías nos facilitan en muchas ocasiones el conseguir un aspecto adecuado con un correcto uso de las fuentes. Sin embargo, en ocasiones tenemos la necesidad de usar alguna fuente en concreto por diversos motivos:

  • La fuente en cuestión en base de la identidad corporativa de la aplicación que estamos desarrollando por lo que necesitamos usarla.
  • La fuente es ya usada en otros entornos como por ejemplo en aplicaciones para otros sistemas.
  • La fuente otorga un beneficio en la interfaz de usuario que queremos crear.

Sea por el motivo que sea, en ocasiones, nuestra aplicación tiene la necesidad de usar alguna fuente en concreto.

¿Cómo lo conseguimos?

Fuentes personalizadas

Tanto en el desarrollo de aplicaciones Windows Phone como en aplicaciones Windows Store tenemos acceso a una gran variedad de fuentes a las que podemos acceder utilizando la propiedad FontFamily en elementos de texto. Por defecto tenemos acceso a una gran variedad de fuentes:

  • Arial
  • Arial Black
  • Arial Unicode MS
  • Calibri
  • Cambria
  • Cambria Math
  • Comic Sans MS
  • Candara
  • Consolas
  • Constantia
  • Corbel
  • Courier New
  • Georgia
  • Lucida Sans Unicode
  • Segoe UI
  • Symbol
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Wingdings
  • Wingdings 2
  • Wingdings 3

Como podemos ver la variedad es alta pero… ¿y si la fuente que necesitamos utilizar no esta entre las fuentes disponibles?, ¿y si nuestra fuente (TTF) no se encuentra en el sistema?

¿Cómo usar fuentes personalizadas?

El trabajo con fuentes personalizadas en aplicaciones Windows Phone y Windows Store es sumamente sencillo. Comenzamos con el archivo o archivos de fuente en extesión .ttf. Para poder trabajar con las fuentes debemos tenerlas disponibles en nuestro proyecto.

NOTA: En este ejemplo vamos a utilizar la fuente Cheddar Jack disponible en el siguiente enlace.

Añadir la fuente a la solución

cheddar_jack

Cheddar Jack

Cheddar Jack

Incluimos el archivo TTF en una carpeta llamada Fonts dentro de los Assets de nuestra aplicación:

Añadimos las fuentes a nuestor proyecto

Añadimos las fuentes a nuestor proyecto

Tras añadir la fuente, en sus propiedades, estableceremos la propiedad Build Action a Content y la propiedad Copy to Output Directory a Copy if newer:

Content, Copy if never

Content, Copy if never

Para poder utilizar la fuente necesitamos además de saber la ruta y nombre del fichero, el nombre de la fuente (no es igual al nombre del fichero).

Obtener el nombre de la fuente

Para obtener el nombre de la fuente bastará con realizar doble clic sobre el fichero TTF:

Nombre de la fuente

Nombre de la fuente

En nuestro caso el nombre de la fuente es Cheddar Jack.

Utilizando la fuente

Añadimos un TextBlock en el contenido del Grid principal de nuestra aplicación y le añadimos en la propiedad FontFamily:

<TextBlock
     FontFamily="/Assets/Fonts/cheddar_jack.ttf#Cheddar Jack"
     FontSize="32"
     Text="Usando la fuente Cheddar Jack!" />

¿Qué significado tiene el texto que hemos indicado?

Ejemplo Fuentes 05

NOTA: Podemos renombrar el archivo TTF a por ejemplo CheddarJack.ttf y todo seguira funcionando correctamente. Sin embargo, la última parte, el nombre de la fuente, debe reflejar exactamente el nombre de la fuente incluidos espacios.

NOTA: Hay fuentes con problemas de compatibilidad. En estos casos si la fuente se llama Gothan Medium por ejemplo y tenemos problemas a la hora de acceder a la misma debemos quedarnos solo con la primera palabra, es decir, Gothan. Solo necesitamos realizar esta acción ante determinadas fuentes con problemas de compatibilidad.

Usando la fuente Cheddar Jack

Usando la fuente Cheddar Jack

Podéis descargar el ejemplo a continuación:

Extra

Ya hemos visto lo realmente sencillo que es trabajar con fuentes personalizadas en aplicaciones Windows Phone y Windows Store pero hay algunos detalles interesantes a comentar.

Acceso a la fuente en runtime

Podemos utilizar una fuente personalizada en runtime utilizando la propiedad FontFamily de un control de texto:

textBlock.FontFamily = new FontFamily("/Assets/Fonts/cheddar_jack.ttf#Cheddar Jack");

Trabajo organizado

Cuando toda nuestra aplicación accederá a fuentes personalizadas no debemos colocar la propiedad FontFamily continuamente con la ruta, nombre del fichero y nombre de la fuente. Debemos hacer un uso adecuado de la potencia disponible en XAML utilizando recursos y estilos.

Podemos crearnos un diccionario de recursos llamado Fonts. Dentro del archivo de recursos podremos organizar las fuentes de la siguiente forma:

<!-- Fonts -->
<FontFamily x:Key="LightFontFamily">/Fonts/Font-Light.ttf#Font Light</FontFamily>
<FontFamily x:Key="MediumFontFamily">/Fonts/Font-Medium.ttf#Font Medium</FontFamily>
<FontFamily x:Key="BlackFontFamily">/Fonts/Font-Black.ttf#Font Black</FontFamily>

Incluimos el diccionario de recursos entre los recursos de la aplicación:

<Application.Resources>
     <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="/Themes/Fonts.xaml"/>
          </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
</Application.Resources>

Y desde cualquier control de texto bastara con:

<TextBlock
     FontFamily="{StaticResource LightFontFamily}"
     FontSize="32"
     Text="Usando la fuente Cheddar Jack!" />

Fácil y muy cómodo, ¿cierto?.

Más información

Windows 8. Publicar aplicación en la Windows Store.

Introducción

El objetivo final tras el desarrollo de una aplicación Windows 8 es su distribución. En Windows 8, gracias a la Windows Store, los desarrolladores tienen un canal de distribución potente y sencillo para llegar a los posibles usuarios. En la entrada actual nos centraremos en cada uno de los pasos que debemos realizar para publicar una aplicación en la tienda de Windows.

Prerrequisitos

  1. Licencia de desarrollo para la Windows Store.
  2. Tener una aplicación finalizada completamente testeada.
  3. Haber pasado el test Windows App Certification Kit.
  4. Revisar los requisitos necesarios para certificar la aplicación.

NOTA: Recuerda compilar tu aplicación bajo Windows 8 RTM. Es ya necesario para pasar la certificación. Si intentas subir el paquete de la aplicación generado por ejemplo en la versión Release Preview obtendrás el siguiente error:

Este paquete no fue generado con la versión actual de Windows. Instale la versión actual de Windows y genere el paquete de nuevo.

Enviar la aplicación

Comenzamos. Nos dirigmos al centro de desarrolo de aplicaciones estilo Metro:

http://msdn.microsoft.com/es-ES/windows/apps

Una vez dentro del Centro de desarrollo, y tras iniciar sesión, hacemos clic sobre la opción “Panel de Información”. A continuación, elegiremos la opción “Enviar una aplicación”:

Como podéis ver en la captura superior, contamos con 8 pasos (una hora y medio de tiempo aproximado segun las indicaciones, aunque sin duda podemos realizar el proceso en menos tiempo). Vamos a ir analizando que debemos hacer paso a paso:

1º – Nombre de la aplicación

Es el primer paso a realizar. Elegir el nombre de nuestra aplicación. Es un punto muy importante. la Windows Store nos ofrece dos características sumamente interesantes:

  • Reservar un nombre. Podemos reservar un nombre para nuestra aplicación hasta 12 meses.
  • Especificar un nombre distinto para cada país. Es importante elegir con exactitud un nombre adecuado que de entrada describa la funcionalidad de la aplicación. Esto nos aporta un extra en la repercusión que obtenemos ya que uno de los criterios principales a la hora de buscar aplicaciones es el nombre de la misma. Por lo tanto, si tenemos una aplicación de estrenos de películas llamada “Estrenos de Cine” en español, si la adaptamos y lanzamos también en Estados Unidos por ejemplo, sería idóneo llamarla “Film Releases”.

¿Se puede cambiar el nombre de la aplicación?

Si. Sin embargo, si la aplicación ya esta publicada en la Store deberá de pasar de nuevo todo el proceso de certificación.

2º – Detalles de la Venta

En este punto debemos decidir a que mercados va dirigida la aplicación, su precio, fecha de lanzamiento y la categoría de la misma.

NOTA: Con aplicaciones que tengan éxito en Windows, ganarás un 80 % de cada euro de los clientes después de que una aplicación alcance los 25.000 € en ventas. En los primeros 25.000 € de las ventas de la aplicación, obtendrás el 70 %.

3º – Funciones Avanzadas

En este apartado puedes configurar y definir las características que le dan valor adicional a tu aplicación.

  • Servicio de notificaciones. Utilizado para actualizar los datos de la aplicación de forma dinámica.
  • Servicios Live Connect. Tu aplicación puede usar servicios Live Connect para acceder a los datos de tu cliente con SkyDrive o Hotmail por ejemplo.

4º – Clasificación por edades

Todas las aplicaciones de la tienda deben tener una clasificación por edad que indique para qué público es adecuada.

Para elegir una clasificación por edad debemos tener en cuenta el contenido que proporciona la aplicación además de las imágenes que podrían aparecer cuando se abra la aplicación.

Las clasificaciones por edad que se usan en la Tienda Windows son:

  • 3+ Apto para niños pequeños. Aplicaciones son adecuadas para niños. Es decir, violencia mínima, el contenido no puede causar miedo y por supuesto no pueden aparecer desnudos ni referencias a actividades sexuales.
  • 7+ Apto para mayores de 7 años. Las aplicaciones con esta clasificación por edad tienen los mismos criterios que las aplicaciones clasificadas como 3+, excepto que pueden incluir contenido que podría asustar a público más joven y pueden tener desnudez parcial, sin connotaciones sexuales.
  • 12+ Apto para mayores de 12 años. Pueden contener un mayor nivel de desnudez sin carácter sexual, mayor violencia gráfica, se puede incluir lenguaje soez, etc. Recomiendan elegir esta opción si no se tiene muy claro que elegir.
  • 16+ Apto para mayores de 16 años. Pueden contener violencia y describir actividades sexuales.

5º – Criptografía

En este apartado debes indicar si la aplicación usa algún tipo de criptografía que esté regulada por las Regulaciones de la Administración de Exportaciones.

6º – Paquetes

En este apartado subiremos (tan fácil como arrastrar y soltar) el paquete de nuestra aplicación. Como hemos indicado anteriormente es necesario que el paquete haya sido generado con Windows RTM. Hablaremos de como crear paquetes de nuestra aplicación en próximas entradas. Recomiendo echarle un vistazo al siguiente video (donde se explica como generar un paquete de la aplicación, en local pero para la Store es similar) disponible en el canal YouTube de la MSDN y creado por Pablo Carballude:

7º – Descripción

Este apartado es el que más trabajo nos dará ya que es el que más información exige.

Aquí añadimos la descripción de nuestra aplicación que aparecera en la tienda(máximo 10000 caracteres).

Podemos añadir hasta 20 características a destacar de nuestra aplicación, cada una hasta un máximo de 200 caracteres.

De manera opcional podemos añadir palabras clave. Serán utilizadas junto al título de nuestra aplicación a la hora de realizar búsquedas en la tienda. Podemos añadir un máximo de 7 palabras claves.

En este apartado también añadiremos las capturas de pantalla de la aplicación que se mostrarán en la tienda. Hasta un máximo de ocho, cada una de ellas junto con una descripción (tamaño mínimo de 1.366 x 766 px).

También podemos añadir imágenes promocionales (son opcionales). Estas imágenes serán las utilizadas en la tienda si la aplicación es elegida entre las promocionadas. Hay que preparar imágenes promocionales en cuatro tamaños diferentes:

  • 414x180px
  • 414x468px
  • 558x756px
  • 846x468px

Podemos añadir información como sitio web de la aplicación, el correo de contacto, un enlace a las directivas de privacidad, etc.

NOTA: Centramos especial atención a la política de privacidad ya que es uno de los motivos principales de rechazo en el proceso de certificación. Es vital para pasar la certificación el añadir la política de privacidad en el Charms de configuración de la aplicación. Recomiendo echarle un vistazo al siguiente artículo de la MSDN:

Cómo añadir en los Settings un enlace a una web con la Política de Privacidad (XAML/C#)

Imágen perteneciente a Jonathan Garrigues

NOTA: Todo el proceso de certificación lo tenéis completo en español.

8º – Nota para evaluadores

Puedes añadir información útil qué quieres que sepan los evaluadores que certificarán tu aplicación (máximo 500 caracteres). Por ejemplo:

Si la aplicación debe iniciar sesión en un servicio, proporciona el nombre de usuario y la contraseña de una cuenta de prueba.

Por supuesto es opcional, si no crees necesario realizar ningún tipo de indicación puedes dejarlo en blanco.

Enviar

Tras finalizar todos los pasos (anteriormente no aparece el botón) podremos pulsar sobre el botón “Enviar” para enviar la aplicación al proceso de certificación. Si todo va correctamente, en 5-6 días la aplicación aparecerá en la Windows Store.

Extra

¿Y  tras enviar?

Podemos saber el estado de nuestra aplicación en el proceso de certificación paso a paso. De nuevo todo viene divido en 6 pasos diferentes.

Analizaremos que se realiza en cada uno de los puntos en una próxima entrada.

Espero que lo visto os sea de utilidad. ¿Ya has enviado tu aplicación a la Store?, ¿has tenido algún problema?. Puedes contar tu experiencia o dejar cualquier duda o sugerencia en los comentarios.

Más información