HTML5 Mobile Aula 1

HTML5 MOBILE
Front-end Web para Mobile Apps

EMENTA
• Imersão em mobile browsers
• Mobile Displays
• Touchscreen
• Sensores
• Frameworks e bibliotecas

3

O QUE VEREMOS AGORA
• Detecção de Mobile browsers e funcionalidades
• Particularidades
• Estratégias para aplicativos mobile
• Simuladores Android, iOS e Blackberry

• MobileDisplays
• Touchscreen
• Sensores

4

DETECÇÃO DE BROWSERS
• window.navigator
• Assinatura do browser capturada no Javascript
• User-Agent
• Cabeçalho HTTP que retém a assinatura do browsers
• Ex (php):
• <?php
if(preg_match('Android|BlackBerry|PalmSource|iPhone|iPad' .
'Samsung|Nokia|MIDP|SymbianOS',
$ _SERVER[‘HTTP_USER_AGENT’]) {
echo "Mobile Browser na área";
}
?>
• http://detectmobilebrowsers.com/
• http://www.useragentstring.com/pages/Mobile%20Browserlist/

6

TERA-WURFL
• Wireless Universal Resource File
• Banco de dados universal de todos os dispositivos móveis do
planeta.
• Projeto em PHP com base de dados MySQL, MSSQL ou
MongoDB que deve ser instalado no seu servidor
• Disponível também via Webservice
• Base alimentada por usuários no mundo inteiro:
• https://db.scientiamobile.com/

• Mais informações:
• http://dbapi.scientiamobile.com

7

MODERNIZR
• Script
de uso geral para detecção das
capacidades do navegador
• Cria dinamicamente classes na tag <html> para diversas
funcionalidades presentes no navegador
• class="js no-touch postmessage history multiplebgs boxshadow
opacity cssanimations csscolumns cssgradients csstransforms
csstransitions fontface localstorage sessionstorage svg inlinesvg no-
blobbuilder blob bloburls download formdata wf-active"

• Ajuda na hora de implementar seu css:
• #meuDiv { background: url(‘img/sombra.png’); }
• .boxshadow #meuDiv {
background: none;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.20);
}

8

MODERNIZR
• Script
de uso geral para detecção das
capacidades do navegador
• Possui uma API javascript simples para detecção de
funcionalidades
• if (Modernizr.touch) {
// código com touch
} else {
// código com click
}

9

PARTICULARIDADES MOBILE
•O mundo mobile é:
• Menor
• Handsets (smartphones) foram feitos para caberem na palma
da mão
• Mais variado
• Aspectos, densidades, orientações, métodos de input (dpad,
trackball, touch, multitouch)
• Mais difícil
• Handsets são muitas vezes manuseados pelo polegar (um
dedo meio estabanado)
• Mesmo usando o indicador, a precisão não é a mesma de um
mouse (e não há ponteiros passeando na tela)

10

ESTRATÉGIAS
• Site exclusivo para mobile devices
• Cheque o UserAgent no servidor e redirecione para uma
versão exclusivamente mobile do site
• Prós: Maior simplicidade na construção da interface do projeto
• Contras: Mais de um ponto de manutenção do sistema
• Site adaptável (responsivo)
• Utilize Media Queries
• Cheque capacidades dinamicamente
• Prós: Único projeto para todas as plataformas
• Contras: Construção da interface muito mais complexa

11

ESTRATÉGIAS
• Mobile Web App
• Aplicativos acessíveis a partir do próprio navegador
• Prós: Não há a necessidade de instalação prévia
• Contras: Perdem espaço com áreas do próprio navegador e
não ﬁcam presentes em home screen do usuário
• Mobile Standalone App
• Aplicativos acessíveis após instalação
• Prós: Ficam como ícones em home screen, podem ser
encontrados em lojas como Apple Store e Google Play e
suprimem espaços mortos das barras do browser
• Contras: Mais complexos. Normalmente, devem usar Cache
API, Storage API e realizar checagem online/ofﬂine do
navegador para sincronizações de dados

