start-a-book by Alexandra Fernandes

# 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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