Logo Passei Direto
Buscar

Programação

Colégio Objetivo
O que é Web Design Responsivo?
a) É a prática de criar páginas web que se adaptam a diferentes resoluções, utilizando layout fluído, media queries e imagens flexíveis.
b) É a prática de criar páginas web que se adaptam apenas a resoluções de dispositivos móveis.
c) É a prática de criar páginas web que se adaptam apenas a resoluções de desktops.

User badge image
Estudando com Questões

há 2 anos

User badge image
Estudando com Questões

há 2 anos

1 Desenvolvimento Web com HTML, CSS e JavaScript
314 pág.

1 Desenvolvimento Web com HTML, CSS e JavaScript

Respostas

User badge image

Ed Verified user icon

há 2 anos

A resposta correta é a alternativa a) É a prática de criar páginas web que se adaptam a diferentes resoluções, utilizando layout fluído, media queries e imagens flexíveis. O Web Design Responsivo permite que o conteúdo de um site seja visualizado de forma adequada em diferentes dispositivos, como smartphones, tablets e desktops, proporcionando uma experiência de usuário otimizada.

Essa resposta te ajudou?

0
Dislike0
left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar essa resposta. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Ainda com dúvidas?

Envie uma pergunta e tenha sua dúvida de estudo respondida!

Essa pergunta também está no material:

1 Desenvolvimento Web com HTML, CSS e JavaScript
314 pág.

1 Desenvolvimento Web com HTML, CSS e JavaScript

Mais perguntas desse material

What is the course about?

O curso aborda o desenvolvimento de front-end (interfaces) para Aplicações Web e Sites que acessamos por meio do navegador de nossos computadores, utilizando padrões atuais de desenvolvimento e conhecendo a fundo suas características técnicas.
O curso discute as implementações dessas tecnologias nos diferentes navegadores, a adoção de frameworks que facilitam e aceleram nosso trabalho, além de dicas técnicas que destacam um profissional no mercado.
O curso aborda HTML, CSS e JavaScript em profundidade.

Qual é a propriedade do CSS que permite definir qual estratégia de exibição o elemento utilizará?


a) display
b) reset
c) inline
d) block

2. Vamos estilizar o conteúdo visual. Coloque o background preto no rodapé e faça as substituições de imagens. Use seletores de atributo do CSS3 para identificar os ícones de cada rede social.
1 footer {
2   background-image: url(../img/fundo-rodape.png);
3 } 4
5 .social li a {
6   /* tamanho da imagem */
7   height: 32px;
8   width: 32px;
9
10   /* image replacement */
11   display: block;
12   text-indent: -9999px; 
13 }
14
15 .social a[href*="facebook.com"] {
16   background-image: url(../img/facebook.png);
17 }
18
19 .social a[href*="twitter.com"] {
20   background-image: url(../img/twitter.png);
21 }
22
23 .social a[href*="plus.google.com"] {
24   background-image: url(../img/googleplus.png);
25 }

O background do rodapé deve ser preto.
As imagens dos ícones das redes sociais devem ser substituídas via CSS com image replacement.
Os seletores de atributo do CSS3 devem ser usados para identificar os ícones de cada rede social.
a) Apenas a afirmativa 1 é verdadeira.
b) Apenas a afirmativa 2 é verdadeira.
c) Apenas a afirmativa 3 é verdadeira.
d) As afirmativas 1, 2 e 3 são verdadeiras.

3. Último passo: posicionar os elementos internos do rodapé apropriadamente. Vamos posicionar os ícones sociais absolutamente à direita com position:absolute. Para isso, o container do nosso rodapé precisa estar posicionado. Aproveite também e coloque um espaçamento interno:
1 footer {
2   padding: 20px 0;
3 } 4
5 footer .container {
6   position: relative;
7 }
8
9 .social {
10   position: absolute;
11   top: 12px;
12   right: 0;
13 }
Por fim, precisamos fazer os ícones das redes sociais flutuarem lado a lado horizontalmente:
1 .social l

Os ícones sociais devem ser posicionados absolutamente à direita com position:absolute.
O container do rodapé deve estar posicionado para que os ícones sociais possam ser posicionados absolutamente à direita.
Os ícones das redes sociais devem flutuar lado a lado horizontalmente.
a) Apenas a afirmativa 1 é verdadeira.
b) Apenas a afirmativa 2 é verdadeira.
c) Apenas a afirmativa 3 é verdadeira.
d) As afirmativas 1, 2 e 3 são verdadeiras.

Qual é a diferença entre a abordagem desktop-first e a abordagem mobile-first?
a) A abordagem desktop-first começa pelo ambiente mais livre e vai tentando adaptar o layout para dispositivos móveis, enquanto a abordagem mobile-first começa pelo ambiente mais limitado e simples, com mais restrições, e depois adapta para desktops.
b) A abordagem desktop-first começa pelo ambiente mais limitado e simples, com mais restrições, e depois adapta para desktops, enquanto a abordagem mobile-first começa pelo ambiente mais livre e vai tentando adaptar o layout para dispositivos móveis.
c) Não há diferença entre as abordagens desktop-first e mobile-first.

Edite a página produto.php e, entre os includes do cabeçalho e do rodapé, adicione um formulário com radios e labels para a escolha da cor. Também usaremos o atributo alt para boa acessibilidade:

Adicionar um formulário com radios e labels para a escolha da cor;
Usar o atributo alt para boa acessibilidade.

Tendo em mente o box model, precisamos ter atenção na alteração de propriedades de um elemento visualizando o impacto em sua apresentação ao lidar com as propriedades listadas acima. Box-sizing. Os primeiros a perceberem que o box model do CSS era esquisito foi a Microsoft. Já no IE6 em quirks mode eles trocaram o box model para que o width significasse o tamanho total até a borda. A ideia era boa mas o problema foi eles atropelarem a especificação da época, o que acabou criando boa parte dos problemas de incompatibilidade entre navegadores. O IE em standards mode usa o box model oficial e esse é o padrão a partir do IE8. Mas como a ideia, no fim, era boa, isso acabou se transformando no box-sizing do CSS3, que nos permite trocar o box model que queremos usar. Por padrão, todos os elementos têm o valor box-sizing: content-box o que indica que o tamanho dele é definido pelo seu conteúdo apenas -- em outras palavras, é o tal box model padrão que vimos antes. Mas podemos trocar por box-sizing: border-box que indica que o tamanho agora levará em conta até a borda – ou seja, o width será a soma do conteúdo com a borda e o padding.

O box model é constituído de quatro áreas retangulares: conteúdo (content), espaçamento (padding), bordas (borders) e margens (margin).
As áreas do box model se desenvolvem de dentro para fora, na ordem listada: conteúdo, espaçamento, bordas e margens.
O box-sizing é uma propriedade do CSS3 que permite trocar o box model padrão para o box model da Microsoft.
Por padrão, todos os elementos têm o valor box-sizing: border-box, que indica que o tamanho levará em conta até a borda.
a) Apenas a afirmativa I está correta.
b) As afirmativas I e II estão corretas.
c) As afirmativas II e III estão corretas.
d) As afirmativas III e IV estão corretas.
e) As afirmativas I e IV estão corretas.

No texto sobre design responsivo, qual é a finalidade do código apresentado no item 8?

A finalidade do código apresentado no item 8 é fazer com que a borda escura apareça suavemente ao selecionar a bolinha, como um fadein.

No exercício 1, qual é o código HTML para implementar a funcionalidade de escolher o tamanho da roupa usando um input range do HTML5?


a)
b)
c)

Mais conteúdos dessa disciplina