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.