Design Responsivo

Tcnicas de
Design Responsivo
Por: Jerfeson Guerreiro.
Jerfeson Guerreiro
1. Web Developer P21 Sistemas 2. CEO & FOUNDER Expression Design 3. Graduando em Analise e desenvolvimento de sistemas -Faculdade projeo unidade guar II 4. Design Front-end e Back-end Fbrica de software faculdade projeo unidade guar II 5. Apaixonado por msica, tecnologia e cultura japonesa.
Contato.
www.facebook.com/Jerfeson.sg jefeson_guerreiro@hotmail.com www.expressiondesign.com.br
Construindo Layouts Tableless.

Layouts tableless so layouts ou pginas web construdas e estruturadas sem o uso das antigas tabelas (<table></table>), substituindo-as pela tag <div> para montar os blocos do layout.
Obs1.: Desenvolva para os navegadores modernos e depois adapte para os antigos

PASSO 1 Escolha os blocos do layout

PASSO 2 Nomear os blocos.
Se o bloco for nico, utilize ID no lugar de CLASSE, pois caso ocorra conflito de regras css, o seletor ID tem prioridade sobro o seletor CLASSE.

PASSO 3 Criar a marcao
Comece a declarao de DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">
Prossiga com a seo HEAD do documento, incluindo a codificao de caracteres, link para folhas de estilo:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> </head>

PASSO 4 Crie as DIVS para estruturar o seu layout, logo aps a tag <body>
<body> <div id="container"> <div id="header"></div> <div id="mainnav"></div> <div id="menu"></div>
<div id="contents"></div>
<div id="footer"></div> </div> </body> </html>

PASSO 5 Posicionar os blocos:
#body { margin: 0; padding: 0; background: #ddd; } #container { margin: 1em auto; width: 650px; background: #fff; } #header {background: #CF3; } #mainnav {background: #9F3; } #menu { float: right; width: 165px; background: #6F9; } #contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; }
#footer { clear: both; background: #FF9; }

PASSO 6 Adicione contedo aos blocos. e...

MENU DROPDOWN Lgica bsica
<li> # Posiciona relativamente (position:relative) e flutua esquerda (float:left). <li> <ul> # Esconda (display:none) e posicione absolutamente (position:absolute). E quando o mouse passar sobre o <li> # o submenu mostrado (display:block).

MENU DROPDOWN HTML
<ul> <li><a href='#'>Sub-ten 1</a> <ul> <li> <a href='#'>ten 2</a> </li> <li> <a href='#'>ten 3</a> </li> </ul> </li> <li><a href='#'>Sub-ten 2</a></li> <li><a href='#'>Sub-ten 3</a></li> </ul>

