Parte 4: Layout e orientação (HTML)

Applies to Windows only

O design da interface do usuário para seu aplicativo da Windows Store está relacionado à organização e apresentação do conteúdo para os usuários e ao fornecimento de comandos que permitam aos usuários agir sobre o conteúdo. O design da interface do usuário inclui a organização de páginas no aplicativo, a navegação entre as páginas e o layout de conteúdo e comandos em cada página.

Neste tutorial, apresentamos noções básicas sobre como criar uma interface do usuário em HTML e CSS (Folhas de Estilos em Cascata). Para aprender esses fundamentos, crie um visualizador de fotos simples que permita ao usuário escolher uma imagem na biblioteca de imagens e que depois mostre a imagem e algumas informações sobre o arquivo de imagem. Neste tutorial, começamos do zero com um novo aplicativo.

Dica  

Se desejar pular o tutorial e ir direto para o código, consulte Introdução ao JavaScript: código completo para a série de tutoriais.

Antes de começar...

Etapa 1: criar um novo aplicativo de navegação no Visual Studio

Vamos criar um novo aplicativo denominado PhotoAppSample usando o modelo Navigation App. Veja como:

  1. Inicie o Microsoft Visual Studio Express 2013 para Windows.
  2. No menu Arquivo, selecione Novo Projeto.

    A caixa de diálogo Novo Projeto será exibida.

  3. No painel esquerdo, expanda Instalado, expanda Modelos , expanda JavaScript e selecione o tipo de modelo Windows Store. O painel central da caixa de diálogo exibe uma lista dos modelos de projeto para JavaScript.

  4. No painel central, selecione o modelo Navigation App.
  5. Na caixa de texto Name, digite "PhotoAppSample".
  6. Desmarque a caixa de seleção Criar diretório para solução.

    A janela Novo Projeto

  7. Clique em OK para criar o projeto.

    O Visual Studio criará seu projeto e o exibirá no Gerenciador de Soluções.

    O Gerenciador de Soluções do projeto PhotoAppSample

  8. Execute o aplicativo.

    O aplicativo PhotoAppSample

Etapa 2: adicionar controles e conteúdo

  1. No Gerenciador de Soluções, clique duas vezes em home.html para abri-lo.
  2. Alterne para a folha de estilos clara. Substitua esta referência à folha de estilos escura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Por esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  3. Mude o título da página para "Exemplo do aplicativo de Fotos".
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Photo app sample</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
        </div>
    </body>
    
    
  4. Substitua o conteúdo da seção principal pelos elementos para selecionar e exibir uma imagem e informações sobre a imagem. Crie estes elementos:
    • Um elemento div para conter tudo.
    • Um button para selecionar uma foto.
    • Um elemento div para exibir o nome da imagem.
    • Um elemento div para conter a imagem e suas informações (usaremos esse contêiner para ajudar na formatação posteriormente).
    • Um elemento img para a exibir a imagem.
    • Outro elemento div para conter as informações da imagem (novamente, usaremos esse contêiner para ajudar na formatação posteriormente).
    • Três rótulos para identificar as informações da imagem
    • Três elementos div para exibir as informações da imagem.

    Veja a marcação atualizada:

    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Photo app sample</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div id="contentGrid">
                    <button id="getPhotoButton">Get photo</button>
                    <div id="imageName" class="pageSubheader">Image name</div>
    
                    <div id="imageGrid">
                        <img id="displayImage" src="#"  />
                        <div id="imageInfoContainer">
                            <label for="fileName">File name:</label>
                            <div id="fileName">File name</div>
                            <label for="path">Path:</label>
                            <div id="path">Path</div>
                            <label for="dateCreated">Date created:</label>
                            <div id="dateCreated">Date created</div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </body>
    
    
  5. Execute o aplicativo.

    O aplicativo PhotoAppSample

    Ele ainda não tem uma aparência definida. Nas próximas etapas, organize os elementos em um layout de grade.

Etapa 3: Definir a grade de conteúdo principal

