Blog de acompanhamento ao projecto de 3º ano de NTC, no ano lectivo de 2010/2011.
27
Abr 11

Tendo em vista os objectivos para o módulo que se iniciou hoje, pegamos no mapa do site previamente construído e decidimos sobre quais as funcionalidades a implementar. Sendo um protótipo de alta-fidelidade, a sua construção será em “T”. Como demonstrado na figura seguinte, todas as páginas derivadas da página principal serão construídas, contudo, o detalhe de cada uma delas será diferente. Optamos por desenvolver completamente as funcionalidades de perfis, ficheiros, galerias, editor e pesquisa. Esta decisão baseou-se no facto de serem as funcionalidades mais importantes e com o maior grau de dificuldade para a construção do site.

 

ver pdf

 


23
Abr 11

 

O grupo de projecto encontra-se de momento a apreciar um descanso bem merecido, mas isso não significa que o trabalho tenha parado por completo.

 

Pode ver-se desde já o trabalho que tem sido realizado para transformar o blog, de modo a que esta plataforma reflicta a especificação gráfica definida na entrega anterior.

 

A nível do grupo, foi compilada uma lista de tarefas a realizar durante o período de férias, no sentido de aprimorar o trabalho entregue no último momento de avaliação mas, também, de resolver algumas questões de funcionamento do site -- a começar a ser desenvolvido no próximo módulo -- que porventura ainda não estejam completamente fechadas.

 

Assim, a lista consiste em:

ESPECIFICAÇÃO GRÁFICA:

  1. Comparar requisitos funcionais de ecrãs já criados aos definidos nos momentos anteriores (O que é que cada ecrã deve mostrar ao utilizador / permitir ao utilizador fazer?);
  2. Rever o look and feel da aplicação de desenho vectorial, com especial atenção à disposição dos elementos na aplicação e à criação de ícones dentro do estilo visual apresentado no resto do site;
  3.  Ligado ao ponto 1, rever os layouts já criados, tanto a nível de composição visual como de correspondência aos requisitos necessários;


CONCEPTUAL:

  1. Definir como vai funcionar exactamente o sistema de reputação (Como é dada? Quais são em concreto as vantagens de ter uma reputação maior?);
  2. Definir como vai funcionar exactamente o sistema de badges (Como são dadas? Que importância têm? Onde aparecem?);
  3. Definir a lista de badges (e gerar os gráficos para elas);
  4. Definir como vai funcionar a secção de discussões;
  5. Definir todas as regras das interacções do site;
  6. Definir os termos a usar ao longo de todo o site (como é que vamos chamar as coisas, basicamente. Ex: Criações vs imagens criadas vs documentos vectoriais… ou karma vs reputação vs pontos…). A ideia é definir uma espécie de glossário com o vocabulário a utilizar no site, para se manter consistente ao longo de todos os textos criados. Convém que os termos e a linguagem usada sirva como mais uma maneira de definir e ajudar a passar os conceitos fundamentais do site.


DRUPAL:

  1. Instalar Drupal no servidor da UA;
  2. Alterar um tema do Drupal para corresponder ao layout criado na especificação;
  3. Implementar módulos definidos na fase de especificação, tendo em atenção permissões e tipos de utilizador;

Os pontos da secção Conceptual são os mais importantes porque são relevantes a decisões sobre o funcionamento da comunidade e do site que ainda não estão muito bem definidas.

Até 4ª feira, é tudo.

 


15
Abr 11

A primeira opção definida no estudo de viabilidade técnica, relativamente às tecnologias a serem usadas para a construção do site, mantém-se.

 

(A conclusão do estudo de viabilidade técnica pode ser revisitada aqui.)

 

Assim, o site vai ser construído com o CMS Drupal, estando a cargo do grupo do projecto possibilitar a integração da ferramenta de desenho vectorial escolhida, SVG-Edit, com o mesmo. Essa integração vai ser explicada mais à frente, com recurso a um fluxograma. O grupo encontra-se, após esta fase de especificação e do sucesso na realização da demo técnica, confiante na sua capacidade de concretizar os objectivos definidos para o projecto com recurso às tecnologias definidas.

 

Todos os documentos criados para a especificação técnica são apresentados, online, em formato PDF e em ecrã inteiro, para facilitar a sua leitura. Também estão disponíveis para download, no fundo do post.

 

Arquitectura do site

