Tworzenie serwis ów internetowych - metodyki

Transkrypt

1 Tworzenie serwis ów internetowych - metodyki Dr in. Marek MI OSZ (c) M.Mi osz 1

2 Plan Metodyki projektowania (i tworzenia) serwisów internetowych: UML WebML WSDM (ang. Web Site Design Method) (c) M.Mi osz 2/999

3 Problemy tworzenia WebAplikacji Obiektywne Nawigacja Do wiadczenie u ytkowników Ró norodno u ytkowników Zmienno potrzeb Interfejs u ytkownika Skalowalno Subiektywne Metodyka tworzenia Z o ono serwisów i jej konsekwencje Wielozawodo wy zespó wykonawczy (c) M.Mi osz 3/999

4 Problemy metodyczne Brak metodyk t worzenia aplikacji internetowych (szczególnie bazodanowych) wykorzystuj cych MDD - ang. Model-Driven Developmnet Zapo yczenia z BD, IO, niedostosowane do specyfiki aplikacji internetowych Konsekwencja: du a ilo kodu tworzonego r cznie, wysokie koszty (nawet prototypów) (c) M.Mi osz 4/999

5 Z o ono serwisów internetowych Wzrasta, bo: Coraz wi ksze wymagania (e-biznes) Coraz wi ksza ró norodno urz dze ko cowych Wymagania indywidualizacji serwis ów Rosn tak e koszty: Budowy Utrzymania (szczególnie) (c) M.Mi osz 5/999

6 Zespó wykonawczy Po czenie projektantów: Biznesowych (analitycy) Merytorycznych - w a cicieli tre ci (urz dnicy, pracownicy itd.) Graficznych (arty ci) Informatycznych (informatycy) Konieczno komunikacji i wspó pracy: Wy szy poziom abstrakcji Pozbycie si kodowania ( generowanie) i koncentracja dzia a na wysokopoziomo wym projektowaniu (c) M.Mi osz 6/999

7 Metodyki projektowani a i budowy Stare: HDM (ang. Hypermedia Design Method) i OOHDM (ang. Object-Oriented Hypermedia Design Method) UML (ang. Unified Modeling Language) WebML WSDM (ang. Web Site Design Method) (c) M.Mi osz 7/999

8 UML Projekt funkcjonalno ci Use Case Diagram Projekt architektury (stron) Class Diagram (formularze, strony akt ywne i nawigacja serwisu) Wykorzystanie profili (np. Web Modeler) (c) M.Mi osz 8/999

9

10 WebML WebML to j zyk wysokopoziomowego projektowania aplikacji internetowych korzystaj cych z du ej ilo ci danych Opracowany w 1998 roku (Politechnika w Mediolanie), rozwijany, obecnie obudowany nar z dziami CASE WebML jest j zykiem typu DSLTools (ang. Domain- Specific Language Tools) Stanowi spore u atwienie w tworzeniu stron typu: e-commerce, serwisy spo eczno ciowe, serwisy us ugowe, itd. Umo liwia komunikacj pomi dzy ró nymi twórcami serwisów (c) M.Mi osz 9/999

11 Modele w WebML Model struktury (de facto model danych) wykorzystuje koncepcj diagramu ERD lub diagramu klas UML Model hipertekstu: Model kompozycji (opisuje zawarto ka dej ze stron) Model nawigacji (opisuje po czenia mi dzy stronami i ich elementami) Model personalizacji definiuje u ytkowników i ich grupy oraz indywidualne w a ciwo ci serwisu dla poszczególnych grup Model prezentacji opisuje warstw graficzn serwisu (c) M.Mi osz 10/999

12 Struktura serwisu internet owego struktura dan ych + kompoz ycja + personalizacja + prezentacja i nawigacja encje, relacje elementy, strony, linki widoki stron style (c) M.Mi osz 11/999

13 Model struktury Struktura danych prezentowan ych w serwisie: Struktura bazy danych przechowywanych w serwisie (narz dzia: klasyczne ERD rozszerzone o generalizacj lub diagramy klas w UML) Dane wyznaczane na podstawie zapyta (model obliczeniowy, ang. Derivation Model) perspektywy z BD realizowane przez j zyk zapyta WebML OQL unikanie redundancji danych (c) M.Mi osz 12/999

