Você está na página 1de 226

DESENVOLVIMENTO DE

CONTEDOS WEB PARA


MOBILE
Agenda
Apresentao da disciplina
Introduo ao ecossistema mobile
Breve histrias das linguagens de marcao mobile
HTML5 de Relance
Breve reviso de CSS
Estratgia de desenvolvimento de contedos mobile
Viewport
Web Design Responsivo
Layout Fluido
Mobile First
Quem sou eu
Eduardo Mendes
MSc em Engenharia de Teleinformtica
DETI UFC
edumendes@gmail.com
Disciplina
Aulas tericas e prticas
Sexta noite
Sbado manh
Projeto
Sbado a tarde
Avaliao
Projeto + exerccios prticos
O Ecossistema Mobile
Mobile Web
Qual a principal diferena?
A tela menor!
Ecossistema mobile
No apenas uma questo de tamanho fsico
Mobile um cenrio de uso que varia dependendo do
aparelho
Usurios mveis geralmente so exatamente isso: mveis
O ambiente dos usurios pode ser imprevisvel
O usurios mveis esperam sites otimizados, que se
adaptem sua localizao e ao seu ambiente
Cenrio de Uso
As caractersticas so importantes
Fsicas
Teclado completo com teclas
reais
Dispositivo de seleo super
preciso
Tela larga, mltiplos monitores
CPU/GPU poderosas
Disco rgido de alta capacidade
Teclado limitado/virtual
Dispositivo de seleo toque
Tela pequena, que pode
rotacionar
CPU/GPU menos capacitada
Armazenamento menor
Experincia
Tipicamente utilizado de
localidades previsveis
Bom para navegao/
pesquisa em aberto
Fcil de trocar entre vrias
tarefas
Usurio est focado e
confortvel
Tipicamente utilizado em
ambientes imprevisveis
Bom para consultas rpidas
Destinado tarefas
individuais discretas
Usurio frequentemente
distrado ou ocupado
O Ambiente
Relgio embutido

Bssola
Geolocalizao

Acelermetro
Cmera

Termmetro
Messagens

Calendrio
O que considerar ao mobilizar
seu site?
Quem est usando seu site?
O que seus usurios fazem quando chegam ao seu site?
De onde seu site est sendo acessado?
Quando seu site acessado?
Porque os usurios esto indo ao seu site?
Como eles acessam o seu site?
Responder
Pode ajudar voc a otimizar o tempo que voc
gasta sabendo o que voc tem que fazer para um
site mobile
A Web uma s
Projetar para uma web
De forma geral:
Todos os dispositivos devem ser capaz de acessar seu site
No exclua usurios baseado no dispositivo ou
navegador que ele usa
Separe contedo do comportamento e da
apresentao
Separe CSS e JS
No adicione informaes de comportamento e
apresentao junto com o cdigo
Breve histria das linguagens para
mobile
Breve histria das linguagens de marcao mobile
SGML
HTML
XML
HDML
cHTML
XHTML
Basic
WML
XHTML
HTML5
XHTML-MP
1970s 1990s 2000s
Padronizada 2001
Atualizada em 2008
XHTML-MP e HTML5
Antes do aparecimento dos smartphones mais
modernos, XHTML-MP era a linguagem de marcao
mais comum para dispositivos mveis
XHTML-MP foi dividido em mdulos
Isso possibilitou um meio para evoluir de WML para
XHTML-MP
Permite que os navegadores com menos recursos
realizem vrias tarefas comuns no mundo web
Novos telefones e dipositivos so capazes de lidar
com HTML5
HTML5 de relance
Tags semnticas
<header> e <footer>
Em comparao com a antiga tag <div> no h
nenhuma diferena entre em termos de
apresentao
Mas no futuro os motores de pesquisa se
benefciaro conseguindo diferenciar o que seja o
contedo real de outros elementos
Tags semnticas
<article> e <section>
Artigos representam um bloco completo de
contedo
Uma seo um pedao do todo
Artigos (article) podem ser compostos de mliplas
sees (section)
Sees podem ter vrios artigos
Tags semnticas
<figure> e <figcaption>
<fgure> um conteiner para contedo (geralmente
imagens) e <fgcaption> fornece uma legenda para
aquele contedo
<nav>
indica que um determinado contedo a navegao
da pgina
<header>
<hgroup>
<h1>Ttulo</h1>
<h2>Subttulo</h2>
</hgroup>
</header>

<nav>
<ul>
Navegao
</ul>
</nav>
<section>
<article>
<header>
<h1>Ttulo</h1>
</header>
<section>
Contedo
</section>
</article>

