Por que eu devo ler este artigo:Um dos grandes e mais recentes adventos da programação front-end se chama: responsividade. Em vista disso, é cada vez mais comum a existência de aplicações web que se adequem automaticamente aos diferentes tipos de telas, e, paralelamente, os desenvolvedores necessitam aprender técnicas e formas de implementar seus websites de forma a se encaixar nesse conceito. Este artigo apresenta uma forma simples, porém eficiente, de desenvolvimento de um menu semelhante à tela inicial do Windows 8, utilizando apenas as linguagens muito comumente chamadas de Web Standards (Padrões Web), tais como HTML, CSS e JavaScript. Será desenvolvida uma interface responsiva baseada em tiles (blocos), que apesar de visualmente simples, como se vê no mais recente sistema operacional da Microsoft, é bastante adequada a dispositivos touch screen, facilitando o acesso aos itens do menu.

O chamado estilo METRO é o novo padrão de interface das aplicações da Microsoft, podendo ser visto, por exemplo, no Windows Phone 7.5, Windows Phone 8 e Windows 8, tendo os dois últimos sido lançados no ano de 2012. O menu principal destes softwares possui um formato simples, prezando pela praticidade e leveza, mas sem deixar de lado a importância de um layout agradável, fator que tem se tornado relevante no desenvolvimento de sistemas, pois os usuários buscam cada vez mais interfaces elegantes e atualizadas.

Essa nova interface (do menu) é baseada em tiles (blocos) de, geralmente, dois tamanhos principais (um quadrado e um retangular) e várias cores, que facilitam o acesso ao menu em dispositivos com tecnologia touch screen. Nesse tipo de dispositivo, como os usuários utilizam geralmente os dedos para acessar as aplicações e manipulá-las, assim como as telas geralmente possuem dimensões mais reduzidas quando comparadas aos monitores desktop, os elementos gráficos da janela devem ter dimensões e formatos razoáveis para facilitar essas tarefas.

Observação: é importante ressaltar que o estilo Metro não se resume a esse menu sobre o qual foi falado, existe um novo “grupo” de aplicações para Windows 8 e Windows Phone chamadas de Metro Style Apps cuja interface é baseada nesse padrão. Porém, como o objetivo desse artigo é desenvolver um menu semelhante ao menu Iniciar do Windows 8, é relevante falar apenas sobre sua estrutura e funcionamento.

Um exemplo deste menu pode ser visto na Figura 1 a seguir, onde se observa o menu iniciar do Windows 8.

Figura 1. Menu inicial do Windows 8 no estilo metro

Apesar de esse modelo ser mais utilizado em aplicações desktop e mobile, será apresentada aqui uma solução para o desenvolvimento de uma interface semelhante para páginas web, utilizando apenas as Web Standards.

Neste artigo, porém, não serão desenvolvidas funcionalidades mais complexas como a movimentação de tiles. O foco será a estrutura geral que poderá ser customizada e aprimorada pelo leitor, desde que o mesmo tenha conhecimentos nas tecnologias utilizadas.

Como funcionará o menu

Conforme dito anteriormente, o layout do menu é bastante simples. A estrutura geral é organizada em linhas (pode-se também considerar a divisão em colunas, mas esta não será destacada neste artigo) contendo vários tiles. Um tile largo possui a largura de dois tiles pequenos somada à largura da margem lateral interna destes, de forma que dois tiles pequenos dispostos lateralmente ocupem exatamente a mesma área que um tile maior.

Caso seja necessário, o usuário deve poder efetuar o horizontal, ou seja, “rolar” o menu horizontalmente para acessar blocos que inicialmente não estejam visíveis na área principal da tela. Esse funcionamento se assemelha ao do menu iniciar do Windows 8, onde existe um limite vertical para disposição dos tiles. Caso um tile não caiba em uma coluna, ele deve ser posto na coluna seguinte (vale lembrar que neste artigo não será feita a divisão em colunas, essa organização se dará automaticamente ao dispor os tiles lado a lado).

Quando o usuário clicar em um dos blocos, este precisa receber algum tipo de destaque, para que fique claro que o clique funcionou. No menu que será desenvolvido aqui, os tiles terão sua cor alterada quando forem clicados.

