Anterior Próximo

Estruturas de Visualização

Modos de Visualização

Visualizações

Este artigo é a segunda parte do tutorial sobre Web Design com Flex Box Model.

Conforme definimos no capítulo anterior, são três as estruturas de visualização para esse site:

Break-point #	Início px	Fim px
#1	320	480 inclusive
#2	481	768 inclusive
#3	769	W máximo

Reprodução da Tabela I - Break-points na largura das telas

Essas estruturas podem ser esquematizada conforme a figura a seguir:

Formatos de tela — Figura 1 - Layouts em função da largura da tela do dispositivo

Embora no site original, W3schools, a resolução intermediária da tela acomode três colunas, a largura das mesmas pode tornar a leitura impraticável, deste modo optamos por manter apenas uma coluna nas resoluções baixa e média e três colunas somente na resolução máxima. Nenhum dos layouts mostrou-se adequado à exibição de duas colunas.

Viewport

Tudo o que pode ser visto em uma página web está em uma janela de visualização denominada viewport. As suas propriedades variam em função do dispositivo em que a página está sendo vista, deste modo, teremos diferentes resoluções para smartfones, tablets e computadores.Controlar o layout através desses atributos é a essência do chamado efeito responsivo em páginas web.

A obtenção dos valores dos atributos é conseguida através do código a seguir:

Onde:

viewport: define o objeto a ser obtido, viewport, que controla as dimensões e escalas aplicadas à webpage.

width = device-width: Atribui à width o valor de device-width Isso faz com que a largura da web-page corresponda à largura da tela do disposito.

initial-scale = 1.0: Atribui o valor 1.0 da escala inicial de exibição à página web, garantindo que, ao abrir a página, cada pixel do dispositivo corresponda à 1 pixel da webpage.

Esse código deve ser inserido no início do arquivo HTML, na seção <head> tal qual está no arquivo template.html, que serve de base para esse tutorial, disponível em downloads.

Box Model

O primeiro passo na criação do layout, consiste em se identificar os elementos visuais, estruturas, para posteriormente transformá-los em componentes HTML. A técnica para isso é baseada no Box Model. Neste modelo, todo componente HTML está envolto por um retângulo. Entre o elemento principal e a borda interna do retângulo podemos ter um espaçamento definido por padding e entre o lado externo da borda e o próximo elemento podemos ter espaçamento definido por margin. A figura a seguir ilustra esse conceito:

Cada componente HTML é identificado no arquivo por um par de tags. Para ilustrar, o exemplo da figura é definido por:

As regras CSS aplicadas são:

A forma como essas regras afetam o componente depende de uma declaração que define a abrangência do retângulo do box model. Por padrão, ao nos referirmos a um bloco deste tipo, a largura e a altura do mesmo considera apenas o conteúdo em si, ou seja, a altura e a largura do componente são definidos por hcb e wcb:

Essa abordagem causa uma série de problemas quando estamos tratando o layout. Não é conveniente nos referirmos apenas ao conteúdo principal do componente, mas sim à sua composição, no posicionamento em relação aos outros elementos.

Felizmente, existe uma declaração em CSS que pode alterar esse comportamento:

Dessa forma, a referência de altura e largura do componente passa a ser hbb e wbb, incluindo as dimensões do padding e a espessura de sua borda. As margens, por serem externas, não são consideradas:

Figura 4 - Diagrama do Box Model (W3C) – box-sizing:border-box

A margin, o padding, a espessura e cor da borda podem ser especificados de forma singular. Podemos especificar, por exemplo, uma cor ou espessura diferente para cada uma das quatro bordas. Para referência, consulte o W3schools.

Esboço

Voltando aos elementos visuais, uma vez identificados, temos que agrupá-los de acordo com sua função e propriedades. Considerando nosso exemplo, a figura a seguir irá nos ajudar nessa etapa:

Figura 5 - Identificação dos elementos visuais em uma página web

Trata-se de um esboço de nossa página. No topo temos a barra de navegação, sensível à largura do dispositivo de exibição, que poderá mostrar apenas uma barra com o Logo e o menu tipo hamburger em telas menores, extender o menu na barra de navegação em forma de ícones para telas de largura média ou utilizar botões tipo texto em telas maiores.

O conteúdo da página, dependendo do dispositivo e resolução, é exibido em três colunas paralelas ou empilhadas. A coluna central conterá o artigo enquanto que as colunas laterais servem como contendoras para avisos e mensagens.

Finalmente o rodapé, ocupando a parte inferior da tela, com acesso através de links para a administração do site e outras informações relevantes.

Barra de Navegação

A barra de navegação abrange, praticamente, todos os conceitos sobre flexbox que abordaremos neste tutorial. Inciaremos o desenvolvimento pela mesma e depois iremos rever parte desses conceitos no restante da estrutura.

É definida por um grupamento de componentes em um componente contendor, identificado na figura acima por <nav>. Esse componente mais amplo é necessário por que controlará o modo como os outros componentes serão distribuídos.

O logo, que faz as vezes de botão home está presente em todas as versões, a parte central pode conter botões de texto, botões de ícones ou ser totalmente vazia. O local onde fica o avatar nas larguras máxima e média, dá lugar ao ícone de hamburger que, se clicado, transforma-se no ícone de X, indicando que pode ser fechado.

Identificados os elementos visuais, para implementá-los em HTML temos que criar um par de <div> para o contendor e um par de <div> para cada elemento propriamente dito:

Em seguida, definimos algumas regras no arquivo CSS que irão incluir uma moldura e um espaçamento ao redor de cada componente, facilitando a sua identificação durante o desenvolvimento, conforme vimos na explanação sobre box model:

Como resultado, obteremos a configuração mostrada a seguir. Embora não seja a definitiva, podemos claramente identificar a barra de navegação, representada pelo retângulo mais externo, e os cinco componentes do menu, cada um dos quais envolto por uma moldura.

Elementos de visualização da barra de menus — Figura 7 - Componentes da Barra de Navegação

Flex Box Model

Nesse ponto inciamos a utilização do Flex Box Model.

Antes de aplicarmos esse modelo à barra de navegação, mostrada acima, vamos ver alguns conceitos básicos para ajudar na compreensão do tutorial. Um estudo mais aprofundado é recomendado e o material para isso pode ser obtido em W3schools..

Flex Container

Um flex-container é similar a um elemento do tipo box com a propriedade display: flex atribuída ao mesmo. Essa propriedade confere ao flex-container alguns comportamentos configuráveis, assegurando que o mesmo se adapte ao espaço disponível.

Possui dois eixos que definem a sua orientação em tipo row ou tipo column, denominados de eixo principal (main) e eixo transversal (croos). Em um flex-container tipo row o eixo principal é o eixo horizontal e os elementos internos são dispostos em linha, enquanto que no tipo column o eixo principal é o eixo vertical e os elementos são dispostos em colunas.

Figura 8 - Flex container e flex item com eixo na horizontal (padrão)

Os eixos, e consequentemente o flex-container, podem ser configurados de acordo com a propriedade flex-direction:

Orientação dos eixos em flex container definidos por flex-direction — Figura 9 - Orientação dos eixos em um flex container definidos por flex-direction

Todo componente contido em um flex-container passa a ser um flex-item, compartilhando as propriedades inerentes ao modelo, deste modo, definida a orientação do flex-container, podemos fazer o alinhamento dos componentes internos através de duas propriedades: justify-content, na direção do eixo principal e align-item na direção do eixo transversal.

Figura 10 - Propriedades flex direction e justify content em diferentes configurações

Observe que por padrão, todo o espaço segundo o eixo principal é ocupado pelo elemento, a menos que a propriedade width seja especificada. O espaço segundo o eixo transversal é determinado pelo conteúdo do elemento e também pode ser alterado por height. Regras semelhantes podem ser aplicadas ao eixo transversal.

Voltando ao nosso exemplo, vamos definir o flex-container pela tag <nav>. Fazemos isso através de uma regra CSS:

Através dessa regra simples, a saída no navegador web se altera para:

Figura 11 - Flex items em linha (padrão) após configurar flex container com display:flex

Por padrão, a configuração de flex-direction é row e justify-content é flex-start, por isso os elementos internos estão em linha, próximos à extremidade esquerda. Esses elementos têm suas dimensões determinadas pelo conteúdo.

Uma propriedade associada, que vale a pena mencionar, é flex-wrap. Essa propriedade vem definida por padrão como wrap e isso mantém os componentes em linha mesmo que não caibam totalmente na largura do flex-container. Se ajustarmos essa propriedade como nowrap, os componentes excedentes são deslocados para baixo:

Propriedade flex-wrap: wrap = em linha; nowrap = ajuste dos componentes — Figura 12 - Propriedade flex-wrap: wrap = uma linha; nowrap = ajuste multi-linhas

Perceba que, na figura 12, todos os elementos aparecem simultaneamente, mas o que queremos é a exibição seletiva em função da largura da tela,explicado a seguir.

Figura 13 - Diferentes exibições do menu em função da largura da tela

Emprego de Medias Queries

Esse efeito é obtido através das medias-queries, conforme o código a seguir:

Acrescentando esse código ao arquivo CSS, a saída da tela no navegador é mostrada a seguir:

Figura 14 - Exibição dos elementos visuais através das media queries

@media é utilizada para obter valores de variáveis de ambiente, tais como largura e altura de uma janela de visualização, altura de largura da tela de um dispositivo, orientação de exibição e a resolução do dispositivo. A sintaxe dessa instrução é:

Onde:

Not inverte a regra, ou seja, nega a regra que estiver entre parênteses;

A palavra only especifica que as regras que se seguem somente se aplicam ao mediatype especificado. Essa diretriz é utilizada porque existem versões de navegadores que não dão suporte ao @media, evitando que o restante da regra seja executado independentemente da condição;

And faz a junção do mediatype com a regra estabelecida entre parênteses.

No nosso caso temos:

@media only screen and (max-width:30em)

A regra aplica-se apenas a telas (‘screen’) que tenham largura máxima de 30em; Nessa situação, apenas o elemento identificado por togleIcons é exibido como um elemento flex, enquanto que os outros elementos se tornam invisíveis, através da declaração display: none.

@media screen and (min-width: 30.0em) and (max-width: 48em)

Aplica-se em telas que tenham largura entre 30em e 48em.

@media screen and (min-width: 48em)

A regra aplica-se apenas a telas que tenham largura mínima de 48em;

Colunas

Resolvido o problema referente à barra de navegação, o próximo passo consiste na definição e tratamento das colunas. Isso é é feito pelo acréscimo do bloco de código a seguir no arquivo HTML:

Gerando a saída:

Figura 15 - Tela de saída após inclusão das definições das colunas

Observe que a mesma saída é obtida se não definirmos o par <main></main>, no entanto, como vimos anteriormente, essa divisão será o flex-container para os três flex-items: leftColumn, mainColumn e rightColumn.

As alterações necessárias no arquivo CSS são:

Alterando a visualização para:

Figura 16 - Tela de saída após definições das colunas

Rodapé

O rodapé é a mais simples entre essas estruturas. Acrescentamos sua definição no arquivo HTML e a formatação no arquivo CSS:

HTML

CSS

Com essas alterações, nossa página fica com o seguinte aspecto:

Figura 17 - Estruturas de visualização completas

Ajustes

Existem alguns ajustes que temos que fazer:

O logo deve ficar alinhado à esquerda seguido pelo menu. O avatar deve ficar alinhado ao lado direito;
A coluna principal deve ter o dobro da largura das outras colunas;
Ao redimensionar a largura da tela abaixo de 769px, as colunas devem ficar empilhadas.

Barra de Menus

Perceba que o alinhamento que estamos querendo não é trivial. A propriedade responsável por distribuir os elementos segundo o eixo principal, como vimos, é justify-content e suas opções são mostradas no diagrama a seguir:

Figura 18 - Distribuição dos flex items por justify content x disposição desejada

Para conseguir o efeito de alinhamento que desejamos, definimos justify-content em center(*) e aplicamos uma margem automática do lado esquerdo do elemento que será alinhado à direita. Isso fará com que todo o espaço entre o segundo e o terceiro elemento seja utilizado como margem esquerda do terceiro elemento.

(*) o mesmo efeito seria obtido ajustando a propriedade justify-content em flex-start e flex-end, associados à margin:0 0 0 auto.

Figura 19 - Aspecto da página após o ajuste da margen esquerda em Auto

A regra se aplica para avatar e também para o togleIcons, que ocupará a mesma posição. O elemento togleIcons não está mostrado na figura devido à largura da tela capturada na imagem.

Largura das Colunas

A coluna principal deve ter o dobro da largura das outras colunas, que pode ser ajustada pelas propriedades CSS width e flexis-basis. Na prática, essas duas propriedades são equivalentes, no entanto em algumas situações, flex-basis irá se adequar melhor considerando as margins e os paddings. A unidade que devemos utilizar é a porcentagem da largura do flex-container. Se definirmos essas larguras em unidades absolutas, o efeito responsivo será perdido.

As seguintes regras CSS farão com que as colunas tenham a largura desejada:

Figura 20 - Ajuste das larguras das colunas com flex-basis

Observe que, ao utilizarmos % do flex-container para especificarmos as larguras das telas, as mesmas passam a ocupar toda largura disponível.

Conforme vimos no início deste capítulo, três colunas somente se justificam em telas bem largas. Nas configurações mínima e média utilizaremos as colunas empilhadas em sequência. Isso é conseguido com as alterações que se seguem nas medias-queries do arquivo CSS:

Em:

@media only screen and (min-width: 30.0em) and (max-width: 48em) e

@media only screen and (max-width:30em) :

Altere para:

E em:

@media only screen and (min-width: 30.0em) and (max-width: 48em)