Skip to content
23/06/2010 / Danresa Consultoria de Informática

Tutorial 1: Introdução ao SketchFlow

Para prototipação de projetos de TI o SketchFlow da Microsoft é uma excelente ferramenta.

Um recurso bem interessante é a publicação do protótipo em ambiente web e a coleta de feedback. O cliente pode navegar pelas páginas do protótipo e entrar com seus comentários. Os comentários podem ser exportados para um arquivo de feedback e enviados para a área envolvida pelo desenvolvimento do projeto.

A DANRESA Consultoria de Informatica utiliza esta ferramenta em seus projetos com clientes. Os protótipos ajudam na visualização de telas, de processos, e de fluxos de trabalhos tornando tudo menos abstrato para os clientes. Na hora de por a mão na massa não há dúvidas nem para o cliente, nem para a DANRESA dos trabalhos a serem desenvolvidos, melhorando a comunicação e as interações a cada etapa do projeto.

Abaixo segue um pequeno tutorial sobre a ferramenta e alguns links interessantes.

 SketchFlow é uma ferramenta de prototipagem presente no Expression Blend. Esta ferramenta é muito boa para criar protótipos de aplicações para mostrar aos compradores da aplicação. Assim evita-se muito tempo perdido ao alterar constantemente uma aplicação pois podemos, a partir de um sketch book, incoporar acções e eventos. Ou seja, temos uma aplicação completamente funcional mas com o aspecto de um livro de rascunhos sendo que esta aplicação é facilmente modificável.

Neste primeiro tutorial não vamos avançar muito nas capacidades do SktechFlow. Vamos criar uma aplicação muito simples em que o utilizador vai ter uma página para fazer o login. Caso falhe será levado para um ecrã vermelho e no caso positivo será levado para um ecrã verde. 

Para criar um projecto SketchFlow basta escolher criar um novo projecto e depois escolher Silverlight 3 SketchFlow Project ou WPF SketchFlow Project dependendo do tipo de projecto que pretenda. No nosso caso pretendemos criar um projecto de SketchFlow para Silverlight 3.

Após a criação do projecto aparece-nos o nosso workspace. Como podemos ver do lado esquerdo temos o nosso projecto, os “assets” e os estados. Na tab de projectos temos todos os ficheiros que constituem o nosso projecto recentemente criado. Na tab “assets” temos todos os elementos que podemos inserir no nosso projecto, entre os quais controlos, ecrãs, estilos, comportamentos, efeitos, etc. De todos estes só vamos abordar os controlos neste primeiro tutorial.

Um projecto de SketchFlow permite-nos inserir controlos normais mas uma das coisas que mais me chamou a atenção é o facto de termos controlos do tipo esboço. Ou seja, controlos em que o template faz com que estes pareçam desenhados com lápis. Para aceder a estes controlos basta aceder à categoria “SketchStyles” como está na imagem em baixo.

Outra coisa que este SketchFlow traz é o mapa de SketchFlow. Aqui podemos criar muito facilmente transições entre os vários ecrãs. Mas iremos abordar com mais profundidade este tema mais à frente neste mesmo tutorial. 

Agora que já sabemos onde estão os nossos controlos vamos criar um simples formulário onde o utilizador irá preencher o seu nome de utilizador e password e depois carrega num botão para proceder à validação. De notar que neste tutorial não vamos tratar da parte de comportamentos. Será um tema para um tutorial mais avançado. 

O resultado final do formulário é apresentado na imagem em baixo. 

Agora que já temos o nosso formulário criado temos que criar os ecrãs seguintes e as respectivas transições. Para isso vamos utilizar o mapa. 

Ao passar o cursor do rato por cima do “Screen 1” (o nosso ecrã principal) aparecem-nos várias opções: Criar um ecrã ligado, ligar a um ecrã existente, criar e inserir uma componente de ecrã e alterar a tag visual. Se decidirmos criar um ecrã ligado vai ser criado um novo ecrã ligado a este. Se decidirmos ligar a um ecrã existente, este irá ficar ligado ao outro ecrã que escolhermos. A terceira opção permite-nos ter elementos que são comuns a todos os ecrãs (ex: Logótipo da empresa). E a última opção permite-nos alterar a cor do objecto para ser assim mais fácil identificar que tipo de objecto é. 

No nosso caso, como é possível ver na imagem em baixo, criámos 3 ecrãs. O “Screen 1” que é o nosso ecrã principal onde está o formulário, o “Sucesso” caso as credenciais estejam correctas e “Falha” caso a password ou nome de utilizador estejam errados. De reparar que alterámos as cores para melhor compreender o diagrama. Neste caso não era muito dificil de perceber mas em esquemas mais complexas torna-se mais complicado. 

De reparar, na imagem acima, que do “Screen 1” para o ecrã “Falha” temos uma seta para a frente e outra para trás. Isto porque no caso de existir um erro na introdução das credenciais queremos dar a possibilidade ao utilizador de voltar a tentar como podemos ver no ecrã em baixo. Para o caso de sucesso temos um ecrã bastante semelhante ao apresentado em baixo mas sem nenhum botão e com a cor verde. 

Agora já temos os ecrãs. Mas então e como navegamos entre eles. Muito facilmente!!!…como podemos ver em baixo. Basta pressionar sobre o objecto com o botão direito do rato e escolher o ecrã para o qual pretendemos ir. 

Agora já temos o nosso projecto terminado. Vamos testá-lo. Para isso basta pressionar F5 para compilar e correr o mesmo utilizando o SketchFlow Player. Tal como podemos ver no ecrã apresentado em baixo temos assim acesso a todos os ecrãs que estão ligados ao ecrã principal. É portanto muito fácil navegar entre os ecrãs. 

Por exemplo, ao navegar para o ecrã “Falha”, tal como podemos ver em baixo, temos o ecrã vermelho com o botão que nos permite navegar outra vez para o inicio. 

O objectivo deste post está concluido. De referir que o SketchFlow é uma ferramenta com muitas capacidades e não abordámos quase nenhuma neste post. Ficam para os próximos tutoriais. 😉 

Fonte do artigo: http://gozoomin.com/blogs/tbarbosa/archive/2009/10/03/tutorial-1-introdu-231-227-o-ao-sketchflow.aspx

Para assistir à vídeos tutoriais sobre a ferramenta acesse: http://expression.microsoft.com/en-us/ee426886.aspx

Stay tuned!!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: