Atividade A2 - Design Digital

Prévia do material em texto

Atividade A2 – Design Digital – Nota 10 
Questão 1 
 
Analise o texto a seguir. 
No desenvolvimento de uma interface para projetos de design digital, a aplicação de formatação de textos e imagens 
é fundamental para manter a identidade visual da página ou da tela. Caso o projeto seja a criação de um aplicativo, 
além da formatação, a aplicação de ajustes se faz necessária para manter um equilíbrio visual do layout. 
Para aplicar os ajustes, existem tags e atributos específicos. A partir do exposto, associe tais tags ou atributos às 
suas características. 
I. bottom 
II. title 
III. <hr> <hr/> 
( ) Alinha com a base mais baixa dos outros elementos da linha que pode ser uma imagem, botões etc. 
( ) Exibe um texto somente quando é mantido o mouse por alguns segundos sobre a imagem; caso os botões da 
página sejam imagens, também pode ser utilizado esse recurso. 
( ) Cria uma linha horizontal como se fosse separador que pode ser utilizado também entre os botões de menu 
horizontal. 
 A partir das relações feitas anteriormente, assinale a alternativa que apresenta a sequência correta. 
(X) I, II, III. 
( ) II, III, I. 
( ) I, III, II. 
( ) III, I, II. 
( ) III, II, I 
Resposta correta: I, II, III. Bottom = alinha com a base mais baixa dos outros elementos da linha que 
pode ser uma imagem, botões etc.; title = exibe um texto somente quando é mantido o mouse por alguns 
segundos sobre a imagem; caso os botões da página sejam imagem, também pode ser utilizado este recurso. 
<hr> <hr/>= cria uma linha horizontal como se fosse separador que pode ser utilizado também entre os 
botões de menu horizontal. 
 
Questão 2 
 
No desenvolvimento de uma página em HTML5, existe a função conhecida como embed que permite incorporar 
informações e conteúdo de páginas ou sistema de terceiros em um projeto digital. Esse conteúdo pode ser 
informações de redes sociais e até APIs, que aumentam o leque de possibilidades de desenvolver páginas com 
diversos conteúdos e recursos. 
Nesse sentido, assinale a alternativa que indique qual é a definição de APIs. 
( ) Âncora para Informação que permite ancorar (linkar) uma informação de outra página HTML. 
( ) Arquivos para Informática que permite utilizar arquivos de dados em uma página HTML. 
( ) Artigos para Informação que permitem utilizar artigos de outros sites que estão relacionados ao conteúdo do 
projeto. 
(X) Programação que permite utilizar funções de um programa externo em uma página HTML. 
( ) Artes para Interfaces que permitem utilizar artes prontas de outras interfaces em uma página HTML. 
Resposta correta. A alternativa está correta, pois API - Application Programming Interface, Interface de 
Programação de Aplicativos, é um grupo de rotina padrão determinado por um programa, que permite 
utilizar as funções desse programa em uma página ou outros aplicativos, sem ter a necessidade que este 
o programa seja implementado no sistema. 
 
 
Questão 3 
 
Analise o trecho a seguir. 
As imagens estão presentes em praticamente todos os projetos de design, e para projetos de design digital, as 
imagens são formadas por ______; os profissionais que trabalham com desenvolvimento de interface têm a 
necessidade de saber as informações técnicas para utilizá-las de forma correta. 
Assinale a alternativa que preenche corretamente a lacuna. 
( ) gif. 
( ) pdf. 
(X) pixels. 
( ) png. 
( ) jpg. 
Resposta correta. As imagens digitais são formadas por um conjunto de pixels, no qual 1 pixel é o menor 
elemento que pode ser exibido em um dispositivo digital, como monitores, televisores, pulseiras digitais, telas dos 
smartphones e tablets. Esses elementos contêm cor e informação de brilho e iluminação e formam a imagem em 
bitmap. 
 
 
Questão 4 
Leia o texto a seguir. 
Uma página HTML é composta por diversos elementos como o próprio conteúdo, barras ou menu de navegação, 
cabeçalho e rodapé que são organizados e divididos em cada parte que irá compor a interface do projeto digital. 
Esses elementos são formatados conforme suas funções na página. 
 