Aproveitando a jQuery

A jQuery é uma biblioteca JavaScript que nos fornece um conjunto vasto de funções para realizar os mais diversos tipos de operações em uma página web no lado do cliente. Um dos principais pontos fortes dessa biblioteca é a facilidade de seleção de elementos da página web a partir do uso de seletores CSS, como pela tag, id ou classe dos elementos.

Não é o objetivo desse tutorial explicar detalhadamente o funcionamento da jQuery, apenas é importante que fique claro que com ela é possível obter um ganho considerável de produtividade e, por esse motivo, nada mais natural e intuitivo que integrá-la ao projeto.

A jQuery é composta basicamente de um arquivo “.js” com funções prontas e para usá-las é necessário apenas referenciar esse arquivo através de uma tag <script> no cabeçalho da página (o que será feito na Listagem 1).

Observação: Na data de publicação desse artigo a última versão estável disponível era a 1.9.0, mas como foram utilizados apenas recursos simples, versões mais recentes poderão ser utilizadas normalmente.

O link para a página oficial da jQuery encontra-se na seção Links, no final do artigo.

Mãos à obra

Para desenvolver este menu, a região central será dividida em linhas nas quais os tiles serão inseridos e organizados horizontalmente.

Os tiles serão de dois tipos: normal e largo (como se pode ver na Figura 1) e as cores serão dadas posteriormente com a adição de classes CSS (o leitor pode ficar à vontade par usar as cores de sua preferência).

Para começar, crie uma pasta no teu computador e reserve a mesma para guardar os arquivos do projeto. Além disso, crie também um novo arquivo de texto vazio e o nomeie como “index.html”.

Agora serão criados o título e as linhas que vão estruturar o menu, conforme mostra a Listagem 1 a seguir.

Listagem 1. Estrutura inicial da página index.html

  01     <html>
  02     <head>
  03           <title>Menu Metro HTML</title>
  04           <link rel="stylesheet" href="estilo.css"/>
  05           <meta charset="UTF-8"/>
  06           <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  07           <script type="text/javascript" src="script.js"></script>
  08     </head>
  09     <body>
  10           <h1>Início</h1>
  11           <div class="pagina">
  12                  <div class="container">
  13                         <div class="linha">               
  14                         </div>
  15                         <div class="linha">               
  16                         </div>       
  17                         <div class="linha">               
  18                         </div>
  19                  </div>
  20           </div>
  21     </div>
  22     </body>
  23     </html>

Note que serão utilizados dois arquivos adicionais (além do HTML onde deve ser inserido o código acima): “estilo.css” e “script.js”, além da referência à biblioteca jQuery. Portanto, crie os mesmos arquivos e salve-os junto à raiz da pasta principal do projeto.

Agora é hora de iniciar a formatação da página, para então inserir os itens do menu (tiles). No arquivo estilo.css, inicie inserindo o código constante na Listagem 2.

Listagem 2. Formatação inicial em CSS

  01     @font-face { font-family: Century; src: url('GOTHIC.ttf');}
  02      
  03     body{
  04         font-family: Century;
  05         background: rgb(51,51,51);
  06         color: #fff;
  07         padding:20px;
  08     }
  09      
  10     .pagina{
  11         width:100%;
  12         overflow-x:auto;
  13         height:100%;   
  14     }
  15
  16     .linha{
  17         width:auto;
  18         padding:5px;
  19         height:110px;
  20         display:table;
  21     }

É possível perceber que no início deste código foi utilizado um recurso da CSS3: a anotação @font-face, que permite importar uma fonte a partir do arquivo (.ttf, .otf, etc). A fonte GOTHIC.ttf, que está sendo referenciada na mesma listagem, pode ser encontrada na pasta “C:\Windows\Fonts” no Windows 7 (e aqui foi copiada para o mesmo diretório do arquivo html), mas caso o leitor prefira, pode utilizar uma fonte nativa do seu Sistema Operacional. Para isso, bastaria remover a primeira linha da listagem e, na formatação do elemento body da regra CSS, indicar o nome da fonte nativa no lugar de Century, tal como “Arial” ou “Tahoma”, por exemplo.

Na classe CSS “linha” definimos a propriedade “display” como table, para que os tiles sejam exibidos corretamente. Isso é necessário por que utilizaremos a propriedade “float” dos tiles definida como left, com o objetivo de que eles sejam dispostos horizontalmente.

Vamos então alterar o conteúdo da div “pagina”, adicionando alguns tiles. Os tiles serão feitos com divs, pois poderemos inserir conteúdo neles posteriormente, como imagens e texto. Para isso, utilizamos o código da Listagem 3.

Listagem 3. Adicionando tiles à página

  01     <div class="container">
  02           <div class="linha">               
  03                  <div class="tile">
  04                  </div>
  05                  <div class="tile">
  06                  </div>
  07                  <div class="tile tileLargo">
  08                  </div>
  09                  <div class="tile">
  10                  </div>              
  11                  <div class="tile tileLargo">
  12                  </div>
  13           </div>
  14           <div class="linha">               
  15                  <div class="tile tileLargo">
  16                  </div>
  17                  <div class="tile">
  18                  </div>              
  19                  <div class="tile">
  20                  </div>
  21                  <div class="tile">
  22                  </div>              
  23                  <div class="tile tileLargo">
  24                  </div>
  25           </div>       
  26           <div class="linha">               
  27                  <div class="tile">
  28                  </div>
  29                  <div class="tile">
  30                  </div>
  31                  <div class="tile">
  32                  </div>              
  33                  <div class="tile tileLargo">
  34                  </div>
  35                  <div class="tile">
  36                  </div>
  37                  <div class="tile">
  38                  </div> 
  39           </div>
  40     </div>

Nota-se que alguns tiles possuem duas classes, “tile” e “tileLargo”. A classe “tile” é genérica e servirá para definir algumas propriedades comuns aos dois tipos de item, como a altura e a margem. A classe “tileLargo”, por sua vez, terá apenas a largura aumentada em relação a outra.

Vejamos então a Listagem 4 onde são definidas as formatações iniciais dos tiles.

Listagem 4. Formatação inicial dos tiles

  01 .tile{
  02     height:100px;    
  03     width:100px;   
  04     float:left;
  05     margin:0 5px 0 0;
  06     padding:2px;
  07 }
  08 
  09 .tileLargo{
  10     width:210px;
  11 }

A propriedade “float” foi definida com o valor left para que os tiles de uma mesma linha sejam dispostos lateralmente. As dimensões utilizadas foram 100x100px por padrão, mas o leitor pode alterar para os valores de sua preferência e que mais se adequem a sua necessidade.

É importante que a classe tileLargo seja definida após a classe tile, para que ao carregar a página, a largura de 210px seja aplicada após a largura inicial de 100px, sobrescrevendo-a. Caso contrário, a configuração que prevaleceria seria a da classe tile.

Observação: a largura de 210px foi calculada como sendo o dobro da largura de um tile básico (pequeno), somado às duas margens laterais de 5px cada.

Ao abrir o arquivo no browser ainda não será possível ver o menu como gostaríamos. Isso ocorre apenas porque a cor dos tiles não foi definida. Portanto, criaremos algumas classes no arquivo CSS contendo apenas a cor do background. Neste exemplo, foram utilizadas quatro cores, como pode ser visto a seguir, na Listagem 5.

Listagem 5. Classes de cores dos tiles

  01 .amarelo{
  02     background:#DAA520;
  03 }
  04 
  05 .vermelho{
  06     background:#CD0000;   
  07 }
  08 
  09 .azul{
  10     background:#4682B4;
  11 }
  12 
  13 .verde{
  14     background-color: #2E8B57;
  15 }

Da mesma forma, estas cores e classes também podem ser customizadas segundo a preferência do leitor, apenas seguindo a lógica sugerida. Caso deseje, por exemplo, pode usar uma imagem de plano de fundo, alterar a cor da borda e da fonte dos blocos.

O próximo passo é associar os tiles às classes de cores. No exemplo deste artigo, o conteúdo da div “pagina” foi alterado conforme a Listagem 6, a seguir, definindo as classes dos blocos aleatoriamente.

Listagem 6. Associação dos tiles às cores

  01 <div class="pagina">
  02     <div class="linha">               
  03           <div class="tile amarelo">
  04           </div>
  05           <div class="tile azul">
  06           </div>
  07           <div class="tile tileLargo vermelho">
  08           </div>
  09           <div class="tile verde">
  10           </div>              
  11           <div class="tile tileLargo amarelo">
  12           </div>
  13     </div>
  14     <div class="linha">               
  15           <div class="tile tileLargo amarelo">
  16           </div>
  17           <div class="tile azul">
  18           </div>              
  19           <div class="tile verde">
  20           </div>
  21           <div class="tile vermelho">
  22           </div>              
  23           <div class="tile tileLargo verde">
  24           </div>
  25     </div>       
  26     <div class="linha">               
  27           <div class="tile amarelo">
  28           </div>
  29           <div class="tile verde">
  30           </div>
  31           <div class="tile vermelho">
  32           </div>              
  33           <div class="tile tileLargo verde">
  34           </div>
  35           <div class="tile azul">
  36           </div>
  37           <div class="tile verde">
  38           </div> 
  39     </div>
  40 </div>

Agora sim é possível visualizar o resultado, que deve ser semelhante à Figura 2.

Figura 2. Resultado dos tiles com cores definidas

Os códigos apresentados até aqui são consideravelmente simples e de fácil entendimento. Talvez uma segunda leitura sobre os mesmos seja necessária para assimilar melhor sua estrutura, e isso é algo diretamente relacionado ao seu nível de conhecimento em HTML e CSS, então tenha calma se não entender de imediato.

Vamos apenas aplicar algumas configurações adicionais, colocando um texto e imagem dentro de cada tile e deixando-os mais próximos do exemplo real. A Listagem 7 mostra como ficou um tile após estas mesmas alterações. Logo, com base nele os demais podem ser feitos igualmente.

Listagem 7. Exemplo de tile com título

  <div class="tile amarelo">
     <img src="imagens/flag.png" alt="Flag" />
     <span>Windows</span>
  <p align="left"></div>

Como inserimos novos elementos nos blocos, é preciso formatá-los para que sejam exibidos corretamente. No exemplo da Listagem 8 foi definido que as imagens terão as dimensões 56x56px e, com base nisso, foi calculado o valor das suas bordas laterais e superior, de forma que fiquem centralizadas nos blocos.

Listagem 8. Configuração das imagens dentro dos blocos

  .tile img{
      width:56px;
      margin:20px 22px 0 22px
  }
   
  .tileLargo img {
      margin:20px 77px 0 77px
  }

Após inserir algumas imagens, seguindo o modelo da Listagem 7, temos agora o seguinte conteúdo no arquivo HTML da Listagem 9 e um novo resultado, que é exibido na Figura 3.

Listagem 9. Código da página com imagens nos tiles

  01<div class="pagina">
  02     <div class="container">
  03         <div class="linha">                 
  04             <div class="tile amarelo">
  05                 <img src="imagens/flag.png" alt="Windows" />
  06                 <span>Windows</span>
  07             </div>
  08               <div class="tile azul">
  09                 <img src="imagens/heart.png" alt="Favoritos" />
  10                 <span>Favoritos</span>
  11               </div>
  12               <div class="tile tileLargo vermelho">
  13                 <img src="imagens/browser.png" alt="Navegador" />
  14                 <span>Navegador</span>
  15               </div>
  16               <div class="tile verde">
  17                 <img src="imagens/images.png" alt="Imagens" />
  18                 <span>Imagens</span>
  19               </div>                 
  20               <div class="tile tileLargo amarelo">
  21                 <img src="imagens/questionmark.png" alt="Ajuda" />
  22                 <span>Ajuda</span>
  23               </div>
  24         </div>
  25         <div class="linha">                 
  26               <div class="tile tileLargo amarelo">
  27                 <img src="imagens/folder.png" alt="Arquivos" />
  28                 <span>Arquivos</span>
  29               </div>
  30               <div class="tile azul">
  31                 <img src="imagens/mail.png" alt="E-mail" />
  32                 <span>E-mail</span>
  33               </div>                 
  34               <div class="tile verde">
  35                 <img src="imagens/camera.png" alt="Câmera" />
  36                 <span>Camera</span>
  37               </div>
  38               <div class="tile vermelho">
  39                 <img src="imagens/music.png" alt="Música" />
  40                 <span>Música</span>
  41               </div>                 
  42               <div class="tile tileLargo verde">
  43                 <img src="imagens/note.png" alt="Notas" />
  44                 <span>Notas</span>  
  45               </div>
  46         </div>          
  47         <div class="linha">                 
  48               <div class="tile amarelo">
  49                 <img src="imagens/sun.png" alt="Clima" />
  50                 <span>Clima</span>
  51               </div>
  52               <div class="tile verde">
  53               </div>
  54               <div class="tile vermelho">
  55               </div>                 
  56               <div class="tile tileLargo verde">
  57               </div>
  58               <div class="tile azul">
  59               </div>
  60               <div class="tile verde">
  61               </div>   
  62         </div>
  63     </div>
  64 </div>

