WIP Mobile- Especificação Gráfica e Técnica

27
  Página 1 de 27 Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Work In Perspective Mobile Especificação Gráfica e Especificação Técnica

Transcript of WIP Mobile- Especificação Gráfica e Técnica

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 1/27

 

Página 1 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Work In PerspectiveMobile

Especificação Gráfica e Especificação Técnica

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 2/27

 

Página 2 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Índice

Índice ............................................................................................................................................. 2

Introdução ..................................................................................................................................... 3

Especificação Gráfica ..................................................................................................................... 4

Estudo Gráfico ........................................................................................................................... 5

Logótipo................................................................................................................................. 5

Ícones e Controlos ................................................................................................................. 6

Estudo Cromático ...................................................................................................................... 8

Estudo Tipográfico..................................................................................................................... 9

Estudo de Interfaces................................................................................................................ 10

Estudos de Grelhas .............................................................................................................. 10

Estudos de Cinzentos .......................................................................................................... 13

Estudos de Simulação .......................................................................................................... 16

Especificação Técnica .................................................................................................................. 19

Mapa de Navegação ................................................................................................................ 19

Modelo/ Arquitetura do Sistema ............................................................................................ 20

Fluxogramas das funções principais ........................................................................................ 22

Modelo de base de dados ....................................................................................................... 24

Conclusão .................................................................................................................................... 27

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 3/27

 

Página 3 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

IntroduçãoAtravés do manual de especificação gráfica e especificação técnica, pretende-se

consolidar e especificar mais detalhadamente as soluções delineadas para a

implementação da aplicação.

Mais concretamente, a elaboração da especificação gráfica permite a criação e

apresentação de toda a identidade gráfica do projeto, como o logótipo, ícones, sistema

cromático e tipográfico, entre outros.

Já a nível de especificação técnica, esta pretende caracterizar a implementação

técnica das funcionalidades da aplicação. 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 4/27

 

Página 4 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Especificação Gráfica

Para a criação da identidade visual da marca, é necessário recorrer à elaboração

de vários componentes chave, de forma a estes fazerem transparecer para o utilizador

os valores e características que diferenciam a marca da concorrência.

Estas componentes-chave da especificação gráfica serão detalhadamente

explicadas neste documento, estando organizadas da seguinte forma:

•  Estudo Gráfico

•  Estudo Cromático

•  Estudo Tipográfico

•  Estudo de Interfaces

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 5/27

 

Página 5 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Estudo Gráfico

LogótipoO projeto Work In Perspective é um projeto que se encontra a ser

desenvolvido simultaneamente para três plataformas: televisão, internet e dispositivosmóveis Android , sendo que cada uma destas plataformas está atribuída a um grupo.

É um projeto que exige uma grande cooperação entre os três grupos

responsáveis, não só a nível de desenvolvimentos técnicos e gráficos, como também a

nível especialmente de tomadas de decisão. Para facilitar estes mesmos processos, foi

decidido que cada grupo iria elaborar individualmente alternativas gráficas, para mais

tardiamente serem todas analisadas e apenas uma escolhida para ser aplicada nas três

plataformas do WIP.

Assim sendo, apresentamos aqui neste estudo as duas alternativas elaboradas

por nós para o logótipo da aplicação:

Fig.1- Alternativa para o logótipo

Fig.2- Alternativa para o logótipo

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 6/27

 

Página 6 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

O logótipo representado na Figura 1 é constituído por três elementos: uma

representação simbólica de uma fábrica, prédio e ao mesmo tempo uma mão do

utilizador; uma lupa e ainda a assinatura da aplicação. Utilizamos esta junção de

elementos pois achamos que no fundo representa bem as capacidades do WIP, que é a

procura de propostas de emprego através de um clique ou mais concretamente nonosso caso, num toque de dedo no ecrã de um dispositivo Android .

No logótipo representado na Figura 2 o conceito é bastante semelhante ao

referido anteriormente, mas um pouco mais desviado do conceito de fábrica, e mais

