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

Work In Perspective Mobile

Especificao Grfica e Especificao Tcnica

Pgina 1 de 27

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

ndice

ndice ............................................................................................................................................. 2 Introduo ..................................................................................................................................... 3 Especificao Grfica..................................................................................................................... 4 Estudo Grfico ........................................................................................................................... 5 Logtipo................................................................................................................................. 5 cones e Controlos ................................................................................................................. 6 Estudo Cromtico ...................................................................................................................... 8 Estudo Tipogrfico..................................................................................................................... 9 Estudo de Interfaces................................................................................................................ 10 Estudos de Grelhas .............................................................................................................. 10 Estudos de Cinzentos .......................................................................................................... 13 Estudos de Simulao.......................................................................................................... 16 Especificao Tcnica .................................................................................................................. 19 Mapa de Navegao ................................................................................................................ 19 Modelo/ Arquitetura do Sistema ............................................................................................ 20 Fluxogramas das funes principais........................................................................................ 22 Modelo de base de dados ....................................................................................................... 24 Concluso .................................................................................................................................... 27

Pgina 2 de 27

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

Introduo
Atravs do manual de especificao grfica e especificao tcnica, pretende-se consolidar e especificar mais detalhadamente as solues delineadas para a implementao da aplicao. Mais concretamente, a elaborao da especificao grfica permite a criao e apresentao de toda a identidade grfica do projeto, como o logtipo, cones, sistema cromtico e tipogrfico, entre outros. J a nvel de especificao tcnica, esta pretende caracterizar a implementao tcnica das funcionalidades da aplicao.

Pgina 3 de 27

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

Especificao Grfica
Para a criao da identidade visual da marca, necessrio recorrer elaborao de vrios componentes chave, de forma a estes fazerem transparecer para o utilizador os valores e caractersticas que diferenciam a marca da concorrncia. Estas componentes-chave da especificao grfica sero detalhadamente explicadas neste documento, estando organizadas da seguinte forma: Estudo Grfico Estudo Cromtico Estudo Tipogrfico Estudo de Interfaces

Pgina 4 de 27

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

Estudo Grfico
Logtipo O projeto Work In Perspective um projeto que se encontra a ser desenvolvido simultaneamente para trs plataformas: televiso, internet e dispositivos mveis Android, sendo que cada uma destas plataformas est atribuda a um grupo. um projeto que exige uma grande cooperao entre os trs grupos responsveis, no s a nvel de desenvolvimentos tcnicos e grficos, como tambm a nvel especialmente de tomadas de deciso. Para facilitar estes mesmos processos, foi decidido que cada grupo iria elaborar individualmente alternativas grficas, para mais tardiamente serem todas analisadas e apenas uma escolhida para ser aplicada nas trs plataformas do WIP. Assim sendo, apresentamos aqui neste estudo as duas alternativas elaboradas por ns para o logtipo da aplicao:

Fig.1- Alternativa para o logtipo

Fig.2- Alternativa para o logtipo

Pgina 5 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 O logtipo representado na Figura 1 constitudo por trs elementos: uma representao simblica de uma fbrica, prdio e ao mesmo tempo uma mo do utilizador; uma lupa e ainda a assinatura da aplicao. Utilizamos esta juno de elementos pois achamos que no fundo representa bem as capacidades do WIP, que a procura de propostas de emprego atravs de um clique ou mais concretamente no nosso caso, num toque de dedo no ecr de um dispositivo Android. No logtipo representado na Figura 2 o conceito bastante semelhante ao referido anteriormente, mas um pouco mais desviado do conceito de fbrica, e mais inclinado para uma infraestrutura mais contempornea.

cones e Controlos Em toda a aplicao o utilizador ir encontrar diferentes cones e controlos representativos de aes que pode efetuar no Work In Perspective. Os cones so todos originrios e nativos dos dispositivos Android, facilitando assim o seu reconhecimento e utilizao apropriada, variando apenas a sua cor de acordo com a palete de cores escolhida.

Fig.3- cones da aplicao quando aplicados em fundo branco e fundo preto

Pgina 6 de 27

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

Fig.4- cones da aplicao quando pressionados em fundo branco e fundo preto

Pgina 7 de 27

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

