ImoLive
From Laboratório MM 5
- RELATÓRIO
- LABORATÓRIO MULTIMÉDIA 5
Realizado por:
21281 – Diana Moreira | 46277 – João Pedro Santos | 47317 – Paulo Brites
Contents |
Introdução
No âmbito da unidade curricular de Laboratório Multimédia 5 do curso de Novas Tecnologias da Comunicação da Universidade de Aveiro, serve o presente relatório como descrição e registo de processos resultantes da criação e implementação de uma nova aplicação online enquadrada nas tecnologias web 2.0.
Objectivo do documento
Com recurso aos conteúdos programáticos e às tecnologias lecionadas, o presente documento tem como principal objectivo o suporte e descrição dos passos dados na implementação do projecto proposto na U.C. bem como a contextualização das ferramentas e processos utilizados. Pretende-se descrever todo o processo de criação da aplicação nomeadamente a concepção da base de dados, a sua implementação, a programação utilizada como: Server Behaviours, Queries e Recordsets bem como a integração com outras tecnologias como Javascript, Ajax ou HTML.
Visão geral do projecto
- ImoLIVE consiste numa aplicação online, associada a uma empresa do ramo imobiliário, para a comercialização de imóveis. Pretende-se que o seu aspecto agradável e as suas funcionalidades tornem mais fácil e acessível a quem procura um negócio imobiliário, pesquisar e conhecer as possibilidades ao seu dispôr numa lógica de prosumer (produtor e consumidor). Através de uma área de pesquisa, o utilizador poderá encontrar diversas soluções enquadradas ao seu interesse ordenadas pelos parâmetros previamente seleccionados bem como colocar no mercado imobiliário o imóvel do qual é proprietário que pretenda comercializar.
Estudos gráficos
- Procurou-se desde o início do projecto uma imagem simples e eficaz que fosse explícita do objectivo da aplicação. Neste sentido optou-se por um design sóbrio em fundo negro.
Já para a imagem do lettering bem como do logótipo, optou-se por criar uma imagem marcante que fosse de fácil identificação e com uma identidade bem definida que mantivesse o destaque em todo o layout. Para o tipo de letra, optou-se por uma que fosse diferenciadora. A fonte Geomancy foi a escolhidade de entre mais de 100 diferentes e foi alvo de uma ligeira personalização no ponto do i.
Estudos de imagem imoLIVE
Imagem e lettering imoLIVE
Logótipo imoLIVE
Base de dados desenvolvida
Imagem das tabelas da Base de Dados desenvolvida.
A base de dados .....
Implementação
Descrição das principais funcionalidades da aplicação Web
A plataforma “Orienta-te” permite a todos que a visitam, registados ou não, ver diversas listas de locais e notícias submetidos pelos utilizadores registados, organizados por três parâmetros fundamentais: pela localização (zona do país ou distrito), pelo tipo de estabelecimento (bar, restaurante ou loja) e mediante uma pesquisa por palavra-chave.
Permite também consultar a Ajuda, ver uma pequena descrição sobre a plataforma ou os contactos da equipa de desenvolvimento.
Permite também que se registe na própria plataforma, através do simples preenchimento de um formulário, em que é necessário preencher diferentes campos, desde do nome à password, passando pelo sua foto. Depois de submetido o formulário de registo na plataforma o utilizador tem à sua disposição as funcionalidades de login (entrar na aplicação Web com os seus dados) e logout (sair da aplicação Web depois de efectuado o Login).
Cada utilizador registado tem o seu próprio perfil com nome, idade e imagem do próprio, sendo que a página de entrada é um widget personalizado pelo utilizador.
Ao encontrar-se na aplicação Web logado o utilizador tem a sua disposição funcionalidades que os utilizadores não registados não encontram, por exemplo a função de “Inserir Local”, isto é, o utilizador pode introduzir locais para outros utilizadores poderem consultar, adicionar noticias sobres estes locais e propor estes locais a votação. Também podem votar em locais propostos por outros utilizadores e comentar os locais já introduzidos permanentemente na rede.
Mapa de páginas
Ao entrar na plataforma Web 2.0 “Orienta-te” o utilizador encontra a Página Ínicial na qual encontra um menu do lado esquerdo do ecrã (locais por zona geográfica, locais por categorias, registar e fazer login), a barra de pesquisa no canto direito do header, Na zona de conteúdos encontra-se os últimos locais adicionados e as últimas notícias. No footer encontramos informação sobre a plataforma e os contactos da equipa de desenvolvimento. Nas restantes páginas da plataforma “Orienta-te” a única zona que se altera é a zona de conteúdos, visto que teremos sempre presente o header, menu e footer.
Página de Registo a zona de conteúdos é composta por um formulário em que é necessário introduzir os dados pessoais (nome, foto de perfil, idade, username, password, entre outros).
Página Utilizador como nas restantes páginas o que muda é a zona de conteúdos, nesta página temos presente 6 painéis sendo que 5 destes painéis são personalizáveis de acordo com as preferências do utilizador, pode escolher entre: zona geográfica, categoria do local (café, loja ou restaurante), amigos, sugestões, notícias, inserir local. O painel predefinido é o do perfil do utilizador.
Página Perfil a zona de conteúdos é composta pela foto do utilizador e os seus dados (nome e idade), um botão onde é possível adicionar como amigo, os amigos do utilizador, os locais submetidos pelo próprio e os comentários do próprio.
Página Amigos encontramos as fotos e o nome dos amigos do utilizador.
Página Inserir Local tal como na página de registo esta é composta por um formulário com os itens necessários para se inserir um novo local na base de dados da plataforma
Página Noticias é uma simples página onde encontramos todas as notícias adicionadas por ordem decrescente fase à data. Página de cada Local nesta página encontramos toda a descrição do local seleccionado, onde é apresentada a categoria do local, a localização, imagens do local, a descrição, o horário de funcionamento, os contactos, os comentários ao local e sugerir a um amigo.
Server Behaviours utilizados
Foram utilizados vários Server Behaviours ao longo do desenvolvimento da plataforma, nomeadamente:
Insert Record – para inserir dados na BD, através do registo de utilizadores ou da submissão de locais, por exemplo
Update Record – para actualizar dados já anteriormente inseridos ("Editar Perfil")
Dynamic Text - mostra os dados armazenados na BD
Dynamic Text Field – Para a introdução de dados que são dinamicamente armazenados na BD
Repeat Region – para repetir determinados excertos de código / conjuntos de dados, nomeadamente na página de amigos (repetição da foto e do nome de todos os amigos que o user tem, obtidos através do número de registo na tabela "amigos")
Show if Recordset is Empty – utilizado, por exemplo, na secção de comentários para mostrar uma mensagem de aviso caso o utilizador não tenha feito comentários (não existem, assim, comentários para aquele user_id). Se já o tiver feito, procede-se a um "do...while" para repetir a formatação aplicada a cada comentário existente.
Dynamic Attribute - Atribui dinamicamente um valor
Restrict Access To Page – torna o acesso restrito a determinados utilizadores. Por exemplo, só um utilizador registado pode ver a sua página de utilizador
Recordsets/Queries utilizados
De forma a carregar, inserir e manipular dinamicamente os dados existentes na Base de Dados da plataforma, foram criados vários Recordsets e várias queries que permitem chegar à informação pretendida. Uma vez que as diferentes páginas foram sendo desenvolvidas por diferentes membros do grupo, recordsets semelhantes tinham nomes diferentes. No entanto, os principais são:
rs_user- permite aceder à tabela "utilizador" para preencher o perfil de cada user como nome, idade, o id (útil para passagem de parâmetros), username e password (necessários para o login), e também para ir buscar estas informações para todos as outras tabelas em que são necessários dados do user, como notícias e locais (quem submeteu), comentários, etc.
Para preencher os dados do perfil do utilizador, utilizamos a seguinte query:
SELECT id_user, username FROM utilizador WHERE username = colname
em que colname corresponde ao id do utilizador com sessão iniciada.
Por exemplo, para conseguir interligar esta tabela com a tabela de amigos, para assim ir buscar as respectivas informações dos amigos, utilizamos a seguinte query:
SELECT * FROM amigos WHERE utilizador_id_user ='$user_actual'
em que a variável $user_actual corresponde ao id_user do utilizador em sessão.
<?php //IR BUSCAR O USERNAME E A FOTO DO AMIGO
$amigoid= $row_rs_amigos['utilizador_id_amigo'];
mysql_select_db($database_db_orientate, $db_orientate);
$query_RS_dados_user = "SELECT id_user, username, foto FROM utilizador WHERE id_user = '$amigoid'";
$RS_dados_user = mysql_query($query_RS_dados_user, $db_orientate) or die(mysql_error());
$row_RS_dados_user = mysql_fetch_assoc($RS_dados_user);
$totalRows_RS_dados_user = mysql_num_rows($RS_dados_user);
?> Através do código anteriormente citado, conseguimos ir buscar à tabela de "utilizador" os dados relativos ao id_user que corresponde ao ao utilizador_id_amigo na tabela "amigos", ou seja, conseguimos depois imprimir o seu username e a sua foto na página de amigos e de perfil de cada utilizador.
rs_local- Este recordset permite obter os dados de cada local.
rs_recursos_local- Tal como no caso anterior, foi necessário uma query para conseguimos estabelecer ligação entre as duas tabelas e obter assim os recursos de cada local mediante o id passado dinamicamente.
SELECT * FROM recursos WHERE local_id = '$local_select'
rs_noticias- Este recordset vai buscar as informações relativas às notícias submetidas na BD
rs_comentarios- Neste recordset são chamados os dados sobre os comentários
rs_categorias-
rs_distritos-Estes recordsets foram criados no sentido de implementar nos formulários um menu com várias opções de escolha. Podemos assim, colocar como values os nomes dos distritos ou categorias, mas passar o id como parâmetro.
Parâmetros passados entre páginas
Para passar parâmetros entre páginas, utilizamos três métodos: o método GET, POST, por url, e através da Session, ou seja, do id do utilizador que tem, no momento, a sessão iniciada.
Para visualizar um perfil de um utilizador, por exemplo, utilizamos o método GET para passar o seu id, e assim carregar dinamicamente o perfil.
O método POST foi usado, principalmente, no preenchimento de formulários, como o de registo.
Para perceber que utilizador fez login e mostrar assim a sua página de widgets actualizada, utilizamos o parâmetro de Session "MM_Username", que corresponde ao username, único para cada utilizado.
Integração
No desenvolvimento do projecto, para além do PHP, linguagem fundamental na incorporação do conteúdo dinâmico nas páginas (carregamento de informação do utilizador da base de dados, manipulação dessa informação, realização de pesquisas, etc.), foram utilizadas outras tecnologias, fundamentais no desenvolvimento para a internet.
Html - Utilizamos no desenvolvimento de todas as páginas presentes na nossa plataforma Web 2.0, por forma a estruturar as mesmas.
Css – O Css foi utilizado na formatação de todo conteúdo apresentado, através de ficheiros externos, conseguindo assim uma maior organização dos documentos. Exemplo de formatação em css das caixas do formulário:
Javascript – Utilizamos no desenvolvimento do Footer e do Menu de modo a conseguirmos implementar um slider. Para conseguirmos efectuar os sliders mais rapidamente utilizamos a Framework designada de Mootools.
Também utilizarmos para efectuar as validações dos formulários, por exemplo, (de registo, adicionar notícia, adicionar local) através do Spry Validation Text Field e Spry Validation Textarea presentes no menu do Form do Dreamweaver. De modo a que certos campos dos formulários fossem de preenchimento obrigatório e também para algumas restrições quanto ao tipo de caracteres inseridos.
Desenvolvimentos Futuros
Uma vez que não concluímos tudo o que gostaríamos de ter implementado na plataforma, há diversas questões que, no futuro, gostaríamos de ver implementadas.
Uma das primeiras coisas a implementar seria a classificação.Uma das metas que gostávamos de ter atingido era a possibilidade de classificar locais num ranking de uma a cinco estrelas, por exemplo.
Outra das funcionalidades que era importante implementar seria a recuperação de password, pois um utilizador que não se lembre da sua password não tem, hoje, como reavê-la ou obter outra automaticamente na nossa plataforma.
Seria necessário também acrescentar mais dois tipos de utilizadores, os Utilizadores Empresa que poderiam publicar o local do qual são proprietários, poderiam também adicionar noticias (recrutamento, descontos e festas temáticas, por exemplo) referentes ao seu estabelecimento (bar, restaurante, loja), mas mediante um pagamento (ou seja, seria necessário implementar um sistema de validação de empresas que já tivessem feito os pagamentos), e um utilizador Administrador, fundamental para fazer a gestão da plataforma. Este último, implicaria a existência e desenvolvimento de um back-office. Era de interesse também criar um banner de publicidade lateral, onde as empresas submeteriam os seus anúncios, também mediante pagamentos simbólicos.
Conclusões
Uma vez que a melhor forma de adquirimos conhecimentos é aplicá-los, este foi um trabalho bastante enriquecedor, e permitiu-nos pôr à prova as aprendizagens que adquirimos não apenas ao longo da Unidade Curricular de Laboratório Multimédia V mas também em Laboratório Multimédia IV. Foi possível percepcionar a necessidade de estudo das tecnologias client-side e server-side numa plataforma Web 2.0
Poderemos dizer que representou um desafio para todos os membros do grupo e que o resultado final poderia ter sido melhor, uma vez que tínhamos em mente elevadas expectativas e devido à falta de tempo (mais concretamente o acumular de tarefas para outras unidades curriculares) e tarefas extra curriculares que se tornaram mais um obstáculo para o desenvolvimento do trabalho. Assim, este não correspondeu aquilo que tínhamos esperado, e vários erros que nos foram surgindo pelo caminho foram atrasando o seu desenvolvimento. No entanto, foi fonte de aprendizagem não só no domínio da utilização das tecnologias como nas dificuldades adjacentes à sua interligação.
Referências bibliográficas
Consultados ao longo do desenvolvimento do projecto: http://mootools.net/demos/?demo=Fx.Slide
http://www.w3schools.com
CAIXINHA, Hélder & MANO, Lícinio – Aulas teóricas e práticas de Laboratório Multimédia 5, 2010/2011
