Desenvolvimento Web Cliente - PROVA

Prévia do material em texto

25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 1/8
Usuário ANDERSON DE ALMEIDA
Curso GRA0632 DESENVOLVIMENTO WEB CLIENTE GR0613211 - 202110.ead-
15208.01
Teste 20211 - PROVA N2 (A5)
Iniciado 18/06/21 20:40
Enviado 18/06/21 20:55
Status Completada
Resultado da
tentativa
4 em 10 pontos  
Tempo decorrido 15 minutos
Instruções
Resultados exibidos Respostas enviadas, Respostas corretas, Comentários
Caso necessite a utilização do "EXCEL" clique no link ao lado ----------->
excel.xlsx
Pergunta 1
Resposta Selecionada: 
Resposta Correta: 
Comentário
da
resposta:
O jquery Mask é um plugin que de�nir máscaras ou padrões dos campos de entrada HTML. Todo
tipo de máscara pode ser de�nido. 
  
Analise o trecho de código a seguir:
$(document).ready(function(){   $('.date').mask('00/00/0000'); });
  
Assinale a alternativa que indica uma entrada de dados possível para a máscara informada
anteriormente:
.10/10/2010.
.10/10/2010.
Resposta correta. A máscara anterior de�ne a formatação de um campo data no
formato dia/mês/ano, sendo que os valores devem vir separados pelo caractere
de barra. O dia e o mês devem ser informados com dois valores numéricos. Já o
ano deve ser informado com 4 algarismos.
Pergunta 2
Para inserir uma imagem em uma página html devemos utilizar a tag img. Ao implementar um
sistema, você foi solicitado a incluir imagens com dois níveis de opacidade: 10% e 50%. A
opacidade pode ser de�nida pelo código css abaixo: 
 
1 em 1 pontos
0 em 1 pontos
https://anhembi.blackboard.com/bbcswebdav/pid-16035469-dt-content-rid-84766551_1/xid-84766551_1
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 2/8
Resposta Selecionada:
 
Resposta Correta:
 
Comentário
da
resposta:
img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and
earlier */
}
  
  
Se for inserido apenas esse trecho de código na sua folha de estilo externo, somente a opacidade
de 50% estará disponível. Assinale a alternativa que descreve o que deve ser feito para
disponibilizar os dois percentuais de opacidade para ser utilizado em várias imagens no arquivo
html de acordo com o percentual de opacidade que será utilizado em cada imagem:
 
#img1 { 
  opacity: 0.1; 
  �lter: alpha(opacity=50); /* For IE8 and earlier */ 
} 
#img2 { 
  opacity: 0.5; 
  �lter: alpha(opacity=50); /* For IE8 and earlier */ 
}
 
img.opacidade10 { 
  opacity: 0.1; 
  filter: alpha(opacity=50); /* For IE8 and earlier */ 
} 
img.opacidade50 { 
  opacity: 0.5; 
  filter: alpha(opacity=50); /* For IE8 and earlier */ 
}
Sua resposta está incorreta. Essa alternativa não está correta, pois o símbolo
apresentado na �gura indica que o arquivo "avatar.jpg" não existe no mesmo
diretório do arquivo html. Não há nenhuma limitação do formato de imagem
jpg para qualquer navegador. Direitos de cópia de imagem não são avaliados
pelo navegador. A tag �gure e alternativa e está disponível apenas para o HTML
5.
Pergunta 3
As tags html de texto são comumente empregadas com folhas de estilo para organizar a
apresentação do conteúdo apresentado. Tendo isso em mente, analise o exemplo de folha de
estilo que é disponibilizada para a tag <p> em que todos os caracteres são apresentados em
1 em 1 pontos
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 3/8
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
letras maiúsculas. 
 
p.uppercase {
  text-transform: uppercase;
}
  
  
Assinale a alternativa que emprega corretamente a de�nição anterior para que o conteúdo
exibido esteja em caracteres maiúsculos:
<p class="uppercase">Este é um texto em letras maiúsculas</p>
<p class="uppercase">Este é um texto em letras
maiúsculas</p>
Resposta correta. A de�nição no css indica que “uppercase” é uma classe que
deve estar associada a tag <p>. Em termos práticos, para que seja possível
utilizar o estilo de�nido em “p.uppercase” deve-se acrescentar o atributo class
na tag <p>.
Pergunta 4
Resposta
Selecionada:
Resposta
Correta:
Comentário
da
resposta:
O Bootstrap possibilita algumas maneiras de uso, cada uma diferente da outra dependendo do
seu nível de conhecimento ou objetivo de uso. 
Assinale a alternativa que contém a descrição correta de uma forma de uso do Bootstrap:
.Pagar uma licença única para utilizar a ferramenta quantas vezes for
necessário.
.Utilizar uma réplica do framework disponibilizado em um servidor
na rede e fazer a inclusão dos arquivos CSS e JS no código.
Sua resposta está incorreta. Essa alternativa não corresponde ao uso correto do
framework 
Boostrap. Existem duas maneiras de utilizar o framework Bootstrap:1) realizar o
download do framework a partir da página do desenvolvedor; 2) utilizar uma
réplica do framework disponibilizado em um servidor na rede. O Boostrap é uma
ferramenta gratuita, de código aberto e seu uso não depende do desenvolvedor
fazer qualquer tipo de cadastro ou pagamento de licença. Não é necessário
fazer qualquer cadastro para ter acesso ao Boostrap, nem é necessário pagar
qualquer tipo de licença para o seu uso. Além disso, por ser uma ferramenta
0 em 1 pontos
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 4/8
gratuita, não há prazo para uso irrestrito, ou seja, não tem versão limitada (trial)
a 30 dias.
Pergunta 5
Resposta
Selecionada:
 
Resposta
Correta:
Comentário
da
resposta:
Dentre as vantagens que podem ser apontadas pelo uso do Bootstrap, podem ser citadas a vasta
biblioteca de componentes, possibilidade de reuso de código e a vasta documentação gerada por
uma comunidade bastante ativa. 
Assinale a alternativa que descreve uma desvantagem no uso do Bootstrap:
.Os componentes do Bootstrap não podem ser customizados.
.Bootstrap entrega muito código que não será usado, o que pode
deixar os sistemas lentos.
Sua resposta está incorreta. Essa alternativa não corresponde a uma
desvantagem no uso do Boostrap. Apesar de ser um software gratuito que não
exige cadastro para uso, dos seus componentes serem customizáveis e da
documentação já estar traduzida para vários idiomas, inclusive o Português,
programadores experientes em front-end 
costumam não gostar do Bootstrap. Isso ocorre porque ele entrega muito
código que não será usado, o que pode deixar os sistemas lentos. Dessa forma,
eles acabam preferindo desenvolver soluções próprias, codi�cando todo o estilo
com CSS. A decisão de trabalhar ou não com o framework vai depender do
escopo do projeto e do nível de exclusividade dado aos componentes
implementados. O Boostrap pode ser customizado, para isso utilizamos o nosso
conhecimento de CSS. O acesso não precisa ser atualizado anualmente. Apenas
a versão do framework pode ser atualizada, se for do interesse do
desenvolvedor/empresa que o contratou. O Boostrap utiliza a mesma sintaxe do
CSS, o que é necessário aprender são as classes e os atributos de�nidos pelo
framework. A documentação existe em diferentes línguas, inclusive em
Português que pode ser acessada pelo endereço:
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/.
Pergunta 6
 O
seletor #id tem um papel semelhante aos seletor .class, mas ele pode ser aplicado
apenas uma vez em todo o HTML. A sintaxe de definição do seletor #id está
apresentada a seguir: 
  
