A WSDM weboldaltervezési módszer a gyakorlatban nagy.gusztav@gamf.kefo.hu Nagy Gusztáv
Webfejleszté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. 2
Webfejleszté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. 3
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 ) 4
Tervezé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) 5
HDM (Hypertext Design 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 Schwabe Daniel 6
W3DT (World Wide Web 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. Bichler Martin 7
A W3DT fejlesztési folyamata CaseforWeb ReinhardJung, RobertWinter: forrás: Sites8
W3DT meta modell forrás: ReinhardJung, RobertWinter: CaseforWeb Sites 9
WebML (Web Modeling Language) UML alapokra épít 4 szint: strukturális modell hipertext modell megjelenítési modell személyre szabott modell StefanoCeri 10
WebML strukturális modell forrás: Conceptualmodelingofdata-intensiveWeb StefanoCeri, PieroFraternali, MaristellaMatera: applications 11
WebML hipertext modell Conceptualmodelingofdata-intensiveWeb forrás: StefanoCeri, PieroFraternali, MaristellaMatera: applications 12
WebML megjelenítési modell Conceptualmodelingofdata-intensiveWeb forrás: StefanoCeri, PieroFraternali, MaristellaMatera: applications 13
OOHDM (Object-Oriented 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 Schwabe Daniel 14
OOHDM fogalmi tervezés forrás: DanielSchwabe, GustavoRossi: DevelopingHypermediaApplicationsusingOOHDM 15
OOHDM navigáció tervezés forrás: DanielSchwabe, GustavoRossi: DevelopingHypermediaApplicationsusingOOHDM 16
OOHDM elvont felület tervezés forrás: DanielSchwabe, GustavoRossi: DevelopingHypermediaApplicationsusingOOHDM 17
Az én választásom: Web 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) De Olga Troyer 18
Megjegyzés A WSDM eredeti jelölései helyett az elterjedtebb UML jelöléseket fogom alkalmazni. 19
A folyamat áttekintése Célok megfogalmazása Felhasználó modellezés célok megfogalmazása Felhasználók osztályozása Felhasználók jellemzése felhasználó modellezés Látványtervezés Oldaltervezés Fogalmi tervezés Funkcionális tervezés Megvalósítás tervezése Információmodellezés Megvalósítás Navigáció tervezés Logikai adatbázis tervezés fogalmi tervezés megvalósítás tervezése megvalósítás 20
Célok megfogalmazása Ha nincs célod, akkor azt tökéletesen el fogod érni. 21
Cé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. 22
A felhasználók különbözıek nem ugyanaz érdekli ıket Felhasználó modellezés nem ugyanarra van jogosultságuk Fontos a felhasználó-központú oldalkialakítás! Felhasználó modellezés Felhasználók osztályozása Felhasználók jellemzése 23
Rossz példa www.gamf.hu Ha egy oktató e- mail címét keresem, hol kezdjem? 24
Jobb példa www.vein.hu A kezdıoldalon választhatunk. 25
Felhasználók osztályozá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.) 26
Felhasználók osztályozása pé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 tulajdonos publikálás 27
Felhaszná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 28 hozzászólásokat, üzeneteket stb. kezelni.
Használati eset (use case) diagram tulajdonos virtuális hallgató érdeklödö látogató regisztrált hallgató Regisztráció Oktatási információk Személyes információs Adminisztrációs lehetöségek Belépés Szakmai információk Személyes oktatási információk virtuális hallgató: aki a honlapot még nem vette használatba, de 29 a lehetısége megvan rá
Fogalmi tervezés Fogalmi tervezés Információmodellezés Funkcionális tervezés Navigáció tervezés A honlap belsı, átfogó szerkezetét határozza meg. 30
Információ-modellezés (objektummodellezés) A honlap információs szerkezetét tervettük: alapfogalmak (egyedek, objektumok) ezek tulajdonságai kapcsolatok, öröklıdés 31
Példa: Hír és kapcsolatai Hír: amit publikálni kell Csoport, Tantárgy, Hallgató: 32 a címzéshez kell
Példa: Hírelem és leszármazottai A Hír Hírelemekbıl áll össze. 33
Funkcionális tervezés tulajdonos Meghatározzuk, hogy milyen funkciókat, szolgáltatásokat nyújtunk a látogatóknak. virtuális hallgató érdeklödö látogató regisztrált hallgató Regisztráció Oktatási információk Személyes információs Adminisztrációs lehetöségek Belépés Szakmai információk Személyes oktatási információk (A use-case diagramm ezt már tartalmazta.) 34
Kezdölap [ tulajdonos belépett ] Adminisztrációs lehetõségek Szakmai inforációk [ hallgató belépett ] Hallgatói hírek Navigáció tervezés Személyes inforációk Regisztráció [ hallgató regisztrált ] Saját beállítások Oktatási információk [ látogató regisztrált ] Csoporthírek Hogyan épüljenek fel az egyes oldalak? Hogyan navigálhatunk azok között? 35
Megvalósítás tervezése Megvalósítás tervezése Látványtervezés Oldaltervezés Logikai adatbázis tervezés A tényleges kódolás elıtti utolsó lépés. 36
Oldaltervezé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. 37
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. 38
Logikai 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. 39
W3DT: HDM: http://www.inf.udec.cl/~yfarran/hdm.htm http://www.ap.iwi.unibe.ch/publikationen/resource/ Források WSDM: http://wise.vub.ac.be/ jung_winter_sac98.pdf OOHDM: WebML: http://www.telemidia.puc-rio.br/oohdm/oohdm.html http://www.webml.org/ 40