1 / 50

Modelling a web site using WebML: an example

Modelling a web site using WebML: an example. www.boo.com Davide Pozzi - corso di Basi di Dati 2 Politecnico di Milano Facoltà di Ingegneria di Como. Objectives of this work. Analysis of an existing web site using WebML

dawnhernandez
Download Presentation

Modelling a web site using WebML: an example

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. Modelling a web site using WebML: an example www.boo.com Davide Pozzi - corso di Basi di Dati 2 Politecnico di Milano Facoltà di Ingegneria di Como

  2. Objectives of this work • Analysis of an existing web site using WebML • This analisys does not want to be exhaustive, only some parts of the site will be examined

  3. Description The site to be modeled is the one of boo.com, a Swedish streetwear e-tailer, who sells worlwide. The analisys will cover the collections of wears. • BOO.COM presents various shelves • Each shelf contains wears • For each wear there is a user-controlled rotable-image and zoomable-image • Each wear has a dress-room to try it on • There is a little avatar, Miss Boo, who guides users of the site giving them suggestions

  4. Site modelling: step1 Structure

  5. Structure: Shelf • A shelf contains many wears <ENTITY id=“Shelf”> <ATTRIBUTE id=“ShelfName” type=“Image”/> <ATTRIBUTE id=“NumberOfWears” type=“Integer”/> <ATTRIBUTE id=“Category” type=“Text”/> <ATTRIBUTE id=“Type” type=“Text”/> <ATTRIBUTE id=“Sex” type=“Image”/> <RELATIONSHIP id=“Shelf2Wear” to=“Wear” inverse=“Wear2Shelf” mincard=“0” maxcard=“N”/> </ENTITY>

  6. Structure: Wear • Wear is an entity <ENTITY id=“Wear”> <ATTRIBUTE id=“Name” type=“Text”/> <ATTRIBUTE id=“Description” type=“Text”/> <ATTRIBUTE id=“Sex” type=“Image”/> <ATTRIBUTE id=“Picture” type=“Image”/> <ATTRIBUTE id=“Price” type=“Float”/> <ATTRIBUTE id=“Colour” type=“Image”/> <ATTRIBUTE id=“Size” type=“Text”/> <ATTRIBUTE id=“Brand” type=“Text”/> <RELATIONSHIP id=“Wear2Shelf” to=“Shelf” inverse=“Shelf2Wear” mincard=“1” maxcard=“N”/> <RELATIONSHIP id=“Wear2Dress-room” to=“Dress-room” inverse=“Dress-room2Wear” mincard=“1” maxcard=“1”/> <RELATIONSHIP id=“Wear2Zoom” to=“Zoom” inverse=“Zoom2Wear” mincard=“1” maxcard=“1”/> <RELATIONSHIP id=“Wear2Spin” to=“Spin” inverse=“Spin2Wear” mincard=“1” maxcard=“1”/> </ENTITY>

  7. Structure: Dress-Room • Dress-Room is an entity <ENTITY id=“Dress-room”> <ATTRIBUTE id=“Item2Try” type=“Image”/> <ATTRIBUTE id=“Model” type=“Image”/> <ATTRIBUTE id=“UserSex” type=“Text”/> <RELATIONSHIP id=“Dress-room2Wear” to=“Wear” inverse=“Wear2Dress-room” mincard=“1” maxcard=“1”/> </ENTITY>

  8. Structure: Zoom and Spin • Zoom is an entity (representing a zoomable image) • Spin is an entity (representing a rotable image) <ENTITY id=“Zoom”> <ATTRIBUTE id=“ItemPicture” type=“Image”/> <ATTRIBUTE id=“UserSex” type=“Text”/> <RELATIONSHIP id=“Zoom2Wear” to=“Wear” inverse=“Wear2Zoom” mincard=“1” maxcard=“1”/> </ENTITY> <ENTITY id=“Spin”> <ATTRIBUTE id=“ItemPicture” type=“Image”/> <ATTRIBUTE id=“UserSex” type=“Text”/> <RELATIONSHIP id=“Spin2Wear” to=“Wear” inverse=“Wear2Spin” mincard=“1” maxcard=“1”/> </ENTITY>

  9. Structure: Avatar • Avatar is an entity <ENTITY id=“Avatar”> <ATTRIBUTE id=“AvatarPix” type=“Image”/> <ATTRIBUTE id=“Suggestion” type=“Text”/> <ATTRIBUTE id=“Balloon” type=“Image”/> </ENTITY>

  10. Structure Schema 1:N 0:N Shelf Wear 1:1 1:1 1:1 1:1 Dress-room 1:1 1:1 Avatar Spin Zoom

  11. Site modelling: step2 Composition

  12. Composition: Shelves /1 • Shelves are first-classobjects • A data unit is provided • The data unit includes some attributes ShelfInfo Shelf

  13. ShelfInfo: attributes ShelfName NumberOfWears

  14. Composition: Shelves /2 • Each shelf is related with wears (by means of the Shelf2Wear relation) • An index unit is provided • The index unit uses some attributes of wear WearIndex rel:Shelf2Wear

  15. WearIndex: included attributes Picture Price Brand Name

  16. Shelf Page • In the shelf page there may be an index and a scroller of the shelves subdivided by wear brand, so we have to include a scroller unit and an index unit, this one with the brand attribute of wear as key • To be included into the index unit, the wear brand attribute must be first imported intothe shelf entity <ENTITY id=“Shelf”> ... <ATTRIBUTE id=“ImpWearBrand” type=“String” value=“Self.Shelf2Wear.Brand”/> ... </ENTITY>

  17. Shelf Page • The same page shows a shelf (with shelf scroller and index) and its wear index • The page is composed including the data unit, two index unit and a scroller unit ShelfPage ShelfInfo WearIndex key=ImpWearBrand ShelfScroller ShelfIndex Shelf rel:Shelf2Wear Shelf Shelf

  18. Units: XML syntax <DATAUNIT id=“ShelfInfo” entity=“Shelf”> <INCLUDE attribute=“ShelfName”/> <INCLUDE attribute=“NumberOfWears”/> </DATAUNIT> <INDEXUNIT id=“WearIndex” relation=“Shelf2Wear”/> <DESCRIPTION Key=“Code”/> <!--ipotesi: se così fosse servirebbe l’attributo “Code” in Wear--> </INDEXUNIT> <INDEXUNIT id=“ShelfIndex” entity=“Shelf”/> <DESCRIPTION Key=“ImpWearBrand”/> </INDEXUNIT> <SCROLLERUNIT id=“ShelfScroller” entity=“Shelf” fist=“no” last=“no” previous=“yes” next=“yes”/>

  19. Page: XML syntax <PAGE id=“ShelfPage”> <UNIT unitid=“ShelfInfo”/> <UNIT unitid=“WearIndex”/> <UNIT unitid=“ShelfIndex”/> <UNIT unitid=“ShelfScroller”/> </PAGE>

  20. Composition: Wears • Wears are first-class objects • A data unitis provided, which includes all attributes • Three index units are provided, for the relations Wear2Zoom, Wear2Spin, Wear2Dress-Room. • Each index uses one attribute of zoom, spin and dress-room key=UserSex key=UserSex key=UserSex WearInfo ZoomIndex SpinIndex DressRoomIndex Wear rel:Wear2Zoom rel:Wear2Spin rel:Wear2Dress-room

  21. WearInfo: attributes Brand Name Description Picture Sex Price Colours Size

  22. Indexes: included attribute UserSex

  23. WearPage • The same page shows all wear attributes and the indexes of zooms, spins and dress-rooms • The page is composed including one data unit and three index units key=UserSex WearPage DressRoomIndex key=UserSex key=UserSex WearInfo ZoomIndex SpinIndex rel:Wear2Dress-room Wear rel:Wear2Zoom rel:Wear2Spin

  24. Units: XML syntax <DATAUNIT id=“WearInfo” entity=“Wear”> <INCLUDEALL/> </DATAUNIT> <INDEXUNIT id=“ZoomIndex” entity=“Zoom”/> <DESCRIPTION Key=“UserSex”/> </INDEXUNIT> <INDEXUNIT id=“SpinIndex” entity=“Spin”/> <DESCRIPTION Key=“UserSex”/> </INDEXUNIT> <INDEXUNIT id=“DressRoomIndex” entity=“Dress-Room”/> <DESCRIPTION Key=“UserSex”/> </INDEXUNIT>

  25. Page: XML syntax <PAGE id=“WearPage”> <UNIT unitid=“WearInfo”/> <UNIT unitid=“DressRoomIndex”/> <UNIT unitid=“ZoomIndex”/> <UNIT unitid=“SpinIndex”/> </PAGE>

  26. Composition: Dress-Room • Each wear can be tried in a dress-room • A data unitincludes some attributes of the dress-room • The data unit is enclosed into a page Dress-RoomPage Dress-RoomInfo Dress-Room

  27. Dress-RoomInfo: attributes Item2Try Model

  28. Unit, Page: XML syntax <DATAUNIT id=“Dress-RoomInfo” entity=“Dress-Room”> <INCLUDE attribute=“Model”/> <INCLUDE attribute=“Item2Try”/> </DATAUNIT> <PAGE id=“Dress-RoomPage”> <UNIT unitid=“Dress-RoomInfo”/> </PAGE>

  29. Composition: Zoom • For each wear there is a zoom (zoomable image) • A data unitincludes one attribute of zoom • The data unit is enclosed into a page ZoomPage ZoomInfo Zoom

  30. ZoomInfo: attributes ItemPicture

  31. Unit, Page: XML syntax <DATAUNIT id=“ZoomInfo” entity=“Zoom”> <INCLUDE attribute=“ItemPicture”/> </DATAUNIT> <PAGE id=“ZoomPage”> <UNIT unitid=“ZoomInfo”/> </PAGE>

  32. Composition: Spin • For each wear there is a spin (rotable image) • A data unitincludes one attribute of spin • The data unit is enclosed into a page SpinPage SpinInfo Spin

  33. SpinInfo: attributes ItemPicture

  34. Unit, Page: XML syntax <DATAUNIT id=“SpinInfo” entity=“Spin”> <INCLUDE attribute=“ItemPicture”/> </DATAUNIT> <PAGE id=“SpinPage”> <UNIT unitid=“SpinInfo”/> </PAGE>

  35. Composition: Avatar • The avatar is always present to help (the shelf and wear page are “AND-composed” with the avatar page) • A data unitincludes all attributes of avatar • The data unit is enclosed into a page AvatarPage AvatarInfo Avatar

  36. AvatarInfo: attributes Balloon Suggestion AvatarPix

  37. Unit, Page: XML syntax <DATAUNIT id=“AvatarInfo” entity=“Avatar”> <INCLUDEALL/> </DATAUNIT> <PAGE id=“AvatarPage”> <UNIT unitid=“AvatarInfo”/> </PAGE>

  38. Composition: summary /1 ShelfPage ShelfInfo WearIndex key=ImpWearBrand ShelfScroller ShelfIndex Shelf rel:Shelf2Wear Shelf Shelf AvatarPage AvatarInfo Avatar

  39. Compositon: summary /2 key=UserSex WearPage DressRoomIndex key=UserSex key=UserSex WearInfo ZoomIndex SpinIndex rel:Wear2Dress-room Wear rel:Wear2Zoom rel:Wear2Spin AvatarPage AvatarInfo Avatar

  40. Composition: summary /3 Dress-RoomPage ZoomPage Dress-RoomInfo ZoomInfo Dress-Room Zoom SpinPage SpinInfo Spin

  41. Site modelling: step3 Navigation

  42. From Shelf to Wears ShelfPage • Navigation from a shelf to a wear is very easy given the WearIndex in the shelf page ShelfInfo WearIndex key=ImpWearBrand ShelfScroller ShelfIndex Shelf rel:Shelf2Wear Shelf Shelf key=UserSex WearPage DressRoomIndex key=UserSex key=UserSex WearInfo ZoomIndex SpinIndex rel:Wear2Dress-room Wear rel:Wear2Zoom rel:Wear2Spin

  43. From Wear to Shelf • Starting from a wear’s page it is possible to reach a shelf through a multiindex pagecomposed of three indexes, each one using a different attribute of shelf • After the index search, the page of a shelf must be shown Sex Type multiindex Category

  44. key=UserSex WearPage DressRoomIndex key=UserSex key=UserSex WearInfo ZoomIndex SpinIndex rel:Wear2Dress-room Wear rel:Wear2Zoom rel:Wear2Spin From Wear to Shelf MultiIndexPage key=Sex key=Type key=Category ShelfIndex2 ShelfIndex3 ShelfIndex1 rel:Wear2Shelf rel:Wear2Shelf rel:Wear2Shelf ShelfPage ShelfInfo WearIndex key=ImpWearBrand ShelfScroller ShelfIndex Shelf rel:Shelf2Wear Shelf Shelf

  45. From Wear to Shelf • There is another option: starting from a wear’s page it is possible to reach a shelf via a filtered search page (QuickSearch page),connected to the multiindex page via a non contextual link non-contextual link

  46. MultiIndexPage (from WearPage) key=Sex key=Category key=Type ShelfIndex1 ShelfIndex2 ShelfIndex3 rel:Wear2Shelf rel:Wear2Shelf rel:Wear2Shelf From Wear to Shelf QuickSearchPage ShelfFilter Shelf ShelfPage ShelfInfo WearIndex key=ImpWearBrand ShelfScroller ShelfIndex Shelf rel:Shelf2Wear Shelf Shelf

  47. QuickSearch Page

  48. From Wear to Zoom, Spin and Dress-Room • This navigation brings from a wear to its zoom, spin and dress-room • All the pages are “AND-composed” key=UserSex WearPage DressRoomIndex key=UserSex key=UserSex WearInfo ZoomIndex SpinIndex rel:Wear2Dress-room Wear rel:Wear2Zoom rel:Wear2Spin ZoomPage Dress-RoomPage SpinPage ZoomInfo SpinInfo Dress-RoomInfo Dress-Room Zoom Spin

  49. AND-composed pages, an example: a wear and its spin (and the avatar)

  50. The END

More Related