• Save
HTML5 Mobile Aula 1
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5 Mobile Aula 1

  • 5,877 views
Uploaded on

Primeiros slides do curso HTML5 Mobile da Especializa Treinamentos ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,877
On Slideshare
3,595
From Embeds
2,282
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 2,282

http://especializa.com.br 2,267
http://ead.especializa.com.br 9
http://plus.url.google.com 6

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 MOBILEFront-end Web para Mobile Apps
  • 2. EMENTA• Imersão em mobile browsers• Mobile Displays• Touchscreen• Sensores• Frameworks e bibliotecas 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. MOBILE BROWSERS 5
  • 5. MOBILE BROWSERS 5
  • 6. MOBILE BROWSERS 5
  • 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. 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. 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. 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. 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. 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. 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. 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. IOS SIMULATOR 14
  • 16. ANDROID EMULATOR 15
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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