Programação para Web I

Em primeiro lugar, um layout responsivo exige a adaptação à diferentes dispositivos. Isso significa que um layout apresentado em uma tela maior, como a de um computador desktop, não se aplica diretamente à telas menores, como a de dispositivos móveis. Observe as imagens abaixo:

Layout em uma tela desktop

Layout em uma tela de smartphone. A imagem da esquerda apenas "encolhe" o tamanho das estruturas

Além disso, precisamos considerar diferenças de interação do usuário com a aplicação. Dessa forma, responsividade considera não só o tamanho de tela, mas todos os recursos oferecidos por um dispositivo e as formas de uso pelo usuário (ex.: acelerômetro, mouse, teclado, mobilidade...)

Ao definir um layout, uma estratégia comum utilizada é pensar primeiro no desenvolvimento de dispositivos móveis: a de mobile-first. Essa estratégia tem como principal objetivo garantir a usabilidade em dispositivos móveis como smartphones e tablets, garantindo assim uma maior facilidade na adaptação desses modelos para outros dispositivos.

Conteúdo é como agua. Você coloca agua em um copo e ela se torna o copo. Você coloca agua em uma garrafa e ela se torna a garrafa. Você coloca agua em um bule e ela se torna o bule.

A anotação @media pode ser usada em conjunto com as regras descritas em um documento CSS para limitar a aplicação de uma regra apenas para determinados tipos de dispositivos/telas. Isso auxilia na criação de folhas de estilo responsivas. A sintaxe dessa anotação pode ser descrita da seguinte maneira:

@media not|only mediatype and (mediafeature and|or|not mediafeature){
    seletor{
        regras...
    }
}

Veja o Exemplo .

Limitando a regra à largura de tela de 600px

@media screen and (max-width: 600px) {
    .container{
    }
}

Aumentando o tamanho da letra para impressão

@media print {
    .container{
        font-size: 3rem;
    }
}

Desabilitando um elemento na impressão

@media print {
    .container{
        display: none; //use block para mostrar novamente
    }
}

Mais informações sobre a anotação @media no MDN

O Flexible Box Module, geralmente conhecido como flexbox, é um modelo de layout que permite organizar os elementos de um documento com tamanho e orientações flexíveis. O flexbox foi criado exclusivamente para a web, onde possuímos frequentemente renderizações com diferentes tamanhos e especificações.

A especificação do flexbox foi feita em Outubro de 2017, e desde então é um dos mais eficientes modos de orientar elementos no CSS, podendo ser utilizado juntamente com o modelo CSS Grid.

Os elementos que desejamos organizar através do flexbox devem seguir uma hierarquia básica de:

• Pais (parent ou container)
• Filho (children ou item)

#elemento-pai{
    display: flex;
}

.elementos-filhos{
    flex-grow: 2;
    flex-basis:  10rem;
}

É importante ressaltar que elementos filhos de elementos filhos não são automaticamente alinhados com o flexbox.

• display

  Essa propriedade define um container flex. Sempre que definimos um elemento pai dessa maneira, todos os seus filhos imediatos serão organizados de acordo com a lógica do flex.

  css style.css

  .container {
      display: flex;
  }
  

• flex-direction

  Define a direção de como os elementos filho serão organizados dentro do elemento pai. Podemos definir o eixo horizontal ou vertical, além de determinar a sequencia dos elementos como *-reverse (de trás pra frente).

  css style.css

  .container {
      flex-direction: row | row-reverse | column | column-reverse;
  }
  

• flex-wrap

  Por padrão, os itens flex irão ocupar uma única linha. Podemos permitir que os elementos quebrem linha usando esse atributo.

  css style.css

  .container {
      flex-wrap: nowrap | wrap | wrap-reverse;
  }
  

• justify-content

  Define o alinhamento dos elementos ao longo do eixo principal (definido porflex-direction). Isso permite distribuir o espaço vazio de um elemento pai entre todos os elementos filhos.

  css style.css

  .container {
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
  }
  

• align-items

  Define o alinhamento dos elementos ao longo do eixo transversal (o eixo contrário ao definido por flex-direction). Podemos pensar nesse atributo como umjustify-content para o eixo secundário.

  css style.css

  .container {
      align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
  }
  

• align-content

  Define como o espaço extra do container será distribuído no eixo transversal. É similar aojustify-content.

  css style.css

  .container {
      align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
  }
  

• order

  Por padrão, os itens flex são dispostos na ordem em que aparecem no código (ou na ordem reversa). Em todo caso, podemos definir elementos com ordem estática usando essa propriedade.

  css style.css

  .item {
      order: 5; /* padrão é 0 */
  }
  

