Design Responsivo - Prova Final - Ampli Pitágoras

Prévia do material em texto

Desenvolvimento Responsivo
Prova final
Questão 1
“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:
· A atualização do CSS para a versão 3 trazendo as Medias Queries trouxe mais dinamismo e possibilidade de ajustar o web site à resolução do dispositivo, porém a quantidade de código se equipara a utilização do Javascript.
· As Medias Queries presentes no CSS3 permitem que o desenvolvedor programe estilos diversos aos vários tipos de dispositivos e suas respectivas resoluções permitindo que o web site esteja apto para futuras tecnologias.
· As Medias Queries trouxeram uma facilidade muito grande ao desenvolvedor ao permitir a criação de diversos estilos vinculados à resolução, porém sua modificação futura se mostra mais complexa que alterar um Javascript.
· Design Fluído consiste em diversas versões que ao interpretar a resolução do dispositivo carrega determinada folha de estilo trazendo a ideia de adaptabilidade ao site
· 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.
Sua resposta
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.
Incorreto, pois o Design Fluído não modifica a posição dos elementos de um web site, somente o seu tamanho proporcionalmente, permitindo a mesma visão independente da resolução do web site.
Questão 2
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:
· I e III.
· II e IV.
· I, II e III.
· I, II e IV.
· I, II, III e IV.
Sua resposta
I, II, III e IV.
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. 
Questão 3
“A informação é capaz de gerar valor, promovendo tomadas de decisão mais eficazes na rotina operacional. Nesse sentido, um dos principais impactos da IoT é o ganho de velocidade nas transferências de dados.”
 
