Download - Developing Dynamic Web Pages
Developing Dynamic Web Pages
Lawrence Chung
University of Texas at Dallas
Fall, 2002
Historical BackgroundHistorical Background
Initial Goal: development of a nice animation to understand Initial Goal: development of a nice animation to understand and explain what e-commerce/business is likeand explain what e-commerce/business is like
Started in Summer, 1999: literature survey, internet search Started in Summer, 1999: literature survey, internet search on e-commerce/business and Flash siteson e-commerce/business and Flash sites
1st version starts in September, 1999 and gets completed 1st version starts in September, 1999 and gets completed in December, 1999 by one personin December, 1999 by one person
22ndnd version starts in January, 2000 by the same person, version starts in January, 2000 by the same person, with more interactivity and completeness in mindwith more interactivity and completeness in mind
More Historical backgroundMore Historical background The 3The 3rdrd version started in Summer, 2000 by a new team of 2 version started in Summer, 2000 by a new team of 2
persons.persons. The 2The 2ndnd team struggled trying to understand the 2 team struggled trying to understand the 2ndnd
version, but added more and made artistic improvementsversion, but added more and made artistic improvements
The 4The 4thth version started in Fall, 2000 by a new team of 2 version started in Fall, 2000 by a new team of 2 persons (3persons (3rdrd team), team),
who struggle with learning Flash, and trying to understand who struggle with learning Flash, and trying to understand the animation which now shows some complexity.the animation which now shows some complexity.
Interim Goal: Completeness, clarity, consistency, minimality Interim Goal: Completeness, clarity, consistency, minimality of animation of animation
The 3The 3rdrd team does documentation of the scenes of the team does documentation of the scenes of the animation, makes some improvements, and presents the animation, makes some improvements, and presents the animation to an Open House visitors.animation to an Open House visitors.
Still More Historical BackgroundStill More Historical Background The 5The 5thth version starts in Spring, 2001 by a version starts in Spring, 2001 by a
new team of 2 persons (4new team of 2 persons (4thth team), who still team), who still struggle even with some documentation struggle even with some documentation available – clearly insufficient). available – clearly insufficient).
What happened next?What happened next? well, the 2 students went on 2 different well, the 2 students went on 2 different
ways and produced 2 different versions ways and produced 2 different versions v5.1 and v5.2, both almost from scratch, v5.1 and v5.2, both almost from scratch, in August, 2001.in August, 2001.
……Still More Historical BackgroundStill More Historical Background
The 6The 6thth version starts and completes version starts and completes in Fall, 2001 by a new person; a lot in Fall, 2001 by a new person; a lot more features of more features of e-commerce/business; both back-end e-commerce/business; both back-end and front-end processingand front-end processing
The Latest Historical BackgroundThe Latest Historical Background
The 7The 7thth version starts in Spring, 2002, by a version starts in Spring, 2002, by a new team of 2 persons (6new team of 2 persons (6thth team), team),
and completes in Summer, 2002.and completes in Summer, 2002. Addition of UML diagrams with some Addition of UML diagrams with some
traceability established.traceability established.
The 8The 8thth version starts in Fall, 2002, by a version starts in Fall, 2002, by a new team of 2 persons (7new team of 2 persons (7thth team). team).
Our Approach: Bring in EngineeringOur Approach: Bring in Engineering
Common interpretationCommon interpretation Delivery within timeDelivery within time Minimize costMinimize cost Ensure high quality for usersEnsure high quality for users
Need for modeling!Need for modeling! Need for requirements engineeringNeed for requirements engineering
Art + EngineeringArt + Engineering Current Goal: Engineer Artistic Dynamic Web Current Goal: Engineer Artistic Dynamic Web
PagesPages Dynamic Web Pages as explanatory device, as a Dynamic Web Pages as explanatory device, as a
(requirements) prototype(requirements) prototype Approach: Experimental, e-commerce/business Approach: Experimental, e-commerce/business
now as an application; distance learning as now as an application; distance learning as another applicationanother application
Art: through FlashArt: through Flash Engineering:Engineering:
- modeling: through UML, the NFR Framework- modeling: through UML, the NFR Framework- Process Aid: scenario analysis (storyboard)- Process Aid: scenario analysis (storyboard)- Scene representation- Scene representation- round-trip process- round-trip process
What Next?What Next? Translation: Translation:
- Artistic images <-> Model - Artistic images <-> Model componentscomponents
Model Elicitation: in the presence of Model Elicitation: in the presence of (partial, evolving) artistic images(partial, evolving) artistic images
Artistic Image Elicitation: in the Artistic Image Elicitation: in the presence of (partial, evolving) presence of (partial, evolving) models.models.
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
Technologies Used
• Use case Diagrams, Activity Diagrams, Sequence Diagrams
• Rational Rose UML
•HTML, Macromedia FLASH5
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
ConnectTo DB
Connection established
Connection established
<<destroy>>
<<destroy>>
Ship
billcustomer
checkavailability
actor
S:Search Sc:Shoppingcart bi:BookinventoryActor
searches
Connect to DB
Connection established
Performsearch
<<create>>
<<destroy>>
Delbook (Integer)
AddBook(Integer,Integer)
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
Actor
Place order
Actor: A role the user plays in the system context
Place Order
Registration
Confirm Order
Validate User
Ship OrderTrack Order
(Actor 1) Buyer (Actor2)
Seller
A Use Case Diagram for E-Business System
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.
Functional GoalsFunctional Goals
•UML is to be used to show an e-commerce sample from an engineering point of view.
Non-functional GoalsNon-functional Goals
•Performance
•Modifiability
•Enhance ability
•Portability
Non-functional GoalsNon-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 GoalsNon-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 GoalsNon-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 GoalsNon-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 GoalsNon-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 DiagramUML Diagram
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.
UML Statechart DiagramUML Statechart Diagram Statechart diagrams are one of the Statechart diagrams are one of the
five diagram in the UML for modeling five diagram in the UML for modeling the dynamic aspects of systems. A the dynamic aspects of systems. A statechart diagram shows a state statechart diagram shows a state machine. A statechart diagram machine. A statechart diagram shows flow of control from state to shows flow of control from state to state.state.
Statechart DiagramStatechart Diagram
UML Activity DiagramUML Activity Diagram Activity diagram are one of the five Activity diagram are one of the five
diagrams in the UML for modeling diagrams in the UML for modeling the dynamic aspects of systems. An the dynamic aspects of systems. An activity diagram is essentially a activity diagram is essentially a flowchart, showing flow of control flowchart, showing flow of control from activity to activity.from activity to activity.
Activity DiagramActivity Diagram
UML Collaboration DiagramUML Collaboration Diagram A collaboration diagram is an interaction A collaboration diagram is an interaction
diagram that emphasizes the structural diagram that emphasizes the structural organization of the objects that send organization of the objects that send and receive messages. It shows a set of and receive messages. It shows a set of objects, links among those objects, and objects, links among those objects, and messages sent and received by those messages sent and received by those objects. Collaboration diagrams are use objects. Collaboration diagrams are use to illustrate the dynamic view of a to illustrate the dynamic view of a system.system.
Collaboration DiagramCollaboration Diagram
11: S en d con firm a tion tocu sto m er
10 : S en d ad d ressfo r sh ip p in g
9 : A ccep t cred it
8 : C h eck cred it for cu stom er
6 : B u y item (s)
7 : Item se lec ted
5 : C o n n ect cu stom er top rod u ct d a tab ase
4 : V iew p ro d u ct
3 : C on n ec t cu sto m er to cu stom er d a ta b a se
2 : M a tch es cu sto m er d a ta b ase
1 : S ig n in
pdb:ProductD atabase
sd:S hippingDepartm ent
fd:F inanc ingD epartm ent
cdb:C ustom erD atabase
rp:Registra tionProcessor
c:C ustom er
UML Sequence DiagramUML Sequence Diagram A sequence diagram emphasizes the A sequence diagram emphasizes the
time ordering of messages. It has 2 time ordering of messages. It has 2 features that distinguish it from a features that distinguish it from a collaboration diagram. First there is collaboration diagram. First there is the object lifeline that is vertical the object lifeline that is vertical dashed line in the diagram. Second, dashed line in the diagram. Second, there is the focus of control. The focus there is the focus of control. The focus of control is a tall, thin rectangle that of control is a tall, thin rectangle that shows the period of time during which shows the period of time during which an object is performing an action.an object is performing an action.
Sequence DiagramSequence Diagram
UML Use case DiagramUML Use case Diagram A usecase diagram is a diagram that A usecase diagram is a diagram that
shows a set of use cases and actors shows a set of use cases and actors and their relationships. It is used to and their relationships. It is used to model the context of a system and to model the context of a system and to model the requirements of a system.model the requirements of a system.
Usecase DiagramUsecase Diagram
UML Deployment DiagramUML Deployment Diagram Deployment diagrams are one of the Deployment diagrams are one of the
2 kinds of diagrams used in modeling 2 kinds of diagrams used in modeling the physical aspects of an object-the physical aspects of an object-oriented system. A deployment oriented system. A deployment diagram shows the configuration of diagram shows the configuration of run time processing nodes and the run time processing nodes and the components that live on them.components that live on them.
Deployment DiagramDeployment Diagram
Netscape 6.lnk
E-Business InternetWork
I n ternet Explorer.lnk
UML Package DiagramUML Package Diagram Packages diagrams are one of the 2 Packages diagrams are one of the 2
kinds of diagrams found in modeling kinds of diagrams found in modeling the physical aspects of object-the physical aspects of object-oriented systems. A package oriented systems. A package diagram shows the organization and diagram shows the organization and dependencies among a set of dependencies among a set of packages.packages.
Package DiagramPackage Diagram
UML Object DiagramUML Object Diagram An object diagram shows a set of of An object diagram shows a set of of
objects and their relationships at a objects and their relationships at a point in time. Object diagrams point in time. Object diagrams address the static design view or address the static design view or static process view of a system.static process view of a system.
Object DiagramObject Diagram
•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
ImprovementsImprovements
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
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
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
ImprovementsImprovements
•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
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
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
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
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 the Added navigation buttons to jump to different parts of the
animationanimation Added a loading section to give browsers enough time to load Added a loading section to give browsers enough time to load
animation into memoryanimation into memory Cleared unused objects in the animation database library to Cleared 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
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 front-end and back-end Made a more clear distinction between front-end and back-end
processes by adding links to jump between themprocesses by adding links to jump between them Increased the amount of special effects in the animation for a Increased the amount of special effects in the animation for a
more artistic and better to follow projectmore artistic and better to follow project Compressed some of the sound files/effects for better use of Compressed some of the sound files/effects for better use of
spacespace Re-used some of the objects for more efficient use of Re-used some of the objects for more efficient use of
resourcesresources Appended and updated this documentAppended and updated this document
AcknowledgementsAcknowledgements 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 (5 scenes, 95
second running time) – storyboard and more second running time) – storyboard and more interactivity. Flash 4interactivity. Flash 4
Spring, 2000: B. Young (ColdFusion)Spring, 2000: B. Young (ColdFusion) Fall, 1999: B. YoungFall, 1999: B. Young