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

HTML5 Mobile Aula 1

on

  • 5,495 views

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

Statistics

Views

Total Views
5,495
Views on SlideShare
3,282
Embed Views
2,213

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 2,213

http://especializa.com.br 2207
http://plus.url.google.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Mobile Aula 1 HTML5 Mobile Aula 1 Presentation Transcript

  • HTML5 MOBILEFront-end Web para Mobile Apps
  • EMENTA• Imersão em mobile browsers• Mobile Displays• Touchscreen• Sensores• Frameworks e bibliotecas 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
  • 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 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 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
  • 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
  • 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 • Meta Viewport e cálculos de espaço• Touchscreen• Sensores• Frameworks e bibliotecas 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 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
  • 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 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
  • 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 fim 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 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
  • 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
  • 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 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
  • 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
  • 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