<article>
<header>
<h1>Ttulo</h1>
</header>
<section>
Contedo
</section>
</article>
</section>

<aside>
Principais links
</aside>

<figure>
<img src="..."/>
<figcaption>Cartao 1.1</figcaption>
</figure>

<footer>
Copyright
<time datetime="2013-08-01">
2013</time>.
</footer>
<input>
O elemento <input> agora tem uma srie de novos
valores para o atributo type, que permite que os
navegadores faam coisas bacanas, dependendo do
seu valor.
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url

Breve reviso CSS
CSS
O HTML cuida e d semntica ao contedo
O CSS uma linguagem de estilo utilizada para
defnir a apresentao de documentos
Ao invs de colocar a formatao dentro da
pgina, cria-se uma pgina que contm todos os
estilos (regras CSS)
Seletores CSS
Seletores agrupam as regras CSS aplicadas a um
ou mais elementos em um pgina
body{
background-color: #d2b48c;
margin-left: 20%;
margin-right:20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
Todo elemento vem dentro de
uma caixa
Vrios tipos de caixas e bordas
Elementos aninhados herdam as
regras CSS
Um grfico para o aninhamento
html
head body
title p
q
Os elementos aninhados
html
body
p p h1 h2 p
img a em a
Elementos aninhados
body {
font-family:sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
em {
font-family: serif;
}
Os elementos aninhados
html
body
p p h1 h2 p
img a em a
Classe css
<h2>Ch Verde Gelado</h2>
<p class="verde">
<img src="../imagens/green.jpg">
Mistura de vitaminas e sais minerais, este drink
combina benefcios do ch verde com a camomila.
</p>




p.verde {
color: green;
}
Podemos fazer mais
blockquote.verde, p.verde {
color: green;
}
<blockquote class=verde>
.verde {
color: green;
}
O atributo id
Similar a classe
Um atributo chamado id
Deve possuir um nome nico
S um elemento na pgina deve possuir aquele id
especfco

<p id=mensagem>
Pgina desenvolvida em HTML
</p>
Como usar?
p.especial {
color: red;
}

.especial {
color:red;
}
Seleciona apenas as tags <p> que tenham
a classe especial
Seleciona todos os elementos
que tenham a classe especial
Como usar?
#mensagem{
color: red;
}

p#mensagem{
color:red;
}
Seleciona qualquer elemento
que possua o id mensagem
Seleciona apenas o elemento <p>
que tenha o id mensagem
Padding em uma linha
padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px

padding: 0px 20px 30px 10px;
Margem em uma linha
margin-top: 0px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 10px

margin: 0px 20px 30px 10px;
1 valor para todos os paddings
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px

padding: 20px;
Margem horizontal e vertical
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px

margin: 0px 20px;
Borda em uma linha
border-width: thin;
border-style: solid;
border-color: #007e7e;

border: thin solid #007e7e;
Fundo em uma linha
background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;


background: white url(images/cocktail.gif) repeat-x;
Blocos, inline e o display
Elementos de bloco
Separam o contedo
Elementos inline
h2
p
blockquote
p
q
A regra display
A regra display pode alterar um elemento de
bloco para um elemento inline
Muito utilizado para trabalhar com menus


Valores para display

li {
display: inline;
}

li {
display: block;
}

li {
display: none;
}

