Get documents about "Art-Engineering
Shared by: lanyuehua
-
Stats
- views:
- 5
- posted:
- 9/7/2012
- language:
- Unknown
- pages:
- 53
Document Sample
Developing Dynamic Web Pages
Lawrence Chung
University of Texas at Dallas
Fall, 2002
Historical Background
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
1st version starts in September, 1999 and gets completed
in December, 1999 by one person
2nd version starts in January, 2000 by the same person,
with more interactivity and completeness in mind
More Historical background
The 3rd version started in Summer, 2000 by a new team of
2 persons.
The 2nd team struggled trying to understand the 2nd
version, but added more and made artistic improvements
The 4th version started in Fall, 2000 by a new team of 2
persons (3rd team),
who struggle with learning Flash, and trying to understand
the animation which now shows some complexity.
Interim Goal: Completeness, clarity, consistency,
minimality of animation
The 3rd team does documentation of the scenes of the
animation, makes some improvements, and presents the
animation to an Open House visitors.
Still More Historical Background
The 5th version starts in Spring, 2001 by a
new team of 2 persons (4th team), who
still struggle even with some
documentation available – clearly
insufficient).
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.
…Still More Historical Background
The 6th 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 Latest Historical Background
The 7th version starts in Spring, 2002, by
a new team of 2 persons (6th team),
and completes in Summer, 2002.
Addition of UML diagrams with some
traceability established.
The 8th version starts in Fall, 2002, by a
new team of 2 persons (7th team).
Our Approach: Bring in Engineering
Common interpretation
Delivery within time
Minimize cost
Ensure high quality for users
Need for modeling!
Need for requirements engineering
Art + Engineering
Current Goal: Engineer Artistic Dynamic Web
Pages
Dynamic Web Pages as explanatory device, as a
(requirements) prototype
Approach: Experimental, e-commerce/business
now as an application; distance learning as
another application
Art: through Flash
Engineering:
- modeling: through UML, the NFR Framework
- Process Aid: scenario analysis (storyboard)
- Scene representation
- round-trip process
What Next?
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.
A Starting Process
Requirements • Identify external system interface
Engineering • Identify, categorize and prioritize
system requirements
•Build use cases and scenarios
Use Cases based on requirements
Dynamic •Create friendly and interactive
Web Pages interface to the user
Technologies Used
• Use case Diagrams, Activity Diagrams,
Sequence Diagrams
• Rational Rose UML
•HTML, Macromedia FLASH5
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
checkavailability ConnectTo DB
billcustomer Connection established
Ship
<<destroy>>
<<destroy>>
S:Search Sc:Shoppingcart bi:Bookinventory
Actor
searches
Connect to DB
Connection established
Performsearch
<<create>>
AddBook(Integer,Integer)
Delbook (Integer)
<<destroy>>
T:tracking DB:custDB S:status
customer
tracksorder
connectToDB
connectionestablished
validateUser()
connectToDB
connectionestablished
getCurrentStatus
displayCurrentStatus
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
A Use Case Diagram for E-Business System
Place Order
Registration
Confirm Order
(Actor 1)
Buyer (Actor2)
Validate User
Seller
Track Order Ship Order
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.
Functional Goals
•UML is to be used to show an e-commerce sample from an engineering
point of view.
Non-functional Goals
•Performance
•Modifiability
•Enhance ability
•Portability
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.
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
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.
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
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
UML Diagram
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.
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 Diagram
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
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.
Collaboration Diagram
4: View product
pdb:ProductDatabase
5: Connect customer to
product database
c:Customer
sd:ShippingDepartment
6: Buy item(s) 11: Send confirmation to
7: Item selected customer
10: Send address
for shipping
1: Sign in
3: Connect customer
to customer database fd:FinancingDepartment
rp:RegistrationProcessor
9: Accept
2: Matches credit
customer 8: Check credit
database for customer
cdb:CustomerDatabase
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.
Sequence Diagram
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.
Usecase Diagram
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 Diagram
E-Business InternetWork
Netscape 6.lnk Internet Explorer.lnk
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.
Package Diagram
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.
Object Diagram
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
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
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
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
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
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
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
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
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
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
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
Summer, 2000: Q. Liu & P. Pan (5 scenes, 95
second running time) – storyboard and more
interactivity. Flash 4
Spring, 2000: B. Young (ColdFusion)
Fall, 1999: B. Young
