Colaborar - Av2 - Desenvolvimento Responsivo

Prévia do material em texto

 Desenvolvimento Responsivo (/aluno/timeli…
Av2 - Desenvolvimento Responsivo
  
(/notific
Informações Adicionais
Período: 20/03/2023 00:00 à 08/05/2023 23:59
Situação: Confirmado
Tentativas: 3 / 3
Pontuação: 2000
Protocolo: 849141231
A atividade está fora do período do cadastro
Avaliar Material
1) Compreender dos componentes responsivos, é uma importante recomendação para que você os conheça o suficiente para
deixá-los o mais responsivos possível, e assim você poderá ter mais controle do layout responsivo.
 
Uma vantagem a mais, que você poderá ter, já que independentemente da resolução da tela, ou dispositivos utilizados, o seu
componente conseguirá se adaptar perfeitamente.
 
Dentro do estudo de design responsivo, temos o texto responsivo que é uma abordagem para criar textos em uma página da
web que possam ser lidos em uma variedade de dispositivos e tamanhos de tela. Não significa apenas alterar o tamanho em
uma tela diferente, mas também inclui uma boa leitura e coesão entre o texto e os elementos que os rodeiam.
 
De acordo com as informações apresentadas na tabela a seguir, faça a associação dos pontos estudados contidos na Coluna A
com seus respectivos conteúdos abordados, apresentados na Coluna B.
 
I. Texto responsivo
1. Uma tabela responsiva tem como função ajustar a
tabela existente para mostrar o conteúdo efetivamente
vinculado ao tamanho da tela.
II. Tabela responsiva
2. Uma escala de tipo é uma série de tamanhos de tipo
que se correlacionam porque aumentam na mesma
proporção.  Você tendo o tamanho básico, a próxima
etapa é escaloná-lo usando alguma proporção.  Isso
determinará o tamanho da fonte para o cabeçalho,
título, subtítulo, corpo e assim por diante.
III. Formulário responsivo
3. Tornar os menus mais fáceis ao toque, e deixar mais
precisos não é tarefa fácil. Podemos ajudar nisso
aumentando as áreas tocáveis e tornando os links mais
parecidos com botões, o que envia um sinal muito claro
aos usuários sobre onde tocar.
IV. Menu responsivo
4. As restrições dos formulários nos dispositivos móveis
podem gerar inovações, como zoom de campo,
formatos de entrada e mascaramento de senhas.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.
https://www.colaboraread.com.br/aluno/timeline/index/3071235704?ofertaDisciplinaId=1946113
https://www.colaboraread.com.br/notificacao/index
javascript:void(0);
a)
b)
c)
d)
e)
2)
a)
b)
c)
d)
e)
3)
Alternativas:
I - 4; II - 3; III - 2; IV - 1.
I - 4; II - 1; III - 2; IV - 3.
I - 2; II - 1; III - 4; IV – 3.  Alternativa assinalada
I - 3; II - 4; III - 1; IV - 2.
I - 1; II - 3; III - 2; IV - 4.
Uma tabela responsiva tem como função ajustar a tabela existente para mostrar o conteúdo efetivamente vinculado ao
tamanho da tela. Por exemplo, se você precisar trabalhar com uma tabela de 5 colunas que será exibida horizontalmente no site,
quando esta for visualizada em um smartphone, os dados podem ser melhor apresentados com os valores de todos os grupos
em uma única coluna (ou empilhados).
Algumas boas práticas você poderá seguir na criação de um design de interface de usuário de tabela para o projeto do seu site
ou de um aplicativo, como:
Alternativas:
escolher o estilo de linha que melhor se adapta à sua interface.  Alternativa assinalada
utilizar muitas fontes, cores ou estilos, para ajudar o usuário a se concentrar em uma determinada informação específica.
permitir que os usuários consigam rolar horizontal ou verticalmente a interface, é uma prática ruim, pois o usuário poderá
ficar confuso na utilização do site.
adicionar efeitos de foco ou seleção, pode piorar para o usuário a se concentrar em informações específicas.
permitir que os usuários pesquisem, filtrem os dados de modo rápido e selecionem as linhas desejadas ainda são funções
que não podem ser realizadas no design responsivo.
Dentro do estudo de design responsivo, temos a preparação das mídias responsivas, não significa apenas alterar o tamanho
da imagem, mas também inclui práticas cuja finalidade é tornar as imagens responsivas de modo a fornecer ao navegador
arquivos de imagem diferentes, todos aparecendo a mesma coisa, mas com diferentes conteúdos, diferentes números de pixels,
e com imagens adaptadas para diferentes alocações de espaço.
 