O float
Faz com que um elemento futue na pgina, caso
haja espao
Utilizado para da forma ao layout
O elemento pode futuar a direita ou a esquerda
Layout com float
float: left;
width: 240px;
float: right;
width: 240px;
margin: 10px 260px 0px 250px;
Estratgias de desenvolvimento
de contedo mobile
Estratgias
No fazer nada
O contedo para
Desktop existente o
mesmo que enviado
para os dispositivos
mveis sem nenhuma
mudana ou otimizao
de layout
Multi dispositivo
O mesmo contedo
enviado para desktop e
mobile, mas estilos e
scripts apropriados
para o tamanho fsico
de destino
Verso mobile especfica
Dispositivos mveis e
desktop recebem
verses diferentes
apropriadas ao seu
tamanho especfico
No fazer nada
Contedo prprio para Desktop enviado para o
dispositivo mvel de forma inalterada
No fazer nada
Menos trabalho para
desenvolver
No h necessidade de
manter cpias separadas de
contedos ou estilos
No otimiza a experincia do
usurio
Contedos largos e
complexos que podem
empobrecer a performance
Vantagens Desvantagens
OK: Pginas leves que possuem contedo flexvel e fluente,
pginas que so organizadas de forma mais vertical
RUIM: Pginas com layouts complexos, que possuem itens de
contedo grandes (imagens) ou que utilizam plugins como flash
Contedo adaptado
Mesma pgina enviada para os dispositivos
desktop e mobile
Entretanto, CSS e outros contedos podem se
adaptar ao tamanho fsico do dispositivo
desktop.css
mobile.css
Contedo adaptado
Usar o mesmo contedo
reduz o trabalho de
desenvolvimento
Boa experincia para
tamanhos fsicos mltiplos
Pode ser difcil converter o
contedo para este modelo,
dependendo da complexidade
da pgina
Uso inapropriado de estilos
pode fazer esta estratgia falhar
Vantagens Desvantagens
OK: Pginas com semntica bem definida por HTML e utiliza
CSS e JS para definir aparncia e comportamento
RUIM: Pginas complexas com animaes, vdeos e grandes
imagens incorporadas, cujo a diferena para mobile seria muito
grande
Verso Mobile Especfica
Verso de contedo especfca para mobile
enviada para os dispositivos mveis
Envolve algum redirecionamento do lado do
servidor
Contedo especfico
Cada tamanho fsico tem
uma experincia melhor
Verses podem ser
desenvolvidas de maneira
independente
Aumenta o trabalho de
desenvolvimento
A verifcao do tipo de
dispositivo no servidor pode
falhar
Vantagens Desvantagens
OK: Pginas complexas e que possuem uma grande diferena
de um tamanho fsico para o outro; sites que possuem
independncia de desenvolvimento das verses
RUIM: Pginas simples que podem ter seu contedo adaptado
facilmente
Web Design Responsivo
Fonte: http://www.instantshift.com/2012/09/06/why-do-you-need-responsive-web-design-infographic/
Ethan Marcotte
Problemas
Um site precisa funcionar em um nmero de aparelhos,
plataforma e navegadores que cresce a cada dia


Web Design Responsivo
Origem: A List Apart, Ethan Marcotte, 2010
Ao invs de adptar designs desconectados para cada um
do nmero cada vez maior de dispositivos web, podemos
trat-los como faces da mesma experincia.

Ns podemos projetar para uma experincia ideal de
visualizao, e embutir tecnologias padronizadas nos
nossos designs no somente para torn-los mais fexveis,
mas mais adaptados para a mdia que os renderiza.

Web Design Responsivo
Conjunto de abordagens para adaptar o
contedo plataforma utilizada pelo usurio
Pginas se adaptam a todo tipo de dispositivo

Como fazer: design fexvel e adaptvel
navegador
dispositivo
contexto do usurio
Web Design Responsivo
Conjunto de abordagens para adaptar o
contedo plataforma utilizada pelo usurio
resolues diferentes
orientaes de tela diferentes
plataformas de interao diversas
otimizao de performance
Desafios
Diferentes navegadores esto disponveis
Chrome, Opera, Safari
Capacidade para tecnologias de cada navegador varia muito
Muitos dos antigos navegadores no suportam um JS ou CSS
corretamente
Dispositivos mveis so menores e mais lentos
Redes mveis podem ter limites de acesso e transferncia
Complicaes para contedos ricos
Interfaces mveis obrigam-nos a repensar nossos websites
Se ele consegue renderizar uma verso desktop, no quer dizer que
seja a melhor opo
No responsivo
http://interim.it/
http://www.bostonglobe.com/
Web Desing Responsivo
!" $%"$&" '()*+&"
'&,& -./."
." /*"'."*01."
Mas ser possvel
ter somente um conjunto de pginas
para todas as mdias?
Web Design Responsivo
Priorizao do Contedo
Projetar para o contedo que realmente importa
No apenas um design menor
Completa reestruturao de contedo
Contedo til e com foco
Web Design Responsivo
Web
Design
Responsivo
Grid
Layout
Fluido
CSS
Media
Queries
Imagens e
mdias
flexveis
Controle
do
Viewport
Design Responsivo
Um conjunto de regras CSS diferente so
aplicadas a partir da avaliao de certas
caractersticas do navegador em uso
Media queries
Utilizao de medidas proporcionais (%,
em) invs tamanhos absolutos (px) para
os elementos do layout
Grid Layout
Fluido
Atravs de CSS fazer com que imagens
mdias se adaptem para caber no layout
de acordo com as restries de tamanho
Imagens e
recursos flexveis
Viewport e Zoom
Viewport
Um pixel no mundo Desktop
Em um tela de computador normalmente 1px 1px
Uma imagem com largura de 200px ir ocupar 200px
da tela fsica do monitor
Se o tamanho for defnido em %
o valor ser calculado proporcional ao tamanho da janela
do navegador
Viewport
Os navegadores mobile tentam exibir pginas
web feitas para desktop
Ajuste automtico do zoom
Viewport
Viewport o espao disponvel no navegador
para uma pgina ser renderizada
tamanho da janela do navegador, menos:
barra de ferramentas
barra de rolagem
navegao
<meta name="viewport" content="">
Viewport
<meta name="viewport" content="">
Principais parmetros para content
width/height: valor ou device-[width|height]
name=viewport content=width=device-width
initial-scale: defne o zoom inicial, 0 a 10
name=viewport content=width=device-width, initial-scale=1
user-scalable: yes | no
name=viewport content=width=device-width, initial-scale=1, user-
scalable=no
minimum-scale, maximum-scale: 0.25 a 10
name=viewport content=width=device-width, initial-scale=1, user-
scalable=no, maximum-scale=1.5

