User:Trailit

From Laboratório MM 5

Revision as of 18:56, 19 January 2012

1.Introdução

Este trabalho surgiu no âmbito da unidade curricular Laboratório multimédia 5, e tem como principal objectivo criar um website dinâmico, utilizando as linguagens aprendidas até então, tais como, linguagens server-side PHP e MYSQL e client-side HTML, CSS e JAVASCRIPT. Foi criada uma empresa fictícia com vista a ser rentabilizada através do website, a esta foi dado o nome Trailit. Consiste numa rede social de partilha de viagens, mais precisamente percursos/trajectos feitos pelos utilizadores e respectivas experiências.

2.Objectivo do documento

Este documento tem como objectivo principal, explicar todo o processo de concepção e desenvolvimento de um website server-side, dinâmico e funcional, esclarecendo a implementação técnica de todas as componentes leccionadas em Laboratório Multimédia 5. Inicialmente, definiu-se o grafismo final e desenvolveu-se o layout das páginas Web com recurso a HTML e CSS. Visto se tratar de um website dinâmico e baseado na tecnologia web2.0 é essencial a integração da arquitectura das 3 camadas, camada de armazenamento de dados, utilizando MYSQL, camada lógica, utilizando PHP e camada de apresentação, utilizando HTML e CSS. O processo de criação e conexão à Base de Dados associada á gestão dos conteúdos do site é também bastante importante de referir, pois sem esta o conceito web2.0 não seria possível. E finalmente, a interacção do utilizador em conteúdos específicos, nomeadamente mapas. Esta é feita com recurso ao Google Maps Api, constituindo-se uma das partes mais importantes do site, uma vez que todo este se centra na partilha de trajectos feita através de mapas. Com vista a melhorar a apresentação de diversos conteúdos foi também utilizado JQUERY.

3.Visão geral do projecto

Trailit é uma rede social orientada para partilha de trajectos, permite aos utilizadores partilhar as suas experiências em viagens. A ideia surgiu quando um dos elementos do grupo teve a intenção de fazer uma viagem para um determinado local, que não era muito conhecido. Este deparou-se com o problema de não existir estação ferroviária no mesmo, e não conhecendo os arredores, foi difícil deslocar-se até lá. Assim, através desta rede social, muitos dos problemas deste tipo serão resolvidos, visto que os utilizadores terão a possibilidade de consultar as experiências de outros utilizadores, e ter acesso a detalhes bastantes relevantes como o custo, duração e meios de transportes utilizados na viagem, assim com, a possibilidade de pedir informações sobre locais específicos. Com vista a tornar possível estes objectivos, foram implementadas as seguintes funcionalidades: • Publicação de trajecto (assinalar pontos de interesse no mapa); • Registo de utilizadores; • Upload de imagens; • Edição de dados/perfil; • Inserção de comentários aos trajectos; • Envio de mensagens privadas aos utilizadores; • Acesso aos mapas de percursos; • Procura de trajectos; • Avaliação dos trajectos; • Envio de email à administração do site;

3.1. Estudos de design gráfico

Para definir o design gráfico da aplicação web, começou-se por escolher a paleta de cores mais indicada para o tema do site, e respectivo público-alvo, apresentada na imagem seguinte. Sendo assim, usou-se o cinzento claro para preencher a maior parte do site, ou seja, o background; o preto foi o eleito para o header e footer, criando maior destaque dos mesmos; o verde encontra-se presente nos botões/links do menu principal; o cor-de-rosa nos sub-menus e botões que mereçam maior realce; o cinzento mais escuro tornou-se a cor predominante das letras de todo o site. Foi também escolhida uma textura que está presente no header e no footer, transmitindo mais dinamismo ao layout. Através desta selecção de cores e do contraste, pretende-se que o utilizador consiga facilmente navegar no site identificando tudo o que procura rapidamente.

3.2. Logótipo do projecto:

Para a criação do logótipo tentou-se representar o tema do projecto. Este passou por várias fases, desde a representação de markers, placas de direcção, lupas e até mesmo pegadas, tentando-se sempre ilustrar o nome e objectivo do projecto. Após várias experiências, optou-se pelo uso de uma fonte diferente com duas cores, criando um contraste entre as palavras “Trail” e “it”. Este logótipo dá para ser usado tanto em fundos escuros com claros, tornando-se bastante simples e funcional.

4. Base de dados desenvolvida

Narrativa:

Pretende-se implementar uma base de dados, cujo objectivo principal está relacionado com o armazenamento de informação proveniente da criação de uma rede social orientada para partilha de percursos e experiências entre utilizadores. Esta ideia visa ajudar as pessoas a encontrar a melhor forma de chegar a determinado local, tendo assim possibilidade de procurar trajectos e pedir informações tudo numa só plataforma. Após visualizar a plataforma o utilizador poderá regista-se, sendo guardados dados como: nome, email fotografia, username, password entre outros dados opcionais, como localidade e contacto telefónico, de forma a poder visualizar mais informações sobre experiências de outros utilizadores.

Sendo uma plataforma centrada nos trajectos realizados pelos utilizadores, pretende-se armazenar todos os pontos que os compõem com respectivas localizações (coordenadas, nome, localidade, fotografia, descrição, ordem do ponto, e tipo de transporte utilizado). Pretende-se também que cada trajecto para além dos pontos contenha uma descrição associada à experiência da viagem, custo total e duração da mesma.

