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

2. 2 About your presenter  Creating websites since 1996  Independent consultant / designer / developer  Using Fusebox since version 2  Web standards nut  Accessibility nut  Usability nut

3. 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. 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. 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. 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. 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. 8 Attempts at avoiding failure  Design documents  Creative Briefs  Technical Briefs  Meetings, meetings, and more meetings

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

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

11. 11 FLiP Timeline

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

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

14. 14 CAP, Maryland Wing  1300 Members  1 Wing HQ  3 Groups  25 Squadrons  34 SAR missions in FY 2005  23 Finds

15. 15

16. 16

17. 17 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

18. 18 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.

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

20. 20 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!

21. 21 Wireframe example

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

23. 23

24. 24

25. 25

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

27. 27 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!

28. 28 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

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

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

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

32. 32

33. 33

34. 34

35. 35

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

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

38. 38 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

39. 39

40. 40

41. 41

42. 42

43. 43 Identify possible fuseactions  displayArticle qry_article.cfm dsp_article.cfm

44. 44 Identify possible fuseactions  emailArticleForm qry_article.cfm dsp_emailForm.cfm

45. 45 Identify possible fuseactions  emailArticle qry_article.cfm act_emailArticle.cfm dsp_emailComplete.cfm

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

47. 47 Mind-map the architecture

48. 48 Add the fuseactions

49. 49 Add the fuses

50. 50 Model-View-Controller approach

51. 51

52. 52 Model-View-Controller approach

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

54. 54 Writing Fusedocs  An XML-based approach to fuse specification  Document before you code  Tackle them one at a time: Display fuses first Query fuses next Action fuses last

55. 55 Example: dsp_emailForm.cfm

56. 56 I display a form allowing the user to e-mail the article to a friend <history author="Christian Ready" date="5/20/2005" email="chris@christianready.com" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" email="chris@christianready.com" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

57. 57 I display a form allowing the user to e-mail the article to a friend <history author="Christian Ready" date="5/20/2005" email="chris@christianready.com" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" email="chris@christianready.com" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

58. 58 I display a form allowing the user to e-mail the article to a friend <history author="Christian Ready" date="5/20/2005" email="chris@christianready.com" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" email="chris@christianready.com" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

59. 59 I display a form allowing the user to e-mail the article to a friend <history author="Christian Ready" date="5/20/2005" email="chris@christianready.com" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" email="chris@christianready.com" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

60. 60 I display a form allowing the user to e-mail the article to a friend <history author="Christian Ready" date="5/20/2005" email="chris@christianready.com" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" email="chris@christianready.com" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

61. 61 I display a form allowing the user to e-mail the article to a friend <history author="Christian Ready" date="5/20/2005" email="chris@christianready.com" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" email="chris@christianready.com" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

62. 62

63. 63 Constructing the skeleton application  Hard way – do it manually  Easy way – use a tool: FuseMinder (http://grokfusebox.com/) FuseBuilder (http://fusebuilder.net/)

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

65. 65 Coding  Ideally, there is little code in a fuse  The code is “simple”  Agnostic of its surroundings

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

67. 67 Unit Testing  Uses a “test harness” to feed some data into a fuse  Tests the fuse to see if it works as intended

68. 68 Test Harness  A file that includes the fuse and feeds it the data its expecting

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

70. 70 Delivery  Beta Release (August 6, 2005)  Site Launch (September 11, 2005)

71. 71 Content Development  August 6 – September 2, 2005

72. 72 Until…

73. 73 You mean a podcast? ? = +

74. 74

75. 75

76. 76

77. 77

78. 78

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

80. 80 Recommended Books & Audio http://protonarts.com/

81. 81 FLiP tools  Adalon – http://adalon.net/  FuseBuilder – http://fusebuilder.net/  Jeff Peters – http://grokfusebox.com/  Hal Helms – http://halhelms.com/  Fusebox – http://fusebox.org/

82. 82 Fusebox sites  Fusebox – http://fusebox.org/  Jeff Peters – http://grokfusebox.com/  Hal Helms – http://halhelms.com/  Sean Corfield - http://corfield.org/  Sandra Clark – http://shayna.com/  Brian Kotek – http://briankotek.com/

83. 83 Civil Air Patrol, Maryland Wing  http://mdcap.org/

84. 84 Thanks!  http://christianready.com/  chris@christianready.com