modelling a web site using webml: an example davide pozzi - corso di basi di dati 2 politecnico di...
TRANSCRIPT
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
• This analisys does not want to be exhaustive, only some parts of the site will be examined
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.
Site modelling: step1
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>
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>
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>
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>
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>
Structure Schema
Shelf
Avatar
Wear1:N0:N
1:1
1:1 1:1
1:1
1:1
1:1
Spin Zoom
Dress-room
Site modelling: step2
Composition: Shelves /1
• Shelves are first-class objects
• A data unit is provided
• The data unit includes some attributes
ShelfInfo
Shelf
ShelfInfo: attributes
ShelfName
NumberOfWears
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
WearIndex: included attributes
Brand Name
Price
Picture
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>
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
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: XML syntax
<PAGE id=“ShelfPage”> <UNIT unitid=“ShelfInfo”/> <UNIT unitid=“WearIndex”/> <UNIT unitid=“ShelfIndex”/> <UNIT unitid=“ShelfScroller”/></PAGE>
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
WearInfo: attributesBrand
Name
Description
Picture
Size
Sex
ColoursPrice
Indexes: included attribute
UserSex
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
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: XML syntax
<PAGE id=“WearPage”> <UNIT unitid=“WearInfo”/> <UNIT unitid=“DressRoomIndex”/> <UNIT unitid=“ZoomIndex”/> <UNIT unitid=“SpinIndex”/></PAGE>
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
Dress-RoomInfo: attributes
Model
Item2Try
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>
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
ZoomInfo: attributes
ItemPicture
Unit, Page: XML syntax
<DATAUNIT id=“ZoomInfo” entity=“Zoom”> <INCLUDE attribute=“ItemPicture”/></DATAUNIT>
<PAGE id=“ZoomPage”> <UNIT unitid=“ZoomInfo”/></PAGE>
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
SpinInfo: attributes
ItemPicture
Unit, Page: XML syntax
<DATAUNIT id=“SpinInfo” entity=“Spin”> <INCLUDE attribute=“ItemPicture”/></DATAUNIT>
<PAGE id=“SpinPage”> <UNIT unitid=“SpinInfo”/></PAGE>
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
AvatarInfo: attributes
BalloonSuggestion
AvatarPix
Unit, Page: XML syntax
<DATAUNIT id=“AvatarInfo” entity=“Avatar”> <INCLUDEALL/></DATAUNIT>
<PAGE id=“AvatarPage”> <UNIT unitid=“AvatarInfo”/></PAGE>
Composition: summary /1ShelfInfo
Shelf
ShelfIndex
ShelfShelf
key=ImpWearBrand
ShelfPage
ShelfScroller
rel:Shelf2Wear
WearIndex
AvatarInfo
Avatar
AvatarPage
Compositon: summary /2
AvatarInfo
Avatar
AvatarPage
WearInfo
Wear
WearPage
rel:Wear2Zoom
key=UserSexZoomIndex
rel:Wear2Spin
key=UserSexSpinIndex
rel:Wear2Dress-room
key=UserSexDressRoomIndex
Composition: summary /3
Dress-RoomInfo
Dress-Room
Dress-RoomPage
ZoomInfo
Zoom
ZoomPage
SpinInfo
Spin
SpinPage
Site modelling: step3
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
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
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
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
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)
QuickSearch Page
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
AND-composed pages, an example: a wear and its spin (and the avatar)