Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebML and WebRatio - Business process modeling (BPM) and web application modeling


Published on

Seminar on WebML and WebRatio BPM at Ecole des Mines de Nantes, 2010. Business process modeling and automatic web application generation with a commercial and free toolsuite that exploits SOA, Java, and web service orchestration.

For more details see:

Find an audio-video tutorial on webml here:

See a demonstration video here:

Published in: Technology, Design
  • Login to see the comments

WebML and WebRatio - Business process modeling (BPM) and web application modeling

  1. 1. WebML Designing data-, service- and process-intensive applications with WebML EMN, Nantes, May 12, 2010 Marco Brambilla Politecnico di Milano and Web Models Srl
  2. 2. Agenda  WebML models and concepts  WebML development process  Advanced topics: Web services, BPM, Ajax  WebRatio 6 BPM  Industrial cases 2 WebML
  3. 3. WebML WebML models and concepts Marco Brambilla Politecnico di Milano and Web Models Srl
  4. 4. Perceived Needs 1: lack of model-driven development  Data-intensive Web site design today is founded on methodologies stolen from different sectors (DB, software eng., …)  Lack of model-driven support of data-intensive Web Sites • Navigation equal to database structure • Lot of hand-written code  Big efforts are requested even for prototyping 4 WebML
  5. 5. Perceived Needs 2: increase of sites complexity  Some factors increase complexity of modern Web sites: • Multi-device output (PC, PDA, WAP phones, 3rd gen phones, Digital TV, videotext) • One-to-one delivery (myYahoo, myCDNOW,…)  These requirements impact on cost of: • site development • site evolution 5 WebML
  6. 6. Perceived Needs 3: shortage of IT & art personnel  Need to rise the level of abstraction  Available skills can address analysis and high-level design instead of huge time-wasting manual coding of ASP pages  IT technicians can focus on optimization and performance analysis  Art people can focus on “creation” 6 WebML
  7. 7. Advantages of Modeling approach A rigorous modeling approach:  Can reduce development efforts (cost and time)  Allows a more structured development process  Produces more usable and coherent final results  Design models are self-documenting and always up-to-date projects Immediate prototyping can be achieved 7 WebML
  8. 8. Requirements for Web modeling  Expressiveness • Real-life cases should be expressible • Frequently used design patterns should be captured  Ease of use • Intuitive notation • Clear semantics • Consistency checks  Implementability • Efficient mapping to physical data structures • Flexible code generation from behavioral specifications 8 WebML
  9. 9. WebML purpose  WebML aims at providing a structured approach to the design of Data-intensive Web sites  A set of integrated Models should help designers in high- quality Web sites production  All the facets of Web design should be addressed  Use of old or uncoherent methodologies becomes deprecated 9 WebML
  10. 10. Target of WebML  Target: data intensive Web sites • large amount of data • interfaces directed to general public  exploratory  browsing-oriented  personalized (1 to 1) • volatile content, structure, navigation, presentation  WebML is not the right approach for: • Small Web sites (Homepages, …) • Static Web sites 10 WebML
  11. 11. The WebML models  WebML: a conceptual language for high-level design of data- intensive web sites  Models: • Content: data organization • Derivation: redundant data definition • Composition: definition of site pages as set of subpages and elementary publishing units • Navigation: definition of links between pages and between units • Presentation: positioning of the units in the page and definition of graphical appearance 11 WebML
  12. 12. Preview of WebML concepts  Site = Content + Composition + Navigation + Presentation entities, units, pages, site views styles relationships links navigation + content composition user models presentation 12 WebML
  13. 13. Structure Model (1)  Q: what are the objects published in the site and how they are related?  A: • Entity: an object type in the application domain • Attribute: scalar property of an entity • Relationship: A connection between entities • IS-A hierarchy: classification and grouping  Compatible with Entity-Relationship and UML class diagrams 13 WebML
  14. 14. Structure Model (2)  Simplified Entity-Relationship model • Binary relationships between entities • IS-A hierarchies • Simple typed attributes in entities Author Genre • Derivation model can be applied for redundant data Book BestSeller 14 WebML
  15. 15. Relationship cardinality  Relationship Book_Review – book2review minCard: 0 maxCard: N – review2book minCard: 1 maxCard: 1 Book 0..N Review 1..1 It reads: a book may have zero or more reviews, a review deals with one and only one book 15 WebML
  16. 16. Cardinality: comment  Cardinality constraints of relationships are important, because • They make the structure schema more readable and expressive • They can influence the design of the phisical structure of the content repository (e.g., the schema of the online database of the site) 16 WebML
  17. 17. Multi-valued attribute  A multi-value attribute is an attribute for which an object may have a set of values (e.g., a person may have set of addresses)  Multi-valued attributes are represented by means of an entity plus a relationship  Example: a person has a set of addresses Person 1..N Address NOTE: the “address” Value:string entity is a “weak” 1..1 entity, it cannot exist independently of the associated “person” object 17 WebML
  18. 18. MODEL Structured attributes  A structured attribute is an attribute with an internal structure (e.g., an address may consist of several fields, like civic number, street, city, province, state, etc..)  Structured attributes are represented by means of an entity plus a relationship  Example: a person has one or more addresses, each address consisting of number, street, city, province, state NOTE: the “address” Person 1..N Address entity is a “weak” 1..1 Number entity, it cannot Street exist independently City of the associated Province State “person” object 18 WebML
  19. 19. MODEL Relationship with attributes  A relationship with attributes is a description of a property that refers to a pairs (more generallly to sets) of objects (e.g., the grade taken by a student in a course)  Relationship with attributes are represented by an entity and two (more generally, several) relationships Student 0..N Grade 1..1 Course Value:integer 1..1 0..N NOTE: the “grade” entity is a “weak” entity, it cannot exist independently of the associate objects 19 WebML
  20. 20. MODEL N-ary Relationship  A N-ary relationship is a relationship involving more than two entities (N>2)  N-ary relationships are represented by an entity plus N binary relationships  Example: a supplier supplies a part to a department Part 0..N 1..1 Supplier 0..N Supply 1..1 Department 1..1 0..N 20 WebML
  21. 21. TECHNIQUES Structure patterns  Structure pattern: typical structure design solution, found very frequently in real Web sites  Patterns can be combined and used together to achieve complete information access 21 WebML
  22. 22. Structure Patterns  Network skeleton: Entity3 • Hierarchy skeleton: Entity1 Entity1 Entity2  Star skeleton: Entity2 Entity4 Entity3 Entity3 Entity1 Entity5 Entity2 22 WebML
  23. 23. 1. Hierarchy Pattern Category Entity1 SubCat Entity2 E-catalog Product Entity3  A categorization hierarchy  User can browse the hierarchy from top to bottom (and back)  Often used in e-commerce applications 23 WebML
  24. 24. 2. Star Pattern Entity4 BigImg Entity3 TechData Acme case Entity1 Item Entity5 Warranty Entity2 Style  A main object can be recognized  A set of informative elements are related to the object  User can jump from main object to information pages and back 24 WebML
  25. 25. 3. Network Pattern Tech-support Entity3 Product Entity1 Solution Entity2 Tech site  A set of elements to be published  All at the same level of importance  Every object has detailed description  User can browse from an object to the related ones 25 WebML
  26. 26. Pattern combination  Real web sites are much more complex  Many problems CatA1 Category CatB1 Country can be solved using patterns Hierarchy combined SubCatA1 SubCat SubCatB1 Brand pattern2 together Hierarchy pattern1 Object1 Product Network pattern Object2 Solution Object3 Tech Hierarchy Hierarchy pattern Category2 SolCat TechCat pattern Category3 26 WebML
  27. 27. Derivation Objectives  Derivation is a modelling phase that makes it possible: • To augment the content of an entity by adding attributes, either imported or calculated from related objects. • To define the population of entities or of relationships, based on some property of the involved objects. 27 WebML
  28. 28. WebML OCL  Derivation consist of writing expressions called “derivation queries”  Queries can be expressed using WebML OCL  Derivable concepts: • Entities, relationships, attributes  Derivation queries can be automatically transformed into SQl views installed in the database 28 WebML
  29. 29. Derived entities  Sub-Entities population in ISA hierarchies can be specified by means of OQL queries  “A free slot is a slot having 0 reservations”  WebML OQL: “SuperEntity where count(reservation)=0” slot ISA freeSlot 29 WebML
  30. 30. Derived attributes  Attributes of an entity can be derived by associating to them a query.  Four types of derived attributes: • Constant attribute: affiliation: “Politecnico di Milano” • Imported attributes: maritalName: Self.husband.lastname • Aggregate attributes: reservation#: count(Self.reservation) • Calculated attributes: lastPrice: Self.price*discount  The Self keyword identifies the current entity in which the attribute is defined 30 WebML
  31. 31. Imported attribute  Import a piece of external information into an entity male female husband lastname maritalName 31 WebML
  32. 32. Calculated attributes  Total price of order as sum of price of order lines OL Order OL2Order price, qty  Derivation rules: OL.TotalPrice = Self.Price * Self.Quantity Order.TotalPrice = Sum (Self.Order2OL.TotalPrice) Order.NumLines = Count (Self.Order2OL) 32 WebML
  33. 33. Derived relationships  Relationships can be derived by a WebOQL query in two ways: • by subsetting and/or concatenating existing relationships • by matching pairs of objects by means of a condition  Variable Self denotes the instance of the source entity of the relationship 33 WebML
  34. 34. Derived relationships: subsetting  Subsetting existing relationships: Artist2RecentAlbum Artist Album Artist2Album 34 WebML
  35. 35. Derived relationships: concatenation  Concatenating existing relationship: Album Artist CompilationArtist SongAlbum Song SongArtist 35 WebML
  36. 36. Derived relationships: matching pairs  User2Favorites relates User to all the Articles whose category appears in the set of the preferred categories in the user profile. User2Favorites User Article User2Article User2Preference Category 36 WebML
  37. 37. Hypertext Model • Q1: what information is published in the hypertext nodes? • Q2: how are the hypertext nodes connected? • Q3: how is the hypertext divided into pages served to the user? • A1: content units (Composition) • A2: links (Navigation) • A3: pages (Composition) 37 WebML
  38. 38. Composition: examples of Content Units DATAUNIT To publish information about A SINGLE object (e.g. AuthorDetail) content INDEXUNIT To publish a list of objects (e.g. IndexOfAuthors) content 38 WebML
  39. 39. Composition: examples of Unit rendering DATAUNIT Author first name:XXX last name:YYY photo: Author INDEXUNIT Index of Authors •S. Ceri •P. Fraternali •O.Versand Author 39 WebML
  40. 40. Hypertext Model: questions •Q1: what is the experience of the site that the user can achieve? •Q2: how is the hypertext divided into pages served to users? •Q3: what information is published in the hypertext nodes? •Q4: how are the hypertext nodes connected? •A1: siteviews •A2: pages •A3: content units •A4: links 40 WebML
  41. 41. Basic Content Units DATAUNIT INDEXUNIT MULTIDATAUNIT Content: • instances of an entity Selector: • set of conditions entity entity entity [Selector] [Selector] [Selector] ENTRYUNIT SCROLLERUNIT MULTICHOICE HIERARCHICAL entity entity entity [Selector] [Selector] [Selector] 41 WebML
  42. 42. Meaning of Content Units DATAUNIT INDEXUNIT MULTIDATAUNIT Author Index of Authors All Authors first name:XXX last name:YYY •S. Ceri photo: •P. Fraternali •O.Versand ENTRYUNIT SCROLLERUNIT MULTICHOICE HIERARCHICAL Insert Your Data Browse Authors Choose Authors Books&Authors 1. Web Applicat. •Fname 5/12: go to 1/12 Ceri Ceri •Lname Fraternali Fraternali    Versand 2. Systems Tannenbaum 42 WebML
  43. 43. Content Units  A WebML unit is the atomic information publishing element unitX container  It is a “view” defined upon a container of objects: • All the instances of an entity • Instances of an Entity that meet a selection condition called selector 43 WebML
  44. 44. Unit input and output IN unitX OUT entity [selector (par 1, .., parN)]  A unit may need some “context” to be computed  Each unit exposes input and output parameters  Input is required to compute the unit itself • Parameters pre-defined for the unit + • Other parameters required by the selector of the unit  Output can be used to compute other unit(s) depending on the current unit 44 WebML
  45. 45. Navigation: contextual links source unit target unit Author Author • A contextual link is an oriented connection between two units (source unit and target unit), normally rendered by means of anchors or submit buttons • Purpose of a contextual link: • Allowing the user to move from one place to another • Transporting information from one place to another • Activating a computation (side effect) 45 WebML
  46. 46. Example of links Which author’s books? Which book? p1 p2 p3 Author Book Book [OID=p1] [author2book(p2)] [OID=p3] Author Books of YYY Book first name:James Title:Ulysses last name:Joyce •Ulysses Price:23$ photo: •The Dubliners Cover: •Portrait... 46 WebML
  47. 47. Link Parameters param Book Author [Author2Book(param)] • Context is transported through links using link parameters • A link parameter is defined by: • Name • Source: one of the output parameters of the source unit • Target: one of the input parameters of the target unit 47 WebML
  48. 48. Default Link Parameters • Whenever possible, link parameters are inferred from the diagram and need not be explicitly specified • Diagrams become simpler and more readable •Example: Book Author [Author2Book] 48 WebML
  49. 49. Defaults for selectors • Whenever possible, selectors and their parameters are inferred from the diagram and need not be explicitly specified • Example: Author Book Book [author2book] 49 WebML
  50. 50. Automatic Links source unit A target unit Author Author • An automatic link passes some default context to the destination unit immediately after the display of the source unit, without the user intervention • Subsequently, the user can change the passed context by choosing a different object, using the anchor(s) representing the link 50 WebML
  51. 51. Transport Links source unit target unit Book Author [Author2Book] • A transport link has a default context that is passed to the target unit immediately after the display of the source unit, without the user intervention • The user cannot change the default context and therefore the link is not rendered with an anchor 51 WebML
  52. 52. Examples  No input links and no selector: wrong unit! p1 EntityB Input parameter: OID A.oid B.oid of a connected object: the related object is shown EntityB [Relationship(A2B)] Input parameter: param1 B.oid value to be used in the selector: the matching object is EntityB [B.attr = param1] shown 52 WebML
  53. 53. Examples  No input links: all objects selOID shown (B) EntityB Input parameter: OID of the source object of sourceOID selOID the relationship role, (A) (B) all related object are EntityB shown [Relationship(A2B)] Input parameter: Param1 selOID value to be compared (B) with the attribute, matching objects EntityB shown [B.attr = Param1] 53 WebML
  54. 54. MultiDataUnit params {OIDs} Entity [Selector(params)] • Multidata units • Present multiple instances of an entity (SET OF OBJECTS) • The container is an entity with (optional) selector • Input parameters requested for the computation of the selector: • Values for attribute comparisons • OID of participants to relationships • Output parameter: • The set of OIDs of the published objects 54 WebML
  55. 55. MultiData vs. Index  MultiData or Indexes? • Indexes can be used as access mechanism to shown detailed information about one object • Multidata Units publish information about many objects at time  The difference is in the output parameter: • Indexes output the OID of one selected object • Multidata units output the OIDs of all the displayed objects 55 WebML
  56. 56. Entry Unit  Unit for describing input forms that allow information submission by the user  Content is shipped to other units via outgoing links (normally one), using link parameters  Typically translated into HTML using the <form> tag and the associated submit button params 56 WebML
  57. 57. Entry Fields and Selection Fields  Entry units contains two types of widgets for data entry: • Fields to insert new value • Selection fields to select a value from a list  Fields have properties: • Preloading (of an existing value in the field) • Modifiability (Y/N) • Visibility (hidden/shown) • Data type (string, integer, text, etc..) • Input validation rules 57 WebML
  58. 58. Preloaded Fields  A field can be preloaded with value(s) • Field slots allow the concatenation of multiple values in the same field • Slots can contain dynamic values taken from the database or static values defined in the model FirstName PF.S1 LastName PF.S2 EntryUnit NickName PF.S3 PersonField S1 S2 S3 AddrField Artist  Selection fields need to be preloaded with a set of instances (possibly with multiple slots per instance) Resulting field anPersonField them Springsteen “the boss”  The user chooses instance among Bruce 58 WebML
  59. 59. Multichoice Unit  Multichoice units: • Publish indexes of elements (SET OF OBJECTS) among which the user to select one or more elements (with checkboxes)  The container is an Entity (with optional selector & pre-selector) • Input parameters:  Those requested for the computation of the selectors (values for attribute comparisons and OID of participants to relationships) • Output parameters:  OIDs of the objects checked by the user  Preselector: allows one to define a sub-set of elements as pre-checked (before any user interaction) params {selOIDs} Entity [Selector(params)] [Preselector(params)] 59 WebML
  60. 60. Examples  No input links: all objects shown, no pre-checked elements {selOIDs} Atzeni (B) Ceri Fraternali Versand EntityB sourceOID Atzeni {selOIDs} Pre-selector: all objects (A) Ceri (B) shown, pre-checked Fraternali Versand elements related to A EntityB [PRE:Relationship(A2B)] sourceOID Ceri Selector: only elements (A) {selOIDs} (B) Fraternali related to A shown, no pre-checked elements EntityB [Relationship(A2B)] 60 WebML
  61. 61. Hierarchical Unit  Hierarchical units: • Publish an index of elements, with entries organized hierarchically using entities connected by relationships • Allow the user to select one element from any level of the hierarchy  The container is a set of entities and connecting relationships (with optianl selectors at all levels) • Input param: requested for the computation of the selectors :  Values for attribute comparisons  OID of partecipants to relationships • Output parameter: OID of the object selected by the user params {selOIDs} { Entity (Relationship) [Selector]} 61 WebML
  62. 62. Hierarchical Unit outgoing links  Each link is rendered as an anchor at the proper level of the hierarchy  The level where the link is placed depends on the type of the link parameter(s) link a •Tables link a Param link b •Kitchen link b EntityA B •Korla KJD54 link c link c •Chairs link a EntityA EntityB •Stools link b Category •Roy LKR34 link c [selector1] SubCategory •OddVar JSQ87 link c EntityB (A2B) (Cat2SubCat) EntityC •Office link b [selector2] Product •Jess RLT45 link c EntityC (B2C) (SubCat2Prod) [selector3] 62 WebML
  63. 63. ScrollerUnit Scroller units:  Add browsing capabilities to a set of objects • Publish links to the first, previous, next, last object of the set • Used in conjunction with data, index and multidata units • Number of scrolled objects = block factor • Input: values for attribute comparisons, OID of participants to a relationship • Output: the set of OIDs (possibly 1) of the current block of objects  Always placed in the same page as another content unit that publish the current (block of) object(s) params {selOIDs} Entity [Selector(params)] 63 WebML
  64. 64. Scroller + data unit  The entity is the same for the scroller and the data unit  It is possible to access the data unit also from another page and the scroller is automatically syncronized Artist Artist 64 WebML
  65. 65. Scroller + index  Paging the result of a search t,y Album Album [Title contains t] [Year > y] 65 WebML
  66. 66. Pages  A page is a container of one or more pieces of information shown to the user at the same time  Nesting of pages is allowed: a page can have sub-pages  The user navigates a site made of pages Book Index Login Catalog 66 WebML
  67. 67. Non contextual links  A non contextual link is a link between pages  No context (information) is transported HomePage Book Index  The user can browse from a page to another one via an anchor (e.g., >>Books) 67 WebML
  68. 68. Home Page  The Home Page is the main page of a site  It is the first page of the site that the user should see  Each siteview must contain a page marked as “Home” HomePage H Book Index 68 WebML
  69. 69. Landmark pages  Landmark pages: globally visible pages. The user can jump to them from everywhere in the site view  It is equivalent to a non contextual link implicitly defined from every other page in the site view to the landmark page Books Store Page Books Store Page L Authors Book Details Authors Book Details 69 WebML
  70. 70. Areas  An area is a set of logically homogeneous pages  Examples of areas: • Sections of a portal: Sport, Music, Technology, … • Elements of a data-management system: Products management, News management, …  Areas can be nested, so that sub-areas can be defined inside areas  Each area should have a DEFAULT PAGE or a DEFAULT SUB- AREA, to give a meaning to landmark areas and non- contextual links pointing to areas Area 70 WebML
  71. 71. Site Views  A siteview is a set of pages and/or areas forming a coherent view of the site  Multiple site views can be defined on the same data model  Different site views can be published for different types of users and for different types of output devices  Site views can be • Public: everyone can enter • Private: access control with password protection is enforced 71 WebML
  72. 72. Acme site view modeling  Two site views on the same data model • Customer: public, for customers • Admin: private, for the administrators and content managers 72 WebML
  73. 73. Acme customer site view  Purpose: define the customer experience of the site  Structure: • Two main areas: products and combinations • Other landmark pages: home, stores Customer Product area Combination area L L Home Page Store Page H,L L 73 WebML
  74. 74. ACME page modeling  Q: what “main” pages do I need in the site?  Home, Products, Combinations, Stores Product area Combination area AcmeHome H Stores Products Combinations L L L L Q: what other pages do I need? Product detail, Combination detail, ByPrice, BigImages,.. Combination By price Product Detail Page BigImages 74 WebML
  75. 75. ACME: HomePage 75 WebML
  76. 76. ACME product page 76 WebML
  77. 77. ACME combination page 77 WebML
  78. 78. Navigation Model: Links AuthorID is transported entity: Book author [ author2book ] • Semantics of a link: 1. Moving from one place to another 2. Transporting information from one place to another (navigation context) 3. Activating a computation (side effect) 78 WebML
  79. 79. Composition: Pages A Page is a structured container of units and links • Possibly structured in and/or sub-pages • Abstraction of screen, frame, card, deck... • Permits one to cluster related information for more efficient communication E.g.: The index of authors and the selected author are shown together in the same page Author Author 79 WebML
  80. 80. Types of links  Contextual links • Between units • Context transported  Non-contextual links • Between pages • No context transported Voyages Books 80 WebML
  81. 81. Integrating backend business logic  Example of web sites using back-end/remote services: • Reservation Web site: create a reservation, undo a reservation, overwrite a reservation.. • Other examples: content management, e-commerce trolley management, update of personal profile ..  How can we model the invocation of back end operations, e.g., the update of content by the user?  Response: • Embedding operation calls into the hypertext 81 WebML
  82. 82. Operation Unit  Models a generic external operation, or a built-in content manipulation operation  Input from one or more incoming links (at least one is declared as normal link, the others as transport links)  Two kinds of output links • OK link if the operation completes correctly • KO link if the operation fails  The predefined WebML units can be enriched by adding custom external operations (e.g. SendMail, …) 82 WebML
  83. 83. Built-in Operations  WebML predefines a set of frequently used built-in operations to manage a site’s content  They are the traditional database operations: create, delete, modify, create relationship, delete relationship  Users do not need to define the behaviour and the implementation; they are provided off-the-shelf in the model 83 WebML
  84. 84. Built-in Operations CREATE DELETE MODIFY Create Unit Delete Unit Modify Unit Entity Entity Entity CONNECT DISCONNECT Connect Unit Disconnect Unit relationship relationship 84 WebML
  85. 85. In/out flows value1 attribute1 KO Nothing Create Unit OK OID of the new object value2 attribute2 Entity Identifier(s) of the value1 attribute2 object(s) to modify Value2 attribute1 KO Modify Unit OK Identifier(s) of the modified object(s) OIDs of objects to modify Entity 85 WebML
  86. 86. In/out flow: delete KO OIDs of the object(s) to delete OIDs of the Delete Unit object(s) to delete OK Nothing Entity Albums DeletionError Example: AlbumIndex DeleteAlbum NotDeleted KO OK Album Album Album OK Albums DeletionError Albums DELETE ALBUMS NOT DELETED DELETE ALBUMS All the way All the way Let's talk... Anthology 1999 1997 Anthology KO Bridges to Babylon Born in the USA Bridges to Babylon Imagine Imagine Sing-a-long Let's talk ... 1998 Del Del Sing-a-long 86 WebML
  87. 87. In/out flow: connect  Note: if the any of the input parameters is a set of OIDs, the operation is applied to each element of the set  The disconnect operation is similar OIDs of Identifiers of the source object(s) objects to connect KO to connect Connect Unit OK Identifiers of the OIDs of connected objects destination object(s) relationship to connect role 87 WebML
  88. 88. Example ReviewPage Result Rev : Rev iew.OID ArtistDetails NewReview KO OK Rev : OID AssignReview Art: Artist.OID Artist Rev iew Rev : Rev iew.OID [OID = Art] Art:OID AllArtists ReviewDetails ArtistToRev iew [Artist.OID = Art ] [Rev iew.OID = Rev ] Artist Rev iew [OID=Rev ] KO Rev iew Page Result NEW REVIEW ARTISTS ARTIST REVIEW One of the most Select an artist to romantic and assign the review: First name: Review : expressive artists Celine One of the m ost ° Beatles OK rom antic and of the nineties. Last name: expressive artists * Dion Dion of the nineties. ° Prince 88 WebML
  89. 89. Example/2 Artist&AlbumsPage ArtistDetails KO OK Album Disconnect Artist PublishedAlbums AlbumDetails AlbumToArtist Album Album [ArtistToAlbum] KO Artist&Albums Artist&Albums Artist&Albums Celine Dion Celine Dion Celine Dion ALBUMS ALBUMS DETAILS ALBUMS Sing-a-long ° All the way ° All the way OK ° All the way 1999 ° Let's talk... ° Let's talk... ° Let's talk... ° Sing-a-long * Sing-a-long ° These are... ° These are... ° These are... Press OK OK to remove 89 WebML
  90. 90. Siteviews  A Siteview is a set of pages that the user can experience as a whole Web site  Different site views can be defined for different devices and different groups of users  Thus, access control and multi-devices delivery is achieved 90 WebML
  91. 91. Using global information  It is often necessary to: • Set a parameter value (e.g. the country or language preferred by a user) • Use this value globally in all the pages the site view, without carrying it explicitly along links  Solution • Use global parameters stored in the session • Provide means for setting/getting their value 91 WebML
  92. 92. Context Parameters  WebML Context Parameters allow to achieve this goal in a simple way  Designer defines one or more Context parameters.  A context parameter is defined by: • Name • ID • Duration (User session or Application) • Value type: can be either:  A Printable value (integer, string, …)  An Entity (thus, the parameter can assume an OID value of that entity) • Starting value [optional] 92 WebML
  93. 93. Set unit  Unit that allows to SET the value of a parameter Value/OID ParamName  It is always placed outside a Page  It has only an incoming link (carrying the value to be assigned to the parameter)  It has not outgoing links 93 WebML
  94. 94. Get unit  Unit that allows to RETRIEVE the value of a parameter Value/OID ParamName  It is always placed inside a Page  It has only an outgoing link (carrying the value retrieved from the parameter)  It has not incoming links  The retrieved value can be used in any compatible unit 94 WebML
  95. 95. Example SetCountry GetCountry NewsPage[L] CountryData CurrCountry CurrCountry CountrySelectionPage [L] ProductPage [L] CountryIndex CountryData CountryData Country LocalNews Country Country Country LocalProducts News [Country2News] Product [Country2Product] 95 WebML
  96. 96. Personalization and access control  In reserved Web sites commitment wants: • One or more public pages readable from anyone • A set of private page accessed only after login, which contains personal content and personal services • Personalization in terms of delivered pages (which pages user can access) and delivered content (which content user needs/can see) 96 WebML
  97. 97. Personalization  Personalization has three facets: • Access control: login/logout operations for user recognition • Site view assignement: based on the group a user belong, some site views are accessible (1 or more site view per Group) • Page personalization: user or group dependent content 97 WebML
  98. 98. User / Group metaphor  Each User can belong to one or more Groups (predefined entities in the structural model)  Each user has one default Group  Each Group can contain one or more User and can be the default Group for many Users User 1:N 1:N Group user2group 1:1 1:N user2defaultGroup 98 WebML
  99. 99. User / Group model  Each User can belong to one or more Groups (predefined entities in the structural model)  Each user has one default Group  Each group has one associated Siteview User 1:N 1:N Group user2group 1:1 1:N 1:1 user2defaultGroup 1:N Module 99 WebML
  100. 100. Anonymous access  One group is predefined (everyone)  Users belonging to this group need not login, but access only unprotected site views, which has unprotected content (the “everyone” site views)  Other site views can be accessed only after login (secured site views) 100 WebML
  101. 101. Login/ Logout  A site-view may contain a page allowing users to login Entry Unit Login  Each secured site-view should allow users to logout Logout  Dynamic Role Changing (i.e. group) allowed ChangeGroup 101 WebML
  102. 102. Login for multi-role users  If a user belongs to more than one group, at login time he is considered as member of his defaultGroup Username johnlee Password *********** User: johnlee Group: johnleeDefaultGroup Login  Thus, once the user is logged, the current values of User and Group are always identified 102 WebML
  103. 103. CurrentUser and CurrentGroup Each WebML project has two predefined global parameters: • CurrentUser: the OID of the currently logged User • CurrentGroup: the OID of the Group of the currently logged user Login and Logout operations automatically set / unset these two parameters 103 WebML
  104. 104. Page personalization (user-level) Personalization can be achieved with appropriate data design articles user preference •Hypertext can reflect structure, and thus provide personalization After login CurrentUser is Recommendations identified, thus the index shows user’s preferred CurrentUser user article articles [preference] 104 WebML
  105. 105. Trolley management TrolleyPage GetUser CurrentUser TrolleyData OK CurrentUser User Trolley [UserToTrolley] DeleteOrderLine OrderLines to Artist Page Artist:Artist.OID Album:Album.OID to Album Page KO OrderLine OrderLine [TrolleyToOrderLine] NEST Support [OrderLineToSupport] NEST Album [SupportToAlbum] NESTArtist [AlbumToArtist] L 105 WebML
  106. 106. Page personalization (User)  Personalization can be achieved as a result of appropriate structure design slot user reservation •Hypertext can reflect structure, and thus provide personalization After login Personal Reservations UserCtxParam is bound to “my” identity, thus the index shows “my” UserCtxParam entity:user rel:reservation reservations 106 WebML
  107. 107. Page personalization (Group)  Personalization can be achieved also at group level (because a siteview can serve more groups) Book Author User Group Category interesting Preferred categories Authors GroupCtxPar Group relation:g2c Category relation:c2a 107 WebML
  108. 108. Presentation  Presentation dealt with along two lines: • Gallery of default presentation styles applicable to site views or single pages (with elementary unit positioning on a grid)  each presentation style is an XSL stylesheet • Compatibility with best selling tools for presentation editing, for advanced page design 108 WebML
  109. 109. WebML WebML development process Marco Brambilla Politecnico di Milano and Web Models Srl
  111. 111. 1. Requirements specifications  IN: business requirements  OUT: user-oriented, easy-to-understand, precise specification  Two main sucb-activities: • 1. Requirements collection: general picture of the application domain and of the solution, by interviewing players and reviewing existing documentation • 2. Requirements analysis: revision and formalization of the collected requirements  Output is useful for • Designers: understand what the application must do • Stakeholders: validate the adherence of the specifications to the business requirements 111 WebML
  112. 112. 1.1. Requirements collection Unstructured activity of information gathering:  Users identification: clustering of users in groups  Functional requirements: identification of the processes that are supported by the application (through use-cases or scenarios)  Data req.: identification of the data that should be managed by the application (core concepts)  Personalization req.: formalization of need of different content and services to different individuals, based on preferences and access rights  Device-specific req.: for multi-device applications  Non-functional req.: usability, performance, availability, scalability, security, mantainability 112 WebML
  113. 113. 1.1. Non-functional requirements  Usability: ease of use of the application  Performance: efficiency with which the application exploits the available resources, in terms of throughput (the number of requests that can be served per unit of time) and response time  Availability: tolerated frequency of errors and failures  Scalability: ability of increasing the performance of the application in response to the increase of the volume of requests  Security: protection of integrity, confidentiality and privacy of information, authentication of the users, protection of the information flowing between the users and the application  Mantainability: ease of repairing application errors and adapting the Web application to changed or new requirements 113 WebML
  114. 114. 1.2 Requirement analysis  Revision and formalization of the collected requirements, producing in output a set of semi-formal specifications, typically in terms of: a. Group specification b. Use-case specification c. Data dictionary specification d. Site view specification e. Style guidelines specification f. Acceptance tests specification 114 WebML
  115. 115. 1.2.a Group specification Clustering of users into groups (formally described) Group Group name: Mar-Com Manager Description: Description: marketing and communication personnel inserting, modifying, and deleting mkt materials. Groups Profile data: First name, last name, email, office address. Hierarchy: Profile data are provided explicitly by the user. Super-group: Corporate. Corporate Sub-groups: None. Relevant use “Login”, “Add a news item”, “Modify a news item”, cases: “Delete a news item”, “Add a news category”, “Modify a news category”, “Delete a news category”, Mar-Com Supervisor "Modify profile data". manager Objects - read Product and Product News. mode: Objects - content Product News. mgmt mode: Admin 115 WebML
  116. 116. 1.2.b Use-case specification Formal description of units of interaction with the application by users of a given group (e.g., thru tables or UML diagrams) 1. Use cases list for a user (use case diagram) Add a news Login Add a news item category Modify a news Modify a news item category Remove a Remove a news item news category Mar-Com Manager 116 WebML
  117. 117. 1.2.b Use-case specification 2. Single use case specification (table or activity diagram) Title Login of user belonging to multiple groups User Application Server Database Purpose To express how users with more than one role access the functions of the applications. Initial Request Send Form Pre- A user that belongs to multiple groups is registered. For condition each group, the site view serving the requirements of the group members is defined. Input Credentials Accept Credentials Verify Credentials Post- The user successfully logs into the application and condition accesses the site view corresponding to one of his groups. Select Home Page Elaborate Page Workflow The following steps must be performed: Default Home Page List 1.The user receives an input form asking for username Pages Index of Home and password; 2.The user inputs his credentials; 3.If the credentials are correct, the user is Serve Request authenticated, the list of groups the user belongs to is determined, and the list of names and URLs of the home pages of the Receive Homeof such groups is site view Page displayed to user; chooses one entry from the list, and enters 4.The user view. into the selected site 117 WebML
  118. 118. 1.2.c Data dictionary specification  List of the main information objects identified during data requirements collection  Each entry can be specified by: • Name NewsItem • Synonyms Piece of news • Description A corporate or product piece of news • Sample instances TravelMate 610 launched, 20th June 01 • Properties Title, Body, Image, Date, … • Relationships NewsToProduct • Components None • Super-concept None • Sub-concepts Highlighted news 118 WebML
  119. 119. 1.2.d Site view specification (site map)  IN: list of user groups, list of use cases, data dictionary  OUT: list of needed site views, specified by: • Name • Description • Target User Groups • Implemented use cases • Site view map: a table illustrating the different areas that compose the site view. Each area is specified by:  Area Name  Area Description  Accessed/Managed Objects  Priority level 119 WebML
  120. 120. Site View News Content Management Description 1.2.d Site view inserting or updating contentexample content management functions, for specification about news categories and Includes the pages through which the Mar-Com Managers will access news items. User Groups Mar-Com Managers Use Cases “Login”, “Add a news category”, “Edit a news category”, “Remove a news category”, “Add a news item”, “Edit a news item”, “Remove a news item”. Site View Map Area Name Area Description Objects Priority News Content In the default page, the user accesses the list of NewsCategory High Management countries for which he is content manager and selects NewsItem a country to administer. In the News Category page, the user accesses the list of news categories for the selected country. Here, the user can perform content management functions over news categories, according to the use cases “Add a news category”, “Edit a news category”, “Remove a news category”. Otherwise, he can select one category, and access the list of the available news items in the selected category. In the News page, the user can perform content management functions over a selected news item according to the use cases “Add a news item”, “Edit a “Remove a news item”. news item”, 120 WebML
  121. 121. 1.2.e Style guidelines specification Rules for the presentation of pages:  Specification of standard page grids: rows, columns and cells arrangement  Content positioning specification: banners, logo, menus positioning  Graphical guidelines: rules for graphic items like fonts, colors, borders and margins  Device-specific and browser-specific guidelines  Example: Mock-ups: sample representations of a few typical application pages (for a specific device and rendition language) 121 WebML
  122. 122. 1.2.e Style guidelines specification Page grid: Content positioning: Graphical guidelines: 122 WebML
  123. 123. 1.2.e Acceptance tests specification Formalization into a plan of acceptance tests of non-functional requirements about: performance availability scalability security maintainability 123 WebML
  124. 124. 2. Data design  2.1. Core subschema  2.2. Access subschema  2.3. Interconnection subschema  2.4. Personalization subschema 124 WebML
  125. 125. 2. Data Design  IN: data dictionary, site map, functional requirements, user requirements  OUT: formal Data model (E-R schema)  Data design: • clarifies application requirements • feedbacks hypertext design • can be influenced by pre-existing data schemas (possibly not designed for hypertextual applications)  Two different situations can be faced: • data store does not exist and must be designed together with the Web application • content managed by the Web application already exists (totally or in part) and is managed by some data repository 125 WebML
  126. 126. 2. Data Design: entities classification (1)  Core objects: • the essential assets managed by the application • form the backbone of the Entity-Relationships schema • may require more than a single entity to be represented (due to complex properties and components) • core sub-schemas are sets of entities correlated by relationships, collectively representing one core concept  Interconnection objects: • the semantic associations between core concepts • are used to construct links and indexes for navigation • consist of E-R relationships 126 WebML
  127. 127. 2. Data Design: entities classification (2)  Access objects: • are auxiliary objects used to classify or specialize the core objects, with the purpose of facilitating access by means of:  categorization over the core objects  more precise keyword-based search mechanisms  collections of most representative objects • are mapped into entities, connected to the core entities. • access sub-schemas: the same core object may be categorized or specialized in different ways  Personalization objects: • the properties of the user, needed for personalization • entities may be used to model user profile data and the groups in which users are clustered • relationships (ownership, preference,…) may connect user and group to the applicative entities 127 WebML
  128. 128. 2. Data Design: entities classification (3) User Group CoreEntity1 CoreEntity2 Personalization sub-schema Core sub-schema Connection sub-schema Access sub-schema 128 WebML
  129. 129. 2.1. Core subschema  Core entity identification: from data dictionary and the other requirements NewsItem Product  Detailed design of core subschema: attributes, components and relationships NewsItem Logo Product TechSpecItem Headline Name 0:N Name 1:1 Description SubHeadline Image DescriptionShort Highlighted Date DescriptionLong TextDate 0:N ImageSmall 0:N Place ImageNormal Award OnlineDate ImageLarge 0:N Product CutoffDate Name PDFBrochure Date 1:1 0:N FlashPresentation Configuration PDF PDFName Logo PDFCertificate ModelName Body 0:N Notes 1:1 PartNumber Image GIFTechSpecs Description Highlighted Benefit BrochureThumbnail Price Summary Description 1:1 Availability DescriptionLong 129 WebML