inclinado para uma infraestrutura mais contemporânea.

Ícones e ControlosEm toda a aplicação o utilizador irá encontrar diferentes ícones e controlos

representativos de ações que pode efetuar no Work In Perspective.

Os ícones são todos originários e nativos dos dispositivos  Android , facilitando

assim o seu reconhecimento e utilização apropriada, variando apenas a sua cor de

acordo com a palete de cores escolhida.

Fig.3- Ícones da aplicação quando aplicados em fundo branco e fundo preto 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 7/27

 

Página 7 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.4- Ícones da aplicação quando pressionados em fundo branco e fundo preto

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 8/27

 

Página 8 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Estudo Cromático

A paleta de cores definida para o projeto é aplicada para organizar, diferenciar,

clarificar e destacar os elementos utilizados na aplicação. Mais concretamente, o

esquema de cores é o seguinte:

R: 45; G: 88; B: 115;

C: 87,06%; M: 60,78%; Y: 37,25%; K: 17,65%;

R: 158; G: 191; B: 59;

C: 47,92%; M: 7,06%; Y: 100,00%; K: 0,00%;

R: 196; G: 217; B: 115;

C: 26,27%; M: 0,78%; Y: 70,59%; K: 0,00%;

R: 228; G: 237; B: 182;

C: 11,37%; M: 0,00%; Y: 35,69%; K: 0,00%;

R: 228; G: 237; B: 182;

C: 11,37%; M: 0,00%; Y: 35,69%; K: 0,00%;

A cor azul é utilizada na nossa aplicação para transmitir ao utilizador alguma

tranquilidade e subtileza. Esta é uma cor também bastante ligada à formalidade, e ao

mesmo tempo transmite estabilidade e serenidade à aplicação.

Este esquema de verdes foi escolhido propositadamente para dar alguma

profundidade aos menus e às pesquisas feitas na aplicação. É também uma cor que

está intimamente ligada às cores nativas do Android .

Já o laranja, é uma cor bastante quente, vibrante, forte e modernista. Por estas

razões, achamos que é uma cor bastante adequada para ser utilizada nas informações

de notificação e alertas da aplicação.

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 9/27

 

Página 9 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Estudo TipográficoA fonte escolhida para ser utilizada na aplicação foi a Open Sans. Esta fonte foi

criada por Steve Mattesson, sendo ela open-source, humanista e não-serifada, estando

disponível no diretório Google Fonts para utilização livre. É uma fonte com um estilo

considerado muito amigável para o utilizador, de fácil leitura e que está otimizada paraimpressões, internet e dispositivos móveis.

É conveniente referir que será utilizada a Open Sans Regular em todos os textos

da aplicação, sendo estes com tamanho de 12px. A única exceção será feita aos títulos,

onde será utilizada a Open Sans Bold , com um tamanho definido de 14px.

Open Sans Regular 

abcdefghijklmnopqrstuvwxyz

ÃÂÁÀÊÇ€%*+?!1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ 

Open Sans Bold abcdefghijklmnopqrstuvwxyz

ÃÂÁÀÊÇ€%*+?!1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 10/27

 

Página 10 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Estudo de Interfaces 

Estudos de GrelhasA definição dos esquemas de grelha por vezes parece ser desprovida da

importância que exerce na definição do layout  de uma aplicação. A essência dasgrelhas é sobretudo a organização. Uma utilização eficaz e interessante da aplicação

exige um bom equilíbrio de estética e das funcionalidades, de forma a ser uma

experiência informativa mas também visualmente interessante, mantendo sempre a

atenção do utilizador.

Por estes mesmos fatores, desenvolvemos os esquemas de grelhas dos ecrãs

únicos do Work In Perspective, utilizando uma resolução de 800x480 pixéis:

Fig.5- Representação da grelha do ecrã de “Login” com as respetivas medidas 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 11/27

 

Página 11 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.6- Representação da grelha do ecrã da “Landing Page” com as respetivas medidas

Fig.7- Representação da grelha do ecrã de “Preferências” com as respetivas medidas 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 12/27

 