• flex-grow

  Define a habilidade de um item flex de aumentar seu tamanho se necessário. Os valores usados para esse atributo usam unidades de proporção. Por exemplo, um item definido comoflex-grow: 2 terá tomará o dobro de espaço excedente em comparação com os itens definidos como flex-grow: 1.

  css style.css

  .item {
      flex-grow: 4; /* padrão é 0 */
  }
  

• flex-shrink

  Define a habilidade de um item flex de encolher se necessário. Também usa a mesma lógica de proporções que flex-grow

  css style.css

  .item {
      flex-shrink: 3; /* padrão é 1 */
  }
  

• flex-basis

  Define o valor padrão de um item antes que o espaço excedente do container seja distribuído. Essa propriedade aceita valores em unidades padrão, como %,rem oupx. Também é possível utilizar o valor auto, que usa automaticamente os valores de height e width do item.

  css style.css

  .item {
      flex-basis:  | auto; /* default auto */
  }
  

• align-self

  Sobreescreve o alinhamento padrão definido pelo container (align-items).

  css style.css

  .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  

• Exemplos de uso
• Guia completo do CSS-Tricks

Considere a esta página exemplo. O site utiliza flex para organizar os itens na tela. Observe que o componentes são organizados automaticamente em telas menores (Use o modo de design responsivo do navegador. utilize oCtrl + Shift + M, no firefox). No entanto, alguns melhoramentos podem ser feitos em relação à responsividade nesse tipo de dispositivo. Considere os requisitos abaixo e realize os melhoramentos solicitados:

• Uma nova regra deve ser criada para atender apenas a dispositivos móveis com largura de tela de no máximo 600px
• Usando o seletor .mensagem .conteudo, aplique uma margem da esquerda para2rem. Além disso, deve incluir uma regra chamada order: 1;
• Usando o seletor header, insira a regra flex-flow: column;
• Usando o seletor header ul, insira a regra display: block;
• Usando o seletor header ul li, altere a margem para 2rem e o alinhamento do texto para centralizado

As alterações deverão ser realizadas em um arquivo CSS adicional, contendo o seu nome .css, que deverá ser devidamente linkado ao arquivo index.html. Não deve ser realizada nenhuma alteração no arquivo original.css (mas pode e deve ser utilizado como referência nas modificações)

Levando esta página HTML em consideração, implemente alterações usando flexbox e os conteúdos aprendidos até aqui para criar uma página que se pareça ao máximo com este mockup (desktop). A estilização deve ser responsiva e se apresentar em dispositivos móveis adequadamente de acordo com estes mockups (exemplo mobile 01,exemplo mobile 02). Para garantir fidelidade no projeto, você pode seguir as seguntes dicas:

• Você pode usar a letra que preferir. Experimente utilizar uma nova fonte a partir de algum repositório
• Elimine a margem do body usando margin: 0;
• Utilize um tamanho máximo para a seção alinhamento de 1000 pixels, e aplique a margin 0 auto
• Utilize um flex-basis para cada caixa em alinhamento de 250px
• Justifique o texto dentro das caixas em descricao
• Utilize um flex-basis para cada caixa em descricao de 200px
• Lembre-se: utilizar o flex-basis garante um tamanho mínimo para um elemento, mas é necessário usar o flex-grow se você quer que ele ocupe espaços vazios na sua linha
• As imagens deve conter tamanho fixo de 100 pixes por 100 pixels. Utilize a regra object-fit: cover; para acomodar devidamente a imagem sem distorcer

Utilize imagens de personagens para ilustrar sua página. Você pode utilizar este arquivo de imagens de Game Of Thrones como referência

Seguindo este documento, estilize um menu de navegação responsivo que seja capaz de mudar de comportamento em dispositivos com largura menor do que 400px. O exercício deve possuir dois navbar diferentes, que serão exibidos de acordo com o dispostivo. Não é necessário implementar a interação dos menus.

• Utilize o flexbox para organizar os menus também
• Utilize uma imagem para representar o menu quando na tela menor
• A cor do menu também deve ser alterada de acordo com o o dispositivo
• Nenhum dos dois menus deve aparecer em caso de impressão do documento HTML

O modelo final deve ficar parecido com este.

Utilizando esta template, altere o CSS usando flexbox para que mostre as noticias da seguinte forma. Adicione também uma letra personalizada do Google Fonts para o seu modelo.

Algumas dicas:

• O tamanho da imagem destaque foi diminuido para 30rem;
• O tamanho das outras imagens está em 15rem;
• O tamanho base de cada article é de 15rem
• Utilize o flexbox para alinhar as caixas de artigos
• Utilize também o flexbox para alinhar os itens dentro dos artigos (talvez seja necessário alterar o HTML)

O modelo deve ficar parecido com este.