Web Design Responsivo
-
Upload
eduardo-mendes-de-oliveira -
Category
Technology
-
view
2.947 -
download
2
description
Transcript of Web Design Responsivo
![Page 1: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/1.jpg)
DESENVOLVIMENTO DE CONTEÚDOS WEB PARA MOBILE
![Page 2: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/2.jpg)
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
![Page 4: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/4.jpg)
Disciplina
• Aulas teóricas e práticas • Sexta noite • Sábado manhã
• Projeto • Sábado a tarde
• Avaliação • Projeto + exercícios práticos
![Page 5: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/5.jpg)
O Ecossistema Mobile
![Page 6: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/6.jpg)
Mobile Web
• Qual a principal diferença?
A tela é menor!
![Page 7: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/7.jpg)
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
![Page 8: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/8.jpg)
Cenário de Uso
![Page 9: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/9.jpg)
As características são importantes
![Page 10: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/10.jpg)
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
![Page 11: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/11.jpg)
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
![Page 12: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/12.jpg)
O Ambiente
Relógio embutido
Bússola
Geolocalização
Acelerômetro
Câmera
Termômetro
Messagens
Calendário
![Page 13: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/13.jpg)
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?
![Page 14: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/14.jpg)
Responder
• Pode ajudar você a otimizar o tempo que você gasta sabendo o que você tem que fazer para um site mobile
![Page 15: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/15.jpg)
A Web é uma só
![Page 16: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/16.jpg)
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
![Page 17: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/17.jpg)
Breve história das linguagens para mobile
![Page 18: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/18.jpg)
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
![Page 19: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/19.jpg)
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
![Page 20: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/20.jpg)
HTML5 de relance
![Page 21: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/21.jpg)
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 bene!ciarão conseguindo diferenciar o que seja o conteúdo real de outros elementos
![Page 22: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/22.jpg)
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
![Page 23: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/23.jpg)
Tags semânticas
• <figure> e <figcaption> • <!gure> é um conteiner para conteúdo (geralmente
imagens) e <!gcaption> fornece uma legenda para aquele conteúdo
• <nav> • indica que um determinado conteúdo é a navegação
da página
![Page 24: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/24.jpg)
<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>!
![Page 25: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/25.jpg)
<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
![Page 26: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/26.jpg)
Breve revisão CSS
![Page 27: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/27.jpg)
CSS
• O HTML cuida e dá semântica ao conteúdo
• O CSS é uma linguagem de estilo utilizada para de!nir 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)
![Page 28: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/28.jpg)
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; }
![Page 29: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/29.jpg)
Todo elemento vem dentro de uma caixa
![Page 30: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/30.jpg)
Vários tipos de caixas e bordas
![Page 31: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/31.jpg)
Elementos aninhados herdam as regras CSS
![Page 32: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/32.jpg)
Um gráfico para o aninhamento
html
head body
title p
q
![Page 33: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/33.jpg)
Os elementos aninhados
html
body
p p h1 h2 p
img a em a
![Page 34: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/34.jpg)
Elementos aninhados
body { font-family:sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } em { font-family: serif; }
![Page 35: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/35.jpg)
Os elementos aninhados
html
body
p p h1 h2 p
img a em a
![Page 36: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/36.jpg)
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; }
![Page 37: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/37.jpg)
Podemos fazer mais
blockquote.verde, p.verde { color: green; }
<blockquote class=“verde”>
.verde { color: green; }
![Page 38: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/38.jpg)
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í!co <p id=“mensagem”> Página desenvolvida em HTML </p>
![Page 39: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/39.jpg)
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”
![Page 40: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/40.jpg)
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”
![Page 41: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/41.jpg)
Padding em uma linha
padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px
padding: 0px 20px 30px 10px;
![Page 42: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/42.jpg)
Margem em uma linha
margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px
margin: 0px 20px 30px 10px;
![Page 43: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/43.jpg)
1 valor para todos os paddings
padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px
padding: 20px;
![Page 44: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/44.jpg)
Margem horizontal e vertical
margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px
margin: 0px 20px;
![Page 45: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/45.jpg)
Borda em uma linha
border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
![Page 46: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/46.jpg)
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;
![Page 47: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/47.jpg)
Blocos, inline e o display
• Elementos de bloco • Separam o conteúdo
• Elementos inline
h2
p
blockquote
p q
![Page 48: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/48.jpg)
A regra display
• A regra display pode alterar um elemento de bloco para um elemento inline
• Muito utilizado para trabalhar com menus
![Page 49: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/49.jpg)
Valores para display
!li {!
!display: inline;!}!!li {!
!display: block;!}!!li {!
!display: none;!}!!
![Page 50: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/50.jpg)
O float
• Faz com que um elemento "utue na página, caso haja espaço
• Utilizado para da forma ao layout
• O elemento pode "utuar a direita ou a esquerda
![Page 51: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/51.jpg)
Layout com float
float: left; width: 240px;
float: right; width: 240px;
margin: 10px 260px 0px 250px;
![Page 52: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/52.jpg)
Estratégias de desenvolvimento de conteúdo mobile
![Page 53: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/53.jpg)
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
![Page 54: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/54.jpg)
Não fazer nada
• Conteúdo próprio para Desktop é enviado para o dispositivo móvel de forma inalterada
![Page 55: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/55.jpg)
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
![Page 56: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/56.jpg)
![Page 57: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/57.jpg)
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
![Page 58: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/58.jpg)
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
![Page 59: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/59.jpg)
Versão Mobile Específica
• Versão de conteúdo especí!ca para mobile é enviada para os dispositivos móveis • Envolve algum redirecionamento do lado do
servidor
![Page 60: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/60.jpg)
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 veri!caçã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
![Page 61: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/61.jpg)
Web Design Responsivo
Fonte: http://www.instantshift.com/2012/09/06/why-do-you-need-responsive-web-design-infographic/
![Page 62: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/62.jpg)
![Page 63: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/63.jpg)
Ethan Marcotte
![Page 64: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/64.jpg)
![Page 65: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/65.jpg)
Problemas
Um site precisa funcionar em um número de aparelhos, plataforma e navegadores que cresce a cada dia
![Page 66: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/66.jpg)
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 !exíveis, mas mais adaptados para a mídia que os renderiza.
![Page 67: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/67.jpg)
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 "exível e adaptável • navegador • dispositivo • contexto do usuário
![Page 68: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/68.jpg)
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
![Page 69: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/69.jpg)
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
![Page 70: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/70.jpg)
Não responsivo
![Page 71: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/71.jpg)
http://interim.it/
![Page 72: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/72.jpg)
http://www.bostonglobe.com/
![Page 73: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/73.jpg)
![Page 74: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/74.jpg)
Web Desing Responsivo
As mesmas páginas para todos os disposi0vos
![Page 75: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/75.jpg)
![Page 76: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/76.jpg)
Mas será possível ter somente um conjunto de páginas para todas as mídias?
![Page 77: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/77.jpg)
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
![Page 78: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/78.jpg)
Web Design Responsivo
Web Design
Responsivo
Grid Layout Fluido
CSS Media Queries
Imagens e mídias
flexíveis
Controle do
Viewport
![Page 79: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/79.jpg)
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
![Page 80: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/80.jpg)
Viewport e Zoom
![Page 81: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/81.jpg)
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 de!nido em % • o valor será calculado proporcional ao tamanho da janela
do navegador
![Page 82: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/82.jpg)
Viewport
• Os navegadores mobile tentam exibir páginas web feitas para desktop • Ajuste automático do zoom
![Page 83: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/83.jpg)
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="">
![Page 84: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/84.jpg)
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: de!ne 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”
![Page 85: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/85.jpg)
Viewport e CSS
@viewport { width: 320px; height: device-height; zoom: 1; max-zoom: 2; min-zoom: 0.5;
}
![Page 86: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/86.jpg)
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
![Page 87: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/87.jpg)
Zoom e o Pixel
• O Zoom altera a visualização, mas não modi!ca o código
• a imagem continua a ser descrita com 150px
• 150 CSS pixels + 200% zoom -> 300 pixels físicos
![Page 88: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/88.jpg)
Viewport e o Zoom
• O viewport • diminui quando se aumenta o zoom • aumenta quando se diminui o zoom
• O viewport é medido em CSS pixels
![Page 89: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/89.jpg)
Exemplos
• Imagem de 320x356px, iPhone, viewport padrão
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
![Page 90: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/90.jpg)
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
![Page 91: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/91.jpg)
Aumentando o zoom
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
![Page 92: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/92.jpg)
Diminuindo o zoom
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
![Page 93: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/93.jpg)
Configuração ideal
• A con!guraçã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">
![Page 94: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/94.jpg)
Configuração ideal
• O zoom também não deve estar alterado <meta name="viewport” content="width=device-width,initial-scale=1">
![Page 95: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/95.jpg)
Viewport
![Page 96: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/96.jpg)
Sempre habilite o zoom
![Page 97: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/97.jpg)
Media queries
![Page 98: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/98.jpg)
CSS Media Types
• Permitem que se apliquem regras especí!cas à 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
![Page 99: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/99.jpg)
Exemplos em uma página HTML
!!<link rel="stylesheet” ! href="estilos.css” media="screen"> !!<link rel="stylesheet” ! href="impressao.css” media="print">
![Page 100: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/100.jpg)
Exemplos em um arquivo CSS
!@media screen { ! /* Regras CSS para monitores */ } !!!@media print { ! /* Regras CSS para impressao */ } !
![Page 101: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/101.jpg)
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
![Page 102: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/102.jpg)
CSS Media queries
• Uma media querie consiste em um tipo de mídia e zero ou mais expressões que veri!cam 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 pre!xos min- max-
• Media queries -> design condicional
![Page 103: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/103.jpg)
CSS Media Queries
![Page 104: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/104.jpg)
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) { } !
![Page 105: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/105.jpg)
http://www.fa7.edu.br/webmobile/mq_inicial.zip
Exemplo
![Page 106: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/106.jpg)
Exemplo Media Querie
![Page 107: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/107.jpg)
Exemplo de Media Querie
![Page 108: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/108.jpg)
Exemplo de Media Querie
![Page 109: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/109.jpg)
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) { }
![Page 110: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/110.jpg)
Breakpoints
![Page 111: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/111.jpg)
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?
![Page 112: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/112.jpg)
Breakpoints
• Ponto em que o layout “quebra” • Delimitador das regras CSS para atenderem novas
especi!cações
• Aquele tamanho em que novos ajustes precisam ser realizados no layout para que ocorra a melhor experiência possível do layout
![Page 113: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/113.jpg)
Abordagens sobre breakpoints
• No início dos estudos do Web Design Responsivo • breakpoints de acordo com a resolução de dispositivos
especí!cos
• Para smartphones @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
• Para desktops @media only screen and (min-width : 1224px)
![Page 114: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/114.jpg)
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) { ... }
![Page 115: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/115.jpg)
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) { ... }
![Page 116: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/116.jpg)
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) { ... }
![Page 117: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/117.jpg)
Breakpoints
.coluna { "oat: left; width: 25%; }
@media (max-width: 600px) { .coluna { width: 50%; } } @media (max-width: 400px) { .coluna { "oat: none; width: 100%; } }
![Page 118: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/118.jpg)
Breakpoints
• Como encontrar os breakpoints?
• Mais importante do que veri!car todo tamanho de tela de dispositivo é veri!car em que tamanho o layout realmente precisa ser ajustado
![Page 119: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/119.jpg)
Breakpoints
• Abra sua página original no navegador
• Redimensione a janela devagar até o design parecer ruim • se mobile-"rst • 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
![Page 120: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/120.jpg)
Responsive Design View Mozilla
![Page 121: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/121.jpg)
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) { ... }
![Page 122: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/122.jpg)
Utilize content breakpoints
@media (min-width: 592px) { ... } @media (min-width: 656px) { ... } @media (min-width: 752px) { ... } @media (min-width: 1088px) { ... } @media (min-width: 1312px) { ... }
![Page 123: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/123.jpg)
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) { ... }
![Page 124: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/124.jpg)
1 arquivo
• Somente 1 requisição HTTP
• Mais difícil de esquecer de atualizar
• Arquivo !ca muito grande
• Manutenção !ca mais difícil
Vantagens Desvantagens
![Page 125: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/125.jpg)
Vários arquivos
• O arquivo padrão é menor
• Organização melhorada
• Várias requisições HTTP
• Possibilidade de esquecer de atualizar algo
Vantagens Desvantagens
![Page 126: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/126.jpg)
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)
![Page 127: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/127.jpg)
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; } }
![Page 128: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/128.jpg)
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; } }
![Page 129: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/129.jpg)
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; } }
![Page 130: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/130.jpg)
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í!cas • @media screen and (max-width: 480px) { } • muitos navegadores antigos não entendem as medias queries
![Page 131: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/131.jpg)
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
![Page 132: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/132.jpg)
Dica
• Utilize apenas o tamanho
@media (min-width: 320px) { } • simples • fácil • executa em navegadores antigos
![Page 133: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/133.jpg)
http://www.fa7.edu.br/webmobile/cerva.zip
Exemplo
![Page 134: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/134.jpg)
Cervejaria
![Page 135: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/135.jpg)
Cervejaria
1 coluna 3 colunas
![Page 136: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/136.jpg)
Estrutura
• HTML
![Page 137: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/137.jpg)
Princípio de Design
• “Identi!que 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 "exibilidade
![Page 138: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/138.jpg)
Alteração
• Identi!car o que precisa ser alterado
![Page 139: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/139.jpg)
Organizando o CSS
• Regras de estrutura comuns às versões Desktop e Mobile • Regras de estrutura especí!cas para Mobile utilizando
media queries
@media screen and (max-width:480px) {
} • Regras de estrutura especí!cas para Desktop utilizando
media queries
@media screen and (min-width:481px) {
}
![Page 140: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/140.jpg)
Estrutura Comum
![Page 141: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/141.jpg)
Desktop e Mobile
![Page 142: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/142.jpg)
http://www.fa7.edu.br/webmobile/ex_layout.zip
Exercício
![Page 143: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/143.jpg)
Adaptar este conteúdo para uma coluna
![Page 144: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/144.jpg)
Layout Fluido
![Page 145: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/145.jpg)
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 "exíveis
![Page 146: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/146.jpg)
Layout Fixo
• O layout !xo é 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
![Page 147: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/147.jpg)
Layout fixo
![Page 148: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/148.jpg)
Layout fixo
![Page 149: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/149.jpg)
Layout Fluido
• Layouts "uidos utilizam unidades "exíveis (% , em) para larguras ao invés de pixels
• Permite que haja !delidade do design inicial da página
• Layout se adapta de acordo com o campo de visão
• Desa!o • Se desapegar das medidas do projeto inicial
![Page 150: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/150.jpg)
Medidas flexíveis
• As mais utilizadas
• %
• em
![Page 151: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/151.jpg)
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
![Page 152: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/152.jpg)
%
body { /* largura total da tela */ width: 100%;
} section {
/* 1/3 da página */ width: 33.33333%;
/* padding de 10% do pai */ padding: 10%;
}
![Page 153: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/153.jpg)
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%
![Page 154: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/154.jpg)
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 */ }
![Page 155: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/155.jpg)
em
• Pode ser usado em qualquer propriedade mas sempre signi!car uma relação com o tamanho da fonte • Útil quando a medida de algum elemento tem
relação com texto, uma medida tipográ!ca • Ex: Espaçamento entre parágrafos
p { margin: 0 1em; }
p { margin: 0 5%; }
![Page 156: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/156.jpg)
Flexibilidade nos elementos filhos
• Vantagem • As medidas "exíveis afetam os elementos !lhos
(aninhados)
• Cenário: • Quando o usuário aumenta a fonte no navegador pra
ler melhor • todo o layout baseado em em é afetado
![Page 157: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/157.jpg)
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;
}
![Page 158: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/158.jpg)
Quais os valores reais
article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
![Page 159: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/159.jpg)
rem
• Nova medida
• Como o em é relativo ao elemento pai, o gerenciamento do tamanho das fontes pode !car 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
![Page 160: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/160.jpg)
Quais os valores reais
article { font-size: 1.25rem; } h1 { font-size: 2rem; } p { font-size: 0.9rem; }
![Page 161: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/161.jpg)
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
![Page 162: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/162.jpg)
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
![Page 163: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/163.jpg)
Utilizando o layout fluido
![Page 164: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/164.jpg)
Utilizando o layout fluido
• Mudança de paradigma
• Pode ser uma tarefa árdua quando já se está acostumado a medidas !xas
• 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 !xos
![Page 165: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/165.jpg)
Layout
.olhar {! width: 25%;! float: left;!}!
![Page 166: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/166.jpg)
Sobre boxes css
• Suponha que existam 2 sections de!nidas pelas regras abaixo, eu teria um linha com 2 colunas?
section {!
!float: left;!!padding: 5%; !!width: 50%; !
} !
![Page 167: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/167.jpg)
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
![Page 168: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/168.jpg)
Box model
• Não é o width que determina a largura !nal • O tamanho !nal de cada elemento é
section {!!float: left;!!padding: 5%; !!width: 40%; !
} !
![Page 169: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/169.jpg)
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;!!!
![Page 170: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/170.jpg)
Alteração do box-sizing
• Cenário: O width do elemento está de!nido em relação ao elemento pai, mas você gostaria que o padding fosse uma relação com o font-size do elemento
![Page 171: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/171.jpg)
Alteração do box-sizing
section {! box-sizing: border-box;! float: left;! padding: 1em;! width: 50%;!}!
![Page 172: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/172.jpg)
Alterando todo
*{! -webkit-box-sizing: border-box;! -moz-box-sizing: border-box;! box-sizing: border-box;!}!
![Page 173: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/173.jpg)
Utilizando layout fluido
![Page 174: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/174.jpg)
Utilizando layout fluido
• Para converter um layout baseado em pixels para um baseado em proporções:
![Page 175: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/175.jpg)
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%; !} !!
![Page 176: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/176.jpg)
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" />
![Page 177: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/177.jpg)
Restrição ao layout fluido
![Page 178: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/178.jpg)
Restrição ao layout fluido
• O layout "uido é 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 "uir 100% sobre uma tela
![Page 179: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/179.jpg)
Restrição ao Layout Fluido
• Imagine este design em uma tela muito grande
![Page 180: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/180.jpg)
Restrição ao layout fluido
• Em telas muito grandes, alguns layouts "uidos podem !car 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
![Page 181: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/181.jpg)
Restrição ao Layout Fluido
body {! max-width: 2000px;! margin-left: auto;! margin-right: auto;! width: 100%;!}!
![Page 182: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/182.jpg)
Imagens flexíveis
![Page 183: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/183.jpg)
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
![Page 184: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/184.jpg)
Recursos flexíveis
• É possível aplicar a mesma ideia para outros recursos
img, iframe, object, embed, video { height: auto; max-width: 100%; }
![Page 185: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/185.jpg)
Mobile First
![Page 186: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/186.jpg)
Qual será a melhor estratégia?
![Page 187: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/187.jpg)
Mobile
• Maior diferença • Espaço dísponível para o conteúdo • Existe o Scroll
• Mais "exível • rua, praia, carro, casa, cama, sofá • Touch-screen • Limitações • Tela menor, rede lenta, hardware mais lento, toque
menos preciso que o mouse
![Page 188: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/188.jpg)
Abordagens ágeis
Kent Beck
TDD
Baby Steps
![Page 189: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/189.jpg)
Mobile First
Versão mais limitada • Conteúdo priorizado
Versão menos limitada
![Page 190: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/190.jpg)
Progressive Enhancement
Layout mais simples Imagens menores CSS e JS
Mais possibilidade de conteúdo Layout com colunas ? Imagens maiores
Layout widescreen Imagens maiores
![Page 191: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/191.jpg)
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
![Page 192: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/192.jpg)
Versão Mobile Específica
![Page 193: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/193.jpg)
![Page 194: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/194.jpg)
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 con!ável que o servidor tem sobre qual é o navegador
![Page 195: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/195.jpg)
http://detectmobilebrowsers.com/
![Page 196: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/196.jpg)
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|"y(\-|_)|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'); ?>
![Page 197: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/197.jpg)
XHTML-MP
• É um subconjunto do HTML projetado para funcionar adequadamente em navegadores mobile diferentes. • Ideal para navegadores de capacidade mediana
![Page 198: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/198.jpg)
Projetando formulários
![Page 199: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/199.jpg)
Projetando formulário
• Costuma-se dizer que dispositivos móveis são muito mais utilizados para consumos de informação
![Page 200: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/200.jpg)
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
![Page 201: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/201.jpg)
Labels superiores
![Page 202: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/202.jpg)
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 "uxo das informações
![Page 203: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/203.jpg)
Campo Senha
• Permita ao usuário a opção de exibir os caracteres quando ele estiver digitando senhas
![Page 204: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/204.jpg)
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
![Page 205: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/205.jpg)
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
![Page 206: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/206.jpg)
![Page 207: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/207.jpg)
![Page 208: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/208.jpg)
![Page 209: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/209.jpg)
![Page 210: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/210.jpg)
Padrões de Navegação Mobile
![Page 211: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/211.jpg)
Top nav
• Uma das soluções mais fáceis de implementar é manter a navegação no topo
![Page 212: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/212.jpg)
Top nav
• Fácil de implementar
• Sem necessidade de JS
• Sem !rulas CSS
• Pode ocasionar problemas de altura
• Pode ocasionar problemas com links muito próximos
Vantagens
![Page 213: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/213.jpg)
Â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
![Page 214: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/214.jpg)
Âncora no rodapé
• Fácil de implementar
• Sem necessidade de JS
• Sem !rulas CSS
• Botão único no cabeçalho
• Pode desorientar algumas pessoas
• Alguns podem achar a solução deselegante
Vantagens
![Page 215: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/215.jpg)
Menu de Seleção
• É possível transformar um menu em uma lista de links em um menu de seleção
![Page 216: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/216.jpg)
Menu de Seleção
• Não ocupa espaço na tela
• Mantém toda a interação no cabeçalho
• Facilmente identi!cável
• Di!culdade para estilizar select
• Quando há submenus
• Necessita de JS
Vantagens Desvantagens
![Page 217: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/217.jpg)
Alternância
• Semelhante a “Âncora no rodapé”, mas apresenta o menu próximo. Boa aparência e fácil de implementar.
![Page 218: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/218.jpg)
Alternância
• Mantém a interação em um só local
• Elegante
• Facilmente escalável
• Performance
• Precisa de JS
Vantagens Desvantagens
![Page 219: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/219.jpg)
Slide à esquerda
• O menu de navegação é acessado através de um ícone que move o conteúdo para a direita, exibindo os links
![Page 220: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/220.jpg)
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
![Page 221: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/221.jpg)
Somente no rodapé
• Semelhante a Top Nav, mas sem âncora no cabeçalho
![Page 222: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/222.jpg)
Somente no rodapé
• Não ocupa espaço no cabeçalho
• O conteúdo principal !ca destacado
• Difícil de encontrar e acessar o menu
• É preciso percorrer todo o conteúdo
Vantagens Desvantagens
![Page 223: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/223.jpg)
Pull Down
• Revela o menu através de movimento de slide
![Page 224: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/224.jpg)
Pull Down
• Convenção para smartphones
• Técnica avançada
• Precisa de uma instrução de uso
Vantagens
![Page 225: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/225.jpg)
XHTML-MP
• Links • Não suporta o atributo target • Dá suporte ao atributo accesskey • 0 a 9
• Não suporta iframes • Pre!ra lista ordenadas • <ul> <ol>
![Page 226: Web Design Responsivo](https://reader033.fdocumentos.tips/reader033/viewer/2022060114/557264aad8b42a761d8b4fda/html5/thumbnails/226.jpg)
Referências
• https://developer.mozilla.org/docs/CSS/Media_queries • http://www.w3.org/TR/css3-mediaqueries/