Viewport e CSS
@viewport {
width: 320px;
height: device-height;
zoom: 1;
max-zoom: 2;
min-zoom: 0.5;
}
Zoom e o Pixel
O zoom uma funcionalidade presente em
navegadores modernos
Consideres
uma imagem de 150px em uma pgina
aplica-se zoom de 200%
a imagem passa a ocupar 300px na tela
Zoom e o Pixel
O Zoom altera a visualizao, mas no modifca o
cdigo
a imagem continua a ser descrita com 150px
150 CSS pixels + 200% zoom -> 300 pixels fsicos
Viewport e o Zoom
O viewport
diminui quando se aumenta o zoom
aumenta quando se diminui o zoom
O viewport medido em CSS pixels
Exemplos
Imagem de 320x356px, iPhone, viewport padro
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Exemplos
Viewport com a mesma largura da imagem
<meta name="viewport
content="width=320,initial-scale=1">
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Aumentando o zoom
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Diminuindo o zoom
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Configurao ideal
A confgurao ideal aquela que considera a
largura do prprio dispositivo como seu viewport
Os dispositivos mveis tm larguras diversas de
telas
<meta name="viewport
content="width=device-width">
Configurao ideal
O zoom tambm no deve estar alterado

<meta name="viewport
content="width=device-width,initial-scale=1">
Viewport
Sempre habilite o zoom
Media queries
CSS Media Types
Permitem que se apliquem regras especfcas
mdia que o renderiza
Media Type Description
all
Used for all media type devices
aural
Used for speech and sound synthesizers
braille
Used for braille tactile feedback devices
embossed
Used for paged braille printers
handheld
Used for small or handheld devices
print
Used for printers
projection
Used for projected presentations, like slides
screen
Used for computer screens
tty
Used for media using a fixed-pitch
character grid, like teletypes and terminals
tv
Used for television-type devices
Exemplos em uma pgina HTML


<link rel="stylesheet
href="estilos.css media="screen">

<link rel="stylesheet
href="impressao.css media="print">
Exemplos em um arquivo CSS

@media screen {
/* Regras CSS para monitores */ }


@media print {
/* Regras CSS para impressao */ }
CSS Media queries
Fornecem um modo de aplicar folhas de estilos
seletivamente baseado em algumas
caractersticas da mdia onde o contedo ser
renderizado
Tamanho da janela, tamanho da tela, resoluo, etc
CSS Media queries
Uma media querie consiste em um tipo de mdia e zero
ou mais expresses que verifcam as condies
particulares de recursos de mdia
height
width
orientation
device-width
device-height
as medidas podem ser testadas px, cm, in, ems
aceitam prefxos min- max-
Media queries -> design condicional
CSS Media Queries
CSS Media Queries: exemplos
<link rel="stylesheet" href="estilos.css
media="screen and (color)">

@media screen and (min-width: 481px){ }
@media screen, print and (max-width: 480px){ }
@media all and (orientation:landscape) { }
@media screen and (monochrome) { }
@media screen and (color) { }

http://www.fa7.edu.br/webmobile/mq_inicial.zip
Exemplo
Exemplo Media Querie
Exemplo de Media Querie
Exemplo de Media Querie
Operadores em Media Queries
Conjuno (and)
@media (max-width: 600px)
and (orientation: portrait) { }

Disjuno (,)
@media (min-width: 300px),
(min-height: 300px) { }

Negao (not)
@media not print and (max-width: 600px)
and(orientation: portrait) { }

Breakpoints
Breakpoints
Apesar de existirem vrios parmetros para media
queries, apenas alguns so usados de fato
a grande maioria dos sites no requer todos os
parmetros
maior parte: altura e largura do dispositivo
em que momento escrever regras para uma
resoluo diferente?
Breakpoints
Ponto em que o layout quebra
Delimitador das regras CSS para atenderem novas
especifcaes
Aquele tamanho em que novos ajustes precisam
ser realizados no layout para que ocorra a melhor
experincia possvel do layout

