1. Developing Dynamic Web Pages Lawrence Chung University of Texas at Dallas Fall, 2002

2. Historical Background Initial Goal: development of a nice animation to understand and explain what e-commerce/business is like Initial Goal: development of a nice animation to understand and explain what e-commerce/business is like Started in Summer, 1999: literature survey, internet search on e-commerce/business and Flash sites Started in Summer, 1999: literature survey, internet search on e-commerce/business and Flash sites 1st version starts in September, 1999 and gets completed in December, 1999 by one person 1st version starts in September, 1999 and gets completed in December, 1999 by one person 2 nd version starts in January, 2000 by the same person, with more interactivity and completeness in mind 2 nd version starts in January, 2000 by the same person, with more interactivity and completeness in mind

3. More Historical background The 3 rd version started in Summer, 2000 by a new team of 2 persons. The 3 rd version started in Summer, 2000 by a new team of 2 persons. The 2 nd team struggled trying to understand the 2 nd version, but added more and made artistic improvements The 2 nd team struggled trying to understand the 2 nd version, but added more and made artistic improvements The 4 th version started in Fall, 2000 by a new team of 2 persons (3 rd team), The 4 th version started in Fall, 2000 by a new team of 2 persons (3 rd team), who struggle with learning Flash, and trying to understand the animation which now shows some complexity. who struggle with learning Flash, and trying to understand the animation which now shows some complexity. Interim Goal: Completeness, clarity, consistency, minimality of animation Interim Goal: Completeness, clarity, consistency, minimality of animation The 3 rd team does documentation of the scenes of the animation, makes some improvements, and presents the animation to an Open House visitors. The 3 rd team does documentation of the scenes of the animation, makes some improvements, and presents the animation to an Open House visitors.

4. Still More Historical Background The 5 th version starts in Spring, 2001 by a new team of 2 persons (4 th team), who still struggle even with some documentation available – clearly insufficient). The 5 th version starts in Spring, 2001 by a new team of 2 persons (4 th team), who still struggle even with some documentation available – clearly insufficient). What happened next? What happened next? well, the 2 students went on 2 different ways and produced 2 different versions v5.1 and v5.2, both almost from scratch, in August, 2001. well, the 2 students went on 2 different ways and produced 2 different versions v5.1 and v5.2, both almost from scratch, in August, 2001.

5. …Still More Historical Background The 6 th version starts and completes in Fall, 2001 by a new person; a lot more features of e- commerce/business; both back-end and front-end processing The 6 th version starts and completes in Fall, 2001 by a new person; a lot more features of e- commerce/business; both back-end and front-end processing

6. The Latest Historical Background The 7 th version starts in Spring, 2002, by a new team of 2 persons (6 th team), The 7 th version starts in Spring, 2002, by a new team of 2 persons (6 th team), and completes in Summer, 2002. and completes in Summer, 2002. Addition of UML diagrams with some traceability established. Addition of UML diagrams with some traceability established. The 8 th version starts in Fall, 2002, by a new team of 2 persons (7 th team). The 8 th version starts in Fall, 2002, by a new team of 2 persons (7 th team).

7. Our Approach: Bring in Engineering Common interpretation Common interpretation Delivery within time Delivery within time Minimize cost Minimize cost Ensure high quality for users Ensure high quality for users Need for modeling! Need for modeling! Need for requirements engineering Need for requirements engineering

8. Art + Engineering Current Goal: Engineer Artistic Dynamic Web Pages Current Goal: Engineer Artistic Dynamic Web Pages Dynamic Web Pages as explanatory device, as a (requirements) prototype Dynamic Web Pages as explanatory device, as a (requirements) prototype Approach: Experimental, e-commerce/business now as an application; distance learning as another application Approach: Experimental, e-commerce/business now as an application; distance learning as another application Art: through Flash Art: through Flash Engineering: Engineering: - modeling: through UML, the NFR Framework - Process Aid: scenario analysis (storyboard) - Scene representation - round-trip process

9. What Next? Translation: Translation: - Artistic images Model components Model Elicitation: in the presence of (partial, evolving) artistic images Artistic Image Elicitation: in the presence of (partial, evolving) models.

10. A Starting Process Requirements Engineering Use Cases Identify external system interface Identify, categorize and prioritize system requirements Dynamic Web Pages Build use cases and scenarios based on requirements Create friendly and interactive interface to the user

11. Technologies Used Use case Diagrams, Activity Diagrams, Sequence Diagrams Rational Rose UML HTML, Macromedia FLASH5

12. S:shopcartO:orderSh:shippingT:transactionB:bookinvenDb:Database Place order > Submit order connectToDB Connection established Validate user Getcreditcardifo() ConnectTo DB Connection established > Ship billcustomer checkavailability actor