Página 12 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.8- Representação da grelha do ecrã de “Detalhes da Oferta/Empresa” com as

respetivas medidas 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 13/27

 

Página 13 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Estudos de CinzentosOs estudos de cinzentos são o passo seguinte à definição das grelhas. Uma vez

que neste ponto ainda não existem os elementos definidos para colocar na grelha,

utilizam-se formas em escalas de cinzentos de forma a preencher os espaços vazios,

sendo mais tarde substituídos pelos elementos finais. Com a utilização de diferentesníveis de cinzentos, dá-se algum relevo e distinção na colocação das formas em cinza. 

Fig.9- Escala de cinzentos do ecrã de “Login” com as respetivas medidas 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 14/27

 

Página 14 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.10- Escala de cinzentos do ecrã da “Landing Page” com as respetivas medidas

Fig.11- Escala de cinzentos do ecrã de “Preferências” com as respetivas medidas

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 15/27

 

Página 15 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.12- Escala de cinzentos do ecrã de “Detalhes da Oferta/Empresa” com as respetivas

medidas

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 16/27

 

Página 16 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Estudos de SimulaçãoCom os estudos de simulação pretende-se ter já uma ideia muito semelhante

dos elementos que irão aparecer na versão final da aplicação, como as suas cores,

disposição no ecrã e testes de legibilidade da informação.

Fig.13- Simulação do ecrã de “Login” com as respetivas medidas

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 17/27

 

Página 17 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.14- Simulação do ecrã da “Landing Page” com as respetivas medidas 

Fig.15- Simulação do ecrã de “Preferências” com as respetivas medidas

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 18/27

 

Página 18 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.16- Simulação do ecrã de “Detalhes da Oferta/Empresa” com as respetivas medidas 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 19/27

 

Página 19 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Especificação Técnica

Mapa de NavegaçãoUm mapa de navegação tem a função de ilustrar todos os “caminhos” que o

utilizador pode correr dentro da aplicação.

Mal entra na aplicação, o utilizador tem acesso à página de Login, estando

circunscrito a esta e às páginas de “FAQ’s” e “ About” se não tiver um registo válido.

Depois de validada esta exigência, o utilizador é reencaminhado para a “Landing Page”  

da aplicação, onde são mostradas as ofertas mais recentes a entrarem no sistema do

WIP. Além disto, o utilizador tem sempre acessíveis a qualquer momento abas com

ligações para o seu perfil, preferências e amigos na aplicação.

Na figura em baixo estão ainda destacadas a azul as funcionalidades da

aplicação.

Fig.17- Mapa de Navegação do Work In Perspective 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 20/27

 

Página 20 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Modelo/ Arquitetura do Sistema

No esquema presente na página seguinte, podemos ver que a arquitetura do

sistema em questão começa no Utilizador  da aplicação, que engloba o Utilizador Registado/Não-Registado e Administrador , que ao interagir com a aplicação vai

despontar as instruções em código  Javascript (correndo assim a aplicação e todas as

funcionalidades desta) e um ficheiro XML que permite que a aplicação consiga realizar

os “pedidos” ao servidor e à base de dados.

Para realizar estes pedidos, é no entanto necessário que exista uma ligação à

internet. O dispositivo móvel deverá então ligar-se à internet através da ligação de

dados do seu operador de rede ou pelo acesso WIFI, estabelecendo assim uma ligação

com o servidor do Work In Perspective.

Ultrapassada esta fase, encontramo-nos numa etapa em que haverá constantes

trocas de informações entre a  API do Google Maps, cuja função é fornecer os dados

necessários para a georreferenciação a fim de filtrar as ofertas consoante a localização

em que o utilizador se encontrar. Articulada à comunicação que esta  API executa,

temos também a  API do Facebook , que permite ao utilizador fazer o seu registo no

WIP por via desta rede social. Como ambas as  API’s estão ligadas á aplicação via

internet, a forma de comunicar com o servidor é por pedidos HTTP, que ao serem