Abordagens sobre breakpoints
No incio dos estudos do Web Design Responsivo
breakpoints de acordo com a resoluo de dispositivos
especfcos
Para smartphones
@media only screen and (min-device-width :
320px) and (max-device-width : 480px)

Para desktops
@media only screen and (min-width : 1224px)
320 and Up
@media print { }

@media only screen and (min-width: 480px) { ... }

@media only screen and (min-width: 600px) { ... }

@media only screen and (min-width: 768px) { ... }

@media only screen and (min-width: 992px) { ... }

@media only screen and (min-width: 1382px) { ... }

Less Framework
/* Tablet Layout */
@media only screen and (min-width: 768px) and (max-width: 991px) { ... }

/* Mobile Layout */
@media only screen and (max-width: 767px) { ... }

/* Layout largo de mobile */
@media only screen and (min-width: 480px) and (max-width: 767px) { ... }

/* Retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen
and (min-device-pixel-ratio: 2) { ... }

Twitter Bootstrap
/* Telefones em landscape e abaixo */
@media (max-width: 480px) { ... }

/* Telefone em landscape a tablet em portrait */ @media
(max-width: 767px) { ... }

/* tablet em portrait a landscape e desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Desktop grande */
@media (min-width: 1200px) { ... }

Breakpoints
.coluna { foat: left; width: 25%; }
@media (max-width: 600px) {
.coluna { width: 50%; }
}

@media (max-width: 400px) {
.coluna { foat: none; width: 100%; }
}

Breakpoints
Como encontrar os breakpoints?
Mais importante do que verifcar todo tamanho de
tela de dispositivo verifcar em que tamanho o
layout realmente precisa ser ajustado

Breakpoints
Abra sua pgina original no navegador
Redimensione a janela devagar at o design parecer ruim
se mobile-frst
abra pequeno e v aumentando a janela
seno
abra grande e v diminuindo a janela
Quando achar um ponto em que o design quebra, copie o
tamanho da janela
crie uma media query com esse valor
Recarregue a pgina, veja se as mudanas melhoraram o design, e
continue redimensionando pra achar o prximo breakpoint

Responsive Design View Mozilla
Evite device breakpoints
@media only screen and (min-width: 480px) { ... }

@media only screen and (min-width: 600px) { ... }

@media only screen and (min-width: 768px) { ... }

@media only screen and (min-width: 992px) { ... }

@media only screen and (min-width: 1382px) { ... }

Utilize content breakpoints
@media (min-width: 592px) { ... }

@media (min-width: 656px) { ... }

@media (min-width: 752px) { ... }

@media (min-width: 1088px) { ... }

@media (min-width: 1312px) { ... }
Media queries: Arquivos
separados ou tudo junto?
possvel criar media queries nas chamadas de folha
de estilo
<link rel="stylesheet" type="text/css"
media="screen and (min-width:480px) href="480.css">

<link rel="stylesheet" type="text/css
media="screen and (min-width:768px) href="768.css">

@media only screen and (min-width: 480px) { ... }

@media only screen and (min-width: 768px) { ... }

1 arquivo
Somente 1 requisio
HTTP
Mais difcil de
esquecer de atualizar
Arquivo fca muito
grande
Manuteno fca mais
difcil
Vantagens Desvantagens
Vrios arquivos
O arquivo padro
menor
Organizao
melhorada
Vrias requisies
HTTP
Possibilidade de
esquecer de atualizar
algo
Vantagens Desvantagens
Media queries
sobrepostas ou empilhadas
Sobrepor ou empilhar?
No so termos tcnicos para o Design
Responsivo
Regras podem ser agrupadas por media queries
de forma exclusiva (empilhadas) ou sobreposta
(sobrecarregada)
Media queries sobrepostas
@media all and (min-width:500px) {
body {
background: blue;
font-family: serif;
}
}
@media all and (min-width:700px) {
body {
background: red;
color: #FFF;
}
}
Media queries sobrepostas
@media all and (min-width:700px) {
body {
background: red;
color: white;
}
}

@media all and (min-width:500px) {
body {
background: blue;
font-family: serif;
}
}
Media queries empilhadas
@media all and (min-width:500px) and (max-width:699px) {
body {
background: blue;
font-family: serif;
}
}