Estudo Cromtico
A paleta de cores definida para o projeto aplicada para organizar, diferenciar, clarificar e destacar os elementos utilizados na aplicao. 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 aplicao para transmitir ao utilizador alguma tranquilidade e subtileza. Esta uma cor tambm bastante ligada formalidade, e ao mesmo tempo transmite estabilidade e serenidade aplicao. Este esquema de verdes foi escolhido propositadamente para dar alguma profundidade aos menus e s pesquisas feitas na aplicao. tambm uma cor que est intimamente ligada s cores nativas do Android. J o laranja, uma cor bastante quente, vibrante, forte e modernista. Por estas razes, achamos que uma cor bastante adequada para ser utilizada nas informaes de notificao e alertas da aplicao.

Pgina 8 de 27

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

Estudo Tipogrfico
A fonte escolhida para ser utilizada na aplicao foi a Open Sans. Esta fonte foi criada por Steve Mattesson, sendo ela open-source, humanista e no-serifada, estando disponvel no diretrio Google Fonts para utilizao livre. uma fonte com um estilo considerado muito amigvel para o utilizador, de fcil leitura e que est otimizada para impresses, internet e dispositivos mveis. conveniente referir que ser utilizada a Open Sans Regular em todos os textos da aplicao, sendo estes com tamanho de 12px. A nica exceo ser feita aos ttulos, 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

Pgina 9 de 27

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

Estudo de Interfaces
Estudos de Grelhas A definio dos esquemas de grelha por vezes parece ser desprovida da importncia que exerce na definio do layout de uma aplicao. A essncia das grelhas sobretudo a organizao. Uma utilizao eficaz e interessante da aplicao exige um bom equilbrio de esttica e das funcionalidades, de forma a ser uma experincia informativa mas tambm visualmente interessante, mantendo sempre a ateno do utilizador. Por estes mesmos fatores, desenvolvemos os esquemas de grelhas dos ecrs nicos do Work In Perspective, utilizando uma resoluo de 800x480 pixis:

Fig.5- Representao da grelha do ecr de Login com as respetivas medidas

Pgina 10 de 27

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

Fig.6- Representao da grelha do ecr da Landing Page com as respetivas medidas

Fig.7- Representao da grelha do ecr de Preferncias com as respetivas medidas

Pgina 11 de 27

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

Fig.8- Representao da grelha do ecr de Detalhes da Oferta/Empresa com as respetivas medidas

Pgina 12 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Estudos de Cinzentos Os estudos de cinzentos so o passo seguinte definio das grelhas. Uma vez que neste ponto ainda no existem os elementos definidos para colocar na grelha, utilizam-se formas em escalas de cinzentos de forma a preencher os espaos vazios, sendo mais tarde substitudos pelos elementos finais. Com a utilizao de diferentes nveis de cinzentos, d-se algum relevo e distino na colocao das formas em cinza.

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

Pgina 13 de 27

Universidade de Aveiro Projeto | 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 Preferncias com as respetivas medidas

Pgina 14 de 27

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

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

Pgina 15 de 27

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Estudos de Simulao Com os estudos de simulao pretende-se ter j uma ideia muito semelhante dos elementos que iro aparecer na verso final da aplicao, como as suas cores, disposio no ecr e testes de legibilidade da informao.

Fig.13- Simulao do ecr de Login com as respetivas medidas

Pgina 16 de 27

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

Fig.14- Simulao do ecr da Landing Page com as respetivas medidas

Fig.15- Simulao do ecr de Preferncias com as respetivas medidas

Pgina 17 de 27

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

Fig.16- Simulao do ecr de Detalhes da Oferta/Empresa com as respetivas medidas

Pgina 18 de 27

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

Especificao Tcnica
Mapa de Navegao
Um mapa de navegao tem a funo de ilustrar todos os caminhos que o utilizador pode correr dentro da aplicao. Mal entra na aplicao, o utilizador tem acesso pgina de Login, estando circunscrito a esta e s pginas de FAQs e About se no tiver um registo vlido. Depois de validada esta exigncia, o utilizador reencaminhado para a Landing Page da aplicao, onde so mostradas as ofertas mais recentes a entrarem no sistema do WIP. Alm disto, o utilizador tem sempre acessveis a qualquer momento abas com ligaes para o seu perfil, preferncias e amigos na aplicao. Na figura em baixo esto ainda destacadas a azul as funcionalidades da aplicao.

Fig.17- Mapa de Navegao do Work In Perspective

Pgina 19 de 27

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

Modelo/ Arquitetura do Sistema

