TSW - That Should Work Blog » RIA’s Geral

O papel do design nas aplicações web

joaopaulo — Mon, 06 Dec 2010 12:42:04 +0000

Ou, o factor visual em aplicações RIA

Segundo a Theresa Neil, co-autora com o Bill Scott do livro Designing Web Interfaces, o design duma aplicação deve saber responder bem a estes 4 princípios:

Application Structure
Screen Design
UI Controls
Interaction Design

Ela fala em maior detalhe sobre estes princípios no artigo da UXmag. Eu não quero competir com ela porque comparado com estes gigantes eu só posso oferecer a minha perspectiva como um humilde curioso nestas matérias, analisando as coisas do lado de fora.

Existem muitas Rich Internet Applications, ou aplicações web, uma que eu uso é o Evernote. É listado pela Theresa Neil como estando numa lista das 50 RIAs com melhor usabilidade. Uso mais a aplicação do Evernote de desktop para lhe acessar mais fácilmente, mas uma vez ou outra já tive de ir ao site e ter a experiência em primeira mão de não só poder maravilhar os olhos com o bom aspecto da interface, como ao mesmo tempo conseguir aceder ou fazer aquilo que quero estando lá.

Os cães quando nascem, têm os olhos e as orelhas fechadas. Ao fim de um dia ou outro as orelhas abrem-se e podem começar a ouvir, e ao fim de uma semana é que finalmente abrem os olhos para ver o mundo. Mas logo desde que nascem já têm o nariz aberto e estão sempre a snifar. O nariz é o sentido mais poderoso que eles têm. O nosso é a visão.

Nós temos uma série de sentidos, o visual, o auditivo, olfactivo, gustativo e táctil. O ser humano funciona muito à base do visual, dos olhos e daquilo que vemos. É por isso que jogos com bons gráficos normalmente vendem bem, as raparigas jeitosas levam com olhares prolongados e as aplicações web conseguem-se tornar uma potencial boa experiência.

Se o design for bonito mas a usabilidade for péssima, estamos mal. Se o design for mau e a usabilidade for boa, estamos também mal. Não há desculpa, uma boa aplicação tem de ter um bom design. Se eu estiver em qualquer aplicação web/RIA e, ou não gostar do layout/design, ou não conseguir fazer aquilo que eu quero, vou ficar igualmente frustrado. Na primeira, porque a aplicação é feia e não me cativa (mesmo que consiga fazer as coisas), e na segunda, porque pode ser bonito mas depois não consigo encontrar aquela opção que está escondida sabe-se lá aonde.

Os 2 componentes, o design e a aplicação, têm de trabalhar em conjunto para poder dar uma boa experiência ao utilizador. Tem de ser bonito, e eficaz. Pode haver uma certa razão na mentalidade de que se a aplicação for boa, o layout pode ser feio desde que se consiga fazer aquilo que se quer, rápidamente e eficientemente. Bem, dum ponto de vista mecânico sim, mas se a aplicação web não apresentar um bom layout, é mais difícil construir um branding, ou marca, agradável aos olhos do utilizador, além do mais que, no futuro, possam aparecer outras aplicações, que façam o mesmo, e sejam mais atractivas.

O design da aplicação deve ser atractivo, mas não exagerado. Normalmente, menos é mais. É claro que também não se deve exagerar com o minimalismo da coisa para não se sacrificar opções de interface preciosas. Nas palavras de Oscar Wilde:

Everything in moderation… even moderation.

Conclusão, eu como curioso e não experiente nesta área, vou dar ênfase a uma aplicação web que seja atractiva, fácil de usar, rápida, que eu não tenha de navegar dum lado para o outro, e na qual eu consiga aceder ou fazer aquilo que quero, sem precisar de perder tempo adicional numa aventura de usabilidade.

Nota: Este artigo foi escrito aqui no TSW por João Paulo.

O João Paulo é artista, designer, marketer, e como se não bastasse a mania de ser um Homem do Renascimento e querer fazer tudo, é também escritor convidado em vários sites importantes, onde escreve sobre design em Portugal, branding, o logotipo, e outros assuntos.

Aproveito para deixar também a minha opinião acerca do artigo do João Paulo.

É claro que as nossas àreas são um pouco diferentes, no entanto elas abraçam-se na questão do design, que como foi falado em cima dificilmente anda separado da funcionaliade numa aplicação de sucesso.

Hoje em dia o design acaba por ser um ponto muito importante em qualquer aplicação, longe o tempo onde uma aplicação DBase funcional era um sucesso, atualmente tudo passa tudo por uma questão de inter-atividade, apresentação visual e funcionalidade (a chamada ux, user experience) onde devemos certamente fazer muita atenção ao padrão e simplicidade visual que iremos entregar com a nossa aplicação, visto que uma forte imagem pode até vender a aplicação!

p.s. Obrigado ao João Paulo pelo artigo e sua analise “do outro lado” das Ria’s e ja agora deixo a palavra, quem quiser escrever algum artigo esteja à vontade, é só avisar!

Tutorial – e-book – Action Script 3 – Concurso

Mário Santos — Sun, 19 Oct 2008 17:10:58 +0000

Depois de ter uma semana muito cheia de trabalho que acabou por me impedir de escrever no blog, venho anunciar um concurso que vai distribuir 3 cópias do tutorial Action Script 3 Parte II Completo conforme tinha anunciado. Junto das cópias será enviado também os arquivos fonte de todo o tutorial.

O concurso vai premiar 3 vencedores, que deverão fazer uma das três seguintes coisas:

A primeira cópia será atribuida via sorteio (mysql RANDOM() ) aos comentários deste artigo, para concorrer devem deixar um comentário que contenha a frase “Eu Quero” sendo que podem deixar um comentário no post explicando o que pensam do blog, dos artigos, dos tutoriais, do meu trabalho, etc, escrevam elogios, criticas, sugestões ou o que desejarem desde que o comentário contenha a palavara “Eu Quero” como por exemplo:

“Porque adoro programar, e o as3 torna-se bem facil com este tutorial, Eu Quero!!”

Apenas um comentário por pessoa / IP será validado.

A segunda cópia será atribuida a uma pessoa que coloque um trackback para o artigo (Action Script 3 Parte II Completo) no seu blog/site/fórum, bastando falar um pouco do post/tutorial ou fazendo referencia ao mesmo em qualquer parte do seu site. Caso o trackback não apareça no artigo, enviem-me um email com o vosso blog, indicando onde se encontra essa referencia.

Apenas um trackback por blog/site/forum será validado.

A terceira cópia vai ser atribuida ao autor de uma capa para o e-book, esta capa será escolhida no blog por via de votação dos visitantes. Esta capa será usada no e-book e o autor da capa vencedora verá o seu nome / contacto publicados no e-book num espaço ainda a decidir (provavelmente na mesma capa).

A capa deve ser feita com 2 formatos: (A4 padrão), 21cm x 29,7 e uma outra de 16.7cm x 23.8cm, no caso de uma capa feita vectorizada (illustrador) apenas é necessário uma capa A4, se possivel a 300dpi’s.

Devem enviar o vosso nome e email junto com uma preview (jpg/png) e o arquivo fonte do trabalho para admin-@-msdevstudio.com (sem os “-”). Devem ter especial atenção ao conteudo do vosso trabalho, sendo que não devem usar imagens com direitos autoriais ou qualquer outro material que não possa ser usado em trabalhos comerciais ou de distribuição.

A unica coisa obrigatória na vosso capa, alem do tamanho, é uma pequena referencia ao blog a este blog e se entenderem o seu slogan. Podem também incluir o vosso nome de forma discreta na mesma capa, mas entendam que deve ser possivel a sua eliminação / edição sem grande dificuldade.

Como devem entender, será mais facil deixar um comentário ou trackback, mas devido à simplicidade o numero de participantes será maior e serão muito menos as hipoteses de vencer visto que mais pessoas optarão por este meio.

No caso de apenas haver uma capa a concurso, esta será declarada como vencedora.

No caso dos comentários e trackback’s, o periodo do concurso fecha dia sexta, dia 25/10/2008 às 23:59 hora (GMT+01:00) Bruxelles, Copenhague, Madrid, Paris, os vencedorres serão anunciados no dia 27.

No caso das capas, serão validadas até dia 27/10/2008, segunda, ás 23:59 no mesmo fuso horário (GMT +01:00), e a votação das mesmas será feita a partir de dia 28 até ao dia 2, o vencedor será anunciado dia 3.

A mesma pessoa pode participar nas 3 formas do concurso, multiplicando assim as suas hipoteses de ganhar.

NOTA: O tackback deve ser feito ao artigo (Action Script 3 Parte II Completo) e não a este artigo/concurso.

Bom, boa sorte!

Abraço.

TSW Blog incentiva os estudos de Flex / RIAs !

