introdução as práticas de desenvolvimento web com design responsivo
DESCRIPTION
Apresentação de Introdução as práticas de Desenvolvimento Web com Design Responsivo utilizada no 4° Meditec - Medianeira In Technology, realizado em Medianeira - PR. Autores: Anderson Rodrigo Davi - [email protected]; Régis Eduardo Weizenmann Gregol - [email protected]. Código fonte disponível no Github: http://github.com/bicoco/agenda-meditec Exemplo layout fixo: http://agendameditec.herokuapp.com/index.html Exemplo layout responsivo: http://agendameditec.herokuapp.com/responsivo.htmlTRANSCRIPT
Introdução as práticas de Desenvolvimento Web com
Design Responsivo
Meditec 2013
Anderson [email protected]
Régis [email protected]
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!