2. Modeling Techniques for Web Applications

CSS Optional — Paper-II, Section-B · P-II.VI.2 · First item in the syllabus. Expect a short note on modeling dimensions or a named method (WebML, UWE, OOHDM), or a request to model a small site.

1. Why Model Web Applications?

• Models give an abstract, shared view of a system before code — reducing ambiguity between designers, developers and clients.
• General UML covers structure and behaviour but has no native concepts for hypertext (navigation, links, access structures) or page presentation — hence web-specific methods.

2. Modeling Dimensions (Kappel)

3. The Models

(a) Requirements modeling — UML use-case diagrams (actors and goals) and activity diagrams (workflows such as checkout).

(b) Content modeling — the information structure, independent of navigation. Usually a UML class diagram (like an ER model): classes, attributes, associations.

(c) Hypertext (navigation) modeling — which content is reachable from where:

• Navigation structure model: nodes (pages/navigation classes) and links.
• Link types: structural links (hierarchy, e.g. menu → category) vs semantic links (content relationships, e.g. book → author).
• Access structures: index (list to choose from), guided tour (sequential next/previous, e.g. slideshow, checkout steps), query (search form), menu (fixed set of entry points).

(d) Presentation modeling — page layout: pages/presentation units, UI elements (text, image, anchor, form), their arrangement; produced as storyboards and wireframes.

(e) Customization/adaptation modeling — rules such as "show Urdu content if browser language is ur" or "serve a lighter layout on mobile".

4. Web Modeling Methods

5. Worked Example — Online Bookstore

Content model (class diagram)

classDiagram
    class Book { title; isbn; price }
    class Author { name; bio }
    class Category { name }
    class Customer { name; email }
    class Order { date; total }
    Author "1..*" -- "*" Book : writes
    Category "1" -- "*" Book : contains
    Customer "1" -- "*" Order : places
    Order "*" -- "1..*" Book : includes

Hypertext (navigation) model

graph TD
    H["Home (menu)"] --> C["Category index"]
    H --> S["Search (query)"]
    H --> T["Bestsellers (guided tour)"]
    C --> B["Book details"]
    S --> B
    T --> B
    B -->|"semantic link"| A["Author page"]
    B --> K["Cart"]
    K --> O["Checkout: guided tour of steps"]

Presentation model: Book-details page = header (logo, search box, menu) + main area (cover image, title, price, "Add to cart" button) + sidebar (author link, related books) + footer.

---

🎯 CSS Exam Angle

For "explain modeling techniques": state why plain UML is insufficient, give the four dimensions table, then content → hypertext → presentation with one diagram each for a familiar site (bookstore, university portal). Naming 2–3 methods (OOHDM, WebML, UWE) with one line each shows breadth.

⚠️ MCQ Traps

• Content modeling is independent of navigation — don't put links in the content model.
• A guided tour is sequential navigation; an index is a list to select from.
• WebML is ER-based; UWE is UML-based; OOHDM is object-oriented.
• IFML (Interaction Flow Modeling Language) is the OMG standard derived from WebML.

---

✅ Self-Check (with Answers)

Q1. Why is standard UML not enough for modeling web applications?

Ans: UML covers structure and behaviour but lacks native constructs for hypertext (navigation paths, link types, access structures like index and guided tour) and for page-level presentation; web methods such as UWE extend UML with stereotypes for these.

Q2. Name the three levels of web modeling and what each captures.

Ans: Content (what information exists — class diagram), Hypertext (how information is linked and navigated — navigation model), Presentation (how pages look — layout, UI elements).

Q3. Differentiate structural and semantic links with examples.

Ans: Structural links follow the site's hierarchy (Home → Category → Book); semantic links follow meaning in the content (Book → its Author, Book → related books).

Q4. Which access structure suits a 4-step checkout, and which suits a product catalogue?

Ans: Checkout — guided tour (sequential next/back steps). Catalogue — index (list of items to choose from), often combined with a query (search).

Q5. What are the design phases of OOHDM?

Ans: Requirements gathering, conceptual design, navigational design, abstract interface design, implementation.