A WSDM weboldal-tervezési módszer a gyakorlatban

A WSDM weboldal-tervezési módszer a

gyakorlatban

Nagy Gusztá[email protected]

2

WebfejlesztésWebfejlesztés

Technikai feladatok:

(X)HTML oldalak szerkesztése

CSS

adatbázis tervezés, megvalósítás

programozás

…

Ezekről sok jó magyar nyelvű forrást találhatunk weben, könyvekben stb.

3

WebfejlesztésWebfejlesztés

Hogyan kezdjek neki egy nagyobb alkalmazás fejlesztésének?

Milyen legyen a kezdőoldal?

Mik kerüljenek egy-egy oldalra?

Milyen navigációs sémát alkalmazzak?

Hogyan kezeljem a különböző érdeklődésű felhasználókat?

stb.

4

Miről lesz szó?Miről lesz szó?

tervezési módszerek röviden

WSDM módszer(Web Site Design Method)

gyakorlati példa:saját oktatói oldalam terve(még nincs kész, csak a terve )

5

Tervezési módszerekTervezési módszerek

1993: HDM (Hypertext Design Model)

1996: W3DT (World Wide Web Design Technique)

1997: WSDM (Web Site Design Method)

2000: WebML (Web Modeling Language)

2001: OOHDM (Object-Oriented Hypermedia Design Method)

6

HDMHDM (Hypertext Design (Hypertext Design Model)Model)

az alapfogalmakat fektette le

bevezeti a modellezésre épülő tervezést

ma nem igazán használják, inkább alapul szolgál a későbbi módszerekhez

Daniel Schwabe

7

W3DT W3DT (World Wide Web (World Wide Web Design Technique)Design Technique)

nagy méretű honlapok tervezése specializálódott

adatbázis-szerű és információ-központú tervezést tesz lehetővé

kezdő tervezők számára is viszonylag könnyen áttekinthető

Dr. Martin Bichler

8

A W3DT fejlesztési A W3DT fejlesztési folyamatafolyamata

forrás: Reinhard Jung, Robert Winter:

Case for Web Sites

9

W3DT meta modellW3DT meta modell

forrás: Reinhard Jung, Robert Winter: Case for Web Sites

10

WebML WebML (Web Modeling (Web Modeling Language)Language)

UML alapokra épít

4 szint:

strukturális modell

hipertext modell

megjelenítési modell

személyre szabott modell

Stefano Ceri

11

WebML strukturális WebML strukturális modell modell

forrás: Stefano Ceri, Piero Fraternali, Maristella Matera:Conceptual modeling of data-intensive Web applications

12

WebML hipertext modell WebML hipertext modell


13

WebML megjelenítési WebML megjelenítési modellmodell


14

OOHDM OOHDM (Object-Oriented (Object-Oriented Hypermedia Design Method)Hypermedia Design Method)

Objektumorientált fogalmakra épít

4 szint:

fogalmi tervezés

navigáció tervezés

elvont felület tervezés

megvalósítási szakasz

Daniel Schwabe

15

OOHDM fogalmi tervezés OOHDM fogalmi tervezés

forrás: Daniel Schwabe, Gustavo Rossi: Developing Hypermedia Applications using OOHDM

16

OOHDM navigáció tervezésOOHDM navigáció tervezés


17

OOHDM elvont felület OOHDM elvont felület tervezés tervezés


18

Az én választásom:Az én választásom:Web Site Design MethodWeb Site Design Method

kiemelkedő a látogatóközpontú megközelítése

a kezdetektől erre épít

(más módszerek viszonylag keveset foglalkoznak vele)

Olga De Troyer

19

MegjegyzésMegjegyzés

A WSDM eredeti jelölései helyett az elterjedtebb UML jelöléseket fogom alkalmazni.

20

A folyamat áttekintéseA folyamat áttekintése

célokmegfogalmazása

felhasználó modellezés

fogalmi tervezés

megvalósítás tervezése

megvalósítás

Célokmegfogalmazása

Célokmegfogalmazása

Felhasználó modellezésFelhasználó modellezés

Felhasználókosztályozása

Felhasználókjellemzése

Fogalmi tervezésFogalmi tervezés

Funkcionális tervezés

Információ- modellezés

Navigáció tervezés

Megvalósítás tervezéseMegvalósítás tervezése

Látvány-tervezés

Oldal-tervezés

Logikai adat-bázis tervezés

MegvalósításMegvalósítás

21

Célok megfogalmazásaCélok megfogalmazása

Ha nincs célod,akkor azt tökéletesen

el fogod érni.

22

Célok megfogalmazásaCélok megfogalmazása

Példa: (saját oktatói oldalam)

Az oldal célja, hogy az oktató minden, az általa tanított hallgatók számára szükséges információt publikálni tudjon.

Másodlagos célként a programozás, webfejlesztés témakörében, vagy az oktató személye iránt érdeklődőkre is gondolhatunk.

23


A felhasználók

különbözőek

nem ugyanaz érdekli őket

nem ugyanarra van jogosultságuk

Fontos a felhasználó-központú oldalkialakítás!


