Navegação simples, do início ao fim (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Use um padrão de navegação simples para seu aplicativo da Windows Store quando ele tiver um pequeno número de páginas e suas informações não estiverem organizadas em uma hierarquia. Em outras palavras, quando as páginas, as guias e os modos forem pares lógicos.

Seu aplicativo deve fazer os usuários se concentrarem na importância do que está no aplicativo, e não de onde e nem do porquê. Se seu aplicativo não tiver muita densidade de informação, muitas páginas ou cenários que precisem de hierarquia e estrutura, considere uma estrutura simples que permita que os usuários naveguem rapidamente entre as páginas. No entanto, se seu aplicativo fornece uma variedade de experiências e conteúdo com organização e estrutura que devem ser percorridos em uma sequência ou ordem preferida, dê uma olhada em Navegação hierárquica, do início ao fim.

Aqui, abordamos como criar um aplicativo da Windows Store em JavaScript que usa o padrão de navegação simples e atende a todos os requisitos de certificação básicos da Windows Store, do início ao fim. Isso inclui:

• Recursos de imagem para exibir seu aplicativo em todo o sistema operacional
• Barras de aplicativos para suportar navegação e sistema de comandos
• Configurações para oferecer privacidade, ajuda e outras informações do aplicativo
• Roaming de dados para sincronizar seu aplicativo em sessões e dispositivos
• Globalização para alcançar clientes em países e regiões em todo o mundo
• Acessibilidade para ajudar os usuários a realizarem as tarefas, independentemente das características físicas e do dispositivo de entrada

Veja aqui uma estrutura simples básica ao lado de uma estrutura delineada do padrão de navegação simples em um aplicativo da Windows Store.

Como demonstram estas imagens, a estrutura de conteúdo simples definida por esse padrão requer que cada página no aplicativo fique acessível a partir de todas as outras páginas. O usuário pode ir aleatoriamente para frente e para trás pelas páginas, sem nenhuma ramificação.

Use a barra de aplicativos de navegação (mostrada na estrutura delineada acima) para a troca rápida entre páginas em aplicativos de navegação simples. Essa barra é um elemento transitório que pode ser revelado na borda superior da tela quando os usuários passam o dedo a partir da borda superior ou inferior (botão direito do mouse, tecla de logotipo do Windows + Z ou tecla de menu do teclado).

Veja aqui como nosso aplicativo Calculadora implementa o padrão de navegação simples. Observe como ele usa uma barra de navegação persistente em vez da barra de navegação transitória padrão. Este é um exemplo de como a plataforma de aplicativos da Windows Store pode se adaptar a cenários específicos exclusivos de seus aplicativos.

Página da calculadora padrão	Página da calculadora científica	Página da calculadora de conversão

Usar o padrão de navegação correto, juntamente com o layout de interface do usuário apropriado (consulte Interface do usuário de aplicativo da Windows Store, do início ao fim), ajuda você a eliminar a bagunça dos controles persistentes e permite que os usuários se concentrem no conteúdo que é importante em seu aplicativo.

Exemplo de navegação simples

O Exemplo de navegação simples básico é um ponto inicial para você preencher com conteúdo e experiências. Ele demonstra os princípios, as recomendações e os detalhes de implementação discutidos aqui em um aplicativo que atende a todos os requisitos de certificação básicos da Windows Store. Como você pode ver abaixo, o exemplo contém duas páginas: uma página inicial que apresenta o aplicativo e uma segunda página, na qual você pode dispor seus artigos. Veja como colocar em prática nossas diretrizes. Em seguida, você pode economizar tempo e usar esse exemplo como a base para sua inspiração.

Conformidade com a Windows Store

A Windows Store é o principal meio de distribuição de aplicativos da Windows Store para clientes e para conectar esses clientes com o maior número possível de aplicativos. Os aplicativos da Loja devem estar de acordo com as Políticas da Windows Store e da Loja do Windows Phone.

O exemplo complementar implementa a funcionalidade discutida aqui e os requisitos básicos de todos os aplicativos da Windows Store para serem aprovados na certificação, incluindo:

• Imagens de blocos e tela inicial
• Suporte integral para toque, mouse e entrada por teclado
• Suporte para vários tamanhos de janela, orientações de dispositivo e tamanhos de exibição
• Estado de sessão e roaming
• Otimizado para globalização, localização e acessibilidade

Como desenvolvedor de aplicativos, considere as Políticas da Windows Store e da Loja do Windows Phone e tente evitar falhas comuns de certificação.

Implementar a navegação simples

Abra o Exemplo de navegação simples ou comece com o modelo de projeto Aplicativo de navegação no Visual Studio. Se desejar, examine essas visões gerais de modelos: Modelos de projeto JavaScript para aplicativos do Tempo de Execução do Windows: resume os detalhes de implementação sobre o modelo de navegação, o modelo de dados, a manipulação do estado da exibição e assim por diante. Modelos de item JavaScript para aplicativos da Windows Store: inclui código comumente usado que pode reduzir o tempo de desenvolvimento.

Adicionar a navegação de página única Entra em detalhes sobre como o objeto PageControl oferece suporte à navegação de página única. Adicionando controles de página explica as várias maneiras nas quais eles podem ser implementados. Encontre no exemplo: O PageControl é definido no arquivo \js\navigator.js e usado no \pages\home\home.js e no \pages\page2\page2.js.

Adicionar interface do usuário e imagens

Especifica recursos de imagem (ativos visuais, como imagens de blocos e tela inicial) para seu aplicativo na guia Interface do usuário do aplicativo do manifesto do aplicativo. Para fazer isso, abra package.appxmanifest a partir do Gerenciador de Soluções. Consulte Usando o Designer de Manifesto.

Observação  O aplicativo complementar inclui imagens de espaço reservado que atendem aos requisitos da Windows Store. Para fins de demonstração, imagens adicionais que oferecem suporte à acessibilidade com configurações de contraste variadas e localização em francês (fr-FR) foram incluídas com o modelo. A maioria das imagens é fornecida em várias resoluções.

	Escolher imagens para representar seu aplicativo Especifique as imagens que oferecem a melhor experiência possível. Inclua versões dimensionadas para resoluções de tela diferentes. Seu aplicativo requer um conjunto básico de imagens para obter a certificação da loja. Logotipo da loja Exibido com os detalhes do seu aplicativo nos resultados da pesquisa e com a descrição do aplicativo na página de listagem. Logotipo Exibido no bloco quadrado para o aplicativo na tela Inicial. Consulte Criando blocos e notificações e Amostra de blocos e notificações do aplicativo. Logotipo pequeno O logotipo pequeno é mostrado com o nome de exibição do aplicativo nos resultados de pesquisa retornados na tela Inicial. Ele aparece também na lista de aplicativos pesquisáveis e quando a página inicial é reduzida. Tela inicial Exibida quando um aplicativo é iniciado e ignorada assim que o aplicativo fica pronto para interação. A tela inicial é composta por uma imagem e uma cor de fundo, ambas as quais podem ser personalizadas. Consulte Adicionando uma tela inicial e Amostra de tela inicial.
	Adicionar recursos de arquivo ou imagem Siga estas instruções para nomear e organizar seus recursos de arquivo em pastas.
	Otimizar imagens para diferentes resoluções de tela Crie recursos de imagem para seu aplicativo, adicione-os ao seu projeto e identifique-os no manifesto do aplicativo.
	Adicionar barras de aplicativos Apresente a navegação, os comandos e as ferramentas aos usuários sob demanda. A barra de aplicativo mostra comandos importantes ao contexto do usuário, normalmente a página ou seleção atual. Personalize, conforme necessário. Para obter um exemplo mais detalhado, veja Exemplo de controle AppBar em HTML.
	Adicionar configurações de aplicativo Forneça acesso a todas as configurações relevantes ao contexto atual do usuário. Personalize, conforme necessário. Consulte Exemplo de configurações do aplicativo. O aplicativo complementar inclui uma política de privacidade e o conteúdo da ajuda acessíveis pelo botão Configurações.

Mover dados de aplicativo

	Gerenciar dados de aplicativo Gerencie dados de aplicativo, incluindo estado de tempo de execução, preferências de usuário e outras configurações. Esses dados são criados, lidos, atualizados e excluídos durante a execução do aplicativo.
	Mover dados de aplicativos Mantenha o estado e os dados do seu aplicativo sincronizados em vários dispositivos e reduza as tarefas de configuração e o trabalho repetitivo para os usuários nos outros dispositivos deles. O Windows replica os dados para a nuvem quando eles são atualizados e sincroniza os dados com os outros dispositivos nos quais o aplicativo está instalado.

Globalizar

Seja consistente com a globalização e verifique se suas capturas de tela demonstram que você traduziu o aplicativo. Tenha em mente que idiomas não são a mesma coisa que mercados.

	Saiba mais sobre localização e recursos do aplicativo Crie aplicativos da Windows Store de forma que seus recursos possam ser mantidos e localizados de forma independente, e também personalizados para diferentes fatores de escala, opções de acessibilidade e outros contextos do usuário e do computador. Consulte Recursos de aplicativos e amostra de localização.
	Localizar o manifesto do pacote Localize o nome para exibição, a descrição e outras características de identificação do seu aplicativo descritas no manifesto do aplicativo.
	Globalizar o aplicativo Adapte seu software para idiomas, mercados, culturas e regiões adicionais.

Oferecer suporte à acessibilidade

Não declare seu aplicativo como acessível, a menos que ele seja especificamente projetado e testado para cenários de acessibilidade.

	Testar a acessibilidade do aplicativo Descubra as ferramentas de teste de acessibilidade, incluídas no Software Development Kit do Windows (SDK) para Windows 8, que o ajudam a verificar a acessibilidade do seu aplicativo.
	Declarar que seu aplicativo é acessível na Windows Store Caso tenha testado seu aplicativo para acessibilidade, indique isso marcando a caixa de seleção Acessibilidade na página Detalhes de venda.

Concluir o processo

Certifique seu aplicativo com o Kit de Certificação de Aplicativos Windows. Execute o Kit de Certificação de Aplicativos Windows para ajudar a garantir que o aplicativo atenda aos requisitos da Windows Store. Faça isso sempre que adicionar funcionalidade importante em seu aplicativo.

Você concluiu as tarefas de desenvolvimento e está pronto para enviar seu aplicativo para a Loja. Destine seu aplicativo ao público correto antes de submetê-lo. Faça a descrição de seu aplicativo a mais detalhada possível para que represente claramente o que seu aplicativo faz. Comece o processo de distribuição. Use as ferramentas de promoção disponíveis na Windows Store para ajudar os clientes a descobrirem o seu aplicativo. Use dados de telemetria para analisar o uso de dados e melhorar a qualidade e o desempenho do aplicativo.

Quer saber mais?

Planejando aplicativos da Windows Store

Saiba mais sobre o tipo de experiência que você deseja fornecer a seus usuários.

Design para acessibilidade

Saiba mais sobre a ampla variedade de habilidades, deficiências e preferências de seus usuários.

Design para diferentes fatores forma

Saiba mais sobre como lidar com diferentes dispositivos, métodos de entrada e orientações de tela.

Diretrizes de experiência do usuário do índice

Navegue em uma lista completa de diretrizes de experiência do usuário.

Exemplos

• Exemplo de controle AppBar em HTML
• Navegação e exemplo de histórico de navegação
• Amostra de blocos e notificações do aplicativo
• Amostra da tela inicial
• Amostra de configurações do aplicativo
• Recursos de aplicativos e amostra de localização