Responsive Web Design

Transcrição

1 Professor: DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014

2 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos 90: PC/Desktop Anos 2000: Primeiros smartphones, navegação limitada via WAP 2007-Hoje: Smartphones Mini PCs. iphones, ipads, TVs, relógios, carros, geladeiras, etc.

3 Introdução Mas como desenvolver seu website para um número cada vez maior de dispositivos??

4 Conceito que busca universalizar o acesso a páginas web. Descreve técnicas para melhoria da acessibilidade na página Foco em experiência do usuário. Usabilidade/acessibilidade Objetivo: Uma página universal

5 No que diz respeito ao desenvolvimento front-end, se baseia em três técnicas principais: Grids flexíveis Media flexível (imagens, vídeos, etc.) Media queries Quer entender o potencial do design responsivo?? visite

6 Grids Flexíveis Ideia Mapear o espaço da página com base em um canvas (geralmente baseado no browser do dispositivo). Benefícios: Ajuda a organizar o conteúdo da página Alinhamento/Padronização dos elementos da página A página possuirá o mesmo aspecto, porém em dimensões diferentes

7 Grids Flexíveis Mas como começar?? 1 Definir tamanho do canvas 2 Alterar tamanho dos elementos para se tornarem relativos ao canvas Tamanho das fontes relativa a um tamanho padrão escala em pontos (em) Tamanho dos elementos (divs) relativa ao canvas escala em percentual (%) Tamanho relativo tamanho do elemento tamanho do container = tamanho relativo

8 Grids Flexíveis - Fontes Para alterar o tamanho das fontes, devemos definir um tamanho padrão para a fonte da página, para então calcular o tamanho das demais fontes. Geralmente, definimos o tamanho da fonte base em 100%, o que na maioria dos casos representa 16 pixels. 1 body { 2 background- color: #2 A5D7F; 3 color: # FFFFFF; 4 font- size: 100%; /* tamanho base da fonte */ 5 font- family: Arial; 6 }

9 Grids Flexíveis - Fontes Em seguida, definimos um tamanho para a nossa fonte, e o convertemos para seu valor proporcional: Antes: 1 h1 { 2 font- size: 30 px; 3 } Depois: 1 h1 { 2 font- size: em; 3 } Convertendo o tamanho da fonte 16px 30px = 1.875em

10 Grids Flexíveis - Elementos Para alterar o tamanho dos elementos, devemos definir qual vai ser o tamanho do nosso canvas, e então definir o tamanho relativo dos demais elementos. Importante!! Diferentemente da fonte, o tamanho dos elementos deve ser calculado com base no tamanho do seu container (não necessariamente do canvas). O canvas é implementado por meio de uma div, e deve ter seu valor fornecido de forma relativa (%). 1 /* css que sera atribuido ao canvas */ 2 # page { 3 margin- top: 35 px; 4 margin- bottom: 35 px; 5 width: 90%; /* tamanho deve ser relativo */ 6 }

11 Grids Flexíveis - Elementos Em seguida, calculamos qual será o valor dos demais elementos em relação ao seu container. Antes: 1. main { 2 width: 576 px; 3 } 4 5. insidemain { 6 width: 432 px; 7 } Depois: 1. main { 2 width: 60%; 3 } 4 5. insidemain { 6 width: 75%; 7 } Convertendo os elementos 576px 960px = 60% 432px 576px = 75% Porque foi dividido por 576??

12 Grids Flexíveis - margins & paddings As propriedades de margin e padding representam uma propriedade importante para descrever a relação entre os elementos da página, e por isso também devem ser convertidas para manter a consistência do layout. padding: O container é o próprio elemento margin: O container é o elemento superior Antes: 1. element { 2 width: 800 px; 3 padding: 40 px; 4 } 5 6. subelement { 7 margin: 60 px; 8 } Depois: 1. element { 2 width: 800 px; 3 padding: 5%; /* 40/800 */ 4 } 5 6. subelement { 7 margin: 7.5%; /* 60/800 */ 8 }

13 Grids Flexíveis - Prática!! Que tal treinar o que acabamos de aprender?? Vamos implementar uma página web com a seguinte estrutura: 576px 518px 960px 900px Título do jornal 288px Notícias relacionadas Notícia

14 Imagens Flexíveis As imagens devem ser limitadas pelo tamanho do seu container. Para tal, utilizamos a propriedade max-width O mesmo procedimento pode ser aplicado a outros elementos de media (embed, object, video, etc) Desta forma, poderíamos montar um css para imagem da seguinte forma: 1 img, embed, object, video { 2 max- width: 100%; /* restringe o tamanho da media ao tamanho do seu container */ 3 }

15 Media Queries Até o momento aprendemos a adaptar o layout da página para várias dimensões. Mas, a estrutura da página continua a mesma!! Como faço para alterar a estrutura da página?? Aliás, isso é possível??

16 Media Queries Media Queries: Recurso presente no CSS3 que permite definir um estilo com base nas características físicas do dispositivo. O desenvolvedor informa o tipo de media e uma determinada restrição do dispositivo. O browser então valida estes parâmetros. Se verdadeiro, aplica o estilo na página. screen and ( min- width: 1024 px) { 2 body { 3 font- size: 100%; 4 } 5 } Figura : Exemplo de CSS com media query.

17 Media Queries Media queries podem ser aplicadas tanto no CSS quanto no HTML. No HTML, a condição é passada como parâmetro do elemento <link>. 1 < l i n k r e l = " s t y l e s h e e t " h r e f = " d e s k t o p. c s s " 2 media= " screen and ( min- width: 1024 px ) " /> 1 body { 2 f o n t s i z e : 100%; 3 }

18 Media Queries Ao se criar uma media query, devemos utilizar um dos parâmetros existentes para definir o tipo e a restrição da query: Tipo de Media all screen print Possíveis Restrições width height device-width orientation resolution max ou min portrait/landscape Recomendação: Ler a funcionalidade das restrições. link.

19 Sidebar: A propriedade viewport Alguns aparelhos renderizam a página em uma resolução diferente do tamanho do aparelho. No caso das primeiras versões do iphone, o Safari renderizava as páginas a 960px, apesar do aparelho possuir dimensões de 320x480. Resultado: Muitas das queries criadas não funcionavam nos aparelhos. Solução: Inserir uma meta tag especial para especificar em qual dimensão o a página deveria ser carregada. Habemus viewport. 1 <meta name= " viewport " 2 content= " initial- scale=1. 0, width=device- width "/ >

20 Media Queries - Prática Agora sim podemos fazer um layout mobile. Altere o layout da página anterior para dispositivos mobile.

21 Exercícios I 1 Implemente uma página web sobre as eleições de 2014, com aspecto similar ao exemplo utilizado em sala de aula. Esta página deverá ter o nome e foto do candidato, junto de um resumo de sua vida política. 2 Implemente uma página web sobre um assunto de sua escolha, que tenha o seguinte comportamento: 1200pixels 768pixels 1200pixels

22 Exercícios II 3 Um studio de fotografia contratou você para a montagem de uma galeria de imagens. Essa galeria será feita em uma página HTML e possuirá três layouts diferentes. Para PCs/Desktop, a galeria deverá ter até 5 colunas. Para Tablets, a galeria deverá ter até 3 colunas. Para Smartphones essa galeria deverá ter apenas uma coluna.

23 Referências, Ethan Marcotte, A Book Apart, Introdução ao, Diego Eis Disponível em: Introdução sobre Media Queries, Diego Eis Disponível em: