Prova de Design Responsivo: Media Queries no Front-End
Tema: Programação front-end. Design respnsivo e o uso de media queries
Etapa/Série: 3º ano – Ensino Médio
Disciplina: Formação Técnica e Profissional
Questões: 10
“`html
Prova de Formação Técnica e Profissional – 3º Ano do Ensino Médio
Tema: Programação Front-End, Design Responsivo e o Uso de Media Queries
Instruções: Responda às questões abaixo, marcando ‘V’ para Verdadeiro e ‘F’ para Falso. Justifique suas respostas sempre que solicitado.
Questões
1. ( ) O design responsivo é uma técnica que permite que uma página web se adapte a diferentes tamanhos de tela, como desktops, tablets e smartphones.
2. ( ) As media queries são regras CSS que determinam que estilos aplicar dependendo das características do dispositivo em que a página está sendo visualizada.
3. ( ) Um site que utiliza design responsivo deve obrigatoriamente ter uma versão totalmente diferente para cada tipo de dispositivo, não sendo possível compartilhar código entre elas.
4. ( ) Ao utilizar media queries, é possível alterar propriedades CSS, como tamanho de fonte e cor de fundo, dependendo das dimensões da tela do usuário.
5. ( ) O uso de uma biblioteca como Bootstrap torna o design responsivo mais fácil, pois ela fornece classes pré-definidas que facilitam o trabalho com grid e media queries.
6. ( ) Todas as media queries devem ser escritas dentro de uma única folha de estilo (stylesheet) para garantir que os estilos sejam aplicáveis a todos os dispositivos.
7. ( ) Um elemento pode ser posicionado de diferentes maneiras em um layout responsivo utilizando apenas CSS Flexbox e Grid Layout.
8. ( ) O propósito das media queries é apenas garantir que os elementos de uma página web se ajustem em diferentes resoluções de tela, sem se preocupar com a estética do layout.
9. ( ) O uso de pixels como unidade de medida em um layout responsivo é mais recomendável do que o uso de percentual ou unidades relativas (como ‘em’ ou ‘rem’).
10. ( ) O design responsivo é uma prática importante porque melhora a experiência do usuário, aumentam o tempo de permanência na página e podem impactar positivamente no SEO da página.
Gabarito
1. V – O design responsivo realmente adapta as páginas para diversos tamanhos de tela, permitindo uma experiência mais amigável em diferentes dispositivos.
2. V – As media queries permitem aplicar estilos específicos de acordo com as características do dispositivo, como largura, altura e resolução da tela.
3. F – Um site responsivo utiliza um único conjunto de código que se ajusta dinamicamente, não necessitando de versões separadas para diferentes dispositivos.
4. V – Media queries podem ser utilizadas para alterar estilos, como tamanhos de font e cores, dependendo das dimensões da tela.
5. V – Bibliotecas como Bootstrap efetivamente facilitam a implementação de designs responsivos, oferecendo estruturas e classes prontas.
6. F – As media queries podem ser distribuídas entre várias folhas de estilo, dependendo da organização do projeto, não sendo obrigatórias em uma única folha.
7. V – CSS Flexbox e Grid Layout são ferramentas poderosas que permitem a criação de layouts responsivos adaptáveis a diferentes dispositivos.
8. F – As media queries também se preocupam com a estética, pois visam garantir que a apresentação da página se mantenha agradável em diferentes dispositivos.
9. F – Unidades relativas (como porcentagens, ‘em’ e ‘rem’) são recomendadas para layouts responsivos, pois oferecem mais flexibilidade e adaptabilidade do que valores fixos em pixels.
10. V – O design responsivo é crucial para melhorar a experiência do usuário e, consequentemente, afetar positivamente o SEO, já que sites responsivos tendem a ter melhor classificação em mecanismos de busca.
“`
##
Considerações Finais
As questões enunciadas têm como objetivo avaliar o conhecimento técnico dos alunos acerca de programação front-end, explorando temas fundamentais de design responsivo e media queries. As respostas foram elaboradas de forma a oferecer clareza sobre cada conceito, contribuindo para a compreensão e análise crítica dos alunos. Essa abordagem está alinhada com a função formativa da disciplina, promovendo a aplicação prática de um conhecimento essencial no mundo digital contemporâneo.