12

SIMULANDO AMBIENTE
• Apple iOS
• iOS Simulator, disponível apenas para Mac e já vem no pacote
de instalação do XCode
• https://developer.apple.com/devcenter/ios/index.action
• Google Android
• Android Virtual Device (AVD)
• http://developer.android.com/sdk/index.html
• RIM BlackBerry
• Máquina virtual VMWare simulando o S.O. do celular
• http://us.blackberry.com/developers/resources/simulators.jsp

13

ANDROID EMULATOR

15

O QUE VEREMOS AGORA
• Mobile Displays
• Resoluções, dimensões, densidades, aspect-ratios e zoom
• Meta Viewport e cálculos de espaço

• Touchscreen
• Sensores

16

MOBILE DISPLAYS
• Dimensões
• Celulares evoluíram desde mecanismos grandes com telas pequenas
para produtos finos e leves com amplas telas de altíssima resolução
• No mundo mobile, menos sempre foi mais. Quanto menor (e mais leve) fosse o
aparelho, mais portátil e atraente. Foi essa característica que tornou os
celulares tão presentes e indispensáveis no mundo atual
• Por outro lado, quanto maior e mais clara é a tela, mais versátil é o produto.
Ou seja, é possível ler, jogar, assistir a vídeos e realizar atividades profissionais
e cotidianas se o produto for pequeno o suficiente com tela grande o bastante
• O iPhone se popularizou com a dimensão de tela 3.5”, mas outros
smartphones vieram acima das 4” e os tablets podem ultrapassar 10” de tela.
• A diversidade de dimensões e proporções dificulta a vida das webapps

17

MOBILE DISPLAYS
• Resoluções
• A evolução dos desktops sempre foi pautada na capacidade de se
obter maior resolução.
• As telas foram cada vez cabendo mais conteúdo e em geral as coisas
sempre foram suficientemente legíveis
• Os primeiros monitores de S.O.s gráficos foram capazes de, em 14”, exibir
640x480 pixels
• Com a evolução das placas de vídeo e a popularização dos monitores de 15”
de telas planas, a resolução 800x600 pixels ditou os limites dos sites por anos
• Monitores CRT de 17” foram em geral utilizando resoluções 1024x768 pixels
• Em um aumento de pouco mais de 20% da tela, houve um aumento de mais
de 60% de resolução e mesmo assim coisas ficaram ainda mais nítidas
• O monitores LCD e LED conseguiram “acochar” ainda mais os pixels
e resoluções ainda maiores vieram em telas de dimensões similares
• O aspect-ratio padrão passou de 4:3 (padrão de TV) para 16:10 (widescreen) e
alguns até 16:9 (cinema) e não variaram mais além disso

18

O QUE É UM PÍXEL?
• Pixels físicos
• Pontos reais do dispositivo. Sua capacidade de exibir pontos de luz.
• CSS Pixels
• Pontos físicos que compõem uma tela máxima imaginária chamada
de layout viewport
• Device Pixels
• Antigamente, o mesmo que pixels físicos
• Os Androids passaram a informar pixels diferentes dos reais do
aparelho a partir de padrões de densidade (DPI - Dots Per Inch)
• Os iPhones seguiram a idéia com o conceito de Retina Display

19

MOBILE DISPLAYS
• Resoluções e aspect-ratio em aparelhos móveis
• Celulares foram criados para ligar, mas aos poucos foram tomando a
forma de outros produtos portáteis de nosso dia a dia
• Isso fez gerar uma inﬁnidade de tamanhos, resoluções e aspectos de telas
• Nos dispositivos móveis, a busca por maiores resoluções sempre
existiu, no entanto, esbarra-se no que é possível enxergar
• Overview mode
• Os browsers dos celulares nasceram navegando por páginas criadas
para o mundo desktop, onde cabe mais coisas legivelmente
• Usuários não costumas gostar de conteúdo com rolagem horizontal. Fica difícil
ler se a cada linha temos que rolar a tela
• A solução para browsers mobile foi aplicar zoom out para visão geral de todo o
conteúdo de telas que não foram criadas pensando neles
• Hoje, webapps focadas em dispositivos móveis são feitas para caberem
nesses aparelhos sem a necessidade do zoom out padrão do navegador