Felhasználókosztályozása

Felhasználókjellemzése

24

Rossz példaRossz példa

www.gamf.hu

Ha egy oktató e-mail címét keresem, hol kezdjem?

25

Jobb példaJobb példa

www.vein.hu

A kezdőoldalon választhatunk.

26

Felhasználók osztályozása Felhasználók osztályozása (csoportosítása)(csoportosítása)

Nem teljesen egyediek a felhasználók, csoportosítsuk őket!

Így a közös szolgáltatások is könnyebben megfogalmazhatók.

(Egyenlőre tekintsünk el az esetleges kisebb eltérésektől.)

27

Felhasználók osztályozása Felhasználók osztályozása példapélda

látogatóoktató elérhetősége

szakmai érdeklődő szakmai tartalom

hallgatóaz órához és a számonkéréshez kapcsolódó információk

tulajdonospublikálás

28

Felhasználók jellemzéseFelhasználók jellemzése

Lehetnek további szempontok is.

pl. regisztrált felhasználó kezelése fontos lehet, hogy mindenki csak a saját dolgozata eredményét tudhassa meg (személyiségi jogok ),vagy lehessen személyes hozzászólásokat, üzeneteket stb. kezelni.

29

Használati eset Használati eset (use case) diagram(use case) diagram

virtuális hallgató: aki a honlapot még nem vette használatba, de a lehetősége megvan rá

lá to g a tó

Belép ésR eg is z tr ác ió

S zem ély esin f o r m ác ió s

S zak m aiin f o r m ác ió kO k ta tás i

in f o r m ác ió k

Ad m in is z tr ác ió sleh e tö s ég ek

S zem ély eso k ta tás i


ér d ek lö d ö

tu la jd o n o s

v ir tu á lish a llg a tó

r eg is z tr á lth a llg a tó

30


A honlap belső, átfogó szerkezetét határozza meg.


Funkcionális tervezés

Információ- modellezés

Navigáció tervezés

31

Információ-modellezés Információ-modellezés (objektum-modellezés)(objektum-modellezés)

A honlap információs szerkezetét tervettük:

alapfogalmak (egyedek, objektumok)

ezek tulajdonságai

kapcsolatok, öröklődés

32

Példa: Hír és kapcsolataiPélda: Hír és kapcsolatai

Hír: amit publikálni kell

Csoport,

Tantárgy,

Hallgató:a címzéshez kell

33

Példa: Hírelem Példa: Hírelem és leszármazottaiés leszármazottai

A Hír Hírelemekből áll össze.

34

Funkcionális tervezésFunkcionális tervezés

Meghatározzuk, hogy milyen funkciókat, szolgáltatásokat nyújtunk a látogatóknak.

(A use-case diagramm ezt már tartalmazta.)

lá to g a tó

Belép ésR eg is z tr ác ió

S zem ély esin f o r m ác ió s

S zak m aiin f o r m ác ió kO k ta tás i


Ad m in is z tr ác ió sleh e tö s ég ek

S zem ély eso k ta tás i


ér d ek lö d ö

tu la jd o n o s

v ir tu á lish a llg a tó

r eg is z tr á lth a llg a tó

35

Navigáció tervezésNavigáció tervezés

Hogyan épüljenek fel az egyes oldalak?

Hogyan navigálhatunk azok között?

Kezd ö lap

S zem ély es in f o r ác ió k

R eg is z tr ác ió

O k ta tás i in f o r m ác ió k

[ h a llg a tó b e lép e tt ][ h a llg a tó r eg is z tr á lt ] S a já t b eá llí tás o k

S zak m ai in f o r ác ió k

Ad m in is z tr ác ió sleh e tõ s ég ek

[ tu la jd o n o s b e lép e tt ]

C s o p o r th ír ekHallg a tó i h ír ek

[ lá to g a tó r eg is z tr á lt ]

36


A tényleges kódolás előtti utolsó lépés.


Látvány-tervezés

Oldal-tervezés

Logikai adat-bázis tervezés

37

OldaltervezésOldaltervezés

A navigációs terv meghatározta az oldalak nevét és kapcsolatait, itt az oldalak konkrét tartalma áll össze.

A linkek is konkrétabbak lesznek, elsősorban a többes linkeknél.

38

Látvány-tervezés Látvány-tervezés

Az oldalak kinézetének sematikus tervezése. Mindenképpen vizuálisan történik, akár már a HTML sémák is elkészíthetők.

39

Logikai adatbázis tervezésLogikai adatbázis tervezés

Az eddigi lépések során lényegében el is készült, itt a WSDM be is fejeződik.

40

ForrásokForrások

HDM:http://www.inf.udec.cl/~yfarran/HDM.htm

W3DT:http://www.ap.iwi.unibe.ch/publikationen/resource/jung_winter_sac98.pdf

WSDM:http://wise.vub.ac.be/

WebML:http://www.webml.org/

OOHDM:http://www.telemidia.puc-rio.br/oohdm/oohdm.html

Documents

A WSDM weboldal-tervezési módszer a gyakorlatban