Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012Work In Perspective      Mobile      Especificação Gráfica e Esp...
Universidade de Aveiro    Projeto | DeCA |Ano Letivo 2011/2012                                                            ...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                                  Introdução       Através do ...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                          Especificação Gráfica    Para a cria...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                                Estudo Gráfico      Logótipo  ...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012        O logótipo representado na Figura 1 é constituído por ...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012 Fig.4- Ícones da aplicação quando pressionados em fundo branco ...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                               Estudo Cromático         A pale...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                              Estudo Tipográfico       A fonte...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                           Estudo de InterfacesEstudos de Grel...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Fig.6- Representação da grelha do ecrã da “Landing Page” com a...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012Fig.8- Representação da grelha do ecrã de “Detalhes da Oferta/Em...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Estudos de Cinzentos        Os estudos de cinzentos são o pass...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012Fig.10- Escala de cinzentos do ecrã da “Landing Page” com as res...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Fig.12- Escala de cinzentos do ecrã de “Detalhes da Oferta/Emp...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Estudos de Simulação       Com os estudos de simulação pretend...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012    Fig.14- Simulação do ecrã da “Landing Page” com as respetiva...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Fig.16- Simulação do ecrã de “Detalhes da Oferta/Empresa” com ...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                          Especificação TécnicaMapa de Navegaç...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Modelo/ Arquitetura do Sistema       No esquema presente na pá...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012             Fig.18- Esquema da arquitectura do Work In Perspect...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Fluxogramas das funções principais       A elaboração de fluxo...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012     Fig.20- Fluxograma do algoritmo de “Pesquisa” no Work In Pe...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012Modelo de base de dados       Conjuntamente com os docentes de...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                                            Identifica quais o...
Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012                                  Fig.21- Diagrama EER da base d...
Universidade de Aveiro  Projeto | DeCA |Ano Letivo 2011/2012                                  Conclusão       Com a elabor...
Próximos SlideShares
Carregando em…5
×

Especificação Gráfica e Técnica