20

ZOOM
• Browsers possuem a capacidade de condensar
pixels em operações de zoom
• Quando há um zoom out, os pixels CSS
passam a ocupar um espaço menor do que
os pixels do dispositivo (device pixels)
• Quando há um zoom in, os pixels CSS vão
consumir mais pixels do dispositivo para
exibir o conteúdo

• Dispositivospodem assim ser capazes de
renderizar na área visível uma resolução maior do
que a indicada em seus device pixels
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://www.alistapart.com/articles/a-pixel-identity-crisis/

21

DENSIDADE
• Maior resolução no mesmo espaço de tela signiﬁca maior densidade
de pixels, medida em PPI (pixels per inch)
• Para saber a densidade de uma tela faça os seguintes cálculos:

• Eleve a largura da tela ao quadrado, faça o mesmo com a altura e some os
resultados
• Tire a raíz quadrada desta soma anterior e divida pela dimensão em polegadas
da tela
• Exemplo da tela padrão do Macbook Pro de 13”:
• w = 1280, h = 800
• dp = Math.sqrt(1638400 + 640000) = 1509.4369811290567
• PPI = 1509.4369811290567 / 13” = 116.11
• http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

22

MEDIDAS DO IPHONE
• Tela de 3.5” com resolução 320x480 pixels
• Aspect-ratio de 1.5 (ou 2:3) vertical na área total e 1.1125 no
viewport
• Densidade de
165PPI
• Já é acima do
praticado em
monitores
desktop
ou notebooks

23

MAIS ESPAÇO NO IPHONE
• Prática
para se obter mais 60px de viewport no
iPhone (retirando a barra de endereços)
• Evitar zoom do usuário e escalar para o tamanho do dispositivo
• <meta name="viewport" content="user-scalable=no, width=device-
width, initial-scale=1 maximum-scale=1"/>

• Ampliar o conteúdo para além da área visível sem a barra
• body {min-height: 416px;}

• Provocar um scroll para o primeiro pixel do conteúdo
• window.scrollTo(0,1);
• Todo scroll Javascript faz o Safari calcular se é interessante retirar a barra a
ﬁm de ganhar espaço. No Android, o Firefox e o Ópera já retiram a barra
sem precisar desta prática.

24

MAIS ESPAÇO NO IPHONE
•OSafari permite salvar uma página como aplicativo
standalone. Basta seguir os passos:
• Solicitar fullscreen (retirar a barra de
endereço e de botões)
• <meta name="apple-mobile-web-app-capable"
content="yes" />

• Mandar salvar a página como aplicativo

• Adicionar à Home Screen
• Após salvar, clique no ícone da app
para abri-la em fullscreen
• http://mobile.tutsplus.com/tutorials/
mobile-web-apps/remove-address-bar/

25

IOS WEBAPP
•É possível detectar se a webapp está rodando em
modo browser (como uma página) ou diretamente
como aplicativo
• Propriedade navigator.standalone (false se foi chamada pelo
browser)
• Pode ser uma boa prática veriﬁcar se a app não está standalone
(está em modo browser) para sugerir que salve na Home Screen
• if (!navigator.standalone) {
alert(‘Adicione esta aplicação à sua Home Screen para chamá-la
diretamente sem precisar do navegador’);
}

26

RETINA DISPLAY
• Em 2010, o iPhone 4 aumentou a densidade de
pixels de seu display de 165ppi para 330ppi
• A Apple, por jogada de marketing, chamou isso de retina display,
alegando que acima de 300ppi, o olho humano não consegue mais
detectar os limites dos pixels, assim, com 330, ela colocou 30 pixels
além da nossa capacidade de perceber
• Isso dobrou a resolução
do dispositivo, de
320x480px para
impressionantes
640x960px em uma tela
de apenas 3.5”
• O lado negativo foi que
todas as webapps vistas
no novo iPhone
passariam a ocupar
apenas metade do
espaço do viewport

