User:Mybookmark

From Laboratório MM 5

(Difference between revisions)

Jump to: navigation, search

Revision as of 03:05, 20 January 2012

INTRODUÇÃO

Lao Tzu disse uma vez: "A journey of a thousand miles must begin with a single step.", e este projeto não quer ser nada mais que isso; o primeiro passo para a concretização daquela viagem de sonho ou o planeamento das férias que sempre quis fazer.

OBJETIVOS DO DOCUMENTO

Este documento visa a apresentação e descrição, ao leitor, das várias fases de desenvolvimento deste projeto, bem como todas as ferramentas, técnicas e metodologias utilizadas.

Pretende-se, com este escrito, deixar documentados - de forma simples e concreta - os principais desafios encontrados, soluções viáveis e decisões tomadas.

Uma vez que o grupo considerou a possibilidade de o projeto vir a ser, posteriormente, desenvolvido é bastante relevante apresentar documentação detalhada da implementação e evolução da aplicação em causa, assegurando ao leitor a compreensão e estrutura de toda a aplicação - desde o design e base de dados ao código e respetivas frameworks.

VISÃO GERAL DO DOCUMENTO

Com este projeto pretende-se disponibilizar aos utilizadores uma aplicação intuitiva e fiável que proporcione a qualquer tipo de utilizador - seja ele avançado ou principiante - todas as ferramentas necessárias para planear com sucesso uma viagem sem percalços, uma estadia perfeita e uma visita bem estruturada a todos os pontos de interesse; de modo a que o utilizador consiga fazer a melhor gestão possível do seu tempo, guardando sempre algum para explorar livremente o espaço em que se encontra.

De forma a proporcionar aos utilizadores as melhores experiências, a um custo acessível, a aplicação também está disponível a empresas (colaboradores) que disponibilizam promoções especiais ajustadas ao projeto de cada utilizador.

O projeto visa “desenvolver um projecto que seja reconhecido pela excelência do seu desempenho, com o propósito de melhorar a qualidade de vida e satisfação de todos os amantes das viagens, que para a sua realização precisam de ajuda”.

Numa época em que o sedentarismo é uma preocupação eminente, e a crise por que se está a passar está presente em todas as capas de jornais, focadas nos demais artigos e objeto de todo o tipo de entrevistas e documentários, esta aplicação pretende surgir como catalisador, de modo a alimentar o sonho dos utilizadores e incentivá-los a não abdicar das suas férias. Com o boom das redes sociais e a interação constante entre os vários milhões de utilizadores que usam regularmente este tipo de serviços, a aplicação vai tirar partido desta mesma interação para fazer com que os utilizadores se vão inter-apoiando, de forma a todos eles conseguirem levar a cabo os seus projetos.

DESIGN

PALETA DE CORES

Para o desenvolvimento do grafismo desta aplicação foram escolhidas duas cores, cada uma delas podendo apresentar mais que uma variação.

Para cor principal foi escolhido o cinzento - este está presente na maior parte da aplicação.

Como cor secundária adotou-se o vermelho - este poderá ser encontrado no logotipo, bem como em pequenos detalhes na aplicação.

CINZENTO

FIG 1. PALETA DE VARIAÇÕES DE CINZENTO

VERMELHO

FIG 2. PALETA DE VARIAÇÕES DE VERMELHO

LOGOTIPO

Para a aplicação, apelidada de bookmark, pretendia-se criar um logotipo facilmente legível e de linhas simples, pois a principal plataforma onde será visualizado é o ecrã. Como tal, foram tidas em consideração as oscilações a que este poderia estar sujeito de ecrã para ecrã.

No entanto, foram também tomados outros cuidados, como ser legível em pequeno ou grande formato, a cor ou a preto e branco. Apesar de se ter optado por uma variação light da fonte dekar, verificou-se que não colocava em causa a legibilidade devido a esta ser uma fonte relativamente larga, ainda assim otimizou-se o espaçamento entre as letras para uma melhor leitura do logotipo.

