Introdução as práticas de Desenvolvimento Web com

Design Responsivo

Meditec 2013

Anderson Daviandersonrdavi@gmail.com

Régis Eduardoregiseduardogregol@gmail.com

Roteiro● Introdução

● Sites mobiles ou sites responsivos

● Resoluções de telas

● Técnicas do design responsivo

● Tipos de Medidas no CSS

● Media Queries

● Metatag ViewPort

● Ferramentas

IntroduçãoO que é web design responsivo?

É um web design que responde a quaisquer dispositivos com diferentes

resoluções de tela e, devido a uma série de técnicas é bem apresentado em

qualquer um deles.

Como surgiu?Tudo começou em um blog chamado A List Part de Ethan Marcotte. Em

2010, ele publicou um artigo com o título Responsive Web Design dando

sugestões e explicações de seus conceitos para o que ele chamou de web

design responsivo.

IntroduçãoPorque design responsivo?

"Web não é mais sinônimo de desktops e notebooks. Novos meios de

acesso, novos usuários, novos hábitos." Lopes, 2012.

Site Mobile ou Site Responsivo?

Sites Mobile

UOL

http://m.uol.com.br

GLOBO

http://m.globo.com/

Sites Responsivos

● MediaQueries http://mediaqueri.es/

● Highway Hurricaneshttp://www.highwayhurricanes.com/

Resoluções de tela

Fonte: ZEMEL (2012, p.21).

Técnicas do design responsivoAs três técnicas do Web Design Responsivo: ● Layout Fluído: Também chamado de Flexible Grid Layout, adaptação

"natural", evita barra de rolagens;

● Recursos Flexíveis: Imagens flexíveis, vídeos, etc;

● Media Queries: Reposicionamento de elementos conforme a resolução

atual da tela.

Vamos praticar?

Layout Fluído

Tipos de Medida do CSS

Pixel (px): A mais usada em folhas de estilo (CSS). É uma unidade de

medida fixa. Um píxel, representa um ponto não divisível na tela.

Point (pt): Pontos são mais utilizados em folhas de estilo de

impressão. Um ponto é igual a 1/72 polegadas e também são medidas

fixas.

Tipos de Medida do CSS

Ems (em): Ems são utilizados frequentemente para tamanhos de fonte.

São unidades escaláveis. 1em representa o tamanho da fonte do

elemento pai.

Porcentagem (%): Unidade semelhante com "em". Unidade mais

adaptável, pois se adequa a diferentes resoluções de tela.

Boas práticas:

● Utilizar "em" para tamanhos de fonte;

● Utilizar "%" para elementos de bloco.

Elementos vs Textos

Elementos são flexíveis, podem se ajustar ao espaço de tela disponível.

Textos não são flexíveis.

Vamos praticar?

Recursos Flexíveis

Recursos Flexíveis

● imagens

● vídeos

● object

● embed

● iframe

Vamos praticar?

Media Queries

Media QueriesMedia Types: Recomendação da W3C, desde o CSS2. Apresentar o

site conforme a media.

Tais como:

● all: Folha de estilo para todos os dispositivos;

● print: Utilizada para layout de impressão;

● screen: Utilizada para telas coloridas de computador.

Também existem outras medias como:

braille, embosed, handheld, projection, speech, tty, tv.

Media QueriesExemplos de Media Queries.<!-- no html -->

<link rel="stylesheet" href="style.css" media="all and (max-width: 320px)">

/** No arquivo */

@media all and (max-width: 320px) {

h1 {

font-size: 0.7em;

}

}

Vamos praticar?

Metatag viewport

Metatag viewport

● Descobrindo o tamanho da viewport○ http://benfrain.com/downloads/respond.html

Metatag viewport<meta name="viewport" content="">

width Define uma largura para o viewport. Os valores podem ser em PX ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo.

height Define uma altura para o viewport. Os valores podem ser em PX ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo.

initial-scale Define a escala inicial do viewport.

user-scalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.

Responsivo ou não?● O que vale a pena?

○ Montar layout responsivo ou site específico pra

mobile ?

● Vantagens

● Desvantagens

● Bootstrap

Ferramentas● Responsive Play - Sergio Lopes

○ http://sergiolopes.github.io/responsive-play/

● Responsive web design testing tool○ http://mattkersley.com/responsive/

● Screenfly○ http://quirktools.com/screenfly/

Curiosidades● CSS3 font-size techniques

○ http://css-tricks.com/viewport-sized-typography/

● Imagens Responsivas○ http://tableless.com.br/3-parametros-de-html-que-voce-dev-usar-em-

um-futuro-proximo/

ReferênciasZEMEL, Tárcio. Web design Responsivo, Páginas adaptáveis para todos os

dispositivos. 2012, Casa do código.

LOPES, Sérgio. Design Resposivo Por Uma Web Única. 2012. Disponível em:

<http://sergiolopes.org/responsive-web-design/>

EIS, Diego. Manipulando a metatag viewport. Disponível em: <http://tableless.

com.br/manipulando-metatag-viewport/>

Código Fonte● Github

○ https://github.com/bicoco/agenda-meditec

● Exemplo layout fixo:○ http://agendameditec.herokuapp.com/index.html

● Exemplo layout responsivo:○ http://agendameditec.herokuapp.com/responsivo.html

Obrigado!