A WSDM weboldal-tervezési módszer a gyakorlatban
-
Upload
bradley-sheppard -
Category
Documents
-
view
55 -
download
0
description
Transcript of A WSDM weboldal-tervezési módszer a gyakorlatban
![Page 2: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/2.jpg)
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.
![Page 3: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/3.jpg)
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.
![Page 4: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/4.jpg)
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 )
![Page 5: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/5.jpg)
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)
![Page 6: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/6.jpg)
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
![Page 7: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/7.jpg)
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
![Page 8: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/8.jpg)
8
A W3DT fejlesztési A W3DT fejlesztési folyamatafolyamata
forrás: Reinhard Jung, Robert Winter:
Case for Web Sites
![Page 9: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/9.jpg)
9
W3DT meta modellW3DT meta modell
forrás: Reinhard Jung, Robert Winter: Case for Web Sites
![Page 10: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/10.jpg)
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
![Page 11: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/11.jpg)
11
WebML strukturális WebML strukturális modell modell
forrás: Stefano Ceri, Piero Fraternali, Maristella Matera:Conceptual modeling of data-intensive Web applications
![Page 12: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/12.jpg)
12
WebML hipertext modell WebML hipertext modell
forrás: Stefano Ceri, Piero Fraternali, Maristella Matera:Conceptual modeling of data-intensive Web applications
![Page 13: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/13.jpg)
13
WebML megjelenítési WebML megjelenítési modellmodell
forrás: Stefano Ceri, Piero Fraternali, Maristella Matera:Conceptual modeling of data-intensive Web applications
![Page 14: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/14.jpg)
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
![Page 15: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/15.jpg)
15
OOHDM fogalmi tervezés OOHDM fogalmi tervezés
forrás: Daniel Schwabe, Gustavo Rossi: Developing Hypermedia Applications using OOHDM
![Page 16: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/16.jpg)
16
OOHDM navigáció tervezésOOHDM navigáció tervezés
forrás: Daniel Schwabe, Gustavo Rossi: Developing Hypermedia Applications using OOHDM
![Page 17: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/17.jpg)
17
OOHDM elvont felület OOHDM elvont felület tervezés tervezés
forrás: Daniel Schwabe, Gustavo Rossi: Developing Hypermedia Applications using OOHDM
![Page 18: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/18.jpg)
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
![Page 19: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/19.jpg)
19
MegjegyzésMegjegyzés
A WSDM eredeti jelölései helyett az elterjedtebb UML jelöléseket fogom alkalmazni.
![Page 20: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/20.jpg)
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
![Page 21: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/21.jpg)
21
Célok megfogalmazásaCélok megfogalmazása
Ha nincs célod,akkor azt tökéletesen
el fogod érni.
![Page 22: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/22.jpg)
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.
![Page 23: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/23.jpg)
23
Felhasználó modellezésFelhasználó modellezés
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ó modellezésFelhasználó modellezés
Felhasználókosztályozása
Felhasználókjellemzése
![Page 24: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/24.jpg)
24
Rossz példaRossz példa
www.gamf.hu
Ha egy oktató e-mail címét keresem, hol kezdjem?
![Page 25: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/25.jpg)
25
Jobb példaJobb példa
www.vein.hu
A kezdőoldalon választhatunk.
![Page 26: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/26.jpg)
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.)
![Page 27: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/27.jpg)
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
![Page 28: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/28.jpg)
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.
![Page 29: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/29.jpg)
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
in f o r m ác ió k
é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ó
![Page 30: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/30.jpg)
30
Fogalmi tervezésFogalmi tervezés
A honlap belső, átfogó szerkezetét határozza meg.
Fogalmi tervezésFogalmi tervezés
Funkcionális tervezés
Információ- modellezés
Navigáció tervezés
![Page 31: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/31.jpg)
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
![Page 32: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/32.jpg)
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
![Page 33: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/33.jpg)
33
Példa: Hírelem Példa: Hírelem és leszármazottaiés leszármazottai
A Hír Hírelemekből áll össze.
![Page 34: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/34.jpg)
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
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
in f o r m ác ió k
é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ó
![Page 35: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/35.jpg)
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 ]
![Page 36: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/36.jpg)
36
Megvalósítás tervezéseMegvalósítás tervezése
A tényleges kódolás előtti utolsó lépé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
![Page 37: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/37.jpg)
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.
![Page 38: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/38.jpg)
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.
![Page 39: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/39.jpg)
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.
![Page 40: A WSDM weboldal-tervezési módszer a gyakorlatban](https://reader035.fdocuments.net/reader035/viewer/2022062217/56812ad8550346895d8ebbef/html5/thumbnails/40.jpg)
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