João Gonçalves

Sorry, this entry is only available in Português.

Continue Reading

Starting today, I will try to write all my “Posts” in Portuguese and English.
This is a challenge that i was preparing for a long time ago, doing this, i hope to reach more people than those of the Portuguese International Language.

Continue Reading

Ultimamente tenho estado a ler um livro que considero um dos melhores livros de Design e programação de 2010, FORM+CODE, de Casey Reas , Chandler Williams, e LUST. 

Se até à bem pouco tempo o “Código” era um domínio exclusivo de programadores, cada vez mais Designers, artistas, etc, iniciaram o seu percurso no dominio das linguagens de programação, criando novas frameworks de programação viradas para a Arte e o Design, como são o caso do Processing, criado por Casey Reas e Ben Fry, Open Frameworks, desenvolvido por Zach Lieberman, Theodore Watson, and Arturo Castro, ou até a framework HYPE de Joshua Davis e Branden Hall, para não falar em muitas outras. 

Este livro mostra claramente como tirar partido destas ferramentas para criar trabalhos artisiticos nas várias áreas do Design e Visualização de Dados, gaming, Inteligência artificial, etc…, utilizando qualquer linguagem de programação.

Como bem sabem pelo menos aqueles que me conhecem melhor, o meu mundo é quase todo ele ocupado pela dedicação à plataforma FLASH e mais concretamente ao Actionscript, nos últimos tempos e fruto do Mestrado em Multimédia que estou a frequentar, tenho me interessado sobremaneira a visualização de dados (tema do meu projecto de Mestrado), e ao ler o livro peguei nos exemplos de Processing e resolvi brincar traduzindo alguns deles em Actionscript , pelo que deixo aqui um exemplo de como é fácil criar formas visuais usando algoritmos de repetição com recursividade. 

Exemplo:

E o Código em As3 para os mais curiosos:

 actionscript3 | 
 copy code |
?
 
