Criando uma fantástica experiência com o bloco (parte 1)

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Criando uma fantástica experiência com o bloco (parte 1)

  • Comments 0

Um bloco dinâmico é uma das melhores maneiras de convencer os usuários a retornar ao seu aplicativo. Esta postagem mostrará como atualizar o bloco dinâmico do seu aplicativo usando APIs locais e de sondagem para que você possa exibir as maiores qualidades de seu aplicativo diretamente da tela inicial do Windows 8. O seu bloco pode colocar diante do usuário todas as novidades sobre o seu aplicativo. O bloco do aplicativo é uma parte fundamental do seu aplicativo e possivelmente a parte mais vista. Tire proveito do bloco para que os usuários retornem ao seu aplicativo!

Nesta postagem, usarei um aplicativo de exemplo para demonstrar como:

  1. Criar levando em conta as atualizações de bloco
  2. Escolher modelos que combinem com o conteúdo do bloco
  3. Usar notificações de sondagem de uma nuvem para atualizar o bloco enquanto o aplicativo não está em execução
  4. Atualizar o bloco enquanto o aplicativo está sendo executado usando a biblioteca de NotificationsExtensions incluída no SDK (Exemplo de notificações e blocos de aplicativo do SDK do Windows 8).

Apresentando o aplicativo Contoso Food Trucks

Vejamos um aplicativo de exemplo: Contoso Food Trucks. Este aplicativo permite aos usuários obter informações sobre caminhões de comida. Esse é o mesmo aplicativo apresentado no site para o caso de estudo do aplicativo estilo Metro. Nesta postagem do blog, mostrarei como adicionar blocos dinâmicos ao aplicativo.

O aplicativo Food Trucks é um dos muitos blocos mostrados na tela inicial

Qual a maior qualidade do seu aplicativo?

Ter em mente as maiores qualidades do seu aplicativo ajuda a estabelecer qual conteúdo o bloco deve conter e com que frequência ele deve ser atualizado.

O aplicativo Contoso Food Trucks é bom em ajudar os usuários a localizar e rastrear seus caminhões de comida favoritos e a descobrir caminhões novos próximos a eles. Por essa razão, tenho as seguintes metas para o bloco Food Trucks:

  • Exibir os caminhões de comida próximos a um local
  • Rastrear os caminhões de comida favoritos do usuário

Não use o bloco do aplicativo como um espaço para publicidade. Usar o bloco para exibir propagandas não será permitido na maioria dos casos de acordo com os termos da loja de aplicativos do Windows.

Bloco padrão e tamanho padrão

Cada aplicativo tem um bloco padrão. Este é o bloco que o usuário vê quando instala o aplicativo pela primeira vez. A imagem do logotipo do bloco padrão representa o logotipo do seu aplicativo ou outra marca para que os usuários possam identificar com clareza o aplicativo.

Você define a imagem do logotipo do bloco padrão no manifesto do aplicativo e o Windows o exibirá até que o bloco esteja atualizado ao receber sua primeira notificação. O bloco pode reverter para a imagem padrão quando não tiver notificações para exibir. Por exemplo, o bloco realizará essa ação quando a notificação atual do bloco expirar ou quando o usuário desativar as atualizações do bloco dinâmico para o aplicativo.

As imagens do bloco padrão também definem os tamanhos que o bloco suporta. Os blocos estão disponíveis em dois tamanhos: quadrado ou grande. Todos os aplicativos devem suportar um bloco quadrado, mas um aplicativo também é capaz de suportar um bloco grande. Se um aplicativo não fornecer uma imagem de logotipo grande para o bloco padrão, o bloco do aplicativo não poderá ser redimensionado para um bloco grande, o que significa que não poderá receber uma notificação de bloco grande. Se um aplicativo incluir uma imagem de logotipo grande, o Windows mostrará o aplicativo em seu formato grande por padrão.

Para nosso aplicativo Contoso Food Trucks, escolhi o suporte a blocos grandes porque eu atualizo o bloco ao menos uma vez por dia e o conteúdo que o aplicativo fornece precisa de um espaço extra. Estas são as imagens que eu uso para logotipos de bloco padrão:

Um bloco retangular intitulado Contoso Food Trucks e um quadrado menor intitulado Food Trucks, com um logotipo grande de um caminhão

Ambos os blocos quadrado e grande podem receber notificações. Ao enviar notificações, sempre incluo as versões quadrada e grande. Dessa maneira, mesmo que um usuário redimensione o bloco para um tamanho menor, ele verá os dados da atualização.

Pais informações sobre como criar uma imagem padrão para o seu aplicativo, acesse este Guia de início rápido: Criando um bloco padrão usando o Microsoft Visual Studio 11 Manifest Editor. É possível encontrar mais informações sobre conceitos de tamanho de blocos na visão geral de blocos e notificações.

Criando atualizações de bloco

Exibir os caminhões de comida mais próximos

Uma das melhores coisas sobre nosso aplicativo é que ele ajuda os usuários a decidir qual caminhão de comida visitar. Portanto, precisamos saber quais caminhões de comida estão mais perto. Para descobrir isso, nosso aplicativo permite aos usuários definir seus locais de almoço padrão. Quando o usuário define este local, mostramos ao usuário que caminhões de comida estão próximos daquele local agora. Para essa atualização de bloco, escolho um modelo sem uma imagem.

Já que os blocos são atualizados com a adição do conteúdo do aplicativo em modelos definidos por sistemas, nossa primeira tarefa será escolher um modelo que funcione para o nosso conteúdo. Após pesquisar em um catálogo de modelos no Centro de Desenvolvimento (consulte Escolhendo um modelo de bloco), selecionei o modelo TileWideText01 para o bloco grande. Para o bloco quadrado, selecionei o modelo TileSquareText03 . Selecionei esses dois modelos exclusivos para textos porque estou apenas atualizando as cadeias de texto no bloco.

Usei o Exemplo de notificações e blocos de aplicativo do SDK do Windows 8 para testar diferentes opções de modelo antes de tomar minha decisão final. Ao usar o exemplo, sou capaz de alternar com facilidade entre diferentes cadeias de texto e imagens até que eu defina o design final do bloco. Por exemplo, ao testar os modelos no exemplo, estabeleci que teria de usar o nome curto do caminhão de comida no modelo do quadrado para fazer com que o texto encaixasse corretamente no espaço.

O bloco retangular grande exibe: Caminhões de comida próximos a você / Caminhão Nom Nom Barbecue / Caminhão Sushi / Caminhão Macaroni Makin' Wagon    O bloco quadrado exibe: Próximo a você / Nom Nom / Caminhão Sushi

Atualizações de blocos são criadas com o envio de uma notificação. Uma notificação é simplesmente um snippet do XML que preenche o esquema do bloco. Você cria o XML no código usando a biblioteca de função TileUpdateManager.getTemplateContent() ou usar a biblioteca NotificationsExtension sobre a qual falarei no próximo parágrafo. A notificação indica qual modelo de bloco é usado ao processar a notificação, e o texto e as imagens a serem exibidos no bloco de acordo com o layout do modelo.

Para criar as atualizações de bloco exibidos mais cedo para o nosso aplicativo de caminhão de comida. Utilizei este XML de bloco:

XML de bloco

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideText01">
<text id="1">Food Trucks Near You</text>
<text id="2">Nom Nom Barbecue Truck</text>
<text id="3">Sushi Truck</text>
<text id="4">Macaroni Makin' Wagon</text>
</binding>
<binding template="TileSquareText03">
<text id="1">Near You</text>
<text id="2">Nom Nom</text>
<text id="3">Sushi Truck</text>
</binding>
</visual>
</tile>

Há dois elementos elementos de <associação> neste XML – um de cada para o bloco grande e bloco quadrado. Já que nosso aplicativo suporta blocos grandes, sempre forneço associações de modelos de blocos grande e quadrado em cada notificação de bloco. Isso permite que um bloco sempre mostre o conteúdo da atualização de notificação, não importando o tamanho do bloco definido pelo usuário. O bloco quadrado mostra apenas dois nomes de caminhões porque o terceiro não encaixa no modelo de quadrado menor.

