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
Connection established
Connection established
Ship
billcustomer
checkavailability
actor
8/7/2019 Project 48
5/44
S:Search Sc:Shoppingcart bi:Bookinventory
Actor
searches
Connect to DB
Connection established
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
NonNon--functional Goalsfunctional 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 fileswith less memory usage.
8/7/2019 Project 48
13/44
NonNon--functional Goalsfunctional 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
8/7/2019 Project 48
14/44
NonNon--functional Goalsfunctional 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.
8/7/2019 Project 48
15/44
NonNon--functional Goalsfunctional 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
8/7/2019 Project 48
16/44
NonNon--functional Goalsfunctional Goals
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
ImprovementsImprovements
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
ImprovementsImprovements
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
8/7/2019 Project 48
38/44
ImprovementsImprovements
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
ImprovementsImprovements
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
ImprovementsImprovements
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
ImprovementsImprovements
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
ImprovementsImprovements
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
ImprovementsImprovements
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
Top Related