Atividade Objetiva 2_ Direção de Artes para Web

Prévia do material em texto

Atividade Objetiva 2
Entrega 16 de abr de 2021 em 23:59 Pontos 1 Perguntas 5
Disponível 10 de fev de 2021 em 0:00 - 16 de abr de 2021 em 23:59 Limite de tempo Nenhum Tentativas permitidas 2
Instruções
Este teste não está mais disponível, pois o curso foi concluído.
Pontuação desta tentativa: 0,8 de 1
Enviado 18 de mar de 2021 em 19:30
Esta tentativa levou 2 minutos.
Importante:
Caso você esteja realizando a atividade através do aplicativo "Canvas Student", é necessário que você clique em "FAZER O QUESTIONÁRIO", no final da
página.
0,2 / 0,2 ptsPergunta 1
Observe com atenção a figura abaixo:
 Figura 3 - Layout web. Fonte: Elaborado pelo autor (2020)
A figura representa uma página web que, após ter sido estilizada em seu CSS, resultou no layout acima, com duas
linhas e 2 colunas, sendo que a primeira coluna é dividida em outras duas (C e D).
Considerando a imagem apresentada, assinale a opção correta.
 
O layout da figura foi desenvolvido utilizando o FlexBox, o qual funciona em 2 dimensões (ou linha, ou coluna), assim como
o CSS Grid, modificando apenas o atributo/valor display no contêiner.
 
Ao contrário do FlexBox, no CSS Grid você pode definir alguns atributos no contêiner e alguns atributos em cada item
individualmente, sendo possível gerar layout em duas dimensões.
 
O layout da figura foi desenvolvido usando CSS Grid, o qual é ativado em um elemento de contêiner (que pode ser uma
<div> ou qualquer outra tag) pelo atributo/valor display.
Correto!Correto!
A alternativa está correta, pois após definir o código HTML, a próxima etapa é declarar que o elemento contêiner é
uma grid (grade). O atributo display é o que define se um contêiner é de grade ou flexbox. Um container de grade
pode ser definido como display:grid ou display:inline-grid.
 
Uma das grandes facilidades do CSS Grid é que podemos definir valores para cada uma das linhas, o que acaba sendo um
processo muito produtivo se considerarmos aplicativos web que são dinâmicos.
 
Observe pela figura que existem espaços entre os componentes na tela (entre as divs), isso foi possível ao adicionar os
atributos grid-column-gap e grid-row-gap, ou a abreviação grid-gap nos itens.
0,2 / 0,2 ptsPergunta 2
Analise com atenção a figura abaixo:
 
Figura 4 - Código CSS e layout web. Fonte: Elaborado pelo autor (2020)
Neste código ficou omitido o conteúdo HTML, o qual é composto de quatro tags
<div class=”item item1”>,
<div class=”item item2”>,
<div class=”item item3”>,
<div class=”item item4”>, onde o estas DIVs estão dentro de uma DIV pai <div class=”container”>.
Considerando a figura, avalie as afirmações abaixo:
1. Na linha 2, é definido que estamos utilizando o CSS Grid e na linha 3 é atribuído um espaçamento de 10 pixels
entre os componentes do container, gerando o layout conforme visto ao lado direito da figura.
2. Na linha 23, podemos substituir a interrogação pelo atributo/valor grid-column: 2/3;
e grid-row: 2/3; para que, no layout, o componente D fique no espaço em branco entre os componentes B e C.
III. Nas linhas 4 e 5, temos a função repeat, a qual é uma função especial que recebe um número que indica o
número de vezes que uma linha ou coluna será repetida e o comprimento de cada uma.
1. Na linha 2, podemos substituir o valor grid do atributo display por flex, uma vez que CSS Grid e Flexbox são
intercambiáveis, apenas com a diferença de que o Flexbox é unidimensional e o CSS Grid é bidimensional.
É correto o que se afirma apenas em: 
 II e IV 
 I, III e IV 
 II, III e IV 
 I, II e III. Correto!Correto!
A alternativa está correta, pois apenas as afirmações I, II e III são verdadeiras.
A afirmação I é verdadeira, pois para definirmos que vamos trabalhar no container com o CSS Grid, devemos atribuir
ao atributo display o valor grid ou grid-inline. Ainda, na linha 3 é definido o espaçamento entre os itens
(componentes) que serão apresentados dentro do container, que neste caso será de 10 pixels.
A afirmação II é verdadeira, pois a flexibilidade do CSS Grid possibilita que possamos manipular os componentes em
duas dimensões (linhas e colunas). Para o caso específico, para colocarmos o componente (item) D entre os
componentes B e C, podemos utilizar o atributo grid-column com os valores 2 / 3, isso significa que o componente D
começará na coluna 2 e terminará no início da coluna 3. De igual modo, podemos utilizar o atributo grid-row com os
valores 2 / 3, o que indica que o componente D iniciará na linha 2 e terminará no início da linha 3, ou seja, ficando
bem ao centro.
A afirmação III é verdadeira, pois no CSS Grid podemos utilizar uma função para otimizar o trabalho do design. A
função repeat (conforme o CSS da figura), definirá um layout com 4 colunas de 80 pixels e 3 linhas de 100 pixels. Se
não desejarmos utilizar a função repeat, teremos que declarar (uma a uma) as 4 colunas e as 3 linhas da nossa grid.
A afirmação IV é falsa, pois apesar os Flexbox e CSS Grid trabalharem muito bem juntos, se substituirmos o valor do
atributo display para flex, teremos muitas inconsistências em nosso layout, pois no Flexbox não existem muitos dos
atributos do CSS Grid. Neste caso específico, se atribuirmos o valor flex para o atributo display, os elementos ficarão
dispostos lado a lado no layout. 
 III e IV 