MENU DROPDOWN CSS
.menu li { position: relative; float: left; list-style: none; height: 50px; width: 100px; border: 1px solid #b3b3b3; text-align: center; text-shadow: 1px 1px 2px #fff; } .menu li a{ display: block; background: -webkit-linear-gradient(#b3b3b3, #fff); color: #333; text-decoration: none; font-family: arial; height: 35px; padding-top: 15px; } .menu li a:hover{ background: -webkit-linear-gradient(#000, #333); color: #fff; textshadow: 0px 0px 10px #fff; } .menu li ul { position: absolute; left: -40px; display: none; } .menu li ul li { list-style: none; height: 50px; width: 150px; border: 1px solid #b3b3b3; text-align: center; } .menu li:hover ul { position: absolute; left: -40px; display: block; }

RESULTADO
O que Design Responsivo?
a tcnica de criar pginas para a web que se adaptem a diferentes resolues, telas, dispositivos, sem precisar criar uma pgina especfica para cada situao, mantendo sempre a acessibilidade e a usabilidade
Acesso a internet em 2012

80% 70% 60% 50% 40% 30% 20% 10% 0% Celular Outros dispositivos
Celular
Outros dispositivos
Fonte: www.webpop.com
Satisfao de usurios e clientes.

Vantagens
Eficcia. Eficincia.
Beleza.
Facilidade de uso. Portabilidade.
Usabilidade/Acessibilidade
Dica 1 - CSS alternativo para navegadores antigos:
impossvel desenvolver um css que renderize em todos os navegadores. Para resolver este problema se utiliza de csss alternativos.
Ex.: <!-[if IE]> Aqui podemos informar o cdigo que quisermos.
<![endif]->
CSS alternativo para navegadores antigos:
O cdigo ao lado aplica um css diferente para o IE. Ao abrir este arquivo no IE, a div de id=main receber um padding de 10px, enquanto nos demais navegadores ela ficar sem padding
<html> <head> <style type="text/css"> #main { background-color: gray; } </style>  </head> <body> <div id="main"> Teste de utilização do padding no IE e no Chrome </div> </body> </html>
Resultado do cdigo anterior
Dentro das tags <body</body>
<body> 
<div id="main"> Teste de utilização do padding no IE e no Chrome. </div> </body>
Resultado do cdigo anterior
Media Queries
Imagens fluidas
As imagens passam a se adaptar de acordo com o tamanho do layout, basta apenas inserir a linha de cdigo a seguir:
img { max-width: 100%; }
Media Queries
Imagens fluidas
Outra tcnica bastante til cortar as laterais da imagem, fazendo com que ela fique contida na div a qual pertence, fazendo com que partes da imagem escondam-se ou apaream de acordo com a resoluo da tela.
.div_contetora_da_img { overflow: hidden; }
Media Queries
Especificam um estilo especfico de acordo com a media, resoluo, largura, etc. Os mais utilizados so...
all Para todos os dispositivos. handheld Para dispositivos de mo. Normalmente com telas pequenas e banda limitada. print Para impresso em papel. projection Para apresentaes, como PowerPoint. screen Para monitores ou outros dispositivos com telas coloridas e com resoluo adequada. tv Para dispositivos como televisores, ou seja, com baixa resoluo, quantidade de cores e scroll limitado.
Media Queries
Especificam um estilo especfico de acordo com a media, resoluo, largura, etc. Os mais utilizados so...
all Para todos os dispositivos. handheld Para dispositivos de mo. Normalmente com telas pequenas e banda limitada. print Para impresso em papel. projection Para apresentaes, como PowerPoint. screen Para monitores ou outros dispositivos com telas coloridas e com resoluo adequada. tv Para dispositivos como televisores, ou seja, com baixa resoluo, quantidade de cores e scroll limitado.
Media Queries
Seu uso feito dentro das tags <head> e </head>.
<link rel="stylesheet href="estilo.css media="screen and (color)" /> Ou in-line: @media print { /* estilos */ }
Media Queries
Parmetros do Media Queries
Width - Largura do viewport (janela do browser). Height - Altura do viewport (janela do browser). Device - width - Largura da mdia. Device - height - Altura da mdia. Orientation Orientao da Mdia. aspect-ratio Proporo. device-aspect-ratio - Proporo da tela do dispositivo. Color - Nmero de bits por cor. color-index - Nmero de entradas na tabela de pesquisa de cores. Monochrome - Nmero de bits por pixel em um buffer de quadros monocromticos. Resolution - Resoluo do dispositivo. Scan - Tipo de formao de imagens especifico para televisores. Grid - Determina se o dispositivo baseado em bitmap ou em um grid.
Media Queries
Operadores lgicos
Ou, And e Only Se utiliza o only para dizer ao navegador que o arquivo css informado s ser carregado em navegadores que suportam media queries
Media Queries
Principais resolues utilizadas
320 pixels - Smartphones no modo retrato. 480 pixels - Smartphones no modo paisagem. 600 pixels - Tablets pequenos. Ex: Amazon Kindle (600800) 768 pixels - Tablets maiores em modo retrato. Ex: iPad (7681024) 1024 pixels - Tablets maiores em modo paisagem, monitores antigos.
1200 pixels - Monitores wide.
Exemplo: Um iPhone em modo retrato, por exemplo, possui 320px de width. Se voc desenvolver um CSS para o smartphone da Apple basta utilizar o seguinte Media Querie:
/* Smartphone em modo retrato */ @media only screen and (max-width : 320px) { /* estilos */ }
Exemplo: Ipad, independete da orientao: /* iPads (restrato e paisagem)

*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* estilos */ }
Mas afinal, funciona em todos os browsers
Tenha calma gafanhoto, para tudo tem-se um jeito...
Media Queries
css3-mediaqueries-js ()
Download em: http://code.google.com/p/css3-mediaqueries-js/
Media Queries
Testando seu site em dispositivos mobile
Mobile Phone Emulator www.mobilephoneemulator.com
Principais novidades
Gradiente em textos e elementos; Bordas arredondadas; Sombras em texto e elementos; Manipulao de opacidade; Controle de rotao;
Controle de perspectiva;
Animao; Estruturao independente da posio no cdigo HTML
GRADIENTES
div { width:200px; height:200px; background-color: #FFF;

/* imagem caso o browser no aceite a feature */ background-image: url(images/gradiente.png);
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red);

/* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red); /* Opera 11.10+ */ background-image: -o-linear-gradient(green, red); }
TRANSIES
Proporciona uma transio mais suave durante a mudana de um estado para outro
Transition: a { color: white; background: gray; -webkit-transition: 0.5s; }
a:hover { color: black; background: red; -webkit-transition: 0.5s; }
BORDAS ARREDONDADAS
div { height: 50px; width: 100px; background: black; border: 5px solid yellow; border-radius: 20px; }
SOMBRAS EM CAIXAS
div { height: 50px; width: 100px; background: black; border: 5px solid yellow; border-radius: 20px; box-shadow: 0px 0px 10px #000; }
SOMBRAS EM TEXTOS
p { font-size: 50px; color: #fff; font-family: arial, sans-serif; Text-shadow: 0px 0px 10px #000; }
EXPRESSION DESIGN
Validando Formulrios
Em HTML5 existem atributos que validam o formulrio no momento em que o usurio submeter os dados, como o min, max, pattern, step, required, type e maxlenhgt. Compatvel apenas com navegadores novos.
Required
Mostra que o campo de preenchimento obrigatrio
<form> <input type="text" required value="" /> <input type="submit" value="Submit" /> </form>
Required
Pattern
Determinamos o padro de preenchimento do campo por meio de uma expresso regular. <input pattern="[0-9]{3}[A-Z]{3}" />
Pattern
Min e Max - Determinamos os valores mnimos e mximos para os campos <input type="number" max="10" /> <input type="number" max="10" /> <input type="number" max="9" min="1/> <input type="date" min="1979-12-31" />
Pattern
Determina um intervalo de nmeros e uma determinada sequncia.
<input type=number min="0" max="10 step="0.5">
Referncias
MAUJOR. Layout CSS passo a passo. Disponvel em <http://www.maujor.com/tutorial/layout-css-passo-a- passo.php> Acesso em maro de 2013. SCHIRM, Lucas. Como utilizar um CSS diferente para cada navegador. Disponvel em <http://www.ogenial.com.br/blog/cssdiferentes-navegador/> Acesso em maro de 2013. GUERRATO, Dani . Design Responsivo III Media Queries e Compatibilidade. Disponvel em <http://blog.popupdesign.com.br/design-responsivo-iii-mediaqueries-e-compatibilidade/> Acesso em maro de 2013.
EIS, Diego. Introduo sobre Media Queries. Disponvel em < tableless.com.br/introducao-sobre-mediaqueries/#.UUyTgxykqwA > Acesso em maro de 2013. W3C. Tcnicas CSS para acessibilidade a contedo web - Diretrizes 1.0. Disponvel em < http://www.w3.org/TR/2000/NOTEWCAG10CSS-TECHS-20001106/ >
W3C. CSS. Curso W3C Escritrio Brasil.

ALTERMANN, Dennis. Design Responsivo: Entenda o que a tcnica e como ela funciona. Disponvel em < http://midiatismo.com.br/omobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-elafunciona > Acesso em maro de 2013.

Design Responsivo

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design Responsivo

Enviado por

Direitos autorais:

Formatos disponíveis

Tcnicas de

www.facebook.com/Jerfeson.sg jefeson_guerreiro@hotmail.com www.expressiondesign.com.br

Construindo Layouts Tableless.

Obs1.: Desenvolva para os navegadores modernos e depois adapte para os antigos

Construindo Layouts Tableless.

Construindo Layouts Tableless.

Construindo Layouts Tableless.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">

Construindo Layouts Tableless.

Construindo Layouts Tableless.

#footer { clear: both; background: #FF9; }

Construindo Layouts Tableless.

Construindo Layouts Tableless.

Construindo Layouts Tableless.

Construindo Layouts Tableless.

Construindo Layouts Tableless.

Construindo Layouts Tableless.

O que Design Responsivo?

Acesso a internet em 2012

Satisfao de usurios e clientes.

<div id="main"> Teste de utiliza&ccedil;&atilde;o do padding no IE e no Chrome. </div> </body>

img { max-width: 100%; }

.div_contetora_da_img { overflow: hidden; }

1200 pixels - Monitores wide.

Exemplo: Ipad, independete da orientao: /* iPads (restrato e paisagem)

Mas afinal, funciona em todos os browsers

Tenha calma gafanhoto, para tudo tem-se um jeito...

Download em: http://code.google.com/p/css3-mediaqueries-js/

Mobile Phone Emulator www.mobilephoneemulator.com

div { width:200px; height:200px; background-color: #FFF;

/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red);

a:hover { color: black; background: red; -webkit-transition: 0.5s; }

Mostra que o campo de preenchimento obrigatrio

Determina um intervalo de nmeros e uma determinada sequncia.

<input type=number min="0" max="10 step="0.5">

W3C. CSS. Curso W3C Escritrio Brasil.

Você também pode gostar

<div id="main"> Teste de utilização do padding no IE e no Chrome. </div> </body>