Antes, era comum usar tabelas HTML para layout de página. A CSS agora fornece o Layout de grade e o layout Caixa flexível ("Flexbox"). Esses sistemas de layout fornecem mais recursos e são mais flexíveis do que as tabelas HTML tradicionais.

Neste tutorial, usaremos o layout de grade. O layout de grade permite alinhar elementos em colunas e linhas.

Para criar um layout de grade, crie um elemento de contêiner (como um div) e defina sua propriedade de exibição como "-ms-grid"


<div style="border: 1px solid gray; width: 800px; display: -ms-grid">
    <p style="margin: 2px; border: 1px solid gray;">Child element 1</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 2</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 3</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 4</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 5</p>
</div>

Em seguida, especifique as faixas (colunas e linhas) no layout de grade. Use as propriedades -ms-grid-columns e -ms-grid-rows para especificar o número e o tamanho de colunas e linhas. Você pode dimensionar colunas e linhas (coletivamente chamadas faixas) usando qualquer uma das seguintes opções:

  • Unidades de comprimento padrão, como pixels
  • Um percentual da largura (para colunas) ou da altura (para linhas) do objeto
  • A palavra-chave auto, que indica que a largura da coluna ou a altura da linha é dimensionada com base nos itens contidos nela
  • A palavra-chave min-content, que indica que a largura ou a altura mínima de qualquer elemento filho é usada como a largura ou a altura
  • A palavra-chave max-content, que indica que a largura ou a altura máxima de qualquer elemento filho é usada como a largura ou a altura
  • A palavra-chave minmax(a, b), que indica que a largura ou a altura máxima fica entre a e b, de acordo com o espaço disponível
  • Unidades fracionárias (fr), que indicam que o espaço disponível deve ser dividido entre as colunas ou as linhas de acordo com seus valores fracionários.

Este exemplo usa pixels, a palavra-chave auto e unidades fracionárias para definir o tamanho de colunas e linhas na grade.


<div style="border: 1px solid gray; width: 800px; display: -ms-grid
            -ms-grid-columns: auto 100px 1fr 2fr; 
            -ms-grid-rows: 50px auto">
    <p style="margin: 2px; border: 1px solid gray;">Child element 1</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 2</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 3</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 4</p>
    <p style="margin: 2px; border: 1px solid gray;">Child element 5</p>
</div>

Essa grade tem quatro colunas, e cada coluna aparece conforme descrito aqui:

  • Coluna 1 (palavra-chave auto): a coluna é ajustada ao seu conteúdo.
  • Coluna 2 ("100 px"): a coluna tem 100 pixels de largura.
  • Coluna 3 ("1 fr"): a coluna utiliza uma unidade fracionária do espaço restante.
  • Coluna 4 ("2 fr"): a coluna utiliza duas unidades fracionárias do espaço restante.

Como há três unidades fracionárias totais nessa grade, à Coluna 3 é alocada 1 unidade fracionária dividida por 3 unidades fracionárias—ou 1/3— do espaço restante. À Coluna 4 são alocados 2/3 do espaço restante.

Da mesma forma, essa grade tem duas linhas, e cada linha aparece conforme descrito aqui:

  • Linha 1 ("50 px"): a linha tem 50 pixels de altura.
  • Linha 2 (palavra-chave auto): a linha é ajustada ao seu conteúdo.

Para posicionar itens filho na grade, use as propriedades -ms-grid-column e -ms-grid-row para especificar a coluna e a linha de cada item.


<div style="border: 1px solid gray; width: 800px; display: -ms-grid; 
            -ms-grid-columns: auto 100px 1fr 2fr; 
            -ms-grid-rows: 50px auto">
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 1; 
                -ms-grid-row: 1">Child element 1</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 2; 
                -ms-grid-row: 1">Child element 2</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 3; 
                -ms-grid-row: 1">Child element 3</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 4; 
                -ms-grid-row: 1">Child element 4</p>
    <p style="margin: 2px; border: 1px solid gray; 
                -ms-grid-column: 1; 
                -ms-grid-row: 2">Child element 5</p>