A cada utilizador é permitido atribuir uma classificação aos trajectos, assim como comentá-los. Visto que se trata de uma rede social, em torno de trajectos, a possibilidade dos utilizadores seguirem outros utilizadores deve ser tomada em conta. Uma vez que a plataforma deve permitir aos utilizadores receberem notificações quando os utilizadores seguidos adicionam novos trajectos. É também permitido aos utilizadores enviarem mensagens privadas a outros utilizadores assim como receber. Relativamente ao trajecto este deve estar associado a uma categoria (montanha, praia, rural ou urbano), e esta deverá estar relacionada com as preferências do utilizador, permitindo que lhe sejam mostrados trajectos de acordo com as suas preferências.

5. Implementação

5.1. Descrição das principais funcionalidades da aplicação Web

Ao entrar no website, o utilizador tem apenas acesso à página index, onde pode ter uma pequena noção das funcionalidades do site. No entanto, nesta página, para além de consultar de forma simplificada (sem acesso a detalhes) os últimos trajectos inseridos na plataforma, apenas pode fazer login ou registar-se.

Após fazer o registo, o utilizador tem uma conta pessoal (que pode ser Free ou Premium) na rede-social, recebe uma mensagem a informar que efectuou o registo e, a partir desse momento, tem permissões para visualizar vários tipos de informação. Ao entrar na página index com login efectuado, o utilizador pode pesquisar trajectos e consultar todos os detalhes de cada trajecto assim como do utilizador que o inseriu.

No caso de utilizador premium, para além das permissões comuns ao Free, tem também uma página de perfil, onde pode editar os seus dados, assim como acrescentar dados extra. Para além destas permissões o que realmente o distingue é que pode inserir novos trajectos, comentar e classificar trajectos de outros utilizadores e seguir e enviar mensagens privadas.

Na lógica da Web 2.0, o utilizador tem permissões para criar e/ou alterar todos os conteúdos do site, isto é, são os utilizadores que inserem trajectos. Desta forma, permite-se que os conteúdos da rede-social cresçam de forma exponencial e que seja cada vez mais fácil encontrar o percurso ideal para o maior número de locais.

5.2. Mapa de páginas

5.3. Queries utilizados

5.4. Parâmetros passados entre páginas

5.5. Integração (e.g. Flash, AJAX Frameworks, etc)

     Slideshow de instruções presente na página inicial, criado com recurso a jquery;
     Google maps api (geocode)

6. Desenvolvimentos Futuros

Importa referir que o projecto não incorpora todas as funcionalidades inicialmente propostas, apesar de se ter tentado implementar o máximo de funcionalidades possíveis, muitas não foram realizadas por falta de tempo. Para desenvolvimentos futuros pretende-se implementar uma forma de interacção do utilizador com o mapa, que permita de uma forma mais apelativa arrastar as markers no mapa e introduzir algumas informações relevantes do percurso, mas devido a falta de conhecimentos aprofundados sobre a programação de Google Maps Api’s e de tempo, não foram realizadas todos os objectivos deste ponto. Pretende-se criar também uma galeria de fotografias, com todas as fotografias inseridas nos pontos de cada trajecto, despertando o interesse aos outros utilizadores sobre diversos sítios e consequentemente criar novos trajectos, aumentando a rede social. Aquando a inserção de um novo trajecto, deve ser possível sugerir pontos de acordo com a localidade escolhida, os já existentes na BD, optimizando assim as tabelas da BD. Pretende também adaptar a plataforma para dispositivos móveis, permitindo assim aos utilizadores criarem percursos em tempo real.

7. Conclusões

A realização deste projecto representou um desafio motivador, permitindo incorporar diferentes conhecimentos adquiridos na cadeira de Laboratório Multimédia 5, bem como conteúdos leccionados em outras disciplinas, sendo um projecto que engloba diferentes componentes da formação. Para que o projecto se tornasse mais original e interessante, foi também necessário pesquisar outras linguagens e adquirir conhecimentos específicos, nomeadamente, georreferenciação. Mostrou-se bastante desafiante, a criação de soluções para problemas que iam surgindo, devido, à ambição inicial, e à falta de conhecimento da viabilidade das funcionalidades a implementar. Mesmo não conseguindo implementar todos os objectivos iniciais, o resultado final exigiu grande esforço, e foi conseguido com muita pesquisa, paciência e ajuda dos docentes de Laboratório Multimédia 5. A falta de tempo derivada de muita pesquisa foi uma das grandes dificuldades, roubando grande parte do tempo para elaboração do projecto.

8. Referências bibliográficas

Links php jcrop

Links Google maps api /apis/maps [[1]] code.google jsfiddle getting-lat-lng-from-google-marker google-maps-get-the-coordinates-of-a-dragged-marker coordinates

Draggable_Markers

signup phpsqlajax migracaoGoogle developer.com/java/web buscando-a-latitude-e-longitude-de-um-endereco-google-maps exibindo-mapas-no-seu-site-google-maps apis/maps/documentation/javascript/basics geonames json-googlemaps itouchmap codigopostal phpsqlajax googlecode

Links jquery jqUploader pixeline jquery/?editable

jquery-plugin-tooltip dynamic-javascript lightbox jquery/lightbox rating Jcrop jquery_rating