“O perfil dos clientes sofreu muitas mudanças, uma vez que eles têm mais acesso a informações, aumentando, portanto, seus conhecimentos, experiências e nível de exigência. Essa mudança faz com que as empresas mudem suas estratégicas para elevar o nível de satisfação do cliente.”
Ao se desenvolver um website é preciso ter em mente que nosso papel é levar informação de uma forma eficiente e clara ao nosso cliente, seja os dados de um produto para compra ou um artigo, para que isso ocorra, ele deve ser adaptável à qualquer dispositivo atual ou que possa vir a surgir, como isso é possível, levando em consideração que a tecnologia evolui cada vez mais rapidamente?
· O microbrowser utilizado pelos celulares compatíveis com tecnologia WAP mostram que existe a possibilidade de surgimento de aparelhos incompatíveis com a tecnologia atual o que dificultaria o desenvolvimento único.
· A adaptação de um web site à qualquer dispositivo está ligado ao tamanho, resolução, da tela de exibição que permite que a adaptação possa ocorrer somente com o CSS3.
· A adaptação de um web site à qualquer dispositivo deve ser realizado utilizando a linguagem Javascript, sendo o CSS3 apenas um complemento através de diretrizes que gerenciam o tamanho do componente por pixel ou porcentagem.
· Um web site responsivo não precisa de preocupação em relação a disposição dos elementos, pois sendo essa realocação dinâmica, as informações fluirão de forma coerente sempre.
· Situações como acesso ao web site utilizando um mouse e teclado, ou touch screen afetam a responsividade do site, assim caso surjam outras formas de interação acabará afetando a forma de desenvolvimento futuramente.
Sua resposta
A adaptação de um web site à qualquer dispositivo está ligado ao tamanho, resolução, da tela de exibição que permite que a adaptação possa ocorrer somente com o CSS3.
Correto, após o surgimento do CSS3, vieram as media queries onde o CSS dos elementos é aplicado condicionalmente a resolução da tela, permitindo que o haja compatibilidade com dispositivos existentes hoje e que venham a surgir.
Questão 4
“O Design Responsivo não simplesmente encolhe o conteúdo, mas adapta os elementos a fim de entregar ao usuário o melhor conteúdo e navegação para aquele cenário. Para colocar em prática esse conceito é preciso de técnica, e uma das melhores técnicasé o Design Responsivo Fluído (...)”
Quando tratamos o designe responsivo, foi discutido alguns elementos essenciais que precisam ser aprofundados pelo desenvolvedor, como grid fluído, imagens e mídia flexível, media queries entre outros. Levando em consideração o design responsivo e sua função junto ao usuário, é correto afirmar que:
· A utilização do Grid, independente se ele for fluído ou não, é um principio básico para aplicação de design responsivo para que a atualização do layout ocorra de maneira consistente.
· Em média 13% dos monitores utilizam a resolução 1024x768 pixels, dessa forma é interessante utilizar esse padrão como resolução base no qual outras distribuições de tela se aplicam.
· Mídias flexíveis determina que não necessariamente será o mesmo arquivo da imagem utilizada em todas as resoluções levando em consideração que a ideia que a mídia transmite precisa se manter a mesma.
· As media queries trazem um dinamismo ao site pois conseguimos tratar um tamanho de resolução para determinado comportamento, porém precisa ser trabalhado junto com Javascript.
· Ao desenvolver um site responsivo precisamos ter muito cuidado para que a estrutura respeite somente a acessibilidade em qualquer resolução que assuma para o usuário final
Sua resposta
As media queries trazem um dinamismo ao site pois conseguimos tratar um tamanho de resolução para determinado comportamento, porém precisa ser trabalhado junto com Javascript.
Falso, pois a intenção das medias queries e que essa aplicação seja dinâmica a nível cliente, sem a necessidade da utilização de javascript na adaptação ao estilo proposto
Questão 5
“Podemos definir SEO (Search Engine Optimization) como uma série de aprimoramentos no código e no conteúdo de um site visando que ele seja encontrado mais facilmente e melhor avaliado por algoritmos de mecanismos de busca.”
Levando em consideração que a internet é um espaço muito amplo com diversas ‘vitrines’ não é fácil se destacar para poder alcançar com eficiência o público esperado para o seu produto. Levando em consideração o estudo para trazer a adaptação dinâmica de um site é correto afirmar que:
· Os algoritmos do google consideram sites com design responsivo como prioritários em seu sistema de busca e dá um destaque maior a esses produtos em suas primeiras páginas.
· É de extrema importância que um web site esteja como primeiro resultado no sistema de busca de palavras chaves e isso ocorre desde que o site tenha uma arquitetura adaptável, segundo o algoritmo do google
· Levando em consideração a otimização dos algoritmos de busca do google com sites responsivos, se torna desnecessário outros métodos de otimização de SEO.
· Possuir uma URL amigável é a característica de maior importância juntamente com a adaptabilidade do site para trazer um destaque nos sistemas de busca na internet.
· Para que o web site tenha uma adaptação coerente a utilização de somente HTML e CSS não é o suficiente, é necessário utilizar algum framework como bootstrap, material entre outros.
Sua resposta
É de extrema importância que um web site esteja como primeiro resultado no sistema de busca de palavras chaves e isso ocorre desde que o site tenha uma arquitetura adaptável, segundo o algoritmo do google
Correto, pois o algoritmo do google prioriza em seu sistema de busca sites que podem ser visualizados de forma adequada em diferentes dispositivos. Isso simplifica e muito o papel do desenvolvedor a estrutura SEO do web site.
Questão 6
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,
· é utilizado nos celulares e é chamado de page scale, diferente do desktop que recebe o nome de page zoom.
· são conjuntos de linhas verticais e horizontais que auxiliam na organização do conteúdo de forma uniforme, dentro do espaço determinado.
· é 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.
· existem diversos templates de grids na web, como também temos a ferramenta guideguide para o Photoshop que facilita a criação dos mesmos.
· não há como redimensionar a tela do navegador, uma vez que todos os aplicativos acabam ocupando toda a largura do celular.
Sua resposta
é 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.
Questão 7
Para usuários que utilizam um smartphone com uma resolução de tela pequena, os requisitos de experiência do usuário para navegação serão diferentes. Assim, por razões do tamanho da tela, a navegação precisará caber naquele espaço.
 