A especificação começa com a arquitectura do site. O esquema seguinte representa as relações entre as várias componentes do projecto, com especial atenção à relação entre o CMS e a ferramenta de desenho e, dentro do próprio CMS, aos diversos módulos escolhidos para a implementação dos requisitos funcionais definidos.

 

 

Mapa de navegação

De seguida apresentamos o mapa de navegação do site. Este pesa por alguma complexidade, inerente à complexidade do projecto. Como tal, encontra-se legendado, quer por tipo de funcionalidades como por nível de acesso, fazendo-se aí a distinção entre utilizador não registado, utilizador registado e moderador/administrador.

 

 

Fluxogramas

Tendo em conta que é na integração da ferramenta com o CMS que jaz o desafio central técnico da execução do projecto, os fluxogramas são centrados nas funcionalidades relevantes à gravação, upload e download de documentos vectoriais. Outras funcionalidades serão conseguidas recorrendo a diversos módulos já existentes e serão realizadas pelo Drupal de um modo quase automático e, de certa forma, algo opaco, pelo que não foram criados fluxogramas para as funções relacionadas com pesquisa, back office, pessoal ou interacção.

 

Dos fluxogramas criados o mais complexo é, de longe, o relativo à gravação de documentos vectoriais. Essa questão foi já abordada no post Demo técnica: o que está para vir, onde se incluiu uma explicação inicial do processo. Este fluxograma detalha de forma mais aprofundada o processo de criação de um ficheiro representativo do documento vectorial e a interacção com a base de dados do Drupal e com o CMS em si, aquando da criação de nós. Considera questões como a autenticação de sessão, a identificação das criações e a gravação de versões - essenciais tanto para a definição do histórico de um documento como para a criação de documentos novos a partir de uma base já existente, o chamado forking.

 

 

A funcionalidade de upload de documentos vectoriais no formato SVG é também detalhada e incorpora em si o script de gravação de documentos vectoriais.

 

 

Por último, o fluxograma relativo ao download quer de documentos vectoriais quer das respectivas representações bitmap, em formato PNG.

 

 

Módulos CMS
Para o desenvolvimento do projecto e após uma exaustiva pesquisa, iremos indicar quais os módulos do Drupal a utilizar, assim como as suas funcionalidades e dependências.

A notar que esta parte do post se pode assumir como uma progressão ou refinamento do post Módulos Drupal para Redes Sociais escrito anteriormente, no qual tinham sido definidos alguns módulos que serão repetidos na lista seguinte, embora inseridos numa estrutura mais organizada.

É importante referir que alguns módulos necessitam de outros para funcionar. Os módulos “pai” são: Views, ImageAPI, Content Construction Kit e votingAPI.

Construção do site

  • cck (Content Construction Kit) - permite a criação de “nodes” personalizados assim como a sua implementação;
    • linkimage - permite transformar imagens em links;
  • dhtml menu - implementação de dropdown menus;
  • pathauto - simplificação de urls;
  • tagadelic - gestor de tags
  • ImageAPI - “toolkit” para imagens;
    • Imagecache - processador de imagens;
    • imagefield - extenção de funcionalidades de nós do tipo imagem 
    • thickbox - overlay de “moldura” para imagens;
  • views - criação de queries personalizadas e mostrar os resultados;
  • quicktabs - criação de blocos de contéudo com várias tabs;

Pessoal

  • content profile - extensão das funcionalidades de criação de perfis (depende do módulo Content Construction Kit);
  • logintoboggan - extensão das funcionalidades de login;
  • activity - permite que utilizadores sigam a actividade dos amigos 
  • node_gallery - criação de galerias de imagens

Interacção

  • organic groups - permite criar grupos de utilizadores e respectivas páginas de grupo;
  • simplenews - permite criar e publicar newsletters;
  • privatemsg - permite envio de mensagens privadas entre utilizadores;
  • votingAPI - “toolkit” para sistemas de votos;

 

Links para PDFs:

 


 NOME

 

 
Para iniciar o processo de selecção do nome do serviço, o grupo começou por olhar para o que já existe. Foram recolhidos os nomes de vários produtos/serviços concorrentes ou, pelo menos, semelhantes. O serviço CloudCanvas tem o nome mais relacionados com os conceitos fundamentais do projecto.
 
