DESENVOLVIMENTO DE
CONTEÚDOS WEB PARA
MOBILE
Agenda
• Apresentação da disciplina
• Introdução ao ecossistema mobile
• Breve histórias das linguagens de marcação mobile
• HTML5 de Relance
• Breve revisão de CSS
• Estratégia de desenvolvimento de conteúdos mobile
• Viewport
• Web Design Responsivo
• Layout Fluido
• Mobile First
Quem sou eu
• Eduardo Mendes
• MSc em Engenharia de Teleinformática
• DETI UFC
• edumendes@gmail.com
Disciplina
• Aulas teóricas e práticas
• Sexta noite
• Sábado manhã
• Projeto
• Sábado a tarde
• Avaliação
• Projeto + exercícios práticos
O Ecossistema Mobile
Mobile Web
• Qual a principal diferença?
A tela é menor!
Ecossistema mobile
•  Não é apenas uma questão de tamanho físico
•  Mobile é um cenário de uso que varia dependendo do
aparelho
•  Usuários móveis geralmente são exatamente isso: móveis
•  O ambiente dos usuários pode ser imprevisível
•  O usuários móveis esperam sites otimizados, que se
adaptem à sua localização e ao seu ambiente
Cenário de Uso
As características são importantes
Físicas
•  Teclado completo com teclas
reais
•  Dispositivo de seleção super
preciso
•  Tela larga, múltiplos monitores
•  CPU/GPU poderosas
•  Disco rígido de alta capacidade
•  Teclado limitado/virtual
•  Dispositivo de seleção toque
•  Tela pequena, que pode
rotacionar
•  CPU/GPU menos capacitada
•  Armazenamento menor
Experiência
•  Tipicamente utilizado de
localidades previsíveis
•  Bom para navegação/
pesquisa em aberto
•  Fácil de trocar entre várias
tarefas
•  Usuário está focado e
confortável
•  Tipicamente utilizado em
ambientes imprevisíveis
•  Bom para consultas rápidas
•  Destinado à tarefas
individuais discretas
•  Usuário frequentemente
distraído ou ocupado
O Ambiente
Relógio embutido
Bússola
Geolocalização
Acelerômetro
Câmera
Termômetro
Messagens
Calendário
O que considerar ao“mobilizar”
seu site?
•  Quem está usando seu site?
•  O que seus usuários fazem quando chegam ao seu site?
•  De onde seu site está sendo acessado?
•  Quando seu site é acessado?
•  Porque os usuários estão 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
• Não exclua usuários baseado no dispositivo ou
navegador que ele usa
• Separe conteúdo do comportamento e da
apresentação
• Separe CSS e JS
• Não adicione informações de comportamento e
apresentação junto com o código
Breve história das linguagens para
mobile
Breve história das linguagens de marcação 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 marcação
mais comum para dispositivos móveis
• XHTML-MP foi dividido em módulos
• Isso possibilitou um meio para evoluir de WML para
XHTML-MP
• Permite que os navegadores com menos recursos
realizem várias tarefas comuns no mundo web
• Novos telefones e dipositivos são capazes de lidar
com HTML5
HTML5 de relance
Tags semânticas
• <header> e <footer>
• Em comparação com a antiga tag <div> não há
nenhuma diferença entre em termos de
apresentação
• Mas no futuro os motores de pesquisa se
beneficiarão conseguindo diferenciar o que seja o
conteúdo real de outros elementos
Tags semânticas
• <article> e <section>
• Artigos representam um bloco completo de
conteúdo
• Uma seção é um pedaço do todo
• Artigos (article) podem ser compostos de múliplas
seções (section)
• Seções podem ter vários artigos
Tags semânticas
• <figure> e <figcaption>
• <figure> é um conteiner para conteúdo (geralmente
imagens) e <figcaption> fornece uma legenda para
aquele conteúdo
• <nav>
• indica que um determinado conteúdo é a navegação
da página
<header>!
<hgroup>!
<h1>Título</h1>!
<h2>Subtítulo</h2>!
</hgroup>!
</header>!
!
<nav>!
<ul>!
Navegação!
</ul>!
</nav>!
<section>!
<article>!
<header>!
<h1>Título</h1>!
</header>!
<section>!
Conteúdo!
</section>!
</article> !
!
<article>!
<header>!
<h1>Título</h1>!
</header>!
<section>!
Conteúdo!
</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 série de novos
valores para o atributo type, que permite que os
navegadores façam coisas bacanas, dependendo do
seu valor.
• color
• date
• datetime
• datetime-local
• email
• month
•  number
•  range
•  search
•  tel
•  time
•  url
Breve revisão CSS
CSS
• O HTML cuida e dá semântica ao conteúdo
• O CSS é uma linguagem de estilo utilizada para
definir a apresentação de documentos
• Ao invés de colocar a formatação dentro da
página, cria-se uma página que contém todos os
estilos (regras CSS)
Seletores CSS
• Seletores agrupam as regras CSS aplicadas a um
ou mais elementos em um página
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
Vários tipos de caixas e bordas
Elementos aninhados herdam as
regras CSS
Um gráfico para o aninhamento
html
head body
title p
q
Os elementos aninhados
html
body
p ph1 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 ph1 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 benefícios 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 página deve possuir aquele id
específico
<p id=“mensagem”>
Página 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 conteúdo
• 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 flutue na página, caso
haja espaço
• Utilizado para da forma ao layout
• O elemento pode flutuar a direita ou a esquerda
Layout com float
float: left;
width: 240px;
float: right;
width: 240px;
margin: 10px 260px 0px 250px;
Estratégias de desenvolvimento
de conteúdo mobile
Estratégias
Não fazer nada
O conteúdo para
Desktop existente é o
mesmo que é enviado
para os dispositivos
móveis sem nenhuma
mudança ou otimização
de layout
Multi dispositivo
O mesmo conteúdo é
enviado para desktop e
mobile, mas estilos e
scripts apropriados
para o tamanho físico
de destino
Versão mobile específica
Dispositivos móveis e
desktop recebem
versões diferentes
apropriadas ao seu
tamanho específico
Não fazer nada
• Conteúdo próprio para Desktop é enviado para o
dispositivo móvel de forma inalterada
Não fazer nada
•  Menos trabalho para
desenvolver
•  Não há necessidade de
manter cópias separadas de
conteúdos ou estilos
•  Não otimiza a experiência do
usuário
•  Conteúdos largos e
complexos que podem
empobrecer a performance
Vantagens Desvantagens
OK: Páginas leves que possuem conteúdo flexível e fluente,
páginas que são organizadas de forma mais vertical
RUIM: Páginas com layouts complexos, que possuem itens de
conteúdo grandes (imagens) ou que utilizam plugins como flash
Conteúdo adaptado
• Mesma página é enviada para os dispositivos
desktop e mobile
• Entretanto, CSS e outros conteúdos podem se
adaptar ao tamanho físico do dispositivo
desktop.css
mobile.css
Conteúdo adaptado
•  Usar o mesmo conteúdo
reduz o trabalho de
desenvolvimento
•  Boa experiência para
tamanhos físicos múltiplos
•  Pode ser difícil converter o
conteúdo para este modelo,
dependendo da complexidade
da página
•  Uso inapropriado de estilos
pode fazer esta estratégia falhar
Vantagens Desvantagens
OK: Páginas com semântica bem definida por HTML e utiliza
CSS e JS para definir aparência e comportamento
RUIM: Páginas complexas com animações, vídeos e grandes
imagens incorporadas, cujo a diferença para mobile seria muito
grande
Versão Mobile Específica
• Versão de conteúdo específica para mobile é
enviada para os dispositivos móveis
• Envolve algum redirecionamento do lado do
servidor
Conteúdo específico
•  Cada tamanho físico tem
uma experiência melhor
•  Versões podem ser
desenvolvidas de maneira
independente
•  Aumenta o trabalho de
desenvolvimento
•  A verificação do tipo de
dispositivo no servidor pode
falhar
Vantagens Desvantagens
OK: Páginas complexas e que possuem uma grande diferença
de um tamanho físico para o outro; sites que possuem
independência de desenvolvimento das versões
RUIM: Páginas simples que podem ter seu conteúdo adaptado
facilmente
Web Design Responsivo
Ethan Marcotte
Problemas
Um site precisa funcionar em um número de aparelhos,
plataforma e navegadores que cresce a cada dia
Web Design Responsivo
• Origem: A List Apart, Ethan Marcotte, 2010
Ao invés de adptar designs desconectados para cada um
do número cada vez maior de dispositivos web, podemos
tratá-los como faces da mesma experiência.
Nós podemos projetar para uma experiência ideal de
visualização, e embutir tecnologias padronizadas nos
nossos designs não somente para torná-los mais flexíveis,
mas mais adaptados para a mídia que os renderiza.
Web Design Responsivo
• Conjunto de abordagens para adaptar o
conteúdo à plataforma utilizada pelo usuário
• Páginas se adaptam a todo tipo de dispositivo
• Como fazer: design flexível e adaptável
• navegador
• dispositivo
• contexto do usuário
Web Design Responsivo
• Conjunto de abordagens para adaptar o
conteúdo à plataforma utilizada pelo usuário
• resoluções diferentes
• orientações de tela diferentes
• plataformas de interação diversas
• otimização de performance
Desafios
•  Diferentes navegadores estão disponíveis
•  Chrome, Opera, Safari
•  Capacidade para tecnologias de cada navegador varia muito
•  Muitos dos antigos navegadores não suportam um JS ou CSS
corretamente
•  Dispositivos móveis são menores e mais lentos
•  Redes móveis podem ter limites de acesso e transferência
•  Complicações para conteúdos ricos
•  Interfaces móveis obrigam-nos a repensar nossos websites
•  Se ele consegue renderizar uma versão desktop, não quer dizer que
seja a melhor opção
Não responsivo
http://interim.it/
http://www.bostonglobe.com/
Web Desing Responsivo
As	
  mesmas	
  páginas	
  	
  