De acordo com as informações apresentadas na tabela a seguir, faça a associação dos pontos estudados de preparação de
mídias responsivas contidos na Coluna A com seus respectivos conteúdos abordados, apresentados na Coluna B.
 
I. Srcset
(https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/img#attr-
srcset)
1. Define um conjunto de classes de mídia, com as larguras de tela,
e indica qual tamanho de imagem seria melhor escolher, quando
certas condições de mídia forem verdadeiras. 
II. Sizes
(https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/img#attr-
sizes)
2. Ele define o conjunto de imagens que permitiremos ao
navegador escolher e o tamanho de cada imagem. Cada conjunto
de informações da imagem é separado do anterior por uma
vírgula. 
III. Direção de arte 3. Solução para tentarmos exibir um conteúdo de imagem
idêntico, apenas maior ou menor, a depender do dispositivo.
IV. Resolução de imagens 4. Envolve a mudança da imagem exibida para se adequar a
diferentes tamanhos de exibição de imagem.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.
Alternativas:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
a)
b)
c)
d)
e)
4)
a)
b)
c)
d)
e)
5)
I - 4; II - 3; III - 2; IV - 1.
I - 4; II - 1; III - 2; IV - 3.
I - 3; II - 4; III - 1; IV - 2.
I - 2; II - 1; III - 4; IV – 3 
I - 1; II - 3; III - 2; IV - 4. Alternativa assinalada
O tempo de carregamento é um fator importante que contribui para o abandono da página. Os usuários irão para outro
lugar se as páginas demorarem mais de 3-4 segundos para carregar.
 
A necessidade de páginas que carreguem rapidamente é mais urgente para aqueles que adotaram os dispositivos móveis como
prioridade ao acesso à Internet, porque os usuários sentem que o carregamento da página leva mais tempo do que em
desktops, e isso acontece com a maioria dos sites atuais (73 % de acordo com KISSmetrics, em seu artigo Tempo de
carregamento). Uma boa parte do tempo de carregamento é gasta na execução do processamento do lado do cliente e recursos
de carregamento, como folhas de estilo, arquivos de script e imagens (CRESPO, 2013).
Em relação a compreensão dos motivos que nos quais as páginas carregam lentamente, julgue as alternativas abaixo e selecione
a CORRETA:
Alternativas:
baixar dados desnecessariamente em um site responsivo, não afetam a velocidade da página porque podemos ocultar
elementos que não serão exibidos em dispositivos móveis, para que assim os sites fiquem mais rápidos e consumam menos
a largura de banda.
o baixo volume de imagens, não otimizadas, geralmente é o motivo mais comum para a lentidão de um site.
um ponto que também influencia no carregamento da página, está no uso de plug-ins
JavaScript/jQuery, que se implementado incorretamente, também pode prejudicar a velocidade de
carregamento da página do seu site.
 Alternativa assinalada
as imagens JPEG são muito maiores em tamanho se comparadas com outros formatos de imagem como PNG ou GIF, assim
sua página da web carregará mais lentamente rápido se você estiver usando imagens JPEG.
use testes de carga para digitalizar facilmente os tamanhos das imagens e tomar medidas corretivas.
O Teste de Web Design Responsivo é executado por meio de ferramentas baseadas em navegador e ferramenta autônoma.
Uma ferramenta baseada em navegador verifica a capacidade de resposta de um site alterando a janela de visualização com
base no tamanho e na resolução do dispositivo.
 
Uma ferramenta autônoma testa a capacidade de resposta do conteúdo da web em um dispositivo (SVITLA, 2019). No entanto,
vale ressaltar que o teste de web designresponsivo envolve diferentes critérios que precisam ser atendidos para validar se um
site oferece design responsivo.
 
Acerca desses critérios, analise as afirmações a seguir:
 
I. O link do site deve ser o mesmo para todos os navegadores e dispositivos.
II. Para garantir a compatibilidade com desktops ou dispositivos móveis as imagens devem ter resolução específica.
 
III. É indicado terminar todo o site para só depois realizar os testes. Dessa forma se torna mais fácil identificar possíveis
problemas.
 
a)
b)
c)
d)
e)
IV. A localização do conteúdo deve ser dinâmica conforme a resolução da tela muda.
É correto APENAS o que se afirma em:
Alternativas:
I e III.
II e IV.
I, II e III.
I, II e IV.  Alternativa assinalada
I, II, III e IV