Studentslife

From Laboratório MM 5

Latest revision as of 00:42, 18 January 2011

Laboratório multimédia 5

Bruno Brandão - 47321

Luís Jesus - 46852

Márcio Reis - 46132

Introdução

O presente trabalho surge no contexto da disciplina de Laboratório Multimédia 5, do terceiro ano da Licenciatura em Novas Tecnologias da Comunicação, da Universidade de Aveiro. O seu objectivo é a concepção e desenvolvimento de um Web site atendendo aos princípios da Web 2.0 e ao aparecimento de redes sociais on-line, recorrendo a tecnologias server-side (em especial PHP) e client-side (como HTML/XHTML e JavaScript) e sob a coordenação dos docentes Hélder Caixinha e Licínio Mano, responsáveis pela unidade curricular anteriormente citada e, ainda, da docente Margarida Almeida, responsável pela disciplina de Implementação e Controlo de Projectos Multimédia.

Objectivo do documento

Este documento visa apresentar todo o processo de concepção e desenvolvimento do website em questão (Student’s Life), assim como todas as dificuldades sentidas e as soluções adoptadas pelo grupo de trabalho. Pretende, ainda, abordar questões relativas à implementação técnica de todas as componentes leccionadas durante o período de aulas e, por fim, realizar uma reflexão acerca do trabalho realizado.

Visão geral do projecto

O projecto prende-se com a partilha de trabalhos entre uma comunidade académica e empresas a ela associados, para tal existem, como é natural a presença de diversos utilizadores: professores, alunos, empresas. Os alunos podem criar o seu portfolio com os respectivos trabalhos por áreas de interesse/temas, que por sua vez podem comentar/avaliar ou comentar/sugerir os trabalhos dos seus amigos ou mesmo da comunidade académica, podem, ainda, candidatar-se a um trabalho/projecto de uma empresa, de modo a, dessa forma, puder receber informações/notificações sobre a mesma no seu perfil. As empresas, na comunidade académica, podem visualizar os portfolios e inspirar-se para a criação de novos projectos, adquirir trabalhos dos respectivos alunos, encontrar/visualizar o(s) perfil(s) do(s) candidato(s) a contratar, publicar projectos na rede, sugerir estágios na sua empresa, publicação de vagas na sua empresa.

Base de dados desenvolvida

A base de dados utilizada (Mysql), sendo um conjunto de registos dispostos numa estrutura regular, possibilita a organização dos mesmos [registos] e a produção de informação. A relação existente entre as várias tabelas é, maioritariamente, uma relação de “um para muitos”, sendo que existem algumas relações de "muitos para muitos".

2.1 utilizadores

Esta entidade apresenta toda a informação relativa ao utilizador, veja-se alguns exemplos: (nome; username; data_registo, etc.). Saliente-se que, quanto à sua parametrização, existe uma predominância de VARCHAR (ex.: username), ainda assim existem campos com que comportam outro tipo de dados, veja-se alguns exemplos (interesses – INT; data_registo – DATE; reputacao – FLOAT; activo - TINYINT).

2.2 tipo_utilizadores

Esta entidade comporta comporta o tipo de o tipo de utilizador e sua descrição. Quanto à parametrização verifica-se (id_tipo_utilizadores – INT; descricao – VARCHAR; peso_avaliacao - FLOAT).

2.3 utilizadores_has_utilizadores

Esta entidade, tem o objectivo de relacionar os utilizadores, uns com os outros, sendo que relaciona a entidade “utilizadores” consigo própria. Em relação à parametrização só contem dados do tipo “INT”, pois é fruto de uma relação de muitos para muitos (ex.: utilizadores_utilizador_id).

2.4 publicacoes; comentarios_publicacoes

Estas têm como objectivo a publicação de conteúdos (texto) por parte dos utilizadores, sendo que permitem, por exemplo, a análise da data da sua criação, a possibilidade de resposta, etc. Em relação à parametrização, existem dados do tipo (id_utilizador – INT; data_edicao – DATE; comentario – TEXT; publicacao – VARCHAR; etc.).

2.5 portfolios; avaliacao_trabalhos; trabalhos; subcategorias; categorias; comentarios

Estas comportam algumas das funcionalidades mais importantes contidas no projecto “Student’s Life”. Estas [funcionalidades] prendem-se com o upload dos trabalhos, sua remoção e edição, criação de portfolios, publicação das características de cada trabalho, classificação e comentários dos mesmos, entre outros. As parametrizações dispõem-se através dos seguintes tipos (id_avaliacao – INT; nome – VARCHAR; data – DATE; classificacao – FLOAT; activo – TINYINT; etc.).

2.6 publicacoes_has_utilizadores

A presente tem como função permitir que um utilizador siga outro (as suas publicações). Esta opção pode só evoluir de um lado para o outro, ou seja, o utilizador “seguido” não tem, necessariamente, de seguir o “seu seguidor”.

2.7 utilizadores_has_categorias_do_utilizador

Entidade que permite a atribuição de categorias aos diferentes utilizadores (alunos, professores ou empresas). As parametrizações são apenas de um tipo (utilizadores_utilizador_id – INT; etc.).

2.8 utilizadores_has_mensagens; mensagens

Esta entidade permite que os utilizadores enviem mensagens uns para os outros, com elas é permitido enviar algumas especificações como é o exemplo do “assunto”. Ao que se refere às parametrizações, veja-se (utilizador_remetente – INT; assunto – VARCHAR; data_envio – DATE; etc.).

2.9 utilizadores_has_eventos; eventos; tipo_evento

Esta entidade tem a função de a publicação de eventos, bem como toda a sua descrição e pormenorização (ex.: utilizador; nome; tipo; etc.). Ao que concerne à parametrização veja-se alguns exemplos (titulo – VARCHAR; activo – TINYINT; data_inicio – DATE; id_utilizador - INT).

2.10 cursos_has_utilizadores; cursos

Esta entidade tem a função de disponibilizar o nome do curso de cada utilizador, bem como a descrição e logótipo do mesmo. Quanto à parametrização, veja-se (descricao – VARCHAR; descricao – TEXT; cursos_id_curso - INT).

2.11 faq_avaliacao; faq; faq_subcategoria; faq_categoria

Para esta categoria “FAQ” foi necessário recorrer a 4 tabelas (referenciadas anteriormente), de modo a criar categorias, subcategorias, e sub sub categorias questões/dúvidas que o utilizador coloque. Esta “dilatação” de tabelas permite chegar a respostas mais directas e mais lúcidas no que diz respeito às questões colocadas pelos utilizadores. Note-se que a sua parametrização distribui-se. Veja-se alguns exemplos (data – DATE; avaliacao_resposta – VARCHAR; id_FAQ_subcategoria – INT; avaliacao_resposta - TINYINT).

Narrativa

A empresa MicroWeb, orientada para o ramo da multimédia e das novas tecnologias da comunicação, quer apresentar no mercado uma plataforma de integração em comunidades académicas denominada de Student’s Life. Este projecto será uma mais-valia para as universidades interessadas uma vez que contribuirá para aumentar os índices de empregabilidade dos seus estudantes em fim de curso bem como o seu rendimento escolar. Durante a utilização da plataforma, os estudantes são incentivados a publicarem os seus trabalhos no seu portefólio sabendo que a qualquer momento, poderão ser notificados para participarem num estágio ou até mesmo convidados a ingressar numa empresa da área. Isto contribuirá para aumentar a competitividade entre alunos, onde cada um deverá mostrar aquilo que vale na elaboração dos seus projectos. Para as universidades será uma oportunidade de sobressair nos rankings universitários; Para os alunos, o momento certo de se relacionarem, comunicarem e exibirem aquilo que de melhor são capazes de fazer. Falando em termos técnicos, todos os utilizadores poderão partilhar entre si informação, fazendo publicações, estabelecendo relações de amizade, avaliando os trabalhos e ainda deixando feedback por recurso a comentários. Importa referir que a avaliação tem pesos diferentes: Alunos avaliam alunos: valor de 0,3 Professores avaliam alunos: valor de 3 Empresas avaliam alunos: valor de 2 Refira-se que, ao existirem 3 tipos de utilizadores, existem também 3 tipos de permissões diferentes, ou seja, as utilidades oferecidas na aplicação não estão disponíveis, na sua totalidade, para todos os utilizadores. Veja- se então: Os utilizadores dos tipos “professor” ou “empresa” podem: seguir amigos, avaliar os trabalhos e as publicações dos seus amigos; podem, ainda enviar notificações/ convocar utilizadores com trabalhos do seu interesse. Quanto aos utilizadores do tipo “alunos” podem: fazer quase tudo o que os outros tipos de utilizadores fazem; inserir/publicar, retirar e editar portfolios/trabalhos.

Implementação

A implementação, no presente caso, é a fase do “Ciclo de Vida” da plataforma “Student’s Life”, na qual de procede à elaboração e preparação dos módulos necessários à sua execução.

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

Inserção de trabalhos/construção de portfolios

A criação e disponibilização de portfolios na Web, com vista ao seu reconhecimento por parte das empresas envolventes, é o objectivo fulcral da plataforma Student’s Life. Como tal, os alunos, como um dos principais interessados, nesta aplicação, podem inserir trabalhos em formato ".jpg", para que as empresas registadas e professores os possam visualizar e avaliar.

Contribuições/comentários

Cada utilizador com sessão iniciada pode inserir contribuições no seu perfil, estas que podem, posteriormente, ser comentadas por outros utilizadores e, também, por si mesmos o que pressupõe que vários utilizadores podem manter conversas assíncronas em redor de uma determinada contribuição.

Rede de Amigos

Os alunos registados podem fazer amigos (outros alunos, professores ou empresas) de forma a criarem uma rede de seguidores. Esta rede permitirá aos alunos terem seguidores dos seus trabalhos, o que lhes permitirá uma maior divulgação do seu trabalho.

Gestão de Conta

Cada utilizador pode gerir a sua conta de utilizador no que respeita ao controlo de mensagens, contribuições e amigos, isto é, em qualquer altura o utilizador pode remover uma mensagem, uma contribuição, um amigo e ainda um comentário e resposta. Aquando da remoção de uma contribuição todos os comentários e respostas são removidos. O mesmo se aplica a um comentário que, quando removido, remove da Base de Dados todas as respostas a ele relacionadas.

Editar Perfil

Cada utilizador encontra, no seu perfil, a opção “Editar Perfil”, este que lhe permite aceder a uma página de edição de toda a informação pessoal, nomeadamente username, password e fotoperfil e tipo de agregação (empresa, aluno ou professor). Acrescente-se que os diferentes tipos de utilizadores têm acesso a diferentes opções de visionamento e edição de dados, sendo o perfil “alunos” o mais complexo (ex.: colocar, retirar e editar trabalhos).

Motor de busca/pesquisa com filtragem

A existência de um campo de pesquisa com filtragem, o que permite o utilizador focar a sua procura numa área específica, de modo a haver uma mais rápida “interacção” por aquilo que se procura (ex.:alunos, trabalho, empresas, etc.).

Mapa de páginas

O Mapa de páginas da plataforma Student’s Life está feito de forma a que haja uma interacção multidimensional, ou seja, existe um rede de páginas que interagem umas com as outras de modo consistente e contíguo. A combinação de várias páginas para a mesma plataforma permite uma gestão mais eficiente do site, bem como a visualização de “parcelas” distintas através do URL.

Especificação de conteúdo

