Making the Web Beautiful!

Há pouco tempo num evento do Sharepoint 2010 um dos oradores iniciou a sua apresentação com este vídeo.

Trata-se do trabalho de Mark Coleran. Quem é? Ele faz aquelas imagens e gráficos que aparecem nos ecrãs e computadores de alguns filmes e séries. Já todos vimos aquela cena em que o Horácio coloca uma impressão digital na máquina e o ecrã começa a passar imagens de suspeitos até encontrar a correspondência certa. É claro que se fossemos nós a fazer o interface daquela aplicação apenas usávamos um botão a dizer “Pesquisar” e uma página a dizer “Resultado da pesquisa”. O mais importante para nós é o que está por trás, a maneira como é feita a pesquisa. Mas a sugestão do orador da Microsoft (Michael Koester) era que devemos preocupar-nos mais com a aparência das nossas aplicações e web sites. Esse é cada vez mais um aspecto importante para que as nossas soluções tenham sucesso. E as interfaces que vemos nos filmes ajudam-nos a perceber isso, apesar de sabermos que nada daquilo funciona na realidade. Senão vejamos, qual é o objectivo daquelas imagens?

1. São apelativas e captam a atenção;
2. Em apenas alguns segundos o espectador consegue perceber o que está a acontecer.

E é exactamente isso que queremos que os nossos clientes sintam em relação às nossas soluções na hora de fazerem uma escolha entre outras propostas. Além disso temos cada vez mais pessoas a usarem equipamentos com ecrãs de alta resolução e televisões de sala a aceder a aplicações on-line. Nesses ambientes a imagem é muito importante.

Para este fim, tratando-se de um evento Microsoft, foi sugerido o Silverlight para enriquecer visualmente as nossas aplicações. Foi feita uma demonstração e o resultado foi este:


Neste caso o objectivo era mostrar o número de vendas de uma empresa em vários países. É claro que um simples gráfico feito no excel serviria. Mas esta forma torna a consulta mais interessante e dá a imagem de uma empresa em movimento (além de se parecer com uma imagem de um filme de espiões).

No próximo dia 6 de Maio teremos o WebCamp da Microsoft. Lá serão abordados os tópicos HTML5 e CSS3, ferramentas importantes para no futuro produzirmos sites mais atraentes.
Basta fazermos uma pesquisa sobre estes tópicos e rapidamente encontramos boas sugestões. Por exemplo, encontrei um tutorial em que podemos transformar uma simples lista de items em algo como isto:


Outra sugestão: para começarmos a melhorar o aspecto dos nossos sites porque não começar por escolher melhor as fontes que usamos? O Google Web Fonts contem fontes recentes e criativas que podemos consultar e usar facilmente.


Links:
http://www.google.com/webfonts/preview#font-family=Cabin+Sketch
http://html5gallery.com/
http://labs.mandogroup.com/
http://designlovr.com/use-css3-to-create-a-dynamic-stack-of-index-cards
http://net.tutsplus.com/articles/news/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5
http://www.silverlight.net/learn/tutorials/pete-brown/general-tutorials