001
package 
002
{
003
 import flash.display.Sprite;
004
 import flash.events.Event;
005
 import flash.events.MouseEvent;
006
 import flash.text.TextField;
007
 import flash.text.TextFieldAutoSize;
008
 
009
 /**
010
  * ...
011
  * @author Joao Gonçalves
012
  * http://joaogoncalves.net
013
  * joao@joaogoncalves.net
014
  */
015
 
016
 [SWF(width='900', height='600', backgroundColor='#ffffff', framerate=1)]
017
 public class Main extends Sprite 
018
 {
019
 
020
 private var dotSize:Number = 9;
021
 private var angleOffsetA:Number;
022
 private var angleOffsetB:Number;
023
 
024
 private var instructions:TextField;
025
 
026
 
027
 public function Main():void 
028
 {
029
 if (stage) init();
030
 else addEventListener(Event.ADDED_TO_STAGE, init);
031
 }
032
 
033
 private function init(e:Event = null):void 
034
 {
035
 removeEventListener(Event.ADDED_TO_STAGE, init);
036
 // entry point
037
 
038
 instructions = new TextField();
039
 instructions.text = "Click to generate a Tree, Double-Click to clear the stage.";
040
 instructions.autoSize = TextFieldAutoSize.LEFT;
041
 addChild(instructions);
042
 
043
 angleOffsetA = degToRad(1.5);
044
 angleOffsetB = degToRad(50);
045
 
046
 stage.doubleClickEnabled = true;
047
 stage.addEventListener(MouseEvent.CLICK, generateThree);
048
 stage.addEventListener(MouseEvent.DOUBLE_CLICK, clearStage);			
049
 
050
 }
051
 
052
 private function clearStage(e:MouseEvent):void 
053
 {
054
 this.graphics.clear();
055
 }
056
 
057
 private function generateThree(e:MouseEvent):void 
058
 {
059
 //this.graphics.beginFill(Math.random()*0xffffff);
060
 seed1(dotSize, degToRad(270), mouseX, mouseY);
061
 }
062
 
063
 private function seed1(dotSize:Number, angle:Number, xpos:Number, ypos:Number):void
064
 {
065
 
066
 this.graphics.beginFill(Math.random()*0x0000bb);
067
 if (dotSize>1) 
068
 {
069
 // create random number between 0 and 1
070
 var r:Number = Math.random();
071
 
072
 // 98% chances this will happen
073
 if (r> 0.02) 
074
 {
075
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
076
 var newX:Number = xpos + Math.cos(angle) * dotSize;
077
 var newY:Number = ypos + Math.sin(angle) * dotSize;
078
 seed1(dotSize * 0.99, angle- angleOffsetA, newX, newY);
079
 }
080
 // 2% chance this will happen
081
 else 
082
 {
083
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
084
 var newX:Number = xpos + Math.cos(angle);
085
 var newY:Number = ypos + Math.sin(angle);
086
 seed2(dotSize * 0.99, angle + angleOffsetA, newX, newY);
087
 seed1(dotSize * 0.60, angle + angleOffsetB, newX, newY);
088
 seed2(dotSize * 0.50, angle-angleOffsetB, newX, newY);
089
 
090
 }
091
 }
092
 }
093
 
094
 private function seed2(dotSize:Number, angle:Number, xpos:Number, ypos:Number):void
095
 {
096
 if (dotSize>1) 
097
 {
098
 // create random number between 0 and 1
099
 var r:Number = Math.random();
100
 
101
 // 95% chances this will happen
102
 if (r> 0.05) 
103
 {
104
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
105
 var newX:Number = xpos + Math.cos(angle) * dotSize;
106
 var newY:Number = ypos + Math.sin(angle) * dotSize;
107
 seed2(dotSize * 0.99, angle+ angleOffsetA, newX, newY);
108
 }
109
 // 5% chance this will happen
110
 else 
111
 {
112
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
113
 var newX:Number = xpos + Math.cos(angle);
114
 var newY:Number = ypos + Math.sin(angle);
115
 seed1(dotSize * 0.99, angle + angleOffsetA, newX, newY);
116
 seed2(dotSize * 0.60, angle + angleOffsetB, newX, newY);
117
 seed1(dotSize * 0.50, angle-angleOffsetB, newX, newY);
118
 
119
 }
120
 }
121
 }
122
 
123
 
124
 private function degToRad(deg:Number):Number
125
 {
126
 return deg * (Math.PI / 180);
127
 }
128
 
129
 }
130
 
131
}

Continue Reading

É verdade já tinha saudades de escrever novamente, estes últimos meses têm, sido muito complicados pessoal e profissionalmente, entretanto comecei um Mestrado em Multimédia, e a vontade de dar nova vida ao Blog surgiu, aproveito este reinicio colocando aqui um artigo que escrevi para a Computer Arts Portugal, sim é verdade, já temos a versão portuguesa, a qual aproveito aqui publicamente para dar os meus parabéns , principalmente ao António Castelhanito, pela capacidade que teve em trazer para Portugal uma revista deste calibre, pessoalmente cá estarei para ajudar a escrever artigos ou tutoriais quando assim o entenderem.

Artigo de Opinião da Computer Arts Portugal Nº2:

O que é User Experience?

 “ The main thing is that everything become simple, easy enough for a child to understand” — Albert Camus 

Aproveitando a comemoração do “Dia Mundial da Usabilidade” que decorreu no ultimo dia 11 de Novembro, irei abordar o tema “User Experience (UX)“, isto porque existem várias dúvidas e autores que defendem que UX é sinonimo de Usabilidade, pessoalmente entendo que UX é mais do que usabilidade.

Desde da década de 70, quando se começou a falar de “Ubiquitous Computing” , “Calm Tecnology” ou “Pervasive Computing“, até aos dias de hoje, ainda não existe um consenso alargado acerca da definição de “User Experience“, actualmente e segundo o standard ISO 9241-210 de 2010, User Experience é:

“A faculdade perceptiva e respostas de um individuo resultante da utilização e/ou antecipação da utilização de um determinado produto, sistema ou serviço”

Poderão muitos perguntar mas isso não é a definição de usabilidade? Não, segundo o mesmo standard, Usabilidade é:

“A medida em que um sistema, produto ou serviço pode ser utilizado por um determinado tipo de utilizador na concretização de determinados objectivos, com eficácia, eficiência e satisfação num determinado contexto de utilização”

A designação é muito parecida ambas se referem a uma medida durante e após a utilização de um produto, sistema ou serviço, no entanto, nem sempre um produto é usável  e tem um boa User Experience, alem de que o conceito de User Experience abrange também o “antes”,  além do “durante” e o “depois”, analisemos um exemplo: o Motorola ROKR E1 ITunes Phone (2005), o telemóvel tinha as melhores componentes para ter êxito, tecnologia de ponta, Design de sucesso (evolução do RAZR, com reconhecida usabilidade), e ligação ao “Market”  ITunes da Apple, então como se justifica que 2 anos depois, o IPhone tenha rapidamente conquistado a grande maioria do mercado, contribuindo para o insucesso do ROKR apesar dos 2 anos de vantagem, uma das razões apontadas é simples: os utilizadores tinham uma melhor “User Experience” no IPhone comparada com a dos os restantes modelos existentes no mercado.

Analisando , chegamos rapidamente á conclusão que Usabilidade, é uma medida influenciada por 3 factores chaves: eficácia, o utilizador consegue alcançar os seu objectivos completando e corrigindo as suas tarefas; eficiência, o utilizador consegue esses resultados com um mínimo de esforço;  satisfação, o utilizador sente-se confortável na utilização da interface durante a execução das suas tarefas.

O conceito de User Experience(UX)  é mais abrangente e resulta da interacção de vários factores, tanto a nível intrínseco, como extrínseco. Ao nível intrínseco é o produto de uma interacção complexa entre factores cognitivos, afectivos, motivacionais e atitudinais. Perante a possibilidade de utilização do sistema/produto,  o utilizador desenvolve expectativas e inferências sobre o que o produto consegue fazer (“affordances“) e em que medida este lhe permite alcançar os seus objectivos(eficiência), o que irá moldar a sua atitude face ao sistema e o modelo mental que desenvolve sobre o produto. A experiência de utilização do sistema permite ao utilizador desenvolver a sua percepção acerca do produto e registar os aspectos fulcrais da interacção em memória, a partir das aprendizagens efectuadas aquando da interacção. A interacção com o sistema leva ainda o utilizador a experimentar emoções (positivas ou negativas) e satisfação (ou não), em função da medida em que  o sistema alcança os objectivos propostos(satisfação emocional), fornece uma resposta cabal ás necessidades do utilizador e cumpre as expectativas delineadas(eficácia). Ao nível extrínseco a User Experience(UX) é moldada pelas influências e pressões sociais a que o utilizador é submetido, bem como pelo contexto socioeconómico e tecnológico em que este se encontra num dado momento. Todos estes factores condicionam a qualidade da relação criada com o sistema, por exemplo, a satisfação de possuir, ler e conservar um livro antigo será diferente caso tenha adquirido o mesmo, num livreiro clássico, num supermercado de retalho, num leilão de antiguidades ou mesmo encontrado no meio da rua.

Poderemos  caracterizar graficamente ambas as definições da seguinte forma:

Esperando que tenha contribuído para um maior esclarecimento sobre este tema, tenciono em futuras edições, abordar temas relativos  a estas novas disciplinas como são User Experience(UX), Interaction Design(IxD), Design de Interfaces, Service Design, Information Design, Information Architecture(IA), Usability, Human Computer Interaction(HCI), Data Visualization, etc…, ou seja, todos estes conceitos giram a volta de uma palavra que tão bem conhecemos DESIGN.

“ Design’s fundamental role is problem solver”— Fast Company, 2005

Continue Reading