Page 1

# 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

Índice

Introdução ..................................................................................................................................... 3 Especificação gráfica ..................................................................................................................... 4 Especificação técnica................................................................................................................... 19 Reflexão ....................................................................................................................................... 27 Bibliografia .................................................................................................................................. 28

Universidade de Aveiro, 30 de Março de 2012

2


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

3


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

4


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

5


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

6


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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)

Universidade de Aveiro, 30 de Março de 2012

7


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

8


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

9


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

10


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

11


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

12


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

13


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

14


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

15


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

Fig. 18 – Grelha do ecrã de entrada

Fig. 19 – Grelha do ecrã de registo

Universidade de Aveiro, 30 de Março de 2012

16


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

Fig. 20 – Grelha do ecrã de login

Fig. 21 – Grelha do ecrã “Casa”

Universidade de Aveiro, 30 de Março de 2012

17


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

Fig. 22 – Grelha do ecrã de criação de histórias

Universidade de Aveiro, 30 de Março de 2012

18


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

19


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

20


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

21


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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, palavrapasse, 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 Universidade de Aveiro, 30 de Março de 2012

22


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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

Universidade de Aveiro, 30 de Março de 2012

23


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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, palavrapasse 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

Universidade de Aveiro, 30 de Março de 2012

24


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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 Universidade de Aveiro, 30 de Março de 2012

25


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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 Universidade de Aveiro, 30 de Março de 2012

26


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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.

Universidade de Aveiro, 30 de Março de 2012

27


Ano Lectivo 2011/2012 | U.C. Projeto | Novas Tecnologias da Comunicação | DeCA

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-032012];

http://www.clker.com/clipart-4755.html [visitado em 30-03-2012];

http://www.clker.com/clipart-2809.html [visitado em 30-03-2012].

Universidade de Aveiro, 30 de Março de 2012

28

start-a-book  

Especificação gráfica e técnica