No esquema presente na pgina seguinte, podemos ver que a arquitetura do sistema em questo comea no Utilizador da aplicao, que engloba o Utilizador Registado/No-Registado e Administrador, que ao interagir com a aplicao vai despontar as instrues em cdigo Javascript (correndo assim a aplicao e todas as funcionalidades desta) e um ficheiro XML que permite que a aplicao consiga realizar os pedidos ao servidor e base de dados. Para realizar estes pedidos, no entanto necessrio que exista uma ligao internet. O dispositivo mvel dever ento ligar-se internet atravs da ligao de dados do seu operador de rede ou pelo acesso WIFI, estabelecendo assim uma ligao com o servidor do Work In Perspective. Ultrapassada esta fase, encontramo-nos numa etapa em que haver constantes trocas de informaes entre a API do Google Maps, cuja funo fornecer os dados necessrios para a georreferenciao a fim de filtrar as ofertas consoante a localizao em que o utilizador se encontrar. Articulada comunicao que esta API executa, temos tambm a API do Facebook, que permite ao utilizador fazer o seu registo no WIP por via desta rede social. Como ambas as APIs esto ligadas aplicao 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 comunicao com a base de dados MySQL atravs de instrues em linguagem PHP.

Pgina 20 de 27

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

Fig.18- Esquema da arquitectura do Work In Perspective

Pgina 21 de 27

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

Fluxogramas das funes principais

A elaborao de fluxogramas uma boa soluo de ilustrao e representao esquemtica dos processos algortmicos que ocorrem ao haver interaco com a aplicao. As figuras seguintes demonstram ento os fluxogramas das principais funcionalidades do Work In Perspective.

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

Pgina 22 de 27

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

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

Pgina 23 de 27

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

Modelo de base de dados

Conjuntamente com os docentes desta unidade curricular e com os orientadores das trs plataformas do Work In Perspective, decidimos elaborar a base de dados em conjunto, sendo esta partilhada e usada por todos.

Identificao Das Tabelas da Base de Dados do WIP Nome da Tabela utilizador utilizador_has_categorias categorias follow not_recomendacao
Referente a toda a informao dos utilizadores. Referente aos interesses dos utilizadores. Referente s vrias categorias tanto das ofertas como dos utilizadores (interesses). Identificao de quais os utilizadores que esto a seguir outros utilizadores. Permite identificar as notificaes referentes aos utilizadores bem como identificar as ofertas que foram recomendadas aos utilizadores por parte dos amigos/seguidores. Permite ao utilizador armazenar a informao relativa ao seu currculo inserido num formulrio na componente web. Armazena as informaes sobre as universidades que os utilizadores inserem no seu currculo. Referente informao das vrias ofertas. Armazena as ofertas que foram previamente visualizadas por um determinado utilizador. Identificao das ofertas que foram adicionadas pelo utilizador para ver mais tarde. Referente aos vrios distritos de Portugal. Identificao dos vrios concelhos tendo em conta o distrito referente. Referente informao das vrias empresas. Armazena todos os clientes mais importantes adicionados pelas empresas atravs de um formulrio online.
Pgina 24 de 27

Descrio

curriculum curriculum_univ ofertas ofertas_visualizadas ver_mais_tarde distritos concelhos empresas cliente_externo

Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Identifica quais os clientes associados a uma determinada empresa. Armazena as empresas (que estejam registadas na aplicao) como clientes mais importantes para as empresas da aplicao. Referente aos comentrios efetuados a uma determinada empresa por um determinado utilizador. Referente ao endereo dos vdeos associados a uma determinada empresa. Referente ao endereo das fotografias associados a uma determinada empresa. Referente ao sector em que determinada empresa se insere.

cliente_has_empresa cliente_empresa comentarios videos fotos sector

Atravs da tabela anterior, conseguimos precisaras tabelas existentes na base de dados, assim como qual o seu propsito e funo no armazenamento de informao. De referir ainda que esta lista foi elaborada pelo grupo responsvel pela plataforma da televiso. Para complementar a lista das tabelas da base de dados, est colocado na pgina seguinte deste documento o diagrama EER elaborado no MySQL Workbench.

Pgina 25 de 27

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

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

Pgina 26 de 27

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

Concluso
Com a elaborao da especificao grfica e tcnica, conseguimos desenvolver e compreender as especificidades grficas e tcnicas subjacentes ao projeto. Desta forma, ficam mais claras e organizadas as tarefas de implementao da aplicao, diminuindo assim o seu grau de complexidade.

Pgina 27 de 27