HTML5 MOBILEFront-end Web para Mobile Apps
EMENTA• Imersão em mobile browsers• Mobile Displays• Touchscreen• Sensores• Frameworks e bibliotecas                      ...
O QUE VEREMOS AGORA• Touchscreen• Sensores • Bússulas, acelerômetros e giroscópios • DeviceOrientation • DeviceMotion• Fra...
MOVIMENTOS• Dispositivos        móveis já são dotados de: •   Magnetômetros - Medidores de campos magnéticos, são     usad...
ACELERÔMETRO• Montado sobre uma estrutura que utiliza a força da gravidade para detectar a movimentacão                   ...
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• Possuem  a capacidade de manterem a orientação de seu eixo quan...
GIROSCÓPIO• Artefato         que gira em torno de um eixo• Possuem  a capacidade de manterem a orientação de seu eixo quan...
MOVIMENTOS• Dispositivos             mobile são dotados dessas ferramenta para que sejam capazes de detectar sua posição a...
MOVIMENTOS• Dispositivos             mobile são dotados dessas ferramenta para que sejam capazes de detectar sua posição a...
MOVIMENTOS• Dispositivos             mobile são dotados dessas ferramenta para que sejam capazes de detectar sua posição a...
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:...
ROTAÇÕES• Esses      dados são expressos em ângulos (angulos de Euler) •   yaw - α: giro sobre o eixo z     •   O zero gra...
ROTAÇÕES NO APARELHO• Aparelho solto em                     • Aparelho  rolou pra superfície plana                        ...
ROTAÇÕES NO APARELHO• Aparelho solto em                     • Aparelho  rolou pra superfície plana                        ...
DEVICE ORIENTATION• Objeto       DeviceOrientationEvent •   if (window.DeviceOrientationEvent) { ...} •   Se o dispositivo...
DEVICE MOTION• Objeto      DeviceMotionEvent •   if (window.DeviceMotionEvent) { ...} •   Traz os atributos nos três eixos...
HTML5 Mobile - Aula 3 - Device Orientation
Upcoming SlideShare
Loading in …5
×

HTML5 Mobile - Aula 3 - Device Orientation

3,882 views

Published on

Aula 3 do curso HTML5 Mobile da Especializa. Tratamos sobre os sensores de posicionamento e movimento do aparelho.
A leitura desses sensores varia de acordo com o browser mas já é plenamente viável no iOS e Androids mais atuais (acima do honeycomb).

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,882
On SlideShare
0
From Embeds
0
Number of Embeds
2,550
Actions
Shares
0
Downloads
33
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 Mobile - Aula 3 - Device Orientation

  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• Touchscreen• Sensores • Bússulas, acelerômetros e giroscópios • DeviceOrientation • DeviceMotion• Frameworks e bibliotecas 4
  4. 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
  5. 5. ACELERÔMETRO• Montado sobre uma estrutura que utiliza a força da gravidade para detectar a movimentacão 6
  6. 6. ACELERÔMETRO•A estrutura é capaz de calcular o posicionamento por estar montada em três eixos 7
  7. 7. GIROSCÓPIO• Artefato que gira em torno de um eixo 8
  8. 8. GIROSCÓPIO• Artefato que gira em torno de um eixo• Possuem a capacidade de manterem a orientação de seu eixo quando estão girando 8
  9. 9. GIROSCÓPIO• Artefato que gira em torno de um eixo• Possuem a capacidade de manterem a orientação de seu eixo quando estão girando• Chegam a desafiar as leis da física 8
  10. 10. 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 • Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próxima de 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 9
  11. 11. 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 • Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próxima de 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 9
  12. 12. 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 • Ponha um smartphone deitado sobre a mesa, com a parte inferior mais próxima de 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 9
  13. 13. 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
  14. 14. 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
  15. 15. ROTAÇÕES NO APARELHO• Aparelho solto em • Aparelho rolou pra superfície plana esquerda 30 graus apontando pro norte • alpha: 0, beta: 0, gamma: 30 • alpha: 0, beta: 0, gamma: 0 12
  16. 16. ROTAÇÕES NO APARELHO• Aparelho solto em • Aparelho rolou pra superfície plana esquerda 30 graus apontando pro norte • alpha: 0, beta: 0, gamma: 30 • alpha: 0, beta: 0, gamma: 0 12
  17. 17. 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
  18. 18. 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

×