HTML5 MOBILEFront-end Web para Mobile Apps
EMENTA• Imersão  em mobile browsers• Mobile Displays• Touchscreen• Sensores• Frameworks e bibliotecas                     ...
O QUE VEREMOS AGORA• Imersão    em mobile browsers • Detecção de Mobile browsers e funcionalidades • Particularidades • Es...
MOBILE BROWSERS         5
MOBILE BROWSERS         5
MOBILE BROWSERS         5
DETECÇÃO DE BROWSERS• window.navigator •   Assinatura do browser capturada no Javascript• User-Agent •   Cabeçalho HTTP qu...
TERA-WURFL• Wireless       Universal Resource File •   Banco de dados universal de todos os dispositivos móveis do     pla...
MODERNIZR• Script       de uso geral para detecção das capacidades do navegador  •   Cria dinamicamente classes na tag <ht...
MODERNIZR• Script       de uso geral para detecção das capacidades do navegador  •   Possui uma API javascript simples par...
PARTICULARIDADES MOBILE•O mundo mobile é:• Menor •   Handsets (smartphones) foram feitos para caberem na palma     da mão•...
ESTRATÉGIAS• Site   exclusivo para mobile devices  •   Cheque o UserAgent no servidor e redirecione para uma      versão e...
ESTRATÉGIAS• Mobile    Web App •   Aplicativos acessíveis a partir do próprio navegador •   Prós: Não há a necessidade de ...
SIMULANDO AMBIENTE• Apple    iOS •   iOS Simulator, disponível apenas para Mac e já vem no pacote     de instalação do XCo...
IOS SIMULATOR      14
ANDROID EMULATOR       15
O QUE VEREMOS AGORA• Imersão em mobile browsers• Mobile Displays • Resoluções, dimensões, densidades, aspect-ratios e zoom...
MOBILE DISPLAYS• Dimensões •   Celulares evoluíram desde mecanismos grandes com telas pequenas     para produtos finos e le...
MOBILE DISPLAYS• Resoluções •   A evolução dos desktops sempre foi pautada na capacidade de se     obter maior resolução. ...
O QUE É UM PÍXEL?• Pixels    físicos  •   Pontos reais do dispositivo. Sua capacidade de exibir pontos de luz.• CSS     Pi...
MOBILE DISPLAYS• Resoluções          e aspect-ratio em aparelhos móveis •   Celulares foram criados para ligar, mas aos po...
ZOOM• Browsers possuem a capacidade de condensar pixels em operações de zoom •   Quando há um zoom out, os pixels CSS     ...
DENSIDADE•   Maior resolução no mesmo espaço de tela significa maior densidade    de pixels, medida em PPI (pixels per inch...
MEDIDAS DO IPHONE• Tela     de 3.5” com resolução 320x480 pixels  •   Aspect-ratio de 1.5 (ou 2:3) vertical na área total ...
MAIS ESPAÇO NO IPHONE• Prática        para se obter mais 60px de viewport no iPhone (retirando a barra de endereços) •   E...
MAIS ESPAÇO NO IPHONE•OSafari permite salvar uma página como aplicativostandalone. Basta seguir os passos: •   Solicitar f...
IOS WEBAPP•É possível detectar se a webapp está rodando em modo browser (como uma página) ou diretamente como aplicativo •...
RETINA DISPLAY• Em 2010, o iPhone 4 aumentou a densidade de pixels de seu display de 165ppi para 330ppi •   A Apple, por j...
IPHONE PIXEL RATIO• window.devicePixelRatio •   A fim de continuar exibindo as webapps do mesmo jeito, esta     variável fo...
MEDIDAS DOS ANDROIDS• Variam    bastante por aparelho •   Desde 176 x 220 em celulares mais simples,     passandos por 480...
ANDROID PIXEL RATIO• window.devicePixelRatio                 no Android •   A linha top dos dispositivos Android está acim...
DENSIDADE EM TABLETS •   Tablets Android não costumam repetir a mesma densidade     dos smartphones     •   Acer Iconia Pa...
META VIEWPORT•   width/height    •   Dimensões em CSS pixels        •   Ex.: <meta name="viewport" content="width=320px">•...
CÁLCULOS DE ESPAÇO• Javascript •   screen.width/height: Largura e altura da tela em device pixels     •   Alguns browsers ...
HTML5 Mobile Aula 1
Próximos SlideShares
Carregando em…5
×

HTML5 Mobile Aula 1

6.875 visualizações

Publicada em

Primeiros slides do curso HTML5 Mobile da Especializa Treinamentos
http://www.especializa.com.br/curso/html5mobile

Publicada em: Tecnologia
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
6.875
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.556
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5 Mobile Aula 1

  1. 1. HTML5 MOBILEFront-end Web para Mobile Apps
  2. 2. EMENTA• Imersão em mobile browsers• Mobile Displays• Touchscreen• Sensores• Frameworks e bibliotecas 3
  3. 3. O QUE VEREMOS AGORA• Imersão em mobile browsers • Detecção de Mobile browsers e funcionalidades • Particularidades • Estratégias para aplicativos mobile • Simuladores Android, iOS e Blackberry• MobileDisplays• Touchscreen• Sensores• Frameworks e bibliotecas 4
  4. 4. MOBILE BROWSERS 5
  5. 5. MOBILE BROWSERS 5
  6. 6. MOBILE BROWSERS 5
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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 ficam 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/offline do navegador para sincronizações de dados 12
  14. 14. 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
  15. 15. IOS SIMULATOR 14
  16. 16. ANDROID EMULATOR 15
  17. 17. O QUE VEREMOS AGORA• Imersão em mobile browsers• Mobile Displays • Resoluções, dimensões, densidades, aspect-ratios e zoom • Meta Viewport e cálculos de espaço• Touchscreen• Sensores• Frameworks e bibliotecas 16
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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 infinidade 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
  22. 22. 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
  23. 23. DENSIDADE• Maior resolução no mesmo espaço de tela significa 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
  24. 24. 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
  25. 25. 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 fim de ganhar espaço. No Android, o Firefox e o Ópera já retiram a barra sem precisar desta prática. 24
  26. 26. MAIS ESPAÇO NO IPHONE•OSafari permite salvar uma página como aplicativostandalone. 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
  27. 27. 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 verificar 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
  28. 28. 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
  29. 29. IPHONE PIXEL RATIO• window.devicePixelRatio • A fim 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
  30. 30. 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 classificação de tamanhos e densidades (low, medium, high, extra high) 29
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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

×