</div>

Layout de grade

Agora que você já tem noções básicas sobre como usar o layout de grade, vamos atualizar nosso aplicativo para usar um layout de grade.

JJ841108.wedge(pt-br,WIN.10).gifPara definir a principal grade de conteúdo

  1. No Gerenciador de Soluções, clique duas vezes em home.css para abri-lo. O primeiro estilo no arquivo, .homepage section[role=main], define a margem da seção principal. Vamos remover a configuração da margem e deixar o estilo em branco por enquanto.
    
    .homepage section[role=main] {
        
    }
    
    
  2. Vamos configurar o contêiner da grade primária. Seu home.html contém um elemento div nomeado contentGrid. Esta será nossa grade primária.

    Abra seu arquivo home.css e crie um estilo para contentGrid logo após o estilo para .homepage section[role=main]. Defina sua propriedade de exibição como -ms-grid e dê a ela uma única coluna e três linhas. Defina a primeira linha como 50 pixels, a segunda linha como 70 pixels e a terceira linha como auto. Dê a ela uma margem superior de 20 pixels e uma margem esquerda e direita de 120 pixels.

    
    #contentGrid {
        display: -ms-grid; 
        -ms-grid-rows: 50px 70px auto; 
        margin: 20px 120px 0px 120px;
    }
    
    
  3. Nossa grade de conteúdo contém três elementos: getPhotoButton, imageName e imageContainer. Defina estilos para eles que os coloquem na primeira, na segunda e na terceira linha da grade de conteúdo.

    Enquanto atualizamos o estilo getPhotoButton, vamos dar a ele uma altura de 20 pixels.

    
    #getPhotoButton {
        -ms-grid-row: 1;
        width: 120px;
        height: 20px;
    }
    
    #imageName {
        -ms-grid-row: 2;
    }
    
    #imageGrid {
        -ms-grid-row: 3; 
    }
    
    
  4. Defina um estilo para a classe pageSubheader.
    
    .pageSubheader {
        font-family: 'Segoe UI Light';
        font-size: 20px;
        vertical-align: bottom;
        margin: 0px 0px 40px 0px;
    }
    
    
  5. Execute o aplicativo.

    PhotoAppSample após a adição da grade de conteúdo principal.

Definimos a principal grade de conteúdo. Nosso conteúdo agora está dividido em três linhas. Caso você conseguisse ver os contornos das linhas, elas se assemelhariam a isto.

PhotoAppSample com as linhas da grade de conteúdo contornadas.

Etapa 4: definir o layout para o restante da página

Agora que criamos a principal grade de conteúdo, vamos terminar de criar o layout para o resto do aplicativo.

JJ841108.wedge(pt-br,WIN.10).gifPara definir o layout para o resto da página

  1. Defina uma grade para a imagem e as respectivas informações da imagem. Abra home.css e atualize o estilo que você criou para imageGrid na última etapa. Torne imageGrid uma grade de duas colunas. Defina a largura de cada coluna como auto.
    
    #imageGrid {
        -ms-grid-row: 3; 
        display: -ms-grid;
        -ms-grid-columns: auto auto;
    }
    
    
  2. Depois do estilo para imageGrid, crie um estilo para o elemento displayImage. Faça-o aparecer na primeira coluna de imageGrid, defina sua width como 375 pixels e sua max-height como 375 pixels, dê a ele uma borda preta e defina a cor da tela de fundo como "cinza".
    
    #displayImage {
        -ms-grid-column: 1;
        width: 375px;
        max-height: 375px; 
        border: 1px solid black;
        background-color: gray; 
    
    }
    
    
  3. Crie um estilo para o elemento imageInfoContainer. Faça-o aparecer na segunda coluna de imageGrid e dê a ele uma margem esquerda de 20 pixels.
    
    #imageInfoContainer {
        -ms-grid-column: 2;
        margin-left: 20px; 
    }
    
    
  4. Crie um estilo para os elementos div dentro do elemento imageInfoContainer. Dê a eles uma margem esquerda de 20 pixels, uma margem inferior de 40 pixels, defina a largura como 400 pixels e defina word-wrapcomo "break-word".

    
    #imageInfoContainer > div {
        margin-left: 20px;
        margin-bottom: 40px;
        width: 400px; 
        word-wrap: break-word;
    }
    
    
  5. Execute o aplicativo.

    PhotoAppSample, com outro layout

Etapa 5: adaptar o layout da página para diferentes orientações e modos de exibição

Até agora, você projetou o aplicativo para ser exibido em tela inteira na orientação paisagem. Porém, um aplicativo da Windows Store deve se adaptar a diferentes orientações e layouts. Especificamente, deve dar suporte às orientações paisagem e retrato. Na orientação paisagem, deve haver suporte para os layouts de tela inteira, preenchido e ajustado. Aqui vemos como você pode deixar seu aplicativo com uma boa aparência em qualquer resolução ou orientação.

A maneira mais fácil de ver a aparência do aplicativo em diferentes modos de exibição é usando o Blend para Microsoft Visual Studio 2013. O Blend inclui um designer visual que facilita a visualização e a modificação da interface do usuário. Vamos tentar.

  1. Inicie o Blend.
  2. No menu Arquivo, selecione Abrir Projeto/Solução.
  3. Na caixa de diálogo Abrir Projeto, vá para o local onde está seu aplicativo PhotoAppSample, selecione o arquivo de solução e clique em Abrir.

Como você pode ver, o ambiente do Blend é um pouco diferente daquele do Microsoft Visual Studio.

PhotoAppSample no Blend para Visual Studio

Vamos dar uma olhada geral no espaço de trabalho do Blend. Começaremos no centro do espaço de trabalho.

O centro do espaço de trabalho no Blend

A maior parte do painel central exibe a prancheta. A prancheta é onde você realiza a maioria das tarefas de layout visual. Observe que a área do aplicativo é enquadrada por um dispositivo de tablet virtual.

Abaixo da prancheta está seu código HTML e CSS. O modo de exibição atual (chamado Modo divisão) exibe o código e a prancheta. Você pode alternar entre os diferentes modos de exibição (Design, Código e Divisão) clicando nos botões no canto superior direito do painel de prancheta:

O painel de prancheta

Agora, vamos examinar alguns dos painéis ao redor do espaço de trabalho central.

PainelImagemDescrição
Projetos

O painel Projetos no Blend

O canto superior esquerdo do espaço de trabalho contém o painel Projetos.

O painel Projetos é similar ao Gerenciador de Soluções no Visual Studio. Você pode usá-lo para abrir arquivos e adicionar novos itens.

DOM Ativo

O painel DOM Ativo no Blend

Abaixo do painel Projetos está o painel DOM Ativo.

O painel DOM Ativo mostra a estrutura do aplicativo que você está projetando e permite selecionar elementos cujo estilo você quer definir. Mais importante, o modo de exibição DOM Ativo é atualizado de forma automática e dinâmica quando o estado do aplicativo é alterado, incluindo alterações em elementos declarados na marcação HTML e em elementos dinamicamente gerados.

Propriedades CSS

O painel Propriedades CSS no Blend

O painel Propriedades CSS é onde você pode visualizar e modificar as propriedades CSS de um elemento HTML selecionado na prancheta ou no painel DOM Ativo.

Regras de Estilo

O painel Regras de Estilo no Blend

O painel Regras de Estilo lista todas as folhas de estilo anexadas ao documento atual e todos os estilos definidos nelas.

DispositivoO painel Dispositivo no Blend

O painel Dispositivo é onde você seleciona opções de tela, modos de exibição e outras opções de vídeo para seu aplicativo.

 

Vamos usar o painel Dispositivo para ver como o aplicativo fica no modo de exibição retrato.

No painel Dispositivo, clique no botão (

Botão do modo de exibição retrato

) de retrato. O designer é alterado para simular o modo de exibição de retrato.

Essa é a aparência do aplicativo quando o usuário o gira para a orientação retrato. Vamos fazer alguns ajustes para que o aplicativo possa aproveitar o espaço vertical adicional disponível no modo de exibição retrato.

PhotoAppSample na orientação retrato

JJ841108.wedge(pt-br,WIN.10).gifPara ajustar o modo de exibição retrato

  1. No painel Dispositivo, clique no botão do modo retrato (Botão do modo de exibição retrato) para mostrar o modo retrato.
  2. No painel Regras de Estilo, clique com o botão direito do mouse na entrada home.css e selecione Adicionar Regra em... > Adicionar Regra de @mídia no menu de contexto.

    O painel Regras de Estilo do Blend

  3. A caixa de diálogo Adicionar Regra de @mídia aparece. Selecione screen and (orientation: portrait) e clique em OK.

    Caixa de diálogo Adicionar Regra de @mídia

  4. Expanda a entrada home.css se ela ainda não estiver expandida. Clique com o botão direito do mouse na tela @mídia e na entrada (orientação: retrato) que você acabou de criar e selecione Adicionar Regra de Estilo.

    Adicionando uma regra de estilo

    O Blend cria um estilo chamado .newStyle.

  5. Selecione .newStyle e renomeie-o como ".homepage section[role=main]". Selecione este estilo.

  6. No painel Propriedades CSS, expanda a seção Layout. Defina a margem esquerda como 0 pixels.

    O painel Propriedades CSS no Blend

  7. No painel Regras de Estilo, ao lado da entrada tela @media e (orientação: retrato), clique no botão Adicionar Novo Estilo (Botão Adicionar Novo Estilo no Blend).
  8. Defina o nome do novo estilo como "#imageGrid" e selecione-o.
  9. No painel Propriedades CSS, expanda a seção Grade. Defina -ms-grid-columns como "auto" e -ms-grid-rows como "auto auto".

    Estilos de grade para o elemento imageGrid

  10. No painel Regras de Estilo, ao lado da entrada tela @media e (orientação: retrato), clique no botão Adicionar Novo Estilo (Botão Adicionar novo estilo) novamente. Nomeie esse estilo como "#imageInfoContainer" e selecione-o.
  11. No painel Propriedades CSS, expanda a seção Grade. Defina -ms-grid-column como "1" e -ms-grid-row como "2".

    Estilos de grade para o elemento imageInfoContainer

  12. Expanda a seção Layout. Defina a margem superior como "20 px" e a margem esquerda como "0 px".

    Estilos de layout para o elemento imageInfoContainer

    Veja como se assemelha a CSS atualizada.

    
    
    @media screen and (orientation: portrait) {
    	.homepage section[role=main] {
    		margin-left: 0px;
    	}
    
    	#imageGrid {
    		-ms-grid-columns: auto;
    		-ms-grid-rows: auto auto;
    	}
    
    	#imageInfoContainer {
    		-ms-grid-column: 1;
    		-ms-grid-row: 2;
    		margin-top: 20px;
    		margin-left: 0px;		
    	}
    }
    
    
    
  13. Pressione Ctrl + S para salvar seu trabalho.
  14. Execute o aplicativo. Agora ele tem esta aparência no modo retrato.

    O aplicativo no modo retrato

Resumo

Parabéns, você concluiu o quarto tutorial! Você aprendeu como usar o layout de grade e criar estilos para diferentes orientações. Também viu como usar o Blend para projetar sua interface do usuário.

Baixar o exemplo

Você se atrasou ou deseja verificar seu trabalho? Nesse caso, baixe o exemplo de Introdução ao JavaScript.

Próximas etapas

Na próxima parte desta série de tutoriais, você aprenderá a criar um aplicativo mais complexo. Vá para a Parte 5: Acesso a arquivos e seletores de arquivos.

Tópicos relacionados

Introdução ao JavaScript: código completo para a série de tutoriais
Programando aplicativos do Windows 8 com HTML, CSS e JavaScript (livro eletrônico)

 

 

Mostrar:
© 2014 Microsoft