Especificação Gráfica e Técnica

Universidade de Aveiro
Projeto | DeCA |Ano Letivo 2011/2012

Work In Perspective
Mobile
Especificação Gráfica e Especificação Técnica

Página 1 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 2 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 3 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 4 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 5 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 6 de 27


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

Página 7 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 8 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 9 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 10 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 11 de 27


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

Página 12 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 13 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 14 de 27


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

Página 15 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 16 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 17 de 27


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

Página 18 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 19 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 20 de 27


Fig.18- Esquema da arquitectura do Work In Perspective

Página 21 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 22 de 27


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

Página 23 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
Referente a toda a informação dos
utilizador utilizadores.
utilizador_has_categorias Referente aos interesses dos utilizadores.
Referente às várias categorias tanto das
categorias ofertas como dos utilizadores
(interesses).
Identificação de quais os utilizadores que
follow estão a seguir outros utilizadores.
Permite identificar as notificações
referentes aos utilizadores bem como
not_recomendacao identificar as ofertas que foram
recomendadas aos utilizadores por parte
dos amigos/seguidores.
Permite ao utilizador armazenar a
informação relativa ao seu currículo
curriculum inserido num formulário na componente
web.
Armazena as informações sobre as
curriculum_univ universidades que os utilizadores inserem
no seu currículo.
Referente à informação das várias
ofertas ofertas.
Armazena as ofertas que foram
ofertas_visualizadas previamente visualizadas por um
determinado utilizador.
Identificação das ofertas que foram
ver_mais_tarde adicionadas pelo utilizador para ver mais
tarde.
distritos Referente aos vários distritos de Portugal.
Identificação dos vários concelhos tendo
concelhos em conta o distrito referente.
Referente à informação das várias
empresas empresas.
Armazena todos os clientes mais
cliente_externo importantes adicionados pelas empresas
através de um formulário online.
Página 24 de 27


Identifica quais os clientes associados a
cliente_has_empresa uma determinada empresa.
Armazena as empresas (que estejam
registadas na aplicação) como clientes
cliente_empresa mais importantes para as empresas da
aplicação.
Referente aos comentários efetuados a
comentarios uma determinada empresa por um
determinado utilizador.
Referente ao endereço dos vídeos
videos associados a uma determinada empresa.
Referente ao endereço das fotografias
fotos associados a uma determinada empresa.
Referente ao sector em que determinada
sector 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 25 de 27


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

Página 26 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.

Página 27 de 27

Especificação Gráfica e Técnica

Recommandé

Recommandé

Contenu connexe

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

Similaire à Especificação Gráfica e Técnica (20)

Especificação Gráfica e Técnica