2. Especificação Gráfica e Técnica
Universidade de Aveiro, 2011/2012
Unidade curricular: Projeto | NTC | DeCA
Orientadora: Ana Carla Amaro
Docentes: Benjamim Júnior | Hélder Caixinha | Ivo Fonseca | Pedro Amado
Nome: terraPURA
"Nenhuma atividade humana, mesmo a medicina,
tem maior importância para a saúde do que a agricultura"
Delbert, 1942
Autores
Carla Taveira 47065
Liliana Almeida 49905
Francisco Silva 51054
Sílvio Dias 51068
2
3. Conteúdo
Índice de ilustrações...................................................................................................................... 4
1. Introdução ............................................................................................................................. 6
1.1. Conceito ............................................................................................................................ 6
1.2. Escolha do nome (naming) ................................................................................................ 7
1.3. Objetivos da especificação gráfica e técnica ..................................................................... 8
1.3.1. Especificação gráfica ..................................................................................................... 9
1.3.2. Especificação técnica ..................................................................................................... 9
2. Especificação gráfica ............................................................................................................. 9
2.1. Estudo gráfico.................................................................................................................... 9
2.1.1. Logomarca ..................................................................................................................... 9
2.1.2. Escala do logótipo ....................................................................................................... 11
2.1.3. Área de Proteção ......................................................................................................... 12
2.1.4. Estudos tipográficos .................................................................................................... 12
2.1.5. Hierarquia tipográfica Online ...................................................................................... 13
2.1.6. Estudo cromático ........................................................................................................ 14
2.2. Estudos de grelha ............................................................................................................ 15
2.3. Composição de ecrãs únicos e Estudos de interfaces ..................................................... 15
2.4. Estudo de ícones e botões .............................................................................................. 29
3. Especificação técnica........................................................................................................... 31
3.1. Modelo/Arquitetura do Sistema ..................................................................................... 31
3.2. Mapas de navegação ....................................................................................................... 35
3.3. Fluxogramas detalhados ................................................................................................. 42
3.4. Modelo de Base de dados ............................................................................................... 50
4. Bibliografia .......................................................................................................................... 53
5. Anexos ................................................................................................................................. 54
Anexo 3 - Fundamentação teórica estudada .............................................................................. 56
Anexo 4 - Resultados do inquérito ............................................................................................. 58
3
4. Índice de ilustrações
Ilustração 1 - Logotipo final ......................................................................................................... 10
Ilustração 2- Estudos de grelha ................................................................................................... 11
Ilustração 3 - Escalas do logotipo ................................................................................................ 11
Ilustração 4 - Área de proteção ................................................................................................... 12
Ilustração 7 Fonte Tahoma regular e Bold .................................................................................. 13
Ilustração 5 Fonte HelveticaNeue LT 65 Medium ....................................................................... 13
Ilustração 6 Fonte HelveticaNeue LT 35 Thin .............................................................................. 13
Ilustração 8 Esquema cromático utilizado .................................................................................. 14
Ilustração 9 Grelha 16 colunas do sistema 960 Grid ................................................................... 15
Ilustração 10 Grelha horizontal ................................................................................................... 15
Ilustração 11 Grelha Base (1) ...................................................................................................... 16
Ilustração 12 Grelha Base (2) ...................................................................................................... 16
Ilustração 13 Grelha base (3) ...................................................................................................... 17
Ilustração 14 Grelha Home Page (sem registo ou sessão iniciada) ............................................. 17
Ilustração 15 Simulação Home Page (sem registo ou sessão iniciada) ....................................... 18
Ilustração 16 Grelha página Agricultura Biológica ...................................................................... 18
Ilustração 17 Simulação página Agricultura Biológica ................................................................ 19
Ilustração 18 Grelha página Tipo Árvores de Fruto .................................................................... 19
Ilustração 19 Simulação página Tipo Árvores de Fruto ............................................................... 20
Ilustração 20 Home Page inicial .................................................................................................. 20
Ilustração 21 Home Page Sessão Iniciada ................................................................................... 21
Ilustração 22 Página de registo ................................................................................................... 22
Ilustração 23 Página Agricultura Biológica (Horta Urbana) ........................................................ 23
Ilustração 24 Página Culturas (Árvores de Fruto) ....................................................................... 24
Ilustração 25 Página Árvores de Fruto (Laranjeira) ..................................................................... 25
Ilustração 26 Página Parcerias .................................................................................................... 26
Ilustração 27 Perfil de uma Parceria ........................................................................................... 27
Ilustração 28 Página Mural de dúvidas ....................................................................................... 28
Ilustração 29 Interação com o menu .......................................................................................... 29
Ilustração 30 Interação com os botões ....................................................................................... 29
Ilustração 31 Icons....................................................................................................................... 30
Ilustração 32 – Mapa/Arquitetura do sistema ............................................................................ 31
Ilustração 33 – Mapa de navegação para o utilizador não registados ........................................ 36
Ilustração 34 - Mapa de navegação para o utilizador registado comum .................................... 37
Ilustração 35 - Mapa de navegação para o utilizador registado parceiro ................................... 38
Ilustração 36 - Mapa de navegação para o Administrador ......................................................... 39
Ilustração 37 - Mapa fluxo informação ....................................................................................... 40
Ilustração 38 - Fluxograma login/registo .................................................................................... 42
Ilustração 39 - Fluxograma recuperar password ......................................................................... 43
Ilustração 40 - Fluxograma editar perfil ...................................................................................... 44
Ilustração 41 - Fluxograma inserir conteúdos ............................................................................. 45
Ilustração 42 - Fluxograma dos Parceiros ................................................................................... 46
4
5. Ilustração 43 - Fluxograma inserir comentário ........................................................................... 47
Ilustração 44 - Fluxograma mural/fórum .................................................................................... 48
Ilustração 45 Fluxograma pedir amizade / eliminar amigo ......................................................... 49
Ilustração 46 Base Dados ............................................................................................................ 52
Ilustração 47 - Instituto Nacional de Propriedade Industrial – Pesquisa marca ......................... 55
Ilustração 48 - DomainTool, pesquisa internacional de domínios. ............................................. 55
lustração 49 - Inquérito parte 1 .................................................................................................. 58
Ilustração 50 - Inquérito parte 2 ................................................................................................. 59
Ilustração 51 - Inquérito parte 3 ................................................................................................. 60
Ilustração 52 - Resultados do inquérito para escolha do nome ................................................. 62
Ilustração 53 - Total dos inquiridos ............................................................................................. 62
Ilustração 54 - Grupo etário ........................................................................................................ 63
Ilustração 55 – Habilitações ........................................................................................................ 63
Ilustração 56 - Zona de residência .............................................................................................. 64
Ilustração 57 - Fontes consultadas pelos utilizadores................................................................. 64
Ilustração 58 - Local visitado para esclarecer dúvidas ................................................................ 65
Ilustração 59 - Grau de satisfação com as pesquisas .................................................................. 65
Ilustração 60 - Disposição para visitar parceiros ......................................................................... 66
Ilustração 61 - Disposição para cultivar terrenos ........................................................................ 66
Ilustração 62 - Disposição para partilha de experiências ............................................................ 67
Ilustração 63 - Maiores problemas encontrados no cultivo ....................................................... 67
5
6. 1. Introdução
1.1. Conceito
O conceito geral do trabalho em elaboração é o despertar para o cultivo de produtos de
natureza biológica, seja no meio rural, mas também em meio urbano, meio este onde cada vez
mais existe o despertar para atividades de bem-estar pessoal. As pessoas estão cada vez mais
atentas ao tema “saúde e bem-estar”, daí o produto biológico estar em voga e ser apelativo.
É um projeto bastante motivador pela sua utilidade para qualquer cidadão, nomeadamente
em espaços urbanos, tema onde existem algumas lacunas.
Pretendemos despertar o interesse pelo cultivo em varandas e terraços em espaços urbanos,
embora tenhamos parcerias com quintas em espaço rural.
De há uns anos a esta data existe uma crescente preocupação com a alimentação,
nomeadamente produtos “carregados” de antioxidantes, corantes, emulsionantes,
conservantes e tantos outros aditivos que em grande quantidade nos fazem mal à saúde.
Grande quantidade? Sim, pois quase tudo o que ingerimos tem um ou outro destes produtos,
ou até mesmo dois ou três deles.
A cultura biológica pressupõe o cultivo sem a ajuda de fertilizantes com substâncias químicas
(pesticidas, herbicidas ou fertilizantes). Assim, os agricultores deverão utilizar fertilizantes
naturais, como por exemplo excrementos orgânicos, rochas que contenham minerais ou
compostagem (processo natural onde ocorre a decomposição biológica, através da atividade
de micro-organismos, dos resíduos orgânicos como o estrume, restos de comida e folhagens).
É preciso alterar os hábitos alimentares e ganhar entusiasmo pelo cultivo dos nossos produtos:
ver a planta a crescer, ver o fruto desabrochar, comer algo produzido por nós mesmo e que
sabemos ser saudável: o que poderia ser melhor?
“Principio da Ecologia:
A Agricultura Biológica deverá se basear nos sistemas ecológicos vivos e seus ciclos,
trabalhando com eles, imitando-os e contribuindo para a sua sustentabilidade.”
Retirado de http://www.ifoam.org/about_ifoam/pdfs/POA_folder_portugese.pdf
Para nos ajudar a identificar melhor o nosso público-alvo, quais as suas reais espectativas, na
definição do novo nome do site, conteúdos que devem ser inseridos, futuras evoluções e
6
7. identificação de funcionalidades, o nosso grupo efetuou um inquérito a 24 pessoas,
maioritariamente residentes em meio urbano. O mesmo já nos ajudou a definir melhor os
conteúdos, a navegação, as suas espectativas, problemas encontrados e justificação de
algumas das nossas funcionalidades implementadas, nomeadamente marcação de visitas,
reserva de terrenos para cultivo on-line e se estão disponíveis para partilhar as suas opiniões
no site.
1.2. Escolha do nome (naming)
A escolha de um nome em qualquer projeto na vida é de crucial importância: é ele que vai
identificar o seu destinatário, seja ele um ser humano, um serviço ou um produto.
O nosso nome inicial para o site era em inglês backTobasic. Esta denominação foi logo por nós
aceite porque nos remetia para o tema em questão e para o processo de regresso as nossas
origens primordiais. Foi criado um domínio com este nome http://backtobasics.com.pt.
Contudo depois de analisar mais detalhadamente o público-alvo, observamos que os assuntos
abordados eram essencialmente dirigidos para Portugal. Esta questão foi abordada com a
nossa Orientadora e Professores de Projeto. Foi então decidido mudar o nome para o nosso
idioma. O mesmo deveria transmitir informações que remetem-se para a agricultura e para o
estado puro dos elementos (terra, ar, água e fogo).
Queríamos atingir o inconsciente coletivo, esta nossa ligação que temos à mãe terra mas que
fruto da urbanidade está esquecido mas sempre pronto a renascer. Cada vez mais está a
nascer um sentimento por parte das pessoas de reatarem esta ligação à terra. Uma das formas
que encontraram para o fazer foi iniciar o cultivo de terrenos em locais improvisados como
varandas, terrenos urbanos ou partilharem hortas comunitárias, sendo este o público-alvo que
queremos atingir.
Ideias propostas para a escolha final:
backTobasics, naTerra, planeTar, planeNet, AgriPensar, naHorta, bioRenascida, mãosÀhorta,
terraPura, micróbio, Natureza Urbana, AgriPlanta.
Após um brainstorming de ideias diversas, algumas propostas pelos docentes/orientadora, e
com base no nosso inquérito chegámos à escolha do nome terraPURA.
7
8. Foi efetuado um estudo para verificar já estava registado (IPPI, foto em anexo) para alguma
marca e se existia algum site com este nome a nível global (domaintools, foto em anexo),
sendo o resultado negativo.
Um bom nome para um qualquer produto/serviço, seja ele um objeto, um site ou até mesmo
uma empresa comercial, deve ser único (distinto), não deve ser cansativo (exaustivo), deve ser
intemporal (prolongar-se no tempo, ser sempre atual) e deve ter ritmo (de fácil pronuncia).
Deve ter significado relativamente ao produto a que se destina, pois este se for bem adequado
ajuda na sua boa promoção. Um nome adequado vende-se a si mesmo.
O visual deve ser agradável, sem pormenores exagerados: deve ser de fácil memorização, para
que possa ser transmitido no dia-a-dia, dia após dia.
“A utilização de maiúsculas e minúsculas sempre foi uma discussão entre tipógrafos.
Em 1925, a Bauhaus aboliu oficialmente o uso de maiúsculas, considerando que tal atitude
poupava tempo e eliminava um alfabeto (maiúsculas) desnecessário (por cumprir a mesma
função).
Piet Zwart e Willem Sandberg adoptaram a proposta da Bauhaus em abolir as maiúsculas
No entanto já em 1960, uma investigação havia provado que todo texto que começa com
maiúsculas tem maior legibilidade.”
in Design Gráfico II – Escola Superior de Artes Aplicadas (IPCB)
1.3. Objetivos da especificação gráfica e técnica
O objetivo da especificação gráfica e técnica consiste em reunir um conjunto de
informações mais detalhadas de forma a aprofundar e fechar decisões para a futura
implementação. Desta forma foram efetuados estudos intensos e profundos de nomes para o
site, logotipo, estudos de grelha, de paletes de cores, dos ecrãs principais, arquitetura do
sistema, mapas de navegação e base dados. Tudo deve formar um todo coerente e
harmonioso. Esta coerência gráfica e técnica não foi logo alcançada mas pensamos que com
ajuda da nossa Orientadora e dos Professores demos passos importantes na sua realização.
8
9. 1.3.1. Especificação gráfica
A nossa especificação gráfica vai permitir criar a identidade visual e imagem de marca do
nosso site. Este projeto exige que todos os conhecimentos teórico-práticos recebidos neste
curso sejam colocados em prática, imagem digital estática, comunicação institucional,
publicidade e marketing, ergonomia e ergonomia de sistemas, entre outros. Tudo o que é
imagem gráfica comunica sentimentos e está impregnado de significado. Por esta razão todos
os conteúdos devem ser bem pensados e bem executados para transmitir o verdadeiro
significado. Foi por esta razão que a nossa escolha de nome foi um processo muito difícil mas
necessário.
O nosso site vai chamar-se “terra pura”, por isso o nosso grafismo vai transmitir dois tipos
de sentimentos, podemos até falar na dualidade cósmica, o Yin e o Yang. A terra visa remeter
os utilizadores para a sua origem a mãe terra e criar logo o sentimento de afetividade. A
pureza remete para o carácter original em que a terra não tinha problemas de poluição, os
produtos biológicos não tinham químicos e eram criados naturalmente.
1.3.2. Especificação técnica
No seguimento do nosso estudo da viabilidade técnica, na demostração de algumas das
suas funcionalidades na demo técnica surge por fim a altura de definir com mais exatidão as
suas especificações. É desta forma que surge a especificação técnica que vai permitir
caraterizar melhor o nosso sistema, definir quais são as suas caraterísticas e que
funcionalidades que vão ser implementadas.
2. Especificação gráfica
2.1. Estudo gráfico
2.1.1. Logomarca
“Vamos começar pelo motivo. O desejo do homem de reivindicar a posse é inerente. É pessoal
se é um resultado de orgulho, ganância, ou esperança de imortalidade. Marcamos os nossos
nomes em desenhos infantis. Desenvolvemos uma assinatura única para cada um de nós, para
9
10. proteger a nossa identidade. Nós esculpir iniciais em troncos de árvores com um coração, na
esperança de fazer uma união permanente. O logótipo é uma extensão desses actos. Redefine
esses motivos do indivíduo para o colectivo.”
in Logo Design Workbook - ADAMS MORIOKA
Resultado final
Ilustração 1 - Logotipo final
Alguns estudos:
Estudos de grelha:
10
11. Ilustração 2- Estudos de grelha
2.1.2.Escala do logótipo
O tamanho mínimo da logomarca deve considerar o símbolo e o nome como no exemplo. Para
garantir visibilidade e impacto na reprodução da marca, nunca deve ser representado num
tamanho inferior a 25%.
Ilustração 3 - Escalas do logotipo
11
12. 2.1.3. Área de Proteção
Como representado nas imagens seguintes, o espaço vazio à volta da marca serve para lhe
conferir proteção, e para aumentar a sua visibilidade. O quadrado em branco colocado por
cima do texto define o espaço livre mínimo.
Através da altura do elemento
Ilustração 4 - Área de proteção
2.1.4. Estudos tipográficos
A tipografia utilizada na marca terraPURA contempla duas tipologias da fonte Helvetica,
nomeadamente HelveticaNeue LT 65 Medium, a 62 px, para a palavra terra e HelveticaNeue LT
35 Thin, a 45 px, para a palavra PURA. É uma fonte tipográfica sem-serifa e é considerada uma
12
13. das fontes mais bem sucedidas e populares do mundo. Foi criada pelos designers Max
Miedinger e Eduard Hoffmann, em 1957. É uma fonte associada ao modernismo.
terra
PURA
Ilustração 5 Fonte HelveticaNeue LT 65 Medium Ilustração 6 Fonte HelveticaNeue LT 35 Thin
No site a fonte utilizada é a Tahoma. Esta fonte é de uma família tipográfica sem -serifa
desenhada por Matthew Carter. Tem boa legibilidade e é considerada uma excelente fonte
tipográfica para a leitura em monitores, uma vez que foi concebida para uma utilização na
web.
Ilustração 7 Fonte Tahoma regular e Bold
2.1.5. Hierarquia tipográfica Online
Como já foi referido, utilizamos a fonte Tahoma em todo o site. Este apresenta a seguinte
hierarquia tipográfica:
13
14. Menu bold, 14 px.
Dropmenu regular, 12 px. Espaçamento entre texto
Títulos regular, 18 px.
Subtítulos regular, 16 px. 20 px
Texto regular, 12 px.
Outros textos regular, 10 px.
Botões bold, 12px.
2.1.6. Estudo cromático
“A cor é subjetiva. Existem conexões emocionais das cores de pessoa para pessoa. Em
relação ao design do logótipo, a cor é parte integrante de valor mnemónico, ela também
transmite o tom de uma empresa, embora determinadas cores tenham significados aceites na
cultura europeia ocidental, em outras culturas existem múltiplos significados.”
in Logo Design Workbook - ADAMS MORIOKA
Ilustração 8 Esquema cromático utilizado
Tonalidades de verde - O verde foi escolhido devido a esta conexão e forte afinidade com a
natureza e o meio ambiente. Palavras chave: Natureza, crescimento, fertilidade, frescura
14
15. VERDE: RGB - 140,198,63 CMYK - 50,0,100,0
Tonalidades de castanho – O castanho acompanha a ideia da cor verde, a natureza, o solo, a
cor de terra, o campo. Palavras chave: Terra, fertilidade, estabilidade
CASTANHO: RGB – 60,36,21 CMYK - 50,70,80,70
2.2. Estudos de grelha
Para a construção da grelha, utilizamos um modelo de 12 colunas do sistema 960 Grid.
Este sistema permite-nos tirar partido da sua divisão estruturada de colunas, facilitando a
disposição e organização. Sendo assim a página terá largura total de 960 px. Para cada coluna
temos disponíveis 60 px com goteiras a 10 px.
Ilustração 9 Grelha 16 colunas do sistema 960 Grid
Relativamente à grelha horizontal usamos distâncias de
10 px e 20 px.
Esta estrutura permitirá também que à introdução de
novos conteúdos, todos fiquem alinhados, pois todo o texto
e imagens têm um tamanho definido que os posicionará
alinhados horizontalmente.
Ilustração 10 Grelha horizontal
2.3. Composição de ecrãs únicos e Estudos de interfaces
Para conferir ao site coerência decidimos fazer uma estrutura base que se vai repetir em
todas as páginas do mesmo. Esta estrutura vai conter uma área no topo disponível para o
header (aqui serão exibidos o logótipo, o menu e uma imagem característica do projeto) e
15
16. outra no fim da página para o footer (exibição de informações sobre os autores, contactos e
acesso a páginas como as FAQ, termos de utilização e mapa do site). O conteúdo estará
dividido em duas colunas, uma para a informação relativa ao utilizador com a sessão iniciada
(direita) ou no caso de não ter registo ou início de sessão efetuado o modo como é possível
estas funcionalidades (formulários). Na coluna da esquerda estará todo o conteúdo restante.
Ilustração 11 Grelha Base (1)
Ilustração 12 Grelha Base (2)
16
17. Ilustração 13 Grelha base (3)
Serão apresentados de seguida os ecrãs com diferentes tipos de divisão de conteúdo
Home Page sem registo ou início de sessão efetuado:
Ilustração 14 Grelha Home Page (sem registo ou sessão iniciada)
17
18. Ilustração 15 Simulação Home Page (sem registo ou sessão iniciada)
Página Agricultura Biológica:
Ilustração 16 Grelha página Agricultura Biológica
18
19. Ilustração 17 Simulação página Agricultura Biológica
Página Tipo de Árvore de fruto:
Ilustração 18 Grelha página Tipo Árvores de Fruto
19
20. Ilustração 19 Simulação página Tipo Árvores de Fruto
Últimos estudos de layouts
Home Page
Ilustração 20 Home Page inicial
20
29. 2.4. Estudo de ícones e botões
O menu existente no início das páginas encontra-se em fundo verde com o texto a branco.
Ao passar o rato por cima o texto passa a castanho (utilizado também nos títulos principais).
No caso do separador Agricultura Biológica e Culturas abre um dropmenu onde se passa o
mesmo que foi referido para o resto do menu, o texto de cor branco passa a castanho.
Ilustração 29 Interação com o menu
Em relação aos botões que estarão presentes nas páginas, estes seguem a linha gráfica do
exemplo que mostramos a seguir.
Ilustração 30 Interação com os botões
29
31. 3. Especificação técnica
3.1. Modelo/Arquitetura do Sistema
Ilustração 32 – Mapa/Arquitetura do sistema
31
32. Servidor externo: http://backtobasics.com.pt/
Client-Side | Server-Side – Articulação
Ligação física: A ligação física à internet é efetuada através de uma placa de rede que é
utilizada para a transferência de sinais entre o nosso computador e os dispositivos remotos da
Internet. Cada utilizador terá o seu serviço de ISP que disponibilizará o acesso à rede. De
acordo com as suas características próprias pode ser por banda larga, com várias velocidades
por cabo etc.
Ligação lógica: A ligação lógica utiliza normas designadas protocolos. Na nossa arquitetura
vamos usar o protocolo TCP/IP: Esta norma caracteriza-se por utilizar um conjunto de
protocolos que trabalhando em conjunto tornam possível a troca de informação pela Internet.
Vamos agora explicar melhor o seu funcionamento. Os clientes (client-side) e servidores
(server-side) utilizam o protocolo TCP/IP para estabelecer a ligação. Este protocolo tem quatro
camadas, sendo que os programas comunicam pela camada de aplicação. Depois do programa
ser requisitado o protocolo da camada de aplicação comunica com outro protocolo na camada
de transporte o TCP. Esta camada fica responsável por dividir os dados em pacotes e enviá-los
para a camada Internet. Durante a receção dos dados esta camada fica responsável por
ordenar os pacotes e verificar se o seu conteúdo não está corrompido. Na camada Internet
(Internet Protocol) são colocados, nos pacotes, informações virtuais do computador:
remetente e destinatário. Cabe à camada de interface com a rede o envio físico dos pacotes
(datagramas). O nosso grupo está a usar a rede Ethernet para comunicar pela rede física com o
servidor.
Aplicação: A aplicação fica responsável por interpretar os dados e visualizar a informação
duma forma compreensível sendo a última parte a da ligação. Utiliza protocolos para enviar e
receber informação pela Internet. Um browser instalado no cliente permite visualizar as
páginas www (Word Wide Web) codificadas em linguagem HTML (Hyper Text Markup
Language, camada 5 - Aplicação, do modelo TCP/IP).
A transferência dos dados entre o servidor e o local-host (administração do site) é efetuada
seguindo o protocolo FTP (camada 5 - Aplicação do modelo TCP/IP). É um protocolo que
transfere os pacotes de dados mais rapidamente. A vantagem reside no facto de ser mais
rápido. É usado para colocar os arquivos do site no servidor.
32
33. Camada de apresentação: Linguagens - XHTML (estrutura), CSS (estilo), Javascript
(dinamismo). Este é o nível mais alto da aplicação pois é a interface do utilizador. A principal
função da interface é apresentar a informação de modo a que o utilizador a entenda.
Camada lógica: Linguagens – PHP e Javascript. Esta camada coordena o aplicativo, processa
determinados comandos, toma decisões lógicas, realiza cálculos e processa dados entre as
camadas vizinhas.
Camada de dados: Linguagem MySql - Aqui a informação é armazenada e recuperada a partir
de um sistema de base de dados. A informação é então passada de volta à camada lógica para
processamento e eventualmente enviada para o utilizador.
Utilizadores: A nossa aplicação prevê a utilização por quatro tipologias de utilizadores. O
utilizador comum pode aceder ao site e visualizar informação. Quando entra na aplicação o
seu browser faz um pedido ao servidor externo (http requeste) que processa as páginas através
de uma linguagem server-side (PHP) e envia o seu resultado (http response) através de
linguagem cliente-side. Para o utilizador registado e o parceiro registado o processo é o
mesmo. A diferença é que eles têm que iniciar uma sessão devidamente validada para
entrarem na aplicação. O PHP comunica com o servidor pela linguagem SQL e verificar na Base
Dados se os dados do login são válidos. Se não forem válidos a resposta é negativa e a sessão
não é validada. De acordo com o seu perfil terão acesso a diferentes perfis de utilização. O
Administrador passa pelo mesmo processo para validar a sua sessão.
API - JQuery : No nosso site temos uma API em JQuery para apresentar um slide show de
fotografias. O mesmo utiliza uma biblioteca de funções já programada e as linguagens HTML
para estruturar a informação, CSS para o estilo e o Javascript para o dinamismo da
apresentação.
Web Services
Google maps. A introdução deste serviço no nosso site visa permitir que qualquer utilizador
possa visualizar as localizações das parcerias numa página através de markers do Google Maps.
Um parceiro pode introduzir um marker no mapa com a localização da sua parceria. Uma
função em javascript escreve e guarda esse valor (latitude e longitude). O PHP recupera esses
dados e comunicando com a base dados através da linguagem SQL (comando INSERT) escreve
33
34. numa linha esses valores. Quando o utilizador através do seu browser acede a uma página
onde tenha o serviço do Google maps instalado, é efetuado um pedido ao servidor externo do
nosso site (http request). O PHP através do SQL recupera os valores arquivados na Base Dados,
os valores são introduzidos no interior do código javascript. O servidor envia a página para o
cliente utilizando linguagens cliente-side (http response). O código Ajax (javascript) do lado do
cliente-side, requisita o serviço do Google docs e é enviado o mapa. Os valores da latitude e
longitude presentes no código Javascritp são usados para colocar as marcas no local correto
dos mapas.
Facebook – Um serviço do facebook está representado na nossa arquitetura porque vai ser
possível ao utilizador com sessão iniciada no nosso site e simultaneamente no Facebook,
partilhar comentários em ambas as aplicações. Quando o comentário for partilhado, é utilizada
uma tecnologia AJAX que utiliza o Javascript para fazer uma conexão ao servidor do Facebook.
Desta forma é possível só ser atualizada a área da página onde o comentário é partilhado.
Livestreamig – O nosso site vai ter uma ligação de streaming de vídeo à quinta parceira que se
processa da seguinte forma. O streaming de vídeo da quinta é enviado para um servidor do
site http://new.livestream.com/home. Quando o cliente clica num link, o servidor web atrás
indicado responde com o endereço do stream ao player. O player requisita o conteúdo ao
servidor. O servidor inicia o stream. O protocolo envolvido no envio do stream é o UDP
(camada 4-transporte do modelo TCP/IP). Esta norma é usada para a transferência de arquivos
não existindo garantia de entrega, o que para este tipo de envio não é problemático. Esta
norma também fornece os serviços de broadcast e multicast, sendo permitido que um único
cliente envie pacotes para vários outros na rede.
Servidor
Quando um cliente efetua um pedido (http request), ao servidor externo, o PHP do lado do
servidor executa as instruções recebidas. Também pode ter que comunicar com a base dados
através da linguagem SQL, para efetuar consultas (querys). Depois dos pedidos serem
processados o seu resultado é enviado para o cliente (http response), através de linguagens
cliente-side, xhtml, css, javascript.
34
35. 3.2. Mapas de navegação
Os nossos mapas de navegação foram elaborados de acordo com os diferentes tipos de
utilizadores. Desta forma a sua interpretação é efetuada da melhor forma. As funcionalidades
referentes a cada utilizador foram representadas com diferentes cores.
35
36. Ilustração 33 – Mapa de navegação para o utilizador não registados
36
37. Ilustração 34 - Mapa de navegação para o utilizador registado comum
37
38. Ilustração 35 - Mapa de navegação para o utilizador registado parceiro
38
41. Esclarecimentos ao mapa do fluxo de informação acima inserido.
Existe uma zona de comentários em todas as páginas consideradas relevantes. O utilizador
na área dos conteúdos pode fazer comentários, quando quiser obter uma informação de um
especialista pode colocar a sua dúvida no mural onde os temas estão devidamente
organizados por categorias. O seu interesse para utilizar esta funcionalidade ou o mural
(fórum) reside no facto de poder obter respostas às suas dúvidas por parte de especialista.
41
50. 3.4. Modelo de Base de dados
Descrição técnica da base de dados:
A base de dados relativa ao projeto é gerida pelo software MySQL Workbench
O objetivo da base de dados (BD) é a ligação entre a plataforma online (área de front-end)
e o backoffice da mesma. É na BD que vão estar arquivados todos os elementos relativos ao
site, nomeadamente utilizadores, tipos de cultivos, quintas parceiras, entre outros. O site vai
procurar informação relevante à base de dados.
A estrutura da base de dados está dividida, essencialmente em 4 grupos de tabelas, que
vamos a seguir descrever:
Narrativa para o utilizador não registado:
O utilizador não registado pode aceder ao nosso site e visualizar os conteúdos, tem a
possibilidade de fazer o seu registo, não sendo obrigatório. Pode visitar todas as páginas,
tendo sempre a possibilidade em todas elas de efetuar o registo, ver o conteúdo e fazer
pesquisas.
Não pode fazer comentários, marcar visitas nem reservar terrenos de parceiros.
Este utilizador tem a possibilidade de escolher a sua tipologia de perfil, no campo registo.
Narrativa para o utilizador registado:
Este utilizador pode visualizar toda a informação, comentar e navegar por todas as
páginas da plataforma. Pode editar o seu perfil, inserir e apagar post, vídeos fotos, pode fazer
pedidos de amizade, aceitar ou rejeitar pedidos. Pode visualizar os seus amigos. Pode
denunciar comentários. No seu perfil pode inserir, alterar, comentar ou apagar dados.
Na área das parcerias pode ver conteúdo, propor parcerias ou comentar, marcar visitas,
alugar um terreno para cultivo, visualizar atividades online (streaming de vídeo). Pode inserir
fotografias e vídeos.
Pode a todo o momento desativar a sua conta.
Pode ver a localização da quinta parceira, aceder ao mural (fórum), inserir ou responder a
dúvidas.
Pode visualizar outros perfis, bem como partilhar comentários no facebook.
50
51. Narrativa para o Parceiro:
O parceiro pode fazer o mesmo que o utilizador registado, com as seguintes especificidades:
Editar o seu perfil, gerir visitas, gerir terrenos, gerir atividade online, gerir conteúdos das
culturas, localizar no GoolgeMaps a sua quinta. O parceiro terá um a área de gestão para
disponibilizar os dias para as visitas e as +áreas disponíveis para cultivo.
Narrativa para o Administrador:
O administrador pode gerir todos os conteúdos, com exceção dos conteúdos das parcerias,
inserir outros utilizadores, desativar comentários e utilizadores denunciados (que não
cumpram os termos de utilização do site). Pode aceitar/recusar parcerias.
O administrador pode ver todos os utilizadores, vídeos, fotografias, parcerias, em resumo tem
acesso a toda a plataforma.
51
53. 4. Bibliografia
Selecções Readres Digest (Alimentos de cultura biológica: prós e contras), visitado em 25-03-
2012, [em linha] URL <http://www.seleccoes.pt/article/8296/>
Caderno de apoio ao professor (Compostagem Doméstica e hortas biológicas), visitado em 25-
03-2012, [em linha] URL <http://www.amism.pt/Portals/1/pdf/Guia%20Compostagem.pdf>
IFOAM – International Federation of Organic Agriculture Movements, ) visitado em 25-03-
2012, [em linha] URL <http://www.ifoam.org/about_ifoam/pdfs/POA_folder_portugese.pdf>
Pesquisa de registo de marcas e patentes - INPI, Instituto Nacional de Propriedade Industrial,
visitado em 28-03-2012, [em linha] URL
<http://www.marcasepatentes.pt/index.php?section=1>
Registos de domínios internacional - visitado em 28-03-2012, [em linha] URL
<http://whois.domaintools.com/ >
Preece, J., Y. Rogers, et al. (2002). Interaction Design: beyond human-computer interaction.
USA, John Wiley & Sons, Inc. Capítulo3: Understanding Users
Gonçalves, S. M. P. A. (2005). A agricultura biológica em Portugal : (d)as problemáticas e (a)os
problemas. Porto : [Edição de Autor]. Retrieved from http://hdl.handle.net/10216/53813
Simões, M. A. d. C. D. (2007). A Tecnologia como Auxiliar na Agricultura Biológica em Estufa.
Retrieved from http://hdl.handle.net/10348/81
Gomiero, T., Pimentel, D., & Paoletti, M. G. (2011). Environmental Impact of Different
Agricultural Management Practices: Conventional vs. Organic Agriculture. [Article]. Critical
Reviews in Plant Sciences, 30(1/2), 95-124. doi: 10.1080/07352689.2011.554355
53
54. 5. Anexos
Anexo 1
Código para partilhar com o facebbok
Incluir a seguir ao body
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Incluir no HTML
<div class="fb-live-stream" data-event-app-id="APP_ID" data-width="400" data-height="500"
data-always-post-to-friends="false"></div>
54
55. Anexo 2
Ilustração 47 - Instituto Nacional de Propriedade Industrial – Pesquisa marca
Ilustração 48 - DomainTool, pesquisa internacional de domínios.
55
56. Anexo 3 - Fundamentação teórica estudada
Para termos no futuro um bom design funcional do nosso site e para que a interação
homem- computador se realize da melhor forma, tivemos de estudar os princípios
orientadores a utilizar de forma a atingirmos o chamado "emotional design" – satisfação dos
nossos utilizadores. Vamos seguir um modelo de baixo nível usando os princípios orientadores
presentes na Heurística de Ben Shneiderman.
#1 –princípio - diversidade (utilizadores e contextos de utilização) perfil do utilizador contexto
de utilização: perfil de tarefas, estilos de interação mais adequados
#2 –princípio - regras de ouro!
Consistência
Prever níveis de utilização diferentes
Feedback
Organizar a sequência/grupo de tarefas em concordância/coerência com as funções
Prevenção e recuperação de erro
Permitir ações reversíveis
Manter o controlo no utilizador
Reduzir taxa de esforço de memória curto-prazo (7+-2 registos de info.)
#3 -princípio - Evitar e/ou minimizar o impacto do erro
Segundo Preece o processo de design deve conter três premissas:
» “ser centrado no utilizador e envolver os utilizadores tanto quanto possível, de tal modo que
possam influenciá-lo”;
» “integrar o conhecimento e especialidades das diferentes disciplinas que contribuem para o
designem HCI”;
» “ser altamente iterativo, de tal modo que os testes possam ser feitos para verificar que o
design vai de facto de encontro aos requisitos do utilizador.”
[Preece96:46]
Pelas razões acima apontadas tivemos necessidade de efetuar o inquérito pelo que tivemos
desde o início do projeto a preocupação de integrar outros conhecimentos. Por esta razão
decidimos fazer parcerias que no futuro podem estender-se a várias áreas desta temática
integrando diferentes conhecimentos. Como somos uns apaixonados pelas áreas da
agricultora biológica e novas tecnologias o projeto vai continuar no futuro e o seu
aperfeiçoamento, através do estudo das suas diferentes componentes levará a que
56
57. obtenhamos o sucesso pretendido e acima de tudo possamos ajudar a desenvolver esta área.
O planeta agradece.
.
57
58. Anexo 4 - Resultados do inquérito
lustração 49 - Inquérito parte 1
58
61. Anexo 5 – Resultados
Instrumento: Este inquérito foi efetuado através do preenchimento de um inquérito
anónimo, tendo sido efetuado entre os dias 17 e 18 de Março 2012 na zona de Aveiro, Sever
do Vouga e Santa Maria da Feira. O nosso público-alvo foi constituído por 24 pessoas de
ambos os sexos que residem maioritariamente em ambiente urbano.
Conclusões: As pessoas a quem foram efetuados os inquéritos têm na sua maioria
habilitações literárias médias ou superiores. Os inquiridos que vivem em ambiente rural
cultivam naturalmente mais produtos. Os que vivem em ambiente urbano demostram
também uma predisposição para a prática da agricultura. Ambos partilham o gosto pelo cultivo
de algum produto como forma de passatempo. Os produtos cultivados são na sua maioria
árvores de furtos, ervas aromáticas e pequenos legumes. Cerca de 50% já tiveram necessidade
de fazer algum tipo de pesquisa para algum problema encontrado. Os problemas mais comuns
relacionam-se com pragas, falta de terrenos para cultivo, tipos de terra adequados,
quantidades de água, como e quando podar e melhor altura para plantar, etc.
Maioritariamente recorrem à Internet e a amigos para resolverem os seus problemas, sendo
os motores de busca a forma mais utilizada. Demostram estarem satisfeitos com as respostas
encontradas. Ninguém indicou um local específico para encontrar informações e colocação de
dúvidas. Deram-nos importantes indicações sobre o que querem encontrar num site deste
género. Por exemplo uma grande maioria declarou ter problemas em encontrar locais para a
venda de certos produtos como sementes. Esta identificação vai ajudar-nos a incorporar estes
assuntos nos vários conteúdos do site, nos vários tipos de hortas, de varanda, urbana e
comunitária e nos produtos. Estão todos muito recetivos para visualizarem as áreas das
parcerias, marcarem visitas e alugarem terrenos para cultivo on-line.
Considerações finais: Este inquérito foi bastante importante para no futuro satisfazer
o nosso público-alvo. A nossa missão e visão têm que ir de encontro às suas necessidades.
Vamos colocar-nos de modo a responder às questões que os afetam e antecipar as suas
necessidades. Se conseguirmos responder às suas dúvidas e questões ou que eles possam
utilizar o nosso site para o fazer, estamos a conquistar utilizadores fidelizados e
exponencialmente novos visitantes através da técnica de marketing passa a palavra.
61
62. Ilustração 52 - Resultados do inquérito para escolha do nome
Ilustração 53 - Total dos inquiridos
62
64. Ilustração 56 - Zona de residência
Ilustração 57 - Fontes consultadas pelos utilizadores
64
65. Ilustração 58 - Local visitado para esclarecer dúvidas
Ilustração 59 - Grau de satisfação com as pesquisas
65
66. Ilustração 60 - Disposição para visitar parceiros
Ilustração 61 - Disposição para cultivar terrenos
66
67. Ilustração 62 - Disposição para partilha de experiências
Ilustração 63 - Maiores problemas encontrados no cultivo
Outros problemas: Tipos de terra, quantidades de água, como e quando podar, melhor altura
para plantar, etc.
Produtos mais cultivados: árvores de fruta diversas / perpétua -rosca (para chá), árvores de
fruta, ervas aromáticas, especiarias, legumes/Tomate, alface, fruta diversa, couve, cebola, etc.
Resposta a questão: O que espera encontrar num site de Agricultura Biológica?
67
68. -Informações sobre o que é, formas de cultivo dos diferentes tipos de cultivo;
-Boas práticas da atividade; Informação académica sobre produtos e plantação, conselhos;
-Venda de produtos (plantas, ferramentas);
-Informação que permita aplicar na prática o conhecimento disponibilizado (por exemplo
através de vídeos);
- Várias informações do que se trata e como deverá ser praticada/o que se pode cultivar,
conhecimentos a utilizar e a praticar, onde comprar esses produtos, encontrar informações
imediatas para duvidas e sugestões;
-Informações sobre benefícios, onde encontrar e conselhos úteis (consumidores);
-Como iniciar a atividade (conselhos e guias)/Técnicas de combate às pragas, otimização da
produção, fertilização das plantas.
68