A navegação na maioria dos dispositivos móveis precisa ser ativada. O polegar é maior e menos preciso do que um mouse de computador, portanto, seus links de navegação podem precisar ser maiores.
 
Desse modo, as soluções que você adotar na aplicação de um site responsivo, dependerá de uma série de fatores, incluindo as necessidades do site, a natureza dos menus e as expectativas dos usuários.
 
Pensado na construção de um menu responsivo, e projetando ele com a melhor usabilidade, considerem as informações apresentadas, analise as afirmativas a seguir:
 
I. É importante realizar ajustes rápidos no design do visual do menu para se encaixar melhor em um layout móvel.
II. Aumentar a capacidade de toque dos links de navegação garantindo que eles tenham pelo menos 44 pixels quadrados e que pareçam links óbvios em um contexto móvel é uma boa prática.
III. Considere o melhor local para navegação e mova o menu para o final da página, usando apenas CSS.
IV. Use CSS para exibir um menu diferente dependendo do dispositivo que está sendo usado.
Considerando o contexto apresentado, é correto APENAS o que se afirma em:
· I e III.
· II e IV.
· I, II e III.
· I, II e IV.
· I, II, III e IV.
Sua resposta
II e IV.
Pensado na construção de um menu responsivo, e projetando ele com a melhor usabilidade, tratam-se de boas práticas, realizar ajustes rápidos no design do visual do menu para se encaixar melhor em um layout móvel, aumentar a capacidade de toque dos links de navegação garantindo que eles tenham pelo menos 44 pixels quadrados e que pareçam links óbvios em um contexto móvel é uma boa prática, considerar o melhor local para navegação e mover o menu para o final da página, usando apenas CSS, e utilizar CSS para exibir um menu diferente dependendo do dispositivo que está sendo usado.
Questão 8
O texto responsivo em si é uma abordagem para fazer textos em uma página da web que podem ser lidos em uma variedade de dispositivos e tamanhos de tela. Isso não significa apenas alterar o tamanho em uma tela diferente. Abrange boa legibilidade e coesão entre o texto e os elementos que o rodeiam.
 
Navegadores diferentes podem processar uma fonte de maneira diferente. Até mesmo o mesmo navegador em sistemas operacionais diferentes pode processar a fonte de maneira diferente. Isso acontece porque cada sistema operacional pode ter ummecanismo central de renderização de texto diferente.
 
O estudo dos textos responsivos, ou tipografias, envolvem diversas boas práticas para ficarem mais apresentáveis aos usuários.
 
I. O Lighthouse sinalizará as páginas com tamanhos de fonte muito pequenos. O farol sinaliza páginas com 60% ou mais de texto com um tamanho de fonte menor que 12 px.
 
PORQUE
 
II. Projetar um texto responsivo não é apenas seguir a diretriz ou o padrão, caso alguma escala não se adequar ao conteúdo do seu site, ajuste-a. Experimente seu texto em vários dispositivos, especialmente no celular. Não tenha medo de quebrar a regra e use a melhor estrutura de texto para o seu site.
A respeito dessas asserções, assinale a alternativa correta.
· As asserções I e II são proposições verdadeiras, mas a II não justifica a I.
· As asserções I e II são proposições verdadeiras e a II justifica a I.
· A asserção I é uma proposição verdadeira e a II, falsa.
· A asserção I é uma proposição falsa e a II, verdadeira.
· As asserções I e II são proposições falsas.
Sua resposta
As asserções I e II são proposições verdadeiras e a II justifica a I.
 O Lighthouse sinalizará as páginas com tamanhos de fonte muito pequenos. O farol sinaliza páginas com 60% ou mais de texto com um tamanho de fonte menor que 12 px. E projetar um texto responsivo não é apenas seguir a diretriz ou o padrão, caso alguma escala não se adequar ao conteúdo do seu site, ajuste-a. Experimente seu texto em vários dispositivos, especialmente no celular. Não tenha medo de quebrar a regra e use a melhor estrutura de texto para o seu site. Ambos são boas práticas para aplicação de textos responsivos.