@media all and (min-width:700px) {
body {
background: red;
color: white;
font-family: serif;
}
}
Media types, media queries,
navegadores e dispositivos
Os media types j esto presentes desde CSS2
Todos os navegadores modernos suportam os tipos
screen e print
Smartphones
celulares antigos aceitavam o tipo handheld, mas
smartphones modernos ignoram
Utilizao de media queries para escrever regras
especfcas
@media screen and (max-width: 480px) { }
muitos navegadores antigos no entendem as medias queries
Media types, media queries,
navedarodes e dispositivos
Operador only
@media only screen and (max-width: 480px) { }
igual querie anterior
Arranjo tcnico para que navegadores antigos
reconheam a media querie como falsa e da no seja
avaliada
Dica
Utilize apenas o tamanho
@media (min-width: 320px) { }

simples
fcil
executa em navegadores antigos
http://www.fa7.edu.br/webmobile/cerva.zip

Exemplo
Cervejaria
Cervejaria
1 coluna 3 colunas
Estrutura
HTML
Princpio de Design
Identifque os aspectos de seu aplicativo que
variam e separe-os do que permanece igual
Pegue o que variar e encapsule para que isso no
afete o restante do cdigo
Menos consequncias indesejadas
Mais fexibilidade
Alterao
Identifcar o que
precisa ser alterado
Organizando o CSS
Regras de estrutura comuns s verses Desktop e Mobile
Regras de estrutura especfcas para Mobile utilizando
media queries
@media screen and (max-width:480px) {
}

Regras de estrutura especfcas para Desktop utilizando
media queries
@media screen and (min-width:481px) {
}
Estrutura Comum
Desktop e Mobile
http://www.fa7.edu.br/webmobile/ex_layout.zip

Exerccio
Adaptar este contedo para uma
coluna
Layout Fluido
Layout Fluido
a grande estrela hoje do Web Design
Responsivo
Com a quantidade de dispositivos que
renderizam pgina web hoje, no possvel
simplesmente copiar medidas diretas do layout
O Layout Fluido utiliza medidas fexveis
Layout Fixo
O layout fxo aquele que utiliza pixels para
determinar as larguras dos elementos do design
No se adapta s alteraes do campo de viso
do dispositivo que o renderiza
Layout fixo
Layout fixo
Layout Fluido
Layouts fuidos utilizam unidades fexveis (% , em)
para larguras ao invs de pixels
Permite que haja fdelidade do design inicial da
pgina
Layout se adapta de acordo com o campo de viso
Desafo
Se desapegar das medidas do projeto inicial
Medidas flexveis
As mais utilizadas
%
em
Medidas Flexveis
%
Utilizado para determinar as larguras dos elementos
A porcentagem em relao ao tamanho do
elemento pai
Pode ser utilizado para fontes
Tamanho relativo ao tamanho da fonte do elemento pai
%
body {
/* largura total da tela */
width: 100%;
}

section {
/* 1/3 da pgina */
width: 33.33333%;

/* padding de 10% do pai */
padding: 10%;
}
Medidas Flexveis
em

Normalmente utilizado para fontes
Medida sempre est relacionado fonte base
Um font-size implcito equivale a 16px na maioria dos
navegadores
1em = 100%
2em = 200%
em
html {
/* font-size base implcito equivalente a 16px */
}
p{
/* 16px * 1.125 = 18px */
font-size: 1.125em;
}
h1 {
/*dobro da fonte base */
font-size: 2em;
}
h2 {
/* 50% maior do que o valor base */
font-size: 150%; /* 1.5em */
}
em
Pode ser usado em qualquer propriedade mas
sempre signifcar uma relao com o tamanho da
fonte
til quando a medida de algum elemento tem
relao com texto, uma medida tipogrfca
Ex: Espaamento entre pargrafos

p { margin: 0 1em; }

p { margin: 0 5%; }
Flexibilidade nos elementos filhos
Vantagem
As medidas fexveis afetam os elementos flhos
(aninhados)
Cenrio:
Quando o usurio aumenta a fonte no navegador pra
ler melhor
todo o layout baseado em em afetado
Os filhos herdam o tamanho base
<html>
<body>
<article>
<h1>Desenvolvimento Mobile</h1>
<p>Ipsum lorum, ipsum lorum, ipsum lorum.</p>
</article>
</body>
</html>
article {
font-size: 1.25em;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.9em;
}
Quais os valores reais
article {
font-size: 1.25em;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.9em;
}
rem
Nova medida
Como o em relativo ao elemento pai, o
gerenciamento do tamanho das fontes pode fcar
complexo caso existam muitos niveis.
O rem sempre relativo ao tamanho base do
elemento root, o <html>
Para alterar tudo, altere o tamanho do font-size do
elemento html
Quais os valores reais
article {
font-size: 1.25rem;
}
h1 {
font-size: 2rem;
}
p {
font-size: 0.9rem;
}
No caso anterior
html e o body vo ter os 16 px base
O article ter 16px * 1.25 = 20px
O h1 tem 16px * 2 = 32px
O p vai ter 16px * 0.9 = 14px
viewport-units: vw e vh
Flexibiliza o tamanho de forma proporcional ao
tamanho do navegador
1vh -> 1% da largura da janela do navegador
h2 { font-size: 2vw; }
Pouco suporte dos navegadores
Utilizando o layout fluido
Utilizando o layout fluido
Mudana de paradigma
Pode ser uma tarefa rdua quando j se est
acostumado a medidas fxas
O segredo se concentrar nas propores dos
elementos do layout
Enxergar os as relaes entre os elementos do layout
ao invs de seus tamanhos fxos
Layout
.olhar {
width: 25%;
float: left;
}

