Exercícios da Aula 09

Prévia do material em texto

Exercícios da Aula 09
Aluno (s):		JONATHAN BATISTA DA SILVA RA: N3916F8
KAREN LORRANE MARTINS RA: N4959D3
Professor: Jair Alarcón	Disciplina: DAW		Periodo:1º
Questão 1. Em CSS, quando é indicado utilizar animations ao invés de transitions?
 R: As animations sao mais indicadas em animações complexas que possuem mais de 2 estados(keyframes)
Questão 2. O estado de uma animação em CSS é denominado:
(A) Animation
(B) Transition
(C) Keyframe 
(D) State
(E) Hover
Questão 3. Em CSS, qual é a vantagem de utilizar transitions ao invés de animations?
R:Transitions sao mais faceis de utilizar.
Questão 4.Na linguagem CSS, existem alguns comandos que possuem os prefixos -webkit-, -moz-, e -o-. Como por exemplo a declaração -webkit-transition: width 2s;no código CSS abaixo:
Qual é o objetivo de utilizar estes prefixos?
R:Para manter a compatibilidade entre o navegador –webkit-para Safar Chome, -moz- para molzila Firefox, eo –o- para oreon 
	
Questão 5. Qual é o comportamento da div com as declaraçõesda questão anterior?
 R: A oiv possui largura padrão de 100px, ao mause por cima (hover)é iniciada a animação com duração de 2sec, suavemente altera a altura para 300px 
Questão 6. Qual é a funcionalidade da propriedade CSS animation-iteration-count?
 R:Controla a quantidade de vezes que a animação sera executada.
Questão 7. O que o código CSS abaixo faz? 
@keyframes exemplo4estados {
 0% {background-color: red;}
 25% {background-color: yellow;} R: Animation
 50% {background-color: blue;}
100% {background-color: green;}
}
Questão 8. Se não for definida o tipo de posição CSS, qual é a posição padrão que segue o fluxo normal da página?
(A) static 
(B) relative
(C) fixed
(D) absolute
(E) sticky
Questão 9.Um elemento posicionado sempre em relação ao viewport, ou seja, sempre aparece no mesmo lugar mesmo se é movimentado o scroll da página, utiliza o posicionamento:
(A) static
(B) relative
(C) fixed 
(D) absolute
(E) sticky
Questão 10.Um elemento posicionado deslocando em relação à sua posição normal, utiliza o posicionamento:
(A) static
(B) relative 
(C) fixed
(D) absolute
(E) sticky
Questão 11. Um elemento ao chegar em determinada posição (normalmente o topo da página) faz com que fique ”travado” na tela ao movimentar o scroll da página, utiliza o posicionamento:
(A) static
(B) relative
(C) fixed
(D) absolute
(E) sticky
Questão 12. Qual é o comportamento da posição do botão no código abaixo?
<style>
.meu-botao {
position: sticky; R: Posição fixa somente se tiver a 30px top.
 top: 30px;
}
</style>
<button class=”meu-botao”>Me clica</button>
Questão 13.A tag <meta charset="UTF-8">tem qual finalidade?
(A) Indicar a codificação Unicode para a página toda. 
(B) Indicar a codificação ANSI para a página toda.
(C) Indicar a codificação ASCII para a página toda.
(D) Indicar a codificação ISO-8859-1 para a página toda.
(E) Indicar que é uma página HTML 5.
Questão 14. A tag abaixo tem qual finalidade?
<meta name="viewport" content="width=device-width, user-scalable=no"> (( R: user-scalabrle no: é pra não dar zoom no cel. ))
(A)Habilita o uso de zoom se o tamanho da tela for web.
(B)Habilita o uso de zoom se o tamanho da tela for mobile.
(C)Habilita o uso de zoom pelo usuário.
(D)Controla o tamanho da viewport, definindo sua largura com a largura do dispositivo. 
(E)Controla o tamanho da largura do dispositivo com base na largura da página.
Questão 15. O que a tag abaixo faz?
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
(A) Importa todas as fontes da Google Fonts.
(B)Importa uma fonte da Google Fonts. 
(C) Importa uma fonte do Bootstrap Fonts.
(D)Importa todas as fontes do Bootstrap Fonts.
(E)Importa uma fonte do Font Awesome Fonts.
Questão 16. Analisando as tags abaixo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	Pode-se afirmar que:
I. O Bootstrap utiliza o jQuery.
II. O Bootstrap utiliza o Material Design.
III. O Bootstrap é um framework JS e CSS.
São verdadeiras, apenas, os itens:
(A) Todas	(B) I e II		(C)I e III 	(D)II e III	(E)Nenhuma
Questão 17. O Código abaixo tem qual funcionalidade?
<p>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-snapchat"></i>
<i class="fa fa-twitter"></i>
</p>
(A)UtilizaGoogle Fonts.
(B)Utiliza TTF Fonts.
(C)Utiliza Bootstrap Fonts.
(D)Utiliza Apple Web Fonts.
(E) Utiliza Awesome Fonts. (V) fa é awesome fonts)
Questão 18. Responda com base nos 3 exemplos abaixo.
Exemplo 1:				Exemplo 2:			
Exemplo 3:
I.Se não definir a propriedade display será utilizado valor display: block como padrão, onde os elementos aparecerão um abaixo do outro, como no Exemplo 1.
II.Para utilizar os elementos um do lado do outro deverá ser utilizada a propriedade display: inline como no Exemplo 2. 
III.Para utilizar os elementos um do lado do outro e ao mesmo tempo poder configurar a sua largura e altura deve-se utilizar a propriedade display: inline-block como no Exemplo 3.
São verdadeiras, apenas, os itens:
(A) Todas	(B) I e II		(C)I e III	(D)II e III	(E)Nenhuma
Questão 19. Qual comando CSS deve ser utilizado para alinhar o formulário à esquerda e o mapa à direita como na figura abaixo?
(Float:left; e float:right)gui div 50% gui div 50%
Questão 20.Responda com base no código CSS abaixo.
body {
	background-color: pink;
}
@media only screen and (max-device-width: 480px) {
	body {
		background-color: blue;
	}
}
a) Qual é a cor de fundo da página em um iPad (768x1024 pixels)?
Pink
b) Qual é a cor de fundo da página em um iPhone X (375x812 pixels)?
Blue
Questão 21. Qual é a finalidade do código da questão anterior (Questão 20)?
 R: Personalizar sites para que tenham aparência de acordo com o tamanho da tela,(responsividade)