Barra/menu de topo

A “Barra de topo” é um dos elementos sempre presentes em todas as páginas pertencentes à plataforma “Student’s Life”. Esta [barra], contem, alem do logótipo, um sistema de pesquisa rápida, que permite ao utilizador fazer uma filtragem (embora que relativa) através de um vocábulo em específico; existem, ainda, alguns links de navegação “Perfil”, “As minhas mensagens”, “Ver o meu portfolio”, “definições” que permitem o destaque de páginas potencialmente importantes para os utilizadores da plataforma, o que permite um fácil acesso às mesmas.

Barra/menu lateral

A “Barra lateral”, a par da “barra de topo” é um dos elementos mais importantes, como referido anteriormente. Nesta encontra-se a imagem (fotoperfil) do utilizador e alguns links que dão acesso a informações, pertinentes ao utilizador, bem como a manutenção de mensagens recebidas/ enviadas, actualização no grupo de amigos e referencia aos “Favoritos”. Existe, ainda, “uma ligação” às páginas “O meu portfolio”, “As minhas propostas” e “definições de utilizador”.

“Rodapé”

No inferior da página, estão disponíveis diversos tipos de informação(links), que podem se revelar muito útil para os utilizadores, são elas: a “Ajuda”, informação sobre a plataforma “Acerca da plataforma”, termos e condutas de privacidade “Privacidade” e, por último, a referencia à empresa que esteve responsável pela presente plataforma – “MicroWeb”.

Página “Login”

O “login” é efectuado sempre que um utilizador pretende aceder à aplicação, para isso o utilizador tem de estar registado. O registo do utilizador é efectuado, no entanto, caso se trate de uma empresa ou utilizador que não pertença à comunidade académica a quem pertence a plataforma, só será possível usufruir [utilizador] dela se o administrador verificar que existem condições para fazê-lo.

Página “Perfil”

Na página “perfil” encontram-se os dados do utilizador (nome, fotografia, etc.).

Página “Ver o meu portfolio”

Nesta página estão todos os trabalhos dos utilizadores (com perfil “alunos”). Os alunos têm acesso a vários comandos/informação, de forma a organizarem os seus trabalhos, tais como: a abertura e edição de documentos, através de “Editar”; consultar os detalhes de cada trabalho, através de “Abrir detalhes”; descarregar os seus trabalhos/documentos, através de “Descarregar”; têm ainda, informação de quantos trabalhos têm publicados; é possível visualizar que tipo de ficheiros têm (.pdf, .doc, etc.) Há, ainda, a disponibilização da data em que os trabalhos foram lançados na plataforma, respectivamente e o sistema de rating associado a cada qual.

Página “As minhas mensagens”

Nesta página, o utilizador tem a possibilidade de gerir as mensagens enviadas, ou recebias pelos seus “amigos”. Entre as diversas possibilidades existem as seguintes: “Apagar”; “Apagar todas”; “Marcar como lida”; “Marcar como não lida”; “Responder”. Está disponibilizada, também, a data de chegada ou envio de cada mensagem, de modo a tornar mais fácil a “leitura” das mesmas. Refira-se, ainda, que numa outra página “enviar mensagens”, é possível enviar mensagens para os diferentes amigos. Note-se que, esta opção só está presente quando o utilizador selecciona a página ”As minhas mensagens”.

Página “Registo de utilizador”

A página de registo permite aos utilizadores escolherem o “tipo de utilizador” ao qual se querem vincular. O registo, caso seja de uma empresa ou de um outro utilizador “não autorizado”, será avaliado pelo administrador, antes da permissão para explorar o plataforma “Student’s Life”.

Server Behaviours utilizados

Na presente plataforma foi necessário recorrer a vários behaviours, de modo a colmatar as necessidades emergentes. Veja-se, então, os behaviours utilizados e respectiva importância:

• repeat region;
• insert record;
• update record;
• user authenticathion (sistema de login);
• user authenticathion (sistema de logout);
• user authenticathion (acesso restrito);
• check new username.

Recordsets/Queries utilizados

A Queries possibilitam a existência de diferentes perspectivas sobre os dados, bem como a edição de informação que satisfaça determinados critérios. Foram utilizadas várias Queries por forma a responder às necessidades emergentes:

• Select Query (seleccionar informação);
• Action Query (alterar a informação);
• CrossTab Query (dispor a informação).

Parâmetros passados entre páginas

Existem funções comuns a todas as páginas do site, assim como Server Behaviours e Queries às bases de dados. Independentemente da página em questão, o Header e o Footer são carregados através de funções PHP previamente definidas num ficheiro incluído logo no início de cada página. Da mesma forma, em qualquer página existe uma verificação relativa ao estado da sessão do utilizador, a sua conta de utilizador(tipo de utilizador), bem como ao estado das Cookies, tendo em conta se o utilizador pretende permanecer com login efectuado na plataforma ou não. No caso desta verificação, é realizada uma query à base de dados com os dados de sessão do utilizador, por forma a verificar se os dados de sessão permanecem válidos.

Integração

No presente foram utilizadas várias tecnologias de programação. A sua diversidade consistiu, sobretudo às necessidades emergentes de cada desafio encontrado. Vislumbre-se as tecnologias utilizadas:

• PHP – linguagem de programação utilizada para gerar conteúdo dinâmico na World Wide Web e, como tal, é a tecnologia predominante na plataforma “Student’s Life”;
• Bibliotecas Javascript(jQuery) – linguagem de scripts com a função de criar maior interactividade na plataforma, nomeadamente entre a página e o utilizador, tendo como “assessores” CSS e XHTML;
• HTML/SHTML – linguagem que permite exibir conteúdos em páginas Web, sendo que esta linguagem é responsável pela integração de conteúdo “não dinâmico” da plataforma;
• CSS – Linguagem que permite a ordem dos conteúdos na página Web na presente plataforma.

Desenvolvimentos Futuros

A plataforma Student’s Life, apesar de conter diversas funcionalidades, distintas umas das outras, está ainda, muito à quem das suas potencialidades. Não obstante às suas faltas [da plataforma], refira-se que muitas das funcionalidades que apontamos como "desenvolvimentos futuros" estiveram em desenvolvimento, durante a construção do presente projecto, no entanto, como continham erros, não foram adicionadas à plataforma. Como tal, e num futuro próximo, o grupo pretende dar continuidade ao projecto com os seguintes desenvolvimentos:

Grupos

Implementar um sistema de grupos onde cada utilizador pode criar e gerir o seu próprio grupo com permissões de privacidade e inserção de contribuições.

Recuperar Password

Implementar um sistema que permita ao utilizador, caso não se recorde da sua password pode solicitar o envio de uma nova password, esta que será gerada automaticamente e reenviada para o seu e-mail.

Assumir Idioma por predefinição

Quando um utilizador se identifica, o sistema identifica, pelas coordenadas, o país onde o utilizador se encontra e define por predefinição o idioma que lhe será apresentado. A partir do momento em que o utilizador altera o idioma manualmente, será guardado na BD o seu idioma predefinido e a plataforma passa a apresentar esse idioma sempre que o utilizador efectua login.

Image Crop

Esta é outra funcionalidade que foi iniciada e que se encontra ainda em desenvolvimento. Pretende-se que, na área ‘Editar Perfil’, seja permitido ao utilizador seleccionar uma foto do seu computar e cortá-la, segundo uma proporção de 1:1 como desejar.

Manuseamento de Módulos

O manuseamento de módulos é uma funcionalidade que permite ao utilizador, na página “Perfil” manusear e alterar a disposição dos diferentes módulos para as posições desejadas.

Ampliação dos formatos para upload

No presente momento está a funcionar o upload de ficheiros de imagem (formato .jpg), no entanto, num futuro, pretendíamos aumentar a diversidade dos formatos (ex.: .doc; pdf; etc.).

Definições de Utilizador

A área das “Definições de Utilizador” é, uma das áreas que se encontram no topo da hierarquia da pertinência das novas funcionalidades, isto porque é pertinente disponibilizar ao utilizador a oportunidade de definir a privacidade do ser perfil, a permissão a utilizadores que não pertençam a sua rede de amigos de comentarem as suas contribuições, opção de receber notificações por e-mail quando recebe uma mensagem, um pedido de amizade ou até uma resposta a uma contribuição.

Sistema de fecho automático

Nos dias que correm, e com a crescente azafama pessoal, a tendência para deixar o computador ligado e sair(ir para outro local) é crescente, como tal, a implementação de um sistema de fecho/bloqueio automático da plataforma é imprescindível para que a salvaguarda de trabalhos de quem esteja à espera de um “espaço de tempo” para vasculhar o que não lhe pertence.

Atribuição de Ratings

Pretende-se implementar um sistema de rating, em que os utilizadores com sessão iniciada possam atribuir uma classificação de 1 a 5 ao perfil de outros utilizadores, nunca atribuindo mais que uma vez ao mesmo trabalho, ou seja, não é permitido classificar mais que uma vez um trabalho em específico de um perfil de utilizador.

Conclusões

Um projecto da dimensão do Student’s Life é um projecto que implica longas semanas de trabalho, sobretudo para uma equipa de reduzida dimensão. Para a sua concretização [Student’s Life] foi necessário atribuir níveis de importância a cada funcionalidade na aplicação do ponto de vista de implementação técnica. Assim, e atendendo em conta o nível de complexidade da aplicação, considerámos que os resultados obtidos são satisfatórios tendo em conta os objectivos a que nos propusemos inicialmente. O projecto necessita de aperfeiçoamento em algumas áreas e, obviamente, seria interessante desenvolver as funcionalidades que, por escassez de tempo, não foram implementadas. O grupo encontra-se motivado para continuar o projecto e empenhado em conseguir alcançar um serviço realmente inovador e útil. De tal forma, é nosso objectivo lançá-lo, nesta fase como um serviço Beta, visto que a aplicação se encontra minimamente estável e, posteriormente, levar a cabo o projecto totalmente implementado, com novas funcionalidades e tecnologias.

Referências bibliográficas

• Acedido a 5 de Janeiro de 2011: http://webitect.net/coding/create-a-portfolio-client-area-using-php-and-mysql/
• Acedido a 5 de Janeiro de 2011: http://api.jquery.com/category/events/event-object/
• Acedido a 7 de Janeiro de 2011: http://translate.google.pt/translate?hl=pt-PT&sl=en&tl=pt&u=http://www.noupe.com/tools/the-importance-of-cross-browser-compatibity-tips-and-resources.html
• Acedido a 14 de Janeiro de 2011: http://www.liaad.up.pt/~jgama/Ensino/aulas_16.html
• Acedido a 14 de Janeiro de 2011: http://daltonmenezes.wordpress.com/2010/06/17/paginacao-de-resultados-com-php-e-mysql-aprenda-definitivamente-no-passo-a-passo/
• Acedido a 16 de Janeiro de 2011: http://www.htmlstaff.org/ver.php?id=19702
• Acedido a 17 de Janeiro de 2011: http://php.net/manual/pt_BR/index.php
• Acedido a 17 de Janeiro de 2011: http://pt.wikibooks.org/wiki/Aplicativos_em_PHP
• Acedido a 17 de Janeiro de 2011: http://www.marketingtechblog.com/programming/javascript-regex-emailaddress/
• Acedido a 17 de Janeiro de 2011: http://snipplr.com/view/15532/replace-de-caracteres-especiais-por-seu-equivalente-sem-acento/