Roteiro de atividades práticas - Semana 4 - Interfaces Web

Prévia do material em texto

<p>Roteiro de Atividades Práticas</p><p>Disciplina: Desenvolvimento de Interfaces Web</p><p>Tópicos abordados</p><p>Responsive Web Design (RWD)</p><p>Viewport e Media Queries</p><p>Layouts Flex e Grid</p><p>Objetivos</p><p>Nessa sessão, vamos conhecer os fundamentos envolvidos na criação de sites com layouts</p><p>responsivos e, também, quais os recursos do HTML e do CSS devem ser empregados.</p><p>Ao final, você deverá:</p><p>Entender os aspectos relacionados ao layout de sites responsivos</p><p>Conteúdo</p><p>Fundamentos do Layout Responsivo</p><p>Responsive Web Design (RWD) define um layout de site Web que se adapta de forma</p><p>automática às condições de tamanho do dispositivo do usuário. Para isso, são utilizados diversos</p><p>recursos das linguagens HTML e CSS no desenvolvimento de um site como as media queries, a</p><p>definição do viewport do Navegador, displays flexíveis como o flex e o grid e configuração de</p><p>dimensões flexíveis para objetos com propriedades específicas.</p><p>A imagem a seguir mostra as adaptações do layout feitas pelo site da CNN diante da redução do</p><p>tamanho da tela.</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 1/9</p><p>No artigo do Luke (https://www.lukew.com/ff/entry.asp?1514) Wroblewski</p><p>(https://www.lukew.com/ff/entry.asp?1514) , o autor apresenta alguns padrões de layout</p><p>responsivos que são implementados na prática no artigo do Pete</p><p>(https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br)</p><p>LePage (https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?</p><p>hl=pt-br) . São eles:</p><p>Mostly fluid: consiste em uma grade fluida com margens largas que se ajustam em diversas</p><p>telas de computador e que são reajustadas assim que a largura diminui.</p><p>Column Drop: consiste em diversas colunas que vão sendo empilhadas até sobrar apenas</p><p>uma coluna em dispositivos com largura reduzida. Na versão desktop, ocupa toda a área</p><p>disponível.</p><p>Layout Shifter: o layout se ajusta de formas diferenciadas em telas grandes médias e</p><p>pequenas. É mais complexo pois cada tamanho de tela exige um projeto específico.</p><p>Off Canvas: Layout em colunas que oculta algumas colunas a medida que a largura do</p><p>dispositivo é reduzida e permite ao usuário alternar entre as diversas colunas.</p><p>Tiny Tweaks: o mais simples de todos que faz pequenos ajustes no conteúdo que se</p><p>restringe a poucos elementos em uma única coluna.</p><p>A imagem a seguir mostra uma visão esquemática de alguns padrões de layout responsivo</p><p>descritos acima.</p><p>Media Queries</p><p>As media queries são filtros que podem ser aplicados aos estilos CSS com base em alguma</p><p>característica do dispositivo onde a página é apresentada para selecionar as regras que serão</p><p>aplicadas.</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 2/9</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://www.lukew.com/ff/entry.asp?1514</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=pt-br</p><p>No exemplo de código a seguir, o arquivo CSS a ser aplicado efetivamente é escolhido em</p><p>função da largura da tela.</p><p>A sintaxe padrão das media queries na linguagem CSS obedece o padrão a seguir.</p><p>Como media types, pode-se utilizar um dos itens abaixo ou uma lista separada por virgulas:</p><p>all – Indica qualquer tipo de mídias</p><p>print – Indica impressoras</p><p>screen – Indica telas de computadores, smartphones e tablets</p><p>Como media features, é possível especificar características dos dispositivos como: color</p><p>(profundidade de cores), width/height (largura e altura), orientation, resolução. As opções</p><p>principais para media features são apresentadas na tabela a seguir.</p><p>Media Feature Descrição</p><p>color</p><p>Indica a profundidade de cores do dispositivo em bits. Aceita</p><p>min/max.</p><p>Ex: @media all and (color) {...} ou Ex: @media all and (min-color: 4)</p><p>{...}</p><p>color-index</p><p>Indica o numero de cores indexadas do dispositivo. Aceita min/max.</p><p>Ex: @media all and (min-color-index: 256) { ... }</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 3/9</p><p>width e height</p><p>Indica largura e altura do viewport. Aceita min/max.</p><p>Ex: <link rel="stylesheet" media="screen and (max-device-height:</p><p>799px)" /></p><p>device-width e</p><p>device-height</p><p>Indica largura e altura do dispositivo. Aceita min/max.</p><p>Ex: @media handheld and (max-width: 15em) { ... }</p><p>orientation</p><p>Indica a proporção do viewport, podendo ser portrait ou landscape.</p><p>Ex: @media all and (orientation: portrait) { ... }</p><p>resolution</p><p>Indica a resolução de saída do dispositivo em dpi. Aceita min/max.</p><p>Ex: @media print and (min-resolution: 300dpi) { ... }</p><p>Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/@media</p><p>(https://developer.mozilla.org/en-US/docs/Web/CSS/@media)</p><p>O exemplo a seguir mostra a aplicação das media queries para a definição de características de</p><p>uma página Web.</p><p>Resolução e Viewport</p><p>Existem grandes diferenças nos tamanhos de telas, que variam de 2 a 48 polegadas. O tamanho</p><p>do pixel se altera muito de uma tela para a outra.</p><p>A solução para isso está em um ajuste do tamanho do pixel para o CSS gerando o viewport que é</p><p>uma largura de tela que compensa quando o tamanho do pixel é muito diferente do normal. Cada</p><p>tela possui um Pixel-Ratio padrão e o Navegador trata de calcular o ajuste necessário. A imagem</p><p>a seguir mostra como o Navegador trata o tamanho efetivo do pixel em uma tela de celular com</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 4/9</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/@media</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/@media</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/@media</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/@media</p><p>grande densidade. Nesse caso, para um celular com resolução de 1920 pixels (full HD) e pixel-</p><p>ratio de 3, o Navegador considera que a largura efetiva é de 640 pixels em que cada pixel final</p><p>ocupa uma área de 3x3 na tela.</p><p>Viewport = Resolução = 1920 / 3 = 640</p><p>Pixel-ratio</p><p>Para que o ajuste do viewport seja feito pelo Navegador, é necessário que a página HTML traga</p><p>no <head> a seguinte linha:</p><p><meta name="viewport" content="width=device-width, initial-scale=1"></p><p>Layout Flex</p><p>O sistema de layout Flex (flexbox) permite a definição de um módulo em que diversos itens filhos</p><p>se organizam de maneira fluida dentro de um container pai de maneira simplificada.</p><p>O exemplo de código a seguir mostra um layout de site responsivo utilizando a propriedade</p><p>display flex e o controlando da largura de cada elemento por meio de media queries, de acordo</p><p>29/08/2024,</p><p>22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 5/9</p><p>com o tamanho da tela.</p><p>Layout Grid</p><p>O sistema de Grid provido pela Linguagem CSS envolve diversos conceitos que precisam ser</p><p>entendidos para a correta aplicação no código. A imagem a seguir traz uma visão geral sobre os</p><p>conceitos fundamentais do sistema de Grid.</p><p>Fonte: Adaptado de A Complete Guide to Grid | CSS-Tricks (https://css-</p><p>tricks.com/snippets/css/complete-guide-grid/)</p><p>Dessa forma, é importante ressaltar que há dois tipos de elementos na montagem de um layout</p><p>baseado no sistema de Grid do CSS: o container e os itens. O container é o elemento pai que</p><p>agrupa diversos elementos filhos. Existem propriedades específicas para o elemento container e</p><p>propriedades específicas para os elementos item.</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 6/9</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>A imagem a seguir mostra um exemplo de código para o elemento container em que são</p><p>especificadas as propriedades display que identifica o sistema de grid, a montagem das colunas,</p><p>linhas e áreas.</p><p>Fonte: Adaptado de A Complete Guide to Grid | CSS-Tricks (https://css-</p><p>tricks.com/snippets/css/complete-guide-grid/)</p><p>Em seguida, é apresentado um exemplo de código para um item sendo posicionado com base</p><p>nas linhas do grid.</p><p>Fonte: Adaptado de A Complete Guide to Grid | CSS-Tricks (https://css-</p><p>tricks.com/snippets/css/complete-guide-grid/)</p><p>O exemplo de código a seguir mostra os layouts de um site responsivo utilizando variações de</p><p>layouts baseados na propriedade display grid por meio do uso de media queries, de acordo com</p><p>o tamanho da tela.</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 7/9</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>https://css-tricks.com/snippets/css/complete-guide-grid/</p><p>Fonte: Adpatado de CSS Grid Layout</p><p>https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/</p><p>(https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/)</p><p>Atividades</p><p>1. Você já observou as estruturas de layout do seu site favorito? Acesse e perceba as principais</p><p>áreas desse layout e observe como ele reorganiza o conteúdo para ser apresentado na tela</p><p>do celular de maneira agradável ao usuário. Essa pode ser uma boa investigação para gerar</p><p>ideias de como estruturar os seus sites para funcionarem responsivos em dispositivos</p><p>móveis.</p><p>2. Agora, a partir da estrutura de layout apresentada na imagem a seguir, implemente o código</p><p>HTML e CSS utilizando layouts grid e flex.</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 8/9</p><p>https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/</p><p>https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/</p><p>https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/</p><p>https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/</p><p>29/08/2024, 22:43 Roteiro de atividades práticas - Semana 4: Desenvolvimento de Interfaces Web - Engenharia de Software - Campus Coração…</p><p>https://pucminas.instructure.com/courses/213478/pages/roteiro-de-atividades-praticas-semana-4?module_item_id=4410684 9/9</p>