modelling a web site using webml: an example
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/1.jpg)
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
![Page 2: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/2.jpg)
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
![Page 3: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/3.jpg)
Description
• 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
The site to be modeled is the one of boo.com, aSwedish streetwear e-tailer, who sells worlwide.The analisys will cover the collections of wears.
![Page 4: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/4.jpg)
Site modelling: step1
![Page 5: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/5.jpg)
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>
![Page 6: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/6.jpg)
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>
![Page 7: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/7.jpg)
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>
![Page 8: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/8.jpg)
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>
![Page 9: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/9.jpg)
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>
![Page 10: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/10.jpg)
Structure Schema
Shelf
Avatar
Wear1:N0:N
1:1
1:1 1:1
1:1
1:1
1:1
Spin Zoom
Dress-room
![Page 11: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/11.jpg)
Site modelling: step2
![Page 12: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/12.jpg)
Composition: Shelves /1
• Shelves are first-class objects
• A data unit is provided
• The data unit includes some attributes
ShelfInfo
Shelf
![Page 13: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/13.jpg)
ShelfInfo: attributes
ShelfName
NumberOfWears
![Page 14: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/14.jpg)
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
rel:Shelf2Wear
WearIndex
![Page 15: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/15.jpg)
WearIndex: included attributes
Brand Name
Price
Picture
![Page 16: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/16.jpg)
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 into the shelf entity
<ENTITY id=“Shelf”> ... <ATTRIBUTE id=“ImpWearBrand” type=“String” value=“Self.Shelf2Wear.Brand”/> ...</ENTITY>
![Page 17: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/17.jpg)
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
ShelfInfo
Shelf
ShelfIndex
ShelfShelf
key=ImpWearBrand
ShelfPage
ShelfScroller
rel:Shelf2Wear
WearIndex
![Page 18: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/18.jpg)
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”/>
![Page 19: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/19.jpg)
Page: XML syntax
<PAGE id=“ShelfPage”> <UNIT unitid=“ShelfInfo”/> <UNIT unitid=“WearIndex”/> <UNIT unitid=“ShelfIndex”/> <UNIT unitid=“ShelfScroller”/></PAGE>
![Page 20: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/20.jpg)
Composition: Wears• Wears are first-class objects• A data unit is 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-roomWearInfo
Wear rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
![Page 21: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/21.jpg)
WearInfo: attributesBrand
Name
Description
Picture
Size
Sex
ColoursPrice
![Page 22: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/22.jpg)
Indexes: included attribute
UserSex
![Page 23: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/23.jpg)
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
WearInfo
Wear
WearPage
rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
![Page 24: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/24.jpg)
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>
![Page 25: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/25.jpg)
Page: XML syntax
<PAGE id=“WearPage”> <UNIT unitid=“WearInfo”/> <UNIT unitid=“DressRoomIndex”/> <UNIT unitid=“ZoomIndex”/> <UNIT unitid=“SpinIndex”/></PAGE>
![Page 26: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/26.jpg)
Composition: Dress-Room
• Each wear can be tried in a dress-room
• A data unit includes some attributes of the dress-room
• The data unit is enclosed into a page
Dress-RoomInfo
Dress-Room
Dress-RoomPage
![Page 27: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/27.jpg)
Dress-RoomInfo: attributes
Model
Item2Try
![Page 28: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/28.jpg)
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>
![Page 29: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/29.jpg)
Composition: Zoom
• For each wear there is a zoom (zoomable image)
• A data unit includes one attribute of zoom
• The data unit is enclosed into a page
ZoomInfo
Zoom
ZoomPage
![Page 30: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/30.jpg)
ZoomInfo: attributes
ItemPicture
![Page 31: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/31.jpg)
Unit, Page: XML syntax
<DATAUNIT id=“ZoomInfo” entity=“Zoom”> <INCLUDE attribute=“ItemPicture”/></DATAUNIT>
<PAGE id=“ZoomPage”> <UNIT unitid=“ZoomInfo”/></PAGE>
![Page 32: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/32.jpg)
Composition: Spin
• For each wear there is a spin (rotable image)
• A data unit includes one attribute of spin
• The data unit is enclosed into a page
SpinInfo
Spin
SpinPage
![Page 33: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/33.jpg)
SpinInfo: attributes
ItemPicture
![Page 34: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/34.jpg)
Unit, Page: XML syntax
<DATAUNIT id=“SpinInfo” entity=“Spin”> <INCLUDE attribute=“ItemPicture”/></DATAUNIT>
<PAGE id=“SpinPage”> <UNIT unitid=“SpinInfo”/></PAGE>
![Page 35: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/35.jpg)
Composition: Avatar• The avatar is always present to help (the
shelf and wear page are “AND-composed” with the avatar page)
• A data unit includes all attributes of avatar• The data unit is enclosed into a page
AvatarInfo
Avatar
AvatarPage
![Page 36: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/36.jpg)
AvatarInfo: attributes
BalloonSuggestion
AvatarPix
![Page 37: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/37.jpg)
Unit, Page: XML syntax
<DATAUNIT id=“AvatarInfo” entity=“Avatar”> <INCLUDEALL/></DATAUNIT>
<PAGE id=“AvatarPage”> <UNIT unitid=“AvatarInfo”/></PAGE>
![Page 38: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/38.jpg)
Composition: summary /1ShelfInfo
Shelf
ShelfIndex
ShelfShelf
key=ImpWearBrand
ShelfPage
ShelfScroller
rel:Shelf2Wear
WearIndex
AvatarInfo
Avatar
AvatarPage
![Page 39: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/39.jpg)
Compositon: summary /2
AvatarInfo
Avatar
AvatarPage
WearInfo
Wear
WearPage
rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
![Page 40: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/40.jpg)
Composition: summary /3
Dress-RoomInfo
Dress-Room
Dress-RoomPage
ZoomInfo
Zoom
ZoomPage
SpinInfo
Spin
SpinPage
![Page 41: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/41.jpg)
Site modelling: step3
![Page 42: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/42.jpg)
From Shelf to Wears• Navigation from a shelf to a wear is very
easy given the WearIndex in the shelf pageShelfInfo
Shelf
ShelfIndex
ShelfShelf
key=ImpWearBrand
ShelfPage
ShelfScroller
rel:Shelf2Wear
WearIndex
WearInfo
Wear
WearPage
rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
![Page 43: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/43.jpg)
From Wear to Shelf• Starting from a wear’s page it is possible to reach a shelf
through a multiindex page composed of three indexes, each one using a different attribute of shelf
• After the index search, the page of a shelf must be shown
multiindex
Type
Sex
Category
![Page 44: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/44.jpg)
ShelfIndex1
rel:Wear2Shelf
key=CategoryShelfIndex2
rel:Wear2Shelf
key=Type
ShelfIndex3
rel:Wear2Shelf
key=Sex
ShelfInfo
Shelf
ShelfIndex
ShelfShelf
key=ImpWearBrand
ShelfPage
ShelfScroller
rel:Shelf2Wear
WearIndex
From Wear to
Shelf
WearInfo
Wear
WearPage
rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
MultiIndexPage
![Page 45: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/45.jpg)
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
![Page 46: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/46.jpg)
ShelfIndex1
rel:Wear2Shelf
key=Category
ShelfIndex2
rel:Wear2Shelf
key=Type
ShelfIndex3
rel:Wear2Shelf
key=Sex
ShelfFilter
Shelf
ShelfIndex
ShelfShelf
key=ImpWearBrand
ShelfPage
ShelfScroller
rel:Shelf2Wear
WearIndex
From Wear to
ShelfShelf
MultiIndexPage
QuickSearchPage
ShelfInfo
(from WearPage)
![Page 47: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/47.jpg)
QuickSearch Page
![Page 48: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/48.jpg)
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”
Dress-RoomInfo
Dress-Room
Dress-RoomPageZoomInfo
Zoom
ZoomPageSpinInfo
Spin
SpinPage
WearInfo
Wear
WearPage
rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
![Page 49: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/49.jpg)
AND-composed pages, an example: a wear and its spin (and the avatar)
![Page 50: Modelling a web site using WebML: an example](https://reader036.vdocument.in/reader036/viewer/2022062516/56812af9550346895d8ee0ec/html5/thumbnails/50.jpg)