DESIGN PARA WEB

Prévia do material em texto

Usuário RODRIGO NOGUEIRA FURTADO 
Curso GRA0465 DESIGN PARA WEB SIINT201 - 202010.ead-2287.11 
Teste ATIVIDADE 3 (A3) 
Iniciado 21/06/20 20:41 
Enviado 22/06/20 11:00 
Status Completada 
Resultado da tentativa 7 em 10 pontos 
Tempo decorrido 14 horas, 18 minutos 
Resultados exibidos Respostas enviadas, Respostas corretas, Comentários 
Pergunta 1 
1 em 1 pontos 
 
A interface possui elementos que proporciona uma ligação física ou lógica entre dois 
sistemas ou partes de um sistema que não poderiam ser conectados diretamente. No 
mundo web, as pessoas se relacionam com o sistema por meio de interfaces. Sobre os 
princípios que orientam o projeto de interfaces de usuário eficazes, é correto afirmar que: 
Resposta Selecionada: 
Correta a expectativa do usuário com relação à interface deve ser objetivada por esse 
motivo de implementações de telas fáceis e intuitivas. 
Resposta Correta: 
Correta a expectativa do usuário com relação à interface deve ser objetivada por esse 
motivo de implementações de telas fáceis e intuitivas. 
Feedback da resposta: Resposta correta. Interfaces com foco no usuário devem ser 
fáceis de memorização, intuitivas, possuir boa navegabilidade, uma ótima interação, pois 
tem que atender a expectativa do usuário que interage com o sistema. 
Pergunta 2 
1 em 1 pontos 
 
Na construção de layout para um site passa-se primeiro pela concepção conceitual do site, 
entendendo as necessidades dos requisitos, as personas envolvidas, quais princípios são 
os mais adequados para a utilização. Esses princípios fazem uma relação direta do layout e 
os elementos de página que o compõem. 
Marque a alternativa que descreve corretamente a descrição do princípio e a sua relação 
com os elemento de página. 
Resposta Selecionada: 
Correta Princípio da repetição: elementos visuais do design na peça (como cores, formas, 
texturas, linhas e marcadores) podem ajudar a reforçar mensagens importantes. 
Resposta Correta: 
Correta Princípio da repetição: elementos visuais do design na peça (como cores, formas, 
texturas, linhas e marcadores) podem ajudar a reforçar mensagens importantes. 
Feedback da resposta: Resposta correta. A alternativa “b” está correta, pois o 
princípio da repetição: elementos visuais do design na peça (como cores, formas, texturas, 
linhas e marcadores) podem ajudar a reforçar mensagens importantes. 
Pergunta 3 
1 em 1 pontos 
 
O HTML5 evolui com o conceito da web semântica, ou seja, os dados possuem significados 
em si. Isso facilita a busca de informações na Internet pelos sites de busca como Google ou 
Bing. Essa evolução conceitual de elementos do HTML5 gera uma nova concepção de 
desenvolvimento de layout para web. 
 
Nesse contexto, avalie as seguintes asserções e a relação proposta entre elas. 
 
I. Na construção de páginas web utilizando a linguagem HTML5 pode-se, primeiramente, 
pensar em desenvolver para smartphones . 
 
PORQUE 
 
II. Existe um conceito de design chamado mobile first aplicado a web que é o propósito de 
criar soluções para se ajustar em espaços reduzidos, como móveis híbridos. 
Agora, assinale a alternativa correta. 
Resposta Selecionada: 
Correta As duas são proposições verdadeiras, e a segunda é uma justificativa correta da 
primeira. 
Resposta Correta: 
Correta As duas são proposições verdadeiras, e a segunda é uma justificativa correta da 
primeira. 
Feedback da resposta: Resposta correta. A proposição I é verdadeira, pois no 
desenvolvimento de sites web pode-se, primeiramente, pensar em desenvolver para 
smartphones . A proposição II está correta, pois o conceito mobile first aplicado a web foi 
originado da necessidade de criar coisas, como móveis para ajuste a espaços reduzidos. 
Pergunta 4 
1 em 1 pontos 
 
Com a evolução da internet, o uso de dispositivos mobile pelos usuários cresce a cada dia. 
Muito devido a diversidade de dispositivos de acesso à Internet como smartphones e tablets 
. O conceito mobile first , então, tornou-se preferência nos desenvolvimentos webs. 
 
 
Analise as alternativas e marque a opção que corresponde a afirmação verdadeira sobre o 
desenvolvimento de interface web. 
Resposta Selecionada: 
Correta Com o software Photoshop, pode-se criar wireframes, que são protótipos de baixa 
fidelidade, mas permitem ao desenvolvedor ter uma noção de quais elementos a página 
será composta. 
Resposta Correta: 
Correta Com o software Photoshop, pode-se criar wireframes, que são protótipos de baixa 
fidelidade, mas permitem ao desenvolvedor ter uma noção de quais elementos a página 
será composta. 
Feedback da resposta: Resposta correta. A alternativa “b” está correta, pois 
wireframes são protótipos de baixa fidelidade, mas garantem ao desenvolvedor uma 
realidade sobre o layout web. 
Pergunta 5 
0 em 1 pontos 
 
