ENGINEERING DYNAMIC WEB PAGES

1. ENGINEERING DYNAMIC WEB PAGES University of Texas at Dallas 08/09/2002 Dr. Lawrence Chung George Sarabia & Trong Nguyen

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

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

4. actor S:shopcart O:order Sh:shipping T:transaction B:bookinven Db:Database Place order <<create>> Submit order connectToDB Connection established Validate user Getcreditcardifo() ConnectTo DB Connection established ConnectTo DB checkavailability billcustomer Connection established Ship <<destroy>> <<destroy>> Place Order

5. S:Search Sc:Shoppingcart bi:Bookinventory Actor searches Connect to DB Connection established Performsearch <<create>> AddBook(Integer,Integer) Delbook (Integer) <<destroy>> Search

6. T:tracking DB:custDB S:status customer tracksorder connectToDB connectionestablished validateUser() connectToDB connectionestablished getCurrentStatus displayCurrentStatus Track Order

7. 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 Place order Actor Actor: A role the user plays in the system context

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

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

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

11. Non-functional Goals • Performance • Modifiability • Enhance ability • Portability

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

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

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

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

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

17. UML Diagram

18. UML Diagram • 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.

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

20. Statechart Diagram

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

22. Activity Diagram

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

24. Collaboration Diagram

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

26. Sequence Diagram

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

28. Usecase Diagram

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

30. Deployment Diagram

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

32. Package Diagram

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

34. Object Diagram

35. Improvements • 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

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

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

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

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

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

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

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

43. Improvements • Created timeline bar which shows progress within 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 • Cleared unused objects in the animation database library to improve performance • Increased size of animation to accommodate new features

44. Improvements • 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 • 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 • Re-used some of the objects for more efficient use of resources • Appended and updated this document