para	
  todos	
  
os	
  disposi0vos	
  
Mas será possível
ter somente um conjunto de páginas
para todas as mídias?
Web Design Responsivo
• Priorização do Conteúdo
• Projetar para o conteúdo que realmente importa
• Não apenas um design menor
• Completa reestruturação de conteúdo
• Conteúdo útil e com foco
Web Design Responsivo
Web
Design
Responsivo
Grid
Layout
Fluido
CSS
Media
Queries
Imagens e
mídias
flexíveis
Controle
do
Viewport
Design Responsivo
•  Um conjunto de regras CSS diferente são
aplicadas a partir da avaliação de certas
características do navegador em uso
Media queries
•  Utilização de medidas proporcionais (%,
em) invés tamanhos absolutos (px) para
os elementos do layout
Grid Layout
Fluido
•  Através de CSS fazer com que imagens
mídias se adaptem para caber no layout
de acordo com as restrições de tamanho
Imagens e
recursos flexíveis
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 física do monitor
• Se o tamanho for definido em %
• o valor será calculado proporcional ao tamanho da janela
do navegador
Viewport
• Os navegadores mobile tentam exibir páginas
web feitas para desktop
• Ajuste automático do zoom
Viewport
• Viewport é o espaço disponível no navegador
para uma página ser renderizada
• tamanho da janela do navegador, menos:
• barra de ferramentas
• barra de rolagem
• navegação
<meta name="viewport" content="">
Viewport
•  <meta name="viewport" content="">
•  Principais parâmetros para content
•  width/height: valor ou device-[width|height]
•  name=“viewport”content=“width=device-width”
•  initial-scale: define 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 página
• aplica-se zoom de 200%
• a imagem passa a ocupar 300px na tela
Zoom e o Pixel
• O Zoom altera a visualização, mas não modifica o
código
• a imagem continua a ser descrita com 150px
• 150 CSS pixels + 200% zoom -> 300 pixels físicos
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 padrão
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
Configuração ideal
• A configuração ideal é aquela que considera a
largura do próprio dispositivo como seu viewport
• Os dispositivos móveis têm larguras diversas de
telas
<meta name="viewport”
content="width=device-width">
Configuração ideal
• O zoom também não 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 específicas à
mídia 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 página 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
características da mídia onde o conteúdo será
renderizado
• Tamanho da janela, tamanho da tela, resolução, etc
CSS Media queries
•  Uma media querie consiste em um tipo de mídia e zero
ou mais expressões que verificam as condições
particulares de recursos de mídia
•  height
•  width
•  orientation
•  device-width
•  device-height
•  as medidas podem ser testadas px, cm, in, ems
•  aceitam prefixos 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
•  Conjunção (and)
@media (max-width: 600px)
and (orientation: portrait) { }
•  Disjunção (,)
@media (min-width: 300px),
(min-height: 300px) { }
•  Negação (not)
@media not print and (max-width: 600px)
and(orientation: portrait) { }
Breakpoints
Breakpoints
• Apesar de existirem vários parâmetros para media
queries, apenas alguns são usados de fato
• a grande maioria dos sites não requer todos os
parâmetros
• maior parte: altura e largura do dispositivo
• em que momento escrever regras para uma
resolução diferente?
Breakpoints
• Ponto em que o layout“quebra”
• Delimitador das regras CSS para atenderem novas
especificações
• Aquele tamanho em que novos ajustes precisam
ser realizados no layout para que ocorra a melhor
experiência possível do layout
Abordagens sobre breakpoints
• No início dos estudos do Web Design Responsivo
• breakpoints de acordo com a resolução de dispositivos
específicos
• 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 { float: left; width: 25%; }
@media (max-width: 600px) {
.coluna { width: 50%; }
}
@media (max-width: 400px) {
.coluna { float: none; width: 100%; }
}
Breakpoints
• Como encontrar os breakpoints?
• Mais importante do que verificar todo tamanho de
tela de dispositivo é verificar em que tamanho o
layout realmente precisa ser ajustado
Breakpoints
•  Abra sua página original no navegador
•  Redimensione a janela devagar até o design parecer ruim
•  se mobile-first
•  abra pequeno e vá aumentando a janela
•  senão
•  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 página, veja se as mudanças melhoraram o design, e
continue redimensionando pra achar o próximo 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?
• É possível 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 requisição
HTTP
• Mais difícil de
esquecer de atualizar
• Arquivo fica muito
grande
• Manutenção fica mais
difícil
Vantagens Desvantagens
Vários arquivos
• O arquivo padrão é
menor
• Organização
melhorada
• Várias requisições
HTTP
• Possibilidade de
esquecer de atualizar
algo
Vantagens Desvantagens
Media queries
sobrepostas ou empilhadas
• Sobrepor ou empilhar?
• Não são termos técnicos 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á estão presentes desde CSS2
• Todos os navegadores modernos suportam os tipos
screen e print
• Smartphones
• celulares antigos aceitavam o tipo handheld, mas
smartphones modernos ignoram
• Utilização de media queries para escrever regras
específicas
• @media screen and (max-width: 480px) { }
• muitos navegadores antigos não entendem as medias queries
Media types,media queries,
navedarodes e dispositivos
• Operador only
• @media only screen and (max-width: 480px) { }
• igual à querie anterior
• Arranjo técnico para que navegadores antigos
reconheçam a media querie como falsa e daí não seja
avaliada
Dica
• Utilize apenas o tamanho
@media (min-width: 320px) { }
• simples
• fácil
• executa em navegadores antigos
http://www.fa7.edu.br/webmobile/cerva.zip
Exemplo
Cervejaria
Cervejaria
1 coluna3 colunas
Estrutura
• HTML
Princípio de Design
• “Identifique os aspectos de seu aplicativo que
variam e separe-os do que permanece igual”
• Pegue o que variar e “encapsule” para que isso não
afete o restante do código
• Menos consequências indesejadas
• Mais flexibilidade
Alteração
• Identificar o que
precisa ser alterado
Organizando o CSS
•  Regras de estrutura comuns às versões Desktop e Mobile
•  Regras de estrutura específicas para Mobile utilizando
media queries
@media screen and (max-width:480px) {
}
•  Regras de estrutura específicas 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
Exercício
Adaptar este conteúdo para uma
coluna
Layout Fluido
Layout Fluido
• É a grande estrela hoje do Web Design
Responsivo
• Com a quantidade de dispositivos que
renderizam página web hoje, não é possível
simplesmente copiar medidas diretas do layout
• O Layout Fluido utiliza medidas flexíveis
Layout Fixo
• O layout fixo é aquele que utiliza pixels para
determinar as larguras dos elementos do design
• Não se adapta às alterações do campo de visão
do dispositivo que o renderiza
Layout fixo
Layout fixo
Layout Fluido
• Layouts fluidos utilizam unidades flexíveis (% , em)
para larguras ao invés de pixels
• Permite que haja fidelidade do design inicial da
página
• Layout se adapta de acordo com o campo de visão
• Desafio
• Se desapegar das medidas do projeto inicial
Medidas flexíveis
• As mais utilizadas
• %
• em
Medidas Flexíveis
• %
• Utilizado para determinar as larguras dos elementos
• A porcentagem é em relação 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 página */
width: 33.33333%;
/* padding de 10% do pai */
padding: 10%;
}
Medidas Flexíveis
• em
• Normalmente utilizado para fontes
• Medida sempre está relacionado à fonte base
• Um font-size implícito equivale a 16px na maioria dos
navegadores
• 1em = 100%
• 2em = 200%
em
html {
/* font-size base implícito 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 significar uma relação com o tamanho da
fonte
• Útil quando a medida de algum elemento tem
relação com texto, uma medida tipográfica
• Ex: Espaçamento entre parágrafos
p { margin: 0 1em; }
p { margin: 0 5%; }
Flexibilidade nos elementos filhos
• Vantagem
• As medidas flexíveis afetam os elementos filhos
(aninhados)
• Cenário:
• Quando o usuário 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 ficar
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 vão 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
• Mudança de paradigma
• Pode ser uma tarefa árdua quando já se está
acostumado a medidas fixas
• O segredo é se concentrar nas proporções dos
elementos do layout
• Enxergar os as relações entre os elementos do layout
ao invés de seus tamanhos fixos
Layout
.olhar {!
width: 25%;!
float: left;!
}!
Sobre boxes css
• Suponha que existam 2 sections definidas 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 página
• Ficará uma embaixo da outra
• Causa: o padding não é considerado no width
• Isso é um efeito do box model
Box model
• Não é o width que determina a largura final
• O tamanho final 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;!
!!
Alteração do box-sizing
• Cenário: O width do elemento está definido em
relação ao elemento pai, mas você gostaria que o
padding fosse uma relação com o font-size do
elemento
Alteração 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 proporções:
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" />
Restrição ao layout fluido
Restrição ao layout fluido
• O layout fluido é a maneira de endereçar uma
página aos vários dispositivos de tamanhos
diferentes do dia de hoje
• Mas, em certas situações, pode não ser a melhor
opção deixar o layout fluir 100% sobre uma tela
Restrição ao Layout Fluido
• Imagine este design em uma tela muito grande
Restrição ao layout fluido
• Em telas muito grandes, alguns layouts fluidos
podem ficar muito“esticados”
• espaçamentos entre elementos muito grandes
• É interessante pensar em um limite mínimo e
máximo de tela em px
• max-width
• min-width
Restrição ao Layout Fluido
body {!
max-width: 2000px;!
margin-left: auto;!
margin-right: auto;!
width: 100%;!
}!
Imagens flexíveis
Imagens flexíveis
•  As imagens também precisam se adequar ao espaços de
acordo com a resolução do aparelho
•  Regra CSS
img {
max-width: 100%;
}
limita a largura das imagens à largura do elemento que as
contém
Recursos flexíveis
• É possível aplicar a mesma ideia para outros recursos
img,
iframe,
object,
embed,
video {
height: auto;
max-width: 100%;
}
Mobile First
Qual será a melhor estratégia?
Mobile
• Maior diferença
• Espaço dísponível para o conteúdo
• Existe o Scroll
• Mais flexível
• rua, praia, carro, casa, cama, sofá
• Touch-screen
• Limitações
• Tela menor, rede lenta, hardware mais lento, toque
menos preciso que o mouse
Abordagens ágeis
Kent Beck
TDD
Baby Steps
Mobile First
Versão mais
limitada
•  Conteúdo priorizado
Versão menos
limitada
Progressive Enhancement
Layout mais simples
Imagens menores
CSS e JS
Mais possibilidade de conteúdo
Layout com colunas ?
Imagens maiores
Layout widescreen
Imagens maiores
Melhoria Progressiva
• O projeto web através de uma série de camadas
Conteúdo (HTML)
•  Somado à
marcação
básica para
criar um
documento
que possa ser
renderizados
por vários
navegadores
Apresentação
(CSS)
•  Definição de
cores,
tipografia e
organização
do conteúdo
Comportamento
(JS)
•  Camada que
dá certo
dinamismo ao
conteúdo
apresentado
Versão Mobile Específica
User-Agent
• Cabeçalho enviado através de requisição HTTP
• Cada navegador envia um valor único através do
USER-AGENT
• É a informação mais confiável que o servidor tem
sobre qual é o navegador
http://detectmobilebrowsers.com/
O script
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bbd+|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|fly(-|_)|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 formulários
Projetando formulário
• Costuma-se dizer que dispositivos móveis são
muito mais utilizados para consumos de
informação
Projetando formulários
•  Formulários em dispositivos móveis são limitados por
diversos fatores
•  largura
•  capacidade de entrada de dados
•  Checklist básico
•  Minimize o número de telas pelas quais o usuário tem que
navegar
•  Quando possível, procure usar controles de formulários nativos
da web ao invés dos customizados
•  Utilize labels na parte superior ao invés de à esquerda/direita
•  Permita ao usuário a opção de exibir os caracteres da senha
•  Utilize os novos inputs do HTML5
Labels superiores
Labels superiores
• Não há necessidade de CSS complicados ou
tabelas para montar o formulário
• Os labels permanecem visíveis no momento do
zoom do formulário
• Internacionalização facilitada: a tradução de
labels não altera o fluxo das informações
Campo Senha
• Permita ao usuário a opção de exibir os caracteres
quando ele estiver digitando senhas
Inputs HTML5
• HTML5 possui mais de 12 novos tipos de input
• Não há problema para navegadores antigos porque
são 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 interação melhorada
ou outras funcionalidades para o campo do formulário
Inputs HTML5
Tipo do Input Descrição
email! Indica que o campo é um endereço de email
url! Indica que o campo é uma URL
number! Indica que o campo deve ser uma entrada
númerica
range! Indica que o campo tem um valor mínimo e
máximo
color! Indica que o campo tem um valor para cor
date! Indica que o campo contém uma data ou horário
search! Indica que o campo é usado para realizar
funcionalidades de pesquisa
Padrões de Navegação Mobile
Top nav
• Uma das soluções mais fáceis de implementar é
manter a navegação no topo
Top nav
• Fácil de implementar
• Sem necessidade de
JS
• Sem firulas CSS
• Pode ocasionar
problemas de altura
• Pode ocasionar
problemas com links
muito próximos
Vantagens
Âncora no rodapé
• Mantém a lista de navegação no rodapé do site e
um link no cabeçalho direcionando para esta
navegação
Âncora no rodapé
• Fácil de implementar
• Sem necessidade de JS
• Sem firulas CSS
• Botão único no
cabeçalho
• Pode desorientar
algumas pessoas
• Alguns podem achar
a solução
deselegante
Vantagens
Menu de Seleção
• É possível transformar um menu em uma lista de
links em um menu de seleção
Menu de Seleção
• Não ocupa espaço na
tela
• Mantém toda a
interação no cabeçalho
• Facilmente identificável
• Dificuldade para
estilizar select
• Quando há
submenus
• Necessita de JS
Vantagens Desvantagens
Alternância
• Semelhante a“Âncora no rodapé”, mas apresenta
o menu próximo. Boa aparência e fácil de
implementar.
Alternância
• Mantém a interação
em um só local
• Elegante
• Facilmente escalável
• Performance
• Precisa de JS
Vantagens Desvantagens
Slide à esquerda
• O menu de navegação é acessado através de um
ícone que move o conteúdo para a direita,
exibindo os links
Slide à esquerda
• Não ocupa espaço na
tela
• Mantém a interação
próxima
• Boa aparência
• Técnica avançada
• Não escala bem
• Potencialment
confuso
Vantagens Desvantagens
Somente no rodapé
• Semelhante a Top Nav, mas sem âncora no
cabeçalho
Somente no rodapé
• Não ocupa espaço no
cabeçalho
• O conteúdo principal
fica destacado
• Difícil de encontrar e
acessar o menu
• É preciso percorrer
todo o conteúdo
Vantagens Desvantagens
Pull Down
• Revela o menu através de movimento de slide
Pull Down
• Convenção para
smartphones
• Técnica avançada
• Precisa de uma
instrução de uso
Vantagens
XHTML-MP
• Links
• Não suporta o atributo target
• Dá suporte ao atributo accesskey
• 0 a 9
• Não suporta iframes
• Prefira lista ordenadas
• <ul>  <ol>
Referências
• https://developer.mozilla.org/docs/CSS/
Media_queries
• http://www.w3.org/TR/css3-mediaqueries/

Web Design Responsivo

  • 1.
  • 2.
    Agenda • Apresentação da disciplina • Introduçãoao ecossistema mobile • Breve histórias das linguagens de marcação mobile • HTML5 de Relance • Breve revisão de CSS • Estratégia de desenvolvimento de conteúdos mobile • Viewport • Web Design Responsivo • Layout Fluido • Mobile First
  • 3.
    Quem sou eu • EduardoMendes • MSc em Engenharia de Teleinformática • DETI UFC • edumendes@gmail.com
  • 4.
    Disciplina • Aulas teóricas epráticas • Sexta noite • Sábado manhã • Projeto • Sábado a tarde • Avaliação • Projeto + exercícios práticos
  • 5.
  • 6.
    Mobile Web • Qual aprincipal diferença? A tela é menor!
  • 7.
    Ecossistema mobile •  Nãoé apenas uma questão de tamanho físico •  Mobile é um cenário de uso que varia dependendo do aparelho •  Usuários móveis geralmente são exatamente isso: móveis •  O ambiente dos usuários pode ser imprevisível •  O usuários móveis esperam sites otimizados, que se adaptem à sua localização e ao seu ambiente
  • 8.
  • 9.
  • 10.
    Físicas •  Teclado completocom teclas reais •  Dispositivo de seleção super preciso •  Tela larga, múltiplos monitores •  CPU/GPU poderosas •  Disco rígido de alta capacidade •  Teclado limitado/virtual •  Dispositivo de seleção toque •  Tela pequena, que pode rotacionar •  CPU/GPU menos capacitada •  Armazenamento menor
  • 11.
    Experiência •  Tipicamente utilizadode localidades previsíveis •  Bom para navegação/ pesquisa em aberto •  Fácil de trocar entre várias tarefas •  Usuário está focado e confortável •  Tipicamente utilizado em ambientes imprevisíveis •  Bom para consultas rápidas •  Destinado à tarefas individuais discretas •  Usuário frequentemente distraído ou ocupado
  • 12.
  • 13.
    O que considerarao“mobilizar” seu site? •  Quem está usando seu site? •  O que seus usuários fazem quando chegam ao seu site? •  De onde seu site está sendo acessado? •  Quando seu site é acessado? •  Porque os usuários estão indo ao seu site? •  Como eles acessam o seu site?
  • 14.
    Responder • Pode ajudar vocêa otimizar o tempo que você gasta sabendo o que você tem que fazer para um site mobile
  • 15.
    A Web éuma só
  • 16.
    Projetar para umaweb • De forma geral: • Todos os dispositivos devem ser capaz de acessar seu site • Não exclua usuários baseado no dispositivo ou navegador que ele usa • Separe conteúdo do comportamento e da apresentação • Separe CSS e JS • Não adicione informações de comportamento e apresentação junto com o código
  • 17.
    Breve história daslinguagens para mobile
  • 18.
    Breve história daslinguagens de marcação mobile SGML HTML XML HDML cHTML XHTML Basic WML XHTML HTML5 XHTML-MP 1970s 1990s 2000s Padronizada 2001 Atualizada em 2008
  • 19.
    XHTML-MP e HTML5 • Antesdo aparecimento dos smartphones mais modernos, XHTML-MP era a linguagem de marcação mais comum para dispositivos móveis • XHTML-MP foi dividido em módulos • Isso possibilitou um meio para evoluir de WML para XHTML-MP • Permite que os navegadores com menos recursos realizem várias tarefas comuns no mundo web • Novos telefones e dipositivos são capazes de lidar com HTML5
  • 20.
  • 21.
    Tags semânticas • <header> e<footer> • Em comparação com a antiga tag <div> não há nenhuma diferença entre em termos de apresentação • Mas no futuro os motores de pesquisa se beneficiarão conseguindo diferenciar o que seja o conteúdo real de outros elementos
  • 22.
    Tags semânticas • <article> e<section> • Artigos representam um bloco completo de conteúdo • Uma seção é um pedaço do todo • Artigos (article) podem ser compostos de múliplas seções (section) • Seções podem ter vários artigos
  • 23.
    Tags semânticas • <figure> e<figcaption> • <figure> é um conteiner para conteúdo (geralmente imagens) e <figcaption> fornece uma legenda para aquele conteúdo • <nav> • indica que um determinado conteúdo é a navegação da página
  • 24.
  • 25.
    <input> • O elemento <input>agora tem uma série de novos valores para o atributo type, que permite que os navegadores façam coisas bacanas, dependendo do seu valor. • color • date • datetime • datetime-local • email • month •  number •  range •  search •  tel •  time •  url
  • 26.
  • 27.
    CSS • O HTML cuidae dá semântica ao conteúdo • O CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos • Ao invés de colocar a formatação dentro da página, cria-se uma página que contém todos os estilos (regras CSS)
  • 28.
    Seletores CSS • Seletores agrupamas regras CSS aplicadas a um ou mais elementos em um página body{ background-color: #d2b48c; margin-left: 20%; margin-right:20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; }
  • 29.
    Todo elemento vemdentro de uma caixa
  • 30.
    Vários tipos decaixas e bordas
  • 31.
  • 32.
    Um gráfico parao aninhamento html head body title p q
  • 33.
  • 34.
    Elementos aninhados body { font-family:sans-serif; } h1,h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } em { font-family: serif; }
  • 35.
  • 36.
    Classe css <h2>Chá VerdeGelado</h2> <p class="verde"> <img src="../imagens/green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila. </p> p.verde { color: green; }
  • 37.
    Podemos fazer mais blockquote.verde,p.verde { color: green; } <blockquote class=“verde”> .verde { color: green; }
  • 38.
    O atributo id • Similara classe • Um atributo chamado“id” • Deve possuir um nome único • Só um elemento na página deve possuir aquele id específico <p id=“mensagem”> Página desenvolvida em HTML </p>
  • 39.
    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”
  • 40.
    Como usar? #mensagem{ color: red; } p#mensagem{ color:red; } Selecionaqualquer elemento que possua o id “mensagem” Seleciona apenas o elemento <p> que tenha o id “mensagem”
  • 41.
    Padding em umalinha padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px padding: 0px 20px 30px 10px;
  • 42.
    Margem em umalinha margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px margin: 0px 20px 30px 10px;
  • 43.
    1 valor paratodos os paddings padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px padding: 20px;
  • 44.
    Margem horizontal evertical margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px margin: 0px 20px;
  • 45.
    Borda em umalinha border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
  • 46.
    Fundo em umalinha background-color: white; background-image: url(images/cocktail.gif); background-repeat: repeat-x; background: white url(images/cocktail.gif) repeat-x;
  • 47.
    Blocos,inline e odisplay • Elementos de bloco • Separam o conteúdo • Elementos inline h2 p blockquote p q
  • 48.
    A regra display • Aregra display pode alterar um elemento de bloco para um elemento inline • Muito utilizado para trabalhar com menus
  • 49.
    Valores para display ! li{! !display: inline;! }! ! li {! !display: block;! }! ! li {! !display: none;! }! !
  • 50.
    O float • Faz comque um elemento flutue na página, caso haja espaço • Utilizado para da forma ao layout • O elemento pode flutuar a direita ou a esquerda
  • 51.
    Layout com float float:left; width: 240px; float: right; width: 240px; margin: 10px 260px 0px 250px;
  • 52.
  • 53.
    Estratégias Não fazer nada Oconteúdo para Desktop existente é o mesmo que é enviado para os dispositivos móveis sem nenhuma mudança ou otimização de layout Multi dispositivo O mesmo conteúdo é enviado para desktop e mobile, mas estilos e scripts apropriados para o tamanho físico de destino Versão mobile específica Dispositivos móveis e desktop recebem versões diferentes apropriadas ao seu tamanho específico
  • 54.
    Não fazer nada • Conteúdopróprio para Desktop é enviado para o dispositivo móvel de forma inalterada
  • 55.
    Não fazer nada • Menos trabalho para desenvolver •  Não há necessidade de manter cópias separadas de conteúdos ou estilos •  Não otimiza a experiência do usuário •  Conteúdos largos e complexos que podem empobrecer a performance Vantagens Desvantagens OK: Páginas leves que possuem conteúdo flexível e fluente, páginas que são organizadas de forma mais vertical RUIM: Páginas com layouts complexos, que possuem itens de conteúdo grandes (imagens) ou que utilizam plugins como flash
  • 57.
    Conteúdo adaptado • Mesma páginaé enviada para os dispositivos desktop e mobile • Entretanto, CSS e outros conteúdos podem se adaptar ao tamanho físico do dispositivo desktop.css mobile.css
  • 58.
    Conteúdo adaptado •  Usaro mesmo conteúdo reduz o trabalho de desenvolvimento •  Boa experiência para tamanhos físicos múltiplos •  Pode ser difícil converter o conteúdo para este modelo, dependendo da complexidade da página •  Uso inapropriado de estilos pode fazer esta estratégia falhar Vantagens Desvantagens OK: Páginas com semântica bem definida por HTML e utiliza CSS e JS para definir aparência e comportamento RUIM: Páginas complexas com animações, vídeos e grandes imagens incorporadas, cujo a diferença para mobile seria muito grande
  • 59.
    Versão Mobile Específica • Versãode conteúdo específica para mobile é enviada para os dispositivos móveis • Envolve algum redirecionamento do lado do servidor
  • 60.
    Conteúdo específico •  Cadatamanho físico tem uma experiência melhor •  Versões podem ser desenvolvidas de maneira independente •  Aumenta o trabalho de desenvolvimento •  A verificação do tipo de dispositivo no servidor pode falhar Vantagens Desvantagens OK: Páginas complexas e que possuem uma grande diferença de um tamanho físico para o outro; sites que possuem independência de desenvolvimento das versões RUIM: Páginas simples que podem ter seu conteúdo adaptado facilmente
  • 61.
  • 63.
  • 65.
    Problemas Um site precisafuncionar em um número de aparelhos, plataforma e navegadores que cresce a cada dia
  • 66.
    Web Design Responsivo • Origem:A List Apart, Ethan Marcotte, 2010 Ao invés de adptar designs desconectados para cada um do número cada vez maior de dispositivos web, podemos tratá-los como faces da mesma experiência. Nós podemos projetar para uma experiência ideal de visualização, e embutir tecnologias padronizadas nos nossos designs não somente para torná-los mais flexíveis, mas mais adaptados para a mídia que os renderiza.
  • 67.
    Web Design Responsivo • Conjuntode abordagens para adaptar o conteúdo à plataforma utilizada pelo usuário • Páginas se adaptam a todo tipo de dispositivo • Como fazer: design flexível e adaptável • navegador • dispositivo • contexto do usuário
  • 68.
    Web Design Responsivo • Conjuntode abordagens para adaptar o conteúdo à plataforma utilizada pelo usuário • resoluções diferentes • orientações de tela diferentes • plataformas de interação diversas • otimização de performance
  • 69.
    Desafios •  Diferentes navegadoresestão disponíveis •  Chrome, Opera, Safari •  Capacidade para tecnologias de cada navegador varia muito •  Muitos dos antigos navegadores não suportam um JS ou CSS corretamente •  Dispositivos móveis são menores e mais lentos •  Redes móveis podem ter limites de acesso e transferência •  Complicações para conteúdos ricos •  Interfaces móveis obrigam-nos a repensar nossos websites •  Se ele consegue renderizar uma versão desktop, não quer dizer que seja a melhor opção
  • 70.
  • 71.
  • 72.
  • 74.
    Web Desing Responsivo As  mesmas  páginas     para  todos   os  disposi0vos  
  • 76.
    Mas será possível tersomente um conjunto de páginas para todas as mídias?
  • 77.
    Web Design Responsivo • Priorizaçãodo Conteúdo • Projetar para o conteúdo que realmente importa • Não apenas um design menor • Completa reestruturação de conteúdo • Conteúdo útil e com foco
  • 78.
  • 79.
    Design Responsivo •  Umconjunto de regras CSS diferente são aplicadas a partir da avaliação de certas características do navegador em uso Media queries •  Utilização de medidas proporcionais (%, em) invés tamanhos absolutos (px) para os elementos do layout Grid Layout Fluido •  Através de CSS fazer com que imagens mídias se adaptem para caber no layout de acordo com as restrições de tamanho Imagens e recursos flexíveis
  • 80.
  • 81.
    Viewport • Um pixel nomundo Desktop • Em um tela de computador normalmente 1px é 1px • Uma imagem com largura de 200px irá ocupar 200px da tela física do monitor • Se o tamanho for definido em % • o valor será calculado proporcional ao tamanho da janela do navegador
  • 82.
    Viewport • Os navegadores mobiletentam exibir páginas web feitas para desktop • Ajuste automático do zoom
  • 83.
    Viewport • Viewport é oespaço disponível no navegador para uma página ser renderizada • tamanho da janela do navegador, menos: • barra de ferramentas • barra de rolagem • navegação <meta name="viewport" content="">
  • 84.
    Viewport •  <meta name="viewport"content=""> •  Principais parâmetros para content •  width/height: valor ou device-[width|height] •  name=“viewport”content=“width=device-width” •  initial-scale: define 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”
  • 85.
    Viewport e CSS @viewport{ width: 320px; height: device-height; zoom: 1; max-zoom: 2; min-zoom: 0.5; }
  • 86.
    Zoom e oPixel • O zoom é uma funcionalidade presente em navegadores modernos • Consideres • uma imagem de 150px em uma página • aplica-se zoom de 200% • a imagem passa a ocupar 300px na tela
  • 87.
    Zoom e oPixel • O Zoom altera a visualização, mas não modifica o código • a imagem continua a ser descrita com 150px • 150 CSS pixels + 200% zoom -> 300 pixels físicos
  • 88.
    Viewport e oZoom • O viewport • diminui quando se aumenta o zoom • aumenta quando se diminui o zoom • O viewport é medido em CSS pixels
  • 89.
    Exemplos • Imagem de 320x356px,iPhone, viewport padrão http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  • 90.
    Exemplos • Viewport com amesma 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
  • 91.
  • 92.
  • 93.
    Configuração ideal • A configuraçãoideal é aquela que considera a largura do próprio dispositivo como seu viewport • Os dispositivos móveis têm larguras diversas de telas <meta name="viewport” content="width=device-width">
  • 94.
    Configuração ideal • O zoomtambém não deve estar alterado <meta name="viewport” content="width=device-width,initial-scale=1">
  • 95.
  • 96.
  • 97.
  • 98.
    CSS Media Types • Permitemque se apliquem regras específicas à mídia 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
  • 99.
    Exemplos em umapágina HTML ! ! <link rel="stylesheet” ! href="estilos.css” media="screen">! ! <link rel="stylesheet”! href="impressao.css” media="print">
  • 100.
    Exemplos em umarquivo CSS ! @media screen {! /* Regras CSS para monitores */ }! ! ! @media print {! /* Regras CSS para impressao */ }!
  • 101.
    CSS Media queries • Fornecemum modo de aplicar folhas de estilos seletivamente baseado em algumas características da mídia onde o conteúdo será renderizado • Tamanho da janela, tamanho da tela, resolução, etc
  • 102.
    CSS Media queries • Uma media querie consiste em um tipo de mídia e zero ou mais expressões que verificam as condições particulares de recursos de mídia •  height •  width •  orientation •  device-width •  device-height •  as medidas podem ser testadas px, cm, in, ems •  aceitam prefixos min- max- •  Media queries -> design condicional
  • 103.
  • 104.
    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) { } !
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
    Operadores em MediaQueries •  Conjunção (and) @media (max-width: 600px) and (orientation: portrait) { } •  Disjunção (,) @media (min-width: 300px), (min-height: 300px) { } •  Negação (not) @media not print and (max-width: 600px) and(orientation: portrait) { }
  • 110.
  • 111.
    Breakpoints • Apesar de existiremvários parâmetros para media queries, apenas alguns são usados de fato • a grande maioria dos sites não requer todos os parâmetros • maior parte: altura e largura do dispositivo • em que momento escrever regras para uma resolução diferente?
  • 112.
    Breakpoints • Ponto em queo layout“quebra” • Delimitador das regras CSS para atenderem novas especificações • Aquele tamanho em que novos ajustes precisam ser realizados no layout para que ocorra a melhor experiência possível do layout
  • 113.
    Abordagens sobre breakpoints • Noinício dos estudos do Web Design Responsivo • breakpoints de acordo com a resolução de dispositivos específicos • Para smartphones @media only screen and (min-device-width : 320px) and (max-device-width : 480px) • Para desktops @media only screen and (min-width : 1224px)
  • 114.
    320 and Up @mediaprint { } @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) { ... }
  • 115.
    Less Framework /* TabletLayout */ @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) { ... }
  • 116.
    Twitter Bootstrap /* Telefonesem 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) { ... }
  • 117.
    Breakpoints .coluna { float:left; width: 25%; } @media (max-width: 600px) { .coluna { width: 50%; } } @media (max-width: 400px) { .coluna { float: none; width: 100%; } }
  • 118.
    Breakpoints • Como encontrar osbreakpoints? • Mais importante do que verificar todo tamanho de tela de dispositivo é verificar em que tamanho o layout realmente precisa ser ajustado
  • 119.
    Breakpoints •  Abra suapágina original no navegador •  Redimensione a janela devagar até o design parecer ruim •  se mobile-first •  abra pequeno e vá aumentando a janela •  senão •  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 página, veja se as mudanças melhoraram o design, e continue redimensionando pra achar o próximo breakpoint
  • 120.
  • 121.
    Evite device breakpoints @mediaonly 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) { ... }
  • 122.
    Utilize content breakpoints @media(min-width: 592px) { ... } @media (min-width: 656px) { ... } @media (min-width: 752px) { ... } @media (min-width: 1088px) { ... } @media (min-width: 1312px) { ... }
  • 123.
    Media queries: Arquivos separadosou tudo junto? • É possível 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) { ... }
  • 124.
    1 arquivo • Somente 1requisição HTTP • Mais difícil de esquecer de atualizar • Arquivo fica muito grande • Manutenção fica mais difícil Vantagens Desvantagens
  • 125.
    Vários arquivos • O arquivopadrão é menor • Organização melhorada • Várias requisições HTTP • Possibilidade de esquecer de atualizar algo Vantagens Desvantagens
  • 126.
    Media queries sobrepostas ouempilhadas • Sobrepor ou empilhar? • Não são termos técnicos para o Design Responsivo • Regras podem ser agrupadas por media queries de forma exclusiva (empilhadas) ou sobreposta (sobrecarregada)
  • 127.
    Media queries sobrepostas @mediaall and (min-width:500px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: #FFF; } }
  • 128.
    Media queries sobrepostas @mediaall and (min-width:700px) { body { background: red; color: white; } } @media all and (min-width:500px) { body { background: blue; font-family: serif; } }
  • 129.
    Media queries empilhadas @mediaall 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; } }
  • 130.
    Media types,media queries, navegadorese dispositivos • Os media types já estão presentes desde CSS2 • Todos os navegadores modernos suportam os tipos screen e print • Smartphones • celulares antigos aceitavam o tipo handheld, mas smartphones modernos ignoram • Utilização de media queries para escrever regras específicas • @media screen and (max-width: 480px) { } • muitos navegadores antigos não entendem as medias queries
  • 131.
    Media types,media queries, navedarodese dispositivos • Operador only • @media only screen and (max-width: 480px) { } • igual à querie anterior • Arranjo técnico para que navegadores antigos reconheçam a media querie como falsa e daí não seja avaliada
  • 132.
    Dica • Utilize apenas otamanho @media (min-width: 320px) { } • simples • fácil • executa em navegadores antigos
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
    Princípio de Design • “Identifiqueos aspectos de seu aplicativo que variam e separe-os do que permanece igual” • Pegue o que variar e “encapsule” para que isso não afete o restante do código • Menos consequências indesejadas • Mais flexibilidade
  • 138.
  • 139.
    Organizando o CSS • Regras de estrutura comuns às versões Desktop e Mobile •  Regras de estrutura específicas para Mobile utilizando media queries @media screen and (max-width:480px) { } •  Regras de estrutura específicas para Desktop utilizando media queries @media screen and (min-width:481px) { }
  • 140.
  • 141.
  • 142.
  • 143.
    Adaptar este conteúdopara uma coluna
  • 144.
  • 145.
    Layout Fluido • É agrande estrela hoje do Web Design Responsivo • Com a quantidade de dispositivos que renderizam página web hoje, não é possível simplesmente copiar medidas diretas do layout • O Layout Fluido utiliza medidas flexíveis
  • 146.
    Layout Fixo • O layoutfixo é aquele que utiliza pixels para determinar as larguras dos elementos do design • Não se adapta às alterações do campo de visão do dispositivo que o renderiza
  • 147.
  • 148.
  • 149.
    Layout Fluido • Layouts fluidosutilizam unidades flexíveis (% , em) para larguras ao invés de pixels • Permite que haja fidelidade do design inicial da página • Layout se adapta de acordo com o campo de visão • Desafio • Se desapegar das medidas do projeto inicial
  • 150.
    Medidas flexíveis • As maisutilizadas • % • em
  • 151.
    Medidas Flexíveis • % • Utilizado paradeterminar as larguras dos elementos • A porcentagem é em relação ao tamanho do elemento pai • Pode ser utilizado para fontes • Tamanho relativo ao tamanho da fonte do elemento pai
  • 152.
    % body { /* larguratotal da tela */ width: 100%; } section { /* 1/3 da página */ width: 33.33333%; /* padding de 10% do pai */ padding: 10%; }
  • 153.
    Medidas Flexíveis • em • Normalmente utilizadopara fontes • Medida sempre está relacionado à fonte base • Um font-size implícito equivale a 16px na maioria dos navegadores • 1em = 100% • 2em = 200%
  • 154.
    em html { /* font-sizebase implícito 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 */ }
  • 155.
    em • Pode ser usadoem qualquer propriedade mas sempre significar uma relação com o tamanho da fonte • Útil quando a medida de algum elemento tem relação com texto, uma medida tipográfica • Ex: Espaçamento entre parágrafos p { margin: 0 1em; } p { margin: 0 5%; }
  • 156.
    Flexibilidade nos elementosfilhos • Vantagem • As medidas flexíveis afetam os elementos filhos (aninhados) • Cenário: • Quando o usuário aumenta a fonte no navegador pra ler melhor •  todo o layout baseado em em é afetado
  • 157.
    Os filhos herdamo 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; }
  • 158.
    Quais os valoresreais article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
  • 159.
    rem • Nova medida • Como oem é relativo ao elemento pai, o gerenciamento do tamanho das fontes pode ficar 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
  • 160.
    Quais os valoresreais article { font-size: 1.25rem; } h1 { font-size: 2rem; } p { font-size: 0.9rem; }
  • 161.
    No caso anterior • htmle o body vão 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
  • 162.
    viewport-units: vw evh • 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
  • 163.
  • 164.
    Utilizando o layoutfluido • Mudança de paradigma • Pode ser uma tarefa árdua quando já se está acostumado a medidas fixas • O segredo é se concentrar nas proporções dos elementos do layout • Enxergar os as relações entre os elementos do layout ao invés de seus tamanhos fixos
  • 165.
  • 166.
    Sobre boxes css • Suponhaque existam 2 sections definidas pelas regras abaixo, eu teria um linha com 2 colunas? section {! !float: left;! !padding: 5%; ! !width: 50%; ! } !
  • 167.
    Sobre boxes css • Cadasection vai ter 60% da largura da página • Ficará uma embaixo da outra • Causa: o padding não é considerado no width • Isso é um efeito do box model
  • 168.
    Box model • Não éo width que determina a largura final • O tamanho final de cada elemento é section {! !float: left;! !padding: 5%; ! !width: 40%; ! } !
  • 169.
    Alterando o box-sizing • Fazercom o width já inclua os valores do padding e do border-width section {! !! !float: left;! !padding: 5%;! !width: 50%;! } ! box-sizing: border-box;! !!
  • 170.
    Alteração do box-sizing • Cenário:O width do elemento está definido em relação ao elemento pai, mas você gostaria que o padding fosse uma relação com o font-size do elemento
  • 171.
    Alteração do box-sizing section{! box-sizing: border-box;! float: left;! padding: 1em;! width: 50%;! }!
  • 172.
  • 173.
  • 174.
    Utilizando layout fluido • Paraconverter um layout baseado em pixels para um baseado em proporções:
  • 175.
    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%;! }! !
  • 176.
    Para tudo funcionarcomo 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" />
  • 177.
  • 178.
    Restrição ao layoutfluido • O layout fluido é a maneira de endereçar uma página aos vários dispositivos de tamanhos diferentes do dia de hoje • Mas, em certas situações, pode não ser a melhor opção deixar o layout fluir 100% sobre uma tela
  • 179.
    Restrição ao LayoutFluido • Imagine este design em uma tela muito grande
  • 180.
    Restrição ao layoutfluido • Em telas muito grandes, alguns layouts fluidos podem ficar muito“esticados” • espaçamentos entre elementos muito grandes • É interessante pensar em um limite mínimo e máximo de tela em px • max-width • min-width
  • 181.
    Restrição ao LayoutFluido body {! max-width: 2000px;! margin-left: auto;! margin-right: auto;! width: 100%;! }!
  • 182.
  • 183.
    Imagens flexíveis •  Asimagens também precisam se adequar ao espaços de acordo com a resolução do aparelho •  Regra CSS img { max-width: 100%; } limita a largura das imagens à largura do elemento que as contém
  • 184.
    Recursos flexíveis • É possívelaplicar a mesma ideia para outros recursos img, iframe, object, embed, video { height: auto; max-width: 100%; }
  • 185.
  • 186.
    Qual será amelhor estratégia?
  • 187.
    Mobile • Maior diferença • Espaço dísponívelpara o conteúdo • Existe o Scroll • Mais flexível • rua, praia, carro, casa, cama, sofá • Touch-screen • Limitações • Tela menor, rede lenta, hardware mais lento, toque menos preciso que o mouse
  • 188.
  • 189.
    Mobile First Versão mais limitada • Conteúdo priorizado Versão menos limitada
  • 190.
    Progressive Enhancement Layout maissimples Imagens menores CSS e JS Mais possibilidade de conteúdo Layout com colunas ? Imagens maiores Layout widescreen Imagens maiores
  • 191.
    Melhoria Progressiva • O projetoweb através de uma série de camadas Conteúdo (HTML) •  Somado à marcação básica para criar um documento que possa ser renderizados por vários navegadores Apresentação (CSS) •  Definição de cores, tipografia e organização do conteúdo Comportamento (JS) •  Camada que dá certo dinamismo ao conteúdo apresentado
  • 192.
  • 194.
    User-Agent • Cabeçalho enviado atravésde requisição HTTP • Cada navegador envia um valor único através do USER-AGENT • É a informação mais confiável que o servidor tem sobre qual é o navegador
  • 195.
  • 196.
    O script <?php $useragent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile| ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|operam(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|fly(-|_)|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'); ?>
  • 197.
    XHTML-MP • É um subconjuntodo HTML projetado para funcionar adequadamente em navegadores mobile diferentes. • Ideal para navegadores de capacidade mediana
  • 198.
  • 199.
    Projetando formulário • Costuma-se dizerque dispositivos móveis são muito mais utilizados para consumos de informação
  • 200.
    Projetando formulários •  Formuláriosem dispositivos móveis são limitados por diversos fatores •  largura •  capacidade de entrada de dados •  Checklist básico •  Minimize o número de telas pelas quais o usuário tem que navegar •  Quando possível, procure usar controles de formulários nativos da web ao invés dos customizados •  Utilize labels na parte superior ao invés de à esquerda/direita •  Permita ao usuário a opção de exibir os caracteres da senha •  Utilize os novos inputs do HTML5
  • 201.
  • 202.
    Labels superiores • Não hánecessidade de CSS complicados ou tabelas para montar o formulário • Os labels permanecem visíveis no momento do zoom do formulário • Internacionalização facilitada: a tradução de labels não altera o fluxo das informações
  • 203.
    Campo Senha • Permita aousuário a opção de exibir os caracteres quando ele estiver digitando senhas
  • 204.
    Inputs HTML5 • HTML5 possuimais de 12 novos tipos de input • Não há problema para navegadores antigos porque são 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 interação melhorada ou outras funcionalidades para o campo do formulário
  • 205.
    Inputs HTML5 Tipo doInput Descrição email! Indica que o campo é um endereço de email url! Indica que o campo é uma URL number! Indica que o campo deve ser uma entrada númerica range! Indica que o campo tem um valor mínimo e máximo color! Indica que o campo tem um valor para cor date! Indica que o campo contém uma data ou horário search! Indica que o campo é usado para realizar funcionalidades de pesquisa
  • 210.
  • 211.
    Top nav • Uma dassoluções mais fáceis de implementar é manter a navegação no topo
  • 212.
    Top nav • Fácil deimplementar • Sem necessidade de JS • Sem firulas CSS • Pode ocasionar problemas de altura • Pode ocasionar problemas com links muito próximos Vantagens
  • 213.
    Âncora no rodapé • Mantéma lista de navegação no rodapé do site e um link no cabeçalho direcionando para esta navegação
  • 214.
    Âncora no rodapé • Fácilde implementar • Sem necessidade de JS • Sem firulas CSS • Botão único no cabeçalho • Pode desorientar algumas pessoas • Alguns podem achar a solução deselegante Vantagens
  • 215.
    Menu de Seleção • Épossível transformar um menu em uma lista de links em um menu de seleção
  • 216.
    Menu de Seleção • Nãoocupa espaço na tela • Mantém toda a interação no cabeçalho • Facilmente identificável • Dificuldade para estilizar select • Quando há submenus • Necessita de JS Vantagens Desvantagens
  • 217.
    Alternância • Semelhante a“Âncora norodapé”, mas apresenta o menu próximo. Boa aparência e fácil de implementar.
  • 218.
    Alternância • Mantém a interação emum só local • Elegante • Facilmente escalável • Performance • Precisa de JS Vantagens Desvantagens
  • 219.
    Slide à esquerda • Omenu de navegação é acessado através de um ícone que move o conteúdo para a direita, exibindo os links
  • 220.
    Slide à esquerda • Nãoocupa espaço na tela • Mantém a interação próxima • Boa aparência • Técnica avançada • Não escala bem • Potencialment confuso Vantagens Desvantagens
  • 221.
    Somente no rodapé • Semelhantea Top Nav, mas sem âncora no cabeçalho
  • 222.
    Somente no rodapé • Nãoocupa espaço no cabeçalho • O conteúdo principal fica destacado • Difícil de encontrar e acessar o menu • É preciso percorrer todo o conteúdo Vantagens Desvantagens
  • 223.
    Pull Down • Revela omenu através de movimento de slide
  • 224.
    Pull Down • Convenção para smartphones • Técnicaavançada • Precisa de uma instrução de uso Vantagens
  • 225.
    XHTML-MP • Links • Não suporta oatributo target • Dá suporte ao atributo accesskey • 0 a 9 • Não suporta iframes • Prefira lista ordenadas • <ul>  <ol>
  • 226.