27

IPHONE PIXEL RATIO
• window.devicePixelRatio
• A ﬁm de continuar exibindo as webapps do mesmo jeito, esta
variável foi criada nos dispositivos móveis mais modernos
• Ela aponta a razão de device pixels para CSS pixels
• O iPhone 4, retina display, veio com um devicePixelRatio de
2. Ou seja, 1px no CSS (e no Javascript) ocupa 2px no
dispositivo
• Assim, screen.width e screen.height continuaram apresentando
320X480px e as webapps existentes não quebraram

28

MEDIDAS DOS ANDROIDS
• Variam bastante por aparelho
• Desde 176 x 220 em celulares mais simples,
passandos por 480 x 800 de alguns
Androids, (ex.: Samsung Galaxy SII),
chegando a 2560x1600 em tablets
• Existem padrões de classiﬁcação de
tamanhos e densidades (low, medium,
high, extra high)

29

ANDROID PIXEL RATIO
• window.devicePixelRatio no Android
• A linha top dos dispositivos Android está acima de 200ppi de
densidade (hdpi e xhdpi).
• Nos casos dos aparelhos com resolução 480x800px, o
devicePixelRatio dos browsers costumam ser de 1.5, ou seja 3 device
pixels para cada 2 css pixels

• Linha Samsung Galaxy
• O Galaxy Note possui resolução de 800x1280px (a mesma do
Macbook Pro de 13”, em uma tela de 5.3”). Possui devicePixelRatio
no Opera Mobile acima de 2
• O Galaxy SIII chegou a 306ppi e apresenta devicePixelRatio acima de
2 também. Curiosamente, abandonou o aspect-ratio de 16:10 em
função do 16:9 em resolução de 1280x720px (padrão HD 720p) na
sua tela de 4,8”

30

DENSIDADE EM TABLETS
• Tablets Android não costumam repetir a mesma densidade
dos smartphones
• Acer Iconia Pad, Motorola Xoom 2 e Galaxy Tab são mdpi, não
chegando a 150ppi. O Amazon Kindle Fire é mais denso mas só
atinge 170ppi

• Asus Google Nexus 7 (Android Jelly Bean)
• Lançado em Junho de 2012, alcançou a resolução de 1280x800px
(aspecto 16:10) em uma tela de 7”. Densidade de 216ppi.
• Ainda abaixo dos 264ppi do iPad 3. Este pode chegar a
2048x1536px, em sua tela de 9,7”. Aspect-ratio de 4:3

• Microsoft Surface
• Sua versão Pro chega a 1920x1080px (padrão Full HD, aspecto 16:9)
em tela de 10.6”, o que dá uma densidade de 208ppi

31

META VIEWPORT
• width/height
• Dimensões em CSS pixels
• Ex.: <meta name="viewport" content="width=320px">

• device-width/height
• Dimensões em device pixels. Read only
• initial-scale:
• Nível de zoom inicial do viewport
• Ex.: <meta name="viewport" content="initial-scale=1">

• user-scalable:
• Booleano que indica se será possível ou não aplicar zoom
• Ex.: <meta name="viewport" content="user-scalable=no">
• Ex. geral:
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">

32

CÁLCULOS DE ESPAÇO
• Javascript
• screen.width/height: Largura e altura da tela em device pixels
• Alguns browsers subtraem o espaço da barra superior no Android
• window.innerWidth/Height: Largura e altura da janela aberta
• Medida de espaço da área da janela, em CSS pixels
• muda quando se dá zoom, quanto menos zoom, mais espaço
• element.client/offset/scrollWidth/Height: Espaço do elemento

• Referências:
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-
viewport/
• http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

33

HTML5 Mobile Aula 1

Mais conteúdo relacionado

Destaque

Semelhante a HTML5 Mobile Aula 1

Mais de Jose Berardo

Último

HTML5 Mobile Aula 1