Definindo layouts e modos de exibição (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]
Você pode criar aplicativos do Tempo de Execução do Windows que proporcionem uma experiência fluida e harmoniosa em vários fatores forma, tamanhos de tela e estados de exibição, por meio do gerenciamento consistente e previsível da interface do usuário. Você quer um aplicativo com visual incrível quando visualizado em um tablet ou em um monitor HD de tela grande, ou quando o usuário inverte a tela para a posição retrato, ou ainda quando ele redimensiona o aplicativo. Se você se prepara para situações em que os usuários escolhem dispositivos e exibições, a sua interface do usuário pode refluir com elegância para se ajustar à escolha do usuário.
.png "Modos de exibição paisagem de tela inteira, retrato de tela inteira e redimensionado com largura estreita")
A especificação da interface do usuário de um aplicativo do Tempo de Execução do Windows em JavaScript gira em torno de dois fatores principais: os modos de exibição aos quais o aplicativo dá suporte e os layouts de que ele necessita. Use CSS (Cascading Style Sheets) para fazer o trabalho.
CSS Você descreve e gerencia a sua interface do usuário por meio de CSS baseada em padrões, o que separa o conteúdo da apresentação, ou seja, separa o que é mostrado e a forma como é mostrado. Essa separação permite oferecer uma experiência de usuário consistente, útil e agradável, que dá suporte a vários dispositivos, fatores forma, tamanhos de tela, preferências do usuário e estados de modo de exibição.
Layouts Layouts são mecanismos pelos quais o seu aplicativo pode acomodar os modos de exibição aos quais ele dá suporte. Você estiliza, estrutura e apresenta o conteúdo do seu aplicativo por meio de módulos de layout CSS3 (Folhas de Estilo em Cascata, Nível 3), como grades, várias colunas, regiões e caixas flexíveis que podem se adaptar à forma como um usuário opta por exibir o conteúdo.
Um aplicativo que incorpora a funcionalidade de zoom semântico pode especificar limites semânticos nos quais, dependendo da granularidade e do volume de informações, a interface do usuário pode alternar entre um layout de grade e um layout linear.
Modos de exibição Um modo de exibição é a maneira na qual o conteúdo de um aplicativo é acessado e manipulado por um usuário.
- Orientação paisagem ou retrato
- Tela inteira ou redimensionada
- Superfícies de interface do usuário panorâmicas, ampliáveis, dimensionadas ou redimensionadas
- Elementos específicos da interface do usuário, como painel de resultados de pesquisa ou uma estrutura de pastas
A definição de layouts e de modos de exibição para um aplicativo do Tempo de Execução do Windows requer familiaridade com HTML, JavaScript e CSS.
Nesta seção
| Tópico | Descrição |
|---|---|
Você pode definir layouts de aplicativos para qualquer tamanho ou orientação de janela. |
|
Guia de início rápido: projetando aplicativos para diferentes tamanhos de janela |
Ao projetar um aplicativo para ter uma boa aparência e funcionar bem em qualquer tamanho de janela, você pode criar layouts adicionais para complementar o layout horizontal padrão de tela inteira. |
Guia de início rápido: criando várias janelas para um aplicativo |
Você pode ajudar seus usuários a serem mais produtivos permitindo que eles exibam várias funções independentes em janela separadas. |
Para fornecer a interface do usuário mais flexível e adaptável aos usuários do aplicativo do Tempo de Execução do Windows, você precisa primeiro decidir o modo de layout mais apropriado ao conteúdo e às exibições pelos quais o conteúdo poderá ser usado. Este tópico descreve os recursos de layout CSS3 (Folhas de Estilo em Cascata, Nível 3) com suporte nos aplicativos da Windows Store do Windows 8. |
|
Você pode usar o padrão de layout descrito aqui para definir os elementos da interface do usuário do layout em suas páginas de aplicativo. Seguir um padrão constante para margens, cabeçalhos de páginas, largura de medianizes e outros elementos mantém a unidade dos aplicativos e ajuda os usuários a compreender as manipulações no sistema com facilidade. |