Webdesignresponsivoeadaptativo 130704084235 Phpapp02

Web
Design
Responsivo e
Adaptativo
...................
Heraldo G. Lima Junior

Web designer - NTI | FACAPE
Estagirio
# 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

#1 Passo
> Escolha os blocos do layout.

#2 Passo
> 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.

#3 Passo
> 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 seoheaddo documento, incluindo a codificao
de caracteres, link para folhas de estilo:
<head>
<metahttp-equiv="content-type"content="text/html; charset=utf8">
<title>Page title</title>
5
<linkrel="stylesheet"href="style.css"type="text/css"media="scre

#4 Passo
> 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>
6

#5 Passo
> 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;
7

#6 Passo
> Adicione contedo aos blocos.
e..
.

#Menu Dropdown
> Lgica bsica:
<li>
#Posiciona relativamente (position:relative) e flutua esquerda (float:le
<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>
10

#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-lineargradient(#b3b3b3, #fff); color: #333; text-decoration: none; fontfamily: arial; height: 35px; padding-top: 15px; }
.menu li a:hover{ background: -webkit-linear-gradient(#000,
#333); color: #fff; text-shadow: 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; }
11

#Menu Dropdown
> Resultado:
12
# Seu layout
est pronto!
13
# O que Web 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 da pgina.
14
Fonte: Webop - http://webop.com.br/blog/mobile/o-crescimento-da-internet-movel-no-brasil
15
# Usurios satisfeitos!
Aplicaes
Eficazes
Eficientes
Bonitas
Fceis de usar
Em qualquer DISPOSITIVO!
16
# 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]->
17
* CSS alternativo para navegadores antigos
Ex.:
<html>
O cdigo ao lado aplica um
<head>
<style type="text/css">
css diferente para o IE. Ao
#main {
abrir este arquivo no IE, a
background-color: gray;
div de id=main receber
}
um padding de 10px,
</style>

</head>
<body>
<div id="main">
Teste de utilização do padding no IE e no Chrome
</div>
</body>
</html>
18
*
CSS alternativo para navegadores antigos
Resultado da aplicao do cdigo anterior:.:
Google Chrome.
Internet Explorer.
19
*
# Dentro das tags <body></body>:

<body>

<div id="main">
Teste de utilização do padding no IE e no
Chrome.
</div>
</body>
20
*
Resultado:
Google Chrome.
Internet Explorer.
21
*Media Queries
# Imagens Fludas:
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%;
}
22
*Media Queries
# Imagens Fludas:
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;
}
23
# Media Queries
24
*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
25
cores e scroll limitado.
*Media Queries
Seu uso feito dentro das tags <head> e
</head>.
<link rel="stylesheet
(color)" />
href="estilo.css
media="screen
and
Ou in-line:
@media print {
/* estilos */
}
26
*Media Queries
Parametros 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.
27
*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.
28
*Media Queries
Principais
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.
resolues
29
*Media Queries
Exemplos:
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 */
}
30
*Media Queries
Exemplos:
Ipad, independete da orientao:
/* iPads (restrato e paisagem) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* estilos */
}
31
# Mas afinal,
funciona em
todos os
browsers?
32
33
Calma, para tudo tem-se um jeito...