Para facilitar a comparação entre o antes e o depois, essa figura também exibe a representação de alguns tiles sem imagem.

Figura 3. Novo layout da página com imagens nos blocos

Até este momento, como se pode ver na figura anterior, foi inserida uma pequena quantidade de blocos, de forma que o conjunto não toma sequer a largura total da página. Porém, sabemos que em um site real podem existir várias opções de menu, sendo necessário criar tanto novas linhas quanto colunas com mais blocos.

Nessa situação, é preciso que seja possível efetuar o scroll horizontal, ou seja, o usuário deve poder “rolar” o menu horizontalmente (seguindo o modelo do Windows 8, expande-se o menu apenas lateralmente e não na direção vertical).

Para suprir essa necessidade faremos uso de JavaScript, mais especificamente da biblioteca jQuery, que facilita a manipulação dos elementos da página e nos permite tornar a interface mais dinâmica e agradável aos olhos do usuário.

Observando a Listagem 2, é possível ver as seguintes configurações:

  • A propriedade width da div “pagina” foi definida com o valor 100%, para que ocupe toda a largura do corpo da página, não mais que isso. Caso a largura da div aumentasse dinamicamente, não veríamos a barra de rolagem como desejado, a barra exibida seria a da página como um todo devido à div ter excedido os limites horizontais.
  • A propriedade overflow-x da mesma div foi definida como auto, o que indica que a barra de rolagem horizontal será exibida quando a largura do conteúdo da div for maior que a sua própria largura. Nesse caso, isso ocorrerá quando a largura da div “container” superar a largura da div “pagina” (por isso temos a div container).

Tendo entendido o porquê da atribuição de tais valores às propriedades citadas, podemos usar essas informações para exibir a barra de rolagem na div “pagina”. O que precisamos é que a div container tenha sua largura aumentada dinamicamente de acordo com a quantidade de blocos existentes.

Para isso, usaremos um script que percorrerá todas as linhas de tiles (divs pertencentes à classe linha) e calculará a largura total dos blocos de cada uma, considerando inclusive os valores das margens laterais. Como são várias linhas e elas não necessitam ter a mesma quantidade de blocos, será verificado qual linha possui maior largura total, então esse valor será atribuído à propriedade width da div “container”. Isso fará com que a largura da div interna (container) exceda os limites da externa (pagina), fazendo com que a barra de rolagem seja apresentada para o usuário. Então, no arquivo script.js (que até então deve estar vazio) adicione o conteúdo da Listagem 10.

Listagem 10. Arquivo script.js com função para apresentar a barra de rolagem

  01 $(function () {
  02     var maiorLinha = 0;
  03     $(".container .linha").each(function () {
  04         var larguraLinha = 0;
  05         $(this).children(".tile").each(function () {
  06             larguraLinha += $(this).width();
  07             larguraLinha += 2*parseInt($(this).css("margin-right").toString().replace("px", ""));
  08         });
  09         if (larguraLinha > maiorLinha)
  10             maiorLinha = larguraLinha+5;
  11     });
  12     $(".container").css("width", maiorLinha.toString() + "px");
  13 });

Para percorrer as linhas da página e os blocos de cada linha, foi utilizada a função “each()”, que permite iterar sobre os itens de uma lista. Na mesma listagem foi usada em dois momentos a palavra reservada this, nos quais possui significados diferentes. Na primeira ocorrência o this refere-se à própria div “linha”, da qual filtramos os elementos filhos (children) que pertencem à classe tile e iteramos sobre estes elementos. No outro uso do identificador this, este já se refere ao bloco que está sendo acessado em cada iteração, pois está sendo usado dentro da segunda função each.

Observação: Entenda-se por iterar percorrer todos os elementos de uma lista com o objetivo de efetuar determinada ação sobre os mesmos.

Após calcular a largura, atribuímos esse valor à propriedade width da div container usando a função css() da jQuery, função essa que recebe dois parâmetros referentes ao nome da propriedade CSS e o valor a ser aplicado respectivamente. Como a propriedade width se trata de um atributo CSS, é preciso informar corretamente a sintaxe, informando a unidade dessa medida, no caso, pixels (px).

Agora podemos inserir mais tiles horizontalmente e observar o resultado na Figura 4.

NOTA

Como até aqui já foram apresentados vários exemplos de uso dos tiles, não será mostrado aqui o novo conteúdo da página HTML com os novos blocos adicionados. O leitor pode inseri-los segundo sua preferência de quantidade e cor, desde que somem uma largura suficiente para que se observe a barra de rolagem.

Figura 4. Menu com barra de rolagem horizontal

Para finalizar, resta aplicar um pequeno efeito aos tiles para que eles tenham a aparência alterada ao serem clicados. Para isso usaremos as seguintes funções da jQuery (tal como pode ser visto na Listagem 11):

  • mousedown, trata o evento de pressionamento do botão do mouse sobre o elemento HTML;
  • mouseup, trata o evento de soltura do pressionamento do botão do mouse sobre o elemento HTML;
  • e mouseleave, trata o evento de remoção do cursor do mouse de sobre o elemento HTML.

Listagem 11. Tratamento dos eventos de botão do mouse sobre os tiles

  01 $(".tile").mousedown(function () {
  02     $(this).addClass("selecionado");
  03 });
  04 
  05 $(".tile").mouseup(function () {
  06     $(this).removeClass("selecionado");
  07 });
  08 $(".tile").mouseleave(function () {
  09     $(this).removeClass("selecionado");
  10 });

Quando o botão do mouse for pressionado, será adicionada a classe CSS “selecionado” ao tile e quando o botão for solto esta classe será removida. O uso da função mouseleave foi necessário para corrigir uma pequena falha que surge se usarmos apenas as duas primeiras. Se o usuário pressionar o botão do mouse e, ainda com o botão pressionado, remover o cursor sobre o tile, este não volta à sua configuração original, pois o evento mouseup não é disparado. Por isso fazemos com que o bloco volte ao normal se o cursor estiver sobre ele e for removido.

A classe “selecionado” (ver Listagem 12) apenas altera a cor de fundo do tile, mas outros efeitos poderiam ser aplicados apenas adicionando mais código à listagem (também a critério do leitor).

Listagem 12. Classe para destacar o tile clicado

.selecionado{
     background-color: #483D8B;
  }

Dessa forma o menu está pronto para uso. Podemos visualizar o resultado final na Figura 5, onde o primeiro bloco aparece pressionado e, consequentemente, com a cor de fundo mudada.

Figura 5. Menu funcionando com um tile pressionado

Com isso finalizamos nossa página. Não é a mesma coisa que o menu do Windows 8, mas é, sem dúvidas, uma solução viável para esta situação, com esse tipo de design.

Possuindo algum conhecimento de HTML, CSS e JavaScript, o leitor poderá alterar facilmente a aparência do menu e atribuir funcionalidades aos tiles como, por exemplo, usá-los como links ou para invocar funções JavaScript.

Espero que o conteúdo deste artigo possa ser útil para os profissionais do desenvolvimento web interessados em desenvolver um layout no estilo metro, uma das novas tendências no mercado de software da atualidade.

Links

www.jquery.com
Página oficial da biblioteca jQuery