Desenvolvimento Responsivo - Construção de Front-end baseado em Framework - Ampli Pitagoras

Prévia do material em texto

Desenvolvimento Responsivo
Construção de Front-end baseado em Framework
1 - Criar uma interface responsiva não basta apenas “esticar e contrair” o layout. O desenvolvedor web design responsivo trabalha também na adaptação do layout para diferentes resoluções de dispositivos que serão acessados.
 
Para que isso seja feito da melhor forma, são necessários conhecimentos em design na adaptação do layout de modo que este mantenha um padrão estético visual sem afetar a parte principal, que é a experiência do usuário, performance e navegabilidade.
 
O layout pensado para dispositivos, nada mais é do que um desenho em que o conteúdo do site irá se adaptar à resolução do mesmo. Ele pode ser fixo, onde possui um tamanho definido pelo desenvolvedor web, e se manterá no mesmo formato, independentemente do dispositivo utilizado. Ou pode ser fluido, cujo modelo apenas acompanha o tamanho da tela, aumentando ou reduzindo o tamanho da área de visualização conforme o tipo de dispositivo utilizado, não tem como propósito apresentar uma reorganização para melhor experiência do usuário.
Consideram as informações apresentadas, analise as afirmativas a seguir:
 
I. Ao iniciar um projeto de layouts fluidos, é fundamental saber as diferentes resoluções para sua construção, e as mais comuns são: 1200px (em desktops) e 320 (em smarthphones).
II. O conceito “conteúdo first” é importante a ser considerado, uma vez que o conteúdo vai determinar não somente a tipologia do texto em si, mas também seu objetivo, tipos de mídia e imagens - que o site irá apresentar.
 
III. Uma vez que tenha o conteúdo alinhado, pode partir para a estruturação do site através do wireframe, que nada mais é do que um esboço de simulação de como a interface se apresentará.
 
IV. Dois pontos fundamentais a serem considerados no design responsivo, são a escalabilidade e adaptabilidade de um layout, ou seja, a medida em que as unidades aumentam de modo previsível e seu layout deverá ter a capacidade de se adaptar a estas mudanças.
Considerando o contexto apresentado, é correto APENAS o que se afirma em:
Sua resposta
Correta
I, II, III e IV.
Comentário
Quando iniciamos um projeto de layouts fluidos, é fundamental saber as diferentes resoluções para sua construção, e as mais comuns são de 1200px (em desktops) e 320 (em smarthphones), logo esta afirmação está correta. É correto afirmar que o conceito “conteúdo first” é importante a ser considerado, uma vez que o conteúdo vai determinar não somente a tipologia do texto em si, mas também seu objetivo, tipos de mídia e imagens - que o site irá apresentar. Pensar no conteúdo e todo o seu conjunto, como imagens, textos, posicionamentos do layout são fundamentais para iniciar um projeto de laytou fluido. É importante considerar, que uma vez que tenha o conteúdo alinhado, partimos para a estruturação do site através do wireframe, que nada mais é do que um esboço de simulação de como a interface se apresentará. Os dois pontos fundamentais a serem considerados no design responsivo, são a escalabilidade e adaptabilidade de um layout, ou seja, a medida em que as unidades aumentam de modo previsível e seu layout deverá ter a capacidade de se adaptar a estas mudanças. Esses dois conceitos são fundamentais no estudo de designs responsivos. 
2 - Alguns problemas podem surgir quando você começa a visualizar o site em um dispositivo de tela estreita. O cabeçalho pode parecer bom, mas começa a ocupar muito da altura da tela de um dispositivo móvel. E com o tamanho maior na tela do smartphone passa a ser difícil visualizar a imagem sem ter que aplicar algum recurso na tela.
 
Uma melhoria seria exibir uma versão recortada da imagem que exibe os detalhes importantes desta quando o site é visualizado em uma tela estreita. Uma segunda imagem cortada pode ser exibida para um dispositivo de tela de largura média, como um tablet. 
 
Analisando o problema de direção de arte, avalie as seguintes asserções e a relação proposta entre elas.
 
I. Uma página da web onde incluiu uma grande foto de paisagem com uma pessoa no centro quando visualizada em um navegador de desktop, quando visualizamos essa mesma página em um navegador móvel, a mesma imagem é reduzida, tornando a pessoa da imagem muito pequena e difícil de visualizar. Provavelmente seria melhor mostrar uma imagem de retrato menor no celular, que ampliasse a pessoa.
 
PORQUE
 