LOGOTIPO

FIG 3. LOGOTIPO DA APLICAÇÃO

LAYOUT

Para a conceção da interface foram estudadas as práticas dos sítios web mais visitados que de certa forma poderiam ser semelhantes a esta aplicação . Uma vez que o grupo está limitado ao tempo e meios que dispõe, optou-se por analisar e perceber o porquê das escolhas feitas em aplicações como o Facebook, Google+, entre outras. Uma das ferramentas também utilizada para a fase inicial da construção do layout foi o w3school, onde se podem encontrar estatísticas sobre os browsers e as resoluções recomendadas.

Assim ficou decidido que a área principal da aplicação não poderia exceder, em largura, os 720px.

LAYOUT

FIG 3. LAYOUT DA APLICAÇÃO

USABILIDADE

As plataformas multimedia procuram adaptar-se aos diferentes tipos de utilizadores, de forma a que estes atinjam os seus objectivos com eficácia, eficiência e satisfação num contexto específico de uso. Neste sentido, procura-se que a aplicação seja de uso fácil, contribuindo para a motivação e interesse de quem a explora.

É importante que o utilizador, que não possui conhecimento relativamente a esta rede social, aquando do seu primeiro contacto, se sinta familiarizado e deve realizar, com rapidez e facilidade, aquilo que procura. Para tal, é importante avaliar, essencialmente, a criação de nova conta, a realização do login, personalização do perfil, inserção de dados necessários no perfil das poupanças e os acessos aos conteúdos da área social.

Esta rede social alinhou os seus princípios baseando-se na antecipação da necessidade de cada usuário: confere autonomia ao utilizador, permitindo que detenha o controlo sobre a aplicação; preocupação na escolha das cores, tendo em conta, todo o tipo de utilizadores possíveis; permite reversibilidade, ou seja, sempre que o utilizador insere algum tipo de informação num campo, tem a possibilidade de voltar a editá-lo mais tarde; o tempo que o utilizador dispõe para alcançar um objectivo é o mínimo possível, facilitando, assim, a interacção.

BASE DE DADOS

A base de dados do projecto bookmark armazena os dados de vinte e uma tabelas, relacionadas entre si. Primeiramente, determinou-se as entidades primordiais, constituídas por toda a informação necessária ao desenvolvimento do projecto. Após a definição das funcionalidades inerentes a esta rede social, surgiram as tabelas que a seguir se descrevem:

FIG 5. BASE DE DADOS - TABELAS

FIG 6. BASE DE DADOS

DADOS_COMUM:

Regista os dados comuns de dois tipos de utilizadores (empresa e utilizador comum), nomeadamente nome, username (conjuga o nome e o sobrenome inserido pelo usuário), email de registo, palavra passe, país, local, fotografia, data de login e data de registo. Possui, ainda, um campo ‘active’ que permite ativar ou desativar a conta.

UTILIZADOR_COMUM:

Regista os dados inseridos pelo utilizador – data de nascimento, sobrenome, tipo de sexo e interesses.

EMPRESA:

Regista a respectiva morada, ano de fundação, descrição e website.

EMPRESA_SUBS:

Regista as subscrições efectuadas a uma empresa, sendo constituída pelo campo de quem subscreve e outro campo que inscreve a empresa subscrita. O utilizador tem a possibilidade de cancelar a subscrição através do campo ‘active’.

PROMOCOES:

Regista as promoções lançadas pelas empresas, onde serão inseridos os dados relativamente a dois tipos de descrição: primária e secundária, imagem da campanha, local de destino, custo e respectiva data de inicio e fim da promoção.

CONTACTOS:

Regista os dados dos diferentes utilizadores. Encontra-se numa tabela diferenciada para que o utilizador possa escolher se esta informação é ou não visível no seu perfil: telemóvel, telefone e email. Possibilita, também, que o utilizador modifique o seu email sem que esta alteração interfira no email que utilizou no registo de conta.