0,2 / 0,2 ptsPergunta 3
Analise com atenção o código abaixo:
 
Figura 1 - Código CSS e layout web. Fonte: Elaborado pelo autor (2020)
Neste código ficou omitido o conteúdo HTML, o qual é composto de quatro tags <div class=”item”>, estas DIVs estão
dentro de uma DIV pai <div class=”container”>.
Considerando a figura, avalie as afirmações abaixo:
I. Na linha 4, podemos trocar o valor inline-flex pelo seu valor correspondente flex, permanecendo a mesma saída a
direita.
II. Na linha 12, temos o atributo flex-direction: column; o qual não impacta no layout, uma vez que ele deveria ser
declarado na classe container.
III. Na linha 5, temos o atributo justify-content: space-between, o qual é responsável por remover os espaços entre
os itens resultando no layout a esquerda.
É correto o que se afirma em:
 II, apenas Correto!Correto!
A alternativa está correta, pois apenas a afirmação II é verdadeira.A afirmação II é verdadeira, pois o atributo flex-
direction indica a direção dos elementos dentro do container. Logo, não é possível aplicar uma direção para um item.
Neste caso, remover ou alterar o valor do atributo da linha 12 não impactará no layout final.A afirmação I é falsa,
pois inline-flex não corresponde ao flex, logo, se modificarmos o atributo display para flex, teremos uma modificação
no layout.A afirmação III é falsa, pois o atributo flex-direction é aplicado para alterar o alinhamento dos itens. Ao
declarar o valor space-between, os itens serão colocados espalhados ao longo do eixo quando o valor do atributo
display for flex.
 I, apenas 
 I e II, apenas 
 I e III, apenas 
 III, apenas 
0,2 / 0,2 ptsPergunta 4
Leia o texto abaixo:
O Flexbox é um modelo de layout que permite que os elementos se alinhem e distribuam o espaço dentro de um
contêiner. Trata-se de um conjunto de propriedades em CSS (Cascading Style Sheets) puro para fornecer um
sistema de layout unidimensional. O módulo Flexbox é identificado como parte da terceira versão do CSS (CSS3).
Dentre os componentes do Flexbox temos
 a flex area, que define o local onde os flex itens serão organizados de acordo com as direções do flex line. 
 
o flex track, que define que os elementos podem ser organizados em linhas (row) ou em colunas (column), semelhante ao
excel.
 o flex line, que é composta por diversas linhas verticais e horizontais que dividem a estrutura do flexbox. 
 o flex direction, que define que os elementos podem ser organizados em linhas (row) ou colunas (column). Correto!Correto!
A alternativa está correta. O flex direction corresponde a direção na qual os elementos estão organizados no flex
container, podendo ser em linhas (row) ou colunas (column). Além de também ser em linhareversa ou coluna
reversa, respectivamente, row-reverse e column-reverse.
 o flex cell, que é semelhante a célula de uma planilha de excel, o que corresponde a um único elemento do flexbox. 
0 / 0,2 ptsPergunta 5
Analise com atenção o código abaixo:
 
Figura 2 - Código CSS e HTML. Fonte: Elaborado pelo autor (2020)
Neste código nós temos 3 DIVs, cada uma com um item interno representados pelos valores Item 1, Item 2 e Item 3.
Considerando a figura, avalie as afirmações abaixo:
1. As linhas 2, 3 e 4 do HTML estão incorretas, uma vez que os atributos de classe devem ser separados por
virgulas e não por espaço como estão na figura.
2. Poderíamos trocar o atributo width:180px da linha13 pelo atributo flex-basis: 180px. Após a troca, a saída será a
mesma pois o flex-basis controla o dimensionamento do item.
III. A linha 4 do CSS fará com que os itens fiquem alinhados a direita do layout, e a ordem de impressão na tela
(leitura da esquerda para a direita) será item 3, item 2 e item 1.
É correto o que se afirma em: 
 I e III, apenas 
 III, apenas 
 II e III, apenas Resposta corretaResposta correta
 I, apenas 
 II, apenas Você respondeuVocê respondeu
A alternativa está incorreta, pois apenas as afirmações II e III são verdadeiras.
A afirmação II é verdadeira, pois o atributo flex-basis é responsável por controlar o espaço que o item ocupará ao
longo do eixo principal do container. Ou seja, indicar qual a largura (quando estivermos trabalhando em linha) ou
altura (quando estivermos trabalhando em colunas). 
A afirmação III é verdadeira, pois o atributo flex-direction aceita quatro valores: row, row-reverse, column ou column-
reverse. Para o valor row-reverse, nós vamos alterar a direção da linha, ou seja, os elementos estarão alinhados à
direita. Logo, o primeiro item mais à direita será o item 1, em seguida o item 2 e por fim o item 3. Em uma leitura da
esquerda para direita, teremos: item 3, item 2 e item 1.
A afirmação I é falsa, pois podemos adicionar mais de um nome de classe para um mesmo elemento. Para separar
os nomes destas classes nós utilizamos o espaço, assim como podemos ver no código HTML da figura.
Pontuação do teste: 0,8 de 1