From Laboratório MM 5

Revision as of 07:25, 18 January 2011

Universidade de Aveiro | 2010 / 2011

Departamento de Comunicação e Arte

Laboratório Multimédia V

Relatório Orienta-te - Plataforma de Partilha de Locais Étnicos

Discentes:

Ana Pinheiro, 45875

Hugo Araújo, 46229

Vera Oliveira, 46577

Introdução

Objectivo do documento

Este relatório foi elaborado no âmbito da Unidade Curricular de Laboratório Multimédia 5, integrada no 1º semestre do 3º ano do curso de Novas Tecnologias da Comunicação da Universidade de Aveiro. Este documento tem como objectivo relatar e descrever o processo de criação do projecto proposto na UC: uma plataforma Web 2.0, utilizando as tecnologias leccionadas. Estão assim contemplados todos os passos para a execução do projecto, desde a concepção da base de dados até à explicação da sua implementação, explicando os Server Behaviours, os Recordsets e Queries utilizados, assim como a integração com outras tecnologias como HTML e Javascript. Por fim, são apresentados algumas propostas de possíveis melhorias a fazer para desenvolver o projecto e torná-lo mais inovador.

Visão geral do projecto

O conceito de Web 2.0 define uma dinâmica nova no que concerne ao uso da Web. Uma dinâmica marcada pela participação e pela interacção do utilizador. Com a proposta de criação de uma plataforma Web 2.0, surgiram diversas ideias de redes sociais que o grupo achava interessante desenvolver. Uma vez que todos somos adeptos de viajar e conhecer novos locais, e frequentadores de blogs como o OportoCool e plataformas similares como o LeCool, pensamos que seria interessante desenvolver uma rede social onde os utilizadores pudessem partilhar locais que conhecessem e achassem interessantes, assim como alguém que quisesse visitar uma cidade poderia ter um local onde pudesse conhecer um conjunto variado de estabelecimentos para conhecer. Posteriormente, pensamos que seria boa ideia restringir um pouco mais a plataforma, não só a nível nacional, como de tipologia ou tema. Optamos assim por restringir a rede social a locais étnicos. Para além da temática, apostamos bastante num ambiente gráfico interessante, apelativo e correspondente à temática, que cative o utilizador a frequentar a rede social.

Base de dados desenvolvida

A base de dados que sustenta a plataforma “Orienta-te” foi construída no MySQL Workbench. É constituída por 13 tabelas.

A tabela “Local” guarda toda a informação relativa aos locais submetidos: quem submeteu, o distrito, a data de submissão, a categoria, uma descrição do mesmo, o nome, as visitas e se está ou não activo.

O distrito e a categoria estão em tabelas separadas, uma vez que o utilizador pode associar o local a um dos dezoito distritos portugueses (mais regiões autónomas) e a uma das três categorias: bar, restaurante ou loja. Cada local pode ter apenas uma categoria e que cada categoria pode ser atribuída a vários locais.

Associada também à tabela “Local” está a tabela de “Votações”, onde são guardadas informações relativas a quem votou, em que local, quando e quanto atribuiu, numa escala de uma a cinco estrelas.

Está também ligada a tabela de “Comentários”, com os feedbacks dos utilizadores aos locais submetidos na plataforma (texto), quem introduziu, em relação a que local e quando.

Por fim, a cada local podem estar associados vários recursos assim, a tabela recursos armazena toda essa informação: qual o recurso, a que local se refere e onde está guardado.

A tabela “Utilizador” guarda um username (que deverá ser único), a password, o nome, idade, morada e a data de registo do user. Está ligada á tabela “tipo_utilizador”, que define se é um utilizador comum ou o administrador. O tipo de utilizador define todo o resto da interacção com a plataforma, como as permissões, o que é mostrado, e o que é possível fazer na mesma.

Cada user registado possui uma interface que pode personalizar com seis painéis, entre as últimas notícias, os últimos locais submetidos de determinado distrito ou categoria, os amigos, ou as sugestões de amigos. Ligada à tabela de “Utilizador” está, assim, a tabela de “interface“ que guarda para cada painel o widget associado.

Um utilizador pode também ter amigos. Se um user quiser adicionar outro como seu amigo, faz o pedido, que regista na tabela “amigos” os dois users, a data do pedido e o estado do mesmo (no caso, é registado um 0 que mostra que está pendente). Caso seja aceite, é feito um novo insert dos dois utilizadores, e muda o estado do pedido para 1 – aceite.

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 Not 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. Se já o tiver feito, procede-se a um "do...while" para repetir a formatação aplicada a cada comentário existente.

Dynamic Attribute

Recordsets/Queries utilizados

Parâmetros passados entre páginas

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. Seria necessário 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