User:Mybookmark

From Laboratório MM 5

(Difference between revisions)
Jump to: navigation, search
(→PARÂMETROS PASSADOS ENTRE PÁGINAS)
(→IMPLEMENTAÇÃO)
Line 201: Line 201:
               GetSQLValueString('%'.$_POST['palavra_pesq'].'%', 'text'));
               GetSQLValueString('%'.$_POST['palavra_pesq'].'%', 'text'));
<br/>
<br/>
 +
===INTEGRAÇÃO===
 +
----
 +
<br/>
 +
::* 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.
 +
<br/>
 +
----
==PROBLEMAS E SOLUÇÕES==
==PROBLEMAS E SOLUÇÕES==

Revision as of 21:03, 19 January 2012

Logo transparent-01.png
DOWNLOAD DO RELATÓRIO EM PDF

Contents

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


Paleta de variações de cinzento
FIG 1. PALETA DE VARIAÇÕES DE CINZENTO


VERMELHO


Paleta de variações de 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
LOGOTIPO DA APLICAÇÃO
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
LAYOUT A APLICAÇÃO
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

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. Aquando da 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 credencias.
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 esta 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, apenas, 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.
Sempre que haja algum tipo de interacção entre dois ou mais utilizadores, como por exemplo, envio de uma mensagem ou realização de um comentário a um dos perfis, o usuário recebe uma ou várias notificações para que acompanhe a actividade inerente ao seu perfil/projecto.
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, onde tem 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.


PROBLEMAS E SOLUÇÕES



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 pretendido.
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 para a estadia e local da estadia. No entanto, esta ferramenta estaria apenas disponível para viagens de avião e comboio / metro.
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 propriamente dito 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 deveras 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



BIBLIOGRAFIA



Retrieved from "http://wikis.ua.pt/labmm5/index.php?title=User:Mybookmark"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox