demo tecnica

Click here to load reader

Post on 17-Mar-2016

220 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

projeto ntc deca ua 2012

TRANSCRIPT

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Sharing.OurTravels | Demo tcnica

    Foi com um enorme n na garganta que arrancamos para o desenvolvimento desta demo tcnica 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 incio do projeto e fundamentado na Viabilidade tcnica (http://sharingourtravels.blogs.ua.sapo.pt/2346.html), optmos por utilizar HTML5, CSS3 e a terceira verso da API Google Maps.

    Esta opo, apesar de arriscada, comea a revelar-se uma escolha acertada porque, para alm 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, comeamos logo por notar na simplicidade na declarao do doctype (). 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 mveis.

    Esta compatibilidade ser demonstrada ao longo da apresentao desta demo.

    Os desafios que nos propuseram, e que propusemos a ns prprios para esta demo, foram alcanados e mesmo ultrapassados, tendo sido possvel demonstrar funcionalidade que no prevamos 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 so o download do percurso, upload do percurso, criao de traados, insero de POI. Para alm destes est disponvel a informao de altitude, ocultar POI mover POI e insero automtica de grfico de altimetria.

    Relativamente s opes assumidas enquanto na entrega da viabilidade tcnica, note-se:

    Foi efetuado o registo do domnio 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 programao JavaScript.

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

    verso. Note-se que esta verso significativamente mais leve que a anterior, o que torna as respostas mais rpidas. Esta diferena faz-se sentir principalmente nas plataformas mveis

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Neste trabalho no houve da nossa parte um cuidado especial para com o design grfico, mas sim uma particular ateno na implementao de um ponto de vista mais tcnico, 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 visualizao Hibrido.

    No mapa, esto ativas todas as opes da Google Maps como o zoom, mover mapa e alterao do tipo de mapa. Foi desativado, apenas por opo, a visualizao da previsualizao do mapa.

    adicionado automaticamente um marker no local onde nos encontramos.

    Esta localizao calculada atravs da google.maps.Geocoder que tendo por base o registo do endereo IP do equipamento que se encontra a aceder plataforma, devolve coordenadas e inicia uma solicitao para o servio de geocodificao.

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Para alm disso, atravs do mesmo servio, essas coordenadas so convertidas numa morada postal e mostrada ao utilizador.

    Est previsto que a nossa aplicao apenas aceite para upload ficheiros GPX (apesar de no ter sido considerado como requisito funcional, ser disponibilizado ao utilizador uma ferramenta de converso de outros formatos de ficheiros georreferenciados para GPX e o inverso). Permitindo assim alargar o nmero de dispositivos GPSs que podero trabalhar com a plataforma

    Para salvaguardar a possibilidade da inexistncia de ficheiros GPX, e para efeitos de teste da plataforma, disponibilizamos trs traados para download.

    Para o download desses traados, encontra-se disponvel uma DIV sobreposta sobre a DIV que mostra o mapa, onde podemos encontrar a opo de escolha de ficheiro.

    Note-se que at a escolha do ficheiro ser efetuada no se encontra disponvel o boto UPLOAD.

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Aps a escolha do ficheiro mostrado ao utilizador o nome, o tamanho e o formato do mesmo. Fica igualmente ativo o boto para submisso (upload) de percurso.

    De referir que foi implementada uma funo que verifica a extenso do ficheiro e se o mesmo no for GPX retorna uma caixa de erro.

    Aps a submisso de um percurso, o ficheiro enviado diretamente para o servidor para uma pasta previamente definida.

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

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Esses pontos, atravs de um construtor designado de Polyline, so unidos atravs de uma linha que reproduz um traado no mapa.

    So criados dois indicadores automticos e personalizados, um no ponto de partida e outro no final do percurso.

    Esses pontos so adicionados atravs do google.maps.Marker, e as suas coordenadas so retiradas ao primeiro e ultimo valor do array anteriormente criado com os registos do traado.

    Atravs do mesmo servio foi adicionada uma funo, que chamada ao clique no mapa, para adio de pontos de interesse.

    Esses pontos adicionados so indicados por um cone personalizado, que possui uma animao na entrada e passvel de ser movido mantendo o rato pressionado e movendo para o local que considerar mais indicado.

    As coordenadas destes pontos adicionados so guardadas num array que nos permitir editar e remover os mesmos.

    igualmente indicado o nmero de pontos de interesse adicionados.

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Ao adicionar um ponto de interesse, torna-se visvel uma DIV com a opo de ocultar e mostrar todos os pontos de interesse adicionados. possvel eliminar o ponto de interesse adicionado atravs de duplo clique sobre o mesmo.

    Tendo por base as coordenadas do traado, 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 possvel mostrar a altitude do ponto de partida, do ponto de chegada a altitude mxima e mnima.

    Note-se que esta informao obtida independentemente do ficheiro original de GPX ter registo de altitudes ou no.

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Aproveitando o array com o registo de altitude e recorrendo a um novo servio disponibilizado pela API3 do Google Maps, o google.visualization.ColumnChart, desenhado automaticamente um grfico de altimetria para melhor compreenso do tipo de percurso. Neste grfico possvel saber a altitude exata de cada ponto clicando no grfico sobre o local pretendido.

    Achamos importante mencionar que o servio da Google limita, na sua verso gratuita, a 256 a leitura do nmero de pontos no mesmo pedido, situao que devemos aprofundar para encontrar a soluo mais fivel para no serem retirados demasiados pontos e que possam deturpar o grfico apresentado. Nesta demo est ativa uma amostragem desses pontos de forma a mostrar apenas 100.

    Como j foi mencionado, desde a viabilidade tcnica que o objetivo na escolha do HTML5, CSS3 e a API v3, era o de proporcionar o mximo de compatibilidade entre browsers, sistemas operativos e plataformas. Acreditamos que esse objetivo est a ser conseguido, apesar do nosso ainda pouco domnio sobre esta rea da programao.

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Esta demo foi testada em Chrome, Safari, Firefox, Opera, Rockmelt e at no Internet Explorer do Antnio (aos poucos vai-se convertendo a outros browserseheh) e funciona.

    Para alm disso, esta demo foi testada com sucesso em plataformas mveis, 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

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Compatibilidades em Browsers

    Google Chrome

    Safari

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Firefox

    Opera

  • Sharing.OurTravels

    Universidade de Aveiro | DeCA | NTC | Projeto Antnio Matos | Carolina Frazo | Marcolino Melo

    Orientador: Hlder Caixinha

    Internet Explorer

    Ro