Colaborar - Av - Subst 2 - Desenvolvimento Responsivo

Prévia do material em texto

 Desenvolvimento Responsivo (/aluno/timeli…
Av - Subst. 2 - Desenvolvimento Responsivo
  
(/notific
Informações Adicionais
Período: 06/06/2023 00:00 à 10/06/2023 23:59
Situação: Iniciada
Tentativas: 1 / 3
Protocolo: 869934346
A atividade está fora do período do cadastro
1)
a)
b)
c)
d)
e)
2)
O uso de elementos tipográficos é o que compõem grande parte da web, porém, o que ganhou maior aceitação da web
foram os recursos das mídias, basicamente, tudo que não é conteúdo que faz parte do texto HTML é considerado uma mídia.
Logo as mídias englobam as imagens, vídeos, entre outros, que são capazes de expandir ou contrair conforme a resolução do
dispositivo, podendo ser realizado através de scripts e/ou sentenças CSS, por exemplo (ARTY, 2015).
 
Com base nos estudos de preparação de mídias responsivas e sua importância, avalie as seguintes asserções e a relação
proposta entre elas.
 
I. A imagem essencialmente deve oferecer algum tipo de “pista visual” sobre o tema do conteúdo e melhorar a experiência geral
do site quanto a leitura. Se a mídia está lá apenas para deixar o site mais bonito, então é interessante mudar sua abordagem
com as imagens em seu site. 
PORQUE
 
II. Se você está iniciando a construção de site para desktops, é importante prestar uma atenção especial em como a mídia
aparece na janela de visualização móvel e garantir que ela continue mantendo a sequência do fluxo de conteúdo da página. 
A respeito dessas asserções, assinale a alternativa correta.
Alternativas:
As asserções I e II são proposições verdadeiras, mas a II não justifica a I.
A asserção I é uma proposição falsa e a II, verdadeira.
A asserção I é uma proposição verdadeira e a II, falsa. Alternativa assinalada
As asserções I e II são proposições verdadeiras e a II justifica a I.
As asserções I e II são proposições falsas.
https://www.colaboraread.com.br/aluno/timeline/index/3071235704?ofertaDisciplinaId=1946113
https://www.colaboraread.com.br/notificacao/index
a)
b)
c)
d)
e)
3)
O problema de direção de arte, envolve a mudança da imagem exibida para se adequar a diferentes tamanhos de exibição de
imagem.  Por exemplo, uma página da web onde incluiu uma grande foto de paisagem com uma pessoa no centro quando
visualizada em um navegador de desktop. Quando visualizamos essa mesma página em um navegador móvel, a mesma imagem
é reduzida, tornando a pessoa da imagem muito pequena e difícil de visualizar.
 
Baseado nas abordagens de direção de arte e seus elementos e atributos, que irão auxiliar na aquisição de imagens responsivas,
julgue as afirmativas a seguir em (V) Verdadeiras ou (F) Falsas.
 
(  ) Os elementos  <source> incluem um atributo  media que contém uma condição de mídia, essas condições são testes que
decidem qual imagem é mostrada - a primeira que retornar true será exibida.
 
(  ) O atributo srcset contém o caminho para a imagem a ser exibida. O <source> pode assumir um atributo srcset com diversas
imagens referenciadas, bem como um atributo sizes.
 
(  ) Em todos os casos, você deve fornecer um <img> elemento, com srce alt, imediatamente antes </picture>, caso contrário,
nenhuma imagem aparecerá. Isso fornece um caso padrão que se aplicará quando nenhuma das condições de mídia retornar
verdadeiro e um fallback para navegadores que não suportam o <picture> elemento.
 
(  ) Para deixar a sua imagem responsiva, podemos aplicar o <picture>, que é um elemento que contém vários elementos
<source> que fornecem diferentes fontes para o navegador escolher, seguidos pelo elemento <img>.
Assinale a alternativa que apresenta a sequência CORRETA.
Alternativas:
V – V – F – F.
F – F – V – V.
V – V – V – V.
V – F – V – V. Alternativa assinalada
V – V – V – F.
Para responder a questão, observe o código apresentado abaixo:
 
1
2
3
4
5
//before running the transpiler
Height = height ?? 100;
 
//after running the transpiler
Height = (height !== undefined && height !== null) ? height : 100;
Fonte: JavaScript.info (2021).
 
