Navegação hierárquica, 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 o padrão de navegação hierárquica para seu aplicativo da Windows Store quando seu conteúdo puder ser separado em seções ou categorias distintas, embora relacionadas, com diferentes níveis de detalhes. Esse é um padrão comum e familiar que funciona bem com uma arquitetura de informação relacional, percorrida em uma sequência ou ordem preferida.

O padrão de navegação que você escolher dependerá dos cenários que o seu aplicativo suporta. Se o seu aplicativo oferece uma variedade de experiências e conteúdo com organização e estrutura, um padrão hierárquico provavelmente é mais adequado. No entanto, se o seu aplicativo não tiver muita densidade de informação ou hierarquia organizacional, dê uma olhada em Navegação simples, do início ao fim, destinada a permitir que os usuários naveguem rapidamente entre um pequeno conjunto de páginas relacionadas.

Aqui, abordamos como criar um aplicativo da Windows Store em JavaScript que usa o padrão de navegação hierárquica 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 suporte de navegação e sistema de comandos.
• Configurações para fornecer privacidade, ajuda e outras informações do aplicativo.
• Roaming de dados para sincronizar seu aplicativo nas sessões e nos 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 hierárquica básica ao lado de uma estrutura delineada do padrão de navegação hierárquica em um aplicativo da Windows Store.

O controle Hub da Biblioteca do Windows para JavaScript foi projetado especificamente para esse tipo de aplicativo. Do geral para o específico, esse controle usa páginas de hub, seção e item/detalhe para ajudá-lo a unir uma variedade de informações em uma estrutura consistente e intuitiva.

A barra de navegação, normalmente usada em aplicativos de navegação simples, também pode ser útil para percorrer o conteúdo de um aplicativo hierárquico. 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).

Tente criar seu aplicativo de forma que a própria estrutura do conteúdo leve os usuários intuitivamente pelo aplicativo, sem a necessidade da barra de navegação. Nos casos em que isso não é possível, use a barra de navegação em vez dos cabeçalhos das seções na página de hub como meio de fornecer controles de navegação globais. Ela deve ser mostrada em todas as páginas e em todos os níveis do aplicativo.

Observação  Verifique se os usuários podem navegar na ordem inversa na qual navegaram até a página atual. Para isso, o WinJS oferece o BackButton, junto com o PageControl.

Usar o padrão de navegação correto, juntamente com o layout de interface do usuário apropriado, 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 hierárquica

O Exemplo de navegação hierárquica 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. Conforme você pode ver abaixo, o exemplo inclui uma página de hub com várias seções, uma página de seção baseada em dados (Seção 3) e páginas de detalhes do item para essa seção. Estenda o aplicativo com páginas adicionais, conforme necessário. 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 navegação

Abra o Exemplo de navegação hierárquica ou comece com o modelo de projeto Aplicativo de Hub 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.

Usar 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 aplicativos

	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