Art-Engineering by lanyuehua


									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
   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
   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?
 - Artistic images <-> Model
Model Elicitation: in the presence of
 (partial, evolving) artistic images
Artistic Image Elicitation: in the
 presence of (partial, evolving)
       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
                        S:shopcart                  O:order                 Sh:shipping             T:transaction    B:bookinven   Db:Database

        Place order


                      Submit order                                                    connectToDB

                                                                                            Connection established

                                                 Validate user


                                                                   ConnectTo DB

                                                                   Connection established

                                              checkavailability                               ConnectTo DB

                                               billcustomer                                 Connection established



                      S:Search               Sc:Shoppingcart             bi:Bookinventory


                                           Connect to DB

                                                Connection established




                                                Delbook (Integer)

                             T:tracking                         DB:custDB   S:status









   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: A role the user plays in the system context
            A Use Case Diagram for E-Business System

                      Place Order


                    Confirm Order

(Actor 1)
 Buyer                                                     (Actor2)
                                           Validate User

                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

•Enhance ability
         Non-functional Goals


   •The animation uses less processing time due to the size and type of

   •The high level of compression allows the handling of these files
   with less memory usage.
         Non-functional Goals


   •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


   •Due to a timeline, appending changes to the animation
   becomes subtle since frames before the events remain

   •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


   •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


   •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
      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
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

                                             5: Connect customer to
                                             product database
                                    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


                                                                                          9: Accept
                               2: Matches                                                 credit
                               customer                         8: Check credit
                                database                         for customer

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

•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

•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

•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

•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

•Expanded into the idea of business to customer by citing a
central idea to it which is the customer relationship
•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

•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
•Changed the theme background music to one that follows the
eclipsing momentum of the animation

•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

   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

   Created timeline bar which shows progress within animation
   Added navigation buttons to jump to different parts of the
   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

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

To top