AO2_ Direção de Artes para Web

Prévia do material em texto

AO2
Entrega 16 de jun de 2021 em 23:59 Pontos 6 Perguntas 10
Disponível 7 de jun de 2021 em 0:00 - 16 de jun de 2021 em 23:59 Limite de tempo Nenhum
Instruções
Este teste não está mais disponível, pois o curso foi concluído.
Histórico de tentativas
Tentativa Tempo Pontuação
MAIS RECENTE Tentativa 1 1.667 minutos 1,2 de 6
Pontuação deste teste: 1,2 de 6
Enviado 8 de jun de 2021 em 16:59
Esta tentativa levou 1.667 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 / 0,6 ptsPergunta 1
Leia o texto a seguir:
A+
A
A-
https://famonline.instructure.com/courses/12610/quizzes/42574/history?version=1
A terceira etapa no desenvolvimento do design web é a criação dos wireframes, os quais são um meio-termo entre
os esboços em papel e caneta e seu primeiro protótipo. Eles ajudam a equipe de desenvolvimento a planejar o
layout e os padrões de interação dos usuários sem distrair com detalhes como cores, tipografia e imagens. A
navegação proposta ao usuário deve ser clara e objetiva, sem a necessidade de cores, sombras ou menus
sofisticados.
Considerando as informações apresentadas, avalie as afirmações a seguir:
I No início do desenvolvimento de uma aplicação web, obter o feedback com um protótipo de alta fidelidade é mais
importante se comparada a pesquisa de padrões de uso e interação em um wireframe.
II Wireframes são rápidos, baratos e, talvez o mais importante, são mutáveis, logo, é possível o desenvolvimento
incremental de acordo com o feedback dos usuários.
III. O desenvolvimento da maquete ou mockup é a etapa seguinte após a aprovação do wireframe, sendo assim uma
representação mais visual do produto. A partir dela, após aprovação, é desenvolvido o protótipo.
É correto o que se afirma em:
 I e III, apenas. Você respondeuVocê respondeu
A+
A
A-
A alternativa está incorreta.
A afirmativa I está incorreta, pois com um wireframe, as pessoas prestam mais atenção à funcionalidade e à
experiência do usuário do que às características estéticas dos elementos na tela. Deste modo, reunir o feedback
com wireframe é mais importante do que a utilização do protótipo no início do desenvolvimento.
A afirmativa II está correta, pois os wireframes podem (e devem) ser alterados à medida que você coleta mais
informações por meio do levantamento de requisitos o usuário ou pelo seu feedback durante a navegação pelo
wireframe.
A afirmativa III está correta, pois após a aprovação do wireframe, é desenvolvida a maquete. Pense em uma
maquete, como pele ou características visuais que reveste o wireframe. Esta é a parte em que você firma suas
decisões visuais testando variações e começa a dar algumas características ao seu produto. Por fim, após
aprovada a maquete, temos o a etapa de desenvolvimento do protótipo, última etapa antes de entregar o design
aos desenvolvedores.
 I, apenas. 
 I, II e III. 
 II e III, apenas. Resposta corretaResposta correta
 I e II, apenas. 
0 / 0,6 ptsPergunta 2
Leia o texto a seguir:
A+
A
A-
O método de avaliação heurística enfatiza a análise de um conjunto de heurísticas, enquanto o método de avaliação
de comunicabilidade investiga problemas na recepção da metamensagem associados a etiquetas de rupturas de
comunicação. Em geral, o avaliador se concentra inicialmente na interpretação dos dados coletados de cada
participante individualmente, buscando respostas às questões específicas definidas no planejamento da avaliação.
Refletindo sobre as heurísticas de usabilidade, avalie as seguintes asserções e a relação proposta entre elas.
I O sistema sempre deve manter os usuários informados sobre o que está acontecendo por causa da heurística da
visibilidade do status.
PORQUE
II O não atendimento das demandas do usuário pela interface diminui significativamente a experiência dele e pode
resultar em frustração.
A respeito dessas asserções, assinale a opção correta:
 A asserção I é uma proposição verdadeira, e a II é uma proposição falsa. 
 A asserção I é uma proposição falsa, e a II é uma proposição verdadeira. 
 As asserções I e II são proposições verdadeiras, mas a II não é uma justificativa correta da I. Você respondeuVocê respondeu