13. S:SearchSc:Shoppingcartbi:Bookinventory Actor searches Connect to DB Connection established Performsearch > Delbook (Integer) AddBook(Integer,Integer)

14. T:trackingDB:custDBS:status customer tracksorder connectToDB connectionestablished validateUser() connectToDB connectionestablished getCurrentStatus displayCurrentStatus

15. What is a Use Case? An interaction between a user and a computer system ( Use cases are about externally required functionality) A use case captures some user-visible function Actor Place order Actor: A role the user plays in the system context

16. Place Order Registration Confirm Order Validate User Ship Order Track Order (Actor 1) Buyer (Actor2) Seller A Use Case Diagram for E-Business System

17. Functional Goals The topic of engineering dynamic web pages is to take as a theme the concept of merging engineering and art, and an overview of the concepts involved in e-business. This is to be done in the form of an animation using Macromedia Flash 5 as the tool for building the animation, and to be displayed on our project web page.

18. Functional Goals UML is to be used to show an e-commerce sample from an engineering point of view.

19. Non-functional Goals Performance Modifiability Enhance ability Portability

20. Non-functional Goals Performance The animation uses less processing time due to the size and type of file. The high level of compression allows the handling of these files with less memory usage.

21. Non-functional Goals Modifiability Due to layers, making changes to the animation to a single layer may not affect the rest of the animation Changes to layers above may affect layers below

22. Non-functional Goals Modifiability Due to a timeline, appending changes to the animation becomes subtle since frames before the events remain unmodified. If a change needs to be inserted before an event, then the timeline can get disrupted throughout the entire animation from the point of insertion.

23. Non-functional Goals Enhance-ability Due to the nature of the process it is easy to enhance The location along the timeline, will determine how easy it will be to enhance

24. Non-functional Goals Portability It’s the easiest thing to do because flash runs on web browsers. As long as a plug-in is installed, this file should be read

25. UML Diagram

26. The UML diagram was added to illustrate a sample e-commerce transaction –in this case online shopping– from a high level, in the form of a storyboard. This was shown to provide an overview of how such a transaction would play out in the context of e-business. This was followed by an animation for brief but clear understanding of the sample.

27. UML Statechart Diagram Statechart diagrams are one of the five diagram in the UML for modeling the dynamic aspects of systems. A statechart diagram shows a state machine. A statechart diagram shows flow of control from state to state. Statechart diagrams are one of the five diagram in the UML for modeling the dynamic aspects of systems. A statechart diagram shows a state machine. A statechart diagram shows flow of control from state to state.

28. Statechart Diagram

29. UML Activity Diagram Activity diagram are one of the five diagrams in the UML for modeling the dynamic aspects of systems. An activity diagram is essentially a flowchart, showing flow of control from activity to activity. Activity diagram are one of the five diagrams in the UML for modeling the dynamic aspects of systems. An activity diagram is essentially a flowchart, showing flow of control from activity to activity.

30. Activity Diagram

31. UML Collaboration Diagram A collaboration diagram is an interaction diagram that emphasizes the structural organization of the objects that send and receive messages. It shows a set of objects, links among those objects, and messages sent and received by those objects. Collaboration diagrams are use to illustrate the dynamic view of a system. A collaboration diagram is an interaction diagram that emphasizes the structural organization of the objects that send and receive messages. It shows a set of objects, links among those objects, and messages sent and received by those objects. Collaboration diagrams are use to illustrate the dynamic view of a system.

32. Collaboration Diagram

33. UML Sequence Diagram A sequence diagram emphasizes the time ordering of messages. It has 2 features that distinguish it from a collaboration diagram. First there is the object lifeline that is vertical dashed line in the diagram. Second, there is the focus of control. The focus of control is a tall, thin rectangle that shows the period of time during which an object is performing an action. A sequence diagram emphasizes the time ordering of messages. It has 2 features that distinguish it from a collaboration diagram. First there is the object lifeline that is vertical dashed line in the diagram. Second, there is the focus of control. The focus of control is a tall, thin rectangle that shows the period of time during which an object is performing an action.

34. Sequence Diagram

35. UML Use case Diagram A usecase diagram is a diagram that shows a set of use cases and actors and their relationships. It is used to model the context of a system and to model the requirements of a system. A usecase diagram is a diagram that shows a set of use cases and actors and their relationships. It is used to model the context of a system and to model the requirements of a system.

36. Usecase Diagram

37. UML Deployment Diagram Deployment diagrams are one of the 2 kinds of diagrams used in modeling the physical aspects of an object- oriented system. A deployment diagram shows the configuration of run time processing nodes and the components that live on them. Deployment diagrams are one of the 2 kinds of diagrams used in modeling the physical aspects of an object- oriented system. A deployment diagram shows the configuration of run time processing nodes and the components that live on them.

