View
1
Download
0
Category
Preview:
Citation preview
# Especificação gráfica & técnica
Novas Tecnologias da Comunicação
Unidade Curricular de Projeto | 2012
Docentes:
Benjamim Júnior
Hélder Caixinha
Ivo Fonseca
Pedro Amado
Orientadora:
Lídia Oliveira
Discentes:
Alexandra Fernandes | 47130
Rui Leite | 41752
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 2
Índice
Introdução ..................................................................................................................................... 3
Especificação gráfica ..................................................................................................................... 4
Especificação técnica ................................................................................................................... 19
Reflexão ....................................................................................................................................... 27
Bibliografia .................................................................................................................................. 28
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 3
Introdução
A conceção da especificação gráfica e técnica do projeto detêm uma enorme relevância para a
pormenorização e detalhe das funcionalidades e do grafismo por parte do grupo de trabalho.
Relativamente à especificação gráfica, esta permite a criação de uma identidade visual, no que
respeita à marca e ao conceito do projeto.
Quanto à especificação técnica, permite identificar as características e funcionalidades da
aplicação, bem como a interação entre os diferentes componentes da aplicação.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 4
Especificação gráfica
Conceito do projeto (naming)
Para a criação do conceito e nome do projeto partiu-se do nome “garebook”, nome inicial da
plataforma.
O nome escolhido para o projeto foi “start-a-book” (conceito de iniciação de um livro), uma
vez que se torna intuitivo, demonstrando as potencialidades da aplicação. Nesta designação
encontram-se presentes o conceito da diferenciação (unicidade da marca) e portabilidade
(visto que é capaz de ser usado em diferentes sistemas de comunicação).
Pode-se referir ainda que o nome comunica o propósito do projeto (conceção de uma
plataforma de criação de histórias para crianças dos 6 aos 10 anos), salientando a componente
de criação e iniciativa por parte dos utilizadores.
O processo de escolha do nome passou por várias etapas, nomeadamente pela avaliação dos
nomes de projetos da mesma área temática existentes, pelo brainstorming de conceitos,
testes de escrita e de pronúncia e inspiração pelos diferentes elementos envolventes no
projeto.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 5
Estudos gráficos (logótipo, logomarca e lettering)
No seguimento da criação do logótipo da marca, foram efetuados vários estudos de cor,
lettering, nome e logomarca.
Fig.1 – Estudos do nome
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 6
Fig.2 – Estudos do logótipo
O logotipo da marca “start-a-book” assenta na ideia de criação de uma marca que vá de
encontro com o público-alvo. A mistura do verde com o preto serve para a criação de
contraste da mensagem transmitida pelo logótipo (conceito de criação de um livro).
O desenvolvimento do logótipo respeita a relação entre o conceito e o público-alvo do projeto,
pela simplificação e pela associação da cor verde à juventude, frescura, esperança e calma.
Inicialmente partiu-se de uma abordagem onde o logótipo apresentava uma única cor, porém,
para transmitir da melhor forma a mensagem, optou-se pela conjugação das duas cores
principais escolhidas na paleta cromática.
O logótipo possui ainda um fundo cinzento de forma a dar destaque ao efeito brilhante à volta
do lettering.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 7
O lettering é constituído por “start-a-book” e referencia o clássico livro de desenho das
crianças, onde podem criar as suas histórias baseadas em balões de fala e desenhos. Aqui a
criação destas histórias é baseada em ícones inseridos na aplicação.
Fig.3 – Logótipo “start-a-book”
É de salientar que o logótipo foi sofrendo alterações na medida em que foi desenvolvido de
forma a poder ser portável para os diversos meios de comunicação. A versão apresentada em
baixo refere-se a uma das versões do negativo e positivo do logo (monocromático e
policromático), de forma a transparecer as linhas gráficas do logo inicial.
Fig.4 – Versões a negativo e positivo do logo (monocromático e policromático)
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 8
Escala do logótipo
A legibilidade do logótipo é definida pela sua representação a 25%. Esta dimensão é definida
para que nunca se perca a sua visibilidade.
Fig.5 – Versão mínima do logótipo
O logótipo deve respeitar as dimensões mínimas do nome do projeto de forma a não
comprometer a sua leitura.
Fig.6 – Versão mínima do logótipo
O favicon é representado pela letra “b” com a cor verde.
Fig.7 – Favicon
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 9
Zonas de segurança
De forma a preservar uma boa leitura do logótipo, são definidas margens de segurança à sua
volta. Esta área de segurança, tem como referência o circulo correspondente ao interior das
letras “a”, “b” e “o”.
Assim, todas as versões da marca devem preservar o espaço livre definido, de forma a manter
uma boa leitura e visibilidade, protegendo o logótipo quando este se encontra perto de outros
elementos.
Fig. 8 – Zona de segurança do logotipo
Especificações tipográficas
Na escolha da tipografia optou-se por uma tipografia sem serifas, uma vez que proporciona
uma melhor leitura no ecrã e por ser concordante com a linha gráfica aplicada em toda a
aplicação. Escolheu-se o “Calibri” por se tratar de uma fonte de sistema.
Fig. 9 – Tipografia plataforma
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 10
Preferiu-se a aplicação de um tipo de letra que não fosse de sistema para o logotipo, uma vez
que as opções de escolha seriam maiores. Assim, a fonte escolhida para o logótipo foi a
“Arista”. Esta também é um tipo de letra não serifado, de fácil leitura e open-source.
No que concerne às características deste tipo de letra a sua boa visibilidade, associação com
formas arredondadas, identificação com as crianças, transmissão de harmonia e estrutura
forte fortalecem a mensagem lúdica e educativa da plataforma.
De acordo com as necessidades da plataforma, subsiste a necessidade de estabelecer uma
hierarquia visual no que concerne aos textos expostos.
Os títulos e subtítulos são a negrito com espaçamento duplo, sendo que o tamanho difere, o
texto tem tamanho 12pt e 14pt em alguns locais, com espaçamento de 1,5pt.
Os títulos, subtítulos e corpo de texto são a preto. Os links são a verde no estado normal e
cinzento-escuro no estado hover.
Relativamente aos botões da aplicação, estes apresentam os mesmos tons de verde, com
letras brancas e, na passagem do rato sobre o botão, as cores são invertidas.
Fig. 10 – Exemplo dos botões (normal e estado hover)
Fig. 11 – Exemplo dos links
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 11
Estados de ícones e controlos
Ao longo da aplicação, optou-se pela utilização de botões com texto. Rejeitou-se a utilização
de ícones, por não serem considerados intuitivos para o público-alvo em questão. A par do
desenvolvimento do projeto foram efetuados estudos visuais de plataformas com a mesma
dinâmica, e conclui-se que a colocação de ícones é substituída por palavras simples e diretas.
Desta forma, decidiu-se pela colocação de palavras associada a botões e links para tentar ser o
mais intuitivo possível.
Porém, na componente de criação da história são utilizadas as setas direcionais, acompanhas
com texto explicativo, uma vez que se considerou percetível.
Fig. 12 – Exemplo das setas direcionais
Também nas componentes de “Ajuda” “Vídeo Demonstrativo” e “Mapa do Jogo” são
apresentados alguns ícones.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 12
Fig. 13 – Ícones e controlos da plataforma
O estudo dos ícones recai sobre as cores da paleta cromática escolhida para o projeto, bem
como para os ícones reconhecidos nas diferentes plataformas.
Especificações cromáticas
Relativamente à paleta cromática escolhida, optou-se pelas tonalidades dos verdes associados
aos cinzas. A escolha do verde deve-se à associação ao portal Biblon (que também utiliza o
verde na plataforma), mas também tendo como base a cor do logotipo da Universidade de
Aveiro.
O “verde lima” foi escolhido como cor predominante na plataforma uma vez que transmite
equilíbrio, esperança, frescura, energia e vitalidade. Estes valores estão associados ao
crescimento dos utilizadores juniores.
Escolheu-se ainda tonalidades cromáticas escuras para que o texto e botões funcionem melhor
sobre o rosto da aplicação.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 13
Fig. 14 – Paleta cromática
Expomos ainda o estudo cromático, com as cores utilizadas na plataforma, bem como as cores
relativas às mensagens de feedback ao utilizador.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 14
Fig. 15 – Estudo cromático da plataforma
Estudo da grelha (atomic base e macro grid units)
Para a construção da grelha dividiu-se a página em 8 grandes colunas (com 100 pixéis cada), 9
goteiras (de 10 pixéis) e uma margem de 134 pixéis, ou seja, 67 pixéis à esquerda e outros
tantos à direita.
Desta forma, a área útil de plataforma são 890 pixéis, uma área relativamente reduzida,
relativamente a toda a área do browser. Estas opções devem-se ao facto da plataforma ser
otimizada pensando no computador “Magalhães”, com resoluções de 1024 pixéis por 600
pixéis e também por ser desenhada para crianças dos 6 aos 10 anos, evitando desta forma as
barras de scroll.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 15
Fig. 16 – Estudo da grelha
Composição de ecrãs únicos
Em relação à plataforma, esta apresenta um design minimalista, claro, à base de linhas
direitas.
Fig. 17 – Grelha do ecrã inicial
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 16
Fig. 18 – Grelha do ecrã de entrada
Fig. 19 – Grelha do ecrã de registo
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 17
Fig. 20 – Grelha do ecrã de login
Fig. 21 – Grelha do ecrã “Casa”
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 18
Fig. 22 – Grelha do ecrã de criação de histórias
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 19
Especificação técnica
Para a especificação da aplicação foi usado como modelo o computador pessoal “Magalhães”
uma vez que este é o que estará mais facilmente disponível ao público-alvo e é um
computador pouco avançado tecnologicamente quando comparado com outros computadores
no mercado atual.
As características principais deste dispositivo são:
Processador: Intel Atom de 1.60 MHz,
Memória RAM de 1GB,
Disco rígido de 30 GB (particionados do seguinte modo - 10GB Windows; 10GB Linux CM; 10GB
Dados do utilizador)
Ecrã de 9 polegadas com uma resolução de 1024 × 600 pixels.
Como tal, foi decidido que as tecnologias a ser utilizadas do lado do utilizador seriam algo
ultrapassadas para garantir que não existem erros de compatibilidade. As tecnologias
utilizadas serão: MySQL, PHP5.4.0, HTML4.01, CSS2, ActionScript2.0 e XML1.0.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 20
Arquitetura do Sistema
A base de dados usa MySQL que é processado no servidor por ficheiros PHP. A informação
gerada é transposta para HTML, CSS, XML e ActionScript e enviada para o browser do
utilizador. O XML é depois lido pela aplicação Flash.
Fig. 23 – Arquitetura do Sistema
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 21
Mapa de Navegação
A aplicação estará centrada na zona “Home” e é possível aceder-lhe a partir da maior parte da
aplicação. É possível aceder a essa zona fazendo o registo/login. A partir dessa zona é possível
aceder a todas as funções da aplicação (criação e consulta de histórias, edição do perfil,
interação social, etc…).
Fig. 24 – Mapa de Navegação
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 22
Fluxograma
Nestes fluxogramas são demonstrados os logaritmos “Registo”, “Carregar Fotografia” e “Login”
a ser utilizados na aplicação.
Na função “Registo” o utilizador insere os dados requeridos (nome de utilizador, palavra-
passe, nome, apelido, e-mail, género, país, cidade, escola e avatar). Se o nome de utilizador já
existir, a aplicação não permite o registo; se não existir, um novo registo é adicionado à base
de dados.
Na função “Carregar Fotografia”, o utilizador adiciona uma imagem à base de dados que lhe
fica associada.
Na função “Login”, os dados inseridos na aplicação (nome de utilizador e palavra-passe) são
comparados com os registos da base de dados. Se os dados inseridos forem os corretos, o
utilizador entra na aplicação; se os dados estiverem errados, a aplicação não lhe permite a
entrada.
Fig. 25 – Fluxograma 01
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 23
Nestes fluxogramas são explicados os logaritmos “Partilhar Histórias”, “Convidar Amigos” e
“Aceitar Amigos”.
Na função “Partilhar Histórias”, o utilizador seleciona uma história da sua lista e escolhe os
amigos com os quais a quer partilhar. Uma mensagem de aviso é-lhes enviada.
Na função “Convidar Amigos”, o utilizador procura no registo de utilizadores um nome. Esse
nome é comparado com os registos na base de dados, o utilizador escolhe o utilizador da lista
apresentada e é automaticamente enviada uma mensagem com o pedido para o utilizador
escolhido.
Na função “Aceitar Amigos”, o utilizador lê a mensagem enviada com o pedido e pode negá-lo
ou aceitá-lo. Se aceitar, ambos os utilizadores são registados como amigos.
Fig. 26 – Fluxograma 02
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 24
Nestes fluxogramas são demonstrados os logaritmos “Editar Perfil”, “Mensagens” e
“Recuperar Password”.
Na função “Editar Perfil”, o utilizador modifica alguns dos dados do seu perfil (nome, palavra-
passe e avatar) ou apaga-os. Os dados modificados são atualizados na base de dados.
Na função “Mensagens”, o utilizador lê as suas mensagens registadas na base de dados e pode
responder-lhes. Se escolher “responder”, uma nova mensagem é registada na base de dados.
Na função “Recuperar Password”, o utilizador insere o seu e-mail e a aplicação envia uma
mensagem para esse e-mail com uma nova palavra-passe.
Fig. 27 – Fluxograma 03
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 25
Nestes fluxogramas são explicados os logaritmos “Criar História” e “Modificar História”.
Na função “Criar História”, o utilizador dá um nome e adiciona objetos à sua história. Pode
depois finalizar a sessão de criação publicando a história (o que cria um ficheiro externo) ou
guardando o trabalho para ser finalizado posteriormente. Ambas as opções gravam a história
criada na base de dados.
Na função “Modificar História”, o utilizador pode alterar uma história já criada. O utilizador
escolhe uma das suas histórias de uma lista, modifica/adiciona/remove objetos e grava as
alterações. Aqui pode também publicar as alterações num ficheiro externo ou guardar para
depois. Ambas as opções gravam as modificações na base de dados.
Fig. 28 – Fluxograma 04
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 26
Modelo de Base de Dados
Na base de dados estão armazenados os dados dos utilizadores, as mensagens enviadas entre
eles, as histórias criadas e os objetos com que podem ser criadas. Os dados pessoais do
utilizador são guardados numa só tabela (“user”). Esta tabela é o centro da base de dados e
estabelece ligações com as principais tabelas usadas na aplicação. A tabela “historias” guarda
informação sobre as histórias produzidas pelo utilizador, mais propriamente quais os objetos
utilizados, a sua localização e que texto lhes foi adicionado (se aplicável). O nome da história
criada é armazenado na tabela que relaciona o utilizador com a história. Os objetos usados
para a criação da história são guardados por categoria na tabela “objetos”. A tabela “avatar”
guarda as escolhas feitas pelo utilizador para a criação da sua representação virtual. As
comunicações entre os utilizadores (mensagens e pedidos de amizade) são guardados na
tabela “mensagens” juntamente com o remetente, destinatário, data de envio e estado
(lido/não lido).
Fig. 29 – Modelo da Base de Dados
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 27
Reflexão
A finalização da especificação gráfica e técnica permitiu-nos completar o estudo da imagem da
aplicação e a consolidação das escolhas efetuadas até então, tanto a nível gráfico como a nível
técnico. Permitiu-nos também avançar com a produção da aplicação no que toca a elementos
visuais, distribuição das áreas da aplicação, estruturação das componentes de armazenamento
de dados, logaritmos necessários ao seu funcionamento e caminhos de navegação esperados
do utilizador.
Ano Lectivo 2011/2012
| U.C. Projeto | Novas Tecnologias da Comunicação | DeCA
Universidade de Aveiro, 30 de Março de 2012 28
Bibliografia
− http://kuler.adobe.com/#create/fromacolor [visitado a 21/03/2012];
− http://www.typetester.org/ [visitado a 21/03/2012];
− http://www.dgidc.min-edu.pt/eescolinha/Mod1_Maga.html [visitado em 29-03-2012];
− http://www.gliffy.com/ [visitado em 29-03-2012];
− http://www.clker.com/clipart-3512.html [visitado em 30-03-2012];
− http://www.clker.com/clipart-black-and-white-trash-can.html [visitado em 30-03-
2012];
− http://www.clker.com/clipart-4755.html [visitado em 30-03-2012];
− http://www.clker.com/clipart-2809.html [visitado em 30-03-2012].
Recommended