Desenvolvimento Móvel com HTML5

Distribuição

Lidel – edições técnicas, lda

Sede R. D. Estefânia, 183, R/C Dto. – 1049-057 LISBOA Tel: +351 213 511 448 * Fax: +351 213 522 684 Revenda: revenda@lidel.pt Exportação: depinternacional@lidel.pt Venda online: livraria@lidel.pt Marketing: marketing@lidel.pt

Livraria Av. Praia da Vitória, 14 – 1000-247 LISBOA Tel: +351 213 511 448 * Fax: +351 213 173 259 livraria@lidel.pt Edição

FCA – Editora de Informática

Av. Praia da Vitória, 14 – 1000-247 LISBOA Tel: +351 213 511 448 Email: fca@fca.pt

Copyright © junho 2015 FCA – Editora de Informática, Lda. ISBN: 978-972-722-806-5 Capa: José M. Ferrão – Look-Ahead Pré-impressão: Alice Simões Impressão e acabamento: Tipografia Lousanense, Lda. – Lousã Depósito Legal N.º 394447/15 Livro segundo o Novo Acordo Ortográfico Todos os nossos livros passam por um rigoroso controlo de qualidade, no entanto, aconselhamos a consulta periódica do nosso site (www.fca.pt) para fazer o download de eventuais correções.

Os nomes comerciais referenciados neste livro têm patente registada.

Marcas Registadas de FCA – Editora de Informática, Lda. – ®

®

®

Reservados todos os direitos. Esta publicação não pode ser reproduzida, nem transmitida, no todo ou em parte, por qualquer processo eletrónico, mecânico, fotocópia, digitalização, gravação, sistema de armazenamento e disponibilização de informação, sítio Web, blogue ou outros, sem prévia autorização escrita da Editora, exceto o permitido pelo CDADC, em termos de cópia privada pela AGECOP – Associação para a Gestão da Cópia Privada, através do pagamento das respetivas taxas.

ÍNDICE GERAL PREFÁCIO..........................................................................................................XI 0. SOBRE O LIVRO ............................................................................................... 1 0.1. O que posso encontrar neste livro .................................................................................................... 1 0.2. Requisitos ............................................................................................................................................. 1 0.3. A quem se dirige este livro ................................................................................................................ 2 0.4. Código dos exemplos ......................................................................................................................... 2 0.5. Convenções .......................................................................................................................................... 2 0.6. Sobre o Autor....................................................................................................................................... 3 0.7. Organização do livro .......................................................................................................................... 3 0.8. Suporte ................................................................................................................................................. 4 1. HTML: UM POUCO DE HISTÓRIA ......................................................................... 5 1.1. World Wide Web ................................................................................................................................ 5 1.2. Web móvel ......................................................................................................................................... 10 1.3. Versões do HTML ............................................................................................................................. 12 1.4. XHTML .............................................................................................................................................. 13 1.5. HTML5 ............................................................................................................................................... 14 2. APLICAÇÕES MÓVEIS: NATIVAS OU HTML5? ....................................................... 17 2.1. Aplicações nativas e aplicações HTML5 ........................................................................................ 17 2.2. Aplicações híbridas........................................................................................................................... 22 2.3. HTML5 Mobile ................................................................................................................................... 23 3. HTML5: O QUE TRAZ DE NOVO? ....................................................................... 31 3.1. Novas funcionalidades ..................................................................................................................... 31 3.2. Alterações à sintaxe .......................................................................................................................... 32 3.3. Novas tags .......................................................................................................................................... 32 3.3.1. Layout ....................................................................................................................................... 33 3.3.2. Novos elementos semânticos ................................................................................................ 35 3.3.3. Novas tags multimédia .......................................................................................................... 36 3.3.4. Novas funcionalidades nas forms ......................................................................................... 38 3.3.5. Suporte internacional ............................................................................................................. 39 3.3.6. Novos atributos ...................................................................................................................... 41 3.3.7. Alterações a tags e atributos HTML4 ................................................................................... 42 3.4. Suporte Mobile ................................................................................................................................... 45 4. SINTAXE HTML5 PARA WEB E MOBILE ................................................................ 49 4.1. Sintaxe básica..................................................................................................................................... 49 4.2. As tags HTML tradicionais .............................................................................................................. 51 4.2.1. Formatação de texto ............................................................................................................... 51 4.2.2. Listas ........................................................................................................................................ 57 4.2.3. Tabelas ..................................................................................................................................... 62 © FCA – Editora de Informática