14 Autor autor2ksiazka 0..N Ksiazka 1..N ksiazka2aut or BestSeller tytu : string sprzedaz: float cena: float Gatunek BestSeller=Ksiazka where Ksiazka.sprzedaz > WebML OQL Autor.iloscKsiazek=Count(Self.autor2ksiazk a) Ksiazka.wartoscSprzedazy=Self.sprzedaz * Self.cena Autor.sprzedazKsiazek=Sum(Self.autor2k siazka.sprzedaz) Autor.wartoscSprzedazy=Sum(Self.autor 2ksiazka.wartosc Sprzedazy)

15 Wzorce projektowe model i danych Hierarchiczny Sieciowy Gwiazda (c) M.Mi osz 13/999

16 Wzorzec hierarchiczny Hierarchiczna kategoryzacja (np. kategoria, podkategoria, produkt), powi zanie encji U ytkownik przemieszcza si góra-dó i na odwrót Typowe dla sklepów internetowych (c) M.Mi osz 14/999

17 Wzorzec gwiazda Wydzielenie g ównej encji Zwi zek g ównej encji z wieloma innymi, ja wyja niaj cymi, dodatkowo informuj cymi itp. U ytkownik mo e nawigowa od g ównej encji do dodatkowych i z powrotem (c) M.Mi osz 15/999

18 Wzorzec sieciowy Kilka równowa nych (o tym samym poziomie wa no ci) encji, o dostatecznym stopni u obja nienia Nawigacja mo liwa od jednej encji do drugiej i z powrotem (c) M.Mi osz 16/999

19 Serwis wiele wzorców (c) M.Mi osz 17/999

20 Projekt zawarto ci serwisu Co ma by wysy ane do u ytkownika? Jak pogrupowa wysy ane dane w strony? Z czego (jakich danych) ma si sk ada ka da strona? Jak po aczy linkami poszczególne elementy stron i same strony? (c) M.Mi osz 18/999

21 Model hipertekstu Okre la model kompozycji: Informacje publikowane w w z ach hipertekstu elementy tre ci (ang. Units) Zbiór w z ów i linków hipertekstu dostarczany jako ca o do u ytkownika (kontener) strona (ang. Page) i model nawigacji: Zbiór po cze pomiedzy w z ami hipertekstu linki (ang. Links) (c) M.Mi osz 19/999

22 Elementy (jednostki) tre ci Dataunit - jednostki danych Indexunit lista obiektów Multidataunit - zbiór jednostek danych Entryunit jednostka nawigacyjna Scrollerunit jednostka przewijaj cy Multichoiceunit element wielokrotnego wyboru Hierarchical lista hierarchiczna (c) M.Mi osz 20/999

23 Szata graficzna i znaczenie jednostek tre ci (c) M.Mi osz 21/999

24 Jednostka tre ci - definicja Atomiczny element interfejsu zwi zany zwykle z elementem struktury (encj ) IN parameters unitx OUT results entity [selector (par 1,.., parn)] Wyj cie mo e by u yte jako we innych jednostek (c) M.Mi osz 22/999

25 Jednostki tre ci - wy wietlanie params OID Entity [selector(params)] params selectedoid Entity [Selector(params)] params {OIDs} Entity [Selector(params)] (c) M.Mi osz 23/999

26 Jednostki tre ci - wej cia params params {seloids} Entity [Selector(params)] [Preselector(params)] params {seloids} { Entity (Relationship) [Selector]} params {seloids} Entity [Selector(params)] (c) M.Mi osz 24/999

27 Strona serwisu Strona jest kontenerem zawieraj cym jedn lub wiele informacji pokazywanych u ytkownikowi (jednostek tre ci) WebML pozwala zagnie d a strony i tworzy podstrony U ytkownik porusza si po serwisie sk adaj cym si ze stron Indeks książek Login Katalog (c) M.Mi osz 25/999

28 Model nawigacji Linki bezkontekstowe (bez przenoszeni a danych kontekstu) kotwice H Strona główna Indeks książek Linki kontekstowe przenosz dane (kontekst) pomi dzy jednostkami (c) M.Mi osz 26/999

29 Linki kontekstowe jednostka bazowa jednostka docelowa Author Author Kotwica lub przycisk Wy lij Pozwala na nawigacj po serwisie Przenosi dane Ró ne typy: parametrowe, z domy lnymi parametrami, automatyczne, transportuj ce (c) M.Mi osz 27/999

30 Jednostki akcji Modeluj zewn trzne lub wbudowane operacje modyfikacji tre ci serwisu algorytmy Wej cia: linki z innych jednostek Wyj cia: linki OK lub KO (nie-ok) Poza operacjami WebML mo na wzbogaca model operacjami zewn trznymi (np. SendMail lub SendSMS) (c) M.Mi osz 28/999