CATEGORIA:

Esta tabela diferencia os diversos tipos de utilizador possíveis nesta rede social: o utilizador comum ou a empresa.

TIPO_SEXO:

Regista o tipo de sexo do utilizador comum: masculino ou feminino.

COMENTARIO:

Regista os comentários que são realizados ao projecto de cada utilizador comum. É, então, constituída por um campo que memoriza a descrição do comentário, a sua data, o autor do comentário e qual o seu destinatário.

MENSAGEM:

Regista as mensagens privadas que são enviadas ao perfil de cada utilizador comum. Possui um campo que memoriza destinatário e autor de cada mensagem, assim como a data em que esta foi enviada, o estado (lido ou não lido) e permite, ainda, mostrar as mensagens anteriores (histórico).

NOTIFICACAO:

Regista as notificações provenientes da actividade entre um perfil - aquele que vê - e outro perfil - aquele que está a ser visto, ou seja, regista o emissor e o receptor, a descrição, data e o estado - lido ou não lido.

PROJECTO:

Regista o projecto que cada utilizador comum realiza, sendo este o autor. Nesta tabela é inserido o custo estimado do respectivo plano e possui um campo (‘active’) que permite o cancelamento ou a activação deste.

PROJECTO_SUBS:

Regista as subscrições efectuadas a um projecto, sendo constituída pelo campo de quem subscreve e outro campo que inscreve o projecto subscrito. O utilizador tem a possibilidade de cancelar a subscrição através do campo ‘active’.

ESTADIA:

Esta tabela regista o tipo de estadia, respectiva descrição e data de chegada e saída, relativamente à concretização do projecto do utilizador.

DESTINO:

Esta tabela regista o local de destino e a data de ida, relativamente à concretização do projecto do utilizador.

VIAGEM_IDA:

Esta tabela regista o tipo de transporte a utilizar na viagem de ida para o local planeado, descrição, e data e hora de ida.

VIAGEM_VOLTA:

Esta tabela regista o tipo de transporte a utilizar na viagem de volta, descrição, e data e hora de ida.

BUDGET:

Permite que o utilizador comum faça a gestão das suas economias. Regista, assim, o valor actual – valor que possui para investir no projecto - e a data em que é actualizado. Permite que o utilizador escolha se esta informação é ou não visível a outros utilizadores através do campo ‘publico_privado’ - por defeito, encontra-se privado.

MOVIMENTOS:

Regista os movimentos realizados no budget: valor inserido e respectiva data.

NOTIFICACAO_BUDGET:

Esta tabela regista o tipo de movimentos que são efectuados na área de poupanças, a data e o valor inserido. O campo ‘estado’ permite que o utilizador apague ou não a notificação.

POI:

Regista os pontos de interesse que o utilizador visitará no decorrer da sua viagem projectada: tipo de ponto de interesse (ex.: praia, museu, entre outros) e respectiva descrição.

Após a identificação das entidades e respectivos campos, procedeu-se à realização das relações existentes entre as diferentes tabelas: Relações 1:1 do tipo Identifying, relações 1:1 do tipo Non-Identifying, relações 1:M do tipo Identifying e relações 1:M do tipo Non-Identifying.

IMPLEMENTAÇÃO

DESCRIÇÃO DAS PRINCIPAIS FUNCIONALIDADES DA APLICAÇÃO WEB

A implementação desta plataforma on-line assenta em três diferentes grupos: perfil do utilizador, rede social e área de gestão.

Na primeira visita do utilizador a esta rede social, é-lhe apresentado um formulário para registo de conta segundo o tipo de usuário - empresa ou utilizador comum. Após este passo, ser-lhe-á enviado um email de boas-vindas e respectivas credenciais.
Caso o utilizador já tenha criado a sua conta, terá, apenas, que se autenticar na plataforma para que tenha acesso à sua rede social. Tem, também, a possibilidade de recuperar a sua palavra-passe, caso seja esquecida - terá que inserir o seu email de registo, para onde esta será enviada.
Após a realização do login, o utilizador poderá personalizar o seu perfil. Tanto o utilizador empresa como o utilizador comum podem inserir e editar os seus dados pessoais e fazer o upload de fotografia de perfil.
A rede social de cada usuário comum é criada pelo próprio, ou seja, este subscreve projectos e empresas, realiza comentários e envia mensagens privadas aos utilizadores que possuem planos de viagem do seu interesse para uma possível troca de sugestões relativas ao local que pretende visitar.
No seu perfil, poderá ver todas as subscrições realizadas ao seu projecto, tendo a possibilidade de cancelar as indesejadas e todos os comentários realizados por outros utilizadores, tendo, também, a possibilidade de apagar os indesejados.
Na sua rede social, a partir do feed de notícias, terá acesso a todos os projectos que subscreve e respectivos perfis, ordenados por data de actualização e a todas as empresas inscritas nesta rede, bem como destacar, as empresas preferidas.
Após a conclusão do seu plano ou por outros motivos alheios, o usuário poderá suspender a sua conta e mais tarde, reactiva-la.
O utilizador empresa poderá visualizar todos os perfis dos utilizadores comuns, tendo acesso directo, a partir do feed de notícias da sua rede, aos utilizadores que a marcaram como preferida.
Relativamente à área de gestão, esta varia consoante cada tipo de usuário. Por um lado, as empresas têm a possibilidade de criar as suas promoções e publicá-las no seu perfil, de forma a atrair potenciais clientes. Por outro lado, os utilizadores comuns têm a possibilidade de criar o projecto e respectivo budget.
A criação de um projecto permite a definição do local de destino - disponibilizando o Google Maps como ferramenta de procura de informações do mesmo -, tipo de transporte, tipo de estadia, data de realização e pontos de interesse a visitar. Para realização do seu plano, o utilizador dispõe de uma área de gestão de economias - budget -, onde pode inserir os gastos ou poupanças, tendo acesso à sua barra de progresso que indica a percentagem de conclusão do objectivo definido (viagem).

SERVER BEHAVIOURS UTILIZADOS

Para a realização deste projecto, recorreu-se à utilização de vários server behaviours - comportamentos do servidor - disponibilizados pelo Dreamweaver ou escritos de raiz:

repeat region - possibilitam a repetição de vários elemento vindos da base de dados;

insert record - utilizados aquando o registo de uma nova conta, criação de um projecto e respectivo budget e inserção de informações pessoais;

update record - utilizados aquando a edição de dados;

delete record - utilizado para eliminar dados;

Show if Recordset is Not Empty: só executa o código caso as condições do recordset se verifiquem;

log in user - utilizados para certificar que a palavra-passe corresponde ao email introduzido, autorizando ou impedindo o utilizador de aceder à rede social (sistema de login);

log out user - permite realizar o logout do utilizador;

check new username - utilizado para verificar, no processo de criação de nova conta, se o email introduzido pelo utilizador já se encontra registado na base de dados do bookmark.

RECORDSETS UTILIZADOS

A partir do Dreamweaver foram criados sete tipos de recordsets:

rs_tipoSexo - utilizado para conhecer o sexo do utilizador (masculino ou feminino);

rs_empresas - utilizado para seleccionar os dados da empresa;

rs_feed - utilzado para demonstração de projectos e empresas subscritos;

rs_promo - selecciona os dados das campanhas das empresas;

rs_dadosUtilizador - utilizado para seleccionar os dados do utilizador comum;

rs_poi - selecciona os dados dos pontos de interesse, correspondestes à descrição de um projecto;

rs_notificacaoBudget - adiciona na área de budget as movimentações feitas pelo utiizador.

Para além disto, foram criados de raiz três recordsets:

dadosVisitadosRS - utilizado para obter os dados do perfil de quem é visitado;

