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

sofia-cruz — Fri, 30 Mar 2012 22:56:40 GMT

Neste quarto módulo da UC de Projecto foi solicitado o desenvolvimento da especificação gráfica e técnica. Pretendia-se, portanto, desenvolver a identidade visual do Museu Virtual de Design Português, bem como a escolha de todos os aspectos técnicos inerentes.

Sendo assim, aqui apresentamos o manual de identidade visual da marca e um documento com todas as especificações gráficas e técnicas.

Manual de Identidade visual da marca:

Open publication - Free publishing - More marca

Manual de Identidade

Documento espeficificação gráfica e técnica:

Open publication - Free publishing - More museu virtual

Documento especificação gráfica e técnica

#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;

#entrega04

luisfbmelo — Fri, 30 Mar 2012 09:44:12 GMT

De acordo com o plano curricular da disciplina de Projecto, o objectivo desta semana consiste na entrega das especificações gráfica e técnica. Assim sendo, seguem os ficheiros referentes a cada uma das especificações.

Especificação gráfica

Manual_Projecto

Referências das guidelines utilizadas no desenvolvimento da especificação gráfica:

- Johansson, R. (2005). Accessibility and usability for interactive television | 456 Berea Street, a partir de http://www.456bereastreet.com/archive/200512/accessibility_and_usability_for_interactive_television/

- lasseklein. (2006). lasseklein.com >> Blog Archive >> Designing for television acedido a 19-03-2012, a partir de http://lasseklein.com/2006/09/designing-for-television/

- Google. Designing For TV - Google TV - Google Developers acedido a 20-03-2012, a partir de https://developers.google.com/tv/web/docs/design_for_tv

Especificação técnica

especificacao_tecnica

Download dos documentos:

- Manual de identidade visual da marca e do sistema visual da aplicação

- Documento de especificação técnica

- Base de dados