Using FLiP as a sole developer - PowerPoint PPT Presentation

using flip as a sole developer n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Using FLiP as a sole developer PowerPoint Presentation
Download Presentation
Using FLiP as a sole developer

play fullscreen
1 / 84
Using FLiP as a sole developer
86 Views
Download Presentation
moriah
Download Presentation

Using FLiP as a sole developer

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Using FLiP as a sole developer Christian Ready Christian Ready Web Services

  2. About your presenter • Creating websites since 1996 • Independent consultant / designer / developer • Using Fusebox since version 2

  3. What we’ll cover • What FLiP is • Case Study: Civil Air Patrol, Maryland • What a large FB site “looks like” • How FB makes site upgrades simple

  4. About Fusebox • Web application framework • Consists of: • Fuses (tiny files of code) • Circuits (groups of fuses) • eXit FuseActions (XFA’s) • FuseDocs (documentation) • Core files (the engine)

  5. Fusebox Lifecycle Process (FLiP) • An approach to web development with Fusebox • A consolidation of best practices • A way of bridging the gap between “techies” and “suits”

  6. How do you approach development? “I first design the application, carefully work out the underlying architecture, document all of the component functionalities, and then begin coding.” “I start coding and hope it works out.”

  7. Software success rate • 70% of all software development projects end in failure • The client’s view – the application didn’t work as promised • Your view – the project went way over budget thanks to scope creep

  8. Attempts at avoiding failure • Design documents • Creative Briefs • Technical Briefs • Meetings, meetings, and more meetings

  9. The truth is… • The client often doesn’t know what they want until they see it.

  10. FLiP stages • Wireframe • Template design • Front-end development w/DevNotes • Prototype Freeze • Architecture & Fusedocs • Coding • Unit Testing • Delivery

  11. FLiP Timeline

  12. Introducing our case study • A new site for the Maryland Wing of the Civil Air Patrol

  13. Civil Air Patrol • Civilian auxiliary to USAF • Search and Rescue, Disaster Relief • Homeland Security • Cadet Programs • Aerospace Education

  14. CAP, Maryland Wing • 1300 Members • 1 Wing HQ • 3 Groups • 25 Squadrons • 43 SAR missions in FY 2007 • 37 Finds

  15. Client Requirements • Reinforce MDWG/CAP brand as USAF Auxiliary • Recruit new members – easily find a squadron near them to join • Resource to wing staff, group, squadron personnel – member login • Public relations – news, photos, feeds

  16. Client Requirements (cont’d) • Calendar that can be maintained by wing, groups, and squadrons • Staffers need to be able to manage their own content • Has to be better than any other CAP website.

  17. Fusebox Lifecycle Process (FLiP) • Wireframe • Template design • Front-end development w/DevNotes • Prototype Freeze • Architecture • Fusedocs • Coding • Unit Testing • Delivery

  18. Wireframe • A text-based, clickable front-end that represents all of the “pages” of an application • A tool that the client can click and identify how the application can be improved before it’s even built!

  19. Wireframe example

  20. Fusebox Lifecycle Process (FLiP) • Wireframe • Template design • Front-end development w/DevNotes • Prototype Freeze • Architecture • Fusedocs • Coding • Unit Testing • Delivery

  21. Fusebox Lifecycle Process (FLiP) • Wireframe • Template design • Front-end development w/DevNotes • Prototype Freeze • Architecture • Fusedocs • Coding • Unit Testing • Delivery

  22. Front-end development w/DevNotes • Show client our interpretation of their requirements • Get feedback early and often • Make changes as needed • Without rewriting our application!

  23. The Front-End first • All XHTML, CSS, JavaScript, Flash, etc work gets done here • Anything that the client “sees” • Sample data is used in place of db-generated data • All pages use .cfm extensions

  24. DevNotes • Available from Jeff Peters’ site (grokfusebox.com) • A custom tag • An OnRequestEnd.cfm / OnRequestEnd() in Application.cfc

  25. Fusebox Lifecycle Process (FLiP) • Wireframe • Template design • Front-end development w/DevNotes • Prototype Freeze • Architecture • Fusedocs • Coding • Unit Testing • Delivery

  26. How to freeze your prototype • Comment out the form elements in DevNotes.cfm • Use the Page Saver Firefox extension • Print out two copies of all pages • Sign and have your client countersign each one.

  27. Fusebox Lifecycle Process (FLiP) • Wireframe • Template design • Front-end development w/DevNotes • Prototype Freeze • Architecture • Fusedocs • Coding • Unit Testing • Delivery

  28. Architecture & Fusedocs • Mark up the prototype printouts • Identify possible fuseactions • Mind-map the architecture • Write Fusedocs

  29. Mark up the prototype printouts • Use different colored pens, markers, crayons • Mark exit points • Mark variables / dynamic elements • Identify data that goes along with exit points

  30. Identify possible fuseactions • displayArticle • qry_article.cfm • dsp_article.cfm

  31. Identify possible fuseactions • emailArticleForm • qry_article.cfm • dsp_emailForm.cfm

  32. Identify possible fuseactions • emailArticle • qry_article.cfm • act_emailArticle.cfm • dsp_emailComplete.cfm

  33. Identify possible circuits • Article • display • emailForm • email • new • insert • update • etc… • News • archive • recentArticles • adminMenu • topStory • headlines

  34. Mind-map the architecture

  35. Add the fuseactions

  36. Add the fuses

  37. Model-View-Controller approach