904 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
904
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Especificação Gráfica e Técnica

  1. 1. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012Work In Perspective Mobile Especificação Gráfica e Especificação Técnica Página 1 de 27
  2. 2. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 ÍndiceÍndice ............................................................................................................................................. 2Introdução ..................................................................................................................................... 3Especificaçã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.......................................................................................................... 16Especificaçã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 ....................................................................................................... 24Conclusão .................................................................................................................................... 27 Página 2 de 27
  3. 3. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Introdução Através do manual de especificação gráfica e especificação técnica, pretende-seconsolidar e especificar mais detalhadamente as soluções delineadas para aimplementação da aplicação. Mais concretamente, a elaboração da especificação gráfica permite a criação eapresentação de toda a identidade gráfica do projeto, como o logótipo, ícones, sistemacromático e tipográfico, entre outros. Já a nível de especificação técnica, esta pretende caracterizar a implementaçãotécnica das funcionalidades da aplicação. Página 3 de 27
  4. 4. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Especificação Gráfica Para a criação da identidade visual da marca, é necessário recorrer à elaboraçãode vários componentes chave, de forma a estes fazerem transparecer para o utilizadoros valores e características que diferenciam a marca da concorrência. Estas componentes-chave da especificação gráfica serão detalhadamenteexplicadas neste documento, estando organizadas da seguinte forma: • Estudo Gráfico • Estudo Cromático • Estudo Tipográfico • Estudo de Interfaces Página 4 de 27
  5. 5. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Estudo Gráfico Logótipo O projeto Work In Perspective é um projeto que se encontra a serdesenvolvido 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 gruposresponsáveis, não só a nível de desenvolvimentos técnicos e gráficos, como também anível especialmente de tomadas de decisão. Para facilitar estes mesmos processos, foidecidido que cada grupo iria elaborar individualmente alternativas gráficas, para maistardiamente serem todas analisadas e apenas uma escolhida para ser aplicada nas trêsplataformas do WIP. Assim sendo, apresentamos aqui neste estudo as duas alternativas elaboradaspor 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
  6. 6. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 O logótipo representado na Figura 1 é constituído por três elementos: umarepresentação simbólica de uma fábrica, prédio e ao mesmo tempo uma mão doutilizador; uma lupa e ainda a assinatura da aplicação. Utilizamos esta junção deelementos pois achamos que no fundo representa bem as capacidades do WIP, que é aprocura 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 aoreferido anteriormente, mas um pouco mais desviado do conceito de fábrica, e maisinclinado para uma infraestrutura mais contemporânea. Ícones e Controlos Em toda a aplicação o utilizador irá encontrar diferentes ícones e controlosrepresentativos de ações que pode efetuar no Work In Perspective. Os ícones são todos originários e nativos dos dispositivos Android, facilitandoassim o seu reconhecimento e utilização apropriada, variando apenas a sua cor deacordo 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
  7. 7. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012 Fig.4- Ícones da aplicação quando pressionados em fundo branco e fundo preto Página 7 de 27
  8. 8. Universidade de Aveiro Projeto | 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, oesquema 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 algumatranquilidade e subtileza. Esta é uma cor também bastante ligada à formalidade, e aomesmo tempo transmite estabilidade e serenidade à aplicação. Este esquema de verdes foi escolhido propositadamente para dar algumaprofundidade aos menus e às pesquisas feitas na aplicação. É também uma cor queestá intimamente ligada às cores nativas do Android. Já o laranja, é uma cor bastante quente, vibrante, forte e modernista. Por estasrazões, achamos que é uma cor bastante adequada para ser utilizada nas informaçõesde notificação e alertas da aplicação. Página 8 de 27
  9. 9. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Estudo Tipográfico A fonte escolhida para ser utilizada na aplicação foi a Open Sans. Esta fonte foicriada por Steve Mattesson, sendo ela open-source, humanista e não-serifada, estandodisponível no diretório Google Fonts para utilização livre. É uma fonte com um estiloconsiderado 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 textosda 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
  10. 10. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Estudo de InterfacesEstudos de Grelhas A definição dos esquemas de grelha por vezes parece ser desprovida daimportâ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çãoexige um bom equilíbrio de estética e das funcionalidades, de forma a ser umaexperiência informativa mas também visualmente interessante, mantendo sempre aatençã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
  11. 11. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Fig.6- Representação da grelha do ecrã da “Landing Page” com as respetivas medidasFig.7- Representação da grelha do ecrã de “Preferências” com as respetivas medidas Página 11 de 27
  12. 12. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012Fig.8- Representação da grelha do ecrã de “Detalhes da Oferta/Empresa” com as respetivas medidas Página 12 de 27
  13. 13. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Estudos de Cinzentos Os estudos de cinzentos são o passo seguinte à definição das grelhas. Uma vezque 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 Página 13 de 27
  14. 14. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012Fig.10- Escala de cinzentos do ecrã da “Landing Page” com as respetivas medidasFig.11- Escala de cinzentos do ecrã de “Preferências” com as respetivas medidas Página 14 de 27
  15. 15. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Fig.12- Escala de cinzentos do ecrã de “Detalhes da Oferta/Empresa” com as respetivas medidas Página 15 de 27
  16. 16. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Estudos de Simulação Com os estudos de simulação pretende-se ter já uma ideia muito semelhantedos 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
  17. 17. 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 Página 17 de 27
  18. 18. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Fig.16- Simulação do ecrã de “Detalhes da Oferta/Empresa” com as respetivas medidas Página 18 de 27
  19. 19. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Especificação TécnicaMapa de Navegação Um mapa de navegação tem a função de ilustrar todos os “caminhos” que outilizador pode correr dentro da aplicação. Mal entra na aplicação, o utilizador tem acesso à página de Login, estandocircunscrito 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 doWIP. Além disto, o utilizador tem sempre acessíveis a qualquer momento abas comligações para o seu perfil, preferências e amigos na aplicação. Na figura em baixo estão ainda destacadas a azul as funcionalidades daaplicação. Fig.17- Mapa de Navegação do Work In Perspective Página 19 de 27
  20. 20. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Modelo/ Arquitetura do Sistema No esquema presente na página seguinte, podemos ver que a arquitetura dosistema em questão começa no Utilizador da aplicação, que engloba o UtilizadorRegistado/Não-Registado e Administrador, que ao interagir com a aplicação vaidespontar as instruções em código Javascript (correndo assim a aplicação e todas asfuncionalidades desta) e um ficheiro XML que permite que a aplicação consiga realizaros “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 dedados do seu operador de rede ou pelo acesso WIFI, estabelecendo assim uma ligaçãocom o servidor do Work In Perspective. Ultrapassada esta fase, encontramo-nos numa etapa em que haverá constantestrocas de informações entre a API do Google Maps, cuja função é fornecer os dadosnecessários para a georreferenciação a fim de filtrar as ofertas consoante a localizaçãoem 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 noWIP por via desta rede social. Como ambas as API’s estão ligadas á aplicação viainternet, a forma de comunicar com o servidor é por pedidos HTTP, que ao seremfeitos ao servidor Web, este por sua vez fará a comunicação com a base de dadosMySQL através de instruções em linguagem PHP. Página 20 de 27
  21. 21. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012 Fig.18- Esquema da arquitectura do Work In Perspective Página 21 de 27
  22. 22. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Fluxogramas das funções principais A elaboração de fluxogramas é uma boa solução de ilustração e representaçãoesquemática dos processos algorítmicos que ocorrem ao haver interacção com aaplicação. As figuras seguintes demonstram então os fluxogramas das principaisfuncionalidades do Work In Perspective. Fig.19- Fluxograma do algoritmo do “Login” no Work In Perspective Página 22 de 27
  23. 23. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012 Fig.20- Fluxograma do algoritmo de “Pesquisa” no Work In Perspective Página 23 de 27
  24. 24. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012Modelo de base de dados Conjuntamente com os docentes desta unidade curricular e com osorientadores das três plataformas do Work In Perspective, decidimos elaborar a basede 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
  25. 25. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 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 basede dados, assim como qual o seu propósito e função no armazenamento deinformação. De referir ainda que esta lista foi elaborada pelo grupo responsável pelaplataforma da televisão. Para complementar a lista das tabelas da base de dados, está colocado napágina seguinte deste documento o diagrama EER elaborado no MySQL Workbench. Página 25 de 27
  26. 26. Universidade de AveiroProjeto | DeCA |Ano Letivo 2011/2012 Fig.21- Diagrama EER da base de dados do Work In Perspective Página 26 de 27
  27. 27. Universidade de Aveiro Projeto | DeCA |Ano Letivo 2011/2012 Conclusão Com a elaboração da especificação gráfica e técnica, conseguimos desenvolvere 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. Página 27 de 27

×