Desenvolvimento Responsivo

Prévia do material em texto

Desenvolviment� Responsiv�
1 - 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,
R - é 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.
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.
2 - “Em 2004, Cameron Adams escreveu um artigo intitulado Resolution dependent
layout, descrevendo um método para criar um design que pudesse se adaptar a
diferentes resoluções de tela. Essa abordagem necessitava do JavaScript para
detectar a resolução da tela e carregar o CSS correto.”
Desde 2004, muita coisa aconteceu, porém, podemos notar desde essa época a
preocupação em adaptar o conteúdo dinamicamente ao dispositivo, o qual um web
site está sendo acessado. Levando em consideração que o que menos se tem hoje
é tempo e disponibilidade em desenvolver um produto para diferentes dispositivos, e
em se gastar o menor tempo para produzir um produto com qualidade, podemos
afirmar que:
R - O Design Fluído adapta o web site a resolução apenas diminuindo ou
aumentando as medidas proporcionalmente, porem reorganiza a posição dos
elementos quando a resolução está muito acima ou abaixo da medida original.
o design fluido adapta o web site a resolução apenas diminuindo ou aumentando as
medidas proporcionalmente, deixando literalmente a mesma visualização
independente da resolução da tela.
3 - A utilização de ferramentas de detecção de recursos é uma etapa essencial para
assegurar que os que foram utilizados pelo desenvolvedor são suportados pelo
navegador. Se isso não for feito, os navegadores que não oferecem suporte aos
recursos que você está usando em seu código não exibirão seus sites corretamente
e apenas falharão, criando uma experiência ruim para o usuário (VENTER, 2018).
Em relação à detecção de recursos e a sua importância, julgue as afirmativas
abaixo marcando a única alternativa CORRETA:
R - Quando utilizamos a detecção de recursos estamos testando se o navegador é
realmente capaz de executar uma linha específica de apenas de código JavaScript.
A detecção de recursos pode ser realizada na forma de uma biblioteca
JavaScript de código aberto chamada Modernizr. As demais seguem as
correções: - A detecção de recursos é uma tecnologia específica, portanto, existe
apenas uma maneira válida de realizar esse procedimento. (Errado: A detecção de
recursos é uma técnica, ao contrário de uma ferramenta ou tecnologia específica.
Isso significa que existem várias maneiras (igualmente válidas) de realizar a
detecção de recursos). - Quando utilizamos a detecção de recursos estamos
testando se o navegador é realmente capaz de executar uma linha específica de
apenas de código JavaScript. (Errado: não apenas de código JavaScript) - Se um
navegador não tiver determinado recurso não é recomendável fornecer o suporte
correto. (Errado: é recomendável fornecer o suporte correto) - Novos recursos não
tem a capacidade aumentar a popularidade do site. (Errado: novos recursos
possuem a grande capacidade do aumento de popularidade do site).
4 - Algumas pseudo classes só se aplicam quando o usuário interage com o
documento de alguma forma. Essas pseudoclasses de ação do usuário, às vezes
chamadas de pseudoclasses dinâmicas, agem como se uma classe tivesse sido
adicionada ao elemento quando o usuário interage com ele (SHEPHERD, 2011).
As pseudoclasses dinâmicas classificam os elementos em características diferentes
de seu nome, atributos ou conteúdo, em princípio características que não podem ser
deduzidas da árvore do documento (W3C, 2018).
Analisando as definições de pseudo-classes, avalie as seguintes asserções e a
relação proposta entre elas.
I. As pseudoclasses dinâmicas não aparecem na origem do documento ou na árvore
do documento.
PORQUE
II. Pode haver linguagem de documento ou limites específicos de implementação
nos quais os elementos podem se tornar :active ou adquirir :focus. Essas pseudo
classes não são mutuamente exclusivas. Um elemento pode corresponder a várias
pseudo classes ao mesmo tempo.
A respeito dessas asserções, assinale a alternativa correta.
R - Ambas as alternativas encontram-se corretas: - As pseudoclasses dinâmicas
não aparecem na origem do documento ou na árvore do documento. - Pode haver
linguagem de documento ou limites específicos de implementação nos quais os
elementos podem se tornar :active ou adquirir :focus. Essas pseudo-classes não
são mutuamente exclusivas. Um elemento pode corresponder a várias pseudo
classes ao mesmo tempo. Porém uma não é justificativa da outra, a segunda
asserção está abordando a respeito de seletores que podem fornecer
pseudo-classes para a seleção de um elemento no qual o usuário está agindo.
5- O conteúdo disponível na Internet cresce a cada dia, e os usuários estão cada
vez mais seletivos quanto ao conteúdo que consomem. Além disso, a velocidade de
carregamento do site é um critério de avaliação para classificação nas páginas de
busca. Considerando estes aspectos, concluímos que é extremamente necessário
testar o desempenho do seu site (CAMPOS, 2021).
Considerando seus conhecimentos a de testes de desempenho para website,
analise as afirmativas a seguir:
I. A capacidade de resposta está relacionada a quanto tempo o servidor leva para
responder às interações do usuário.
II. A estabilidade verifica se o site é estável e se permanece acessível por 24 horas.
III. A velocidade mede quanto tempo o site demora para efetuar seu carregamento.
IV. A escalabilidade avalia se o site suporta um aumento dos acessos repentinos de
um site em teste.
Considerando o contexto apresentado, é correto APENAS o que se afirma em:
R - I, II, III e IV.
Considerando os testes de desempenho para website, todas as afirmativas que
seguem estão corretas. I. A capacidade de resposta está relacionada a quanto
tempo o servidor leva para responder às interações do usuário. II. A estabilidade
verifica se o site é estável e se permanece acessível por 24 horas. III. A velocidade
mede quanto tempo o site demora para efetuar seu carregamento. IV. A
escalabilidade avalia se o site suporta um aumento dos acessos repentinos de um
site em teste.
6- O Bootstrap é a estrutura de front-end mais popular construída para projetar
interfaces modernas, responsivas e dinâmicas para páginas da web de design
profissional. A nova versão (Bootstrap 5) veio com mudanças importantes, a
estrutura de interface do usuário de código aberto está procurando se posicionar
para o futuro, e isso fez com que fizesse mudanças inovadoras.
De acordo com seus conhecimentos acerca dessa nova versão, julgue as
afirmativas abaixo, e marque a que está INCORRETA:
R - No Bootstrap 5, o suporte oficial de navegadores mais antigos, incluindo o
Internet Explorer 10 e 11, permaneceu sem alterações.
7- O CSS passou por várias mudanças ao longo dos anos, e a versão mais recente
é CSS3. A maioria dos navegadores provavelmente suporta o padrão CSS3. Com
esta última versão, os designers CSS têm mais ferramentas à sua disposição e
algumas vantagens.
De acordo com as informações apresentadas na tabela a seguir, faça a associaçãodas principais vantagens de utilização do CSS contidas na Coluna A e na Coluna B,
respectivamente.
I CSS economiza
tempo
1. Se você estiver usando CSS, não precisará escrever
atributos de tag HTML todas as vezes. Basta escrever
uma regra CSS de uma tag e aplicá-la a todas as
ocorrências dessa tag. Portanto, menos código significa
tempos de download mais rápidos.
II As páginas carregam
mais rápido
2. Você pode escrever CSS uma vez e reutilizar a
mesma planilha em várias páginas HTML. Você pode
definir um estilo para cada elemento HTML e aplicá-lo a
quantas páginas da Web desejar.
III Fácil manutenção 3. Folhas de estilo permitem que o conteúdo seja
otimizado para mais de um tipo de dispositivo. Usando o
mesmo documento HTML, diferentes versões de um site
podem ser apresentadas para dispositivos portáteis,
como PDAs e telefones celulares, ou para impressão.
IV Compatibilidade
com vários dispositivos
4. Para fazer uma mudança global, basta alterar o estilo
e todos os elementos em todas as páginas da web serão
atualizados automaticamente.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.
R- I - 2; II - 1; III - 4; IV - 3.
8- 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
R - 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.
9 - CSS (Cascading Style Sheets) é uma linguagem baseada em regras. É usado
para definir o estilo e o layout das páginas, definindo grupos específicos de estilos
que são aplicados a elementos ou grupos de elementos.
CSS controla a aparência e o comportamento de uma página da web. Usando CSS,
você pode controlar a cor do texto, o estilo das fontes, o espaçamento entre os
parágrafos, como as colunas são dimensionadas e dispostas, quais imagens ou
cores de fundo são usadas, designs de layout, variações na exibição para diferentes
dispositivos e tamanhos de tela bem como uma variedade de outros efeitos.
CSS é fácil de aprender e entender, mas fornece controle poderoso sobre a
apresentação de um documento HTML. Mais comumente, CSS é combinado com
as linguagens de marcação HTML ou XHTML.
Consideram as informações apresentadas, analise as afirmativas a seguir:
I. Cascade é o conceito fundamental de como o CSS foi criado. Como o nome
sugere, as folhas de estilo em cascata (de cima para baixo). Isso significa que a
ordem das regras CSS é importante e quando duas regras se aplicam com
especificidade igual, a que vier por último no CSS será usada.
II. Alguns valores de propriedade CSS definidos em elementos pais são herdados
por seus elementos filhos e outros não. Isso muitas vezes pode ser confuso, mas o
princípio por trás disso foi projetado para permitir que escrevamos menos regras
CSS.
III. Como várias regras se aplicam a um elemento, regras conflitantes não tem como
ser classificadas e aplicadas por especificidade.
IV. Cada seletor tem uma classificação de especificidade diferente, que são: ID’s;
classe e pseudo classe; seletores de elemento.
Considerando o contexto apresentado, é correto APENAS o que se afirma em:
R- I, II e IV.
10- Todos os anos, novas interações são introduzidas no mundo do design e,
quando a Apple lançou o iPhone, a tecnologia multitoque se tornou popular e os
usuários aprenderam que não só podiam apontar e tocar na interface, mas também
beliscar, espalhar e deslizar. Podemos afirmar que os gestos são os novos cliques
(BATCHU, 2019).
De acordo com as informações apresentadas na tabela a seguir, faça a associação
dos pontos estudados de conteúdo apresentando os gestos de toque à experiência
do usuário contidos na Coluna A com seus respectivos conteúdos abordados,
apresentados na Coluna B.
I tamanhos de alvos de
toque 1. Para melhor entendermos por que isso é
importante, analisemos como as pessoas seguram
um smartphone. A tendência é para o uso da mão
direita, já que boa parte das pessoas no mundo é
destra. Logo a colocação desta precisa ser
posicionada de uma forma que se alinhe com a
forma como as pessoas seguram e usam o toque
do smartphone.
II localização dos controles 2. São relativamente fáceis de implementar e
qualquer sistema de navegação que precise
trabalhar com toque precisa ter opções de menu
que podem ser usadas confortavelmente pelos
usuários, com dedos imprecisos para evitar toques
acidentais e erros. Alguns artigos mencionam a
medida mínima de área palpável, que devem ser
de 44 px.
III gestos de navegação 3. Os usuários podem transformar o tamanho, a
posição e a rotação de um elemento com gestos.
Os tipos de gestos de transformação incluem:
toque duplo, pitada, gestos compostos e pegue e
mova.
IV transforme os gestos 4. Ajudam os usuários a navegar facilmente por um
produto. Eles complementam outros métodos de
entrada explícitos, como botões e componentes de
navegação. Os tipos de gestos de navegação
incluem: tocar, rolar e deslocar, arrastar e deslizar.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.
R - I - 2; II - 1; III - 4; IV – 3