II. O problema geral pelo qual se deseja exibir diferentes imagens recortadas dessa maneira, para vários layouts, é comumente conhecido como o problema da direção de arte.
A respeito dessas asserções, assinale a alternativa correta.
Sua resposta
Correta
As asserções I e II são proposições verdadeiras e a II justifica a I.
Comentário
Quando tratamos de uma página da web onde incluiu uma grande foto de paisagem com uma pessoa no centro quando visualizada em um navegador de desktop, quando visualizamos essa mesma página em um navegador móvel, a mesma imagem é reduzida, tornando a pessoa da imagem muito pequena e difícil de visualizar. Provavelmente seria melhor mostrar uma imagem de retrato menor no celular, que ampliasse a pessoa. Assim o problema geral pelo qual se deseja exibir diferentes imagens recortadas dessa maneira, para vários layouts, é comumente conhecido como o problema da direção de arte. Desse modo a afirmativa II justifica a afirmativa I.
3 - Usar imagens e animações em interfaces para os usuários tornou-se algo comum em aplicativos de web modernos. Embora esses designs modernos se concentrem em melhorar a experiência do usuário do seu aplicativo, as coisas podem não ficar tão boas se essas imagens não forem responsivas para todos os dispositivos.
 
Já que estamos buscando soluções em um nível mais alto, o uso da tag , oferece aos desenvolvedores da web mais flexibilidade na especificação de recursos de imagem. O elemento possui duas tags: uma ou mais tags e uma tag . 
O navegador irá procurar o primeiro elemento cuja consulta de mídia corresponde à largura da janela de visualização atual e, em seguida, exibirá a imagem apropriada (especificada no atributo srcset). O elemento
Sua resposta
Correta
 é necessário como o último filho do elemento, é uma opção de fallback se nenhuma das tags de origem corresponder.
Comentário
O uso da tag , oferece aos desenvolvedores da web mais flexibilidade na especificação de recursos de imagem. O elemento possui duas tags: uma ou mais tags e uma tag . O navegador irá procurar o primeiro elemento cuja consulta de mídia corresponde à largura da janela de visualização atual e, em seguida, exibirá a imagem apropriada (especificada no atributo srcset). O elemento é necessário como o último filho do elemento, é uma opção de fallback se nenhuma das tags de origem corresponder.
4 - Quando visualizarmos um site em um dispositivo, esperamos que ele seja redimensionado para a largura disponível do dispositivo automaticamente, que não haja qualquer perda de experiência do usuário; mas infelizmente, nem todo site faz isso da maneira certa.
 
Para entender por que isso é importante, supomos que operamos uma versão para desktop em nosso site (um no grupo 1280px) e um equivalente mobile do grupo 418-768 px.
O primeiro estágio para tornar nosso site responsivo é adicionar a diretiva viewport, de modo simplificado,
Sua resposta
Correta
é o espaço disponível para a página ser renderizada no navegador. Todo navegador moderno permite que o usuário faça um zoom no conteúdo da página, é um recurso interessante para páginas que não foram desenvolvidas para dispositivos com telas de tamanhos diferentes.
Comentário
O primeiro estágio para tornar nosso site responsivo é adicionar a diretiva viewport, de modo simplificado, é o espaço disponível para a página ser renderizada no navegador. Todo navegador moderno permite que o usuário faça um zoom no conteúdo da página, é um recurso interessante para páginas que não foram desenvolvidas para dispositivos com telas de tamanhos diferentes.
5 - Usar imagens e animações em interfaces para os usuários virou algo comum emaplicativos de web modernos. Embora esses designs modernos se concentrem em melhorar a experiência do usuário do seu aplicativo, as coisas podem não ficar tão boas se essas imagens não forem responsivas para todos os dispositivos.
 
Ethan Marcotte (2017) cita que uma página desenvolvida com layout fluido, pode ser considerada fluida, quando aplicada as técnicas do design responsivo, como layout fluido, imagens e recursos flexíveis e media queries.
Acerca dos seus conhecimentos relacionados as imagens responsivas, e de julgue as afirmativas abaixo, e marque a que está CORRETA:
Sua resposta
Correta
Os elementos <source> incluem um atributo media que contém uma condição de mídia, essas condições são testes que decidem qual imagem é mostrada - a primeira que retornar true será exibida. 
Comentário
A única alternativa correta é a que cita que os elementos incluem um atributo media que contém uma condição de mídia, essas condições são testes que decidem qual imagem é mostrada - a primeira que retornar true será exibida.