Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Prototipação No Desenvolvimento de Software

    Enviado por

    Felipe Carvalho de Saboya
    5 visualizações7 páginas
    Prototipação no Desenvolvimento de Software - Padrão e Refatoramento de software

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Prototipação no Desenvolvimento de Software - Padrão e Refatoramento de software

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    5 visualizações7 páginas

    Prototipação No Desenvolvimento de Software

    Enviado por

    Felipe Carvalho de Saboya
    Prototipação no Desenvolvimento de Software - Padrão e Refatoramento de software

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 7
    MeV MMO OR RTA EL CS MEER Rac ec unet an cucec kN CCU CE LCs ees Ss Vinicius Rodrigues de Souza sasoetstgato ‘sap eb dst en De quesetrata artigo? Fs argo apesenta algunas defies sabre 2 proeipacio no desenvevimets de sistemas Aelnforagi, eu ieentestipscame rate pac de bana aa feldade, atop throw-away e protoiacdo eet wrt res, suas aplaces, vantagens & desvanta gens, Alm de, mostra a utilizar de uma feramenta apa de ger patios de vtos pos dependendo de qullinhao desenvoedor desea equi. Paraque serve? Nopassado,grottgo tinh came principal fia dag avalarosequstosdeum stemaatranés da desenvolimento trader Aaslmente, os limites entra prototpagneodesenotrmento da sistema se confunde,emultas vers estes pari dle so parcial e preliminar de um novo de computador ou de um nove programa, destinada a teste e aperfeigoamento. Essa definigio nos desperta para a sua funcio- nalidade, quenos faz pensar e decidir qual 6a melhor maneira de utilizé-lo, 4A. Engenharia de Software Magazine -Preaipago no Desrvohiment de Sofware er eed Oe sma si constuldos uma abordagem eve lucia. Serio escareidos alguns concitos ‘ue peti a deseavoledor aval qualé te melhor camino a segue wilt una fea eta pra o Anu Pr £m quesituaséo o tema é ati? De manera gral a prcaiace posta, ta endo melhor aciiade de ws do stema, alo aprosimaio do sstema com a5 neces fades das wus, mera da qaliage do Proje, facade de manctenio © reduc. sf de desenvobimento Enter, ni de ser um process que toe mut tempo rem sf dos prooramadores. Paras, ser emonstrado uma forma rpia des constr prottipsinteligentesewreamesaranés nue RPP, © protétipo pode ser interpretado como uma maquete, que contém os conceitos do que se pretende obte: produto final. Pode ser considerado também como a primeira versio de um produto que, mesmo com as funcionali- ddades incompletas, permite ser criticado eaperteigoado a fim de se obter qualida- deno que esté sendo produzido. Oprotétipo no Desenvolvimento de Sistemas ‘A prototipagem de sistemas tem se tornado uma pritica cada ‘vez mais comum entre os desenvolvedores, tem se mostrado «ama alterativa interessante para a solugio de vérios proble- mas, em como objetivo principal validar os requisitos, abordar questbes de interface, ¢ avaliar tanto a viabilidade quanto a complexidade do sistema, Durante a criagS0 do protstipo, usudrio e desenwolvedores ficam em constante interagio, facilitando assim, alteragBes nas funcionalidades do sistema, bem como o levantamento © mo- difcacBo de equisitos. Neste periodo,oesforgo para qualquer intervenglo, tanto nadocumentagio quantona implementagso da aplicagio, é muito menor, reduszindo mio-de-obra e, con- sequentemente, custos de produgSo. Esta atividade permite que, desde muito cedo, se obtenha uma methor percep¢do dos requisitos do sistema e também simplificando o seu esbogo. ‘Até agora foram discutidos alguns beneficios da prototipa- 80, porém existem tipos diferentes e cabe ao desenvolvedor escolher qual éa melhor utilizagio para 0 seu caso Serio vistos a partir daqui trés vertentes importantes de prototipagio: a Prototipagio de baixa fidelidade, média fi- detidade ¢ ata fidetidade. Na prototipasdo de alta fdelidade existem basicamente dois tipos que serao vistos com detalhe, 4 prototipagio Throw-Away, ou Descartével, também a Pro- totipagio Evolutiva, Prototipos de Baixa Fidelidade Este tipo de prototipagem ¢ aquela onde o protstipo nio se semelha com o produto final, serve somente de base para criticas, Pode ser realizado de virias formas, com ferramentas prprias ou até um esbogo feito com papel e caneta. Esse tipo se encaixa mais facilmentena fase inicial de desenvolvimento, onde ainda cabe a compreensio dos requisites, Sho ficeis de construir, de custo muito reduzido, de produgio extremamente §pida, antecipando o momento de validacio do usuario. Porém, esse tipo de prototipagio possui alguns aspectos que podem inviabilizar sua escolha pelo desenvolvedor. Geralmen- te0s protétipas gerados dessa maneira nao sio utilizados apés a fase de documentagao, so descartados, pois ndo podem ser aprimorados devido a sua simplicidade. Sua funcionalidade pairano processo de documentago, n3o podendo servirde base para codificagdo, testes de navegabilidade e usabilidade. Protétipos de Média Fidelidade Os protétipos de média fidelidade possuem um nivel de detalhamento maior do que os de baixa fidelidade, porém jé possum algumas definigées importantes tanto para uststio quanto para o desenvolvedor Sdo fetos por ferramentas mais especificas, pois no so somente esbocos e, por isso, devem seguir alguns critérios. Esse tipo de protétipo é bastante positive, pois o usuério jd consegue visualizar um futuro para 0 seu produto © 0 desenvolvedor ja tem no que se apoiar para a construcéo do sistema final, além de ser geralmente de facil e répida construgdo, PROJETO Deve-se considerar que, dependendo da situago, pode ndo ser a melhor escolha, pois se pode perder tempo com este processo sem necessidade, ou ser preciso um detalhamento ‘maior do que esta técnica oferece. Protétipos de Alta Fidelidade Protétipos de alta fidelidade sao aqueles que se assemelham bastante ao produto final. Muitas das vezes utiliza a mesma tecnologia que o sistema final e servem especialmente para © teste de componentes e a solusio de problemas téenicos, onde questies de compreensio dos requisitos jé ficaram para tris. Um protitipo desse tipo permite pensar nos detalhes do produto bem mais a fundo do que com especificagies no papel, e reduzsignificativamente o tempo de desenvolvimento do produto final, pois ele jé esta bem mais definido, e varios problemas jé foram sanados antecipadamente na construgio do protétipo. Além disso, esse protétipo permite menstrar com mais precisio a complexidade e os custos do processo de desen- volvimento, resolvendo os problemas mais signilicativos, economizando mio-de-obra, tempo ¢ dinheito, No entanto, esse método nio é completo, pois possui alguns aspectos que devem ser levados em consideraco. Mesmo reduzindo o tempo de produgdo da aplicagSo detinitiva, estes protitipos de alta fidelidade demandam um custo elevado ‘um tempo grande para o desenvolvimento do mesmo. A prototipagio de alta fidelidade poderd ser implementada seguindo basicamente dois métodos: prototipagio Throw- ‘Away, na qual seu objetivo ¢ identificar e validar requisites, ¢ prototipagio Evolutiva, que tem o objetivo de minimizar 0 tempo de desenvolvimento do sistema. Prototipacao Throw-Away (Descartavel) Este tipo de prototipagio€ utilizado especialmente durante «fase de levantamento de requisites. 0 desenvolvedor gera ‘uma documentagSo proviséria,e cria um protétipo baseado nesta documentagfo para obter novos requisitos até ento ndo visualizados,¢ validar os jé implementados. Este protstipo indo segue necessariamente a mesma tecnologia de desenwvol- vimento do software final, normalmente busca-se métodos © linguagens mais ages, jé que ele seré descartado depois de ccumprida a sua finalidade. © processo de utilizaglo deste método tem como intuito refinar a documentago para gerar qualidade para 0 produto que se deseja cra. ApOs esse processo, © protétipo criado € abandonado e entio parte-se para o desenvolvimento da aplicagdo definitva Prototipacao Evolutiva {A prototipagio evolutiva, ao contrério da descartével éutl- zada em protétipos que, através deincrementos, evolu até 6 sistema final Sioutilizados requisitosjé compreendidos, © ‘nfo ha uma documentagio definida, visto que a prototipacso evolutivaéummétodo que visaa redugio de custo ede tempo, ‘A interagdo com o usudtio € constante eo objetivo éfornecer {cig 17 - Engenharia de Software Magazine 45 ‘um sistema, ou médulos de tum sistema, funeionando. Aseguir ‘esto 0s passos no processo de construcao de uum software ado- tando o processe de prototipagio evolutiva (ver Figura 1). Detingdes astatas Figura 1 Fowo Gov processes de ciogao do potelno, Esse método propicia uma entrega rpida do produto, reduz ‘custos e proporciona ap ususrio uma visualizagio precoce do sistema, Além disso, com esse método é possivel realizar varios tipos de testes nos casos de uso jd implementados, deixando 0 sistema mais confidvel No entanto, este método carrega algumas caracteristicas _que podem trazer problemas futuros, Geralmente os sistemas _gerados dessa maneira no possuem uma especificagio devi damente documentada, causando uma dificuldade para men- surar custos,elaborar contratos eestimar tempo de entrega. Se ‘0 processo de desenvolvimento nao for muito bem planejado, istemas se tornam muito dificeis de manter, especialmente se for feita por outros sendo aqueles que desenvolveram 0 produto, Com isso, a vida stil do sistema diminaie, o que era para ser barato, sai muito mais caro no longo prazo. Wireframes Wireframes s3o documentos elaborados durante a fase de espe- cificagio de um projelo Web com o objetivo de registrar eesclare- ‘cer quests de interface, navegabilidade e usabilidade.O projeto de um Wireframe pode ser considerado como um protstipo e, assim como o protStipo, podeser desenvolvide de acordo com as necessidades do desenvolvedore do cliente, bastando escolher a priori o nivel de fidelidade com que se deseja construt Como jd foi explicado anteriormente, o Wirefsame pode ser de baixa, média e alta fidelidade, podendo ser de um simples cesboso até um protstipo contendo localizagao e tamanho de janelas etipos de fontes. Acescolha destes atributos deve ser cuidadosa pois, depen- dendo dela, o projeto pode ficar muito “pobre” ou com deta- thes demais, deixando o designer limitado, no permitindo © ‘uso de sua criatividade. Além disso, na apresentago de um Wireframe para 0 usuério, deve-se esclarecer que é somente 1m “esqueleto” do que sera desenvolvido, no gerando expec- tativas ou alguma md impressio. (© Wireframe, por se tratar de um projeto voltado para Web, pode ser desenvolvido de vérias formas, podendo ser criados com programas especificos ou com qualquer ferramenta que sgere arquivos ITTML. -guir esté um exemplo de um protétipo de média fide- lidade. Nio possui definigio de cores nem de tamanhos das janelas, mas jé é possivel ter uma idéia dos elementos que estario presentes (ver Figura 2) Figure 2 Prottipo de media fiselidade Ferramentas de Prototipagéo Existem softwares espectticos para o desenvolvimento da protétipos « wirafcames, a tmnbém axistem aus que podem ser utlizados para tal dependendo do grat de deta- Thamento que se deseja obter. Ferramentas de esenho e até de modelagem 2D podem ser aprovetadas para geraresbotos do layout dos sistemas que ser80 desenvalvidos. A prépria IDE em que seré desenvolvido o sistema pode ser utilizada para ge criar um protsipo, especialmente em protétipos de ita fidelidade. ‘Alguns exemplos de ferramentas sio o Microsoft Visio, ‘Ade InDesign, Pencil como extensio do Firefox) eo Axure RP pro, aplicativo que ses uilizado no estudo de caso deste artigo AFerramenta de Prototipacao Axure "Neste artigo faremos um estudo de caso a fim de demons trar o uso de protétipos no desenvolvimento de sistemas. Usaremos a ferramenta Axure RP Pro para a ctiaglo dos prot6tipos que, durante a elaboragio deste artigo, estava na versio 55, O download pode ser feito no site hitp//www. sxure.com/dovnloads.aspx e vale lembrar que o Axure nfo 6 uma fertamenta gratuita eseré utiizada a versdo Trial do aplicativo. (© Axure permite que se crie um diagrama de fhixo dos seus prot6tipos,prottipos do tipo wireframe e um documento de specificasao contendo os detalhes dos campos existent nas 4G Engenharia de Software Magazine Protstipaio no Desenvohimento de Software paginas dos protétipos, aém de projetos que podem ser com- partilhados. Os prototipos gerados pelo Axure sio paginas do tipo HTML, que podem, dependendo do projeto, ser usadas como base para a criagio das piginas reais do sistema Compartilhando o protétipo (© Axure permite criarproitipos que pordem ser acesados « moditcados por outs pessoas que esto desenvolvendo 08 protétipos ermite rir um repositrio com oso da ferramenta do controled vers Subversion, que vem ningrado an Arar. [este artigo no ser feito. uso de projets compartilnados. mas cles podem serfacimenteriadose gereniados. Primeramente, cria-eorepostrioselecinando nopeio em “New Shared Pro- ject’ A primeirajnela serve parainformaronome do projto. Na tela seguinte,informa-sea localiza do repositio que conteré 0 projeto a ser compartilhadoe, em seguida, na slim janela informa-sea pasta em sera constraigoo protstipo. ‘Se outras pessoas tiverem que usar o mesmo projeto, basta scisearoreposiirios, am sogutiaindicara pasta que contin a protstipo. Qualqueralteragao no protstipo pode serenviada para oreposirioe, comisso, outros que utilizarem oprotétipo podem receber as alteragdes fits Conhecendo a Ferramenta ‘Apés aberta a ferramenta, o Axure jf inicia com quatro paginas criadas e abas que serso usadas para elaboracio dos protstipos (ver Figura 3) Figura 3. Visualzagie da tela incl da feramenta + A aba “Sitemap” € responsivel por canter todas as piginas e-diagramas de fluxo referents a0 prottipo. + A “Widgets” contém as bibliotecas de componentes que s30 «usados para criar os protétipose diagramas de fhaxos de pagi- nas. Como pari, possui as bibliotecas de Wireframe(usadas na elaboragio das paginas) de Flow (usadas na elaboracSo de diagramas de fluxo), com a possibilidade de adicionar bibliotecas extras. + A.aba “Masters” 6 responsivel por conter fragmentos de paginas que podem ser adicionadas nas telas dos prot6tipos indmeras vezes, como 0 caso de menus e cabesalhos PROJETO 1+ Na aba “Page Notes & Page Interactions” & possivel inserir anotagSes sobre as péginas ou diagramas de fluxoe habilitar interagées para quando a pégina for acionada, + Aaba “Annotations & Interactions” €onde se fazer as pri cipais contiguragdes, Pode-se adicionar anotagSes gerais ou detalhadas dos componentes, como especifcar seo uso desses std aprovado ou néo. F ainda possfvel habilitarinteragBes para esses componentesinteragirem, como realizar navegacbes centre as piginas, abrir ou fechar janelas dos navegadores, ou ativare desativar componentes especffios. Griando os Protétipos Paraexeplifion a tlizagio da frramenda, sed criado im protstipo que simula tm sistema que gerencia as notas de alunos cadastrados. O protdtipo teré uma pagina principal ‘que apresenta uma lista com todos os amos cadastrados no sistema, 2 opso de Inserir as notas do aluino desejado por ‘uma janela pop-up, selecionando a opgio na tabela, ea opgio dle ietaie win nove abtno Iremos criar as paginas para depois fazermos as nteragdes Primeiramente foram emovidas as pginas jd criadas pelo ‘Avira cries tres oves pigs para melhor exemplifin- rem ocas0 de uso.na aba “Sitemap” (ver Figura) 4 - inelaidlano inseriNlota Figura 4. Paginas ciadas na abo"sitemap” Em “listarAlunos”, adicionamos em “Page Notes” uma anotagio informando o propésito desta pégina. Usamos 0 componente tabela, arrastando-o para dent da pigina com 4 Tinhas e 4 eolunas. A primeira linha corresponderd ao ca- begalho com as colunas cédigo, nome, status €inserirnotas ‘As demais linhas correspondem aos altnos cadasteados. formatagdo da fonte e das tabelas, como em qualquer outro ‘componente, podem seralterados pelo menu, que ésemelhante ‘0s existentes em fervamentas de edigio de texto. Na abel criada foram adicionados alunos com seus respec- tivos dado. Informamos, também, quais sto as especifcaga das colunas "Status" ¢ “Inserir Notas" pois, dependendo das gies realizadas, seus comportamentos deveram ser alterados. Nacoluna “Status foi informado que, dependendo das notas inseridas,informaré se o aluno foi Aprovado ou Reprovado no caso da coluna “Tnserie Notas, se as nota j tiverem {cig 17 - Engenharia de Software Magazine 47 Figura 5. Tabela criads na pagina TstarAlunes'e configurayees das colunas Sido informadas deve ser exibido 0 texto*Notas Inseridas’, desabilitando a opcao de inserir notas, Caso nao tenkam sido inseridas, deve permitir esta opgio exibindo o texto “Inserir Notas", Note que 0 Axure vai adicionando uma marcagso rnumerada a medida que sio informadas essas especificacbes, ‘ou qualquer evento inserido, sendo que anumeragio pode ser alterada (ver Figura 5) Para permitir a navegag3o entre as paginas e permitir 2 cexibigdo da janela pop-up, devemos adicionar as interagBes dos componentes para realizarem essas agbes, Para habilitar a criagéo de novos alunos, selecionamos 0 botio “Incluir Novo Aluno" eclicamos em “Quick Link.” em “Interactions” {que €a configuragio mais simples, pois queremos apenas ie para outra pagina que, no nosso exemplo, é “incluirAluno” Caso queria detalhar mais, pode-se informar a descrigdo dessa interagio. Quando 0 protstipo for eriado, a clicar no botdo, o usuario seré direcionado para a pgina de incluso de aluno. Para habilitar a janela pop-up, 0 processo & semelhante, porém devemos informar como a pagina deve ser aberta, ‘Para isso selecionamos o campo da tabela “Inserir Nota” €

    Você também pode gostar