Colaborar - Av2 - Desenvolvimento Responsivo

Prévia do material em texto

 Desenvolvimento Responsivo (/aluno/timeli…
Av2 - Desenvolvimento Responsivo
Sua avaliação foi confirmada com sucesso
Colaborar  
(/notific
×
Informações Adicionais
Período: 03/02/2025 00:00 à 10/03/2025 23:59
Situação: Cadastrado
Tentativas: 3 / 3
Pontuação: 2500
Protocolo: 1076887038
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.
https://www.colaboraread.com.br/aluno/timeline/index/4289051502?ofertaDisciplinaId=2338113
https://www.colaboraread.com.br/aluno/timeline/index/4289051502?ofertaDisciplinaId=2338113
https://www.colaboraread.com.br/notificacao/index
https://www.colaboraread.com.br/notificacao/index
https://www.colaboraread.com.br/notificacao/index
javascript:void(0);
a)
b)
c)
d)
e)
2)
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.
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.
Os menus de navegação responsivos são essenciais, pois tem o poder de catalogar em um curto espaço
itens essenciais de um site e/ou aplicativo. Com a inserção dos smartphones, os menus  responsivos
ganharam cada vez mais adeptos e estão presentes em basicamente todos os sites e aplicativos
desenvolvidos atualmente.
 
As abordagens para os menus responsivos, também dependerá do tempo e do orçamento disponível.
Algumas abordagens não são uma solução rápida e podem levar algum tempo para serem acertadas.
 
Baseado nas abordagens que podem fazer a navegação funcionar melhor em telas pequenas, desde a mais
rápida e simples até a mais complexa, julgue as afirmativas a seguir em (V) Verdadeiras ou (F) Falsas:
 
(  ) A melhoria da ergonomia para a utilização dos menus visar tornar eles mais fáceis ao toque, e deixar
mais precisos. 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.
 
(  ) Pensar no posicionamento do menu, trata de realocar a navegação em telas muito pequenas, como
mover a navegação para o final da página em smartphones. Dessa forma, quando o usuário rolar até o final
de uma página e terminar de ler o conteúdo, ele tem um lugar para onde ir.
 
(  ) Os ajustes do design do visual do menu podem primeiramente serem feitos apenas os ajustes mais
simples, para fazer o menu parecer melhor em telas mais estreitas, focando nos modos paisagem e retrato.
 
(  ) A utilização do menu Tooltips é um invenção muito boa, pois são usadas para apresentar uma pequena
quantidade de conteúdo oculto (principalmente explicativo), que aparece quando o usuário move o curso ou
clica (menos comum) em um “alvo” específico
Assinale a alternativa que apresenta a sequência CORRETA.
a)
b)
c)
d)
e)
3)
a)
b)
c)
d)
e)
4)
Alternativas:
V – V – F – F.
F – F – V – V.
V – F – V – F.
V – F – V – V.
V – V – V – F. Alternativa assinalada
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. Alternativa assinalada
A asserção I é uma proposição falsa e a II, verdadeira.
A asserção I é uma proposição verdadeira e a II, falsa.
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.
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:
 
Fonte: Mobilehtml5. Disponível em: . 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:
a)
b)
c)
d)
e)
5)
a)
b)
c)
d)
e)
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 parase 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.
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.
Alternativa assinalada
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.