Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Atividade Unidade 2 - UAM - Design para Web
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
1 - As folhas de estilo são regras aplicadas diretamente no código HTML. Elas servem para estilizar um documento, facilitando o posicionamento dos elementos de página, como textos, imagens, cores, tamanho, dentre outros elementos.
Considere o seguinte trecho de código CSS:
1. .t1, #t2{color:#ff0000}
2. p.t1, p#t2{font-color:#ff0000}
3. p#t1, p.t2{color:#0000ff}
4. p{font-color:#ff0000}
5. #p{font-color:#ff0000}
Com base na análise desse código, analise as afirmativas a seguir.
I - O trecho da linha 1 apresenta formatação para um id de um elemento hierarquicamente abaixo de um elemento t1.
III - O trecho da linha 4 define uma cor de texto (fonte) para um elemento de parágrafo.
III - Existem três seletores de identificação no código: #t1, #t2, #p.
IV- No trecho da linha 2, há um agrupamento de seletores.
Está correto o que se afirmar em:
(x) II, III e IV, apenas
2- A inserção de dado em uma página HTML5 é realizada por meio de formulários. Esses formulários possuem diversos elementos que podem ser organizados por meio do elemento <table> e os seus componentes, como <th>, <td> e <tr>. Entretanto, pode-se refazer o mesmo conceito com folhas de estilo. A figura a seguir apresenta um exemplo de formulário HTML5.
Fonte: rawpixel / 123RF.
Referente ao exposto, assinale a alternativa que descreva a relação do uso de CSS no que tange à <table> seletores com seletores separados por vírgulas (p#t1, p#t2.
Resposta correta:
(x) O uso do CSS é preferível em relação à <table> pelo fato de a manutenção posterior do site web ser dinamizada. O uso de tabelas torna o site dinâmico e menos estático, o que dificulta atualizações, de modo que o CSS e menos estático, dificultando a manutenção.
3- Toda tag HTML apresenta atributos e cada atributo, dependendo da tag, possui valores. Um exemplo de uma tag HTML é a tag de parágrafo (p). Essa tag possui o atributo de alinhamento align e quatro tipos de valores: right, left, center e justify. Esses valores posicionam o texto em relação às suas margens e os atributos também podem ser manipulados por CSS.
A respeito desse assunto, assinale a alternativa que corretamente apresenta a definição sobre os conceitos de folha de estilo.
Resposta Correta:
(X)- As regras CSS em bloco deverão ser declaradas na seção do documento <head> com a tag de estilo denominada <style>.
Comentário da resposta: Resposta correta, pois a formatação CSS em bloco é escrita na seção <head> do documento.
4- As folhas de estilo fazem a estilização de uma página e são aplicadas diretamente ao documento HTML por meio de associação com as tags, como <h1>, <body> ou seletores personalizados com #id ou .class.
Com base no exposto, analise o seguinte código:
<!DOCTYPE html><html> <head> <style> h1 { background-color: lightblue; width: 300px; } </style> </head> <body>
<h1>Informação </h1> <p>Definição da informação. </p> </body></html>
Considerando as informações do trecho do código e o conteúdo estudado, analise as afirmativas a seguir e assinale (V) para a(s) verdadeira(s) e (F) para a(s) falsa(s).
( ) O trecho não apresenta nenhuma tag do novo conceito da semântica web.
( ) A tecnologia da internet faz uso do HTML5, porém, no trecho do código, o documento não está no formato HTML5 e sim XHTML.
( ) O trecho do código apresenta um seletor com especificação de CSS com propriedade para modificar a cor de fundo.
( ) A página está estruturada com CSS incorporada.
Agora, assinale a alternativa que apresenta a sequência correta.
Resposta Correta:
Correta V, F, V, V.
5- Atualmente, o desenvolvimento web é focado no usuário. As páginas desenvolvidas para site web utilizam a linguagem de marcação denominada HTML (HyperText Markup Language) ou, em português, linguagem de marcação de texto. Um dos itens de desenvolvimento é a comunicação com o usuário. Essa comunicação é provida por meio de elementos interativos. A nova versão HTML5 evidencia alguns novos elementos de interação relacionada a formulários.
Considerando o exposto, assinale a alternativa que apresenta os novos atributos de entradas.
Resposta Correta:
(x) Url, email, range, tel, date, week, number, mounth, datetime-local, color. Comentário da resposta: Resposta correta, pois apresenta alguns dos 13 novos tipos de atributos de formulário criados no HTML5.
6- Design para web é um segmento muito multidisciplinar, se comparado aos outros. Para conseguir elaborar um projeto eficaz, atraente e coerente, é preciso saber muito mais do que apenas manipulação de Softwares (ARTY, 2019).
ARTY, D. Saiba os conceitos que um Web Designer precisa ter e consiga um trabalho na área de Web Design. Chief of Design. 2019. Disponível em:https://www.chiefofdesign.com.br/o-que-todo-web-designer-precisa-saber-conceitos-de-web-design/https://www.chiefofdesign.com.br/o-que-todo-web-designer-precisa-saber-conceitos-de-web-design/>. Acesso em: 23 abr. 2019.
A partir do conteúdo estudado a respeito do uso de CSS para a diversidade de dispositivos, assinale a alternativa correta.
Resposta correta:
(X) No conceito de design, o desenvolvedor tem que prestar atenção em usabilidade e iteratividade
7) As folhas de estilos são usadas para estilizar os sites web, bem como
torná-los responsivos, ou seja, capazes de serem visualizados em
todos os dispositivos web. Os códigos CSS são associados às
tags HTML5., folha de estilo, sendo que há três formas de inserção
de código CSS em um documento de linguagem de marcação,
como o HTML5. A partir do conceito de associação de folha de
estilo ao documento Web desenvolvido em HTML5, assinale a
alternativa correta.
Resposta
Selecion
ada:
As folhas de estilos podem ser inseridas
em um documento HTML por meio da
tag link e atributo de referência ao
arquivo CSS href. Esse estilo é
denominado lincado.
Resposta
Correta:
As folhas de estilos podem ser inseridas em
um documento HTML por meio da tag link e
atributo de referência ao arquivo CSS href.
Esse estilo é denominado lincado.
7- Leia o seguinte trecho:
“Web Semântica dá às pessoas a capacidade de criarem repositórios de dados na Web, construírem vocabulários e escreverem regras para interoperarem com esses dados. A linkagem de dados é possível com tecnologias como RDF, SPARQL, OWL, SKOS” (2019, on-line).
WEB Semântica. W3C Brasil. 2019. Disponível em:
<http://www.w3c.br/Padroes/WebSemantica>. Acesso em: 23 abr. 2019.
8- Assim, considerando as informações apresentadas e os conteúdos estudados, analise as definições de regras CSS disponíveis a seguir e relacione-as com as suas respectivas características.
I - Formatação de distanciamento interno de uma imagem e cor de fundo.
II - Texto caixa alta, cor vermelho, sublinhado.
III - Tamanho máximo de tela 768 e uso em notebooks, tablets.
IV - Link sem sublinhado e de cor preta.
I - Formatação de distanciamento interno de uma imagem e cor de fundo.
II - Texto caixa alta, cor vermelho, sublinhado.
III - Tamanho máximo de tela 768 e uso em notebooks, tablets.
IV - Link sem sublinhado e de cor preta.
( ) a :link { color: #000; text-decoration:none}
( ) #{padding: 10; background: #FF0000}
( ) @media screen and (min-width: 768 px) { body { background-color:
lightgreen;} }
( ) #cor { color: #FF0000; text-decoration: underline; text-transform:
uppercase}
A partir das relações feitas anteriormente, assinale a alternativa que
apresenta a sequência correta.
Resposta Selecionada:
IV, I, III,
II.
Resposta Correta:
IV, I, III,
II.
Comentário
da resposta:
Resposta correta, pois a afirmativa I determina um
distanciamento interno (padding) e cor de fundo
(background). Na afirmativa II, tem-se fonte em caixa alta
(text-transform), cor vermelha (color) e sublinhada (text-
decoration). A afirmativa III é um exemplo de uso de media
queries com tamanho 768 e somente para tela (screen). Por
fim, na afirmativa IV, tem-se um seletor de link com cor
(color) e sem sublinhado (text-decoration:none).
I - Formatação de distanciamento interno de uma imagem e cor de fundo.
II - Textocaixa alta, cor vermelho, sublinhado.
III - Tamanho máximo de tela 768 e uso em notebooks, tablets.
IV - Link sem sublinhado e de cor preta.
( ) a :link { color: #000; text-decoration:none}
( ) #{padding: 10; background: #FF0000}
( ) @media screen and (min-width: 768 px) { body { background-color:
lightgreen;} }
( ) #cor { color: #FF0000; text-decoration: underline; text-transform:
uppercase}
A partir das relações feitas anteriormente, assinale a alternativa que
apresenta a sequência correta.
Resposta Correta:
IV, I, III, II.
Comentário da resposta:
Resposta correta, pois a afirmativa I determina um distanciamento interno (padding) e cor de fundo (background). Na afirmativa II, tem-se fonte em caixa alta (text-transform), cor vermelha (color) e sublinhada (text-decoration). A afirmativa III é um exemplo de uso de média queries com tamanho 768 e somente para tela (screen). Por fim, na afirmativa IV, tem-se um seletor de link com cor (color) e sem sublinhado (text-decoration:none).
9- Um usuário passa por processo seletivo de contratação para o cargo de desenvolvedor de site usando HTML5. Porém um dos itens a ser julgado é a capacidade do usuário em entender as novas tags semânticas.
Considerando essas informações e o conteúdo estudado, analise as afirmativas a seguir e assinale (V) para a(s) verdadeira(s) e (F) para a(s) falsa(s).
( ) Semântica web é a nova era da Internet em que os dados possuem significado.
( ) A tecnologia da internet faz uso do HTML5, criado com base nos elementos da linguagem XML.
( ) Uma das novas tags semânticas do HTML é a DIV. Esse elemento determina uma área de inserção de informações, como banners, propagandas etc.
( ) O uso de uma estrutura de página, utilizando elementos com semântica, faz com que o site seja mais indexado.
Agora, assinale a alternativa que apresenta a sequência correta.
Resposta Correta:
(x) V, F, F, V.
Comentário da resposta:
A afirmativa I é verdadeira, pois é justamente na semântica que se verifica o valor ou significado que o dado tem dentro da web. A afirmativa II é falsa, pois as tags HTML5 possuem valor semântico, porém os elementos não são relativos às XML, já que foram criados como elementos no HTML5. A afirmativa III é falsa, pois o elemento DIV é legado do HTML e não possui nenhum valor semântico. A afirmativa IV é verdadeira, pois a semântica dos elementos faz a página ser indexada pelos navegadores de busca, como o google.
10- Jakob Nielsen é considerado o “rei da usabilidade”, o guru da usabilidade da web. Nielsen é um pós-doutor e cofundador do grupo Nielsen Norman Group. Esse grupo é um a empresa relacionada à experiência do usuário (UE X ), que presta consultoria para grandes empresas no mercado mundial no ramo de te c n o log ia relacionada à UserEx . Considerando o trecho anterior e os estudos aprendidos, analise as asserções a seguir e a relação proposta entre elas.
I - As folhas de estilos podem ser usadas como estruturas no documento HTML5. PORQUE
II - Sem aplicação das folhas de estilos, não há como entender o conceito de UserEx.
Resposta Correta:
As asserções I e II são proposições falsas.
Continue navegando
Conteúdos escolhidos para você
40 pág.
20 pág.
Perguntas dessa disciplina
Compartilhar