HTML5 MOBILEFront-end Web para Mobile Apps

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

EMENTA

3

• Touchscreen• Sensores

• Bússulas, acelerômetros e giroscópios• DeviceOrientation• DeviceMotion

• Frameworks e bibliotecas

O QUE VEREMOS AGORA

4

MOVIMENTOS• Dispositivos móveis já são dotados de:

• Magnetômetros - Medidores de campos magnéticos, são usados em bússulas digitais

• Acelerometros - Calcula a força g incidente no aparelho para verificar se foi movido.

• Giroscópio - Calcula movimentos em torno do seu próprio eixo e em outros eixos também

• Com esses equipamentos, os browsers conseguem detectar posicionamentos e ações de movimentos do aparelho• http://viagem.hsw.uol.com.br/bussolas.htm

• http://www.tecmundo.com.br/celular/4406-como-funcionam-acelerometros-e-giroscopios-.htm

5

ACELERÔMETRO• Montado sobre uma estrutura que utiliza a força

da gravidade para detectar a movimentacão

6

ACELERÔMETRO• A estrutura é capaz de

calcular o posicionamento por estar montada em três eixos

7

GIROSCÓPIO• Artefato que gira em

torno de um eixo

8

GIROSCÓPIO• Artefato que gira em

torno de um eixo

8

• Possuem a capacidade de manterem a orientação de seu eixo quando estão girando

GIROSCÓPIO• Artefato que gira em

torno de um eixo

8

• Possuem a capacidade de manterem a orientação de seu eixo quando estão girando

• Chegam a desafiar as leis da física

MOVIMENTOS• Dispositivos mobile são dotados dessas

ferramenta para que sejam capazes de detectar sua posição atual nos eixos:• x - corta a largura do aparelho• y - corta a altura do aparelho• z - corta a espessura do aparelho

9

• Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próximade você

• O valor de x vai aumentar se você empurrá-lo pra direita

• O de y aumenta se empurrá-lo pra frente• E o de z se o empurrá-lo pra cima

MOVIMENTOS• Dispositivos mobile são dotados dessas

ferramenta para que sejam capazes de detectar sua posição atual nos eixos:• x - corta a largura do aparelho• y - corta a altura do aparelho• z - corta a espessura do aparelho

9

• Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próximade você

• O valor de x vai aumentar se você empurrá-lo pra direita

• O de y aumenta se empurrá-lo pra frente• E o de z se o empurrá-lo pra cima

MOVIMENTOS• Dispositivos mobile são dotados dessas

ferramenta para que sejam capazes de detectar sua posição atual nos eixos:• x - corta a largura do aparelho• y - corta a altura do aparelho• z - corta a espessura do aparelho

9

• Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próximade você

• O valor de x vai aumentar se você empurrá-lo pra direita

• O de y aumenta se empurrá-lo pra frente• E o de z se o empurrá-lo pra cima

ROTAÇÕES• A rotação de cada um dos

três eixos é chamada de:• yaw: alpha α - Ação: dizer não• pitch: beta - ϐ - Ação: empinar• roll: gamma γ - Ação: rolar

10

ROTAÇÕES• Esses dados são expressos em ângulos (angulos de

Euler)• yaw - α: giro sobre o eixo z

• O zero grau é o norte da bússula• pitch - ϐ: giro sobre o eixo x• roll - γ: giro sobre o eixo y

11

ROTAÇÕES NO APARELHO

• Aparelho solto em superfície plana apontando pro norte• alpha: 0, beta: 0, gamma: 0

12

• Aparelho rolou pra esquerda 30 graus

• alpha: 0, beta: 0, gamma: 30

ROTAÇÕES NO APARELHO

• Aparelho solto em superfície plana apontando pro norte• alpha: 0, beta: 0, gamma: 0

12

• Aparelho rolou pra esquerda 30 graus

• alpha: 0, beta: 0, gamma: 30

DEVICE ORIENTATION• Objeto DeviceOrientationEvent

• if (window.DeviceOrientationEvent) { ...}• Se o dispositivo o tiver, ele possui suporte a orientação

• Obs.: O browser do primeiro iPad dizia que tinha mas era caô• Objeto que traz os atributos alpha, beta e gamma• No Firefox é um OrientationEvent e funciona diferente

• if (window.OrientationEvent) { ... }

• Evento onDeviceOrientation• window.addEventListener('deviceorientation', callback, phase);• No Firefox:

• window.addEventListener('MozOrientation', callback, phase);

13

DEVICE MOTION• Objeto DeviceMotionEvent

• if (window.DeviceMotionEvent) { ...}• Traz os atributos nos três eixos x, y, z (em m/s2):

• accelerationIncludingGravity • acceleration - aceleração excluindo os efeitos da gravidade

• Evento onDeviceMotion• window.addEventListener('devicemotion', callback, phase);

14