Mário Santos — Wed, 27 Aug 2008 15:26:24 +0000

Por vezes torna-se chato ler o artigo todo em determinada hora do dia, ou porque é muito extenso ou com muito código. Por pensar nisso e nos estudos dos leitores, foi disponibilizado agora em cada post um link ao fundo que permite fazer o download do artigo em formato PDF para guardar, distribuir ou enviar por email, até mesmo para imprimir e seguir atentamente o artigo. Os comentários também são incluidos no pdf para explicar algumas duvidas de outros utilizadores.

É o TSW a pensar nos leitores, que estão a dar um feedback muito positivo e acho que no novo TSW apenas estava a faltar tal utilidade.

Futuramente estou a pensar criar um sistema de mailling-list para receber automaticamente cada post que for colocado. Aí só têm que colocar o seu email e receber as novidades fresquinhas…

Abraço.

Venha esse feedback!!

Espero que seja util, e aproveite, abra este post e clique já no link em baixo para testar o sistema!

p.s. Devido a alguns problemas com a compatibilidade do sistema de criação de pdf, este teve que ser desactivado no momento… estou a tentar resolver o problema, que deve-se a algumas funções do php, que são incompativeis com alguns pontos de segurança do WordPress.

Prometo ser breve.

TSW Forum. Novidades fresquinhas.

Mário Santos — Thu, 14 Aug 2008 09:15:27 +0000

Depois da mudança de layout e a criação de alguns widgets para o blog, reparei que tenho 130 artigos publicados no blog e cerca de 560 comentários, o que dá uma media de quase 6 comentários por post, no entanto existem posts com muitos comentários que são duvidas sobre AS3 e Flex, algumas nem falam directamente do artigo/tutorial, pelo que houve necessidade de criar uma area onde possam ser discutidos alguns assuntos sobre o blog, artigos, novidades e ria’s em geral, e o forum msdevstudio nasceu precisamente para preencher essa necessidade. Algumas duvidas que surgam não ligadas ao artigo/post em causa serão respondidas no forum, pelo que passará a ser o local mais indicado para duvidas não relacionadas.

Podem aceder ao forum em forum.msdevstudio.com.

Registem-se, perguntem, partilhem e ajudem!

Abraço.
Mário Santos.

Flex Action Script MP3 Player + Equalizer

Mário Santos — Wed, 25 Jun 2008 15:22:26 +0000

Depois de estar ausente 2 dias das publicações no blog, venho anunciar um doce para os leitores, depois de muito investigar, testar e inventar, lá consegui realizar um projecto ambicioso.

Criar um leitor de mp3 para qualquer aplicação flex com um equalizer, algo meio complicado no inicio, mas com um resultado final lindo

Vamos aos detalhes:
* www.msdevstudio.com
* MP3 Player v1.0
* Um simples leitor de mp3 feito totalmente em action script, extendendo
* um canvas, com um spectrum analiser, que nos mostra como podemos usar
* os dados do flash.media.SoundMixer para obter as variações do espectro
* de audio e com elas desenhar a respectiva variação das ondas numa linha.
*
* Podemos definir a cor do spectrum, e fundo, autoPlay e urlMP3
* Por defeito:
* corSpectrum: #43ADF0;
* corFundo: #202021;
* autoPlay=false;
* urlMP3 = http://www.msdevstudio.com/music/Obssesion.mp3
*
* Para usar basta copiar o package (preservando as directorias e nomes com->msdevstudio->playSound)
* para a pasta do vosso projecto, e este player passa a estar disponivel na janela componentes em custom
* ou se preferirem usar em action script, usam apenas para testar:
*
* import com.msdevstudio.playSound;
*
* var meuPlayer:playSound;
*
* e numa função:
* meuPlayer.corSpectrum=”#43ADF0″;
* meuPlayer.corFundo=”#202021″;
* meuPlayer.urlMp3=”http://www.msdevstudio.com/music/Obssesion.mp3″;
* addChild(meuPlayer);
* meuPlayer.play();
*
* estão disponiveis os metodos:
*
* meuPlayer.play();
* meuPlayer.stop();
* meuPlayer.pause();
* meuPlayer.resume();
* meuPlayer.autoPlay=false/true;
* meuPlayer.corSpectrum=”#43ADF0″; //cor
* meuPlayer.corFundo=”#202021″; //cor
* meuPlayer.urlMp3=”http://www.msdevstudio.com/music/Obssesion.mp3″; //ficheiro audio/mp3
*
* estas opções também estão disponiveis no painel de propriedades, em geral, sendo mais facil definir as opções.
*
* Por Mário Santos
* www.msdevstudio.com
* Creative Commons by-nd-nc 3.0 unported
*

