1. 1 Staffordshire UNIVERSITY School of Computing Slide: 1 Prototyping Agile Software Development 1 Rapid Application Development (RAD) Iterative Prototyping

2. 2 Staffordshire UNIVERSITY School of Computing Slide: 2 Prototyping Agenda  Introduction to Rapid Application Development (RAD)  Wireframing as the first step  Fusebox and Fusebox Lifecycle Process (FLiP)  Personas and Goals  Producing a Wireframe  Tutorial Tasks

3. 3 Staffordshire UNIVERSITY School of Computing Slide: 3 Prototyping Introduction to RAD Rapid Application Development http://en.wikipedia.org/wiki/Rapid_application_development Rapid Application Development is a term originally used to describe a software development process introduced by James Martin in 1991. Martin's methodology involves iterative development and the construction of prototypes. More recently, the term and its acronym have come to be used in a broader, generic sense that encompasses a variety of techniques aimed at speeding application development, such as the use of web application frameworks and other types of software frameworks.

4. 4 Staffordshire UNIVERSITY School of Computing Slide: 4 Prototyping Introduction to RAD Rapid Application Development Rapid application development was a response to non- agile processes developed in the 1970s and 1980s, such as the SSADM (Structured Systems Analysis and Design Method) and other Waterfall models. One problem with previous methodologies was that applications took so long to build that requirements had changed before the system was complete, resulting in inadequate or even unusable systems. Another problem was the assumption that a methodical requirements analysis phase alone would identify all the critical requirements. Ample evidence attests to the fact that this is seldom the case, even for projects with highly experienced professionals at all levels.

5. 5 Staffordshire UNIVERSITY School of Computing Slide: 5 Prototyping Introduction to RAD Rapid Application Development http://www.etondigital.com/services/ The traditional software development cycle follows a rigid sequence of steps with a formal sign-off at the completion of each. Initially a detailed analysis is done that attempts to capture the system requirements in a Requirements Specification. Users are forced to “sign- off” on the specification before development proceeds to the next step. This is followed by a complete system design and then development and testing.

6. 6 Staffordshire UNIVERSITY School of Computing Slide: 6 Prototyping Introduction to RAD Rapid Application Development RAD is a methodology for compressing the analysis, design, build, and test phases into a series of short, iterative development cycles. This has a number of distinct advantages over the traditional sequential development model.

7. 7 Staffordshire UNIVERSITY School of Computing Slide: 7 Prototyping Wireframing as the first step  A wireframe for a web based application is a way to take client requirements in a structured way.  It involves creating a clickable application model, often developed with your client present.  It doesn't actually do anything, but it demonstrates the flow of what the application will do when developed.  Each page in the wireframe contains sentences explaining what will be on that page, usually expressed in the first person.

8. 8 Staffordshire UNIVERSITY School of Computing Slide: 8 Prototyping Fusebox and FLiP Fusebox Lifecycle Process http://corfield.org/FLiP/index.cfm?&fuseaction=methodology.steps Fusebox Lifecycle Process (FLiP)  FLiP is a process for developing web applications. It grew out of some of the best practices employed by members of the Fusebox community.  Although, as the name indicates, FLiP came from the Fusebox community, its use is not intrinsically part of a Fusebox application. The ideas found in FLiP may be successfully employed in non-Fusebox projects as well.

9. 9 Staffordshire UNIVERSITY School of Computing Slide: 9 Prototyping Fusebox and FLiP Fusebox Lifecycle Process  There are two fundamental ideas behind FLiP.  The first is to use a process that is, at all times, closely tied to client feedback.  The second is to encourage inexpensive changes in the design early in the process.  This results in a reduced need for changes later in the process when those changes become progressively more expensive.

10. 10 Staffordshire UNIVERSITY School of Computing Slide: 10 Prototyping Fusebox and FLiP Fusebox Lifecycle Process  It is also important to note that FLiP is designed for the technical aspects of the project, starting at a point when you are ready to begin building an application.  For many simple web projects, FLiP may be sufficient from the start of the project.  For more complex projects, other research techniques may be necessary to understand the business model before starting on the application development with FLiP.

11. 11 Staffordshire UNIVERSITY School of Computing Slide: 11 Prototyping Fusebox and FLiP Fusebox Lifecycle Process The steps in FLiP are: 1.Personas and Goals 2.Wireframe 3.Prototype / Front-End Development 4.Application Architecting 5.FuseCoding 6.Unit Testing 7.Application Integration 8.Deployment

12. 12 Staffordshire UNIVERSITY School of Computing Slide: 12 Prototyping Personas and Goals  A persona is a precise description of the application's user(s).  Instead of designing feature based software (what will it do), we design goal based software (what will be achieved).  This process helps deliver software desired by the end user.  Who will use this software?  Why will they use it?

13. 13 Staffordshire UNIVERSITY School of Computing Slide: 13 Prototyping Producing a Wireframe  A wireframe for a web based application is a way to take client requirements in a structured way.  It involves creating a clickable application model, often developed with your client present.  It doesn't actually do anything, but it demonstrates the flow of what the application will do when developed.  Each page in the wireframe contains sentences explaining what will be on that page, usually expressed in the first person.

14. 14 Staffordshire UNIVERSITY School of Computing Slide: 14 Prototyping Wireframing as the first step Second Hand Car Sales Website Homepage On every page I display: a header with the company logo and address on the left, the main navigation a footer with copyright and privacy notice Navigation: home | about | stock | testimonials | contact homeaboutstocktestimonialscontact Home: I describe the Company I display an image of the forecourt I display an image of the signboard

15. 15 Staffordshire UNIVERSITY School of Computing Slide: 15 Prototyping Wireframing as the first step On every page I display a header with the company logo and address on the left the main navigation a footer with copyright and privacy notice navigation home | about | stock | testimonials | contact Home I describe the Company I display an image of the forecourt I display an image of the signboard

16. 16 Staffordshire UNIVERSITY School of Computing Slide: 16 Prototyping Tutorial Tasks  Goggle search for “FuseAction” (find some sites that use Fusebox)  Produce a wireframe for these Web sites:  www.jpgcars.co.uk (example)  www.fairheadcreative.co.uk  www.cyber-media.co.uk  any other of your choice

17. 17 Staffordshire UNIVERSITY School of Computing Slide: 17 Prototyping Agenda Introduction to Rapid Application Development (RAD) Wireframing as the first step Fusebox and Fusebox Lifecycle Process (FLiP) Personas and Goals Producing a Wireframe Tutorial Tasks