Vemos a partir do código apresentado um exemplo da aplicação de um Transpiler, para tratar problemas de compatibilidade de
navegador.
 
E veja a Figura do respectivo template de um trecho da tabela do site MobileHTML5 a seguir:
 
a)
b)
c)
d)
e)
4)
a)
Fonte: Mobilehtml5. Disponível em: <https://mobilehtml5.org/>. Acesso em 29 de outubro de 2021.
 
A imagem apresentada corresponde ao template do site MobileHTML5, que trata-se de uma ferramenta que pode ser utilizada
para testar a compatibilidade de recursos.
 
A respeito dos Transpilers e das ferramentas de teste de compatibilidade, analise as afirmativas a seguir:
 
I. Transpilers são ferramentas que podem analisar um código moderno e reescrevê-lo usando construções de sintaxe mais
antigas, de modo que também funcione em mecanismos desatualizados.
II. OTranspilers é uma ferramenta que possibilita adicionar ou preencher alguma funcionalidade ausente no navegador.
 
III. É essencial utilizar as ferramentas de teste de compatibilidade de recursos para detectar possíveis incongruências e corrigi-las
usando novas construções de sintaxe.
 
IV. Pode- se utilizar um Transpiler para adicionar uma nova função.
Considerando o contexto apresentado, é correto APENAS o que se afirma em:
Alternativas:
I e III. Alternativa assinalada
II e IV.
I, II e III.
I, II e IV.
I, II, III e IV.
O principal motivo para se testar a capacidade de resposta é garantir um comportamento consistente do site e do aplicativo
em diferentes dispositivos móveis. Como esses dispositivos diferem por configuração de hardware, sistema operacional e
resolução de tela, o que pode funcionar de uma certa maneira em um dos dispositivos pode variar no outro (PAI, 2019).
A cerca dos conhecimentos relacionados a testagem de capacidade de resposta, julgue as afirmativas abaixo, e marque a que
está CORRETA:
Alternativas:
Um simulador é um software que ajuda o computador a executar determinados programas criados para um sistema
operacional diferente. Eles se destinam principalmente a dispositivos Android, ao contrário de dispositivos iPhone e iPad, que
podem ser emulados facilmente.
b)
c)
d)
e)
5)
a)
b)
c)
d)
e)
O emulador é um software que imita o hardware e o software do dispositivo de destino em seu computador. Eles fazem isso
traduzindo o ISA do dispositivo de destino para aquele usado pelo computador que você está usando para conduzir o teste
usando a tradução binária.
Os dispositivos de teste virtual podem substituir os dispositivos de teste real já que possuem elevada confiabilidade e
precisão.
A tradução binária torna os simuladores mais lentos devido à latência.
Os emuladores, ao contrário dos simuladores, não imitam o hardware. Assim, não se pode investigar
certas funcionalidades, como uso de bateria e interrupções de celular durante o uso de simuladores para
teste.
Alternativa assinalada
Qualquer um que já teve que lidar com problemas de compatibilidade de navegador sabe que não é tão simples quanto
escrever JavaScript que roda em qualquer lugar. Isso porque cada navegador usa um mecanismo JavaScript diferente, cada um
tem características de desempenho e implementa um subconjunto diferente de recursos (SENGSTACKE, 2016).
 
De acordo com as informações apresentadas na tabela a seguir, faça a associação correta entre coluna A com as respectivas
características contidas na coluna B, respectivamente:
 
I Transpilers
1. É a primeira etapa que podemos fornecer como um aprimoramento
progressivo aos usuários do site.
II Polyfill
2. Ao contrário de uma ferramenta ou tecnologia específica. Isso
significa que existem várias maneiras (igualmente válidas) de realizar a
detecção de recursos.
III Detecção de
recursos
3. são ferramentas que leem o código-fonte escrito em uma linguagem
de programação e produzem o código equivalente em outra linguagem.
IV detecção de
recursos é uma
técnica...
4. é um pedaço de código (ou plugin) que fornece a tecnologia que os
desenvolvedores web esperam para queo navegador forneça
nativamente.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.
Alternativas:
I - 4; II - 3; III - 2; IV - 1.
I - 1; II - 3; III - 2; IV - 4.
I - 4; II - 1; III - 2; IV - 3.
I - 3; II - 4; III - 1; IV - 2. Alternativa assinalada
I - 2; II - 1; III - 4; IV - 3.