A respeito da formatação da interface em que podem ser utilizados os códigos HTML, analise as afirmativas a seguir 
e assinale V para a(s) Verdadeira(s) e F para a(s) Falsa(s). 
( ) Para cada parte de uma página em HTML existem várias tags, para facilitar a organização e padronização no 
momento do desenvolvimento. 
( ) O elemento <header>, que é permitido ser inserido no cabeçalho, pode conter não só o título da página, mas 
também outros elementos como um logo. 
( ) Inserindo o logo da empresa no elemento <header>, a marca da empresa é visualizada no lugar da marca dos 
navegadores. 
( ) No elemento <rodape>, pode haver informações de direitos autorais do site, copyright, autor, links relacionados 
ou blocos de navegação. 
Assinale a alternativa que apresenta a sequência correta. 
( ) V, V, F, V. 
( ) V, V, V, V. 
( ) F, V, F, V. 
( ) F, F, F, F. 
(X) V, V, F, F. 
Resposta correta. Para cada divisão, existem diversas tags que organizam e padronizam o desenvolvimento de 
uma página, com a inserção do elemento <header> que, além de conter o título da página, também é insere outros 
elementos, como menu de navegação, campo de buscas e logo. 
 
Questão 5 
Para inserir uma imagem no HTML utiliza-se a tagimg seguido do atributo src, source traduzindo para o português é 
origem; ali deve ser informado o caminho da pasta que em está salvo o arquivo. Outra maneira de inserir uma 
imagem é utilizando o atributo url, caso a imagem já esteja na internet. 
Sobre as configurações de imagens para web, analise as asserções a seguir e a relação proposta entre elas. 
 
 I. Para uma imagem inserida em uma página HTML, que será exibida em um navegador, também é possível mostrar 
alternativas de visualização adicionando o atributo alt. 
 
PORQUE 
 
II. O atributo alt 
em uma página HTML representa alternate text, que exibe um texto alternativo caso não seja possível a imagem ser 
visualizada. 
 
A seguir, assinale a alternativa correta. 
( ) A asserção I é uma proposição verdadeira, e a asserção II é uma proposição falsa. 
(X) As asserções I e II são proposições verdadeiras, e a II é uma justificativa correta da I. 
( ) As asserções I e II são proposições falsas. 
( ) 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. 
Resposta correta. As asserções I e II são verdadeiras, pois o atributo alt, de alternate text, texto alternativo, 
exibe um texto, caso ocorra erros no servidor ou por outros motivos não seja possível carregar a imagem, sendo 
assim, uma justificativa correta da I. 
 
Questão 6 
Analise o texto a seguir. 
 
Em projetos com uma grande quantidade de informações, é importante o desenvolvimento do mapa do site - tanto 
para a equipe de design digital responsável pela interface, quanto para a equipe de desenvolvimento da programação 
e arquitetura da informação - possuir documentos para iniciar o seu trabalho. 
 Para diminuir a possibilidade de erros e minimizar problemas, além de desenvolver o mapa do site, é indicado 
desenvolver outros documentos. A partir do exposto, associe tais documentos às suas características. 
 
I. Wireframe 
II. Modelos 
III. Protótipos 
( ) Ilustração básica da estrutura e componentes de uma página web. 
( ) Na maioria dos casos, aproximam-se ou são idênticos ao design final do projeto. 
( ) Layouts com alguma funcionalidade básica já pronta. 
 
A partir das relações feitas anteriormente, assinale a alternativa que apresenta a sequência correta. 
 
(X) I, II, III. 
( ) III, I, II. 
( ) III, II, I. 
( ) II, III, I. 
( ) II, I, III. 
 
Resposta correta. Ilustração básica da estrutura e componentes de uma página web = Wireframe. Na maioria 
dos casos, aproximam-se ou são idênticos ao design final do projeto = Modelos. Layouts com alguma funcionalidade 
básica já pronta = Protótipos.Questão 7 
 
Analise o trecho a seguir. 
 
Para os profissionais e as empresas que trabalham com desenvolvimento de projetos de design digital que abrangem 
diversas áreas, é recomendável que possuam _______, para apresentar a experiência e a prática que o profissional 
ou a empresa sabe fazer de melhor. 
 