Questão 9
Falando dos recursos de tooltips (dica de ferramenta), que é um invenção muito boa, pois pequenos detalhes em web design desempenham um grande papel quando tratamos da experiência do usuário. Normalmente a dica de ferramenta, são usadas para apresentar uma pequena quantidade de conteúdo oculto (principalmente explicativo), que quando utilizado em conjunto com o cursor ou o ponteiro do mouse, exibe informações sobre um item sem a necessidade de clicar nele.
Assinale a alternativa que apresenta corretamente a relação com o recurso tooltip.
· Também conhecido como balão, balão de ajuda, dica de ferramenta, ou dica de tela, é exibida quando o usuário digita a palavra sobre o objeto.
· Os tooltips são úteis para novos usuários porque permitem que estes aprendam sobre cada ícone ou objeto passando o mouse sobre eles. 
· O recurso tooltip ainda está em desenvolvimento para aplicação de navegadores da internet, como texto alternativo ou texto de título. 
· Dependendo do aplicativo, o tooltip torna-se inviável em poder exibir o nome completo do objeto sobre o qual o mouse está passando, até a exibição de informações adicionais ou uma explicação detalhada sobre o que essa ferramenta ou objeto faz, por serem informações muito grandes.
· A forma como um tooltip é implementado, seja um tipo de caixa de foco ou uma janela separada, independe da escolha do desenvolvedor web. 
Sua resposta
Os tooltips são úteis para novos usuários porque permitem que estes aprendam sobre cada ícone ou objeto passando o mouse sobre eles. 
Normalmente os tooltips, são usados para apresentar uma pequena quantidade de conteúdo oculto (principalmente explicativo), que quando utilizado em conjunto com o cursor ou o ponteiro do mouse, exibe informações sobre um item sem a necessidade de clicar nele, por isso são úteis para os novos usuários porque permitem que o usuário aprenda sobre cada ícone ou objeto passando o mouse sobre eles. 
Questão 10
Os grids (também conhecidos como grades), são conjuntos de linhas verticais e horizontais que auxiliam na organização do conteúdo de forma uniforme, dentro do espaço determinado, proporcionando tanto equilíbrio visual como estrutural.
 
São elementos fundamentais para o design do layout, pois através dele podemos ordenar, alinhar, redimensionar e distribuir os elementos gráficos dentro de sua estrutura, organizando melhor as informações no site.
 
De acordo com as informações apresentadas na tabela a seguir, faça a associação das terminologias envolvidas nos estudos do grid contidas na Coluna A com suas respectivas nomenclaturas, apresentadas na Coluna B.
 
	I Colunas
	1. lacunas entre as colunas, que têm como função basicamente, auxiliar na separação e limitação do conteúdo alocado na página.
	II Gutter
	2. blocos verticais dentro do layout do grid, elas quem determinarão a área onde será disposto o conteúdo.
	III Margem
	3. intervalos de layouts predeterminados para diferentes tipos de tamanho de telas.
	IV Breakpoints
	4. os espaços laterais tanto à esquerda como à direita do conteúdo da página.
Assinale a alternativa que apresenta a associação CORRETA entre as colunas.
· I - 4; II - 3; III - 2; IV - 1.
· I - 2; II - 1; III - 4; IV - 3.
· I - 4; II - 1; III - 2; IV - 3.
· I - 3; II - 4; III - 1; IV - 2.
· I - 1; II - 3; III - 2; IV - 4.
Sua resposta
I - 2; II - 1; III - 4; IV - 3.
As colunas correspondem aos blocos verticais dentro do layout do grid, elas quem determinarão a área onde será disposto o conteúdo. Os gutters, são as lacunas entre as colunas, que têm como função basicamente, auxiliar na separação e limitação do conteúdo alocado na página. As margens correspondem aos os espaços laterais tanto à esquerda como à direita do conteúdo da página. E finalmente os breakpoints são os intervalos de layouts predeterminados para diferentes tipos de tamanho de telas.