METODOLOGIE ORIENTOVANÉ NA TVORBU WEBOVÝCH SÍDEL Ing. Martin Molhanec, CSc. Úvod • Metodologie pro tvorbu webových sídel jsou specifickou podmnožinou softwarového inženýrství. • Navazují na metodologie pro tvorbu hypermediálních/hypertextových aplikací. • Jejich.
Download ReportTranscript METODOLOGIE ORIENTOVANÉ NA TVORBU WEBOVÝCH SÍDEL Ing. Martin Molhanec, CSc. Úvod • Metodologie pro tvorbu webových sídel jsou specifickou podmnožinou softwarového inženýrství. • Navazují na metodologie pro tvorbu hypermediálních/hypertextových aplikací. • Jejich.
Slide 1
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 2
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 3
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 4
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 5
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 6
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 7
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 8
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 9
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 10
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 11
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 12
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 13
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 14
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 15
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 16
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 17
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 18
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 19
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 20
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 21
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 22
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 23
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 24
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 25
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 26
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 27
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 28
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 29
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 30
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 31
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 32
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 33
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 34
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 35
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 36
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 37
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 38
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 39
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 40
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 41
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 42
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 43
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 44
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 45
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 46
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 47
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 48
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 49
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 50
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 51
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 52
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 53
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 54
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 55
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 56
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 57
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 58
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 59
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 60
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 61
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 62
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 63
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 2
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 3
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 4
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 5
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 6
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 7
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 8
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 9
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 10
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 11
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 12
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 13
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 14
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 15
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 16
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 17
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 18
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 19
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 20
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 21
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 22
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 23
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 24
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 25
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 26
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 27
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 28
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 29
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 30
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 31
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 32
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 33
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 34
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 35
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 36
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 37
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 38
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 39
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 40
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 41
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 42
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 43
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 44
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 45
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 46
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 47
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 48
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 49
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 50
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 51
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 52
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 53
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 54
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 55
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 56
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 57
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 58
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 59
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 60
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 61
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 62
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!
Slide 63
METODOLOGIE
ORIENTOVANÉ
NA TVORBU
WEBOVÝCH
SÍDEL
Ing. Martin Molhanec, CSc.
Úvod
• Metodologie pro tvorbu webových sídel
jsou specifickou podmnožinou
softwarového inženýrství.
• Navazují na metodologie pro tvorbu
hypermediálních/hypertextových aplikací.
• Jejich znalost není všeobecně rozšířená!
• Poskytují cestu pro automatizovanou
tvorbu webových aplikací.
RMM – Relationship
Management Methodology
• Isakowitz, Stohr, Balasubramanian (1995)
• Hlavní kroky matodologie
–
–
–
–
–
–
–
1. Entity-Relational Design
2. Slice Design
3. Navigational Design
4. User Interface Design
5. Protocol Conversion Design
6. Run-Time Behaviour
7. Construction and Testing
RMM – Relationship
Management Methodology
• Základem je RMDM (Relationship Management
Data Model), podobný ER modelům.
• Slice Design, který definuje jakési pohledy na
RMDM.
• Navigační návrh – definuje pohyb uživatele po
aplikaci.
– Index, Guided Tour, Indexed Guided Tour, Grouping,
Link.
• RMCase – pro podporu analýzy a návrhu
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMM – Relationship
Management Methodology
RMDM – Relational
Management data Model
RMM – Relationship
Management Methodology
OOHDM – Object Oriented
Hypermedia Design Method
• Rossi a Schwabe (1996, 1998)
• Nahradila starší HDM metodologii, je ale ve
skutečnosti úplně novou metodologií.
• Byla podrobněji prezentována na této konferenci a
na konferenci Objekty.
• Kroky metodologie:
–
–
–
–
Konceptuální modelování
Návrh navigace
Návrh abstraktního rozhraní
Implementace
OOHDM
vztahy mezi jeho částmi
Konceptuální diagram
Schéma navigačních tříd
Typy kontextů
• Simple class based – splňují objekty, které jsou
téže třídy C a jsou vybrány prostřednictvím
atributu P, který splňuje danou podmínku.
Například „all Stories“ pokud je P vždy pravdivé.
• Class based group – je množina kontextů, které
jsou typu Simple class based. Například „Stories
by type“ je skupina kontextů, kde každý
jednotlivý kontext je Story určitého typu.
Typy kontextů
• Link based – objekty v tomto kontextu jsou stejné
třídy a jsou vybrány prostřednictvím vztahu 1:M.
Například „all Stories by Bob Woodward“.
• Link based group – je množina kontextů, kde
každý z nich je Link based. Například „Stories by
Author“.
• Enumarated – v tomto případě jsou jednotlivé
elementy kontextu jmenovitě vyjmenovány.
OOHDM – Object Oriented
Hypermedia Design Method
Diagram navigačního kontextu
Návrh abstraktního
rozhraní
• Zabývá se aspekty uživatelského rozhraní
• Je oddělena od navigace, čili jedna
navigace může mít několik rozhraní!
• V praxi jsme často omezeni určitým
vývojovým prostředím
Návrh abstraktního
rozhraní
• ADV (Abstract Data View) jsou
objekty popisující uživatelské
rozhraní, popisují svůj stav a
rozhraní, nikoliv svoji implementaci!
• ADV mohou obsahovat jiné ADV
• Je také možné využívat hierarchie
ADV diagramy
Vztah ADV diagramu a skutečné
stránky
OOHDM-Web
nástroj pro podporu
• OOHDM analýza
• CGILua – skriptovací nástroj pro vytváření
dynamických stránek
• Lua – jazyk skriptů
Nevýhoda: dokumentace je jenom
v portugalštině
WebML – Web
Modeling Language
• Politechnika v Miláně
• Rozsáhlý projekt se zřejmým komerčním
záměrem
• Základem jsou následující modely:
–
–
–
–
Strukturální model (Structural Model)
Hypertextový model (Hypertext Model)
Prezentační model (Presentational Model)
Uživatelský model (Personalization Model)
Strukturální model
• Jedná se ve skutečnosti o obvyklé datové
modelování. Lze použit libovolný ER nebo
OO konceptuální datový model.
• Pro podporu dotazování do databáze se
využívá dotazovací jazyk WebML-OQL,
který vychází z jazyka OQL (Object
Query Language).
Strukturální model
Hypertextový model
• Skládá se ze dvou modelů, které se kreslí
do jednoho diagramu
– Kompoziční model, který popisuje z jakých
prvků se stránka skládá: data, multi-data,
index, filter, scroller a direct unit
– Navigační model, který zobrazuje navigaci mezi
jednotlivými stránkami pomocí odkazů, které
jsou: kontextové nebo bezkontextové.
Tento prvek slouží pro publikování (zobrazení) jednoho
objektu (řádky) dané třídy (entity, tabulky). Například
údaje o jednom konkrétním zpěvákovi z databáze
zpěváků. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Tento prvek slouží pro publikování několika objektů v
rámci jedné stránky. Například přehled zboží z databáze
skladu. Způsob zobrazení může být libovolný, toto není
věc hypertextového modelu, ale modelu presentačního.
Nejčastěji se jedná o prvky typu grid, browser, atp.
Index představuje publikování několika objektů entity
jako seznamu. Například seznam zboží. Po kliknutí na
položku indexu se uskuteční akce navigace, například
přechod na stránku s detailními informacemi o vybraném
zboží.
Varianta Indexu, kdy je každý prvek seznamu spojen se
zaklikávacím boxem. Tento prvek obsahuje dále tlačítko
pro odeslání. Při odeslání se uskuteční akce navigace na
jinou webovou stránku. Při této navigaci se informace o
zaškrtnutých prvcích tohoto prvku přenáší jako
parametry navigace do další stránky..
Prvek, který umožňuje krokovat (procházet se) mezi
objekty dané entity. Obsahuje obvyklé možnosti vpřed a
vzad, případně na začátek a na konec.
Prvek, který představuje vstupní formulář. Slouží pro
zadávání údajů. Po odeslání následuje akce navigace na
další stránku. Vložené údaje se přenášejí jako parametry
navigace a jsou zpracovány následující stránkou.
Ukážeme si postupně!
Toto je vlastní diagram!
Toto je jednoduché
grafické znázornění
případných stránek.
Stránka zobrazující seznam
zpěváků.
Stránka zobrazující informace o
jednom zpěvákovi a přetáčecí
prvek.
Odkaz mezi
dvěma
stránkami.
Odkaz v rámci
jedné stránky.
Složitější příklad.
Ukážeme si po jednotlivých
částech!
Stránka
zobrazuje
seznam všech
zpěváků.
Stránka
zobrazuje údaje
o jednom
zpěvákovi.
Odkaz mezi
dvěma
stránkami.
Tento prvek
zobrazuje
stručné údaje o
jednom
zpěvákovi.
Tento element
zobrazuje seznam alb
jednoho zpěváka.
Odkaz v rámci
jedné stránky.
Stránka, která
zobrazuje údaje
o jednom albu.
Element, který
zobrazuje údaje
o jednom albu.
Element
zobrazuje
seznam
hudebníků.
Element
zobrazuje
seznam skladeb
na albu.
Element
zobrazuje
stručná data o
zpěvákovi.
Odkazy
Odkaz vvrámci
rámci
jedné stránky.
Jak se Vám to líbilo ?
Zdá se Vám notace
WebML užitečná?
Uživatelský model
• Modeluje uživatele, kteří s webovým sídlem
pracují.
• Modeluje práva uživatelů k jednotlivým
informacím, které jsou webovým sídlem
poskytovány.
• Využívá objektovou modelovací techniku s
notací UML.
Uživatelský
model
Objektový model
uživatelů systému
(webového sídla).
Prezentační model
• Modeluje vzhled a chování
jednotlivých prvků webových
stránek nezávisle na výstupním
zařízení (HTML 3.2, HTML 4,
WAP, … ).
• Využívá technologie XSLT.
• Pro její využití je nutné vývojové
prostředí, které podporuje tento
model.
• Toto prostředí poskytuje
například produkt firmy
WebRatio.
Development process
• Site Designer
– Umožňuje vytvořit strukturální, hypertextový a
uživatelský model.
• Presentational Designer
– Umožňuje navrhovat vzhled a polohu prvků na
webové stránce.
• Site manager
– Nástroj, který umí sídlo instalovat a spravovat.
Development process
Závěr přednášky
• Aktuální problematika – návrh webových
sídel.
• Teoreticky propracovaná – stále se
rozvíjí.
• Zahrnuje moderní prvky – například
XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Metodologie podobného druhu
jsou nesmírně důležité!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Aktuální problematika – návrh webových sídel.
• Teoreticky propracovaná – stále se rozvíjí.
Jinak je návrh webových sídel
amatérský a nikoliv
inženýrský!
• Zahrnuje moderní prvky – například XML.
• Staví na standardech – UML.
Závěr přednášky
• Falešné ikony
– Grafika – čím úžasnější, tím lepší, vždyť
webové sídlo je přeci umění!
– Technologie – je lepší ASP, PHP, .NET, Perl,
Apache, IIS nebo JSP?
– Business – udělej si webové sídlo a vydělávej,
vyrábět nic nemusíš, jenom obchoduj!
• Bohužel, činnosti jako analýza, projektové
řízení, kvalita, údržba a testování, které
jsou pro skutečný a trvalý úspěch daleko
potřebnější přicházejí vniveč.
Závěr přednášky
• Svět metodologií pro návrh webových
sídel je velice bohatý.
• Jejich nepoužívání je odpovědí na
otázku proč tolik webových sídel je
špatně navrženo!