A+
A
A-
A alternativa está incorreta.
A asserção I é verdadeira, pois, de acordo com os princípios do design de interface, durante as interações o usuário
precisa ter um feedback ou comentário de suas ações. Se, ao efetuar o login em um sistema, o usuário não receber
um retorno sobre sua ação (se efetivou ou não), ele ficará frustrado e desmotivado a continuar. Por isso deve
receber o feedback para compreender se a ação (login) foi executada.
A asserção II é verdadeira, pois a interface deve atender as expectativas do usuário. Por exemplo, se o usuário
solicitou “efetuar login”, ele espera ter uma resposta, seja positiva ou negativa. Logo, a asserção II é uma
justificativa correta da asserção I, pois evitar a frustração do usuário com a interface é um motivo para que o
sistema sempre mantenha o usuário informado.
 As asserções I e II são proposições verdadeiras, e a II é uma justificativa correta da I. Resposta corretaResposta correta
 As asserções I e II são ambas proposições falsas. 
0 / 0,6 ptsPergunta 3
Análise com atenção a figura a seguir:
A+
A
A-
 
Na figura, tanto em (a) quanto em (b), temos uma imagem que foi redimensionada e o resultado pode ser observado
a direita de cada uma delas. Após analisar as imagens contida na figura e o resultado do redimensionamento, avalie
as seguintes asserções e a relação proposta entre elas:
I A imagem (a) é um exemplo de imagem vetorial, na qual após ser ampliada não obteve degradação. Este tipo de
imagem é utilizado para fotografias e gráficos para web, diferentemente das imagens raster como em (b), as quais
são ideais para impressão.
PORQUE
A+
A
A-
II Imagens raster, como observamos em (b), perdem alguns detalhes ao ser redimensionada, ocorrendo a chamada
pixelização. Outra característica deste tipo de imagem é o uso do modelo de cor RGB, ideal para imagens digitais
por ter um tipo de mistura aditiva de cores.
A respeito dessas asserções, assinale a opção correta:
 A asserção I é uma proposição verdadeira, e a II é uma proposição falsa. 
 As asserções I e II são proposições verdadeiras, mas a II não é uma justificativa da I. 
 As asserções I e II são ambas proposições falsas. 
 A asserção I é uma proposição falsa, e a II é uma proposição verdadeira. Resposta corretaResposta correta
 As asserções I e II são proposições verdadeiras, e a II é uma justificativa da I. Você respondeuVocê respondeu
A alternativa está incorreta.
A asserção I é uma proposição falsa, pois, apesar da imagem em (a) ser vetorial, ela não é indicada para imagens
gráficas como fotografias e arte para web. Este tipo de imagem é ideal para confecção de logotipos e ilustração
digital.
A asserção II é uma proposição verdadeira, pois as imagens raster utilizam pixel em sua composição. Deste modo,
quando ampliamos a escala deste tipo de imagem, temos a degradação como pode ser visto em (b), o que é
chamado de pixelização. Este tipo de imagem é ideal para fotografias e arte web. Em relação ao modelo de cor, o
ideal para este tipo de imagem é o modelo RGB, pois é adequado apenas para reprodução em telas (monitores,
telas de tablet, celular, entre outros). O RGB é considerado um modelo de cor aditivo que trabalha com 3
componentes de luz, sendo elas vermelha, verde e azul. Para compor uma cor, basta adicionar uma quantidade
específica de cada uma destas luzes. Quando o valor de cada componente é 0, temos o chamado preto puro.
A+
A
A-
0 / 0,6 ptsPergunta 4
Observe com atenção a figura a seguir:
Layout hipotético de uma página web
 
Considerando o layout apresentado, assinale a opção correta.
 
Na figura temos 5 elementos repetindo em cores e realizando uma combinação harmoniosa de cinza, o que caracteriza o
princípio do contrastede cores.
Você respondeuVocê respondeu
A+
A
A-
A alternativa está incorreta, pois o princípio do equilíbrio consiste em distribuir os vários pesos visuais dos objetos
pelo layout, realizando uma combinação harmoniosa entre eles.
O princípio da repetição consiste em repetir elementos (fontes, cores, formas, padrões, entre outros) em todo o
design com o objetivo de apresentar um conteúdo unificado. Logo, se houver muitas fontes (como é o caso do
layout apresentado na figura), será desrespeitado o princípio da repetição. Recomenda-se a usar, no máximo, 3
tipos de fontes e, ainda assim, com muito cuidado.
 
Na figura temos pelo menos 4 fontes, deste modo não há a unidade do conteúdo, desrespeitando o princípio da repetição. 
Resposta corretaResposta correta
 
Na figura está caracterizado o princípio do contraste, uma vez que a o elemento mais importante do site está com um peso
diferente.
 
Na figura temos pelo menos 4 fontes diferentes, cada uma destacando um elemento do design, caracterizando o princípio
do equilíbrio.
 Na figura, ao traçar uma linha ao centro, é possível observar que existe o equilíbrio bilateral entre os componentes. 
0 / 0,6 ptsPergunta 5
Leia o texto a seguir:
A+
A
A-
No mundo do desenvolvimento web, a maioria dos desenvolvedores de back-end se preocupa em criar a lógica real
por trás do aplicativo em que está trabalhando. Frequentemente, os desenvolvedores de front-end criarão uma
interface do usuário e os desenvolvedores de back-end escreverão um código que fará com que tudo funcione.
Deste modo, um desenvolvedor front-end pode criar uma tela em um aplicativo com um botão para pressionar para
obter os dados do cliente. Por outro lado, um desenvolvedor de back-end pode escrever o código que faz esse
botão funcionar, descobrindo quais dados buscar no banco de dados para o cliente apropriado e devolvendo-os ao
front-end, onde é eventualmente exibido.
Considerando o texto apresentado, assinale a opção correta.
 
Tanto desenvolvedores back-end quanto de front-end compartilham das mesmas ferramentas de trabalho, por mais que o
foco seja diferente.
 
A arquitetura 3 camadas consiste em uma camada de aplicação no front-end e nas camadas de apresentação e dados no
back-end.
Você respondeuVocê respondeu
Alternativa incorreta
A arquitetura de três camadas é formada pela camada de apresentação no front-end (por exemplo, html, css,
javascript) e as camadas de aplicação (por exemplo, PHP) e camada de dados (por exemplo, MySQL) no back-end.
A maioria dos sistemas back-end está conectada a algum tipo de banco de dados que armazena os dados para o
aplicativo. Geralmente, é tarefa do desenvolvedor de back-end gravar, ler e processar dados de um banco de dados
ou de outra fonte de dados, portanto, ter habilidades com banco de dados, por exemplo com o SQL, é importante.
 
Uma habilidade importante (mas não necessária) que os desenvolvedores de back-end precisam está relacionada aos
sistemas de banco de dados.
Resposta corretaResposta correta
A+
A
A-
 
O bootstrap acelera o processo de desenvolvimento de aplicativos no back-end, assim como outras ferramentas como Ajax
e AngularJS.
 
Os desenvolvedores de back-end precisam compreender profundamente de HTML e CSS, principalmente questões de
design.
0 / 0,6 ptsPergunta 6
Leia o texto a seguir:
Um layout web eficaz é aquele apresenta o conteúdo importante facilmente acessível para o usuário. Por outro lado,
um layout ruim frustra os usuários, que saem rapidamente do site porque não conseguem encontrar o que
procuram. Deste modo é possível concluir que existe uma forte relação entre o layout e o envolvimento dos usuários
com o site. O desenvolvimento de um layout web eficaz é um processo que exige esforço, tempo e domínio de
técnicas de design.
Qual alternativa indica a ordem correta das etapas de desenvolvimento de um layout web atraente e intuitivo?
 
Coleta de requisitos; Wireframe de baixa fidelidade; Wireframe de alta fidelidade; Desenvolvimento da maquete; Criar
layout inicial.
A+
A
A-
 
Criar layout inicial; Coleta de requisitos; Wireframe de baixa fidelidade; Wireframe de alta fidelidade; Desenvolvimento da
maquete.
 
Wireframe de baixa fidelidade; Coleta de requisitos; Wireframe de alta fidelidade; Criar layout inicial; Desenvolvimento da
maquete.
 
Coleta de requisitos; Criar layout inicial; Wireframe de baixa fidelidade; Wireframe de alta fidelidade; Desenvolvimento da
maquete.
Resposta corretaResposta correta
 
Coleta de requisitos; Criar layout inicial; Desenvolvimento da maquete; Wireframe de baixa fidelidade; Wireframe de alta
fidelidade.
Você respondeuVocê respondeu
A alternativa está incorreta.
A primeira etapa é a coleta de requisitos, onde a equipe reunirá os requisitos da aplicação web que o cliente deseja
que seja desenvolvido, e analisará. É necessário levantar o máximo de informações relevantes nesta etapa. A
segunda etapa é a criação do layout inicial, geralmente é feito um desenho no papel apenas para ilustrar os
principais requisitos levantados. A terceira e a quarta etapa estão relacionadas, respectivamente, ao
desenvolvimento do wireframe de baixa fidelidade (esboço da estrutura da página web, apresentando uma visão
geral) e o wireframe de alta fidelidade (com o conteúdo real que será apresentado na página ou aplicativo web). Por
fim, a quinta etapa é o desenvolvimento da maquete, o qual apresenta uma representação visual completa do
design, sendo possível demonstrar as cores, tipografia, elementos de navegação e outros elementos do da página.
A+
A
A-
0 / 0,6 ptsPergunta 7
Leia seguinte definição, feita por Nielsen Norman Group:
“Os usuários geralmente escolhem as funções do sistema por engano e precisam de uma "saída de emergência"
claramente marcada para deixar o estado indesejado sem ter que passar por um diálogo prolongado. Suporte para
desfazer e refazer.”
Fonte: NIELSEN, J. 10 Usability Heuristics for User Interface Design. Nielsen Norman Group. 24/04/1994
(atualizado dia 15/11/2020). Disponível em: https://www.nngroup.com/articles/ten-usability-heuristics/. Acesso em: 06
de janeiro de 2020. Adaptado.
Considerando a definição heurística citada e o conhecimento adquirido durante os estudos, avalie as afirmações a
seguir:
I A definição acima é da heurística de consistência e padrões, a qual indica que todo sistema deve possibilitar que
usuário cancele uma ação.
II A citação acima é a definição exata da heurística de controle e liberdade do usuário, a qual prevê o sistema com
suporte para desfazer e refazer a ação.
III. A heurística citada trata-se de prevenção de erros, a qual apresenta aos usuários uma opção de confirmação
antes de efetuar uma ação.
IV O Gmail possui um recurso que permite o usuário cancelar o envio de um e-mail já enviado, este recurso é um
exemplo para a heurística destacada no texto.
A+
A
A-
Está correto apenas o que se afirma em:
 I. 
 II. 
 III e IV Você respondeuVocê respondeu
A alternativa está incorreta.
A afirmativa I está incorreta, pois a definição não é da heurística de consistência e padrões, mas sim da heurística
de controle e liberdade.
A afirmativa II está correta, pois a heurística de controle e liberdade permite que o usuário assuma o controle da
aplicação. Deste modo, ele deve ser capaz de refazer, desfazer ou cancelar uma ação.
A afirmativa III está incorreta, pois a definição da citação não é a heurística de prevenção de erros, conforme já foi
dito anteriormente. Apesar disso, na afirmação, a explicação da heurística de prevenção de erros está correta.
A afirmativa IV está correta, pois o recurso que permite o usuário cancelar um e-mail já enviado é um exemplo da
heurística de controle e liberdade. Outro exemplo seria “pular” os anúncios em vídeos do youtube e cancelar uma
instalação de software não desejado.
 II e IV. Resposta corretaResposta correta
 I e IV. 
0 / 0,6 ptsPergunta 8
A+
A
A-
Observe com atenção o layout da figura a seguir:
Layout web com CSS Grid
 Quais os comandosdevem ser implementados nas linhas 17, 18 e 19 para que o layout seja apresentado
conforme apresentado na figura?
A+
A
A-
 Linha 17: grid-row: span 2 / span 5; Linha 18: grid-column: span 2 / span 5; Linha 19: background-color: green. Você respondeuVocê respondeu
A alternativa está incorreta.
Os atributos grid-row e grid-column são utilizados para posicionar os itens e também para realizar a extensão deles
na grid em mais de uma linha (grid-row) e em mais de uma coluna (grid-column). Se traçarmos uma linha imaginária
na grid, notaremos que o item em verde, em relação a sua linha, começa na linha 2 e termina na linha 4. Em relação
a coluna, o item em verde começa na coluna 2 e termina na coluna 5.
 Linha 17: grid-row: 3 / span 3; Linha 18: span 2 / span 5; Linha 19: background-color: green. 
 Linha 17: grid-row: 2 / 4; Linha 18: grid-column: 2 / 5; Linha 19: background-color: green. Resposta corretaResposta correta
 Linha 17: grid-row: 3 / 5; Linha 18: grid-column: 2 / 3; Linha 19: background-color: green. 
 Linha 17: grid-row: span 3 / 5; Linha 18: grid-column: span 2 / 3; Linha 19: background-color: green. 