feitos ao servidor Web, este por sua vez fará a comunicação com a base de dados

MySQL através de instruções em linguagem PHP. 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 21/27

 

Página 21 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.18- Esquema da arquitectura do Work In Perspective

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 22/27

 

Página 22 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fluxogramas das funções principaisA elaboração de fluxogramas é uma boa solução de ilustração e representação

esquemática dos processos algorítmicos que ocorrem ao haver interacção com a

aplicação.

As figuras seguintes demonstram então os fluxogramas das principais

funcionalidades do Work In Perspective.

Fig.19- Fluxograma do algoritmo do “Login” no Work In Perspective 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 23/27

 

Página 23 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.20- Fluxograma do algoritmo de “Pesquisa” no Work In Perspective 

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 24/27

 

Página 24 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Modelo de base de dadosConjuntamente com os docentes desta unidade curricular e com os

orientadores das três plataformas do Work In Perspective, decidimos elaborar a base

de dados em conjunto, sendo esta partilhada e usada por todos.

Identificação Das Tabelas da Base de Dados do WIP 

Nome da Tabela  Descrição 

utilizador Referente a toda a informação dos

utilizadores.

utilizador_has_categorias  Referente aos interesses dos utilizadores.

categorias 

Referente às várias categorias tanto das

ofertas como dos utilizadores(interesses).

follow Identificação de quais os utilizadores que

estão a seguir outros utilizadores.

not_recomendacao 

Permite identificar as notificaçõesreferentes aos utilizadores bem como

identificar as ofertas que foramrecomendadas aos utilizadores por parte

dos amigos/seguidores.

curriculum 

Permite ao utilizador armazenar a

informação relativa ao seu currículoinserido num formulário na componente

web.

curriculum_univ Armazena as informações sobre as

universidades que os utilizadores inseremno seu currículo.

ofertas Referente à informação das várias

ofertas.

ofertas_visualizadas Armazena as ofertas que foram

previamente visualizadas por um

determinado utilizador.

ver_mais_tarde Identificação das ofertas que foram

adicionadas pelo utilizador para ver maistarde.

distritos  Referente aos vários distritos de Portugal.

concelhos Identificação dos vários concelhos tendo

em conta o distrito referente.

empresas Referente à informação das várias

empresas.

cliente_externo Armazena todos os clientes mais

importantes adicionados pelas empresasatravés de um formulário online.

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 25/27

 

Página 25 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

cliente_has_empresaIdentifica quais os clientes associados a

uma determinada empresa.

cliente_empresa

Armazena as empresas (que estejamregistadas na aplicação) como clientes

mais importantes para as empresas daaplicação.

comentariosReferente aos comentários efetuados a

uma determinada empresa por umdeterminado utilizador.

videosReferente ao endereço dos vídeos

associados a uma determinada empresa.

fotosReferente ao endereço das fotografias

associados a uma determinada empresa.

sectorReferente ao sector em que determinada

empresa se insere. 

Através da tabela anterior, conseguimos precisaras tabelas existentes na base

de dados, assim como qual o seu propósito e função no armazenamento de

informação. De referir ainda que esta lista foi elaborada pelo grupo responsável pela

plataforma da televisão.

Para complementar a lista das tabelas da base de dados, está colocado na

página seguinte deste documento o diagrama EER elaborado no MySQL Workbench.

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 26/27

 

Página 26 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Fig.21- Diagrama EER da base de dados do Work In Perspective

5/14/2018 WIP Mobile- Especifica o Gr fica e T cnica - slidepdf.com

http://slidepdf.com/reader/full/wip-mobile-especificacao-grafica-e-tecnica 27/27

 

Página 27 de 27 

Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012

Conclusão 

Com a elaboração da especificação gráfica e técnica, conseguimos desenvolver

e compreender as especificidades gráficas e técnicas subjacentes ao projeto. Destaforma, ficam mais claras e organizadas as tarefas de implementação da aplicação,

diminuindo assim o seu grau de complexidade.