gyakorlatban Nagy Gusztáv

Átírás

1 A WSDM weboldaltervezési módszer a gyakorlatban nagy.gusztav@gamf.kefo.hu Nagy Gusztáv

2 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

3 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

4 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

5 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

6 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

7 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

8 A W3DT fejlesztési folyamata CaseforWeb ReinhardJung, RobertWinter: forrás: Sites8

9 W3DT meta modell forrás: ReinhardJung, RobertWinter: CaseforWeb Sites 9

10 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

11 WebML strukturális modell forrás: Conceptualmodelingofdata-intensiveWeb StefanoCeri, PieroFraternali, MaristellaMatera: applications 11

12 WebML hipertext modell Conceptualmodelingofdata-intensiveWeb forrás: StefanoCeri, PieroFraternali, MaristellaMatera: applications 12

13 WebML megjelenítési modell Conceptualmodelingofdata-intensiveWeb forrás: StefanoCeri, PieroFraternali, MaristellaMatera: applications 13

14 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

15 OOHDM fogalmi tervezés forrás: DanielSchwabe, GustavoRossi: DevelopingHypermediaApplicationsusingOOHDM 15

16 OOHDM navigáció tervezés forrás: DanielSchwabe, GustavoRossi: DevelopingHypermediaApplicationsusingOOHDM 16

17 OOHDM elvont felület tervezés forrás: DanielSchwabe, GustavoRossi: DevelopingHypermediaApplicationsusingOOHDM 17

18 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

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

20 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

21 Célok megfogalmazása Ha nincs célod, akkor azt tökéletesen el fogod érni. 21

22 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

23 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

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

25 Jobb példa A kezdıoldalon választhatunk. 25

26 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

27 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

28 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.

29 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á

30 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

31 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

32 Példa: Hír és kapcsolatai Hír: amit publikálni kell Csoport, Tantárgy, Hallgató: 32 a címzéshez kell

33 Példa: Hírelem és leszármazottai A Hír Hírelemekbıl áll össze. 33

34 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

35 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

36 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

37 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

38 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

39 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

40 W3DT: HDM: Források WSDM: jung_winter_sac98.pdf OOHDM: WebML: