Beretro
From Laboratório MM 5
| Line 106: | Line 106: | ||
=== 4. Desenvolvimentos Futuros === | === 4. Desenvolvimentos Futuros === | ||
| + | |||
| + | No que diz respeito a desenvolvimentos futuros, o grupo gostaria de alcançar todos os objectivos, definidos no primeiro instante. Desse modo, pretendia-se ver implementado as restantes funcionalidades que não se encontram disponíveis, tais como a wishlist, ....................... | ||
---- | ---- | ||
=== 5. Conclusões === | === 5. Conclusões === | ||
| + | A implementação da plataforma beRetro, permitiu ao grupo, perceber a dimensão e a envolvente de uma aplicação web 2.0. Na realidade, é não é um processo muito fácil e exige uma grande dedicação por parte de todos os elementos que constituem a equipa, para que os resultados sejam satisfatórios e o objetivos atingidos. | ||
| + | Com o desenvolvimento deste projeto, o grupo pôde pôr em prática e desenvolver os conhecimentos adquiridos ao longo do semestre, na unidade curricular de Laboratório Multimédia 5, enriquecendo assim a sua experiência no que diz respeito a esta temática da web, caracterizando-se num universo amplo, bastante competitivo e onde a inovação é já uma particularidade bastante difícil de se conseguir, mas que consegue fazer toda a diferença entre os utilizadores de todo o mundo. | ||
| + | |||
---- | ---- | ||
=== 6. Referências Bibliográficas === | === 6. Referências Bibliográficas === | ||
| + | • http://php.net/ | ||
| + | • http://jquery.com/ | ||
| + | • http://www.portalphp.org/artigos/seguranca-no-php-sql-injection | ||
| + | • http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ | ||
| + | • http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/ | ||
| + | |||
---- | ---- | ||
Revision as of 03:49, 19 January 2012
- Bruno Garcia - 50098
- Catarina Braga - 49553
- Filipe Mendes - 49396
Contents |
1. Introdução
Este trabalho, realizado no âmbito da disciplina de Laboratório Multimédia 5, com a colaboração da unidade curricular de Implementação e Controlo de Projetos Multimédia, visa a implementação de um sítio dinâmico para a Web que explore a temática da web 2.0 e que integre informação armazenada em bases de dados, sistema de gestão de conteúdos e ainda autenticação de utilizadores com diferentes níveis de acesso.
1.1 Objectivo do documento
O presente documento tem como principal objectivo relatar todo o processo de desenvolvimento, levado a cabo pelo grupo, na implementação do projeto proposto nesta unidade curricular, utilizando as tecnologias leccionadas. São então apresentados os procedimentos de construção da base de dados e de implementação, explicando os Server Behaviours, os Recordsets e Queries utilizados, assim como a integração com outras tecnologias. Este documento termina com a manifestação de alguns objectivos para desenvolvimentos futuros deste projeto.
1.2. Visão geral do projeto
Com vista à implementação do conceito da web 2.0, focado na dinâmica da interação do utilizador com a estrutura e conteúdo de uma página, surgiram algumas ideias, num processo de brainstorming, das quais o grupo elegeu a que apresentava maior potencial para desenvolver. Assim, o projeto baseia-se numa comunidade de fãns e colecionadores de produtos Retro, que possibilita, os seus integrantes, trocarem e venderem este género de objetos entre si. Oferece também a possibilidade aos seus utilizadores de adquirirem produtos referentes ao Merchandising associados a esta Retro Community/Store. Ligado a este conceito, apresentamos uma interface apelativa e, caracterizada pela temática Retro/Vintage, e que permite aos seus utilizadores a navegação num ambiente de pertença à comunidade na qual se inserem.
2. Base de dados desenvolvida
3. Implementação
No presente tópico é apresentado o desenvolvimento associado à implementação das funcionalidades existentes na nossa página web, de acordo com as diferentes tecnologias utilizadas.
3.1. Descrição das principais funcionalidades da aplicação Web
A aplicação web, por nós desenvolvida, apresenta funcionalidades ao nível de diferentes áreas, nomeadamente do registo, login, página utilizador, página de produto, troca e venda dos mesmos, merchandising, pesquisa e sistema de troca de mensagens. Deste modo, o utilizador pode registar-se como membro desta Retro Comunity/Store e posteriormente efetuar o login, acedendo à sua página pessoal, onde pode editar/adicionar as suas informações, trocar mensagens com outros utilizadores, editar/adicionar produtos que pretenda trocar/vender com os membros da comunidade na qual incorporou. Após o login, o utilizador, pode igualmente, ter acesso aos produtos dos outros utilizadores, exibindo a sua opinião através de “Likes” e Comentários, bem como mostrar o seu interesse em adquirir o produto, através da possibilidade de fazer propostas ao detentor desse mesmo produto, consoante a tipologia de transação pretendida pelo mesmo. O utilizador pode ainda comprar produtos alusivos ao merchandising, adicionando-os a uma lista de compras. É-lhe também permitido efetuar pesquisas relativas a qualquer elemento desta página.
3.2. Mapa de páginas
Ao entrar na página web “beRetro”, o utilizador acede diretamente à Página Inicial. Nesta, encontra uma área com “Produtos Recentemente Adicionados” e uma pequena alusão à forma como estes podem ser partilhados entre os diferentes utilizadores, nomeadamente através de “Venda/Compra”, “Troca” e ainda “Troca e Venda”. Esta página inclui também, uma zona de navegação que lhe permite aceder a outras, tais como, “Produtos”, “Merchandising”, “Help”, “Sobre” e ainda “Pesquisa”. A Página “Produtos” expõe todos os produtos adicionados pelos diversos membros desta comunidade, sendo esta visualização facilitada através da zona de filtragem existente no início da mesma. Cada um dos produtos, pode ser visualizado ao pormenor, através da página “produtos_detalhe”. A Página “Merchandisig” exibe todos os produtos relacionados com a marca beRetro. Tal como em Produtos, esta possui uma zona de filtragem, assim como a possibilidade de visualização particularizada do produto através da página “merchandising_detalhe”. A Página “Help” ajuda o utilizador a compreender o funcionamento do site, de acordo com as respostas a algumas questões frequentes. A Página “Sobre” apresenta o conceito da nossa “Retro Comunity/Store”. A Página “Pesquisa” apresenta os resultados relacionados com a pesquisa efectuada pelo utilizador, no espaço definido na barra de navegação. Em todas as página de beRetro, o utilizador pode proceder ao seu registo, a partir do “Ribbon Central” que se encontra no topo central da página, o que o possibilita ter uma “Página Pessoal”, e após o login poder fazer “Comentários”, “Likes” e “Propostas” aos diversos produtos de outros utilizadores. A partir da Página Pessoal, o utilizador pode ter acesso a outras quatro páginas: “Dados Pessoais”, onde os pode editar/adicionar; “Notificações” que apresenta avisos relativos a comentários, likes e propostas que tenha recebido; “Mensagens” onde pode falar diretamente com os membros da comunidade e ainda “Meus Produtos” onde se encontram os seus produtos. Aqui pode ter acesso a outras duas páginas. Caso este queira ver/editar as informações referentes a cada um deles, deve encaminhar-se a “Ver Produto”. Caso pretenda adicionar novos, deve ir a “Novo Produto”.
3.2.1. Server Behaviours utilizados
Neste tópico são mencionados os server behaviours usados na nossa plataforma web, de acordo com a nomenclatura de implementação automática do Dreamweaver. No entanto, nenhuma das funcionalidades existentes foi executada com a ajuda destes mecanismos, uma vez que toda a programação é “hand made”. A seguinte lista enuncia alguns dos server behaviours implementados. Insert Record – behaviour que permite inserir dados na Base Dados, como por exemplo, informações relativas aos nossos produtos. Update Record – behaviour que permite atualizar dados existentes na Base de Dados, como por exemplo, alterar as informações pessoais dos utilizadores. Dynamic Text – behaviour que permite mostrar os dados armazenados na Base de Dados. Dynamic Text Field – behaviour que permite a introdução de dados a partir dos formulários existentes, que são dinamicamente armazenados na Base de Dados. Repeat Region – behaviour que permite reutilizar porções de código de forma a repetir determinadas ações, tais como a apresentação de comentários, produtos, propostas, entre outros. Show if Recordset is Empty – behaviour que permite a apresentação de avisos aos utilizadores, em situações como por exemplo a ausência de produtos na sua página pessoal. Restrict Access To Page – behaviour que permite tornar o acesso restrito a determinados utilizadores, como por exemplo a disposição a uma página pessoal mediante o registo do utilizador. - Display Record Count – behaviour que permite mostrar apenas um certo número de elementos, provenientes de um total, existente na Base de Dados. - Display Total Records – behaviour que permite mostrar o total de dados existentes na Base de Dados, relativos aos parâmetros definidos pela Query. - User Authentication – behaviour que permite o registo, login, logout e as condições associadas de verificação.
3.2.2. Recordsets/Queries utilizados
De forma a permitir o acesso à Base de Dados, foram invocadas algumas Queries que possibilitam a seleção, inserção e manipulação dos dados existentes dinamicamente na plataforma. Assim, seguidamente, são enunciados alguns exemplos de Queries, bem como referenciado a sua finalidade. - "SELECT * FROM user WHERE username = '%s'", $user_name Seleciona toda a informação respectiva a um utilizador, por exemplo nome, data de nascimento, email, entre outros.
- INSERT INTO produto (produto_nome, produto_descricao, tipo_produto, categoria_id, data_publicacao, produto_estado, user_id, produto_preco, produto_imagem, quantidade) VALUES ('%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s')" utf8_decode($_POST['prod-nome']), utf8_decode($_POST['prod-descricao']), utf8_decode($_POST['prod-tipo']), utf8_decode($_POST['prod-categoria']), utf8_decode($_POST['prod-data']), utf8_decode(1), utf8_decode($_SESSION['user_id']), utf8_decode($_POST['prod-preco']), utf8_decode($produto_imagem), utf8_decode($_POST['prod-unidades']))
São inseridos na tabela produtos, os valores preenchidos no formulário, respectivos aos campos onde estes serão introduzidos.
- "UPDATE user SET password='%s' WHERE id_user='%s'", utf8_decode($_POST['password_nova']), utf8_decode($row_user['id_user']));
Na tabela “user” é atualizado o valor da password, onde o “id_user” corresponde a ($row_user['id_user'].
- "DELETE FROM comentario WHERE id_comentario = '%s'", utf8_decode($_GET['eliminarcomentario']));
Na tabela “comentário” são eliminados todos os valores das colunas respectivas ao “id_comentário” = “$_GET['eliminarcomentario']”.
3.2.3 Parâmetros passados entre páginas
A passagem de parâmetros entre as diferentes páginas foi realizada a partir de três métodos distintos: “POST” e “GET”, associados à passagem de valores por url, e ainda através de “Session” que permite preservar dados ao longo de acessos continuados por um utilizador ao site. Por exemplo, o método “GET” foi utilizado na passagem de valores entre as páginas “meus_produtos” e “produtos_detalhes”; o método “POST” foi usado na passagem de valores referentes à inserção de dados do utilizador, do formulário “form-registo” para a base de dados. O método “Session” permite mostrar a página do utilizador consoante o reconhecimento do mesmo através do login.
3.3 Integração (e.g. Flash, AJAX Frameworks, etc)
De forma a melhorar a experiência de utilização da plataforma, foi usado CSS3 e jQuery, uma framework de JavaScript. Relativamente ao CSS3, foram utilizadas propriedades ao nível das transições, múltiplas imagens de fundo, opacidade, sombras, entre outros, tal como é apresentado nos exemplos que se seguem: Transitions: “ transition: all 0.7s ease 0s; ” Multiple Backgrounds: “ background: url(../images/box_top_dot.jpg) left 5px repeat-x, url(../images/box_bottom_dot.jpg) repeat-x bottom left, url(../images/body_bg.jpg) left top repeat; ” Border-radius: “ -moz-border-radius: 5px; ” Text-Shadow: “ text-shadow: 0px 0px 5px #000; ” RGBA Colors: “ background: rgba(51,51,51, 0.0); ” Opacity: “opacity: 1; ” No que diz respeito ao jQuery, o grupo utilizou esta framework para a validação de formulários do lado do cliente, como complemento à validação do lado do servidor. Esta tecnologia foi igualmente usado para assegurar o bom funcionamento do “Ribbon Central”, na medida em que, durante o processo de login, este se mantém na posição correta, não desaparecendo do ecrã, aquando a saída do rato. O seguinte código mostra a implementação desta particularidade.
“ $('#username').focus(function() {
$("#header-top").addClass("header-open");
}); $('#username').focusout(function () {
$("#header-top").removeClass("header-open");
}); ”
4. Desenvolvimentos Futuros
No que diz respeito a desenvolvimentos futuros, o grupo gostaria de alcançar todos os objectivos, definidos no primeiro instante. Desse modo, pretendia-se ver implementado as restantes funcionalidades que não se encontram disponíveis, tais como a wishlist, .......................
5. Conclusões
A implementação da plataforma beRetro, permitiu ao grupo, perceber a dimensão e a envolvente de uma aplicação web 2.0. Na realidade, é não é um processo muito fácil e exige uma grande dedicação por parte de todos os elementos que constituem a equipa, para que os resultados sejam satisfatórios e o objetivos atingidos. Com o desenvolvimento deste projeto, o grupo pôde pôr em prática e desenvolver os conhecimentos adquiridos ao longo do semestre, na unidade curricular de Laboratório Multimédia 5, enriquecendo assim a sua experiência no que diz respeito a esta temática da web, caracterizando-se num universo amplo, bastante competitivo e onde a inovação é já uma particularidade bastante difícil de se conseguir, mas que consegue fazer toda a diferença entre os utilizadores de todo o mundo.
6. Referências Bibliográficas
• http://php.net/ • http://jquery.com/ • http://www.portalphp.org/artigos/seguranca-no-php-sql-injection • http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ • http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/