0 em 1 pontos
0 em 1 pontos
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 5/8Resposta
Selecionada:
Resposta
Correta:
Comentário
da
resposta:
#id {   css declarations; }
  
  
Considere agora o trecho de código a seguir 
  
<!DOCTYPE html> <html> <head> <style> #firstname {   background-color:
yellow; } </style> </head> <body>   <h1>Seletor #id</h1>   <div class="intro">
  <p id="firstname">Meu nome é Mário.</p>   <p id="hometown">Eu moro em
São Paulo/SP.</p> </div>   <p>Meu melhor amigo é o Valdemar.</p>   </body>
</html>
  
  
Assinale a alternativa correta sobre o conteúdo renderizado a partir desse código:
Para que o texto “Eu moro em São Paulo/SP.” tenha a mesma cor de fundo que
o texto basta alterar  o valor do seu campo id para “ #�rstname”.
Para que o texto “Eu moro em São Paulo/SP.” tenha a mesma cor
de fundo que o texto “Meu nome é Mário.” podemos acrescentar “,
#hometown” logo após o termo #firstname.
Sua resposta está incorreta. Essa alternativa não corresponde a renderização do
texto mencionado. Somente um seletor id foi de�nido no trecho CSS e ele pode
ser utilizado somente uma vez. Isso já ocorreu no texto “Meu nome é Mário.”.
Apesar deste texto estar de�nido dentro da mesma div que “Eu moro em São
Paulo/SP.”, o seletor id=”�rstname” é aplicado somente a “Meu nome é Mário.”.
O texto “Meu melhor amigo é o Valdemar.” não possui nenhum seletor ou
propriedade para de�nir sua aparência, diferente do padrão (fonte na cor preta
e sem cor de fundo). Para que  o texto “Eu moro em São Paulo/SP.” tenha a
mesma cor de fundo que o texto “Meu nome é Mário.” podemos acrescentar “,
#hometown” logo após o termo #�rstname: 
#�rstname, #hometown { 
  background-color: yellow; 
}
Pergunta 7
Resposta
Código Javascript pode ser embutido em páginas HTML, o que permite a modi�cação dinâmica
do conteúdo das páginas. 
  
Assim, o código Javascript deve ser inserido dentro do código HTML no
0 em 1 pontos
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 6/8
Selecionada:
Resposta
Correta:
Comentário
da
resposta:
.�nal do elemento < body >, pois todos os elementos da página precisam ser
declarados antes de serem usados no código Javascript..
.final do elemento < body >, pois isso torna mais rápida a
apresentação da página no navegador..
Sua resposta está incorreta. Para lincar o JavaScript dentro do HTML, a tag 
<script> pode ser declarada dentro da tag <head> ou dentro da tag 
<body>. A diferença é que se o código JavaScript for muito extenso ou
demandar muito processamento, o código inserido na tag 
<head> vai demandar mais tempo para renderizar no ambiente do usuário, pois
o código terá que ser lido antes do conteúdo da tag <body>. Por isso,
usualmente os scripts que demanda mais processamento  são declarados no
�nal da tag 
<body>.
Pergunta 8
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
Um trecho de código HTML foi extraído de um sistema web, sendo responsável por exibir o nome
do usuário no canto da tela:
<p id=”cliente”>usuário</p>
  
            Considere agora a variável de�nida em:                  
<script> var meuNome=”José”</script>
  
  
            A sintaxe correta em Javascript para trocar a palavra “usuário” pelo conteúdo da            
variável “meuNome” é
.document.getElementById("cliente").innerHTML = meuNome..
.document.getElementById("cliente").innerHTML =
meuNome..
Resposta correta. Inicialmente é necessário ter acesso ao conteúdo da página
por meio de “document”. Na página HTML, acessamos o parágrafo com valor de
id=”cliente” por meio do comando getElementById(“cliente”). Por �m, é feita uma
chamada ao comando innerHTML que recebe como valor a variável com nome
meuNome.
1 em 1 pontos
0 em 1 pontos
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 7/8
Pergunta 9
Resposta Selecionada: 
Resposta Correta: 
Comentário
da
resposta:
Considere o trecho de código abaixo que corresponde a um carrossel de imagens construído
com Bootstrap:
<div id="myCarousel" class="carousel slide" data-ride="carousel">   <ol class="carousel-i
ndicators">     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>     <li
data-target="#myCarousel" data-slide-to="1"></li>     <li data-target="#myCarousel" da
ta-slide-to="2"></li>   </ol>   <div class="carousel-inner">     <div class="item active">
      <img src="la.jpg" alt="Los Angeles">     </div>     <div class="item">       <img
src="chicago.jpg" alt="Chicago">     </div>     <div class="item">       <img src="ny.jpg"
alt="New York">     </div>   </div>   <a class="left carousel-control" href="#myCarousel" data-
slide="prev">     <span class="glyphicon glyphicon-chevron-left"></span>     <span cla
ss="sr-only">Previous</span>   </a>   <a class="right carousel-control"
href="#myCarousel" data-slide="next">     <span class="glyphicon glyphicon-chevron-rig
ht"></span>     <span class="sr-only">Next</span>   </a> </div>
Fonte: Elaborado pela autora, 2019. 
Selecione a alternativa que indica qual o ponto correto do trecho de código anterior que deve ser
alterado para que seja construído um carrossel de três textos.
.Deve-se alterar os links da class="left carousel-control".
.Deve-se alterar a definição dos itens da class="item".
Sua resposta está incorreta. A de�nição dos itens do carrossel como sendo
imagens é feita nos itens da classe “item”. Cada um dos elementos lá declarados
correspondem à tag <img>. Para construir um carrossel de textos é necessário
alterar para uma tag que armazena esse tipo de conteúdo, como as tags de
cabeçalho ou de parágrafo. A class="carousel slide" da id="myCarousel"
contempla o conteiner mais externo onde o carrossel de imagens é inserido. Os
itens da lista ordenada correspondem aos marcadores para cada um dos itens
do carrossel. O valor de class="carousel-indicators" da lista ordenada indica qual
o papel desses itens que são utilizados para navegar pelos itens do carrossel. Já
os links da class="left carousel-control" auxiliam no processo de navegação para
os itens anteriores do carrossel.
Pergunta 10
Uma folha de estilos é composta por uma ou mais de�nições de estilo. Uma de�nição de estilo é,
por sua vez, composta pelo nome de uma tag html (qualquer uma), seguida por uma lista de
propriedades para essa tag, dentro de chaves de abertura e fechamento. Cada uma dessas
propriedades é identi�cada pelo seu nome, seguido de dois-pontos (:) e pelo seu valor. Na
de�nição de várias propriedades para uma tag, utiliza-se o ponto-e-vírgula (;) para as separar. 
  
Assinale a alternativa que apresenta um trecho de código com sintaxe incorreta para uma folha
de estilo
1 em 1 pontos
25/06/2021 Revisar envio do teste: 20211 - PROVA N2 (A5) – GRA0632 ...
https://anhembi.blackboard.com/webapps/late-course_engine_soap-BBLEARN/Controller?COURSE_ID=_671125_1 8/8
Sexta-feira, 25 de Junho de 2021 18h45min12s BRT
Resposta
Selecionada:
 
Resposta Correta:
Comentário
da
resposta:
body {font-size: 0.5 cm, color: yellow, background: black}
body {font-size: 0.5 cm, color: yellow, background: black}
Resposta correta. As propriedades de um estilo devem vir separadas por ponto-
e-vírgula (;). Nessa opção, as propriedades estão separadas por vírgulas. As
vírgulas são utilizadas para descrever diferentes informações sobre uma mesma
propriedade, como é utilizado na de�nição da fonte em “font-family: tahoma,
sans-serif”.