Planejar é elaborar um plano, roteiro a ser desenvolvido para um determinado propósito. No 
desenvolvimento web não é diferente. Um bom site deve ser planejado utilizando as boas 
práticas de desenvolvimento como prototipação. Com relação a prototipar um site web, 
analise as afirmações. 
 
I) A prototipação de um site deve estar em conformidade com os requisitos coletados na 
fase de análise. 
II) Usando combinações de técnicas no photoshop , pode-se criar imagens combinadas 
para melhor estilizar um layout web. 
III) Um wireframe de baixa fidelidade não pode ser construído usando a ferramenta 
photoshop , pois esta somente trabalha com imagens preenchidas e não somente linhas. 
Assinale a opção que corresponde às afirmações corretas. 
Resposta Selecionada: 
Incorreta I e III, apenas. 
Resposta Correta: 
Correta I e II, apenas. 
Feedback da resposta: Sua resposta está incorreta. A alternativa está incorreta, já 
que a afirmativa I está correta, pois a prototipação de um site deve estar em conformidade 
com os requisitos coletados na fase de análise. A II está correta, pois pode-se combinar 
diversas imagens (mesclar) para criar uma terceira imagem usando photoshop . A III está 
incorreta, pois o photoshop trabalha qualquer recurso com relação a imagem, com somente 
linhas, formas preenchidas, imagens pixeladas etc. 
Pergunta 6 
0 em 1 pontos 
 
Acessibilidade na Web significa que pessoas com deficiências podem perceber, entender, 
navegar e interagir, além de poder contribuir para a web. As novas Diretrizes de 
Acessibilidade para o Conteúdo da Web (WCAG 2.0) especifica quatro princípios de 
acessibilidade: percepção, robustez, operabilidade e compreensão. 
 
Nesse contexto, avalie as seguintes asserções e a relação proposta entre elas. 
 
I. O site deve ser robusto, pois a informação e operação da interface de usuário têm de ser 
compreensíveis. 
 
PORQUE 
 
II. O uso de folha de estilo proporciona maior controle e domínio sobre as páginas criadas e 
redução do tempo de transferência de páginas. 
 
Agora, assinale a alternativa correta. 
Resposta Selecionada: 
Incorreta As duas são proposições verdadeiras, mas a segunda não é uma justificativa 
correta da primeira. 
Resposta Correta: 
Correta A primeira é uma proposição falsa, e a segunda, verdadeira. 
Feedback da resposta: Sua resposta está incorreta. A alternativa está incorreta, já 
que a proposição I é falsa, pois o princípio de robustez diz que o conteúdo tem de ser 
robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do 
usuário, incluindo tecnologias assistivas. A II é verdadeira, pois o uso de CSS gera maior 
controle e domínio sobre as páginas criadas e redução do tempo de transferência de 
páginas. 
Pergunta 7 
1 em 1 pontos 
 
Um editor de imagem pode ser usado para desenvolver layouts para sistema Web. Existem 
vários editores de imagem no mercado, mas o photoshop , por sua diversidade de funções, 
está entre os mais utilizados pelos web designers . Analise as afirmativas sobre a 
ferramenta photoshop como recurso de criação de layout para uma página web. 
 
I) O photoshop possui um menu de ajustes de cores da imagem como o Hue/Saturation que 
trabalha matiz e saturaçãode cores de uma imagem. 
II) Há possibilidade de criar uma imagem utilizando cada parte da imagem em uma camada 
aplicando em qualquer camada selecionada a edição de cores por meio das funcionalidades 
do photoshop. 
III) A ferramenta varinha máquina do photoshop seleciona áreas de pixels semelhantes e 
torna-se um excelente recurso de seleção de áreas em uma imagem. 
 
Assinale a opção que corresponde às afirmações corretas. 
Resposta Selecionada: 
Correta I, II e III. 
Resposta Correta: 
Correta I, II e III. 
Feedback da resposta: Resposta correta. A afirmativa I está correta, pois saturação e 
matiz podem ser realçadas ou manipuladas no menu de ajustes ( hue/saturation ). A II está 
correta, pois um recurso do photoshop é a subdivisão em camadas e individualmente 
podem ser editadas. A III está correta, pois o photoshop possui diversas ferramentas de 
seleção de área de imagem, mas a varinha seleciona áreas de pixels semelhantes. 
Pergunta 8 
1 em 1 pontos 
 
Na empresa Adobe, novas versões do photoshop apresentam melhorias de usabilidade, por 
exemplo, definir ou mover ponto de referência para uma transformação. Com essa 
ferramenta, ao transformar itens, pode-se movê-los mais facilmente na tela. 
 
Analise as afirmativas relacionadas ao uso da ferramenta photoshop para o 
desenvolvimento de layouts . 
 
I) O painel de layers possui opções com blending option e agrupamento de camadas. 
II) O atalho ctrl+space preenche uma área selecionada com a cor de background . 
III) A ferramenta carimbo faz clonagem de uma área selecionada na imagem. 
 
Assinale a opção que corresponde às afirmações corretas. 
Resposta Selecionada: 
Correta I e III, apenas. 
Resposta Correta: 
Correta I e III, apenas. 
Feedback da resposta: Resposta correta. A afirmativa I está correta, pois o painel de 
camada possui diversas funcionalidades, entre elas o blending option e o agrupamento de 
camadas. A II está incorreta, pois a tecla de atalho ctrl+space preenche com a cor de front . 
A III está correta, pois a clonagem da área de imagem é feita com a ferramenta carimbo. 
Pergunta 9 
0 em 1 pontos 
 
Sites responsivos são aqueles que podem ser adaptados a qualquer tipo de tela. Esses 
sites possuem como primícias o uso de folha de estilo para renderização da tela nos 
diversos dispositivos. 
 
Com relação ao trecho apresentado, que faz referência ao uso da folha de estilo para 
prototipação de sites responsivos, analise as afirmativas a seguir. 
 
I) @media only screen and (max-width: 600px) { div.example { display: none; }}. Esconde 
o elemento se a tela for maior que 600px. 
II) @media only screen and (min-width: 601px) { div.example { font-size: 80px; }} Coloca a 
fonte em 80 px para telas superiores ou iguais a 601 aplicados a áreas com seletor 
exemplo. 
III) [class*="col-"] { width: 100%;} @media only screen and (min-width: 768px) { 
 .col-1 {width: 8.33%;}.col-2 {width: 16.66%;} aplica 100% de coluna para smartphones e 
quando o dispositivo for um desktop com tamanho mínimo de tela de 768 px faça a largura 
da coluna proporcional a 8.33% e 16.66%. 
 
Assinale a opção que corresponde às afirmações corretas. 
Resposta Selecionada: 
Incorreta I e III, apenas. 
Resposta Correta: 
Correta II e III, apenas. 
Feedback da resposta: Sua resposta está incorreta. A alternativa está incorreta, já 
que a afirmativa I está incorreta, pois o código CSS aplica formatação para telas no 
máximo de 600 pixels, ou seja, telas inferiores a 600 px. A II está correta, pois a folha de 
estilo será aplicada a telas com no mínimo de largura de 601 pixels e somente a áreas com 
seletor chamado “.exemplo”. A II está correta, pois a primeira regra destina-se a colunas 
para smartphones e quando o dispositivo for um desktop com tamanho mínimo de tela de 
768 px faça a largura da coluna proporcional a 8.33% e 16.66%. 
Pergunta 10 
1 em 1 pontos 
 
Segundo Miletto e Bertagnolli (2014, p. 49), “no planejamento de um site web deve-se 
priorizar o conceito de usabilidade, ou seja, focar na prioridade do usuário. Há técnicas para 
posicionamento e distribuição dos elementos em um layout de página”. 
 
MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software II : Introdução ao 
desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014, p. 
49. 
 
 
Nesse contexto, avalie as seguintes asserções e a relação proposta entre elas. 
 
I. Um desenvolvedor web pode fazer uso de divisão da largura da tela web em três partes 
ou usar divisões menores para o posicionamento dos elementos de composição do layout . 
 
PORQUE 
 
II. Faz uso de técnicas como a divisão de três partes chamadas de “regra dos terços (1/3)” e 
a regra de divisão de partes menores chamada de Grid (Grelhas), ambas determinadas pelo 
tamanho da mídia. 
 
Agora, assinale a alternativa correta. 
Resposta Selecionada: 
Correta As duas são proposições verdadeiras, e a segunda é uma justificativa correta da 
primeira. 
Resposta Correta: 
Correta As duas são proposições verdadeiras, e a segunda é uma justificativa correta da 
primeira. 
Feedback da resposta: Resposta correta. A proposição I está correta, pois o 
desenvolvedor pode usar técnicas para melhor distribuir os elementos na página, entre elas 
dividindo a tela em 3 partes ou em partes menores. A proposição II está correta, pois a 
divisão de três partes é chamada de regra dos terços (1/3) e a divisão de áreas menores de 
grid system (sistema de grid ). Ambas dependem do tipo de mídia.