Neste tutorial vou falar-vos das capacidades do SketchFlow Player. Tal como disse no último post o SketchFlow é uma ferramenta de prototipagem e o SketchFlow Player é o ambiente onde uma aplicação SketchFlow vai correr.
O SketchFlow Player corre sobre o browser e é multi-plataforma. Isto é extremamente útil pois podemos desenvolver um protótipo extremamente complexo e apenas passamos ao cliente uma página web. O SketchFlow Player tem também algumas ferramentas muito boas e simples para criar notas e feedback. Tal como podemos ver na figura em baixo temos canetas para assinalarmos no "canvas" os locais que têm que ser melhorados e depois podemos associar feedback a esses mesmos desenhos.
É possível ver também o mapa do nosso projecto tal como conseguimos no Blend. Isto facilita que o cliente consiga ver a estrutura e o "workflow" da aplicação.
Como podemos observar nas imagens em baixo inserimos 2 esquemas no nosso "canvas" e associados a estes 2 comentários. Assim o cliente diz o que pretende ver alterado na aplicação assinalando o local que está mal e criando comentários associados a explicar o que está mal.
Este comentários podem ser vistos ou não. Existe um ícone que mostra ou esconde os "desenhos" permitindo assim que a aplicação posso continuar a ser visionada sem o transtorno de ter esquemas extra no ecrã.
Agora uma das partes mais interessantes do SketchFlow Player é o facto de podermos exportar o Feedback. Para isso basta seleccionar o ícone visível na imagem em baixo. Preencher o nome do autor que inseriu o feedback e gravar o ficheiro no disco tal como é explicado nas seguintes imagens.
Agora que o cliente já gerou o ficheiro de feedback pode enviá-lo para quem criou a aplicação para que este possa carregá-lo para o projecto no Expression Blend e possa assim ver as alterações que o cliente pretende efectuar. Este processo de abrir os ficheiros de feedback dentro do Expression Blend é muito simples como é podemos ver em baixo. Primeiro temos que verificar que a janela de Feedback está visível no nosso projecto. Por defeito não está visível.
Depois de estarmos na janela temos que adicionar o ficheiro. Para isso seleccionados o ícone "+" no canto superior direito da janela de Feedback e vamos buscar o ficheiro que o cliente nos passou. A partir deste momento temos o feedback do nosso cliente no ecrã.
Tal como no SketchFlow Player podemos retirar a visibilidade aos "desenhos" para continuarmos a editar o nosso projecto normalmente e fazer as alterações que o cliente pretende. Uma coisa a reparar é o facto de no mapa aparecerem distinguidos os ecrãs que têm comentários com um ícone de uma lâmpada.
Outra funcionalidade bastante interessante é a possibilidade de podermos exportar o projecto para Word. Isto vai criar um relatório com todos os comentários e imagens do nosso projecto. Isto é muito bom pois um cliente pode querer analisar a aplicação no papel em vez de analisar no SketchFlow Player e ao ter acesso a este relatório pode fazê-lo.
E está assim explicado o funcionamento do SketchFlow Player...
Comentem ;)
Depois do REMIX'09, em Lisboa, onde assisti a algumas sessões muito interessantes sobre Expression Blend, Microsoft Surface e User Experience não resisti a fazer um post sobre o que mais me fascinou nestas sessões. E o que mais me fascinou como devem imaginar pelo titulo do post foi o SketchFlow. O orador desta sessão foi o Arturo Toledo que é Product Manager na Microsoft em Seattle para a equipa de UX Platform & Tools (Silverlight, WPF, Expression...).
O 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. ;)
Stay tuned!!