Assim, como ponto de partida para a definição de um novo nome, esse nome foi decomposto nos seus dois elementos fundamentais, Cloud e Canvas, que serviram de ponto de partida para o brainstorming de ideias.
Após algumas fases de brainstorming, com sucessiva escolha de nomes e iteração sobre osmesmos, o grupo chegou a alguns nomes possíveis:
 
1. Draw it!
Este nome vale, não só pela simplicidade e poder descritivo, como pela modularidade que possibilidade, abrindo a porta a possíveis expansões futuras ao serviço, dada a facilidade com que se pode substituir a primeira palavra por qualquer outro verbo.
 
2. Canvas 2.0
Apesar de soar algo genérico, este nome envolve na perfeição os conceitos atrás referidos, com o “Canvas” a representar a possibilidade de criação de imagens e o “2.0” a remeter para a comunidade e a comunicação.
 
3. Canvanize!
Este nome pretende fazer o trocadilho entre a expressão “galvanize”, neste caso com o sentido de algo energético ou energizado, e canvas, sugerindo um serviço dinâmico.
 
4. Tabula Rasa
Um nome algo mais “conceptual”. Baseado na teoria de John Locke, segundo a qual todo o conhecimento humano é adquirido. Sendo assim, o ser humano recém-nascido é uma tábua rasa ou um quadro vazio, a ser “preenchido” pela experiência humana. Da mesma forma, o projecto pretende criar uma comunidade inicialmente “vazia”, pronta a ser preenchida com o resultado da criatividade colectiva dos seus utilizadores.
 
5. weDraw
A conjugação das palavras “we” e “draw” passa a ideia de um local onde se desenha em conjunto, tocando assim tanto a componente da comunidade e colaboração, juntamente com a do desenho e arte.
 
No fim a escolha caiu, decisivamente, sobre o nome mais foneticamente distante da inspiração original. Ainda assim, as ideais e conceitos presentes nesse nome encontram-se presentes neste: weDraw.
 
O nome Draw it! seria uma alternativa viável, mas foi descartada pela existência de pelo menos dois projectos que, nesta fase, estariam a considerar nomes semelhantes. A possibilidade de expansão desse nome verifica-se também no nome escolhido.
 
 
LOGO
 
Como havia sido explicado com o nome, quisemos ter presente tanto o conceito de comunidade como o conceito de desenho, não apenas no nome, mas no conjunto inteiro do logotipo em si.
 
Dessa forma, temos aqui representado o aspecto da comunidade através de uma nuvem, que simboliza conceitos internet, partilha e trabalho colaborativo. Juntamente com a nuvem voram adicionadas “pingas” de tinta, deixando transparecer o aspecto artistico de desenho aqui presente.
 
Foram criadas duas versões: acima encontra-se a versão para impressão, abaixo a versão a ser utilizada na web.
 
 
 
 
Construção
O desenvolvimento do logotipo teve como base a fonte Hiruko, a partir dela ajustaram-se as letras com modificações nos vectores, com vista a torná-las mais interessantes.
 
Através de uma combinação de elipses com strokes da própria letra, foi então possivel construir a nuvem para o elemento de fundo ao qual foram adicionadas as gotas.
 
Juntando tudo têm-se então finalmente, o nosso logotipo.
 
 
 
 
 
Hipóteses Abandonadas
A construção de um logotipo implica uma longa fase de várias experiências, aqui pode-se ver testes de estudo de logotipo. Versões que foram testadas mas por uma razão ou outra, como por exemplo falha em transparecer um dos aspectos de desenho ou comunidade, foram abandonadas.
 
 
 
 
Regras de Utilização
A utilização do logotipo deve ser feita em um fundo branco, com bastante espaço em redor e um stroke branco à volta.
Caso essas condições não se verifiquem, ou então o logotipo no seu estado principal não se adequar, utiliza-se o logotipo invertido que se encontra abaixo.
 
 
 
 
Escala de redução
Para manter a boa legibilidade e detalhe do logo, é preferifel que as suas dimensões nunca sejam reduzidas a menos de 25% do original que possui 52 pixels de altura e 118 pixels de largura.
 
 
 
 
 
Margem de Segurança
O logo deve possuir a todas as alturas uma margem de segurança de 10 pixels a toda a sua volta, livre de outros elementos gráficos que não sejam simples manchas de cor.
 
 
 
 
Sistema Visual
 
960gs
Para o desenvolvimento dos layouts da weDraw, recorreu-se ao sistema 960gs (960 grid system) que faz uso de uma área de 960 pixels, adequado para resoluções de 1024x768 e maiores.
 
 
 
O sistema 960gs têm variantes de 12, 16 e 24 colunas. Para o desenvolvimento do layour optou-se pelo sistema de 12 colunas, cada uma com 60 pixels.
 
 
 
Divisão
A vantagem de utilizar o sistema 960gs é a divisão em colunas que pode ser usada em diferentes configurações. No nosso caso, utiliza-se uma divisão de 4x4x4, criando efectivamente um layout de 3 colunas, cada uma com uma dimensão de 300 pixels.
 
 
 
Margens e Goteiras
Entre cada uma das 3 colunas do layout, existe uma goteira de 20 pixels (indicada a magenta) para criar um aspecto mais organizado. Existe também uma margem de 10 pixels em cada um dos lados, criando uma área útil com 940 pixels de largura.
 
 
 
Baseline
De forma a melhor estruturar e organizar os textos e elementos, aplicou-se também uma baseline de 15 pixels. Isto cria uma unidade macro dentro das colunas de 15 pixels de altura com 60 largura, separadas por uma unidade micro de 15 pixels de altura com 20 de largura para melhor alinhar os conteúdos dentro de cada coluna.
 
 
 
Estudo de Cinzentos
Tendo sido construida a grelha é então possivel planificar a disposição do conteúdo no site como pode ser visto. Estas manchas de conteúdo permitem ver de maneira simplificada zonas com grande densidade visual e um alinhamento mais simples dos elementos.
 
 
 
 
Simulação
Tendo depois como base a grelha e os estudos de cinzento, pode-se passar à criação de simulações, dispondo os conteúdos de acordo com as manchas anteriormente indicadas. Consegue-se com este processo criar um layoyt mais limpo, organizado e com um forte balanço estético.
 
 
 
Outros ecrâs
Perfil de Utilizador
Fazendo uso do sistema de 3 colunas, agrupa menus na coluna esquerda, usando as outras duas em junção para conteúdos.
 


Página Principal
Fazendo uso do sistema de 3 colunas, agrupa menus na coluna esquerda, usando as outras duas em junção para conteúdos.
 
 
 
Ferramenta de Desenho
Tendo em conta a necessidade de um canvas grande, nesta página optou-se por usar a largura inteira da janela em vez de apenas os 940 pixels
 
 
 
Página de Ficheiros
Fazendo uso do sistema de 3 colunas, inverte o esquema anterior, usando a barra da direita para menus, e as restantes para os conteúdos.
 
 
 
 
Tipografia
As fontes escolhidas para a utilização na weDraw são a Gill Sans MT para os titulos e a Verdana para os restantes textos. Caso por algum motivo essas fontes não sejam visiveis, usam-se como fontes alternativas/secundárias a Trebuchet MS para os títulos e a Helvetica World para o corpo de texto.
 
 
 
Hieraquia de Fontes
Usando sempre um leading de 15 pixels, as dimensões do texto é de:
 
- 36 pt para os titulos de maior dimensão,
- 18 pt para os elementos na barra de navegação,
- 16 pt para os titulos de menor dimensão
- 12 pt para os textos restantes e links
 
Um caso único é a utilização de texto a 11 pt, exclusivamente no footer a cinzento com informaão weDraw.
 
 
 
 
Sistema Cromático
Seguindo um esquema de cores simples, a utilização de cores é predominantemente azul nos titulos, com preto nos textos e magenta nos links. A cor alternativa de azul deve ser usada exclusivamente na barra inferior, tal como o cinzento escuro deve ser apenas usado no footer.
 
O cinzento mais claro deve ser usado como border de um pixel à volta de imagens com formas regular e para marcar items não activos. Tanto o vermelho como o verde apenas devem ser usados como feedback de interacção.
Por fim o fundo deve estar sempre a branco.
 



Ícones
Tendo adoptado um aspecto mais minimalista, a weDraw não dispões de um número elevado de ícones, no entando ainda existem alguns que importa destacar: As mensagens privadas, o promover e despromover do sistema de reputação e o botão de ver mais.
 
Os estados representados são, o activo ou estado normal, o hover quando se passa o cursor por cima e o inactivo quando não existe interacção de momento.
 
O botão de ver mais não possui estado inactivo pois caso não exista algo mais para ver, ele simplesmente não irá ser visivel.
 
 
 
 
Interacção
A weDraw vai dispor de dois principais mecanismos de interacção. 
O primeiro mecanismo trata-se de uma lightbox para se poder visualizar os ficheiros em dimensão total, iria estar principalmente presente nas páginas de ficheiros. 
 
O segundo mecanismo de interacção trata-se de um slide down menu. Ao tentar salvar um ficheiro criado no svg-edit ou fazer um upload, um efeito de slide irá fazer surgir um novo ecrã no topo da ferramenta para inserir os detalhes e submeter, avisando para fazer o login ou registo caso necessário. Adicionalmente, usam-se progress bars para dar feedback sobre o estado do upload.
 

 

 
 

 

Pode fazer download de uma versão em pdf aqui: weDraw.pdf

Adicionalmente pode visulizar online aqui: LINK


05
Abr 11

Para iniciar o processo de selecção de um novo nome para o projecto, o grupo começou por olhar para o que já existe. Foram recolhidos os nomes de vários produtos/serviços concorrentes ou, pelo menos, semelhantes, como:

  • Deviantart
  • Flickr
  • Tumblr
  • Raven
  • Sumo Paint
  • CloudCanvas
  • Imagespark
  • Inkscape
  • Corel Draw
  • Illustrator
  • svg-edit
  • sketchbook



De entre eles, é o CloudCanvas que tem o nome mais relacionado com os conceitos fundamentais do projecto: a ferramenta de edição vectorial incorporada com a componente comunitária, num ambiente de competição amigável mas principalmente de colaboração e entreajuda.

Assim, como ponto de partida para a definição de um novo nome, esse nome foi decomposto nos seus dois elementos fundamentais, Cloud e Canvas, que serviram de ponto de partida para o brainstorming de ideias.

Após algumas fases de brainstorming, com sucessiva escolha de nomes e iteração sobre os mesmos, o grupo chegou a alguns nomes possíveis:

1. Draw it!
Este nome vale, não só pela simplicidade e poder descritivo, como pela modularidade que possibilidade, abrindo a porta a possíveis expansões futuras ao serviço, dada a facilidade com que se pode substituir a primeira palavra por qualquer outro verbo.
Contudo, o nome só faz referência a parte da identidade do site. Mais, já existem dois projectos (Story Telling
e Serious Game) a, pelo menos, considerar nomes semelhantes -- Touch It e Know It, respectivamente, pelo que preferimos optar por algo mais original.

2. Canvas 2.0
Apesar de soar algo genérico, este nome envolve na perfeição os conceitos atrás referidos, com o “Canvas” a representar a possibilidade de criação de imagens e o “2.0” a remeter para a comunidade e a comunicação.

3. Canvanize!
Este nome pretende fazer o trocadilho entre a expressão “galvanize”, neste caso com o sentido de algo energético ou energizado, e canvas, sugerindo um serviço dinâmico.

4. Tabula Rasa
Por último, um nome algo mais “conceptual”. O conceito de tabula rasa vem do filósofo John Locke e é a teoria segundo a qual todo o conhecimento humano é adquirido. Sendo assim, o ser humano recém-nascido é uma tábua rasa ou um quadro vazio, a ser “preenchido” pela experiência humana. Da mesma forma, o projecto pretende criar uma comunidade inicialmente “vazia”, pronta a ser preenchida com o resultado da criatividade colectiva dos seus utilizadores.

Qualquer uma das hipóteses (fora a primeira, por razões já referidas) é, por enquanto, válida, sendo a próxima aula e reunião com os orientadores fundamentais com os  para escolher de entre um deles ou, se necessário, realizar novas sessões de brainstorming.


01
Abr 11

 Com esta demo gráfica pretende-se mostrar a interacção de dois utilizadores exemplo com a aplicação. Os seus motivos e decisões, e adicionalmente as suas razões por fazer uso da Wikigráfica.

 

 

 

O percurso de interacção realizado pelos utilizadores no video encontra-se detalhado no diagrama apresentado abaixo, para se poder visualizar de forma alternativa.

 

 

Devido a uns problemas técnicos com a exportação do video, brevemente o mesmo será substituido por um com uma animação ligeiramente mais lenta.

 

Existe também uma versão em flash do video online, com maior qualidade e que pode ser visualizada aqui: link.


Abril 2011
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2

3
4
5
6
7
8
9

10
11
12
13
14
16

17
18
19
20
21
22

24
25
26
28
29
30


arquivos
pesquisar blog
 
subscrever feeds
blogs SAPO