34
*Media Queries
css3-mediaqueries-js ()
Download em:
http://code.google.com/p/css3-mediaqueries-js/
35
*Media Queries
Testando seu site em dispositiovos mobile:
GoMo
Disponvel em:
http://www.howtogomo.com
36
37
38
# 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;
39
# Adeus
Photoshop!
40
# 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);

}
41
# Menos
Java
Script...
42
# Transies
Transition:
a{
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}
Proporciona uma
transio mais
suave durante a
mudana de um
estado para
outro.
43
# Bordas
Bordas Arredondadas:
div {
height: 50px;
width: 100px;
background: black;
border: 5px solid yellow;
border-radius: 20px;
}
44
# Sombras
Caixas:
div {
height: 50px;
width: 100px;
background: black;
border: 5px solid yellow;
border-radius: 20px;
box-shadow: 0px 0px 10px #000;
}
45
# Sombras
Texto:
p{
font-size: 50px;
color: #fff;
font-family: arial, sans-serif;
Text-shadow: 0px 0px 10px #000;
}
46
47
# 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.
48
# Required
Mostra que o campo de
preenchimento obrigatrio.
Ex.:
<form>
<input type="text" required value="" />
<input type="submit" value="Submit" />
</form>
49
# Required
50
# Pattern
Determinamos o padro de
preenchimento do campo por meio
de uma expresso regular.
Ex.:
<input pattern="[0-9]{3}[A-Z]{3}"/>
51
# Min e Max
Determinamos os valores mnimos e
mximos para os campos.
Ex.:
<input type="number" max="10"/>
52
# Min e Max
Determinamos os valores mnimos e
mximos para os campos.
Ex.:
<input type="number" max="10"/>
<input type="number" max="9"min="1/>
<input type="date" min="1979-12-31"/>

53
# Step
Determina um intervalo de nmeros
e uma determinada sequncia.
Ex.:
<input type=number min="0" max="10 step="0.5">
54
# Personalizando a mensagem de
erro.
Para isso se utiliza o atributo title.
Ex.:
<input type=number min="1" max="10"
title="Preenchaocampocorretamente!/>
*No substitui a mensagem padro, aparece junto

com ela.
55
# As pseudo-classes :valid e :invalid

Estilizam o formulrio que foi
preenchido de forma vlida (:valid) e
os que esto preenchidos de forma
errada (:invalid).
Ex.:
input:invalid { border: 1px solid red; }
56
# Referncias
MAUJOR. LayoutCSSpasso 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/css-diferentes-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-media-queries-e-compatibilidade/>
Acesso em maro de 2013.
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/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-fu
nciona
> Acesso em maro de 2013.
ALBAN, Afonso. Ampliando a usabilidade de interfaces web para idosos em
dispositivos mveis: uma proposta utilizando design responsivo. Passo Fundo: CINTEDUFRGS, 2012.
EIS, Diego. Introduo sobre Media Queries. Disponvel em < tableless.com.br/introducaosobre-media-queries/#.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/NOTE-WCAG10-CSS-TECHS-20001106/ > Acesso em maro de
2013.
57
# Obrigado pela Ateno.

58

Webdesignresponsivoeadaptativo 130704084235 Phpapp02

Enviado por

Dados do documento

Título original

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

Webdesignresponsivoeadaptativo 130704084235 Phpapp02

Enviado por

Direitos autorais:

Formatos disponíveis

Web

Heraldo G. Lima Junior

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

E quando o mouse passar sobre o

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# Construindo Layouts Tableless

# O que Web Design Responsivo?

Fonte: Webop - http://webop.com.br/blog/mobile/o-crescimento-da-internet-movel-no-brasil

CSS alternativo para navegadores antigos

Resultado da aplicao do cdigo anterior:.:

CSS alternativo para navegadores antigos

# Dentro das tags <body></body>:

CSS alternativo para navegadores antigos

Parametros do Media Queries:

Width - Largura do viewport (janela do browser).

Resolution - Resoluo do dispositivo.

Se utiliza o only para dizer ao navegador que o arquivo css

320 pixels - Smartphones no

Calma, para tudo tem-se um jeito...

Gradiente em textos e elementos;

Sombras em texto e elementos;

Estruturao independente da posio no cdigo HTML;

background-image: -moz-linear-gradient(green, red);

background-image: -o-linear-gradient(green, red);

<input type="date" min="1979-12-31"/>

*No substitui a mensagem padro, aparece junto

# As pseudo-classes :valid e :invalid

MAUJOR. LayoutCSSpasso a passo. Disponvel em <http://

# Obrigado pela Ateno.

Você também pode gostar