Sobre boxes css
Suponha que existam 2 sections defnidas pelas
regras abaixo, eu teria um linha com 2 colunas?

section {
float: left;
padding: 5%;
width: 50%;
}


Sobre boxes css
Cada section vai ter 60% da largura da pgina
Ficar uma embaixo da outra
Causa: o padding no considerado no width
Isso um efeito do box model
Box model
No o width que determina a largura fnal
O tamanho fnal de cada elemento
section {
float: left;
padding: 5%;
width: 40%;
}
Alterando o box-sizing
Fazer com o width j inclua os valores do
padding e do border-width
section {

float: left;
padding: 5%;
width: 50%;
}
box-sizing: border-box;

Alterao do box-sizing
Cenrio: O width do elemento est defnido em
relao ao elemento pai, mas voc gostaria que o
padding fosse uma relao com o font-size do
elemento
Alterao do box-sizing
section {
box-sizing: border-box;
float: left;
padding: 1em;
width: 50%;
}

Alterando todo
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Utilizando layout fluido
Utilizando layout fluido
Para converter um layout baseado em pixels para
um baseado em propores:
Novos valores
960/960 = 1 (100%)
240/960 = 0,25 (25%)
250/960 = 26,041667%
260/960 = 27,083333%
#principal {
margin: 10px 260px 0px 250px;
}

#principal {
margin: 10px 27.083333% 0px 26.041667%;
}


Para tudo funcionar como voc
espera
<meta name="viewport
content="width=device-width, initial-scale=1" />

Evite:
<meta name="viewport
content="width=device-width,
user-scalable=no" />

<meta name="viewport
content="width=device-width,
minimum-scale=1, maximum-scale=1" />
Restrio ao layout fluido
Restrio ao layout fluido
O layout fuido a maneira de enderear uma
pgina aos vrios dispositivos de tamanhos
diferentes do dia de hoje
Mas, em certas situaes, pode no ser a melhor
opo deixar o layout fuir 100% sobre uma tela
Restrio ao Layout Fluido
Imagine este design em uma tela muito grande
Restrio ao layout fluido
Em telas muito grandes, alguns layouts fuidos
podem fcar muito esticados
espaamentos entre elementos muito grandes
interessante pensar em um limite mnimo e
mximo de tela em px
max-width
min-width

Restrio ao Layout Fluido
body {
max-width: 2000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
Imagens flexveis
Imagens flexveis
As imagens tambm precisam se adequar ao espaos de
acordo com a resoluo do aparelho
Regra CSS

img {
max-width: 100%;
}

limita a largura das imagens largura do elemento que as
contm

Recursos flexveis
possvel aplicar a mesma ideia para outros recursos
img,
iframe,
object,
embed,
video {
height: auto;
max-width: 100%;
}

Mobile First
Qual ser a melhor estratgia?
Mobile
Maior diferena
Espao dsponvel para o contedo
Existe o Scroll
Mais fexvel
rua, praia, carro, casa, cama, sof
Touch-screen
Limitaes
Tela menor, rede lenta, hardware mais lento, toque
menos preciso que o mouse
Abordagens geis
Kent Beck
TDD
Baby Steps
Mobile First
Verso mais
limitada
Contedo priorizado
Verso menos
limitada
Progressive Enhancement
Layout mais simples
Imagens menores
CSS e JS
Mais possibilidade de contedo
Layout com colunas ?
Imagens maiores
Layout widescreen
Imagens maiores
Melhoria Progressiva
O projeto web atravs de uma srie de camadas
Contedo (HTML)
Somado
marcao
bsica para
criar um
documento
que possa ser
renderizados
por vrios
navegadores
Apresentao
(CSS)
Definio de
cores,
tipografia e
organizao
do contedo
Comportamento
(JS)
Camada que
d certo
dinamismo ao
contedo
apresentado
Verso Mobile Especfica
User-Agent
Cabealho enviado atravs de requisio HTTP
Cada navegador envia um valor nico atravs do
USER-AGENT
a informao mais confvel que o servidor tem
sobre qual o navegador
http://detectmobilebrowsers.com/
O script
<?php

$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|
ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|
series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|
6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|
us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd
\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|
fetc|fy(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|
s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|
klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|
me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|
n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|
pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|
sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|
ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|
up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|
whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))

