Quizz_LAYOUT E EDIÇÃO DE IMAGENS PARA WEB

Prévia do material em texto

Revisar envio do teste: Clique aqui para iniciar o QuizSTSICAS3DA_2301-2301-695406 2301-LAYOUT E EDIÇÃO DE IMAGENS PARA WEB Quiz
STSICAS3DA_2301-2301-
695406 (2301-LAYOUT E
EDIÇÃO DE IMAGENS
PARA WEB)
H
Avisos
Guia da Disciplina
Calendário
Quadro de Notas
AULAS
Unidade 1
Unidade 2
Unidade 3
Unidade 4
Midiateca
Biblioteca
ATIVIDADES
Produção Textual Individual
Quiz
Prova de Recuperação
INTERAÇÃO
Fórum
Webconferência
Ajuda
REVISAR ENVIO DO TESTE: CLIQUE AQUI PARA INICIAR O QUIZ 
Quinta-feira, 21 de Março de 2024 10h09min41s BRT
Usuário PAMELA CHRISTY MESQUITA MUNIZ
Curso 2301-LAYOUT E EDIÇÃO DE IMAGENS PARA WEB
Teste Clique aqui para iniciar o Quiz
Iniciado 02/06/23 14:11
Enviado 02/06/23 15:01
Data de vencimento 07/06/23 23:59
Status Completada
Resultado da tentativa 7 em 10 pontos  
Tempo decorrido 49 minutos
Resultados exibidos Todas as respostas, Respostas enviadas, Respostas corretas, Comentários
Pergunta 1
Mobile First é um método de design para web que trabalha a diagramação a partir das telas de dispositivos fisicamente menores.
Uma vez definida a diagramação de telas pequenas, esta é repensada para telas cada vez maiores, procurando manter os elementos
de interface.
Assinale a alternativa que corresponda a uma argumentação que justifique o uso do mobile first em projetos de sistema web:
Resposta
Selecionada: Se uma diagramação é iniciada da maior tela possível, há grandes riscos de ocupar o espaço de forma ampla,
dificultando sua adaptação para telas menores. Ao começar de telas menores, as restrições forçam a diagramação
a ser enxuta e a apresentar apenas o essencial, sendo mais fácil sua adaptação para telas com mais espaço.
Respostas: Se uma diagramação é iniciada da maior tela possível, há grandes riscos de ser apresentada em tamanhos muito
pequenos em telas de smartphones. Do contrário, as diagramações para pequenas telas podem ser visualizadas
em grandes tamanhos nas telas maiores sem perda de qualidade, e isso é preferível.
O preço de smartphones está cada vez mais acessível, logo, o desenvolvimento de sistemas priorizando estes
dispositivos garante que cada vez mais pessoas os utilizem.
Celulares smartphones estão cada vez maiores, com telas de alta resolução, portanto os layouts desenvolvidos
para este tipo de dispositivo já podem ser utilizados em tablets e computadores do tipo desktop.
Celulares smartphones estão cada vez mais presentes no cotidiano e já superaram o uso de computadores
desktop. Portanto é preferível diagramar layouts primeiro para este tipo de dispositivo.
Se uma diagramação é iniciada da maior tela possível, há grandes riscos de ocupar o espaço de forma ampla,
dificultando sua adaptação para telas menores. Ao começar de telas menores, as restrições forçam a diagramação
a ser enxuta e a apresentar apenas o essencial, sendo mais fácil sua adaptação para telas com mais espaço.
Comentário da
resposta:
Mobile First é uma estratégia de design que viabiliza layouts para telas pequenas em primeiro lugar, pois se a
diagramação ocorre primeiro em telas grandes, há grandes chances de não ser possível obter uma diagramação
adequada ao tentar diminuir tamanhos dos elementos ou removê-los do layout.
Pergunta 2
Estes testes são utilizados para medir se os usuários estão entendendo o propósito de um sistema de forma clara e rápida, bem como
avaliar se os elementos de destaque de uma página estão chamando a devida atenção e compreensão do usuário.
Assinale a alternativa que corresponda a este tipo de teste de usuário:
Resposta Selecionada: Testes de usabilidade
Respostas: Testes de impressão
Testes de acessibilidade
Testes de usabilidade
Testes A/B
Análise heurística
Comentário da
resposta:
Os testes de impressão apresentam uma página ao participante durante 5 a 10 segundos, e depois o usuário é
questionado sobre o que ele percebeu sobre esta página.
Pergunta 3
Considere a seguinte composição tipográfica:
Assinale a alternativa que corresponda a uma única ação em tipografia que permitiria a você melhorar a organização e
uniformidade desta composição.
Resposta Selecionada: Diminuir o espaço entre letras geral - tracking.
Respostas: Alinhamento à esquerda.
Diminuir o espaço entre letras geral - tracking.
Ajustar o espaço entre letras - kerning.
Dobrar o espaço entre linhas - leading.
Alinhamento justificado.
Comentário da
resposta:
O texto já está em alinhamento justificado, porém apresenta espaços entre palavras muito irregulares, com
alguns grandes. O alinhamento à esquerda irá regularizar este espaço entre palavras e deixar a mancha de texto
mais uniforme.
Pergunta 4
Considere a seguinte criação de imagem no formato SVG. 
Assinale a alternativa que corresponda a um conjunto de recursos e ferramentas em um software de criação de imagens vetoriais,
que permitiria a você realizar este desenho de forma prática.
Resposta
Selecionada:
d.
Círculos com contorno espesso sem preenchimento; linhas com espessura grande e cantos arredondados,
dispostos de forma perpendicular; ação de rotacionar; ação de alinhar ao centro.
Respostas: a.
Círculos com contorno espesso e sem preenchimento; polígonos estrelados para desenhar os símbolos internos;
ação de alinhar ao centro.
b.
Dois pares de círculos, cada par contendo um círculo maior e outro menor; subtração do círculo menor em
relação ao círculo maior; uso de tipografia para os símbolos internos; ação de alinhar ao centro.
c.
Escrever um código SVG de dois círculos com espessura grossa e sem preenchimento; descrever a forma de
cada símbolo através do uso de retângulos e quadrados; ação de alinhar ao centro.
d.
Círculos com contorno espesso sem preenchimento; linhas com espessura grande e cantos arredondados,
dispostos de forma perpendicular; ação de rotacionar; ação de alinhar ao centro.
e.
Polígonos regulares com mais de 24 lados para dar a impressão de círculo; subtração de formas concêntricas;
uso de curvas Bézier para desenhar símbolos internos; ação de alinhar ao centro.
Comentário da
resposta:
Há diversas formas de realizar este desenho, mas o mais conveniente envolve o desenho de círculos com
contorno de espessura grossa, sem preenchimento, e uso de formas geométricas básicas para desenho dos
símbolos internos, além de rotação e alinhamento.
Pergunta 5
Considere a seguinte composição tipográfica. 
Assinale a alternativa que corresponda a uma ação em tipografia que permitiria a você melhorar a organização e uniformidade desta
composição.
Resposta Selecionada: b. Kerning
Respostas: a. Leading
b. Kerning
c. Tracking
d. Phishing
e. Nenhuma das alternativas
Comentário da
resposta:
As letras precisam de ajuste de kerning, ou entreletras individuais, pois várias delas estão ajustadas de forma
irregular: enquanto se aproximam muito de um caractere vizinho, afastam em demasiado do outro.
Pergunta 6
Trata-se de um guia de posicionamento e distribuição de elementos gráficos no espaço, que garante um padrão consistente para as
diferentes páginas de um livro, revista, website ou aplicativo móvel.
Assinale a alternativa que corresponda ao assunto tratado na frase:
Resposta Selecionada: Grade
Respostas: Navegação
 Grade
Layout
Resolução de tela
Responsividade
Comentário da
resposta:
É papel de uma grade subdividir o espaço de uma tela ou página em porções iguais e orientar o posicionamento
de elementos. Uma mesma grade deve ser aplicada em todas as demais páginas para garantir um padrão.
Pergunta 7
A arquitetura da informação tem o papel de separar e organizar o conteúdo de um sistema web em estruturas compreensíveis para os
usuários do sistema.
Assinale a alternativa que corresponda a duas técnicas de organização de conteúdo, comumente aplicadas pelos arquitetos de
informação:
Resposta Selecionada: Taxonomia e Hierarquia
Respostas: Rotulação e Interação
Busca e Acessibilidade
Taxonomia e Usabilidade
 Taxonomia e Hierarquia
Interação e Hierarquia
Comentário da
resposta:
Taxonomia é a classificação de unidades de informação em categoriasmutualmente exclusivas, e hierarquia
estabelece uma organização ordenada e priorizada de acesso a estas categorias.
Pergunta 8
Suponha que você deve criar um infográfico para uma página web. Esse infográfico é um diagrama que conecta muitas caixas de
texto, de modo que fica um pouco difícil conseguir visualizar todo o infográfico e ao mesmo tempo ler o que há dentro de cada caixa
de texto. A solução neste caso será a utilização de um mecanismo de ampliação e redução do infográfico, para permitir ao usuário
navegar pelas caixas da maneira que lhe for conveniente. Neste mecanismo, o infográfico deve ser feito com uma ou mais imagens
digitais.Considerando este contexto e suas restrições, assinale a alternativa correta.
 
Resposta
Selecionada:
a.
Deve ser utilizada uma imagem vetorial para representar o infográfico, pois ela permite uma representação
descritiva dos elementos do diagrama, além de permitir ampliação e redução sem perda de informações.
Respostas: a.
Deve ser utilizada uma imagem vetorial para representar o infográfico, pois ela permite uma representação
descritiva dos elementos do diagrama, além de permitir ampliação e redução sem perda de informações.
b.
Deve ser utilizada uma imagem bitmap grande, a ponto de a ampliação máxima do mecanismo corresponder a um
recorte desta imagem. A visualização do inforgráfico como um todo ocorre por simples diminuição das dimensões
deste na tela.
c. Devem ser utilizadas várias imagens bitmap, cada uma representando um nível de ampliação do infográfico.
d.
Devem ser utilizadas diversas imagens vetoriais, cada uma representando uma possível resolução de tela do
dispositivo do usuário, tornando-as adequadas aos diversos tamanhos de ampliação e redução do infográfico.
e.
Deve ser utilizada uma imagem vetorial para representar o infográfico em seu tamanho máximo. A imagem vetorial
permite uma representação vetorial dos pixels do diagrama, garantindo redução de imagem sem perda de
informações.
Comentário da
resposta:
A imagem vetorial utiliza descrição de formas geométricas, o que contribui para a definição de imagens mais
simples como logotipos e diagramas, bem como a aplicação de transformações de escala que não causam
nenhuma perda de informação. Essa característica escalável é útil no caso de imagens que precisam ser
ampliadas ou reduzidas na web.
Pergunta 9
Segundo Jakob Nielsen, este elemento pode representar um conceito por semelhança, por referência ou por pura arbitrariedade.
Esse último caso é interessante, pois as pessoas reconhecem seu significado por convenção, uma vez que o desenho utilizado não
possui qualquer relação visual com o conceito.
Assinale a alternativa que corresponde ao elemento em questão e a um típico exemplo de representação por arbitrariedade:
Resposta Selecionada: Ícones. Um exemplo seria o ícone de “parar” (stop), que consiste em um simples quadrado.
Respostas: Botões. Um exemplo seria o “call to ac�on”, que chama a atenção do usuário para uma ação arbitrária.
Checkbox. Um exemplo seria o checkbox desmarcado, que indica uma opção arbitrária selecionada.
 Ícones. Um exemplo seria o ícone de “parar” (stop), que consiste em um simples quadrado.
Ícones. Um exemplo seria o ícone de “email”, que consiste em um envelope postal fechado.
Ícones. Um exemplo seria o ícone de “like” do Facebook, que é uma mão fazendo gesto de positivo.
Comentário da
resposta:
Ícones são desenhos que representam conceitos que ajudam o usuário a entender o conteúdo e os demais
elementos de interação de um sistema web. Os exemplos de ícone de “email” e “like” são representações de
conceitos por semelhança e referência, respectivamente. O desenho de um quadrado é bastante arbitrário para
representar o conceito de parar a reprodução de um vídeo ou áudio.
Pergunta 10
Suponha que você deseja criar uma animação em um logotipo que faz uso de formas geométricas básicas, e esta animação faz com
que o logo parta da total transparência até atingir a total opacidade. Este logo animado será aplicado sobre locais diferentes e em
diferentes tamanhos na web. Assinale qual o formato de imagem digital mais adequado para esta finalidade.
Resposta Selecionada: c. PNG
Respostas: a. JPG
b. GIF
c. PNG
d. SVG
e. TIF
Comentário da
resposta:
O SVG é adequado para animações com desenhos simples, de formas geométricas bem definidas, e ele dá suporte
a diferentes modelos de cores, dentre eles o RGBA, o que permitiria a transição entre transparência e opacidade,
além de fundo transparente. E por ser um formato de imagem vetorial, permite escalabilidade sem perda de
qualidade, sendo apropriado para aplicações em diversos tamanhos.
← OK
Sala de Aula Tutoriais
1 em 1 pontos
0 em 1 pontos
0 em 1 pontos
1 em 1 pontos
1 em 1 pontos
1 em 1 pontos
1 em 1 pontos
1 em 1 pontos
1 em 1 pontos
0 em 1 pontos
PAMELA CHRISTY MESQUITA MUNIZ
55
https://senacsp.blackboard.com/webapps/blackboard/execute/courseMain?course_id=_206007_1
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236879_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/execute/courseMain?course_id=_206007_1
https://senacsp.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_206007_1&tool_id=_123_1&tool_type=TOOL&mode=view&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236886_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236885_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_206007_1&tool_id=_145_1&tool_type=TOOL&mode=view&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236895_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236884_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236893_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236889_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236880_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236881_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236882_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236879_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236892_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_206007_1&tool_id=_131_1&tool_type=TOOL&mode=view&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236883_1&mode=reset
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_206007_1&content_id=_9236888_1&mode=reset
https://www.ead.senac.br/
https://senacsp.blackboard.com/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_260_1
https://senacsp.blackboard.com/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_210_1
https://senacsp.blackboard.com/webapps/login/?action=logout