1

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

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

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

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

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

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.

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.

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

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:

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

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

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

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:

Ilustração 5 Fonte HelveticaNeue LT 65 Medium Ilustração 6 Fonte HelveticaNeue LT 35 Thin

14

Menu bold, 14 px.

Dropmenu regular, 12 px.

Títulos regular, 18 px.

Subtítulos regular, 16 px.

Texto regular, 12 px.

Outros textos regular, 10 px.

Botões bold, 12px.

Espaçamento entre texto

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

20 px

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

Ilustração 10 Grelha horizontal

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.

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

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)

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)

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

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

20

Ilustração 19 Simulação página Tipo Árvores de Fruto

Últimos estudos de layouts

Home Page

Ilustração 20 Home Page inicial

21

Home Sessão Iniciada

Ilustração 21 Home Page Sessão Iniciada

22

Registar

Ilustração 22 Página de registo

23

Agricultura Biológica

Ilustração 23 Página Agricultura Biológica (Horta Urbana)

24

Culturas

Ilustração 24 Página Culturas (Árvores de Fruto)

25

Página Árvores de Fruto Laranjeira

Ilustração 25 Página Árvores de Fruto (Laranjeira)

26

Parcerias

Ilustração 26 Página Parcerias

27

Perfil de uma parceria

Ilustração 27 Perfil de uma Parceria

28

Mural

Ilustração 28 Página Mural de dúvidas

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

30

Ilustração 31 Icons

31

3. Especificação técnica

3.1. Modelo/Arquitetura do Sistema

Ilustração 32 – Mapa/Arquitetura do sistema

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.

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

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.

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.

36

Ilustração 33 – Mapa de navegação para o utilizador não registados

37

Ilustração 34 - Mapa de navegação para o utilizador registado comum

38

Ilustração 35 - Mapa de navegação para o utilizador registado parceiro

39

Ilustração 36 - Mapa de navegação para o Administrador

40

Ilustração 37 - Mapa fluxo informação

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.

42

3.3. Fluxogramas detalhados

LOGIN e REGISTO

Ilustração 38 - Fluxograma login/registo

43

RECUPERAR PASSWORD

Ilustração 39 - Fluxograma recuperar password

44

EDITAR PERFIL

Ilustração 40 - Fluxograma editar perfil

45

INSERIR CONTEÚDOS

Ilustração 41 - Fluxograma inserir conteúdos

46

PARCEIROS

Ilustração 42 - Fluxograma dos Parceiros

47

INSERIR COMENTÁRIO

Ilustração 43 - Fluxograma inserir comentário

48

MURAL

Ilustração 44 - Fluxograma mural/fórum

49

PEDIR AMIZADE / ELIMINAR AMIGO

Ilustração 45 Fluxograma pedir amizade / eliminar amigo

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.

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.

52

Ilustração 46 Base Dados

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

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>

55

Anexo 2

Ilustração 47 - Instituto Nacional de Propriedade Industrial – Pesquisa marca

Ilustração 48 - DomainTool, pesquisa internacional de domínios.

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

57

obtenhamos o sucesso pretendido e acima de tudo possamos ajudar a desenvolver esta área.

O planeta agradece.

.

58

Anexo 4 - Resultados do inquérito

lustração 49 - Inquérito parte 1

59

Ilustração 50 - Inquérito parte 2

60

Ilustração 51 - Inquérito parte 3

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.

62

Ilustração 52 - Resultados do inquérito para escolha do nome

Ilustração 53 - Total dos inquiridos

63

Ilustração 54 - Grupo etário

Ilustração 55 – Habilitações

64

Ilustração 56 - Zona de residência

Ilustração 57 - Fontes consultadas pelos utilizadores

65

Ilustração 58 - Local visitado para esclarecer dúvidas

Ilustração 59 - Grau de satisfação com as pesquisas

66

Ilustração 60 - Disposição para visitar parceiros

Ilustração 61 - Disposição para cultivar terrenos

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?

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.