Questão 22.Responda com base no código CSS e HTML abaixo.
<style>
    .mobile { display: none; }
    @media only screen and (max-device-width: 480px) {
      .desktop { display: none; }
 .mobile { display: block; }
    }
</style>
</head>
<body>
    <p class="mobile">MMM</p>
<p class="desktop">DDD</p>
<p>AAA</p>
</body>
a) Qual é a saída deste código em um iPad (768x1024 pixels)?
DDD
AAA
b) Qual é a saída deste código em um iPhone X (375x812 pixels)?
MMM
AAA
Questão 23. Por quê o sistema em grade do Bootstrap utiliza o número 12?
6/4/3/2
Questão 24. Por quê as vezes é necessário utilizar o comando !important no CSS?
R: Para que a regra reescreva(prevaleça) a regra que já existe. 
Questão 25. A técnica de utilizar várias camadas sobrepostas dando um efeito de 3 dimensões no site é chamada de:
(A) Material Design
(B) Fluent Design
(C) Flat Design
(D) Hover
(E) Parallax
Questão 26. Para esconder o scroll deve-se utilizar o comando CSS:
(A)display: block-inline;
(B)display: hidden;
(C)float: hidden;
(D)overflow: hidden;
(E)hover: hidden;
Questão 27. Para que serve a propriedade CSS z-index?
R:pra definir a profundidade da camada (o mair numero fica na frente)
Questão 28. O valor 1vh em um navegador com viewport de altura 900px equivale a:
(A) 1px;
(B) 9px; 
(C) 90px;
(D)900px; vh(height) vw(width) 1/100 ( tem haver com porcentagem da tela
(E)10px;
Questão 29. Quando deve-se utilizar variáveis em CSS? Qual vantagem em utilizar?
R:Deve se utilizar variáveis quando a mesma informação(ex:#ff00ff) repetida em varias regras css , vantagem economiza tempo na atualização do css. 
Questão 30. Qual será a cor do ícone abaixo “thumbs-down” (dedão para baixo) e “thumbs-up” (dedão para cima), respectivamente?
<style>
i {
 color: brown !important;
}
.card i {
color: white !important;
}
</style>
<i class="fa fa-thumbs-down"></i>R: Marrom
<div class="card">
<i class="fa fa-thumbs-up"></i> R: Branco
</div>
R:
Questão 31.2016 - FCC - CREMESP - Analista de Tecnologia da Informação - Análise de Sistemas
Web design responsivo usa HTML e CSS para que uma página web seja adequadamente apresentada em diversos tipos de dispositivos, como celulares, tablets, computadores, desktop etc. CSS3 introduziu uma nova técnica chamada media query que utiliza uma instrução para indicar que um bloco de propriedades CSS será aplicado somente se uma determinada condição for verdadeira. Por exemplo, para executar um bloco de propriedades CSS, somente se a janela do navegador for menor do que 768px, utiliza-se a instrução
(A) @mediaQuery only screen-max-width: 768px {/* propriedades CSS */}
(B) @apply if (screen >= 768px) {/* propriedades CSS */}
(C) @mediaQuery only screen on max-width: 768px {/* propriedades CSS */}
(D) @media if (screen >= 768px) {/* propriedades CSS */}
(E) @media only screen and (max-width: 768px) {/* propriedades CSS */}