Recursos do HTML5 para Dispositivos Móveis
Nossas vidas mudaram completamente depois da invenc?a?o dos smartphones e tablets. Avanços na usabilidade, com suas telas sensíveis a toque, capacidades de processamento espantosas para dispositivos tão pequenos e, é claro, seus recursos úteis como acesso ao sistema de GPS e ao acelerômetro.
O GPS – este conjunto de sate?lites que triangula fora de o?rbita e nossos sinais fornecendo latitude e longitude – transformou-se na forma em que nos locomovemos em nossas cidades e ate? mesmo como procuramos por produtos e servic?os. Na ausência de um dispositivo que acesse tais satélites, quaisquer sinais de onda modernos (como Bluetooth, Wi-Fi, GSM, CDMA, entre outros) podem ajudar a cumprir tal func?a?o, mesmo que de forma aproximada.
Com um recurso tão rico à disposição, os desenvolvedores do HTML5 criaram uma API para que o browser solicite tal recurso ao sistema operacional, que por sua vez fará uso do hardware buscando tal informação. Veja abaixo um exemplo simples do uso da geolocalização:
01 <html>
02 <head>
03 <meta charset=”utf-8″>
04 <title>Exemplo Geolocalização</title>
05 </head>
06 <body>
07 <div id=”coordenadas”></div>
08 </body>
09 </html>
10
11 <script type=”text/javascript”>
12 // Verificando se existe suporte a geolocalizacão
13 if(navigator.geolocation)
14 {
15 // Método getCurrentPosition() retorna
16 // objeto com atributos coords (coordenadas)
17 navigator.geolocation.getCurrentPosition(resultado);
18 function resultado(posicao)
19 {
20 // Objeto posição com propriedade coords
21 document.getElementById(‘coordenadas’).innerHTML =
22 ‘Latitude : ‘+posicao.coords.latitude+’, Longitude: ‘
23 +posicao.coords.longitude;
24 }
25 </script>
Com tal resultado prático, temos a obtenção de latitude e longitude, utilizando geolocalização, exposta a seguir:
Claro que com tais coordenadas e um sistema de mapas preciso (como o Google Maps) poderíamos apresentar a informação de uma forma muito mais visual.
Conforme dito, a mudança na acessibilidade trazida com os dispositivos móveis provoca uma quebra de paradigma: sua principal interface com o usua?rio é uma tela sensi?vel a toque. Como interagir por esta interface, uma vez que o tradicional JavaScript possuía apenas eventos disparados por teclado e mouse? Foram então criados eventos disparados pelo toque, ou Touch Events.
O primeiro esquema a seguir traz um exemplo de Evento de Toque e, logo abaixo, o resultado na imagem:
01 <html>
02 <head>
03 <meta charset=”utf-8″>
04 <title>Exemplo com Toques</title>
05 </head>
06 <style>
07 #quadrado {
08 width: 600px;
09 height: 370px;
10 border: 1px solid blue;
11 background-color: blue;
12 color: white;
13 text-align: center;
14 font-size: 40px;
15 padding-top: 130px;
16 }
17 </style>
18 <body>
19 <div id=’quadrado’></div>
20 </body>
21 </html>
22 <script type=”text/javascript”>
23 // Evento touchstart começa assim que a tela é tocada
24 document.getElementById (‘quadrado’).addEventListener(‘touchstart’,
25 function(evento){
26 // targetTouches é uma lista de toques sobre a superfície toda
27 if (evento.touches.item(0) == evento.targetTouches.item(0)) {
28 document.getElementById(‘quadrado’).innerHTML = “TOQUE
29 DETECTADO!”;
30 }
31 } , false);
32 </script>
A possibilidade do uso do acelerômetro, um recurso presente nos dispositivos portáteis (e em alguns notebooks também), permite determinar se o aparelho está sendo rotacionado de alguma maneira. O evento de Device Orientation possui atributos conhecidos como alpha, beta e gamma, que retornam números que representam os movimentos de rotação.
Veja um exemplo de uso do acelerômetro:
01 <!DOCTYPE HTML>
02 <html lang=”pt-br”>
03 <head>
04 <meta charset=”UTF-8″>
05 <title>Exemplo Acelerômetro</title>
06 </head>
07 <style>
08 #circulo {
09 width: 200px; height: 200px;
10 border-radius: 200px;
11 background-color: blue;
12 position: relative;
13 }
14 </style>
15 <body>
16 <div id=”circulo”></div>
17 </body>
18 </html>
19 <script type=”text/JavaScript”>
20 //Verifica se o dispositivo+navegador possui suporte a acelerômetro
21 if (window.DeviceOrientationEvent) {
22 //Aplica o evento deviceorientation que será na função move()
23 window.addEventListener(“deviceorientation”, move, true);
24 function move(evento) {
25 // Mostra coordenadas beta e gamma no console
25 console.log(‘beta ‘, evento.beta, ‘ | gamma ‘, evento.gamma)
26
27 if (evento.gamma > 0) {
28 document.getElementById(‘circulo’).style.left =
29 (document.getElementById(‘circulo’).offsetLeft + 1) + ‘px’;
30 } else {
31 document.getElementById(‘circulo’).style.left =
32 (document.getElementById(‘circulo’).offsetLeft – 20) + ‘px’;
33 }
34 if (evento.beta > 0) {
35 document.getElementById(‘circulo’).style.top =
36 (document.getElementById(‘circulo’).offsetTop + 1) + ‘px’;
37 } else {
38 document.getElementById(‘circulo’).style.top =
39 (document.getElementById(‘circulo’).offsetTop – 10) + ‘px’;
40 }
41 }
42 }
43 </script>
Teremos como resultado esta esfera, feita em CSS, se movendo pela tela com acelerômetro:
Henrique Poyatos é coordenador pedagógico de EAD e professor dos cursos de graduação e MBA da FIAP. Pós-graduado em Gerenciamento de Projetos e tecnólogo em Processamento de Dados (FIAP). Atua no mercado de desenvolvimento para Internet desde 1996 e coordenou projetos de tecnologia para empresas como Caixa Econômica Federal, Nossa Caixa, McDonalds, Metrô de São Paulo e clientes internacionais.
