webes alkalmazások tervezése -...
TRANSCRIPT
![Page 1: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/1.jpg)
WEBES ALKALMAZÁSOK
TERVEZÉSE, FEJLESZTÉSÉNEK
MENETE
Tarcsi Ádám, Horváth Győző
![Page 2: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/2.jpg)
Tervezés 2
![Page 3: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/3.jpg)
Mi a Webtechnológia (Web Engineering)?
4
A szoftvertechnológia kiterjesztése webes
alkalmazásokra.
Több, mint csupán HTML és JavaScript
A szoftverfejlesztés web-centrikus megközelítése.
Kiváló minőségű, költség-hatékony web-es
alkalmazások tervezéséhez, fejlesztéséhez,
fejlődéséhez szükséges irányzatok, módszertanok
alkalmazása.
![Page 4: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/4.jpg)
Web Engineering kulcsterületei
© 1997-2005 Dr. Martin Gaedke
•ISO/OSI rétegei
•Hatékonyság
•Biztonság
•Követelmény elemzés
•Tervezés
•Fejlesztés
•Tesztelés
•Működtetés
•Karbantartás
• Információs
struktúra leírása
•Navigáció
•Vizualizáció
•Használhatóság
•Ergonómia
•Eggyüttműködés
•Adatmodellezés
•RDBMS, XML
•Lekérdező nyelvek
•Üzleti folyamatok
Web
Engineering
Számítógépes
hálózatok
Szoftver-
technológia Hypermedia
Információs
rendszerek
Egyebek...
![Page 5: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/5.jpg)
Web-site vs. Web-alkalmazás
Web-site Web-alkalmazás
Statikus / dinamikus Statikus vagy statikus-szerű Dinamikus
Adatbázis Nem szükséges / nem
tipikus Jellemző
Hagyományos
(asztali) alkalmazás
Nem implementálható
asztali alkalmazásként
Rendelkezik asztali
alkalmazásokhoz hasonló
funkcionalitásokkal
Authorizáció Nem jellemző Jellemző
Bookmarking / search
engine Tipikus, jellemző
Nem működik.
Keresőmotorok számára
irreleváns, feldolgozhatatlan
Szerver-oldali logika Nem jellemző Mindig
Kliens-oldali logika Nem jellemző, de
előfordulhat Jellemzően
Példa Híroldalak, (Wikipedia) Google Docs
![Page 6: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/6.jpg)
Keretrendszer vs. Tartalomkezelő (CMS)
Web-es fejlesztés célja
Programozói
készségek,
érettségi szint az
adott
környezetben
Tisztán
tartalom
megosztás
Tartalom-
megosztás
kevés
fejlesztéssel
Szofisztikált
funkciók, a
tartalmi
szempontok nem
fontosak
Kezdő CMS CMS, de
fejlesztés nem
ajánlott
Projekt nem
ajánlott
Haladó CMS CMS /
Framework
Framework
Profi CMS CMS /
Framework
Framework
![Page 7: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/7.jpg)
Web alkalmazás kategóriák
Doc-Centric
Interactive
Transactional
Workflow
Based
Social Web Collaborative
Ubiquitous
Portal
Oriented
Semantic
Web
Idő
Összete
ttség
, ko
mp
lexit
ás
8
Egy összetett web-
alkalmazás több
kategóriába is
tartozhat!!!
![Page 8: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/8.jpg)
Dokumentum-központú web-site-ok
Web alkalmazások előzményei, kezdetleges web-alkalmazások
Statikus HTML dokumentumok
Jellemző a manuális frissítés
Előnyeik
Egyszerű,
Megbízható,
Gyors válaszidő
Hátrányaik
A gyakori frissítés jelentősen megnöveli a karbantartás költségeit
Mivel a frissítése nehézkes, nem nagyon automatizálható, gyakoriak az elavult tartalmak.
![Page 9: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/9.jpg)
Interaktív & Tranzakcionális
Interaktív
Interaktív tartalmak: űrlapelemek, gombok,...
Dinamikusan generált oldalak (felhasználói inputtól
függően)
Pl.: híroldalak
Tranzakcionális
Tartalom frissítése (CRUD) tranzakció
Adatbázis használat jellemző
Pl.: szállodai hotelfoglalás, online bank, vásárlás
![Page 10: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/10.jpg)
Munkafolyamat-alapú alkalmazások
Üzleti folyamat (business processes) alapú
alkalmazások
Nem szükségszerű a workflow motor
Az alkalmazás felépítését, struktúráját az üzleti
logika határozza meg
Jellemzően web-szolgáltatás alapú
Pl.: B2B, SOA alkalmazások
![Page 11: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/11.jpg)
Kollaboratív & Social Web
Együttműködésre épülő webalkalmazások
Struktúrálatlan, együttműködő környezetek
Személyek közötti kommunikáció mindenekfelett
Pl: Wiki-k
Social Web
A WWW alapvetően anonim környezet
Megosztás, közösségek térnyerése
Mashup: alkalmazások közötti integráció
Pl: Blog-ok, social bookmarking (del.icio.us)
![Page 12: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/12.jpg)
Portál-alapú webalkalmazások
Minden egy helyen: egy belépési pontot ad a
heterogén információk eléréséhez
Index, Yahoo!
CMS rendszerek
Specifikus, tematikus portálok
Üzleti portálok (Business, Enterprise portal): intranet
Online piacterek: bookline, vatera
Közösségi portálok adott közösségeknek: scn.sap.com
![Page 13: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/13.jpg)
Mindenhonnan elérhető (Ubiquitous) webalkalmazások
Testreszabott szolgáltatások, melyek bármilyen eszközről elérhetőek
Human-Computer Interaction (HCI) kulcsfontosságú:
Az egyes eszközök korlátai (képernyő méret, sávszélesség)
Kontextusfüggő
Jelenleg is fejlődő terület:
Perszonalizáció
Helyfüggő alkalmazások
Multi-platform, HTML5 alkalmazások
Pl.: Evernote, hvg.hu (tablet.hvg.hu, m.hvg.hu)
![Page 14: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/14.jpg)
Szemantikus Web
Tim Berners-Lee: „Information on the Web should be
readable to machines, as well as humans.”
Metaadatok és ontológiák használata a tartalom,
információ leírására.
Számítógépek számára is érthető tartalom.
Pl.: dbpedia
![Page 15: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/15.jpg)
Web Engineering 16
![Page 16: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/16.jpg)
A web-alkalmazások építőkövei 17
Tartalom
HTML dokumentumok,
Multimédia állományok
Navigációs struktúra (Hypertext)
Felhasználói interfész
![Page 17: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/17.jpg)
Szoftverfejlesztés tevékenységei
Elvárások, követelmények elemzése és specifikáció
Tervezés
Implementálás, fejlesztés, kódolás
Kipróbálás, validálás, tesztelés
Szoftverevolúció: karbantartás, továbbfejlesztés
![Page 18: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/18.jpg)
Kiegészítő tevékenységek
Projekt menedzsment
Verzió kezelés / verzió követés
Erőforrás menedzsment
Minőségbiztosítás
Terméktámogatás
Projekt értékelés, fejlesztési folyamat
továbbfejlesztése
![Page 19: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/19.jpg)
Feladatkörök 20
Megrendelő
Szervezői, tervezői feladatok: rendszerszervezés,
szoftver architect, projektvezetés, marketing, stb.
Web-fejlesztés: kilens, szerver oldalon
Web-design
Adatbázis: adminisztráció, fejlesztés
Tesztelés
Üzemeltetés
![Page 20: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/20.jpg)
Szoftverfolyamat-modellezés 21
![Page 21: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/21.jpg)
Szoftverfolyamat modellek
Vízesés
Boehm féle spirál
Gyors prototípus
Inkrementális (evolúciós)
Újrafelhasználás orientált (komponens alapú)
V
OMT (Object Modelling Technique)
RUP (Rational Unified Process)
Agilis módszerek: SCRUM, Extreme Programming (XP), Lean,
stb.
![Page 22: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/22.jpg)
Vízesés modell
A probléma elemzése, meghatározása, követelmények
felmérése
Rendszerjavaslat kidolgozása
Rendszerspecifikáció
Logikai és fizikai tervezés
Implementáció, megvalósítás
Szoftvervalidáció, tesztelés
Rendszerátadás és bevezetés
Üzemeltetés és karbantartás
![Page 23: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/23.jpg)
Vízesés modell
• Követelmények felmérése: igények, elvárások meghatározása,
összefoglalása. Jelen állapot (helyzetfelmérés), probléma, elérendő cél
definiálása.
• Rendszerjavaslat: Alternatívák, szükséges erőforrások, költségek
megválaszolása, alapvető lépések a projektterv összeállításához. A
rendszerjavaslat az első olyan dokumentum, amelyet a megrendelő megkap,
melyből az eddig végzett munkát megítélheti, a fejlesztés perspektíváiról
képet alkothat.
• Rendszerspecifikáció: rendszertervezőnek szól. Input-output típusok, fájlok
definiálása, nagyvonalú rendszerterv (hardver és szoftveres), adatstruktúra,
interfész-definíció. Döntések, azok bemutatása (pl.: vásárolt v. fejlesztett
részek), stb.
• Logikai és fizikai tervek: szoftver és adatbázis. A lépések konkrét
definiálása. Megvalósítási terv (idő, erőforrások, ember, pénzügyi források,
hogyan érjük el a célokat) és rendszerterv elkészítése. Architektúra, hálózati
topológia, funkcióspec., navigációs és oldal desing-ek, adatterv - DB diagram,
osztálydiagrammok.
![Page 24: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/24.jpg)
Vízesés modell
• Implementáció = megvalósítás
• Szoftvervalidáció = tesztelés
• Rendszerátadás (élesbe helyezés online)
• Üzemeltetés, karbantartás visszamutat a korábbi
állapotokra.
![Page 25: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/25.jpg)
Logikai és fizikai rendszerterv
Logikai rendszerterv: a felmerült probléma megoldására kidolgozott működési-, szervezeti-, adat- és folyamatmodell, mely többféle eszközkörnyezetben megvalósítható módon, logikai szinten van megfogalmazva.
Fizikai rendszerverv: egy logikai rendszerterv alapján több fizikai is készíthető más-más hardver/szoftver környezetre is tervezhető, megvalósítható. Konkrét eszközbázisra, adott környezetre épül.
![Page 26: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/26.jpg)
Logikai tervezés
A rendszer működési logikájának tervezése
Folyamatok (funkciók) tervezése
Adattervezés
Felhasználói interfészek tervezése
![Page 27: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/27.jpg)
Fizikai tervezés
Adatterv
Rendszerspecifikációk (fejlesztési, futtatási környezet)
Szoftverarchitektúra (rétegek)
A rendszer működésének elve
Programspecifikációk – funkciótervek
I/O tervek, rendszer interfészek
Biztonsági terv
![Page 28: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/28.jpg)
Vízesés modell
A következő fázis addig nem indulhat el, amíg az előző be nem fejeződött. Ez a modell akkor működik jól, ha a követelmények teljesen ismertek.
Előny: Jól menedzselhető és ellenőrizhető. Minden fázisban jól definiált feladatok. Minden fázis jól dokumentálható. Előre jól definiálható követelmények esetén jól alkalmazható.
Hátrány: Nagyon sok probléma csak az utolsó fázisban derül ki, így a javítás nagyon költséges. Korán kell jelentős döntéseket hozni, ez hibás döntésekhez vezethet. Nehéz a rendszert a fejlesztés közben változó követelményekhez igazítani. Sok dokumentációs munkát igényel.
![Page 29: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/29.jpg)
Spirál modell
• megvalósíthatóság
• a rendszer
követelményeinek
meghatározása
• rendszertervezés,
• stb.
![Page 30: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/30.jpg)
Spirál modell
Determine goals, alternatives, constraints
Evaluate alternatives
and risks
Plan Develop
and test
budget1 budget2 budget3 budget4 prototype1 prototype2 prototype3 prototype4
concept of operation
![Page 31: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/31.jpg)
Spirál modell
Előny: a kockázati tényezőkkel explicite számol. A
spirális modellben nincsenek rögzített fázisok, és
felölelhet más folyamatmodelleket is (vízesés,
evolúciós, stb.).
Hátrányai: a modell alkalmazása bonyolult,
munkaigényes feladat; a párhuzamos
foglalkoztatás csak a 3. szektorban lehetséges.
![Page 32: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/32.jpg)
V modell
Forrás: http://softwareandme.wordpress.com/2009/10/20/software-development-life-cycle/sdlc_v_model
![Page 33: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/33.jpg)
V modell
system requirements
software requirements
preliminary design
detailed design
code and debug
unit test
component test
integration testing
acceptance test
system integration
“analyze and
design”
“test and
integrate”
time
Leve
l of
abst
ract
ion
![Page 34: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/34.jpg)
V modell
Egy módosított vízesés modell.
Megkülönbözteti a fejlesztésen belül a konstrukciós
és a tesztelési fázisokat.
Definiálja a tesztelés szintjeit.
Szemlélteti, hogy a tesztelési munka végigköveti a
teljes fejlesztési folyamatot.
Összefüggést tételez fel az egyes konstrukciós
fázisok és az egyes tesztelési szintek között.
![Page 35: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/35.jpg)
Gyors prototípus modell
![Page 36: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/36.jpg)
Gyors prototípus modell
Segíti a fejlesztő és a felhasználó kommunikációját.
Főleg kisebb csoportoknál vált be.
A teljes fejlesztési folyamatot általában nem fedi
le, de jól alkalmazható kiegészítő módszerként.
![Page 37: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/37.jpg)
Inkrementális (evolúciós)
![Page 38: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/38.jpg)
Evolúciós modell
Ki kell fejleszteni egy kezdeti implementációt (prototípust), azt a felhasználókkal véleményeztetni, majd sok-sok verzión át addig finomítani, amíg megfelelő nem lesz. Iterációs modellnek is nevezik. Objektum orientált fejlesztésben gyakran használják.
Ez a modell a felhasználó kívánságait jobban kielégítő programot eredményez. A kis (<100.000 programsor) és közepes (<=500.000 programsor) rendszerek fejlesztéséhez ideális.
Hátrányai: a folyamat nem látható; a rendszerek gyakran szegényesen strukturáltak; a gyors fejlesztés rendszerint a dokumentáltság rovására megy.
![Page 39: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/39.jpg)
Újrafelhasználás orientált fejlesztés
(komponens alapú)
Komponenselemzés
Követelménymódosítás
Rendszertervezés újrafelhasználással
Fejlesztés és integráció
![Page 40: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/40.jpg)
Komponens alapú modell
Előnye: lecsökkenti a kifejlesztendő részek számát, így csökkenti a költségeket és a kockázatot. Ez általában a kész rendszer gyorsabb leszállításhoz vezet.
Hátrányai: akövetelményeknél hozott kompromisszumok elkerülhetetlenek, és ez olyan rendszerhez vezethet, ami nem felel meg a felhasználó valódi kívánságának.
![Page 41: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/41.jpg)
Egyéb modellek, módszertanok
Agilis
XP – eXtreme Programming
SCRUM
Lean
MDA – Model Driven Architecture
MDD- Model Driven Design
TDD – Test Driven Design
BDD – Behaviour Driven Design
...
![Page 42: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/42.jpg)
Tervezési eszközök
![Page 43: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/43.jpg)
CASE eszközök
Computer-Aided Software Engineering
Követelményspecifikáció: grafikus rendszermodellek, üzleti és domain
Elemzés/tervezés során: adatszótár kezelése, mely a tervben található egyedekről és kapcsolataikról tartalmaz információt; felhasználói interfész generálását egy grafikus interfész-leírásból, melyet a felhasználóval együtt készíthetünk el.; a terv ellentmondás mentesség vizsgálata
Implementáció során: automatikus kódgenerálás (Computer Aided Programming - CAP);verziókezelés
Szoftvervalidáció során: automatikus teszt-eset generálás, teszt-kiértékelés, -dokumentálás
Szoftverevolúció során: forráskód visszafejtés (reverse engineering); régebbi verziójú programnyelvek automatikus újrafordítása újabb verzióba.
![Page 44: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/44.jpg)
CASE eszközök
Automatikus dokumentumgenerálás;
Projektmenedzsment támogatás (ütemezés,
határidők figyelése, erőforrás-tervezés, költéség-
és kapacitásszámítás, stb. )
A CASE-eszközök korai pártolói azt jósolták, hogy
a szoftverek minőségében és a termelékenységben
nagyságrendi javulást okoznak ezek az eszközök,
de valójában csak 40% körüli a javulás.
![Page 45: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/45.jpg)
Web site tervezés 46
![Page 46: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/46.jpg)
Web Site tervezés 47
1. Információ gyűjtés
2. Tervezés
3. Tartalom és design
4. Fejlesztés
5. Tesztelés, minőségi ellenőrzés / Üzembehelyezés
6. Karbantartás
![Page 47: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/47.jpg)
1. Információgyűjtés 48
Igényfelmérés:
több lépcsőben,
funkcionális igények felmérésével
marketing- és stratégiai célok meghatározása
Előzetes árajánlat
Domain név és tárhely (www.domain.hu)
![Page 48: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/48.jpg)
2. Tervezés – I. 49
Anyagbeszerzés – I.
Adat, funkcionális, navigációs terv készítése
![Page 49: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/49.jpg)
2. Tervezés – II. 50
Technológiai és megrendelői döntések
Statikus vs. dinamikus (PHP, .NET, Java, stb.) oldal
Adatbázis vs. fájl tárolás
Ki tartja karban az oldalakat: megrendelő, készítő vagy rendszergazda, stb.
Saját oldal (sablon) vs. keretrendszer vs. tartalomkezelő rendszer
Tárhely-szükséglet tervezés
Árajánlat
![Page 50: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/50.jpg)
3. Tartalom és design 51
Marketing-terv készítése
Arculat-terv, logótervek készítése
Feladatok meghatározása
Sablon készítése
Döntés a design-ról
![Page 51: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/51.jpg)
Presentation Model 52
![Page 52: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/52.jpg)
Presentation Model - Mockup 53
![Page 53: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/53.jpg)
Web-site tervezés - sablon 54
![Page 54: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/54.jpg)
4. Fejlesztés 55
Anyagbeszerzés – II.
További oldalak elkészítése (sablon)
Fejlesztés
Szerver oldali kód
Kliens oldali kód
![Page 55: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/55.jpg)
5. Tesztelés, értékelés 56
Tesztelés
Mérések értékelése
Javítások, amennyiben szükségesek
Üzembe helyezés
Karbantartási terv
Jótállás
Karbantartás
Support
![Page 56: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/56.jpg)
6. Karbantartás 57
Javítások
Üzemeltetési feladatok
![Page 57: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/57.jpg)
Web alkalmazás tervezése 58
![Page 58: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/58.jpg)
Modern Web Alkalmazások evolúciós modellje
59
Követelmény
analízis /
Igényfelmérés
Üzleti elvárások
Tervezés Megvalósítás,
fejlesztés
Tesztelés,
értékelés
Üzemeltetés,
karbantartás
Offline prototípus
Üzembehelyezés
Online webalkalmazás Leállítás
![Page 59: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/59.jpg)
WebML Development Processes 60
Deployment, maintenance and evolution (Conceptual model changes)
Testing and evaluation (testing, measuring, code generation…)
Implementation (Database and Web application)
Application design (data model, hypertext model – presentation, site structure)
Data design Hypertext design
Requirement analysis (use case, business process models)
![Page 60: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/60.jpg)
Specifikáció 61
4 jellemző leírási, jelölési módszer
Forgatókönyv, szkenáriók leírása jellemzően
mondatos, vagy egyszerű táblázatos leírás:
megrendelők számára jól érthető
Részletes, felsorolás-szerű leírás
Formális követelmény-leírás pl.: UML használati eset
diagrammok segítségével, stb.
Formális specifikáció: „matematikai képletekkel”
leírt specifikáció – a weben nem nagyon használt
![Page 61: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/61.jpg)
Tervezési szempontok 62
követelmények összegyűjtése
szerepkörök, használati esetek, folyamatok
meghatározása
oldalfunkciók adatokkal
oldaltérkép (site struktúra)
oldalvázlatok készítése
adatbázis tervezése
designtervek készítése
![Page 62: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/62.jpg)
Példa: albumkezelő web-alkalmazás 63
Célunk egy olyan webalkalmazás készítése, amely
lehetővé teszi fényképalbumok készítését,
megtekintését, publikálását.
![Page 63: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/63.jpg)
Követelmény-analízis 64
Pontosan milyen oldalak lesznek?
Milyen adatok jelenjenek meg az oldalakon?
Hogyan nézzenek ki ezek az oldalak? (sablon)
Milyen összefüggésben vannak ezek az oldalak? (oldaltérkép)
Hogyan azonosítom a felhasználókat, hogyan különböztetem meg, hogy kinek milyen albumai vannak? (azonosítás, autentikáció)
Általában: milyen műveleteket és oldalakat érhetnek el az azonosítatlan és azonosított felhasználók? (szerepkörök, autorizálás)
Mik az egyes oldalak adatigényei? (modell felépítése, körvonalazása)
Milyen struktúrában, hogyan tároljuk az adatokat? (adatbázis)
Milyen eszközök támogatottak? (asztali böngésző, mobil kliensek)
![Page 64: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/64.jpg)
Szerepkörök 65
A felhasználókat csoportokba osztjuk. A csoportok határozzák meg az
elérhető funkciókat, jogosultságokat.
Felhasználói csoport
leírása:
Szerepkör neve: RegisztráltUser
Leírás: Regisztrált felhasználó. Az alkalmazás teljes funkcionalitása
csak ebbe a csoportba tartozó felhasználók számára
érhető el.
Profil adatok: oid, userName, password, email
Super-group: User
Sub-group: Nincs
Kapcsolódó use-
case:
Login, Bemutató megtekintés, Keresés, Bemutató információk
lekérése, Új bemutató, Kép feltöltés, Bemutató szerkesztése,
Kép törlése, Bemutató törlése, Kedvencnek jelöl
Objektumok –
olvasási joggal
Bemutato, Kep
Objektumok –
módosítási
joggal
Bemutato, Kep
![Page 65: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/65.jpg)
Use case – használati eset diagram
66
![Page 66: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/66.jpg)
Activity diagram - 1.
Használati eset, folyamat leírása
![Page 67: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/67.jpg)
Használati eset – táblázatos leírás
Az alábbi lépések végrehajtása szükséges:
1. Az alábbi adatokat kell a felhasználónak kötelezően megadnia egy új bemutató
készítésekor: cím, leírás, szerzo (automatikus).
2. Opcionális adatok: nincs
3. Bemutató mentése
Folyamat leírása
A bemutató mentése sikeres. Utófeltétel
Csak regisztrált felhasználó (RegisztráltUser) tud új bemutatót készíteni. Előfeltétel
Új bemutató album készítése. Cél
Új bemutató készítése Cím
![Page 68: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/68.jpg)
Activity diagram - 2.
Használati eset, folyamat leírása, architektúrára hivatkozással.
Initial Request Send Form
User Application Server Database
Input Credentials Accept Credentials Verify Credentials
Select Home Page Elaborate Page
Default Home Page ListIndex of Home Pages
Serve Request
Receive Home Page
![Page 69: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/69.jpg)
Business Process Model (BPM) 70
![Page 70: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/70.jpg)
Oldalak és funkciók tervezése 71
Főoldal
Hivatkozás a bejelentkezésre és a regisztrálásra
10 legnépszerűbb bemutató listája
Album adatai: indexkép, címe, leírása, hányszor tekintették
meg
Funkciók: egy bemutatóra kattintva betöltődik a bemutató
Egy véletlenszerűen kiválasztott album vetítése
Bemutató megtekintése
Bemutató adatai...
![Page 71: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/71.jpg)
Adatbázis tervezés
1. Cél meghatározás, a feladat: Meghatározzuk a tárolandó adatok körét, az adatbázis használatának módját, az elvégzendő részfeladatokat.
2. Logikai (koncepcionális) adatmodell készítése
3. Fizikai adatmodell készítése
4. Táblák meghatározása: Az összegyűjtött információkat témakörökre, táblákra bontjuk (normalizálás). Kerülni kell a többszörös adatbevitelt, de minden szükséges adatot tárolni kell.
5. A táblák mezőinek meghatározása, funkcionális függőségek megállapítása
6. Kapcsolatok felállítása a táblák között
7. Teszt változat elkészítése, a terv finomítása
8. Üzembehelyezés
9. Karbantartás
![Page 72: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/72.jpg)
Adatmodell 73
![Page 73: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/73.jpg)
Adatmodell 74
![Page 74: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/74.jpg)
Site structure –hypertext model 75
![Page 75: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/75.jpg)
Presentation: Mock-up 76
![Page 76: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/76.jpg)
Design, ebből a sablon 77
![Page 77: Webes alkalmazások tervezése - ade.web.elte.huade.web.elte.hu/02_Webes_alkalmazasok_tervezese.pdf · Formális követelmény-leírás pl.: UML használati eset diagrammok segítségével,](https://reader031.vdocuments.pub/reader031/viewer/2022022419/5a78c1de7f8b9a70238bf911/html5/thumbnails/77.jpg)
Irodalom 78
Gerti Kappel, Birgit Pröll, Siegfried Reich, Werner Retschitzgger: Web Engineering, John Wiley &Sons, 2006.
Sven Casteleyn, Florian Daniel, Peter Dolog, Maristella Matera: Engineering Web Applications, Springer, 2009
Horváth Győző, Tarcsi Ádám, Menyhárt László: Többrétegű webes alkalmazások fejlesztése, ELTE, 2012
Dr. Johanyák Zsolt Csaba: Szoftvertechnológia előadás, KF, 2010