Caminhões de comida favoritos

Em nosso aplicativo, quero que os usuários saibam onde seus caminhões de comida favoritos estão. No bloco, quero permitir que os usuários saibam da mesma coisa. Em meu caso, a informação se encaixa em duas linhas curtas de texto. Também tenho imagens que representam cada caminhão de comida, o que fará com que a aparência de nosso bloco fique mais interessante.

Já que os blocos são atualizados com a adição do conteúdo do aplicativo em modelos definidos por sistemas, nossa primeira tarefa será selecionar o modelo correto. Após pesquisar em um catálogo de modelos no Centro de Desenvolvimento (Escolhendo um modelo de bloco), selecionei o modelo de bloco TileWideImageAndText02 para o bloco grande que suporta uma imagem e duas cadeias curtas de texto. Para o bloco quadrado, selecionei o modelo TileSquarePeekImageAndText04 para permitir que o bloco mostre tanto a imagem como o texto. Os modelos peek me permitem fornecer mais conteúdo do que as áreas de um bloco normal. O Windows anima modelos peek para mostrar tanto a imagem quanto o texto que eu coloco no modelo dentro do bloco quadrado, de maneira que as molduras superior e inferior do bloco quadrado alterne no bloco. O conteúdo de um bloco peek rola para cima e para baixo dentro do espaço do bloco para exibir todo o conteúdo fornecido.

Imagem de carne em um grelha, logotipo do caminhão e texto atualizado: Caminhão Nom Nom Barbecue Washer Ave e 3rd até 3    Imagem de carne em um grelha, logotipo do caminhão e texto atualizado: Nom Nom @ Washer Ave e 3rd até 3

XML de bloco

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideImageAndText02">
<image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
<text id="1">Nom Nom Barbecue Truck</text>
<text id="1">Washer Ave and 3rd until 3</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
<text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
</binding>
</visual>
</tile>

Como feito anteriormente, estabeleci o que o bloco procurará ao usar uma notificação definida como uma carga de XML. A diferença entre o meu primeiro bloco e este aqui é que estou usando imagens nesta notificação. As imagens em notificações não estão incluídas na carga de XML. Elas são referenciadas da carga para outros locais. As imagens podem estar em um serviço web, como mostrado aqui, ou em uma máquina local. Depois que o Windows recebe a notificação, ele baixa a imagem de um serviço web no momento em que é mostrado para o usuário. Para obter mais informações sobre como incluir imagens em um bloco, consulte Como adicionar imagens em um modelo de bloco no Centro de Desenvolvimento.

Há limites sobre o tamanho do conteúdo das imagens em KB e tamanho do pixel. Notificações de bloco não serão exibidas se as imagens forem muito grandes. Portanto, use imagens que correspondam a esses limites. Observe também que os blocos suportam apenas imagens em JPG e PNG. Para obter mais detalhes sobre a inclusão de imagens em seu bloco, consulte Tamanhos de imagem de bloco no Centro de Desenvolvimento.

Há muito mais a caminho

Agora que sabemos qual aparência queremos para os blocos, a próxima etapa será descobrir quando atualizá-las. Na parte 2 desta postagem, falaremos sobre como adicionar atualizações de bloco local e de sondagem ao aplicativo Contoso Food Trucks. Mostrarei como iniciar a sondagem para atualizações de bloco do seu aplicativo, fornecerei exemplos de ASP.NET e PHP que podem ser utilizados para criar um serviço web de sondagem e falarei sobre como adicionar um bloco secundário ao aplicativo e atualizá-lo usando a biblioteca NotificationsExtension. Até lá, espero que esta postagem tenha ajudado você a começar a pensar sobre como fazer seu aplicativos ganharem destaque em um bloco dinâmico!

-- Kevin Michael Woley, gerente de programas, Windows

Com um agradecimento especial a Tyler Donahue e Nazia Zaman que me ajudaram a elaborar esta postagem do blog.

  • Loading...
Leave a Comment
  • Please add 7 and 7 and type the answer here:
  • Post