31 Jednostki akcji - przyk ady CREATE Create Unit DELETE Delete Unit MODIFY Modify Unit Entity Entity Entity CONNECT DISCONNECT Connect Unit Disconnect Unit relationship relationship (c) M.Mi osz 29/999

32 Jednostki akcji - konstrukcje value1 attribute1 Create Unit KO OK Nothing OID of the new object value2 attribute2 Entity (c) M.Mi osz 30/999

33 Model personalizacji Parametry kontekstowe (sesji): j zyk, szablony stylów, profil u ytkownika Grupy u ytkowników: poziom uprawnie, wymagania, dost p do tre ci Pojedynczy u ytkownik: logowanie, wygl d, tre, jednostki tre ci kontekstowe (i ndywidualne) (c) M.Mi osz 31/999

34 Model prezentacji WebML nie definiuje narz dzi Dwa sposoby definiowania: 1. Galerie predefiniowalnych stylów 2. Wykorzystanie standardów (najlepszych narz dzi ;-)) Przypisanie wygl du do u ytkownika (grupy) i urz dzenia (c) M.Mi osz 32/999

35 Cykl ycia serwisu wg. WebML Business Requirements REQUIREMENTS SPECIFICATION DATA DESIGN HYPERTEXT DESIGN ARCHITECTURE DESIGN TESTING & EVALUATION IMPLEMENTATION MAINTAINANCE & EVOLUTION Zdefiniowane w WebML (c) M.Mi osz 33/999

36 WSDM WebSite Designe Method Metodyka projektowania serwisów ukierunkowana na u ytkowników Punkt startu: potencj alni u ytkownicy (tzw. widownia i jej struktura), a nie dane Efekt: lepsza strona, bardzi ej u yteczna Rozdzielenie implementacji od koncepcj i Dost pno c projektu koncepcyj nego dla u ytkowników (c) M.Mi osz 34/999

37 WSDM. Istota Modelowanie u ytkowników: Klasyfikacja u ytkowników Opis klas u ytkowników Projekt koncepcyjny: Modelowanie obiektów Projekt nawigacyjny Projekt implementacyjny Implementacja Podstawa wszystkiego: okre lenie celu serwisu (c) M.Mi osz 35/999

38 WSDM. Modelowanie u ytkowników Klasyfikacja u ytkowników: Identyfikacja czynno ci zachodz cych w organizacji Identyfikacja uczestników powy szych czynno ci Podzia powy szych uczestników na niepodzielne grupy (klasy) Okre lenie wymaga informacyjnych dla klas u ytkowników i sposobów prezentacji danych Wyodr bnienie perspektyw (c) M.Mi osz 36/999

39 WSDM. Projekt koncepcyjny. Obiekty Cel: formalne zamodelowanie wymaga informacyjnych dla ka dej grupy u ytkowników Sposób: budowanie modelu obiektów dla ró nych grup (klas) u ytkowników (UOM, ang. User Object Model) De facto jest to model danych w postaci modelu klas (c) M.Mi osz 37/999

40 WSDM. Projekt koncepcyjny. Nawigacja Koncepcyjny model nawigacji zawiera trasy nawigacji dla klas u ytkowników (lub perpektyw) Trasa nawigacyjna wyra a jak u ytkownicy konkretnej perspektywy poruszaj si w ród dost pnych informacji Sk ada si z komponentów i linków Wyró niamy komponenty: Informacyjne Nawigacyjne Zewn trzne (c) M.Mi osz 38/999

41 WSDM. Projekt nawigacj i - przyk ad (c) M.Mi osz 39/999

42 WSDM. Projekt implementacyjny W tym kroku projektuje si tzw. "look and feel" Cel: stworzenie spójnego, przyjemnego dla oka i wydajnego "look and feel" dla modelu koncepcyjnego Rezultat: Model Implementacyjny Projekt implementacyjny mo e zale e od wybranego rodowiska implementacyjnego jego ograniczenia (np. HTML) mog ingerowa w ten proces (c) M.Mi osz 40/999

43 WSDM. Stosowalno, wady i zalety WSDM s u y g ównie do projektowania stron informacyjnych Zalety: Nie powoduje problemów z u yteczno ci i utrzymaniem strony Strukturyzacja informacji Strukturyzacja procesu nawigacji Rozdzielenie projektu koncepcyjnego od implementacji Wady: Brak narz dzi CASE Nie zajmuje si projektem interfejsu u ytkownika ani implementacj (c) M.Mi osz 41/999

44 Dzi kuj (c) M.Mi osz 42