terra pura guião
TRANSCRIPT
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
1
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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).
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
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.
UA.DeCA.NTC.2011-2012
| Carla Taveira 47065 | Liliana Almeida 49905 | Francisco Silva 51054 | Sílvio Dias 51068 |
11
Visita editável
Visita atual
Campos inseridos automaticamente
Visitas reservadas