projectoRS - utilizado para seleccionar as características inseridas pelo utilizador, relativamente ao seu projecto;

budgetRS - utilizado para seleccionar as características inseridas pelo utilizador, relativamente ao seu budget.

QUERIES UTILIZADAS

Para proceder à implementação desta rede social, recorreu-se a um elevado número de queries. Sendo, por isso, necessário destacar as mais complexas:

upload de uma fotografia de perfil, seguido de uma selecção da área a apresentar e, consequente recorte:

criação de variáveis de upload; criação de funções necessárias para a redimensão da imagem pretendida; verificar se o ID do utilizador que carrega a foto já possuiu uma pasta no servidor; caso não possua, é então, criada uma pasta para onde é enviada a fotografia carregada;

registo de uma nova conta de utilizador:

aquando o registo de um novo utilizador nesta rede social, ao inserir os seus dados para criação de conta, estes serão adicionadas em mais que uma tabela da base de dados;

envio de um email de confirmação de registo ou de recuperação da palavra-passe:

quando o utilizador cria uma nova conta, recebe, de imediato, um email de boas-vindas, indicando-lhe as suas credencias; no entanto, caso o utilizador se tenha esquecido da sua palavra-passe para se autenticar na rede social, tem a possibilidade de inserir o seu email de registo, para onde lhe será enviada a palavra-passe. Para que isto se tornasse possível, foi necessário criar um mecanismo que permitisse a autenticação na rede, para a aprovação do envio do email para o usuário.

PARÂMETROS PASSADOS ENTRE PÁGINAS

Os parâmetros passados entre páginas foram realizados pelo método POST.

Apenas foram enviados parâmetros como o ID e a palavra pesquisa, inserida na barra de pesquisa.

