Project 48

8/7/2019 Project 48

1/44

ENGINEERING DYNAMIC WEB PAGES

University of Texas at Dallas

08/09/2002

Dr. Lawrence Chung

George Sarabia & Trong Nguyen

8/7/2019 Project 48

2/44

A Starting ProcessA 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

8/7/2019 Project 48

3/44

Technologies Used

Use case Diagrams, Activity Diagrams,

Sequence Diagrams

Rational Rose UML

HTML, Macromedia FLASH5

8/7/2019 Project 48

4/44

S:shopcart O:order Sh:shipping T:transaction B:bookinven Db:Database

Place order

Submit order connectToDB

Connection established

Validate user

Getcreditcardifo()

ConnectTo DB

ConnectTo DB



Ship

billcustomer

checkavailability

actor

8/7/2019 Project 48

5/44

S:Search Sc:Shoppingcart bi:Bookinventory

Actor

searches

Connect to DB


Performsearch

Delbook (Integer)

AddBook(Integer,Integer)

8/7/2019 Project 48

6/44

T:tracking DB:custDB S:status

customer

tracksorder

connectToDB

connectionestablished

validateUser()

connectToDB

connectionestablished

getCurrentStatus

displayCurrentStatus

8/7/2019 Project 48

7/44

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

8/7/2019 Project 48

8/44

Place Order

Registration

Confirm Order

Validate User

Ship OrderTrack Order

(Actor 1)

Buyer (Actor2)

Seller

A Use Case Diagram for E-Business System

8/7/2019 Project 48

9/44

Functional GoalsFunctional 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.

8/7/2019 Project 48

10/44

Functional GoalsFunctional Goals

UML is to be used to show an e-commerce sample from an engineering

point of view.

8/7/2019 Project 48

11/44

NonNon--functional Goalsfunctional Goals

Performance

Modifiability

Enhance ability

Portability

8/7/2019 Project 48

12/44


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 fileswith less memory usage.

8/7/2019 Project 48

13/44


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

8/7/2019 Project 48

14/44


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.

8/7/2019 Project 48

15/44


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

8/7/2019 Project 48

16/44


Portability

Its the easiest thing to do because flash runs on web browsers.

As long as a plug-in is installed, this file should be read

8/7/2019 Project 48

17/44

UML DiagramUML Diagram

8/7/2019 Project 48

18/44

UML DiagramUML 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.

8/7/2019 Project 48

19/44

UML Statechart DiagramUML Statechart Diagram

Statechart diagrams are one of theStatechart diagrams are one of thefive diagram in the UML for modelingfive diagram in the UML for modelingthe dynamic aspects of systems. Athe dynamic aspects of systems. Astatechart diagram shows a statestatechart diagram shows a statemachine. A statechart diagrammachine. A statechart diagramshows flow of control from state toshows flow of control from state to

state.state.

8/7/2019 Project 48

20/44

Statechart DiagramStatechart Diagram

8/7/2019 Project 48

21/44

UML Activity DiagramUML Activity Diagram

Activity diagram are one of the fiveActivity diagram are one of the fivediagrams in the UML for modelingdiagrams in the UML for modelingthe dynamic aspects of systems. Anthe dynamic aspects of systems. Anactivity diagram is essentially aactivity diagram is essentially aflowchart, showing flow of controlflowchart, showing flow of controlfrom activity to activity.from activity to activity.

8/7/2019 Project 48

22/44

Activity DiagramActivity Diagram

8/7/2019 Project 48

23/44

UML Collaboration DiagramUML Collaboration Diagram

A collaboration diagram is anA collaboration diagram is aninteraction diagram that emphasizesinteraction diagram that emphasizesthe structural organization of thethe structural organization of theobjects that send and receiveobjects that send and receivemessages. It shows a set of objects,messages. It shows a set of objects,links among those objects, andlinks among those objects, and

messages sent and received bymessages sent and received bythose objects. Collaborationthose objects. Collaborationdiagrams are use to illustrate thediagrams are use to illustrate the

dynamic view of a system.dynamic view of a system.

8/7/2019 Project 48

24/44

8/7/2019 Project 48

25/44

UML Sequence DiagramUML Sequence Diagram

A sequence diagram emphasizes theA sequence diagram emphasizes thetime ordering of messages. It has 2time ordering of messages. It has 2features that distinguish it from afeatures that distinguish it from a

