fluxograma

#entrega04 - Especificação Gráfica e Técnica

ruileite — Fri, 30 Mar 2012 22:09:46 GMT

A conceção da especificação gráfica e técnica do projeto detêm uma enorme relevância para a pormenorização e detalhe das funcionalidades e do grafismo por parte do grupo de trabalho.

Relativamente à especificação gráfica, esta permite a criação de uma identidade visual, no que respeita à marca e ao conceito do projeto.

Quanto à especificação técnica, permite identificar as características e funcionalidades da aplicação, bem como a interação entre os diferentes componentes da aplicação.

Relatório da especificação gráfica e técnica

Open publication - Free publishing - More especificacao

Link: Relatório

Manual de Identidade Visual

Open publication - Free publishing - More identidade

Link: Manual de Identidade

#entrega04

adelaidejsousa — Fri, 30 Mar 2012 16:21:53 GMT

O objectivo para esta semana consiste na entrega da Especificação gráfica e técnica. Seguem-se os conteúdos que vão ser alvo de avaliação.

Especificação Gráfica

Sistema Visual - Para o desenvolvimento dos layouts do WIP, recorreu-se ao sistema 960gs (960 grid system) que faz uso de uma área de 960 pixels, adequado para resoluções de 1024x768 e maiores.

Index

(Estudo em escala de cinzas)

(Simulação com conteúdo)

Landing Page - Dividida em três colunas, uma com 200px e as outras duas com 370px;

(Escala de cinzas)

(Simulação com conteúdo a cinzas)

(Simulação com conteúdo)

Resultados da Pesquisa - Dividida em apenas duas colunas, uma com 200px e outra com 750px;

(Simulação com conteúdo a cinzas)

(Simulação com conteúdo)

Todas as páginas tem margens laterais de 32px. O index tem, para alem das margens laterais, uma margem inferior de 24px. Entre as diferentes colunas existe uma goteira de 10px indicada a magenta.

Para completar o módulo da especificação gráfica foi realizado um manual de identidade da marca, que pode ser consultado aqui Manual de Identidade WIP

Especificação Técnica

Arquitectura do Sistema - A especificação começa pelo modelo\arquitectura do sistema. O esquema seguinte representa a relação entre as várias componentes do projecto (hardware e software) assim como do lado do servidor e do cliente. No lado do servidor é processada informação que será depois apresentada no lado do cliente através de um browser e com recurso a HTML.

Mapa de navegação - O mapa de navegação evidencia as páginas principais da aplicação, e as funcionalidades presentes em cada uma delas. É possivel tambem verificar o a direcionalidade da informação, os tipos de utilizadores, e as páginas sempre presentes ao longo de toda a aplicação.

Fluxogramas

Para a realização dos fluxogramas foram escolhidas as funcionalidades que se consideram mais importantes na aplicação Web.

1) Registo e autenticação

O registo e a autentificação do utilizador, uma vez que sem elas, ninguém consegue ter acesso à aplicação e aos seus conteúdos, e também porque o grupo pretende implementar estas funcionalidades com recurso à API do facebook.

2) Pesquisa

o cerne da nossa aplicação é a pesquisa, uma vez que tudo se centra na pesquisa de ofertas de emprego.

3) Recomendação de ofertas por parte do sistema

A aplicação será capaz de recomendar ofertas de emprego, com base nos interesses do utilizador, ou nas ofertas que este tenha visualizado.

Base de dados

Identificação das tabelas

Utilizador -> tabela que guarda toda a informação dos utilizadores.

utilizador_has_categorias -> tabela onde são guardados os interesses dos utilizadores.

Categorias ->tabela que guarda as categorias das ofertas (que são também os interesses dos utilizadores).

Follow-> tabela que guarda quais os utilizadores seguidos, e quais os utilizadores seguidores.

not_recomendacao-> tabela que guarda as notificações dos utilizadores, assim como as ofertas que foram recomendadas aos utilizadores por outros utilizadores da aplicação.

Curriculum-> tabela que guarda a informação do currículo do utilizador

curriculum_univ-> tabela que guarda a informação das universidades que o utilizador frequentou.

Ofertas-> tabela que guarda a diversa informação das várias ofertas.

Distritos-> tabela com os distritos de Portugal.

Concelhos-> tabela dos concelhos de Portugal

ofertas_visualizadas-> guarda as ofertas que o utilizador visualizou.

ver_mais_tarde-> guarda as ofertas que o utilizador marcou como favoritas para ver mais tarde.

Empresas-> tabela que guarda a informação das empresas.

cliente_externo-> tabela que guarda os clientes importantes das empresas (adicionado pelas empresas).

cliente_has_empresa->identifica quais os clientes de uma determinada empresa.

cliente_empresa-> tabela que guarda os clientes importantes das empresas(neste caso, uma empresa registada na aplicação pode ser cliente de outra empresa, também registada).

Videos-> tabela que guarda o link para os videos de uma determinada empresa.

Fotos->tabela que guarda o link das fotografias de uma determinada empresa.

Sector-> tabela que refere os sectores que uma empresa se pode inserir.

comentarios-> tabela que guarda os comentários efectuados pelos utilizadores a uma determinada empresa.

É possível aceder ao ficheiro PDF da base de dados final através deste link: Base de Dados Final WIP

Concluindo:

Com a realização desta especificação técnica foi possível compreender como funciona a arquitectura lógica e física do nosso projecto, em conjunto com as duas outras vertentes (mobile+itv). A realização da base de dados foi uma tarefa complicada, mas fulcral uma vez que é comum a todas as vertentes.

Referências:

http://960.gs/ - 960 Grid System;

http://www.gliffy.com/ - Online Diagram software and flow chart

http://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/

http://www.fontsquirrel.com/

http://kuler.adobe.com/

2007, Boulton - Grids are Good;

Slides das aulas de Projecto;

Entrega TP04 | Especificação técnica e gráfica

nelsontaleite — Fri, 15 Apr 2011 14:38:28 GMT

Boas!

Esta entrega consiste nas características que a implementação do sistema deverá apresentar, e é o módulo onde o ambiente e linguagens a utilizar durante o desenvolvimento devem ficar completa e definitivamente definido. Isto no que diz respeito à especificação técnica.

Quanto à especificação gráfica, tivemos que estudar a imagem da marca: estudos gráfico, cromático, tipográfico, de interfaces e de interacção.

ESPECIFICAÇÃO TÉCNICA

Modelo / Arquitectura do Sistema

Representação das relações entre as diferentes componentes (software e hardware)

Começamos então pela arquitectura de alto nível:

Na imagem que se segue apresentamos a arquitectura de baixo nível:

Mapa de navegação

Diferentes caminhos que o utilizador pode percorrer e áreas associadas a cada funcionalidade

Fluxogramas das principais funcionalidades

Representa os processos

Fluxogramas.pdf

Modelo de base de dados

Define a forma como os dados são guardados, organizados, manipulados e relacionados

Base de dados (rar): FindMemories_(Schema_-_memoriasAveiro).rar

Um preview da base de dados:

ESPECIFICAÇÃO GRÁFICA

Nome / Conceito

Verdade seja dita que encontrar um nome alternativo para o projecto não foi tarefa fácil. Partimos de "Memórias de Aveiro", nome original do projecto, e aventuramo-nos então numa jornada à procura de um nome novo. Como tal, começamos a "disparar ideias" e esboçamos um mindmap:

Findos os estudos, surgiu então "a luz", passadas bastantes tentativas fracassadas:

FINDMEMORIES

O nome utilizado remete para a essência da plataforma. Esta possibilita à comunidade a partilha e georreferenciação de fotografias, que retratem a evolução temporal de um dado espaço urbano. O principal objectivo da plataforma é encontrar memórias, facto que justifica o nome dado à mesma.

As fotografias partilhadas no FindMemories deverão estimular e avivar a memória, o que se traduzirá em recordações. Optou-se por utilizar o idioma em inglês, dado que permitirá uma maior facilidade na expansão a nível internacional.

Logótipo

Aqui estão os primeiros estudos/rascunhos do logótipo:

Na sequência destes estudos chegamos a uma versão final do logótipo (real e monocromático), bem como a sua versão complementar, que servirá também de favicon.

