Introdução Criando um protótipo
Contents
1. Bastar clicar no item Project gt Run Project ou simplesmente F5 Nos casos de projetos web ele ser aberto no navegador como ser representado a seguir Welcome Projeto aberto no navegador Microsoft Expression Blend 3 SketchElor O TERA BARES Analisando o ambiente em execu o percebemos Microsoft SketchFlow Prototype algumas regi es diferentes do projeto em desenvolvimento ft d gt Welcome N Esta nova exibi o dividida em duas regi es uma a de NAVIGATE apresenta o dos prot tipos de tela direita e a outra a O Bindings de ferramentas de navega o e feedback map sketchFlow Tinian player a esquerda Boots Pb ts A esquerda temos o SketchFlow player Nela temos duas sub regi es uma a navigate onde est o localizadas as ferramentas de navega o das telas criadas o clicar nelas podemos visualizar as telas na rea de apresenta o dos prot tipos A outra sub regi o Map onde poss vel navegar de forma mais r pida pelas p ginas criadas atrav s do SketchFlow Map E por fim h uma regi o mais voltada aos clientes o feedback Nela poder o ser colocadas sugest es na rea de texto e tamb m escrever m o livre a sua opini o sobre o andamento do projeto se est bom o que precisa ser melhorado ou adicionado tudo isso utilizando as ferramentas de escrita caneta marcador e l pis localizadas logo acima da rea de texto Bindings Cliente e feed2. folder pasta e em seguida ExportFeedBack Ao salvar o arquivo na pasta desejada ser criado um arquivo do tipo Expression SketchFlow Feedback File que dever ser enviado ao desenvolvedor o receber o arquivo os desenvolvedores devem abri lo indo na guia Windows gt feedback Na janela que se abre dever ser selecionado o arquivo Uma vez adicionado poss vel visualizar todas as observa es feitas pelo cliente clicando no cone show ink l mpada acesa no painel feedback Logo ap s essa etapa aparecer na rea SketchFlow map uma l mpada acesa em cada p gina que o cliente colocou alguma observa o assim o desenvolvedor poder visualizar essas p ginas e adapt la ao que o cliente pediu Microsoft Expression Blend 3 SketchEle Refer ncias http www linhadecodigo com br artigo 2941 criando prototipos com o sketchflow parte 1 aspx03 08 http www linhadecodigo com br artigo 2967 criando prototipos com o sketchflow parte final asx03 08 http wpftutorial net SketchFlow html 05 08 http msdn microsoft com en us expression ee307361 aspx 05 08 http www dotnetcurry com ShowArticle aspx ID 667 05 08
3. Microsoft Expression Blend 3 SketchEle Introdu o O SketchFlow um dos produtos da fam lia Expression que permite que qualquer pessoa possa demonstrar rapidamente ideias fluxos de aplicativos e layouts na tela utilizando componentes desenhados m o Os projetos conclu dos no SketchFlow s o vistos dentro de um player SketchFlow possibilitando que clientes ou membros da equipe possam modificar ou a adicionar coment rios nos prot tipo Estes projetos podem ser independentes ou convertidos diretamente para aplica es de trabalho encurtando assim o tempo de desenvolvimento Com SketchFlow os designers criam diagramas de aplicativos para representar o fluxo interativo de um aplicativo Um projeto SketchFlow consiste em m ltiplas telas onde cada uma representa uma p gina diferente ou estado de um software site aplicativo m vel etc As telas s o quadros brancos onde poss vel usar qualquer uma das formas e dos controles existentes no Expression Blend ou at mesmo rabiscar desenhar ou escrever criando uma interface de usu rio de prefer ncia do cliente LA Essencialmente este software uma ferramenta que facilita o esbo ar de aplica es conceituais Para iniciar o processo poss vel simplesmente criar uma s rie de telas e desenhar sobre eles fazendo com que o prot tipo se torne o mais pr ximo do produto acabado na medida que o projeto for avan ando O que pode ser levantando de negativo sob
4. back Quando se trata de desenvolvimento de software tudo feito pensando no cliente tentando resolver os problemas ou simplesmente agilizando processos Portanto importante que o cliente partisse durante todo o processo de desenvolvimento do sistema para ele avaliar se o que esta sendo criado realmente o que ele quer Ent o como j foi citado o SketchFlow um excelente software que possibilita uma interatividade entre o cliente e seu software Ap s os prot tipos serem criados o cliente j pode receber suas telas O arquivo de feedback gerado da seguinte forma ir em file em seguida clicar em package sketchFlow Project depois escolher o local que deseja salvar o arquivo deixando a op o open Windows Explorer when complete marcada Quando a tela do Windows Explorer abrir copie os arquivos html e xap em seguida cole ambos os arquivos em uma nova pasta Estes dois arquivos ser o enviados para o cliente Ao abrir o arquivo html o que aparecer uma tela semelhante a figura a que aberta com o F5 O futuro usu rio do sistema poder observar todas as telas com seus detalhes anima es e etc Se ele n o gostou de algo ou acha que faltou algo ele pode utilizar as ferramentas j comentadas para explicita las Microsoft Expression Blend 3 SketchEle Ap s sua an lise ele dever salvar as observa es para enviar aos desenvolvedores Ele pode fazer isso indo na aba de feedback e clicando no cone
5. baixo Clique em Navigate To para visualizar todas as telas que fazem liga o com a tela atual Ao selecionar qualquer uma desta p gina surgir um bot o que ao ser clicado ir direcionar a p gina seleciona Por exemplo na p gina abaixo foi criado um bot o voltar que ao ser clicado ir voltar para a tela de boas vindas o y Project AutoComplet Snowboard Online SketchFlow Border 2 a X Styles E Calendar Behaviors Checkbox Effects 1 at i Copy g Paste a Delete Locations Rename Media Categories Align Auto Size Group Into Order Pin Active Container Bind Content to Data UserControl E Edit Text Make into UserControl Emas E mer Make Into Component Screen Boots F IMJOIRNDO Make Into Control E TextBlock M Edit Template CheckoutSuccessful Wel E q eicome TextBlock Edit Additional Templates CheckoutUnsuccessful View XAML Community 7s liveChat Start jeito Activate State gt C ED vortar S Bindings Exemplo de navega o entre p ginas Perceba que no SkethFlow Map tamb m criado uma liga o indicando de bindings pode ir para welcome e virse e versa f UserControl checkout navbar Microsoft Expression Blend 3 SketchElom Execu o do projeto e feedback A ferramenta Expression Blend witch SketchFlow pode executar as telas de modo a possibilitar a verifica o do funcionamento na pr tica ao desenvolvedor
6. e o ExemploScreens O Eis Ras primeiro utilizado para executar o EM e SketchFlowPlayer j o segundo usado para a oa men ego a armazenar todas as telas do prot tipo Nesta ultima i n s o criados alguns arquivos diferentes e EE Properties Screen 1 2 um XAML normal como A qualquer outra p gina em Silverlight n References EB Fonts A Properties E screen 1 Sareen 1 1 xaml Sketch Flow Cont m as informa es sobre todas as telas usadas para prototipagem 1 SAI Screen 2 Screen 2 D SketchStyles xaml enciclop dia de recursos ita tin Ej Sketch Flow com o n mero de estilos que o projeto SketchFlow ES faz uso internamente e E Start Screen taxam No centro o espa o destinado a cria o e modifica o das telas do sistema ou seja a tela principal Cria o de telas Para adicionar novas telas ao sistema preciso ir no SketchFlow Map clicar com o bot o direito em um espa o vazio e Create a Screen ou simplesmente passar o mouse sobre um ret ngulo esperar que apare a tr s novas op es abaixo e selecionar a primeira clicando e arrastando Da mesma forma podem ser criados Components Screens que s o componentes comuns em mais de uma tela A imagem abaixo especifica isto onde a p ginas binding possui um componente navbar esquema de navega o Microsoft Expression Blend 3 Sketchkle Welcome Screen 2 xaml Start Screen 1 xam UserControl
7. ixaml Bindings gt checkout p Bindin Snowboard Gine n EA A C o Epe nke SketchFlow Map Welcome Bindings ReviewCart Community Al m de Bindings as p ginas Community Boots Boards e Welcome possuem o mesmo menu Adi o de componentes Para adicionar um componente preciso ir at a rea de tarefas clicar no cone de componentes logo ap s surgir todos os componentes que podem ser adicionados A baixo a imagem mostra os componentes com o estilo SketchFlow Segrch Project ES Border Button E SketohFlow EG Controls A CheckBos ComboBox E Styles DatePicker Ellipse Behaviors dies Sy ListBox PassuordBox Media Categories ET Progressbar 6 RadioButton Locations E soroll Bar pg sorol Viewer TabControl TextBlock E TreeView Calendar ContentPresenter Gridspiitter a Popup Rectangle F Slider TextBox Microsoft Expression Blend 3 SketchEle Para adicionar qualquer componente basta apenas arrastar o elemento desejado para a tela e em seguida usar a ferramenta de sele o para posiciona lo ou ajusta lo na tela Navega o entre telas Para criar uma navega o entre as telas simples usaremos a aba de Object and Timeline Basta clicar com o bot o direito em cima do componente na nesta rea se ele n o estiver habilitado v em Windows gt Object and Timeline em seguida aparecer as op es poss veis como podemos ver na imagem a
8. re o software restrito somente ao fato de ser um pouco complexo a cria o dos modelos onde preciso entender como funciona cada tela e como elas se comportam compreendendo o seu funcionamento Projects Samples Zune3D Silverlight 3 Wall3D Silverlight 3 snowboard_online utorials SnowboardSketch WPF PCGamingSketch Silverlight 3 PCGaming Silverlight 3 ColorSwatchSL Silverlight 3 BeeHive Silverlight 3 Criando um prot tipo Ao ser aberto o Expression Blend 3 SketchFlow disponibiliza tr s op es e Samples aqui ser o disponibilizados alguns exemplos prontos ou parciais de modo que o usu rio possa edita lo a sua prefer ncia e Help essa aba mais voltada para iniciantes pois uma rea de auxilio onde poss vel visualizar o manual de instru es tal como os guias e grupos online Microsoft Expression e Projects projetos recentemente abertos Ao selecionar a cria o de um novo projeto a janela abaixo surgi H a op o de projeto vazio do tipo Silverlight ou WPF Enquanto as linguagens podem ser C ou em VB Visual Basic New Project Project types Rg Silverlight 3 Application Website Elg wpF BO Silverlight 3 Application K Silverlight 3 Control Library BF silverlight 3 SketchFlow Application project for prototyping rich cross platform web based applications Name Exempla Location CAUsersVonasiDocumentsiExpressioniBlend 3 Browse Language Vis
9. ual CF v Com o novo projeto criado surgem novos pain is de desenvolvimento Um prot tipo SketchFlow composto por elas Daremos nfase a alguns a seguir Ambiente de desenvolvimento SketchFlow Map O primeiro painel o SketchFlow Map Com ele poss vel se orientar durante o desenvolvimento do projeto com a cria o de um diagrama que cont m todas as telas representadas por pequenos ret ngulos e suas liga es SketchFlow Map CheckoutSuccessful LivelChat TAEL CheckoutUnsuccessful y O B ES ao Dep si ts Podem ser visto algumas outras op es passando o mouse sobre os ret ngulos tais como a cria o de novas telas realizar liga es e criar telas de inser o em verde Al m disso altera o da cor em casos em que for necess rio o destacar algo Microsoft Expression Blend 3 SketchEle Automaticamente criado a primeira tela start Esta a tela que o prot tipo come a sempre que for executado Pode ser feito qualquer tela na tela inicial do mapa As liga es representam os caminhos que podem ser seguidos durante a execu o do projeto Tendo o exemplo acima da p gina inicial pode se ir para a tela de boas vindas e dela para Boards Boots community Bindding e assim por diante SketchFlow Projecis No lado superior esquerdo h a aba projects que traz uma ideia sobre a arquitetura do projeto Perceba que criado dois projetos o Exemplo
Download Pdf Manuals
Related Search