collaboration diagram. First there iscollaboration diagram. First there isthe object lifeline that is verticalthe object lifeline that is verticaldashed line in the diagram. Second,dashed line in the diagram. Second,there is the focus of control. Thethere is the focus of control. The

focus of control is a tall, thinfocus of control is a tall, thinrectangle that shows the period ofrectangle that shows the period oftime during which an object istime during which an object isperforming an action.performing an action.

8/7/2019 Project 48

26/44

Sequence DiagramSequence Diagram

8/7/2019 Project 48

27/44

UML Use case DiagramUML Use case Diagram

A usecase diagram is a diagram thatA usecase diagram is a diagram thatshows a set of use cases and actorsshows a set of use cases and actorsand their relationships. It is used toand their relationships. It is used tomodel the context of a system and tomodel the context of a system and tomodel the requirements of a system.model the requirements of a system.

8/7/2019 Project 48

28/44

8/7/2019 Project 48

29/44

UML Deployment DiagramUML Deployment Diagram

Deployment diagrams are one of theDeployment diagrams are one of the2 kinds of diagrams used in modeling2 kinds of diagrams used in modelingthe physical aspects of an objectthe physical aspects of an object--oriented system. A deploymentoriented system. A deploymentdiagram shows the configuration ofdiagram shows the configuration ofrun time processing nodes and therun time processing nodes and the

components that live on them.components that live on them.

8/7/2019 Project 48

30/44

Deployment DiagramDeployment Diagram

Netscape 6.lnk

E-Business InternetWork

I nternet Explorer.lnk

8/7/2019 Project 48

31/44

UML Package DiagramUML Package Diagram

Packages diagrams are one of the 2Packages diagrams are one of the 2kinds of diagrams found in modelingkinds of diagrams found in modelingthe physical aspects of objectthe physical aspects of object--oriented systems. A packageoriented systems. A packagediagram shows the organization anddiagram shows the organization anddependencies among a set ofdependencies among a set of

packages.packages.

8/7/2019 Project 48

32/44

Package DiagramPackage Diagram

8/7/2019 Project 48

33/44

UML Object DiagramUML Object Diagram

An object diagram shows a set of ofAn object diagram shows a set of ofobjects and their relationships at aobjects and their relationships at apoint in time. Object diagramspoint in time. Object diagramsaddress the static design view oraddress the static design view orstatic process view of a system.static process view of a system.

8/7/2019 Project 48

34/44

Object DiagramObject Diagram

8/7/2019 Project 48

35/44

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 ofovercome

ImprovementsImprovements

8/7/2019 Project 48

36/44


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

8/7/2019 Project 48

37/44


Elaborated into the concept of location by showing four


Animated images and animation to the location example

Elaborated into the concept of money by showing three


8/7/2019 Project 48

38/44


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

8/7/2019 Project 48

39/44

8/7/2019 Project 48

40/44


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

8/7/2019 Project 48

41/44


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

8/7/2019 Project 48

42/44


Created a set of Scenes within main animationCreated a set of Scenes within main animation

Added navigation capabilities between the scenesAdded navigation capabilities between the scenes

Added all UML diagramsAdded all UML diagrams Created external flash files used for separate UML diagramsCreated external flash files used for separate UML diagrams

Added navigation capabilities between the filesAdded navigation capabilities between the files

8/7/2019 Project 48

43/44


Created timeline bar which shows progress within animationCreated timeline bar which shows progress within animation

Added navigation buttons to jump to different parts of theAdded navigation buttons to jump to different parts of the

animationanimation Added a loading section to give browsers enough time to loadAdded a loading section to give browsers enough time to load

animation into memoryanimation into memory

Cleared unused objects in the animation database library toCleared unused objects in the animation database library to

improve performanceimprove performance

Increased size of animation to accommodate new featuresIncreased size of animation to accommodate new features

8/7/2019 Project 48

44/44


Added action script calls to allow access to external filesAdded action script calls to allow access to external files

Made a more clear distinction between frontMade a more clear distinction between front--end and backend and back--endendprocesses by adding links to jump between themprocesses by adding links to jump between them

Increased the amount of special effects in the animation for aIncreased the amount of special effects in the animation for amore artistic and better to follow projectmore artistic and better to follow project

Compressed some of the sound files/effects for better use ofCompressed some of the sound files/effects for better use ofspacespace

ReRe--used some of the objects for more efficient use of resourcesused some of the objects for more efficient use of resources Appended and updated this documentAppended and updated this document

Project 48

Documents

Transcript of Project 48