1 / 35

Hypermedia Design Methods

Hypermedia Design Methods OOHDM Patterns OOHDM Object-Oriented Hypermedia Design Method A design method -- a series of activities for carrying out the design and implementation of hypermedia applications Four stages of development Incremental process

Samuel
Download Presentation

Hypermedia Design Methods

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Hypermedia Design Methods OOHDM Patterns

  2. OOHDM • Object-Oriented Hypermedia Design Method • A design method -- a series of activities for carrying out the design and implementation of hypermedia applications • Four stages of development • Incremental process • Relies on an understanding of OO design • Emphasis on reuse • Emphasis on OO software engineering patterns • http://www.inf.puc-rio.br/~schwabe/

  3. OOHDM Cornerstones • Navigation objects are views of conceptual objects • Use of appropriate abstractions to organise the navigation space, including navigation contexts • Separate interface issues from navigation issues • Recognition that some design decisions need only be made at implementation time

  4. OOHDM Methodology

  5. Steps 1 2 3 4 OOHDM Conceptual Design Products • Classes, subsystems, relationships, attribute perspective • Nodes, links, access structures, navigational contexts, navigational transformations • Abstract interface objects, responses to external events, interface transformations • Running application Navigational Design Abstract Interface Design Implementation

  6. Steps 1 2 3 4 OOHDM Conceptual Design Formalisms • Object-Oriented Modelling constructs; Design Patterns • Object-Oriented Views; Object-Oriented State charts; Context Classes; Design Patterns; User Centred Scenarios • Abstract Data Views; Configuration Diagrams; ADV-Charts; Design Patterns • Those supported by the target environment Navigational Design Abstract Interface Design Implementation

  7. Steps 1 2 3 4 OOHDM Conceptual Design Mechanisms • Classification, composition, generalisation, specialisation • Classification, Aggregation, generalization and specialization. Mapping between conceptual and navigation objects • Mapping between navigation and perceptible objects • Those provided by the target environment Navigational Design Abstract Interface Design Implementation

  8. Steps 1 2 3 4 OOHDM Conceptual Design Design Concerns • Modelling the semantics of the application domain • Takes user profile and task into account; emphasis on cognitive aspects. Build the navigational structure of the application • Modelling perceptible objects, implementing chosen metaphors; describing interface for navigational objects. Define lay-out of interface objects • Performance completeness Navigational Design Abstract Interface Design Implementation

  9. Conceptual Design Navigational Design Abstract Interface Design Implementation Conceptual Design • Conceptual model of the application domain built using OO modelling techniques • Augments OO models (UML) with primitives for users and tasks • Two kinds of objects: • Node candidates in the navigational model • Those that provide computational support for the application • Result: conceptual schema built out of subsystems (packages), classes and relationships

  10. Conceptual Design Generalisation Perspectives Aggregation

  11. Conceptual Design

  12. Conceptual Design Navigational Design Abstract Interface Design Implementation OOHDM: Navigational Design • Describes the navigational structure in terms of • (a) Navigational class schema • Nodes, links, indices, guided tours • Nodes are derived from views on conceptual classes • Links are derived from views on relationships. • (b) Navigational context schema • Induced from navigational classes • Classes and Contexts take into account users and their tasks • Different navigational models may be built for the same conceptual schema to express different views. • (c) Navigational Transformations spec shows the way the navigational space changes when the user navigates • Which nodes activated and which deactivated • Statechats, object charts

  13. Relationships between Objects

  14. Navigational Model • Which objects will be navigated, which attributes they possess, and what are the relationships among these objects and the ones defined in the conceptual schema. • defining nodes and links as object-oriented views of conceptual objects and relationships. • What kind of composition structures exist among navigational objects and how are they related? • What is the underlying structure of navigation? In which contexts will the user navigate? • navigational contexts, an architectural primitive for organizing the navigation space. • Navigated objects may look different according the context in which they are visited. InContext classes “decorate” navigational objects using the “Decorator” pattern • Which connections and access structures exist among objects that will be navigated (links, paths, indices, guided-tours, etc.) • How does navigation proceed when the user “jumps” from one object to another

  15. Node objects are views Super class Node class Conceptual class NODE Story [FROM Story:St] [INHERITS FROM Person] author: String [SELECT Name] [FROM Person:Pr WHERE Pr Is Author of St] author_bio: String [SELECT Bio] [FROM Person:Pr WHERE Pr Is Author of St] .... (other attributes “preserved” from the conceptual class Story} toAuthor: Anchor (Is Author of) END Variables to express logical conditions Anchor object Subject of query expression Logical expression Attributes of class

  16. Navigational Class Model

  17. Navigational Class Model

  18. Navigational Contexts • Chief structuring primitive of navigational space. • A set of nodes, links, context classes and other (nested) navigational contexts • Defines - Traversal order of its elements • Defines - Existence or not of access structures • Defines – Members • Extensional definition -> Enumerate its members • Intensional definition -> Define a property that all nodes and links in the context possess • Navigational contexts organize the navigational space in consistent sets that can be traversed following a particular order • Defined in such a way as to help the user to perform her intended task.

  19. Context definition • Simple class based • All stories [dated today] • Class based group - a set of contexts, each of which is a simple class based context • Stories by Type • Link based same class and belong to a relationship • All stories by Carole Goble • Link based group – a set of contexts, each of which is a link-based context • Stories by author • Enumerated - context elements transcends classes • Guided tour • Dynamic – context elements inserted during navigation • History, shopping basket

  20. Navigational Context Schema Contexts on story context switch No context switch Index to its components Indices Set of nodes

  21. InContext Classes Nodes enriched by InContext Classes Allow a node to look different and present • different attributes (including anchors), and • different methods (behaviour) when navigated within a particular context.

  22. Authors bio included as attribute of the story when traversing Highlights Specification of InContext

  23. Nodes and Contexts InContext Classes

  24. Navigational Context Schema Protected access dynamic contexts

  25. Conceptual Design Navigational Design Abstract Interface Design Implementation OOHDM: Abstract Interface • Perspectible objects (e.g. A picture, A city map …) defined in terms of interface classes • Interface classes • Aggregations of primitive classes (e.g. Text fields, buttons…) • Aggregations of interface classes • Interface objects • Map to navigational objects • Interface behaviour • Specify how to handle external and user generated events • Specify how communication occurs between interface and navigation objects • Separate navigational transformations and local interface transformations

  26. Abstract Data Views Inheritance in Abstract Data Views Aggregation of Abstract Data View

  27. Abstract Data Views Alternatives, so not shown together Active controls - Implements the interface of the InContext Class Theme -Implements navigation controls inside the Navigational Context: Paintings of a Theme

  28. ADVs and real interface objects

  29. Conceptual Design Navigational Design Abstract Interface Design Implementation OOHDM: Implementation • Maps objects to implementation objects • A database server may contain the conceptual objects • Navigational nodes could be views • Contexts require state information and predicates over nodes • Interface implemented using HTML, javascript, templates etc • OOHDM-Web case tools

  30. OOHDM vs RMM • OOHDM requires a real understanding of OO modeling • OOHDM emphasises navigational and abstract interface design • OOHDM uses objects as a modelling construct and encourages reuse • OOHDM uses general hypermedia design patterns for arbitrary application domains

  31. General Architectural Patterns • Decorator • Observer

  32. Navigation/Orientation Patterns • Active Reference: • Provides a perceivable and permanent reference about the current status of navigation. • Cycle: • The reader returns to a previously visited node and departs along a new path • Link Destination Announcement: • Avoids unnecessary link firing by providing information about the • destination. • Counterpoint: • Two “voices” alternate, interleaving, giving the reader the option to either follow one or to jump from one to the other. …

  33. Interface Patterns • Behavioral Grouping: • How to organize the different typesof controls in the interface so the user can easily understandthem? • Information-Interaction Coupling: • How do we makeclear what is the object affected by a control in a node’sinterface?

  34. Further Reading • HDM: Garzotto, Mainetti and Paolini. Hypermedia Application design: A structured approach. In Designing User Interfaces for Hypermedia Springer Verlay (1995) • RMM: Isakowitz, Stohr and Balasubramanian RMM: A methodology for Structured Hypermedia Design CACM vol 38, no 8 (Aug 1995) • OOHDM: Schwabe, Esmeraldo, Rossi, Lyardet Engineering Web Applications for Reuse in IEEE Multimedia vol 8 no 1 (Jan-Mar 2001) pdf • Schwabe and Rossi An Object Oriented Approach to Web-Based Application Design in TAPOS pdf • German and Cowan Towards a unified catalog of hypermedia design patterns in Proceedings of the 33rd Hawaii International Conference on System Sciences – 2000 pdf • Perzel and Kane Title: Usability Patterns for Applications on the World Wide Web in PloP ’99 Conference. pdf

  35. Further Reading • Bernstein’s hypertext patterns • http://www.eastgate.com/patterns/Print.html • Hypermedia Design Patterns Repository • http://www.designpattern.lu.unisi.ch/HypermediaHomePage.htm • Hypermedia Development Workshop Series • http://www.eng.uts.edu.au/~dbl/HypDev/ • General Web Resource: Webmonkey • http://hotwired.lycos.com/webmonkey/

More Related