Relatorio especificacao tecnica-e_grafica

517 views

Published on

  • Be the first to comment

  • Be the first to like this

Relatorio especificacao tecnica-e_grafica

  1. 1. 1
  2. 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. 3. ConteúdoÍndice de ilustrações...................................................................................................................... 41. Introdução ............................................................................................................................. 61.1. Conceito ............................................................................................................................ 61.2. Escolha do nome (naming) ................................................................................................ 71.3. Objetivos da especificação gráfica e técnica ..................................................................... 81.3.1. Especificação gráfica ..................................................................................................... 91.3.2. Especificação técnica ..................................................................................................... 92. Especificação gráfica ............................................................................................................. 92.1. Estudo gráfico.................................................................................................................... 92.1.1. Logomarca ..................................................................................................................... 92.1.2. Escala do logótipo ....................................................................................................... 112.1.3. Área de Proteção ......................................................................................................... 122.1.4. Estudos tipográficos .................................................................................................... 122.1.5. Hierarquia tipográfica Online ...................................................................................... 132.1.6. Estudo cromático ........................................................................................................ 142.2. Estudos de grelha ............................................................................................................ 152.3. Composição de ecrãs únicos e Estudos de interfaces ..................................................... 152.4. Estudo de ícones e botões .............................................................................................. 293. Especificação técnica........................................................................................................... 313.1. Modelo/Arquitetura do Sistema ..................................................................................... 313.2. Mapas de navegação ....................................................................................................... 353.3. Fluxogramas detalhados ................................................................................................. 423.4. Modelo de Base de dados ............................................................................................... 504. Bibliografia .......................................................................................................................... 535. Anexos ................................................................................................................................. 54Anexo 3 - Fundamentação teórica estudada .............................................................................. 56Anexo 4 - Resultados do inquérito ............................................................................................. 58 3
  4. 4. Índice de ilustraçõesIlustração 1 - Logotipo final ......................................................................................................... 10Ilustração 2- Estudos de grelha ................................................................................................... 11Ilustração 3 - Escalas do logotipo ................................................................................................ 11Ilustração 4 - Área de proteção ................................................................................................... 12Ilustração 7 Fonte Tahoma regular e Bold .................................................................................. 13Ilustração 5 Fonte HelveticaNeue LT 65 Medium ....................................................................... 13Ilustração 6 Fonte HelveticaNeue LT 35 Thin .............................................................................. 13Ilustração 8 Esquema cromático utilizado .................................................................................. 14Ilustração 9 Grelha 16 colunas do sistema 960 Grid ................................................................... 15Ilustração 10 Grelha horizontal ................................................................................................... 15Ilustração 11 Grelha Base (1) ...................................................................................................... 16Ilustração 12 Grelha Base (2) ...................................................................................................... 16Ilustração 13 Grelha base (3) ...................................................................................................... 17Ilustração 14 Grelha Home Page (sem registo ou sessão iniciada) ............................................. 17Ilustração 15 Simulação Home Page (sem registo ou sessão iniciada) ....................................... 18Ilustração 16 Grelha página Agricultura Biológica ...................................................................... 18Ilustração 17 Simulação página Agricultura Biológica ................................................................ 19Ilustração 18 Grelha página Tipo Árvores de Fruto .................................................................... 19Ilustração 19 Simulação página Tipo Árvores de Fruto ............................................................... 20Ilustração 20 Home Page inicial .................................................................................................. 20Ilustração 21 Home Page Sessão Iniciada ................................................................................... 21Ilustração 22 Página de registo ................................................................................................... 22Ilustração 23 Página Agricultura Biológica (Horta Urbana) ........................................................ 23Ilustração 24 Página Culturas (Árvores de Fruto) ....................................................................... 24Ilustração 25 Página Árvores de Fruto (Laranjeira) ..................................................................... 25Ilustração 26 Página Parcerias .................................................................................................... 26Ilustração 27 Perfil de uma Parceria ........................................................................................... 27Ilustração 28 Página Mural de dúvidas ....................................................................................... 28Ilustração 29 Interação com o menu .......................................................................................... 29Ilustração 30 Interação com os botões ....................................................................................... 29Ilustração 31 Icons....................................................................................................................... 30Ilustração 32 – Mapa/Arquitetura do sistema ............................................................................ 31Ilustração 33 – Mapa de navegação para o utilizador não registados ........................................ 36Ilustração 34 - Mapa de navegação para o utilizador registado comum .................................... 37Ilustração 35 - Mapa de navegação para o utilizador registado parceiro ................................... 38Ilustração 36 - Mapa de navegação para o Administrador ......................................................... 39Ilustração 37 - Mapa fluxo informação ....................................................................................... 40Ilustração 38 - Fluxograma login/registo .................................................................................... 42Ilustração 39 - Fluxograma recuperar password ......................................................................... 43Ilustração 40 - Fluxograma editar perfil ...................................................................................... 44Ilustração 41 - Fluxograma inserir conteúdos ............................................................................. 45Ilustração 42 - Fluxograma dos Parceiros ................................................................................... 46 4
  5. 5. Ilustração 43 - Fluxograma inserir comentário ........................................................................... 47Ilustração 44 - Fluxograma mural/fórum .................................................................................... 48Ilustração 45 Fluxograma pedir amizade / eliminar amigo ......................................................... 49Ilustração 46 Base Dados ............................................................................................................ 52Ilustração 47 - Instituto Nacional de Propriedade Industrial – Pesquisa marca ......................... 55Ilustração 48 - DomainTool, pesquisa internacional de domínios. ............................................. 55lustração 49 - Inquérito parte 1 .................................................................................................. 58Ilustração 50 - Inquérito parte 2 ................................................................................................. 59Ilustração 51 - Inquérito parte 3 ................................................................................................. 60Ilustração 52 - Resultados do inquérito para escolha do nome ................................................. 62Ilustração 53 - Total dos inquiridos ............................................................................................. 62Ilustração 54 - Grupo etário ........................................................................................................ 63Ilustração 55 – Habilitações ........................................................................................................ 63Ilustração 56 - Zona de residência .............................................................................................. 64Ilustração 57 - Fontes consultadas pelos utilizadores................................................................. 64Ilustração 58 - Local visitado para esclarecer dúvidas ................................................................ 65Ilustração 59 - Grau de satisfação com as pesquisas .................................................................. 65Ilustração 60 - Disposição para visitar parceiros ......................................................................... 66Ilustração 61 - Disposição para cultivar terrenos ........................................................................ 66Ilustração 62 - Disposição para partilha de experiências ............................................................ 67Ilustração 63 - Maiores problemas encontrados no cultivo ....................................................... 67 5
  6. 6. 1. Introdução 1.1. Conceito O conceito geral do trabalho em elaboração é o despertar para o cultivo de produtos denatureza biológica, seja no meio rural, mas também em meio urbano, meio este onde cada vezmais existe o despertar para atividades de bem-estar pessoal. As pessoas estão cada vez maisatentas 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, nomeadamenteem 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 fertilizantesnaturais, como por exemplo excrementos orgânicos, rochas que contenham minerais oucompostagem (processo natural onde ocorre a decomposição biológica, através da atividadede 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 quesabemos 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.pdfPara nos ajudar a identificar melhor o nosso público-alvo, quais as suas reais espectativas, nadefinição do novo nome do site, conteúdos que devem ser inseridos, futuras evoluções e 6
  7. 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 osconteúdos, a navegação, as suas espectativas, problemas encontrados e justificação dealgumas 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õesno site. 1.2. Escolha do nome (naming) A escolha de um nome em qualquer projeto na vida é de crucial importância: é ele que vaiidentificar 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ósaceite porque nos remetia para o tema em questão e para o processo de regresso as nossasorigens 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 assuntosabordados eram essencialmente dirigidos para Portugal. Esta questão foi abordada com anossa Orientadora e Professores de Projeto. Foi então decidido mudar o nome para o nossoidioma. O mesmo deveria transmitir informações que remetem-se para a agricultura e para oestado puro dos elementos (terra, ar, água e fogo).Queríamos atingir o inconsciente coletivo, esta nossa ligação que temos à mãe terra mas quefruto da urbanidade está esquecido mas sempre pronto a renascer. Cada vez mais está anascer um sentimento por parte das pessoas de reatarem esta ligação à terra. Uma das formasque encontraram para o fazer foi iniciar o cultivo de terrenos em locais improvisados comovarandas, terrenos urbanos ou partilharem hortas comunitárias, sendo este o público-alvo quequeremos 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, ecom base no nosso inquérito chegámos à escolha do nome terraPURA. 7
  8. 8. Foi efetuado um estudo para verificar já estava registado (IPPI, foto em anexo) para algumamarca 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é mesmouma empresa comercial, deve ser único (distinto), não deve ser cansativo (exaustivo), deve serintemporal (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 adequadoajuda 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, paraque 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 atitudepoupava tempo e eliminava um alfabeto (maiúsculas) desnecessário (por cumprir a mesmafunção).Piet Zwart e Willem Sandberg adoptaram a proposta da Bauhaus em abolir as maiúsculasNo entanto já em 1960, uma investigação havia provado que todo texto que começa commaiú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 deinformações mais detalhadas de forma a aprofundar e fechar decisões para a futuraimplementação. Desta forma foram efetuados estudos intensos e profundos de nomes para osite, logotipo, estudos de grelha, de paletes de cores, dos ecrãs principais, arquitetura dosistema, mapas de navegação e base dados. Tudo deve formar um todo coerente eharmonioso. Esta coerência gráfica e técnica não foi logo alcançada mas pensamos que comajuda da nossa Orientadora e dos Professores demos passos importantes na sua realização. 8
  9. 9. 1.3.1. Especificação gráfica A nossa especificação gráfica vai permitir criar a identidade visual e imagem de marca donosso site. Este projeto exige que todos os conhecimentos teórico-práticos recebidos nestecurso 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 todosos conteúdos devem ser bem pensados e bem executados para transmitir o verdadeirosignificado. Foi por esta razão que a nossa escolha de nome foi um processo muito difícil masnecessário. O nosso site vai chamar-se “terra pura”, por isso o nosso grafismo vai transmitir dois tiposde sentimentos, podemos até falar na dualidade cósmica, o Yin e o Yang. A terra visa remeteros utilizadores para a sua origem a mãe terra e criar logo o sentimento de afetividade. Apureza remete para o carácter original em que a terra não tinha problemas de poluição, osprodutos 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 dassuas funcionalidades na demo técnica surge por fim a altura de definir com mais exatidão assuas especificações. É desta forma que surge a especificação técnica que vai permitircaraterizar melhor o nosso sistema, definir quais são as suas caraterísticas e quefuncionalidades 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. É pessoalse é um resultado de orgulho, ganância, ou esperança de imortalidade. Marcamos os nossosnomes em desenhos infantis. Desenvolvemos uma assinatura única para cada um de nós, para 9
  10. 10. proteger a nossa identidade. Nós esculpir iniciais em troncos de árvores com um coração, naesperança de fazer uma união permanente. O logótipo é uma extensão desses actos. Redefineesses motivos do indivíduo para o colectivo.” in Logo Design Workbook - ADAMS MORIOKAResultado finalIlustração 1 - Logotipo finalAlguns estudos:Estudos de grelha: 10
  11. 11. Ilustração 2- Estudos de grelha 2.1.2.Escala do logótipoO tamanho mínimo da logomarca deve considerar o símbolo e o nome como no exemplo. Paragarantir visibilidade e impacto na reprodução da marca, nunca deve ser representado numtamanho inferior a 25%.Ilustração 3 - Escalas do logotipo 11
  12. 12. 2.1.3. Área de ProteçãoComo representado nas imagens seguintes, o espaço vazio à volta da marca serve para lheconferir proteção, e para aumentar a sua visibilidade. O quadrado em branco colocado porcima do texto define o espaço livre mínimo.Através da altura do elementoIlustraçã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 LT35 Thin, a 45 px, para a palavra PURA. É uma fonte tipográfica sem-serifa e é considerada uma 12
  13. 13. das fontes mais bem sucedidas e populares do mundo. Foi criada pelos designers MaxMiedinger e Eduard Hoffmann, em 1957. É uma fonte associada ao modernismo. terraPURAIlustraçã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 -serifadesenhada por Matthew Carter. Tem boa legibilidade e é considerada uma excelente fontetipográfica para a leitura em monitores, uma vez que foi concebida para uma utilização naweb.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 seguintehierarquia tipográfica: 13
  14. 14. Menu bold, 14 px.Dropmenu regular, 12 px. Espaçamento entre textoTítulos regular, 18 px.Subtítulos regular, 16 px. 20 pxTexto 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. Emrelação ao design do logótipo, a cor é parte integrante de valor mnemónico, ela tambémtransmite o tom de uma empresa, embora determinadas cores tenham significados aceites nacultura europeia ocidental, em outras culturas existem múltiplos significados.” in Logo Design Workbook - ADAMS MORIOKAIlustração 8 Esquema cromático utilizadoTonalidades de verde - O verde foi escolhido devido a esta conexão e forte afinidade com anatureza e o meio ambiente. Palavras chave: Natureza, crescimento, fertilidade, frescura 14
  15. 15. VERDE: RGB - 140,198,63 CMYK - 50,0,100,0Tonalidades de castanho – O castanho acompanha a ideia da cor verde, a natureza, o solo, acor de terra, o campo. Palavras chave: Terra, fertilidade, estabilidadeCASTANHO: 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 adisposição e organização. Sendo assim a página terá largura total de 960 px. Para cada colunatemos 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 emtodas as páginas do mesmo. Esta estrutura vai conter uma área no topo disponível para oheader (aqui serão exibidos o logótipo, o menu e uma imagem característica do projeto) e 15
  16. 16. outra no fim da página para o footer (exibição de informações sobre os autores, contactos eacesso 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ívelestas 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. 17. Ilustração 13 Grelha base (3)Serão apresentados de seguida os ecrãs com diferentes tipos de divisão de conteúdoHome Page sem registo ou início de sessão efetuado: Ilustração 14 Grelha Home Page (sem registo ou sessão iniciada) 17
  18. 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. 19. Ilustração 17 Simulação página Agricultura BiológicaPágina Tipo de Árvore de fruto: Ilustração 18 Grelha página Tipo Árvores de Fruto 19
  20. 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
  21. 21. Home Sessão IniciadaIlustração 21 Home Page Sessão Iniciada 21
  22. 22. RegistarIlustração 22 Página de registo 22
  23. 23. Agricultura BiológicaIlustração 23 Página Agricultura Biológica (Horta Urbana) 23
  24. 24. CulturasIlustração 24 Página Culturas (Árvores de Fruto) 24
  25. 25. Página Árvores de Fruto LaranjeiraIlustração 25 Página Árvores de Fruto (Laranjeira) 25
  26. 26. ParceriasIlustração 26 Página Parcerias 26
  27. 27. Perfil de uma parceriaIlustração 27 Perfil de uma Parceria 27
  28. 28. MuralIlustração 28 Página Mural de dúvidas 28
  29. 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 omesmo 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 doexemplo que mostramos a seguir. Ilustração 30 Interação com os botões 29
  30. 30. Ilustração 31 Icons 30
  31. 31. 3. Especificação técnica 3.1. Modelo/Arquitetura do SistemaIlustração 32 – Mapa/Arquitetura do sistema 31
  32. 32. Servidor externo: http://backtobasics.com.pt/Client-Side | Server-Side – ArticulaçãoLigaçã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 daInternet. Cada utilizador terá o seu serviço de ISP que disponibilizará o acesso à rede. Deacordo com as suas características próprias pode ser por banda larga, com várias velocidadespor cabo etc.Ligação lógica: A ligação lógica utiliza normas designadas protocolos. Na nossa arquiteturavamos usar o protocolo TCP/IP: Esta norma caracteriza-se por utilizar um conjunto deprotocolos 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 quatrocamadas, sendo que os programas comunicam pela camada de aplicação. Depois do programaser requisitado o protocolo da camada de aplicação comunica com outro protocolo na camadade transporte o TCP. Esta camada fica responsável por dividir os dados em pacotes e enviá-lospara a camada Internet. Durante a receção dos dados esta camada fica responsável porordenar 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 oservidor.Aplicação: A aplicação fica responsável por interpretar os dados e visualizar a informaçãoduma forma compreensível sendo a última parte a da ligação. Utiliza protocolos para enviar ereceber informação pela Internet. Um browser instalado no cliente permite visualizar aspáginas www (Word Wide Web) codificadas em linguagem HTML (Hyper Text MarkupLanguage, camada 5 - Aplicação, do modelo TCP/IP).A transferência dos dados entre o servidor e o local-host (administração do site) é efetuadaseguindo o protocolo FTP (camada 5 - Aplicação do modelo TCP/IP). É um protocolo quetransfere os pacotes de dados mais rapidamente. A vantagem reside no facto de ser maisrápido. É usado para colocar os arquivos do site no servidor. 32
  33. 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 principalfunçã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, processadeterminados comandos, toma decisões lógicas, realiza cálculos e processa dados entre ascamadas vizinhas.Camada de dados: Linguagem MySql - Aqui a informação é armazenada e recuperada a partirde um sistema de base de dados. A informação é então passada de volta à camada lógica paraprocessamento e eventualmente enviada para o utilizador.Utilizadores: A nossa aplicação prevê a utilização por quatro tipologias de utilizadores. Outilizador comum pode aceder ao site e visualizar informação. Quando entra na aplicação oseu browser faz um pedido ao servidor externo (http requeste) que processa as páginas atravésde uma linguagem server-side (PHP) e envia o seu resultado (http response) através delinguagem cliente-side. Para o utilizador registado e o parceiro registado o processo é omesmo. A diferença é que eles têm que iniciar uma sessão devidamente validada paraentrarem na aplicação. O PHP comunica com o servidor pela linguagem SQL e verificar na BaseDados se os dados do login são válidos. Se não forem válidos a resposta é negativa e a sessãonão é validada. De acordo com o seu perfil terão acesso a diferentes perfis de utilização. OAdministrador 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 defotografias. O mesmo utiliza uma biblioteca de funções já programada e as linguagens HTMLpara estruturar a informação, CSS para o estilo e o Javascript para o dinamismo daapresentação.Web ServicesGoogle maps. A introdução deste serviço no nosso site visa permitir que qualquer utilizadorpossa 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. Umafunção em javascript escreve e guarda esse valor (latitude e longitude). O PHP recupera essesdados e comunicando com a base dados através da linguagem SQL (comando INSERT) escreve 33
  34. 34. numa linha esses valores. Quando o utilizador através do seu browser acede a uma páginaonde tenha o serviço do Google maps instalado, é efetuado um pedido ao servidor externo donosso 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 ocliente utilizando linguagens cliente-side (http response). O código Ajax (javascript) do lado docliente-side, requisita o serviço do Google docs e é enviado o mapa. Os valores da latitude elongitude presentes no código Javascritp são usados para colocar as marcas no local corretodos mapas.Facebook – Um serviço do facebook está representado na nossa arquitetura porque vai serpossí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, é utilizadauma 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 seprocessa da seguinte forma. O streaming de vídeo da quinta é enviado para um servidor dosite http://new.livestream.com/home. Quando o cliente clica num link, o servidor web atrásindicado responde com o endereço do stream ao player. O player requisita o conteúdo aoservidor. 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 arquivosnão existindo garantia de entrega, o que para este tipo de envio não é problemático. Estanorma também fornece os serviços de broadcast e multicast, sendo permitido que um únicocliente envie pacotes para vários outros na rede.ServidorQuando um cliente efetua um pedido (http request), ao servidor externo, o PHP do lado doservidor executa as instruções recebidas. Também pode ter que comunicar com a base dadosatravés da linguagem SQL, para efetuar consultas (querys). Depois dos pedidos seremprocessados o seu resultado é enviado para o cliente (http response), através de linguagenscliente-side, xhtml, css, javascript. 34
  35. 35. 3.2. Mapas de navegaçãoOs nossos mapas de navegação foram elaborados de acordo com os diferentes tipos deutilizadores. Desta forma a sua interpretação é efetuada da melhor forma. As funcionalidadesreferentes a cada utilizador foram representadas com diferentes cores. 35
  36. 36. Ilustração 33 – Mapa de navegação para o utilizador não registados 36
  37. 37. Ilustração 34 - Mapa de navegação para o utilizador registado comum 37
  38. 38. Ilustração 35 - Mapa de navegação para o utilizador registado parceiro 38
  39. 39. Ilustração 36 - Mapa de navegação para o Administrador 39
  40. 40. Ilustração 37 - Mapa fluxo informação 40
  41. 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 utilizadorna área dos conteúdos pode fazer comentários, quando quiser obter uma informação de umespecialista pode colocar a sua dúvida no mural onde os temas estão devidamenteorganizados 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
  42. 42. 3.3. Fluxogramas detalhadosLOGIN e REGISTOIlustração 38 - Fluxograma login/registo 42
  43. 43. RECUPERAR PASSWORD Ilustração 39 - Fluxograma recuperar password 43
  44. 44. EDITAR PERFIL Ilustração 40 - Fluxograma editar perfil 44
  45. 45. INSERIR CONTEÚDOS Ilustração 41 - Fluxograma inserir conteúdos 45
  46. 46. PARCEIROS Ilustração 42 - Fluxograma dos Parceiros 46
  47. 47. INSERIR COMENTÁRIO Ilustração 43 - Fluxograma inserir comentário 47
  48. 48. MURAL Ilustração 44 - Fluxograma mural/fórum 48
  49. 49. PEDIR AMIZADE / ELIMINAR AMIGO Ilustração 45 Fluxograma pedir amizade / eliminar amigo 49
  50. 50. 3.4. Modelo de Base de dadosDescriçã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 aosite, nomeadamente utilizadores, tipos de cultivos, quintas parceiras, entre outros. O site vaiprocurar informação relevante à base de dados. A estrutura da base de dados está dividida, essencialmente em 4 grupos de tabelas, quevamos 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 apossibilidade 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 fazerpesquisas. 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 aspáginas da plataforma. Pode editar o seu perfil, inserir e apagar post, vídeos fotos, pode fazerpedidos de amizade, aceitar ou rejeitar pedidos. Pode visualizar os seus amigos. Podedenunciar 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 inserirfotografias 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 adúvidas. Pode visualizar outros perfis, bem como partilhar comentários no facebook. 50
  51. 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 dasculturas, localizar no GoolgeMaps a sua quinta. O parceiro terá um a área de gestão paradisponibilizar 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ãocumpram os termos de utilização do site). Pode aceitar/recusar parcerias.O administrador pode ver todos os utilizadores, vídeos, fotografias, parcerias, em resumo temacesso a toda a plataforma. 51
  52. 52. Ilustração 46 Base Dados 52
  53. 53. 4. BibliografiaSelecçõ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 UsersGonçalves, S. M. P. A. (2005). A agricultura biológica em Portugal : (d)as problemáticas e (a)osproblemas. Porto : [Edição de Autor]. Retrieved from http://hdl.handle.net/10216/53813Simões, M. A. d. C. D. (2007). A Tecnologia como Auxiliar na Agricultura Biológica em Estufa.Retrieved from http://hdl.handle.net/10348/81Gomiero, T., Pimentel, D., & Paoletti, M. G. (2011). Environmental Impact of DifferentAgricultural Management Practices: Conventional vs. Organic Agriculture. [Article]. CriticalReviews in Plant Sciences, 30(1/2), 95-124. doi: 10.1080/07352689.2011.554355 53
  54. 54. 5. Anexos Anexo 1Código para partilhar com o facebbokIncluir 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. 55. Anexo 2Ilustração 47 - Instituto Nacional de Propriedade Industrial – Pesquisa marcaIlustração 48 - DomainTool, pesquisa internacional de domínios. 55
  56. 56. Anexo 3 - Fundamentação teórica estudada Para termos no futuro um bom design funcional do nosso site e para que a interaçãohomem- computador se realize da melhor forma, tivemos de estudar os princípiosorientadores a utilizar de forma a atingirmos o chamado "emotional design" – satisfação dosnossos utilizadores. Vamos seguir um modelo de baixo nível usando os princípios orientadorespresentes na Heurística de Ben Shneiderman.#1 –princípio - diversidade (utilizadores e contextos de utilização) perfil do utilizador contextode utilização: perfil de tarefas, estilos de interação mais adequados#2 –princípio - regras de ouro!ConsistênciaPrever níveis de utilização diferentesFeedbackOrganizar a sequência/grupo de tarefas em concordância/coerência com as funçõesPrevenção e recuperação de erroPermitir ações reversíveisManter o controlo no utilizadorReduzir taxa de esforço de memória curto-prazo (7+-2 registos de info.)#3 -princípio - Evitar e/ou minimizar o impacto do erroSegundo 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 quepossam influenciá-lo”;» “integrar o conhecimento e especialidades das diferentes disciplinas que contribuem para odesignem HCI”;» “ser altamente iterativo, de tal modo que os testes possam ser feitos para verificar que odesign 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 tivemosdesde o início do projeto a preocupação de integrar outros conhecimentos. Por esta razãodecidimos fazer parcerias que no futuro podem estender-se a várias áreas desta temáticaintegrando diferentes conhecimentos. Como somos uns apaixonados pelas áreas daagricultora biológica e novas tecnologias o projeto vai continuar no futuro e o seuaperfeiçoamento, através do estudo das suas diferentes componentes levará a que 56
  57. 57. obtenhamos o sucesso pretendido e acima de tudo possamos ajudar a desenvolver esta área.O planeta agradece.. 57
  58. 58. Anexo 4 - Resultados do inquéritolustração 49 - Inquérito parte 1 58
  59. 59. Ilustração 50 - Inquérito parte 2 59
  60. 60. Ilustração 51 - Inquérito parte 3 60
  61. 61. Anexo 5 – Resultados Instrumento: Este inquérito foi efetuado através do preenchimento de um inquéritoanónimo, tendo sido efetuado entre os dias 17 e 18 de Março 2012 na zona de Aveiro, Severdo Vouga e Santa Maria da Feira. O nosso público-alvo foi constituído por 24 pessoas deambos os sexos que residem maioritariamente em ambiente urbano. Conclusões: As pessoas a quem foram efetuados os inquéritos têm na sua maioriahabilitações literárias médias ou superiores. Os inquiridos que vivem em ambiente ruralcultivam naturalmente mais produtos. Os que vivem em ambiente urbano demostramtambém uma predisposição para a prática da agricultura. Ambos partilham o gosto pelo cultivode 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 necessidadede fazer algum tipo de pesquisa para algum problema encontrado. Os problemas mais comunsrelacionam-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, sendoos motores de busca a forma mais utilizada. Demostram estarem satisfeitos com as respostasencontradas. Ninguém indicou um local específico para encontrar informações e colocação dedúvidas. Deram-nos importantes indicações sobre o que querem encontrar num site destegénero. Por exemplo uma grande maioria declarou ter problemas em encontrar locais para avenda de certos produtos como sementes. Esta identificação vai ajudar-nos a incorporar estesassuntos nos vários conteúdos do site, nos vários tipos de hortas, de varanda, urbana ecomunitária e nos produtos. Estão todos muito recetivos para visualizarem as áreas dasparcerias, marcarem visitas e alugarem terrenos para cultivo on-line. Considerações finais: Este inquérito foi bastante importante para no futuro satisfazero 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 suasnecessidades. Se conseguirmos responder às suas dúvidas e questões ou que eles possamutilizar o nosso site para o fazer, estamos a conquistar utilizadores fidelizados eexponencialmente novos visitantes através da técnica de marketing passa a palavra. 61
  62. 62. Ilustração 52 - Resultados do inquérito para escolha do nome Ilustração 53 - Total dos inquiridos 62
  63. 63. Ilustração 54 - Grupo etárioIlustração 55 – Habilitações 63
  64. 64. Ilustração 56 - Zona de residênciaIlustração 57 - Fontes consultadas pelos utilizadores 64
  65. 65. Ilustração 58 - Local visitado para esclarecer dúvidasIlustração 59 - Grau de satisfação com as pesquisas 65
  66. 66. Ilustração 60 - Disposição para visitar parceirosIlustração 61 - Disposição para cultivar terrenos 66
  67. 67. Ilustração 62 - Disposição para partilha de experiências Ilustração 63 - Maiores problemas encontrados no cultivoOutros problemas: Tipos de terra, quantidades de água, como e quando podar, melhor alturapara plantar, etc.Produtos mais cultivados: árvores de fruta diversas / perpétua -rosca (para chá), árvores defruta, 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. 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 exemploatravé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çõesimediatas 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 daprodução, fertilização das plantas. 68

×