38. Deployment Diagram

39. UML Package Diagram Packages diagrams are one of the 2 kinds of diagrams found in modeling the physical aspects of object- oriented systems. A package diagram shows the organization and dependencies among a set of packages. Packages diagrams are one of the 2 kinds of diagrams found in modeling the physical aspects of object- oriented systems. A package diagram shows the organization and dependencies among a set of packages.

40. Package Diagram

41. UML Object Diagram An object diagram shows a set of of objects and their relationships at a point in time. Object diagrams address the static design view or static process view of a system. An object diagram shows a set of of objects and their relationships at a point in time. Object diagrams address the static design view or static process view of a system.

42. Object Diagram

43. Modified the frame rate to 9 fps from the default 12 fps Introduced the concept of overcoming barriers Barriers shown time, location, and money Cleared the concept of Anytime, Anywhere, and Anything Animated the interaction of these three with the concept of overcome Improvements

44. Improvements Added fading effects to the above when they entered and left their respective scenes Synchronized the motion of the three in a rotating pattern Elaborated into the concept of time by showing four examples of how industry is affected when we overcome it Added images and animation to the time example

45. Improvements Elaborated into the concept of location by showing four examples of how industry is affected when we overcome it Animated images and animation to the location example Elaborated into the concept of money by showing three examples of how industry is affected when we overcome it

46. Improvements Displayed the relationship that an e-company has when doing business with both customers and other businesses Named these relationships in an easier to follow and easier to understand method by keeping the customer, e- company, and businesses always in their respective side of the screen Animated the naming of these relationships as business to customer and business to business

47. Improvements Expanded into the idea of business to customer by citing a central idea to it which is the customer relationship management Expanded into the idea of business to business by citing a central idea to it which is e-procurement Summarized all the concepts by bringing them back together in another scene, with the emphasis being e-business, and the influence that it has over the concepts in a summarized form

48. Improvements Brought back the globe, only that made it rotate, as to show the extent of the range e-business may reach Added a scene describing a sample e-commerce transaction through the use of a UML diagram following an e-commerce storyboard Changed the theme background music to one that follows the eclipsing momentum of the animation

49. Improvements Added a few sound effects to some of the scenes to emphasize their appearance Reduced the number of layers by reusing those layers not active during certain scenes Reduced the clutter of images and motion tweens in the library by deleting duplicated entries Reduced the number of objects shown on most given scenes, due to the human factor issue of making it easy to follow

50. Improvements Created a set of Scenes within main animation Created a set of Scenes within main animation Added navigation capabilities between the scenes Added navigation capabilities between the scenes Added all UML diagrams Added all UML diagrams Created external flash files used for separate UML diagrams Created external flash files used for separate UML diagrams Added navigation capabilities between the files Added navigation capabilities between the files

51. Improvements Created timeline bar which shows progress within animation Created timeline bar which shows progress within animation Added navigation buttons to jump to different parts of the animation Added navigation buttons to jump to different parts of the animation Added a loading section to give browsers enough time to load animation into memory Added a loading section to give browsers enough time to load animation into memory Cleared unused objects in the animation database library to improve performance Cleared unused objects in the animation database library to improve performance Increased size of animation to accommodate new features Increased size of animation to accommodate new features

52. Improvements Added action script calls to allow access to external files Added action script calls to allow access to external files Made a more clear distinction between front-end and back-end processes by adding links to jump between them Made a more clear distinction between front-end and back-end processes by adding links to jump between them Increased the amount of special effects in the animation for a more artistic and better to follow project Increased the amount of special effects in the animation for a more artistic and better to follow project Compressed some of the sound files/effects for better use of space Compressed some of the sound files/effects for better use of space Re-used some of the objects for more efficient use of resources Re-used some of the objects for more efficient use of resources Appended and updated this document Appended and updated this document

53. Acknowledgements Summer, 2002: G. Sarabia & T. Nguyen Spring, 2002: G. Sarabia and S. Wang Fall, 2001: X. Zhao Summer, 2001: V. Giruka and R. Siruvuri Spring, 2001: V. Giruka and R. Siruvuri Fall, 2000: J. Chigurupati and S. Golagani (5 scenes, 95 second running time) – storyboard and more interactivity. Flash 4 Summer, 2000: Q. Liu & P. Pan (5 scenes, 95 second running time) – storyboard and more interactivity. Flash 4 Spring, 2000: B. Young (ColdFusion) Spring, 2000: B. Young (ColdFusion) Fall, 1999: B. Young Fall, 1999: B. Young