Vejam a imagem:

Podem aumentar e diminuir o seu tamanho quase sem limitações… o seu uso como dito em cima é bem simples..vejam algumas personalizações…

Vejam o exemplo online aqui com o código fonte disponível

Se quiserem apenas o package, façam download aqui

p.s. O código ainda não está comentado… mais à frente faço isso.

Deu trabalho, mas vocês merecem! :p

Venham de lá esses comentários!!

Abraço.

Ezmo, O seu leitor de musica online

Mário Santos — Sun, 02 Dec 2007 14:00:15 +0000

Desta vez o Flex presenteia-nos com um sistema de musica online, basicamente este serviço disponibiliza as suas musicas onde quer que esteja, via internet. É muito facil de usar e muito util para quem nao passa sem as suas musicas preferidas e nao quer andar com o seu leitor portatil atrás.

Basta ter uma ligaçao de internet disponivel.

O serviço consiste em enviar as suas musica para o servidor, e depois aceder à sua conta a qualquer momento em qualquer lugar, e tem as suas musicas sempre disponiveis… Facil não é??

Basta registar-se gratuitamente para começar a usar, se quiser apenas testar, tambem o pode fazer, sem registo, clicando no botão “New user? START”. e ja tem disponiveis bastantes musicas para poder ouvir.

A elaboração do “aplicativo” foi feita com recurso ao Adobe Flex, o que sem duvida nos garante uma fácil utilização, bem como um grafismo bem simples e bonito.

Uma pequena preview do serviço:

Mais informação em: www.ezmo.com

Post partilhado em www.xtechpt.com

Ria's, Onde encontrar Suporte/Tutoriais

Mário Santos — Sun, 02 Dec 2007 13:32:36 +0000

Bem, disponibilizo aqui uma lista de sites onde podem ser encontradas diversas informações sobre aplicações RIA bem como o conteudo geral desses sites.

Em Português / Brasileiro :

http://www.riapt.org/ Comunidade Portuguesa de Ria’s
http://www.vedovelli.com.br/ Site com alguns screecast’s.
http://www.flexbrasil.org Site oficial da lista flex-brasil do yahoo
http://www.igorcosta.com/blog/ Site do fundador do Flex-Brasil
http://www.wendelmaques.com.br/ Site sobre Ajax, extjs, air e flex.
http://leonardofranca.com.br/index.php/pt/ Site que fala de tudo um pouco sobre Ria’s
http://blog.zellen.com.br/ Site dedicado a Ria’s

Em Inglês/ Outros :

http://www.flex.org Site oficial do Flex
http://www.amfphp.com Biblioteca php/mysql/sql para comunicar com o flex/flash
http://www.person13.com/wordpress/ Fala de tudo um pouco…
http://flexed.wordpress.com/ Flex e ActionScript
http://labs.adobe.com/technologies/air/ Adobe Air
http://labs.adobe.com/technologies/flex/ Adobe Flex
http://silverlight.net/ Silverlight da Microsoft
http://www.microsoft.com/expression/ À volta do mundo Silverlight / Expression

http://www.thefreecountry.com/webmaster/ajax.shtml Ajax frameworks e tutoriais

Adobe Flex Explorers
Uma lista de explorares que mostra muito do que é possivel fazer com o Flex:

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html – Style Explorer (Construtor de css)
http://www.maclema.com/content/sek/ Style Explorer (o mesmo mas com suporte ao kuller -http://kuller.adobe.com- )
http://demo.quietlyscheming.com/ChartSampler/app.html (Charts Explorer, explorador de graficos/estatisticas)
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html (Demonstraçao de componentes drag & drop )
http://www.merhl.com/flex2_samples/filterExplorer/ (Filter Explorer, fade, alpha, glow, distort )
http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html (Primitive Explorer, graficos via actionscript, propriedades)
http://flexapps.macromedia.com/flex15/explorer/explorer.mxml?versionChecked=true (Samples Explorer, exemplos com codigo fonte)
http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html (Custom Easing Function Explorer, permite personalizar efeitos via actionscript)

Devem ter o flash player 9 update (disponivel aqui: http://labs.adobe.com/downloads/flashplayer9.html) caso nao consigam ver.

Espero que vos seja util :)