VIII

DESENVOLVIMENTO MÓVEL COM HTML5

4.2.4. Carateres internacionais ........................................................................................................ 71 4.2.5. Gráficos .................................................................................................................................... 77 4.2.6. Links .......................................................................................................................................... 79 4.3. Folhas de Estilo ................................................................................................................................. 81 4.4. Estruturação de páginas Web .......................................................................................................... 89 4.5. Tags HTML – resumo ....................................................................................................................... 97 5. FOLHAS DE ESTILO WEB E MOBILE: CSS3 .......................................................... 103 5.1. Introdução ao CSS........................................................................................................................... 103 5.2. Estruturação de documentos ......................................................................................................... 113 5.3. Fontes ............................................................................................................................................... 119 5.4. Links .................................................................................................................................................. 121 5.5. Listas ................................................................................................................................................. 123 5.6. Tabelas .............................................................................................................................................. 126 5.7. Imagens ............................................................................................................................................ 131 5.8. Formulários...................................................................................................................................... 135 6. DISPOSITIVOS MÓVEIS E HTML5 .................................................................... 143 6.1. Adaptação aos dispositivos e browsers ......................................................................................... 143 6.2. Deteção de browsers......................................................................................................................... 152 6.3. Construindo aplicações móveis Web ........................................................................................... 158 7. APLICAÇÕES MÓVEIS HTML5 ......................................................................... 171 7.1. Canvas .............................................................................................................................................. 171 7.1.1. Retângulos ............................................................................................................................. 176 7.1.2. Desenhar linhas e polígonos ............................................................................................... 178 7.1.3. Desenhar círculos ................................................................................................................. 180 7.1.4. Texto ....................................................................................................................................... 185 7.1.5. Imagens .................................................................................................................................. 187 7.2. JavaScript ......................................................................................................................................... 188 7.2.1. Variáveis e tipos de dados ................................................................................................... 193 7.2.2. Tipos de dados ...................................................................................................................... 196 7.2.3. Expressões e operações ........................................................................................................ 196 7.2.4. Comentários .......................................................................................................................... 198 7.2.5. Operações .............................................................................................................................. 199 7.2.6. Operações aritméticas .......................................................................................................... 199 7.2.7. Operações lógicas ................................................................................................................. 203 7.2.8. Operações com bits ............................................................................................................... 205 7.2.9. Sintaxe curta .......................................................................................................................... 207 7.2.10. Controlo de fluxo: condicionais e ciclos .......................................................................... 209 7.2.10.1. Expressões condicionais ............................................................................. 210 7.2.10.2. Ciclos ............................................................................................................ 210 7.2.11. Funções ................................................................................................................................ 215 7.2.12. Eventos................................................................................................................................. 217 7.3. jQuery Mobile .................................................................................................................................. 220

© FCA – Editora de Informática

ÍNDICE GERAL

IX

