Guiao terrapura


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.

2


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.

3


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).

4


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 (admin@terrapura.info) 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.

5


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.

6


▪ 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

7


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.

8


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.

9


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.

10


Visita editável

Visita atual

Campos inseridos
automaticamente

Visitas reservadas

11


12

Guiao terrapura

Recommended

Recommended

More Related Content

Similar to Guiao terrapura

Similar to Guiao terrapura (20)

More from Liliana Almeida

More from Liliana Almeida (6)

Guiao terrapura