Demo Tecnica

Sharing.OurTravels

Universidade de Aveiro | DeCA | NTC | Projeto António Matos | Carolina Frazão | Marcolino Melo

Orientador: Hélder Caixinha

Sharing.OurTravels



Sharing.OurTravels | Demo técnica

Foi com um enorme “nó na garganta” que arrancamos para o desenvolvimento desta demo técnica por, àquela data, nenhum membro do nosso grupo de projeto ter qualquer conhecimento sobre a API do Google Maps.

Conforme assumido pelo grupo desde o início do projeto e fundamentado na Viabilidade técnica (http://sharingourtravels.blogs.ua.sapo.pt/2346.html), optámos por utilizar HTML5, CSS3 e a terceira versão da API Google Maps.

Esta opção, apesar de arriscada, começa a revelar-se uma escolha acertada porque, para além de disponibilizar novas oportunidades.

No CSS3, nesta demo utilizamos para teste as novas propriedades de arredondamento (border-radius) e de sombra no texto (text-shadow).

No HTML5, começamos logo por notar na simplicidade na declaração do doctype (<!DOCTYPE Html>). Depois usamos nesta demo alguns dos novos elementos como por exemplo o header e footer. Destacamos a vasta compatibilidade entre browsers e principalmente com as plataformas móveis.

Esta compatibilidade será demonstrada ao longo da apresentação desta demo.

Os desafios que nos propuseram, e que propusemos a nós próprios para esta demo, foram alcançados e mesmo ultrapassados, tendo sido possível demonstrar funcionalidade que não prevíamos à partida para esta demo, nem mesmo para o projeto final, como é o caso da altimetria.

Dos requisitos funcionais que se encontram indicados na segunda entrega, os que podemos encontram nesta demo são o download do percurso, upload do percurso, criação de traçados, inserção de POI. Para além destes está disponível a informação de altitude, ocultar POI mover POI e inserção automática de gráfico de altimetria.

Relativamente às opções assumidas enquanto na entrega da viabilidade técnica, note-se:

• Foi efetuado o registo do domínio www.sharingourtravels.com e adquirido um alojamento e servidor partilhado à weblx.com.

• Utilizamos a linguagem Server-Side PHP para upload de ficheiros para o servidor.

• Como já mencionado na linguagem Cliente-Side está a ser utlizado HTML5 e CSS3 e para o desenvolvimento da programação JavaScript.

• Como ferramenta web está a ser utilizado o Dreamweaver CS5.5 da Adobe. • A Application Programmable Interface (API) Google Maps, na sua terceira

versão. Note-se que esta versão é significativamente mais leve que a anterior, o que torna as respostas mais rápidas. Esta diferença faz-se sentir principalmente nas plataformas móveis

Sharing.OurTravels



Neste trabalho não houve da nossa parte um cuidado especial para com o design gráfico, mas sim uma particular atenção na implementação de um ponto de vista mais técnico, de todas as funcionalidades assumidas.

Assim, logo na home page é-nos apresentado um mapa – cujo suporte é a API3 do Google Maps – numa DIV previamente definida e em modo de visualização Hibrido.

No mapa, estão ativas todas as opções da Google Maps como o zoom, mover mapa e alteração do tipo de mapa. Foi desativado, apenas por opção, a visualização da previsualização do mapa.

É adicionado automaticamente um marker no local onde nos encontramos.

Esta localização é calculada através da google.maps.Geocoder que tendo por base o registo do endereço IP do equipamento que se encontra a aceder à plataforma, devolve coordenadas e inicia uma solicitação para o serviço de geocodificação.

Sharing.OurTravels



Para além disso, através do mesmo serviço, essas coordenadas são convertidas numa morada postal e mostrada ao utilizador.

Está previsto que a nossa aplicação apenas aceite para upload ficheiros GPX (apesar de não ter sido considerado como requisito funcional, será disponibilizado ao utilizador uma ferramenta de conversão de outros formatos de ficheiros georreferenciados para GPX e o inverso). Permitindo assim alargar o número de dispositivos GPSs que poderão trabalhar com a plataforma

Para salvaguardar a possibilidade da inexistência de ficheiros GPX, e para efeitos de teste da plataforma, disponibilizamos três traçados para download.

Para o download desses traçados, encontra-se disponível uma DIV sobreposta sobre a DIV que mostra o mapa, onde podemos encontrar a opção de escolha de ficheiro.

Note-se que até a escolha do ficheiro ser efetuada não se encontra disponível o botão UPLOAD.

Sharing.OurTravels



Após a escolha do ficheiro é mostrado ao utilizador o nome, o tamanho e o formato do mesmo. Fica igualmente ativo o botão para submissão (upload) de percurso.

De referir que foi implementada uma função que verifica a extensão do ficheiro e se o mesmo não for GPX retorna uma caixa de erro.

Após a submissão de um percurso, o ficheiro é enviado diretamente para o servidor para uma pasta previamente definida.

As tags das coordenadas desse ficheiro são lidas, carregadas num array e adicionados pontos referentes às mesmas no Google Maps.

Sharing.OurTravels



Esses pontos, através de um construtor designado de Polyline, são unidos através de uma linha que reproduz um traçado no mapa.

São criados dois indicadores automáticos e personalizados, um no ponto de partida e outro no final do percurso.

Esses pontos são adicionados através do google.maps.Marker, e as suas coordenadas são retiradas ao primeiro e ultimo valor do array anteriormente criado com os registos do traçado.

Através do mesmo serviço foi adicionada uma função, que é chamada ao clique no mapa, para adição de pontos de interesse.

Esses pontos adicionados são indicados por um ícone personalizado, que possui uma animação na entrada e é passível de ser movido mantendo o rato pressionado e movendo para o local que considerar mais indicado.

As coordenadas destes pontos adicionados são guardadas num array que nos permitirá editar e remover os mesmos.

É igualmente indicado o número de pontos de interesse adicionados.

Sharing.OurTravels



Ao adicionar um ponto de interesse, torna-se visível uma DIV com a opção de ocultar e mostrar todos os pontos de interesse adicionados. É possível eliminar o ponto de interesse adicionado através de duplo clique sobre o mesmo.

Tendo por base as coordenadas do traçado, e recorrendo ao google.maps.ElevationService, calcula-se a altitude de cada local referende à coordenada e é criado um array com as altitudes respetivas, assim sendo é possível mostrar a altitude do ponto de partida, do ponto de chegada a altitude máxima e mínima.

Note-se que esta informação é obtida independentemente do ficheiro original de GPX ter registo de altitudes ou não.

Sharing.OurTravels



Aproveitando o array com o registo de altitude e recorrendo a um novo serviço disponibilizado pela API3 do Google Maps, o google.visualization.ColumnChart, é desenhado automaticamente um gráfico de altimetria para melhor compreensão do tipo de percurso. Neste gráfico é possível saber a altitude exata de cada ponto clicando no gráfico sobre o local pretendido.

Achamos importante mencionar que o serviço da Google limita, na sua versão gratuita, a 256 a leitura do número de pontos no mesmo pedido, situação que devemos aprofundar para encontrar a solução mais fiável para não serem retirados demasiados pontos e que possam deturpar o gráfico apresentado. Nesta demo está ativa uma amostragem desses pontos de forma a mostrar apenas 100.

Como já foi mencionado, desde a viabilidade técnica que o objetivo na escolha do HTML5, CSS3 e a API v3, era o de proporcionar o máximo de compatibilidade entre browsers, sistemas operativos e plataformas. Acreditamos que esse objetivo está a ser conseguido, apesar do nosso ainda pouco domínio sobre esta área da programação.

Sharing.OurTravels



Esta demo foi testada em Chrome, Safari, Firefox, Opera, Rockmelt e até no Internet Explorer do António (aos poucos vai-se convertendo a outros browsers…eheh) e funciona.

Para além disso, esta demo foi testada com sucesso em plataformas móveis, como sejam Android (testado num Samsung Galaxy 10.1), IOS 5 da Apple (testado num iPad2) e RIM da BlackBerry (testado num BlackBerry 9000).

Sharing.OurTravels



Compatibilidades em Browsers

Google Chrome

Safari

Sharing.OurTravels



Firefox

Opera

Sharing.OurTravels



Internet Explorer

Rockmelt

Sharing.OurTravels



Plataforma Móvel Android

Plataforma Móvel IOS5

Sharing.OurTravels



Plataforma Móvel RIM

Documents

Demo Tecnica