8. ÁUDIO E VÍDEO............................................................................................ 229 8.1. Vídeo................................................................................................................................................. 229 8.2. Áudio ................................................................................................................................................ 232 8.3. Tags e atributos de controlo ........................................................................................................... 234 9. FORMULÁRIOS ............................................................................................. 239 9.1. Elementos constituintes dos formulários ..................................................................................... 239 9.1.1. Textarea ................................................................................................................................... 240 9.1.2. Select ....................................................................................................................................... 241 9.1.3. Input........................................................................................................................................ 244 9.1.4. Placeholder text ....................................................................................................................... 249 9.1.5. Autofocus e autocomplete ....................................................................................................... 250 9.1.6. Output .................................................................................................................................... 250 9.1.7. Menu ...................................................................................................................................... 251 9.2. Scripts de interpretação .................................................................................................................. 251 10. APLICAÇÕES WEB: DADOS E COMUNICAÇÕES .................................................... 255 10.1. Aplicações Web ............................................................................................................................. 255 10.2. Datasets ........................................................................................................................................... 257 10.3. Files.................................................................................................................................................. 262 10.4. Websockets .................................................................................................................................... 265 10.5. Webworkers ................................................................................................................................... 266 11. GEOLOCALIZAÇÃO ....................................................................................... 269 11.1. Introdução ...................................................................................................................................... 269 11.2. Utilizando geolocalização ............................................................................................................ 270 12. CONSTRUINDO APLICAÇÕES MÓVEIS ............................................................... 279 12.1. Exemplo prático 1: calculadora ................................................................................................... 279 12.2. Exemplo prático 2: velocímetro................................................................................................... 284 12.3. Jogos................................................................................................................................................ 288 13. OFFLINE E WEBSTORAGE.............................................................................. 295 13.1. Offline Web ..................................................................................................................................... 295 13.2. WebStorage .................................................................................................................................... 296 14. APLICAÇÕES HTML5 HÍBRIDAS ..................................................................... 303 14.1. Instalação do Phonegap ............................................................................................................... 303 14.2. Construindo aplicações híbridas................................................................................................. 311 ANEXO – PROPRIEDADES DE ESTILO DE CSS3......................................................... 331 GLOSSÁRIO DE TERMOS – PORTUGUÊS EUROPEU/PORTUGUÊS DO BRASIL ...................... 359 ÍNDICE REMISSIVO ........................................................................................... 361

© FCA – Editora de Informática

PREFÁCIO Com o grande desenvolvimento que as tecnologias móveis têm tido nos últimos anos, os smartphones e tablets tornaram-se numa das mais utilizadas plataformas de computação do mundo, tendo vindo a ganhar terreno em relação aos meios tradicionais de execução de aplicações (os computadores pessoais). Esta evolução veio também motivar muitos programadores para desenvolverem aplicações para as novas plataformas, criando múltiplas versões dos seus programas também para as variadas plataformas móveis (Android, iOS, Blackberry, Windows Mobile, etc.). Este facto levou igualmente ao aparecimento de novos modelos de negócio para a venda de aplicações e de conteúdos, com a popularização das chamadas stores, onde hoje se vendem milhões de aplicações em todo o mundo, muitas construídas por programadores anónimos.

Contudo, a evolução das tecnologias da Web também decorreu paralelamente, tirando partido das funcionalidades móveis do HTML5, uma tecnologia desenvolvida especificamente para endereçar as características de um mundo cada vez mais multidispositivo e cada vez mais móvel.

Eis que surgem então as tecnologias híbridas, capazes de transformar o que seria o desenvolvimento de um site/aplicação Web, numa aplicação móvel em tudo idêntica às aplicações que nos habituámos a ter nos nossos telefones e tablets, mas com a capacidade de poderem ser desenvolvidas uma vez e convertidas para serem executadas em qualquer dispositivo móvel que corra HTML5, sem perder as funcionalidades que levaram a um tão grande crescimento do universo das aplicações móveis.

O presente livro foca detalhadamente as várias tecnologias que estão na base da utilização do HTML5 para a construção de aplicações móveis, explicando, através de múltiplos exemplos práticos, como podemos fazer aplicações com recurso a tecnologias como o HTML5, o CSS3, o JavaScript e o jQuery Mobile. O livro sistematiza, com algum detalhe, as sintaxes do HTML5, do CSS3 e do JavaScript, e mostra como se podem utilizar estas tecnologias em conjunto, de forma rápida e pragmática, para obter os melhores resultados.

Adicionalmente, é focado o enquadramento tecnológico em que estas aplicações são desenvolvidas, incluindo a configuração dos ambientes de desenvolvimento a utilizar, bem como a utilização das diversas API disponíveis.

O livro destina-se a todos os leitores que pretendam aprender a desenvolver as suas competências com vista ao desenvolvimento de aplicações móveis, quer tenham algumas noções de edição de páginas Web, quer não as tenham. Isto porque, como se referiu, é feita uma abordagem sistemática à sintaxe e aos elementos de programação disponíveis nas várias tecnologias que compõem o universo do HTML5 (HTML, JavaScript, CSS, etc.), dado que as aplicações são suportadas por exemplos construídos de © FCA – Editora de Informática

XII

DESENVOLVIMENTO MÓVEL COM HTML5

raiz para demonstração das funcionalidades, exemplos esses que podem ser descarregados (em www.fca.pt) pelo leitor para facilitar a aprendizagem.

Como não poderia deixar de acontecer, destaca-se a realidade das aplicações híbridas, explicando-se as vantagens e desvantagens das mesmas face às aplicações nativas, o contexto em que umas e outras devem ser utilizadas, e demonstrando-se por meio de exemplos claros e simples como podem ser desenvolvidas e testadas.

Quer o seu objetivo seja iniciar-se no desenvolvimento de aplicações móveis, quer seja desenvolver sites e conteúdos Web com design responsive (fixo e móvel), quer seja simplesmente conhecer de que forma o HTML5 dá resposta às necessidades do desenvolvimento mobile atual, este livro vai ser certamente útil. No final, o leitor conhecerá as várias tecnologias, terá executado vários exemplos e estará apto a produzir as suas próprias aplicações móveis.

Lisboa, março de 2015 Pedro Alexandre Coelho pac@pedrocoelho.com

© FCA – Editora de Informática

6

DISPOSITIVOS MÓVEIS E HTML5 1

O uso do HTML5 em dispositivos móveis é a forma natural e desejável de publicação de conteúdos Web nesses dispositivos. Neste capítulo vamos focar-nos nos aspetos mais relacionados com a utilização do HTML no mundo móvel, tendo em atenção as características específicas que os dispositivos e browsers em utilização neste meio têm.

6.1

ADAPTAÇÃO AOS DISPOSITIVOS E BROWSERS

A utilização do HTML5 em browsers distintos, em dispositivos móveis ou na Web enfrenta os problemas da não total compatibilidade de cada browser com o standard. Cada browser tem um grau de seguimento diferente da norma HTML5 e à data em que este livro foi escrito, nenhum browser dos correntemente utilizados no mercado seguia a norma a 100%. O leitor poderá fazer uma experiência de compatibilidade com alguns browsers a que tenha acesso, bastando para tal aceder ao endereço http://html5test.com (Figura 6.1) que mencionámos logo no Capítulo 1.

FIGURA 6.1 – Testes de compatibilidade HTML5 © FCA – Editora de Informática

144

DESENVOLVIMENTO MÓVEL COM HTML5

Não é muito agradável a perspetiva de que um site ou aplicação que se faça em HTML5, mesmo seguindo as regras e standards, pode funcionar bem nalguns browsers e mal noutros. Numa abordagem simplista existiriam duas alternativas: Fazer o site ou aplicação usando HTML5 standard e esquecer o facto de que nem todos os browsers visualizarão o conteúdo nas melhores condições; Só utilizar funcionalidades que funcionem nos browsers mais comuns.

Estes cenários não são descabidos, mas ambos apresentam grandes desvantagens. O primeiro significará que muitos potenciais consumidores da informação que o leitor pretende transmitir terão uma má experiência e não utilizarão, muito embora o problema seja transitório, na medida em que existe a tendência no médio prazo de um suporte cada vez mais completo do HTML5 em todos os browsers. Mas na Web e nas Web apps o que conta é o momento presente.

O segundo cenário significará que não se utilizarão algumas funcionalidades importantes do HTML5, e também implicará um enorme esforço de testes e adaptações em múltiplos browsers e plataformas.

Face a esta realidade, e porque os autores de sites e aplicações pretendem de facto o máximo de abrangência para os consumidores da sua informação, é fundamental que se sigam técnicas apropriadas para mitigar os problemas de compatibilidade com dispositivos e browsers, mas que não tenham estas desvantagens. A forma de fazer isto é decidir ao nível da interface se um elemento HTML5 vai ser ou não usado, em função de ser suportado ou não no browser que está a efetuar a consulta à página.

Há alguns anos, a forma como se implementava o acesso a sites por parte de dispositivos e browsers distintos consistia na deteção em tempo real de qual o browser, e posterior geração dinâmica do conteúdo, com base num template adequado, que na prática tem em conta as características de cada browser. Esta técnica revela-se hoje inadequada, não só porque há um número crescente de browsers e de dispositivos, o que obrigaria a um enorme esforço de manutenção de templates, mas também porque os mecanismos de deteção de browser são pouco eficazes num número significativo de situações.

A técnica aconselhada consiste na validação prévia de que uma determinada funcionalidade existe, e só depois utilizá-la, prescindindo do seu uso, ou empregando uma alternativa, caso não funcione.

Há várias formas de concretizar esta técnica: Verificar se um método retorna um valor válido; Validar uma propriedade de um elemento que criámos; Validar uma propriedade de um objeto; © FCA – Editora de Informática

DISPOSITIVOS MÓVEIS E HTML5

145

Verificar se um elemento fixa um valor.

Por exemplo, imaginemos que o leitor quer colocar um vídeo codificado em H.264 (um codec bastante comum) no seu site móvel e Web tradicional, e que o quer disponibilizar a todos os utilizadores que possam visualizá-lo no seu browser. Sabemos que o H.264 não é suportado em alguns browsers importantes, pelo que uma opção seria testar no início da página qual o browser que está a aceder, e mostrar o vídeo ou não em função desse teste. Isto implicaria listar exaustivamente todos os browsers que têm este suporte e manter essa lista atualizada, sendo que, se amanhã um determinado browser passasse a incluir suporte de vídeo H.264, os respetivos utilizadores só veriam o nosso vídeo quando alterássemos a lista de browsers com acesso. Acresce que a deteção, como se referiu, não é totalmente fiável, havendo uma percentagem de relevo de utilizadores em que haveria erro. A solução aconselhada é, pois, não testar qual o browser que está a aceder, mas simplesmente testar se suporta vídeo H.264!

Vejamos um exemplo muito simples em que testamos se o browser do utilizador suporta H.264 e WebM, os dois codecs de vídeo mais usados na Web hoje em dia.

EXEMPLO 6.1 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Exemplo Video</title> <script> function verificarVideo() { return !!document.createElement('video').canPlayType; } function verificah264() { if(!verificarVideo) { document.write("não"); return; } var v = document.createElement("video"); if(!v.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"')) { document.write("não"); } © FCA – Editora de Informática

146

DESENVOLVIMENTO MÓVEL COM HTML5 return;

} function verificawebm() { if(!verificarVideo) { document.write("não"); return; } var v = document.createElement("video"); if(!v.canPlayType('video/webm;codecs="vp8, vorbis"')) { document.write("não"); } return; } </script> </head> <body> <script> document.write("O seu browser "); verificah264(); document.write(" suporta H.264"); document.write("<br/>"); document.write("O seu browser "); verificawebm(); document.write(" suporta WebM"); </script> </body> </html>

Neste exemplo temos duas funções que verificam se cada um dos formatos de vídeo podem ou não ser executados no browser, e se não for o caso retornam a string “não”. Hoje em dia a maioria dos browsers suporta ambos os formatos, mas ainda conseguimos encontrar alguns browsers muito utilizados que não o fazem. No exemplo da execução, dois browsers muito usados hoje em dia, um browser móvel Android (Figura 6.2) e o Internet Explorer 11 em Windows 7 (Figura 6.3). © FCA – Editora de Informática

DISPOSITIVOS MÓVEIS E HTML5

147

FIGURA 6.2 – Teste às capacidades de vídeo do browser Android

FIGURA 6.3 – Teste às capacidades de vídeo do browser Internet Explorer

Com este tipo de teste, podemos fazer depender a visualização de um vídeo tendo por base a capacidade de interpretação do browser que está a consultar. Por exemplo, poderíamos alterar as nossas funções de verificação da capacidade de interpretação de vídeo para devolverem simplesmente verdadeiro ou falso: function verificah264() { if(!verificarVideo) { return false; } var v = document.createElement("video"); if(!v.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"')) { return false; } return true; }

Em sequência disso, podemos fazer depender a visualização de elementos de vídeo do resultado desta função: if ( verificah264()) { document.write(“<video>”; © FCA – Editora de Informática

148

DESENVOLVIMENTO MÓVEL COM HTML5

document.write(“<source src=’video.mp4’ type='video/mp4; codecs=’avc1.42E01E, mp4a.40.2’' />”); document.write(“</video>”); }

Um outro exemplo de testes de capacidades do browser é o suporte de elementos Canvas, um elemento HTML5 de grande importância. Este exemplo recorre a uma função similar à do exemplo anterior, mas, neste caso, para validar se o browser suporta ou não o elemento Canvas, procedendo-se à sua utilização somente se o browser o suportar. A técnica que seguimos neste caso é proceder à criação de um objeto Canvas, e validar se existe um contexto, que existirá sempre se o Canvas tiver sido criado.

EXEMPLO 6.2 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Exemplo Canvas</title> <script> function desenhar() { var canvas = document.getElementById('retangulo'); var context = canvas.getContext('2d'); context.fillStyle = "rgb(132, 96, 101)"; context.fillRect (2,2,248,98); } function suportecanvas() { if (document.createElement('canvas').getContext) return true else return false; } </script> </head>

© FCA – Editora de Informática

DISPOSITIVOS MÓVEIS E HTML5

149

<body> Teste Canvas<br/> <script> if (suportecanvas()) { document.write("O seu browser suporta Canvas"); document.write("<canvas id='retangulo' width='250' height='100'></canvas>"); desenhar(); } else { document.write("O seu browser não suporta Canvas"); } </script> </body> </html>

O acesso com um browser que suporte Canvas (elemento largamente suportado nos browsers hoje em dia) mostra a boa execução do código acima descrito (Figura 6.4):

FIGURA 6.4 – Teste Canvas em browser móvel

Já a execução do teste com um browser que não suporte Canvas leva à exibição do texto alternativo previsto no código. Neste caso recorremos ao antigo Internet Explorer 9 (Figura 6.5).

© FCA – Editora de Informática

150

DESENVOLVIMENTO MÓVEL COM HTML5

FIGURA 6.5 – Teste Canvas com IE9 (teste com emulador browserling.com)

Um outro exemplo que vamos referir prende-se com o suporte do elemento de formulário range. Tratando-se de um elemento que não existia em versões anteriores do HTML, pode ser boa ideia validar a capacidade do browser que está a aceder ao conteúdo de o interpretar corretamente. O exemplo seguinte efetua esse teste com recurso a uma função JavaScript que cria um objeto de tipo input, que atribui o tipo range, e que depois valida se este foi corretamente criado, devolvendo else se não for o caso (em versões anteriores o input assumirá o tipo text).

Depois testamos se o browser suporta o elemento correndo a função que criámos e, conforme a resposta, colocamos um elemento range ou text.

EXEMPLO 6.3 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Validação de entrada</title> <script> function suportaranges() { var k=document.createElement("input"); k.setAttribute("type", "range"); if (k.type == "text") { return false; } return true; } </script> </head> <body> Entrada de Formulário: © FCA – Editora de Informática

DISPOSITIVOS MÓVEIS E HTML5

151

<script> if (suportaranges()) { document.write("<input type='range'/>"); } else { document.write("<p/>O seu browser não suporta ranges, mudámos para campos de entrada texto<p/>"); document.write("<input type='text'/>"); } </script> </body> </html>

A visualização deste exemplo com um browser recente, fixo ou móvel, mostra naturalmente o nosso elemento range.

FIGURA 6.6 – Teste range com browser móvel

Caso utilizemos um browser antigo, o nosso script deteta que este não suporta range e gera o código alternativo (com um campo input text) (Figura 6.7).

FIGURA 6.7 – Teste range com browser antigo (browserling.com)

© FCA – Editora de Informática

152

DESENVOLVIMENTO MÓVEL COM HTML5

Estes exemplos e técnicas mostram como pode ser um site ou aplicação a adaptar o conteúdo servidor para que este possa ser visualizado por todos os utilizadores, independentemente do browser que estão a usar. Fazer ou não isto depende de muitos fatores, mas em geral pretendemos estender o mais possível o alcance dos nossos conteúdos e ninguém gosta que uma fatia significativa do público na Web tenha uma má experiência a aceder aos seus conteúdos.

Adaptações às limitações do browser Se há alguns anos era habitual os criadores de conteúdos orientarem os seus sites para um browser específico e simplesmente orientarem o utilizador para o usarem, isso hoje em dia não é fazível, na medida em que os utilizadores simplesmente vão a outro lado. O desafio, que se coloca ainda mais no móvel, está em usar todas as funcionalidades do HTML5, mas introduzir no seu código algumas condições de validação, como as que apresentámos, para que os utilizadores que não tenham acesso a essas funcionalidades possam pelo menos consultar o conteúdo.

6.2

DETEÇÃO DE BROWSERS

Vimos na Secção 6.1 que a deteção de browsers não é a melhor forma de adaptar conteúdo, tendo em conta o suporte ou não de funcionalidades HTML5. No entanto, existem funcionalidades de deteção de caraterísticas do browser que são importantíssimas para controlar o comportamento da nossa página, tais como: Largura e altura do ecrã disponível; Orientação do ecrã (tablets e smartphones; horizontal ou vertical); Cores disponíveis; Relação horizontal/vertical do ecrã; Resolução do ecrã.

O mecanismo de que vamos falar é uma funcionalidade CSS, chama-se CSS3 Media Query e consiste na possibilidade de interrogarmos o browser acerca das suas características, mas também de definir uma folha de estilos CSS personalizada que seja adequada.

Por exemplo, uma característica muito importante nos tablets e smartphones consiste na possibilidade de colocar o ecrã em modo horizontal ou vertical, apenas rodando o dispositivo. Vejamos um exemplo muito simples, somente com recurso a CSS e a uma Media Query, de como poderíamos formatar o texto em função da orientação do ecrã:

© FCA – Editora de Informática

11

GEOLOCALIZAÇÃO

1

Uma das funcionalidades que as aplicações Web móveis muito utilizam são as que dizem respeito à geolocalização. De facto, para um conteúdo móvel, tem muitas vezes um valor bastante grande poder adaptar o que é mostrado ao utilizador, em função do local onde este está. Mesmo na Web fixa, esta informação é relevante, porque se pode adaptar conteúdos em função da cidade ou do país. Neste capítulo, vamos focar o tema da geolocalização e ver em que medida o podemos utilizar nas nossas aplicações móveis.

11.1 INTRODUÇÃO A geolocalização permite aos programadores obter a localização física do utilizador através de uma API. Esta informação pode ser utilizada para coisas tão simples como mostrar num mapa onde o utilizador está, ou onde está um determinado local que se lhe pretende mostrar, ou ainda para adaptar conteúdos à realidade específica em que ele está. Por exemplo, pode-se utilizar a API de localização para identificar a pizaria mais próxima, ou para colocar o idioma de uma determinada página em função do país de onde o utilizador acede.

Obter a localização de um utilizador é uma ação que pode ser efetuada recorrendo a diversas fontes: A partir do endereço IP que o cliente utiliza; Via GPS integrado no telefone (tipicamente um smartphone); A partir da rede móvel (por triangulação em relação às antenas); A partir da rede wifi que está nas proximidades.

Estes métodos garantem que a funcionalidade de localização está disponível em bastantes tipos de dispositivos, incluindo browsers de Internet fixa, mas por outro lado apresentam níveis de precisão muito diferenciados. As localizações envolvendo GPS e triangulação móvel são bastante precisas, e possibilitam que se localize um utilizador ao nível da rua, muitas vezes com uma precisão de poucos metros. As localizações por IP são muito imprecisas, mas possibilitam que se localize um utilizador numa determinada cidade.

© FCA – Editora de Informática

270

DESENVOLVIMENTO MÓVEL COM HTML5

O programador pode, no momento em que utiliza a API, decidir se quer trabalhar com localização mais ou menos precisa, sendo que há situações em que uma localização menos precisa é inútil, e outras onde é perfeitamente aceitável. Alguns exemplos de situações em que a geolocalização é necessária: Chamar um táxi a partir de uma aplicação Web; Procurar a pizaria mais próxima do local onde estou e mostrá-la num mapa; Propor uma língua de funcionamento ao utilizador, em função do sítio de onde ele acede; Garantir que o utilizador está num determinado país, para lhe poder mostrar um conteúdo do qual só temos direitos de exibição limitados; Mostrar publicidade relativa à loja que está num raio de 500 metros; Mostrar informação meteorológica e de fuso horário do local onde estou.

Estes meros exemplos permitem mostrar que as necessidades de rigor geográfico de cada aplicação são diferentes, e como tal uma localização menos precisa pode ser suficiente para o fim em causa.

Embora consideradas úteis por muitos utilizadores, as funcionalidades de geolocalização levantam questões de privacidade e de segurança. Por regra, ninguém pode ser georreferenciado se a tal se opuser, e muitos países colocam isso na lei. Assim, foi incluído na API de geolocalização um passo de validação que permite ao utilizador opor-se a que a aplicação o localize. A API não devolverá resultados caso o utilizador se oponha à respetiva localização. Para além disso, o utilizador de smartphone pode, nas configurações do seu equipamento, desativar de todo as funcionalidades de geolocalização.

No entanto, algum grau de geolocalização é sempre possível quando o utilizador utiliza a Internet e um endereço IP público, e essa é inerente ao uso da Internet e só pode ser contornada com recurso a técnicas específicas de anonimização, ou usando proxies noutros países. Eticamente recomenda-se ao programador que respeite a vontade do utilizador caso ele não pretenda ser localizado, e que se for caso disso negue o acesso à aplicação caso a geolocalização seja necessária e não esteja disponível.

11.2 UTILIZANDO GEOLOCALIZAÇÃO A API de localização recorre a três métodos para obter uma geolocalização: getCurrentPosition() – devolve a posição atual;

© FCA – Editora de Informática

GEOLOCALIZAÇÃO

271

watchPosition() – vai devolvendo de forma continuada a posição em que o

utilizador está; clearWatch() – termina uma monitorização de uma posição.

Estes métodos devolvem um objeto position, que tem um conjunto de propriedades disponíveis: coords.latitude – latitude da posição; coords.longitude – longitude da posição; coords.accuracy – precisão da posição, em metros; coords.altitude – altitude em metros; coords.altitudeAccuracy – precisão da altitude em metros; coords.heading – variação da posição em graus em relação ao norte; coords.speed – velocidade do objeto posicionado; timestamp – data e hora da posição.

Vejamos um exemplo bastante simples que permite mostrar como funciona a API de localização: EXEMPLO 11.1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Demo Geolocalizacao</title> <script> function localiza() { navigator.geolocation.getCurrentPosition(callback); } function callback(position) { document.getElementById('latitude').innerHTML = position.coords.latitude; document.getElementById('longitude').innerHTML = position.coords.longitude; © FCA – Editora de Informática

272

DESENVOLVIMENTO MÓVEL COM HTML5

document.getElementById('accuracy').innerHTML = position.coords.accuracy; } </script> </head> <body> <h1>Geolocalizando</h1> <meta name="viewport" content="width=620" /> <input type="button" value="Mostra localização" onclick="javascript:localiza()" /><br/> Latitude: <span id="latitude"></span> graus<br/> Longitude: <span id="longitude"></span> graus<br/> Precisao: <span id="accuracy"></span>metros </body> </html>

Neste exemplo utiliza-se uma função JavaScript que é chamada quando o evento de pressionar o botão é desencadeado e que envia para o ecrã a latitude, a longitude e a precisão (Figura 11.1).

FIGURA 11.1 – Exemplo de geolocalização

Para que uma localização seja efetuada, é necessário que o equipamento esteja configurado para permitir a partida, nas configurações de segurança e de localização.

Para além da permissão de se usar a informação de localização, o utilizador pode escolher quais os meios que deseja poder utilizar, e que vão influenciar a precisão que se obtém no final (Figura 11.2).

© FCA – Editora de Informática

GEOLOCALIZAÇÃO

273

FIGURA 11.2 – Configurações de localização

No entanto, mesmo que a configuração permita o acesso à localização, quando um script como o nosso tenta aceder à API de localização, é colocada mesmo assim uma questão ao utilizador para autorizar (ou não) essa operação (Figura 11.3).

FIGURA 11.3 – Solicitação de acesso à localização © FCA – Editora de Informática