João Gonçalves

Nos dias que correm, criar uma “presença digital” ou “presença web” para um cliente, implica alguma reflexão e representa um conjunto de desafios para o Web Designer. Qual é o cliente que hoje não gostaria de ter ou mesmo exige uma versão do seu site para tablets ou smartphones?

Ultrapassar as inconsistências dos browsers, as diferentes resoluções de ecrãs já por si só traduz-se num desafio para o Web Designer. Mas como ultrapassar os novos desafios que são apresentados pelas várias plataformas tecnológicas que oferecem a possibilidade de visualizar páginas web e como conseguir que o site do cliente seja consistente quer em PC’s , Portáteis, netbooks, tablets, smartphones, ebook readers e na TV?

A abordagem para a resolução deste desafio tem sido na sua grande maioria criar, subdomínios do domínio principal e optar por um design diferente para “mobile”. Mas então e para ver no iPad, no Galaxy, no Blackberry, no Nexus ou no Kindle? Cada um deles tem uma resolução diferente? O “aspect-ratio” é diferente? O Kindle não tem cores? Será que deve-se efectuar um layout personalizado para cada uma das plataformas existentes? Será isso financeiramente viável? Ou parte do público que utiliza uma plataforma vai ser sacrificado em detrimento de outro?

Umas das abordagens para este novo paradigma foi inicialmente introduzido por Ethan Marcotte: “Responsive Web Design”, o conceito é simples, em vez de criar layouts próprios e independentes para cada um dos dispositivos web existentes, é utilizada a tecnologia existente para tornar o layout não só mais flexível mas também adaptável às diferentes características (resolução, orientação, cor, “aspect-ratio”, entre outros) desses dispositivos. Um excelente exemplo desta abordagem poderá ser visualizado nesta demo: http://sn.im/.u-, o site http://colly.com/ é também um bom exemplo.

Este conceito é essencialmente baseado em 3 técnicas de HTML e CSS:
1. A utilização de “grids” flexíveis para layouts
2. A utilização de imagens flexíveis
3. A utilização de “Media Queries”

1. “Grids” flexíveis para layouts – Criar layouts flexíveis e adaptáveis a resolução do ecrã é essencial. Imaginemos um layout clássico com 2 colunas, menu à esquerda conteúdos à direita, se tivermos a visualizar numa resolução superior a 640px, com os ajustes adequados e utilização de “elastic layout” ou “liquid layout”, não haverá qualquer tipo de problema. Mas se tivermos a visualizar o mesmo site num smartphone com a resolução de 320px ou 480px (talvez as resoluções mais comuns em smartphones), o mais provável é aparecer o scroll horizontal. O ideal será adaptar este layout a uma única coluna quando a resolução for inferior a 640px e o menu em vez de ser lateral, passa para a parte superior da página, aumentando também o tamanho dos links para adaptação à tecnologia “touch” (Fitts’ Law em “Interface Design”). Não querendo abordar extensivamente deixo aqui duas boas referências para conseguir este resultado: http://sn.im/.rq (Fluid 960grid System) e http://sn.im/.0g (1140 css grid, 12 colums fluid to mobile), para mais referências relativas a layouts flexíveis podem visitar o site ZOMIGI (http://sn.im/.0i) .

2. Imagens Fléxiveis – além da flexibilidade e adaptação do layout, as imagens devem também se adaptar a resolução do ecrã. Para obter esse resultado, basta uma simples regra de css:
img {max-width:100%}
e porque não incluir aqui os vídeos também:
img, object {max-width:100%} ;
Desta forma garantimos a renderização da imagem/vídeo pelo browser não no tamanho original da imagem, mas adaptando-se ao tamanho do seu “container”, evitando desta forma o “overflow” da imagem quando o layout se adaptar de acordo com as características anteriormente referidas.

3. “Media Queries” – Aqui reside a técnica mais importante do conceito “Responsive Web Design”. Todos nós já usamos “Media Queries” quanto mais não seja para optimização da impressão de páginas web por parte do utilizador. A actual “candidate recommendation” para “Media Queries” no standard de CSS3 (http://www.w3.org/TR/css3-mediaqueries/) do W3C, inclui novos tipos de propriedades que nos permite filtrar um determinado “media” consoante a resolução, orientação, entre outros (device-with, orientation, aspect-ratio, color, …), desta forma se colocar um “Media Query”:

Resumindo, a abordagem e/ou conceito “Responsive Web Design” oferece-nos a possibilidade de criar um site flexível e adaptável às várias interfaces/plataformas existentes, independentemente da resolução de ecrã, orientação, cores, etc.
Não querendo afirmar que é a forma mais correcta de abordar o desenvolvimento de um site, é sem dúvida um método de “Design Thinking” centrado essencialmente nas necessidades e exigências do utilizador, são os conteúdos que se devem adaptar ao utilizador e não o contrário.

“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.”
— Andy Clarke

Continue Reading

A partir de hoje, irei tentar escrever todos os meus “Posts” em Português e Inglês.
Este era um desafio que há muito andava a preparar, alargando assim desta forma o alcance a outras paragens internacionais que não as da Língua Portuguesa.

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