guiao terrapura



2

Protótipo de alta-fidelidade Identificação do Projeto: Criação de um site: http://terrapura.info/index.php

• OBJETIVOS

Esta é a quinta entrega da unidade curricular que consiste no desenvolvimento de um

protótipo de alta-fidelidade com os seguintes objetivos:

Experimentar e testar as principais funcionalidades e a interface tipo

Testar atempadamente o uso das aplicações

Fundamentar/validar a opções tomadas na especificação técnica e na especificação

gráfica

As páginas que não foram desenvolvidas têm a indicação “under construction” - em

construção

• PROTOTIPAGEM

Funcionalidades implementadas:

Visualização da informação;

Filtragem de informação por tipologias de perfil;

Login e registo – Home page

Upload da imagem de perfil – edição do perfil do utilizador registado;

Localização das parcerias – página das parcerias;

Gerir visitas (criar novas e editar existentes) pelo parceiro;

Marcar visitas pelo utilizador registado;

Inserir comentários – perfil do parceiro e item culturas no submenu vegetais.

Rodapé com informação visível

Funcionalidades a implementar:

Preenchimento de dados do perfil do parceiro – edição do perfil do parceiro. Na nossa

proposta inicial propusemo-nos fazer a página de edição do perfil do parceiro. Contudo

como necessitávamos de fazer upload de fotos, optámos por fazer a do utilizador

registado;

Propor parceria – página das parcerias;

As funcionalidades por nós desenvolvidas estão optimizadas para o navegador Firefox.

Contudo começamos desde já a testar a aplicação no IE 8 e 9, Chrome e Safari.

http://terrapura.info/index.php



3

Podemos afirmar que cumprimos os objectivos a que nos propusemos e em alguns casos

fomos um pouco mais além, por exemplo na marcação/gestão de visitas às quintas parceiras.

Todos os conteúdos inseridos, como por exemplo texto e caminhos para imagens e vídeos,

vêm da Base de Dados.

Utilizador não registado

O utilizador não registado pode visitar as páginas implementadas para consultar e visualizar a

informação.

Não pode inserir comentários nas páginas já implementadas das quintas/perfil das quintas e

na área das culturas.

▪ Home page

Na home page pode filtrar a atividade recente com o dropdown menu onde estão os diferentes

perfis de utilizador, horta de varanda, horta urbana, horta comunitária, horta convencional e

curioso.

▪ Parcerias

Se o navegador suportar os serviços pode visualizar a sua localização atual e as quintas

parceiras mais próximas. Para esta funcionalidade recorremos ao API do Google maps e

introduzimos markers personalizados com a localização das quintas.



4

Utilizador registado

▪ Registo de utilizador

O utilizador vai poder aceder à área do seu registo em todas as páginas visitadas. Esta área

está presente no “sidebar” lateral direito. Quando o fizer essa área é expandida para exibir os

dados necessários para o registo. Na área dos conteúdos é exibido um slide-show de imagens,

recorrendo à biblioteca JQuey.

Este slide de imagens exibe os diferentes perfis disponíveis com informações relevantes de

modo a ajudar o utilizador na correta escolha do seu perfil. A escolha correta do perfil irá

posteriormente ser útil na obtenção de informação direccionada para os seus gostos e

informação exibida na aplicação. Neste slide de imagens é oferecida a possibilidade de

navegação entre as imagens apresentadas e aceder à página relacionada.

Os dados requeridos são apenas o nome, email (que funcionará como login), palavra-chave,

repetição da palavra-chave e do perfil.

Temos duas formas de validação dos dados introduzidos. Uma client-side (AJAX) e outra

server-side (PHP).



5

Durante o processo de registo é utilizado o AJAX para verificar de imediato se o login escolhido

(email) está disponível e se a parte local (antes do @) tem mais do que quatro caracteres.

Depois da submissão do formulário o PHP vai verificar se não existem erros, campos vazios,

palavra-chave repetida ou email repetido. Caso seja detetado algum erro é exibido um alert()

javascript contendo o relatório de erros, caso contrário é exibida uma mensagem de sucesso.

Depois dos dados serem introduzidos com sucesso o utilizador já pode aceder à aplicação

como utilizador registado.

▪ Login/logout

Em todas as páginas o utilizador tem a possibilidade de fazer o seu login sendo exibida uma

mensagem de erro quando algum dos dados está incorrecto. Caso não se recorde da palavra-

chave tem a possibilidade de pedir a sua recuperação, sendo enviado um email automático da

administração ([email protected]) do site para o email indicado no registo contendo a

palavra-chave. Se estiver em qualquer uma delas e efetuar o seu login permanece na mesma.

Caso efetue o logout regressa a home page porque é sinal que vai abandonar a aplicação.

O utilizador com uma sessão iniciada pode aceder através de um drop menu, para terminar

sessão, ver perfil, editar perfil e editar conta. Neste momento ele já pode editar o seu perfil,

adicionando os dados em falta e fazer o upload de uma foto do perfil.

mailto:[email protected]



6

Durante a criação do registo tentámos utilizar a função do php MKDIR com o parâmetro

recursivo true, para serem criadas automaticamente dentro da pasta do utilizador duas pastas,

uma com o ID e outra para as fotos. Depois de vários erros e contactos com a administração do

servidor fomos informados que por questões de segurança tal não era possível. Sendo assim

optámos por acrescentar no final do nome das fotos o id do utilizador. Este nome é guardado

na BD.

De forma a prevenirmos erros utilizamos a função PHP replace() que elimina do nome das

fotos, caracteres especiais por nós indicados e espaços vazios. Utilizamos outra função para

eliminar os caracteres em maiúsculas.

Temos também implementado um sistema que quando detecta que uma foto tem um nome

repetido acrescenta-lhe um número. Desta forma prevenimos erros de inserção de dados na

BD. Depois do upload da foto de perfil ela será exibida na sua área personalizada e nos

comentários que fizer.

▪ Comentários:

O utilizador registado pode fazer comentários na área do perfil das quintas e na área

das culturas, no submenu vegetais. Estão a ser exibidas pela hora de entrada e com um

limite de 10. Posteriormente será implementado um sistema para exibir todas.



7

▪ Marcação de visitas

O utilizador registado na página do perfil das quintas pode marcar visitas às quintas. Tem

acesso a um calendário por onde pode navegar estando os dias com as visitas assinalados a

uma cor diferente. Não pode ultrapassar o limite de vagas disponíveis, marcar novamente

uma visita para o qual já se encontra registado e submeter uma visita sem vagas. É efectuada

uma verificação na BD e exibida uma mensagem JS com o erro detetado. Caso a marcação seja

efectuada com sucesso é exibido a caixa de alerta respetiva.

O utilizador posteriormente vai poder atualizar as suas marcações quanto ao número de

pessoas que marcou, ou até mesmo desmarcar a visita.

Parcerias



8

No menu de parcerias, tem-se acesso aos projetos aceites.

Para escolher uma visita clica em “ver perfil” onde além de ver as atividades do parceiro e sua

produção, também tem acesso a marcar visitas.

O parceiro faz a gestão das visitas da sua quinta, disponibilizando os dias, e todas as

informações associadas. Pode também posteriormente atualizar a mesma.

Neste menu o Parceiro pode gerir as suas visitas.

▪ Marcar visitas por parte de um utilizador registado

Temos um calendário com o dia atual a negrito e os dias disponíveis para marcação da visita

sombreados a verde.



9

Quando o número de visitas atingir o limite, o dia de marcação passa de sombreado verde

para sombreado a cinzento.

Temos setas direcionais para navegar no calendário ao longo dos meses.

Ao clicar num dia pretendido, sombreado a verde, temos uma mensagem de feedback a avisar

que existem visitas disponíveis.

Ao selecionar o dia, acedemos a mais informação relativa à marcação:

Nome da visita, breve descrição da visita, horário da mesma, número de vagas disponíveis e

sua totalidade e preço unitário.

Temos também uma caixa de texto do tipo numérico, onde vamos marcar o número de

visitantes clicando no botão “Enviar pedido”. Abre uma janela de pop-up com feedback de

marcação com sucesso.

Não é possível marcar nova visita para o mesmo dia, pelo que ao tentar marcar te mos uma

janela de pop-up com a mensagem: “Este utilizador já tinha marcado esta visita”.

▪ Gerir visitas por parte do parceiro

Um dado parceiro, entra no seu próprio perfil de parceiro, acede à sua quinta em “Ver perfil” e

ao visualizar o menu contendo os 4 links mencionados no item anterior vai escolher “Gerir

visitas”.

Aparece o mesmo calendário do item anterior, mas com funcionalidades diferentes.



10

Caso pretenda editar dados relativos a um dia já marcado, deve clicar nesse dia e alterar o que

for necessário. A visita que estiver a ser editada passara no calendário de verde para amarelo.

Tem também a possibilidade de verde para amarelo. alizar as vagas reservadas que estarão no

estado de espera. Pode aceitar e reservar as mesmas.

▪ Para criar uma nova visita deve:

Escolher um dia sem marcação;

Dar um nome significativo à visita;

Fazer uma breve descrição da visita;

Escolher o horário: hora inicial e final (ex: 14h – 16h): vamos ter um feedback sobre o

formato que tem de ser utilizado (tag html “title”)

Escolher o nº máximo de visitas para este dia; à semelhança do ponto anterior, temos o

feedback do formato.

Informar sobre o preço;

Ativar a visita;

Dia e hora inicial/final – o campo data é colocado automaticamente. A hora é inserida

manualmente.

Quando for editada a visita criada, os campos encontraram-se devidamente preenchidos.



11

Visita editável

Visita atual

Campos inseridos automaticamente

Visitas reservadas



12

guiao terrapura

Documents