header('Location: http://detectmobilebrowser.com/mobile');

?>
XHTML-MP
um subconjunto do HTML projetado para
funcionar adequadamente em navegadores
mobile diferentes.
Ideal para navegadores de capacidade mediana
Projetando formulrios
Projetando formulrio
Costuma-se dizer que dispositivos mveis so
muito mais utilizados para consumos de
informao
Projetando formulrios
Formulrios em dispositivos mveis so limitados por
diversos fatores
largura
capacidade de entrada de dados
Checklist bsico
Minimize o nmero de telas pelas quais o usurio tem que
navegar
Quando possvel, procure usar controles de formulrios nativos
da web ao invs dos customizados
Utilize labels na parte superior ao invs de esquerda/direita
Permita ao usurio a opo de exibir os caracteres da senha
Utilize os novos inputs do HTML5
Labels superiores
Labels superiores
No h necessidade de CSS complicados ou
tabelas para montar o formulrio
Os labels permanecem visveis no momento do
zoom do formulrio
Internacionalizao facilitada: a traduo de
labels no altera o fuxo das informaes
Campo Senha
Permita ao usurio a opo de exibir os caracteres
quando ele estiver digitando senhas
Inputs HTML5
HTML5 possui mais de 12 novos tipos de input
No h problema para navegadores antigos porque
so renderizados como inputs do tipo text
2 melhorias
Os novos tipos de input permitem que os navegadores
renderizem UI mais complexas para certos tipos de
campos
Os novos atributos permitem uma interao melhorada
ou outras funcionalidades para o campo do formulrio
Inputs HTML5
Tipo do Input Descrio
email Indica que o campo um endereo de email
url Indica que o campo uma URL
number Indica que o campo deve ser uma entrada
nmerica
range Indica que o campo tem um valor mnimo e
mximo
color Indica que o campo tem um valor para cor
date Indica que o campo contm uma data ou horrio
search Indica que o campo usado para realizar
funcionalidades de pesquisa
Padres de Navegao Mobile
Top nav
Uma das solues mais fceis de implementar
manter a navegao no topo
Top nav
Fcil de implementar
Sem necessidade de
JS
Sem frulas CSS
Pode ocasionar
problemas de altura
Pode ocasionar
problemas com links
muito prximos
Vantagens
ncora no rodap
Mantm a lista de navegao no rodap do site e
um link no cabealho direcionando para esta
navegao
ncora no rodap
Fcil de implementar
Sem necessidade de JS
Sem frulas CSS
Boto nico no
cabealho
Pode desorientar
algumas pessoas
Alguns podem achar
a soluo
deselegante
Vantagens
Menu de Seleo
possvel transformar um menu em uma lista de
links em um menu de seleo
Menu de Seleo
No ocupa espao na
tela
Mantm toda a
interao no cabealho
Facilmente identifcvel
Difculdade para
estilizar select
Quando h
submenus
Necessita de JS
Vantagens Desvantagens
Alternncia
Semelhante a ncora no rodap, mas apresenta
o menu prximo. Boa aparncia e fcil de
implementar.
Alternncia
Mantm a interao
em um s local
Elegante
Facilmente escalvel
Performance
Precisa de JS
Vantagens Desvantagens
Slide esquerda
O menu de navegao acessado atravs de um
cone que move o contedo para a direita,
exibindo os links
Slide esquerda
No ocupa espao na
tela
Mantm a interao
prxima
Boa aparncia
Tcnica avanada
No escala bem
Potencialment
confuso
Vantagens Desvantagens
Somente no rodap
Semelhante a Top Nav, mas sem ncora no
cabealho
Somente no rodap
No ocupa espao no
cabealho
O contedo principal
fca destacado
Difcil de encontrar e
acessar o menu
preciso percorrer
todo o contedo
Vantagens Desvantagens
Pull Down
Revela o menu atravs de movimento de slide
Pull Down
Conveno para
smartphones
Tcnica avanada
Precisa de uma
instruo de uso
Vantagens
XHTML-MP
Links
No suporta o atributo target
D suporte ao atributo accesskey
0 a 9
No suporta iframes
Prefra lista ordenadas
<ul> ! <ol>
Referncias
https://developer.mozilla.org/docs/CSS/
Media_queries
http://www.w3.org/TR/css3-mediaqueries/