Baixe o app para aproveitar ainda mais
Prévia do material em texto
DESIGN PARA WEB 4º PERÍODO exercícios das aulas AULA 01 1. Qual a importância do design responsivo para o desenvolvimento de interfaces web de qualidade? Para que o conteúdo do site se apresente coerente e compatível (adaptado) no dispositivo usado pelo usuário. Independentemente de o uso ser num desktop, notebook, ultrabook, tablet ou smartphone, a interface deve ser proporcionalmente a mesma. Tudo isso sem que o desenvolvedor tenha que criar um website para cada dispositivo. Além disso, o Google desenvolveu um algoritmo, chamado de Page Layout, que faz o ranqueamento dos websites nas buscas orgânicas. Sites que não forem adaptados para dispositivos móveis terão pior ranqueamento 2. Qual a finalidade da abordagem denominada Mobile First? Criar o website, priorizando a experiência dos usuários de celular, com o intuito principal de melhorar a experiência desses usuários móveis em seu site. O objetivo é planejar e criar a interface para as menores telas possíveis para, então, adaptá-las às maiores — e não o contrário, como costumava ocorrer até agora. A ideia é chegar no conteúdo mínimo e necessário. 3. Correlacione a era web com as características corretas: Web 1.0 – Primeira geração; basicamente o usuário consultava informações, postadas por empresas e especialistas. Web 2.0 – Segunda geração, caracterizada pela interação e colaboração dos usuários, especialmente em rede sociais. Web 3.0 – Terceira geração, na qual os usuários recebem informações contextualizadas. Web 4.0 – Quarta geração, a web inteligente, em que aplicações e equipamentos em rede tomam decisões, sem interferência do usuário. 4. Em qual a geração web (1.0, 2.0, 3.0, 4.0) as propagandas são orientadas ao usuário, ou seja, personalizadas e contextualizadas? A Web 3.0 é dita semântica, justamente por saber encontrar sentido (semântico) de determinados interesses dos usuários. 5. Relacione considerando os profissionais envolvidos no webdesign e suas respectivas atribuições: O gerente do projeto (a) integra a equipe e cliente, atuando como facilitador. O arquiteto da informação (b) elabora protótipos das funcionalidades e especificações ao pessoal de programação (mapa do site, wireframes e navegabilidade). O web designer (c) cria o projeto estético e funcional das interfaces web. Desenvolvedor front-end (d): fundamental conhecer HTML, CSS e Javascript. Desenvolvedor back-end (e): responsável pela porção da aplicação, que roda nos servidores. AULA 02 1. Todos os itens a seguir devem estar presentes no briefing de um website, exceto: a) Limite de verba para o desenvolvimento e implantação do website. b) Limite máximo de tempo. c) Dados da empresa. d) Dados da concorrência. e) Dados do setor de RH da empresa, com folha de ponto.✔ ✔ ✔ ✔ ✔ ✔ ✔ 2. Avalie as assertivas a seguir: I. O briefing é um instrumento de registro de dados relevantes de um projeto. II. O briefing é realizado no início do projeto. III. O briefing ajuda no planejamento e pode ser útil à toda a equipe como fonte de consulta. IV. O briefing também pode ser realizado no final do projeto. Com base em sua análise das assertivas, assinale a única opção correta. a) Apenas I, II e III ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Apenas I e III c) Apenas I d) Apenas II e III. e) Apenas I, II e IV. 3. Qual a importância de declararmos o que não faz parte do projeto? Deve ficar claro, além do que o sistema fará, o que o sistema não fará, alertando que aquele ponto está fora do escopo do sistema, para não haver problema futuro com o cliente. Isso é muito útil quando sistemas precisam ser integrados a outros (existentes ou não). 5. Assinale a única opção verdadeira. a) Regras de negócio são absolutamente dependentes da implementação de tecnologia. b) O briefing deve contar com um orçamento detalhado, observando mês a mês o desencaixe de capital. c) A necessidade de determinada funcionalidade ter rápido processamento (incremento de performance) é uma regra de negócio. d) A principal finalidade do briefing é ser um documento inicial que concentre dados e informações relevantes do projeto de website, visando dentre outras coisas comunicar a equipe e demais interessados.✔ ✔ ✔ ✔ ✔ ✔ ✔ e) A participação do cliente na elaboração do briefing é irrelevante e dispensável. AULA 03 1. Acesse um site de seu interesse, digitando a URL em seu navegador e, depois, com o botão esquerdo do mouse, clique na opção “exibir código fonte da página” e tente identificar o uso de folhas de estilo CSS. Por exemplo, clique www.estacio.br ou yduqs.com.br. ● <link rel="stylesheet" type="text/css" href="main.css"> ● body { margin: 0; background: #fff; color: #333; … } ● <style rel="stylesheet" type="text/css"> @import url("fontes.css"); </style> 2. São componentes básicos de um website, exceto: a) Logotipo. b) Bloco de Navegação. c) Rodapé. d) Grid com dados de uma tabela do banco. ✔ ✔ ✔ ✔ ✔ ✔ ✔ 3. Avalie as assertivas a seguir: I. HTML é uma linguagem de script que visa criar rotinas de acesso ao sistema operacional; II. CSS é uma linguagem de apresentação;✔ ✔ ✔ ✔ ✔ ✔ ✔ III. Javascript é uma linguagem de marcação; IV. A última versão do HTML é a 5, que traz consigo CSS3 e Java5. Com base em sua análise das assertivas, assinale a única opção correta. a) Apenas II. b) Apenas I e III. c) Apenas I. d) Apenas II e III. e) Apenas I, II e IV. 4. Qual a utilidade de um espaço em branco em uma página web? Criar separação entre os elementos da página, evitando excesso de informação e visual confuso. Compreende toda a área do site não preenchida. 5. Abaixo, são justificativas para um eficiente sistema de navegação exceto: a) Fornecer acesso à informação. b) Mostrar a localização em um site. c) Mostrar o assunto de um site. d) Refletir a marca. e) Apresentar o conteúdo correto.✔ ✔ ✔ ✔ ✔ ✔ ✔ AULA 04 1. No que se refere às justificativas do projeto, avalie as assertivas a seguir: I. Deve-se declarar o problema a ser resolvido, mas sem descrever os benefícios; II. Apresentar números, como valores das receitas provenientesdo resultado do projeto, de forma a sensibilizar, especialmente, o patrocinador do projeto; Esclarecer os motivos das atividades e investimentos necessários. Com base em sua análise, assinale a única opção que apresenta a(s) assertiva(s) correta(s): a) Apenas II. b) I e III. c) I e II. d) II e III. 2. No que tange aos requisitos funcionais e não funcionais, avalie as assertivas a seguir: I. Os funcionais descrevem as funcionalidades que o sistema precisa ter para atender às demandas de seus usuários. Um exemplo seria: Toda venda em cartão acima de R$ 200,00 pode ser paga em 3x sem juros; II. Os requisitos não funcionais descrevem propriedades de uma única e exclusiva funcionalidade; III. Desempenho e usabilidade são duas categorias de classificação de requisitos não funcionais; A execução de determinada funcionalidade em uma quantidade inferior de segundos refere-se a um requisito funcional de qualidade. Com base em sua análise das assertivas, assinale a única opção correta. a) Apenas III.✔ ✔ ✔ ✔ ✔ ✔ ✔ b) I e III. c) Apenas I. d) II e III. e) Apenas I, II e IV. 3. Considere o projeto de um website para educar financeiramente as pessoas, que envolve desde investimentos tradicionais de renda fixa até renda variável e investimentos estruturados. O foco é ensinar a vender a assinatura do serviço em dois planos: O básico, custando 50,00, no qual o usuário tem acesso ao conteúdo e duas conversas de 20 minutos, ao mês, via chat com especialistas. O plano avançado oferece o que o básico disponibiliza, sendo que, ao invés de duas conversas via chat, são 10 de 30 minutos ao mês. Estima-se um custo de R$ 50.000,00 para o desenvolvimento do website. E, mensalmente, um custo de R$ 10.000 para os conteúdos técnicos a serem inseridos. Elabore a justificativa do projeto e mostre ao patrocinador que vale a pena investir esses R$ 50.000,00 iniciais e os R$ 10.000,00 mensais por 3 meses, pois considera-se que, a partir do 3º mês, as receitas permitirão que se pague os custos mensais. TENDO EM VISTA A GARANTIA DO RETORNO DO INVESTIMENTO EM CURTO PRAZO É BASTANTE SEGURO A APLICAÇÃO DO VALOR ESTIMADO. 4. Sobre a pesquisa visual, quais dos itens abaixo não devem ser considerados: a) Tipografia. b) Cores. c) Arquitetura da informação. d) Identificação do público-alvo.✔ ✔ ✔ ✔ ✔ ✔ ✔ e) Formas. 5. O ________ direciona o desenvolvimento de uma interface que busque atingir o foco do site, valorizando o conteúdo oferecido e compartilhado. Além do enfoque de criação e edição do conteúdo do website, mostra-se útil como princípio que conduz a experiência do usuário. Assinale a única opção que completa a frase acima: a) planejamento b) projeto de interação com usuário c) objetivo d) Engajamento e) conceito editorial✔ ✔ ✔ ✔ ✔ ✔ ✔ AULA 05 1. No que se refere ao design da interação, avalie as assertivas a seguir I. Estuda a relação usuário-sistema, objetivando entregar interatividade. II. Tem por finalidade manter a atenção do usuário no website. III. Foca em sites com boa usabilidade, legibilidade e estética, dentre outros fatores. Com base em sua análise, assinale a única opção que apresenta as assertivas corretas: a) Apenas II. b) I e III. c) Apenas III. d) I e II. e) I, II e III.✔ ✔ ✔ ✔ ✔ ✔ ✔ 2. No que tange ao conceito de usabilidade, avalie as assertivas a seguir: I. Mede a qualidade da interface, conjugando três e apenas três atributos: Facilidade de aprendizado, produtividade e satisfação subjetiva do usuário. II. A interface com má usabilidade deve evitar que o usuário cometa erros. Mas, caso o erro de usabilidade aconteça, o website deve guiar o usuário na solução. III. A interface com boa usabilidade deve permitir que o usuário relembre rapidamente como usar o site após algum tempo sem uso. IV. Usabilidade é o mesmo que capacidade interativa do usuário. Com base em sua análise das assertivas, assinale a única opção correta. a) Apenas III.✔ ✔ ✔ ✔ ✔ ✔ ✔ b) I e III. c) Apenas I. d) II e III. e) I, II e IV. I. F: Conjuga cinco atributos. Além desses, devemos considerar: Memorabilidade e prevenção de erros. II. F: A interface com boa usabilidade deve evitar que o usuário cometa erros. Mas, caso o erro de usabilidade aconteça, o website deve guiar o usuário na solução. A interface com boa usabilidade deve permitir que o usuário relembre rapidamente como usar o site após algum tempo sem uso. III. V: É o atributo da prevenção de erros. IV. F: Usabilidade é uma propriedade da interface e não do usuário. 3. Como se chama o processo que organiza os elementos do website, favorecendo a experiência do usuário e ajudando-o a localizar o que precisa? a) Mapa do site. b) Wireframe. c) Arquitetura da informação.✔ ✔ ✔ ✔ ✔ ✔ ✔ d) Usabilidade. e) Design da interação. OBS: A arquitetura da informação é o processo cujo foco é projetar um website, no qual a informação possa ser localizada rapidamente, permitindo ao internauta saber onde se encontra no site e para onde precisa ir. 4. Qual o tipo de wireframe adequado nos momentos iniciais para o designer desenvolver melhor as ideias da interação, sem muita fidelidade à realidade? a) Básico. ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Anotado. c) Fluxo de usuário. d) Interativo. e) Degradativo. 5. O ___________, útil em websites grandes e complexos, é uma estrutura hierárquica contendo todas as suas páginas e como são acessadas pelo sistema de navegação. Assinale a única opção que completa a frase acima: a) Wireframe. b) Design da interação. c) Mapa da mina. d) Plano de interface. e) Mapa do site. ✔ ✔ ✔ ✔ ✔ ✔ ✔ AULA 06 1. No que se refere aos dois grandes grupos de avaliação da usabilidade de websites, avalie as assertivas a seguir: I. Os métodos de inspeção demandam avaliadores, mas não demandam usuários. II. Os métodos de testes de usabilidade não demandam interface implementada e, por isso, podem ser usados nas fases iniciais dos projetos de websites. III. Avalição Heurística é um dos métodos de testes de usabilidade. Com base em sua análise, assinale a única opção queapresenta apenas as assertivas corretas: a) I, II e III. b) Apenas III. c) II e III. d) I e II. e) Apenas I. ✔ ✔ ✔ ✔ ✔ ✔ ✔ I. V, como não demandam interface implementada, os usuários não são demandados. II. F, os métodos de testes demandam interface implementada e, por isso, são usados nas fases finais do projeto do website, preferencialmente depois de pronto. III. F, é um dos métodos de inspeção de usabilidade. 2. Uma das heurísticas propostas pelo método de inspeção de Jacob Nielsen, a Avaliação Heurística, diz que: “Usuário deve ser informado, a todo instante, do que está acontecendo no website”. De qual heurística estamos falando? a) Visibilidade do status do sistema. ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Compatibilidade entre sistema e mundo real. c) Controle e liberdade do usuário. d) Reconhecimento ao invés de lembrança. e) Estética e design minimalista. 3. Como se chama a heurística que preconiza a máxima “mais é menos”? a) Estética e design minimalista. ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Compatibilidade entre sistema e mundo real. c) Controle e liberdade do usuário. d) Reconhecimento ao invés de lembrança. e) Visibilidade do status do sistema. 4. Por que os websites devem ser desenvolvidos considerando o Design Universal? O conceito de Desenho Universal tem por objetivo a definição de produtos (website) e ambientes que possam ser usados por todos (universal) em sua extensão superlativa, sem precisar de qualquer adaptação para pessoas deficientes. Ou seja, é um conceito que permite a inclusão digital, estendendo o website a todas as pessoas. 5. Por que o design de um website deve considerar o design responsivo nos dias de hoje? Para que o layout seja adaptável aos diferentes tamanhos de tela e resolução de dispositivos, em função do enorme crescimento do uso de smartphones e tablets. AULA 07 1.No que se refere ao conceito e benefícios da elaboração de wireframes, avalie as assertivas a seguir: Os wireframes são protótipos de baixa fidelidade usados nos momentos iniciais do projeto de design, para validar as ideias. Wireframes podem ser elaborados à mão (papel e caneta) ou por software. Nos momentos iniciais, a mão é uma boa opção pois, se a ideia não agradar, basta amassar o papel e começar de novo. Wireframe é o primeiro passo para criarmos interfaces com boa usabilidade. Wireframe não é uma boa ferramenta para se comunicar com usuários. Com base em sua análise, assinale a opção que apresenta as assertivas corretas: a) Apenas I. b) Apenas III. c) II e III. d) I e II. e) I, II e III. ✔ ✔ ✔ ✔ ✔ ✔ ✔ 2. A versão inicial do wireframe contém os principais aspectos do design. Deve ser simples e o mais minimalista possível, de forma que os membros da equipe de desenvolvimento do produto possam dialogar e discutir seus elementos centrais. Os usuários também podem participar nessa fase inicial, e a simplicidade deve permitir que se concentrem no layout e não se distraiam com elementos visuais, cores e outros não relevantes para o atual momento. Contém as janelas, o fluxo entre elas, os elementos de cada uma e como esses elementos se relacionam. Assinale a opção errada sobre o contexto de elaboração da versão inicial de wireframes: a) Preocupação de como será cada elemento do layout. ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Deve conter o fluxo entre as janelas do website. c) Deve conter os principais elementos de cada janela do website. d) Deve conter a relação entre as janelas do website. e) Não deve conter detalhes de conteúdo. 3. Estudamos um procedimento de quatro passos para elaborar o wireframe inicial. Assinale a opção que não consta desse procedimento: a) Selecione as cores adequadas. ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Conheça o fluxo do usuário. c) Organize o wireframe. d) Selecione os elementos. e) Inspire-se e busque referências. 4. Avalie as assertivas a seguir no que se refere ao protótipo de alta fidelidade: Deve, preferencialmente, ser elaborado antes dos wireframes. Ajudam a testar a usabilidade do produto, já que, com o wireframe, é possível realizar a avaliação heurística. Colocam o usuário no centro do processo de desenvolvimento. É totalmente dispensável, já que a elaboração do wireframe tem os mesmos propósitos. Com base em sua análise, assinale a opção que apresenta as assertivas corretas: a) Apenas I. b) Apenas III. c) I, II e III. d) I e II. e) II e III. ✔ ✔ ✔ ✔ ✔ ✔ ✔ 5. Comente a frase a seguir: Cabe ressaltar que o processo de prototipação não é sequencial e, sim, cíclico; logo, sempre pode haver mudanças. A técnica de prototipagem visa a relação custo-benefício e insere a experiência do usuário no centro do processo. AULA 08 1. Avalie as assertivas abaixo e assinale a opção que corretamente informa o princípio de design em questão: I Possui duas finalidades em conjunto: Criar interesse na página e possibilitar melhor organização. II As formas de intensificar esse princípio são: Espessura das linhas, das cores, dos espaços, dentre outros. III Uma das máximas desse princípio diz: Se os elementos não forem exatamente iguais, faça-os serem bem diferentes. Estamos falando de qual princípio de design? a) Afastamento. b) Proximidade. ✔ ✔ ✔ ✔ ✔ ✔ ✔ c) Alinhamento. d) Repetição. e) Contraste. 3. Relacione as duas colunas apresentadas: Princípio de design e Características (podem existir princípios sem correlação): 1. Proximidade – b. Itens relacionados devem estar próximos, como uma unidade. 2. Contraste – d. Em geral, é o atrativo mais relevante da página, sendo a primeira percepção do usuário. 3. Repetição – a. Poderosa maneira de ser consistente. Ajuda a aumentar a sensação de reconhecimento do usuário. 4. Alinhamento - c. Os elementos precisam ter conexão visual com os demais. 5. Afastamento – Sem associação, pois esse princípio não existe. 4. Avalie as assertivas a seguir no que se refere ao protótipo de alta fidelidade: I - Cores frias têm associação com o gelo, a água e a lua. II - As cores frias transmitem sensação de frio. São elas: Amarelo, laranja e vermelho. III - As cores quentes transmitem a sensação de calor,estando associadas ao sol, ao fogo e ao sangue, denotando vivacidade, movimento e dinamismo. IV - As cores quentes são: Azul, violeta (roxo ou púrpura) e verde. Com base em sua análise, assinale a opção que apresenta as assertivas corretas, indicando verdadeiro (V) ou falso (F): a) Apenas I. b) Apenas III. c) I, II e III. d) I e II. e) I e III.✔ ✔ ✔ ✔ ✔ ✔ ✔ Cores frias têm associação com o gelo, a água e a lua. -> V. As cores frias transmitem sensação de frio. São elas: Amarelo, laranja e vermelho -> F. As cores frias são azul, violeta (roxo ou púrpura) e verde. As cores quentes transmitem a sensação de calor, estando associadas ao sol, ao fogo e ao sangue, denotando vivacidade, movimento e dinamismo. -> V. As cores quentes são: Azul, violeta (roxo ou púrpura) e verde -> F. As cores quentes são: Amarelo, laranja e vermelho. 5. Relacione as duas colunas apresentadas: Cor e sensações que transmitem ou provocam (podem existir cores sem correlação): 1. Azul - d. Confiabilidade, seriedade, profissionalismo. 2. Vermelho - c. Urgência (correção), entusiasmo, juventude, coragem. 3. Roxo - b. Criatividade, imaginação, luxo, realeza. 4. Laranja - a. Confiabilidade, alegria, acolhimento, amizade. 4. Alinhamento - c. Os elementos precisam ter conexão visual com os demais. 5. Verde – sem associação. AULA 09 1.Avalie as assertivas abaixo no que se refere ao conceito e uso de tipografia na web. A tipografia permite que o internauta tenha uma boa experiência de navegação independentemente do nível de sua destreza técnica. A tipografia avalia todo o conteúdo textual da página, considerando: contrastes, comprimento, tamanho, hierarquia (títulos, subtítulo, corpo e rodapé), legibilidade, espaçamento, conforto da leitura e estrutura final do texto. III. Os elementos de um website possuem uma relação que pode ser classificada de duas formas: Concordante e conflitante. Assinale a única alternativa que apresenta as assertivas corretas: a) I, II e III. b) Apenas I. c) I e III. d) II e III. e) I e II. ✔ ✔ ✔ ✔ ✔ ✔ ✔ 2. Relacione as duas colunas apresentadas: Tipo de contraste e Características. Podem existir tipos de contraste sem correlação: Tamanho – e) Letra maior x Letra menor. Peso – c) Refere-se à espessura de seus traços. Estrutura – a) É a forma como a fonte é construída Forma – b) Refere-se ao contorno da letra. Direção – d) Inclinação para cima é positivo. Para baixo, é negativo. 3. Avalie as assertivas abaixo referentes aos formatos de arquivo mais adequados para a web. I. Arquivos JPEG devem ser usados para imagens animadas. II. Arquivos PNG geram imagens com mais qualidade e tamanho maior. III. Arquivos GIF tem apenas 256 cores. Assinale a alternativa que contém as assertivas corretas: a) I, II e III. b) I e II. c) I e III. d) Apenas III. e) II e III. ✔ ✔ ✔ ✔ ✔ ✔ ✔ 4. Temos duas opções para compactação de arquivos, com perda e sem perda. No que se refere à compactação com perda, assinale a opção correta: a) Degrada a imagem. ✔ ✔ ✔ ✔ ✔ ✔ ✔ b) Não reduz a qualidade da imagem. c) Imagens são descompactadas antes da exibição. d) Usa filtro que comprime os dados. e) Gera arquivos mais pesados. 5. No que se refere aos ícones na web, avalie as assertivas a seguir: I. SVG é a junção dos termos em inglês Scalable Vector Graphics. II. São gráficos vetoriais escaláveis, editáveis, com perda de qualidade e um formato aberto e mantido pela W3C. III. O SGV é baseado em XML. IV. Os navegadores modernos suportam SVG. Com base na sua análise, assinale a alternativa que apresenta as assertivas corretas: a) I, II, III e IV. b) I e II e V. c) I e III. d) III e IV. e) I, III e IV.✔ ✔ ✔ ✔ ✔ ✔ ✔ AULA 10 1. Avalie as assertivas a seguir no que se refere aos conceitos de SEO: I - O objetivo da estratégia de SEO é preparar as páginas do website para serem bem ranqueadas nas buscas realizadas pelos internautas. II - Todo visitante de um website gera lead. III - Boas estratégias de SEO tendem a aumentar os leads e consequentemente novos clientes. Com base em sua análise, assinale a única alternativa que apresenta apenas as assertivas corretas: a) I, II e III b) I e III ✔ ✔ ✔ ✔ ✔ ✔ ✔ c) II e III d) I e III e) III Resposta correta: item b. Vamos analisar cada assertiva. O objetivo da estratégia de SEO é preparar as páginas do website para serem bem ranqueadas nas buscas realizadas pelos internautas. -> Verdade. A ideia é fazer com que o website apareça na primeira página entre os três primeiros resultados da busca do internauta. Todo visitante de um website gera lead. -> Falso. Para que uma visita gere um lead, é preciso que o visitante manifeste interesse e deixe seus dados registrados, em troca de alguma coisa (PDF com conteúdo, curso online grátis etc.). Boas estratégias de SEO tendem a aumentar os leads e consequentemente novos clientes. -> Verdade. 2. Sobre os critérios e características do ranqueamento realizado pelo motor de busca do Google, avalie as assertivas a seguir: I - Os fatores de ranqueamento do Google raramente sofrem alterações. II - O design responsivo tem pouca relevância no ranqueamento do website. III - É fundamental que o resultado da pesquisa apareça na primeira página de resultados, pois 95% dos usuários não pesquisam além dela. Com base em sua análise, assinale a única alternativa que apresenta apenas as assertivas corretas: a) I, II e III b) I e III c) II e III d) I e III e) III ✔ ✔ ✔ ✔ ✔ ✔ ✔
Compartilhar