Especificação Gráfica e Técnica

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

Página 2 de 27


Í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

Página 3 de 27


Introdução Atravé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.

Página 4 de 27


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

Página 5 de 27


Estudo Gráfico

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

desenvolvido simultaneamente para três plataformas: televisão, internet e dispositivos mó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

Página 6 de 27


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 no nosso 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 Controlos Em 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

Página 7 de 27


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

Página 8 de 27


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.

Página 9 de 27


Estudo Tipográfico A 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 para impressõ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

Página 10 de 27


Estudo de Interfaces Estudos de Grelhas

A 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 das grelhas é 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

Página 11 de 27


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

Página 12 de 27


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

Página 13 de 27


Estudos de Cinzentos Os 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 diferentes ní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

Página 14 de 27


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

Página 15 de 27


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

Página 16 de 27


Estudos de Simulação Com 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

Página 17 de 27


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

Página 18 de 27


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

Página 19 de 27


Especificação Técnica

Mapa de Navegação Um 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

Página 20 de 27


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.

Página 21 de 27


Fig.18- Esquema da arquitectura do Work In Perspective

Página 22 de 27


Fluxogramas das funções principais A 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

Página 23 de 27


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

Página 24 de 27


Modelo de base de dados Conjuntamente 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ções referentes aos utilizadores bem como

identificar as ofertas que foram recomendadas aos utilizadores por parte

dos amigos/seguidores.

curriculum

Permite ao utilizador armazenar a informação relativa ao seu currículo

inserido num formulário na componente web.

curriculum_univ Armazena as informações sobre as

universidades que os utilizadores inserem no 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 mais tarde.

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 empresas através de um formulário online.

Página 25 de 27


cliente_has_empresa Identifica quais os clientes associados a uma determinada empresa.

cliente_empresa

Armazena as empresas (que estejam registadas na aplicação) como clientes mais importantes para as empresas da

aplicação.

comentarios Referente aos comentários efetuados a

uma determinada empresa por um determinado utilizador.

videos Referente ao endereço dos vídeos associados a uma determinada empresa.

fotos Referente ao endereço das fotografias associados a uma determinada empresa.

sector Referente 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.

Página 26 de 27


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

Página 27 de 27


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. Desta forma, ficam mais claras e organizadas as tarefas de implementação da aplicação, diminuindo assim o seu grau de complexidade.

Documents

Especificação Gráfica e Técnica