E o porquê do logotipo ser laranja [#EE3E24]?

A escolha da cor deve-se ao facto de ser vibrante, forte, jovem, lúcida, amigável, confortável, libertadora, enérgica. Qualidades que reflectem os valores e objectivos da marca. A nível técnico, por ser uma cor quente, realça a representação da informação e melhora alguns aspectos cognitivos, tais como a eficiência do olhar, que faz perdurar na nossa mente a mancha de cor visualizada. Esta também está associada ao desenvolvimento intelectual e à vitalidade.

De seguida estão presentes as reduções de escala e a área de protecção do logótipo

Estas e outras informações encontram-se no manual de identidade

Open publication - Free publishing - More identidade

Estudo da grelha (goteiras, baseline grid, micro e macro base units)

Para a construção da grelha dividiu-se a página em 9 grandes colunas (com 100 px cada), 8 goteiras (de 10px) e uma margem de 44px, ou seja, 22px à esquerda e outros tantos à direita. Isto resulta numa área útil de 980px, uma área relativamente extensa, que é o que o projecto precisa, devido ao uso de mapas: quanto mais "espaço", mais área de visualização haverá; e resulta numas margens com espaço suficiente para a scrollbar, sem desformatar ou sobrepor o layout.

Composição de ecrãs únicos

Em relação ao layout, é de design minimalista, clean, à base de linhas rectas (KISS - Keep It Simple [http://pt.wikipedia.org/wiki/Keep_It_Simple] )

Open publication - Free publishing - More estudo

PDF: bruno-brandao.com/pdf/estudo_grelha.pdf

Quanto aos ecrãs, apenas um ponto a referir: não respeitamos nem seguimos cegamente a grelha, pois há conteúdos que terminam a meio de uma macro unidade.

“ The grid system is an aid, not a guarantee.

It permits a number of possible uses and each

designer can look for a solution appropriate to his

personal style. But one must learn how to use the

grid; it is an art that requires practice. ”

Josef Müller-Brockmann

http://www.thegridsystem.org/

Biblioteca dos estados de ícones e controlos

Relativamente aos controlos, o seu estudo só faz sentido se, efectivamente, forem outros que não os "por defeito". Então, visto que serão utilizados os controlos por defeito, não foi realizado o seu estudo.

Quanto aos ícones, aqui estão os que são usados no website:

Todos os ícones, à excepção do primeiro (o mapa), serão utilizados como botões.

De referir ainda que não serão alterados os seus estados, isto é, mesmo em mouseover, os ícones não se alteram.

Especificações cromáticas

Em primeiro lugar, aqui revelamos a palete do nosso site, onde "brincamos" com cinzentos e o laranja do logótipo, para contrastar e não tornar a aplicação monótona.

Apresentamos ainda o estudo cromático, com as cores utilizadas na plataforma, com a respectiva transparência (a 50%), bem como as cores relativas às mensagens de feedback ao utilizador.

Especificações tipográficas

Será utilizada a tipografia Arial. Em primeiro lugar porque é um tipo de letra sem serifa, o que proporciona uma melhor leitura em ecrã. Em segundo lugar porque está de acordo como a restante linha gráfica. Segundo o typetester.org (aplicação para comparar simultaneamente vários tipos de letra) é o tipo de letra mais requisitado e utilizado pela comunidade.

É ainda uma fonte condensada, ou seja, cumpre os requisitos fundamentais para a plataforma, dado que as zonas de espaço disponíveis para colocar informação são reduzidas. A Arial permite uma fácil leitura e é familiar a todos os utilizadores, até porque é uma fonte de sistema.

Para concluir

Podemos concluir com convicção que a presente entrega foi extremamente importante para a próxima fase que se aproxima, na medida em que contribuirá para a continuação da elaboração do nosso projecto, a começar já pelo protótipo. Nesta entrega foram trabalhados e esquematizados todos os detalhes da especificação técnica e gráfica, o que fez com que ficassem delineados o ambiente e linguagens a utilizar, tal como a imagem da marca. Neste sentido foi desenvolvido o layout do website com as respectivas grelhas, goteiras, medidas, entre outras especificações enumeradas anteriormente ao longo do post.
Estes estudos ajudaram o grupo a perceber a necessidade das especificações, pois assim a margem para erro será diminuta, nomeadamente ao nível das especificidades técnicas, que ficaram todas resolvidas e explicadas e ao nível gráfico, onde já se começaram a definir regras e a surgir a linha gráfica de toda a aplicação.
Isto ajudou também o grupo a clarificar as tarefas que irá desenvolver posteriormente no âmbito do projecto.

Work in progress - Fluxograma upload dos filmes

domingos-martins — Fri, 15 Apr 2011 09:19:40 GMT

Fluxograma Preliminar

ricardodcarvalho — Fri, 16 Apr 2010 05:05:02 GMT

Este é o fluxograma preliminar ajustado à nova configuração do layout da aplicação. Provavelmente ainda necessitará de alguns ajustes, mas gostaríamos de ter algum feedback dos professores... ou alunos.

Fluxograma

Este post é em nome de todos os elementos do grupo João Elvas | Martim Santos | Renato Costa | Ricardo Carvalho | Tiago Figueiredo

Fluxograma :: 1ª Abordagem

marianasantos — Wed, 07 Apr 2010 09:28:07 GMT

Após apresentação das novas etapas a serem cumpridas para a próxima avaliação, o grupo encontra-se perante os seguintes objectivos:

- Modelo/arquitectura de sistema

- Mapa de navegação

- Fluxogramas detalhados das funções principais

- Modelo da base de dados

Neste seguimento, procedeu-se à realização do fluxograma de registo e login de utilizadores que se encontra ainda em fase de desenvolvimento, desde 6 de Abril de 2010.

Clicar na imagem para visualizar ficheiro em formato PDF.

O grupo,

Carla Duarte, Mariana Santos, Rúben Pio, Rui Estrelinha