Assinale a alternativa que preenche corretamente a lacuna. 
( ) Twitter. 
( ) Instagram. 
( ) Facebook. 
( ) vídeo. 
(X) https://neilpatel.com/br/blog/o-que-e-portfolio/portfólio. 
Resposta correta. A reunião dos melhores trabalhos desenvolvidos por um profissional ou empresa é um 
https://neilpatel.com/br/blog/o-que-e-portfolio/; é mais do que um currículo, é um espaço para apresentar a 
experiência e prática do que a empresa ou o profissional sabe fazer de melhor. 
 
 
 
Questão 8 
Para produzir layouts de interfaces de projetos de design digital, existem programas, aplicativos e plataformas on-line 
que tornam mais fácil o trabalho do desenvolvedor. Um exemplo é o software Adobe Dreamweaver que permite criar, 
programar e gerenciar sites dinâmicos e responsivos. 
 
Nesse sentido, assinale a alternativa que indique qual é uma das vantagens de utilizar esses softwares ou 
plataformas. 
(X) Não é necessário sempre iniciar do zero escrevendo todos os códigos. 
( ) Não é necessário contratar uma empresa de hospedagem. 
( ) Não é necessário formatar os textos nas páginas em HTML. 
( ) Não é necessário formatar as imagens nas páginas em HTML. 
( ) Não é necessário registrar o site no registro.br para sites terminados em br. 
Resposta correta. Os softwares, aplicativos ou plataformas on-line facilitam o desenvolvimento de layouts web, 
pois não é necessário sempre iniciar do zero, escrevendo todos os códigos, em um programa de texto como o bloco 
de notas. 
 
https://neilpatel.com/br/blog/o-que-e-portfolio/portfólio
https://neilpatel.com/br/blog/o-que-e-portfolio/
Questão 9 
 
Analise o texto a seguir. 
 
Na prática, a criação de convenções com normas e regras simplifica e facilita a organização front-end de um projeto 
de design digital que resulta em uma quantidade menor de tempo para o desenvolvimento, ganhando maior 
produtividade e uma consistência real do trabalho. 
Algumas sugestões de regras podem ser definidas para otimizar a organização front-end, como nome e conteúdo dos 
arquivos de algumas pastas (diretórios) do projeto. 
A partir do exposto, associe tais pastas às características dos arquivos que devem contê-las: 
 
I. components; 
II. services; 
III. scene. 
( ) conter os elementos primários como os buttons. 
( ) conter os elementos que podem ser utilizados em diversas partes do projeto. 
( ) conter os elementos que são necessários para rodar um programa no projeto. 
 
A partir das relações feitas anteriormente, assinale a alternativa que apresenta a sequência correta. 
 
( ) II, III, I. 
(X) I, II, III. 
( ) III, II, I. 
( ) III, I, II. 
( ) II, I, III. 
 
Resposta correta. A pasta que deve conter os elementos primários como os buttons = components. A pasta que 
deve conter os elementos que podem ser utilizados em diversas partes do projeto = services. A pasta que deve 
conter os elementos que são necessários para rodar um programa no projeto = scene. 
 
 
 
Questão 10 
 
Analise a figura a seguir. 
 
 
Fonte: Elaborada pelo autor. 
 
A figura representa como um site poderá ser navegado em um browser (navegador), apresentando a sua forma 
estrutural de maneira visual, como deverá ser desenvolvido o projeto, antes mesmo de iniciar o processo de 
programação dos códigos em HTML ou CSS. 
 
Nesse sentido, assinale a alternativa que indique qual é o nome técnico que representa a figura. 
 
( ) Mapa do site. 
( ) Arquitetura da informação. 
( ) Estrutura analítica de projeto (EAP). 
(X) Wireframe ou diagrama de wireframe. 
( ) Back-end. 
 
Resposta correta. A representação visual da estrutura de como irá funcionar uma tela de um aplicativo ou uma 
página é conhecida como wireframe ou diagrama de wireframe, que deve ser criado no começo do desenvolvimento 
de um projeto, antes de iniciar o processo do design visual e conteúdo.