0,6 / 0,6 ptsPergunta 9
Leia o texto a seguir:
A preocupação com a interação do usuário com o sistema deixa de ser apenas uma teoria e torna-se uma prática
multidisciplinar que se concentra tanto na interação entre o usuário e o dispositivo quanto no design da interface da
aplicação. No desenvolvimento de qualquer aplicação, deve haver uma preocupação com o designer da interface
A+
A
A-
deste sistema, seja para smartphones, tablets, desktops, televisores, entre outros recursos de tecnologia da
informação.
Considerando essas informações apresentadas, analise as afirmativas a seguir:
I A preocupação com segurança e risco deve ser voltada para o servidor da aplicação e não para a interface.
II O princípio do equilíbrio é alcançado pela distribuição simétrica ou assimétrica de textos, imagens e de espaços
em branco no design.
III. Uma página web com peso desigual em ambos os lados é um exemplo de design de equilíbrio assimétrico ou
design desequilibrado.
IV A interface de um sistema interativo se concentra na estética e está preocupada com as preferências do usuário.
Estão corretas apenas as afirmativas:
 II e IV. 
 I e II. 
 I e III. 
 I e IV. 
A+
A
A-
 II e III. Correto!Correto!
A alternativa está correta.
A afirmativa I está incorreta, pois como as interfaces representam sistemas fora do seu controle, seu sistema é
vulnerável a riscos de segurança. Se uma interface não for bem definida ou estiver sujeita a alterações constantes,
seu sistema será afetado. Também existe a ameaça de alguém de fora do seu sistema afetar o desempenho dele –
intencionalmente ou não por meio de ataques.
A afirmativa II está correta, pois o equilíbrio é alcançado não apenas pela distribuição de texto e imagens, mas pela
distribuição do espaço em branco em um design.
A afirmativa III está correta, pois uma página web com peso desigual (descentralizado ou criado com um número
ímpar ou incompatível de elementos díspares) caracteriza o equilíbrio assimétrico. Entretanto, um design assimétrico
não é desequilibrado, ele simplesmente não cria metades de página perfeitamente divididas ou idênticas.
A afirmativa IV está incorreta, pois, apesar do design visual estar preocupado com o valor decorativo do sistema, a
interface do usuário não se concentra apenas na estética, mas também em maximizar a capacidade de resposta, a
eficiência e a acessibilidade.
0,6 / 0,6 ptsPergunta 10
Leia o texto a seguir:
“O protótipo é o início do desenvolvimento concreto do design de uma interface. A partir dele podemos imaginar o
dispositivo que será desenvolvido, qual tipo de matéria-prima pode ser utilizada (hardware), a disposição dos
botões, os componentes e qualquer outro recurso.”
A+
A
A-
Fonte: SOBRAL, W. Design de interfaces. São Paulo: Érica, 2019.
De posse dessas informações apresentadas, analise as asserções a seguir e a relação proposta entre elas:
I O Modelo de Prototipagem deve ser usado quando os requisitos do produto não são claramente entendidos ou são
instáveis.
PORQUE
II Reutilizar protótipo para projetos mais complicados no futuro por parte do desenvolvedor não é possível devido à
especificidade de um protótipo desenvolvido.
A respeito dessas asserções, assinale a opção correta:
 As asserções I e II são proposições verdadeiras, e a II é uma justificativa correta da I. 
 A asserção I é uma proposição falsa, e a II é uma proposição verdadeira. 
 As asserções I e II são proposições verdadeiras, mas a II não é uma justificativa correta da I. 
 A asserção I é uma proposição verdadeira, e a II é uma proposição falsa. Correto!Correto!
A+
A
A-
A asserção I é verdadeira, pois quando o usuário não fornece um número suficiente de requisitos, o desenvolvedor
cria uma interface prototipada, que é desenvolvida com base nos requisitos informados pelo usuário. Como foram
poucos requisitos, então, durante o teste com o protótipo, o usuário vai apontando o que está faltando e, assim,
redefinindo o projeto.
A asserção II é falsa, pois um protótipo, mesmo sendo desenvolvido para um fim bem definido, pode ser
reaproveitado em outros projetos. Considere, por exemplo, a interface de um sistema médico que recebe dados
vindos de um relógio inteligente, o qual envia dados de pressão sanguínea a cada 5 minutos. O protótipo dessa
interface pode ser utilizado para um sistema industrial que monitora a temperatura de uma caldeira a cada 1 minuto.
 As asserções I e II são proposições falsas. 
Pontuação do teste: 1,2 de 6
A+
A
A-