Exemplo:

    $dados__query = sprintf("
    SELECT
         db_bookmark.dados_comum.username,
         db_bookmark.dados_comum.categoria_id,
         db_bookmark.dados_comum.fotografia
    FROM
         db_bookmark.dados_comum
    WHERE
         db_bookmark.dados_comum.id_perfil = %s", $_SESSION['MM_UserGroup']);

    $USER = sprintf("
    SELECT
         nome, username, email, fotografia, id_perfil
    FROM
         dados_comum
    WHERE
         categoria_id = %d
    AND
         (nome LIKE %s OR username LIKE %s OR email LIKE %s)",$User, 
              GetSQLValueString( '%'.$_POST['palavra_pesq'].'%', 'text'),
              GetSQLValueString('%'.$_POST['palavra_pesq'].'%', 'text'),
              GetSQLValueString('%'.$_POST['palavra_pesq'].'%', 'text'));

INTEGRAÇÃO

Para a concretização desta rede social recorreu-se à integração de diferentes tecnologias, nomeadamente, PHP, HTML, CSS, jQuery e Javascript.

A estrutura desta plataforma social é construída a partir do HTML, cujo design e o conteúdo são editados e formatados através do CSS, recorrendo a ids e classes.

A linguagem PHP confere dinamismo e integração com a base de dados às páginas integrantes da rede.

Para validação de formulários optou-se pela linguagem Javascript, aliando o surgimento de caixas dinâmicas de aviso, através de jQuery.

A inserção da API Google Maps foi feita por meio de Javascript e PHP. Na página detalhada sobre o projecto do utilizador, este pode procurar informações sobre o respectivo destino.

DESAFIOS

DESENVOLVIMENTOS FUTUROS

Sendo o tempo de desenvolvimento deste projeto bastante limitado - comparativamente ao tempo que seria normalmente necessário para planificar e implementar uma aplicação desta dimensão - existem inúmeras ideias que foram colocadas de parte e que levou o grupo a seguir um caminho um pouco diferente do que realmente gostaria, de forma a conseguir atingir o resultado mais próximo do esperado.

Assim, numa abordagem futura, as principais funcionalidades a implementar na nossa aplicação passariam pela implementação de uma ferramenta que permitisse ao utilizador receber o valor estimado do projeto de forma automática. Para isso, o usuário teria que fornecer apenas a data - de ida e e de volta - da viagem, bem como o número de noites e local da estadia. No entanto, esta ferramenta estaria apenas disponível para viagens de avião e comboio / metro.

De modo a que os utilizadores acompanhem a atividade inerente ao seu perfil/projeto ou seja, sempre que ocorra algum tipo de interação entre dois ou mais utilizadores, o grupo pretende implementar um sistema de notificações.

Pretende-se também cativar e facilitar o acesso de todos os tipos de potenciais utilizadores à aplicação. Para isso, o grupo pretende vir a disponibilizar a possibilidade de efectuar login com a sessão do Facebook. O grupo também considerou que seria relevante para o crescimento da aplicação, a implementação de partilha do projeto do utilizador nas principais redes sociais.

Tendo, também, em vista a expansão da aplicação, assim como a melhoria da experiência dos utilizadores - seria bastante interessante a implementação da aplicação bookmark em formato mobile. Isto permitiria aos utilizadores atualizarem o seu perfil enquanto estivessem a viajar e assim partilhar e incentivar os outros utilizadores.

Neste momento o bookmark apenas suporta fotografias na imagem de perfil dos utilizadores e empresas e nas campanhas das mesmas. No entanto, o grupo pretende adicionar uma galeria associado ao projeto de cada utilizadores; seja este um - como acontece neste momento - ou mais que um projeto por utilizador.

CONCLUSÕES

Quais são as necessidades do utilizador face a esta aplicação?

Foi este o ponto de partida para este projeto que tem como missão acompanhar e guiar o utilizador, principalmente quando este está num sítio novo e desconhecido. Partilhar os melhores momentos, as maiores emoções e aventuras da vida dos utilizadores incentivando os outros a concretizarem os seus projetos.

Sendo este ensaio, para o grupo, o comutar de todos os conhecimentos adquiridos ao longo dos Laboratórios Multimedia, entregamos este projeto com a sensação de quem cumpriu o seu dever e de quem está à altura do desafio que vai ser a disciplina de projeto.

O grupo despede-se, assim, com a esperança de que este projeto ganhe vida, sendo uma ferramenta útil nas malas de todos os amantes da viagem.

Como Robert Louis Stevenson escreveu uma vez: “For my part, I travel not to go anywhere, but to go. I travel for travel’s sake. The great affair is to move.”

Boas viagens!

REFERÊNCIAS BIBLIOGRÁFICAS

BIBLIOGRAFIA

[1] Michele E. Davis , Jon A. Phillips, Learning php & mysql, 1st edition, O'Reilly, 2006

WEBGRAFIA

[1] Estatísticas de browsers@ http://www.w3schools.com/browsers/browsers_stats.asp

[2] Estatísticas de resoluções nos browsers @ http://www.w3schools.com/browsers/browsers_display.asp

[3] Manual de PHP @ http://pt.php.net/manual/en/index.php

[4] Consulta e esclarecimento de dúvidas @ http://stackoverflow.com/

[5] Notificação / pop-up @ http://css-tricks.com/examples/PopFromTopMessage/

[6] Menu de Pesquisa @ http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html

@@ Line 314: / Line 314: @@
 <br/>
 ::''Quais são as necessidades do utilizador face a esta aplicação?''
+<br/>
 ::Foi este o ponto de partida para este projeto que tem como missão acompanhar e guiar o utilizador, principalmente quando este está num sítio novo e desconhecido. Partilhar os melhores momentos, as maiores emoções e aventuras da vida dos utilizadores incentivando os outros a concretizarem os seus projetos.
 ::Sendo este ensaio, para o grupo, o comutar de todos os conhecimentos adquiridos ao longo dos Laboratórios Multimedia, entregamos este projeto com a sensação de quem cumpriu o seu dever e de quem está à altura do desafio que vai ser a disciplina de projeto.