Worum geht es?
                      Umsetzung
                 Zusammenfassung
                            Ende




Model...
Worum geht es?
                              Umsetzung
                         Zusammenfassung
                          ...
Worum geht es?
                             Umsetzung     Motivation
                        Zusammenfassung    Ziel
     ...
Worum geht es?
                             Umsetzung     Motivation
                        Zusammenfassung    Ziel
     ...
Worum geht es?
                             Umsetzung     Motivation
                        Zusammenfassung    Ziel
     ...
Zusammenfassung der UWE Methode
                       Worum geht es?
                                         Konzeptuell...
Zusammenfassung der UWE Methode
                         Worum geht es?
                                           Konzept...
Zusammenfassung der UWE Methode
                         Worum geht es?
                                           Konzept...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                          Worum geht es?
                                            Konze...
Zusammenfassung der UWE Methode
                                           Worum geht es?
                                ...
Zusammenfassung der UWE Methode
                                          Worum geht es?
                                 ...
Zusammenfassung der UWE Methode
                         Worum geht es?
                                           Konzept...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                        Worum geht es?
                                          Konzeptue...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                           Worum geht es?
                                             Kon...
Zusammenfassung der UWE Methode
                    Worum geht es?
                                      Konzeptuelles Mod...
Zusammenfassung der UWE Methode
                           Worum geht es?
                                             Kon...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                           Worum geht es?
                                             Kon...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                             Worum geht es?
                                              ...
Zusammenfassung der UWE Methode
                   Worum geht es?
                                     Konzeptuelles Model...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Zusammenfassung der UWE Methode
                            Worum geht es?
                                              K...
Worum geht es?
                             Umsetzung
                        Zusammenfassung
                            ...
Worum geht es?
                               Umsetzung
                          Zusammenfassung
                        ...
Nächste SlideShare
Wird geladen in …5
×

Web Application Interface Modelling - UWE Approach

797 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
797
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
16
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Web Application Interface Modelling - UWE Approach

  1. 1. Worum geht es? Umsetzung Zusammenfassung Ende Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML Analyse und Modellierung von prozessorientierten Systemen - Sommersemester 2008 Helko Glathe 01. Juli 2008 Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  2. 2. Worum geht es? Umsetzung Zusammenfassung Ende Overview Worum geht es? 1 Motivation Ziel Umsetzung 2 Zusammenfassung der UWE Methode Konzeptuelles Modell Navigationsmodell Vor¨berlegungen zum Pr¨sentationsmodell u a Pr¨sentationsmodell zur Implementierung a Zusammenfassung 3 Ende 4 Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  3. 3. Worum geht es? Umsetzung Motivation Zusammenfassung Ziel Ende Definition Die Benutzerschnittstelle eines Softwaresystems ist zunehmend als eine komplexe Softwarekomponente anzusehen. Sie spielt eine ¨ußerst a wichtige Rolle f¨r die “Usability” eines Softwaresystems. u Problem: Die Problembeschreibung (f¨r Benutzerschnittstellen) erfolgt h¨ufig u a ausschließlich in einem technischen L¨sungsraum. o Es fehlt hierbei dennoch an: einer dom¨nenspezifischen Problembeschreibung sowie a anwendungsbereichabh¨ngigen und sichtenspezifischen a Abstraktionen. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  4. 4. Worum geht es? Umsetzung Motivation Zusammenfassung Ziel Ende U.a. entstehen hierdurch folgende Probleme: Un¨bersichtlichkeit in den Ergebnissen der Implementierung. u Der Fokus liegt h¨ufig auf unwesentlichen Dingen. a Schlechte Wartbarkeit. Geringere Nutzerakzeptanz. H¨here Fehleranf¨lligkeit. o a u.v.m. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  5. 5. Worum geht es? Umsetzung Motivation Zusammenfassung Ziel Ende Abstraktion bei der Web-Applikations-Entwicklung hinsichtlich folgender Fragestellungen: Was soll der Nutzer mit einer Web-Applikation tun k¨nnen? o 1 Welche Informationen muss das System enthalten? 2 Welche Informationen werden dem Nutzer zur Verf¨gung gestellt u 3 und wie kann er durch diese Informationen navigieren? Wie werden dem Nutzer Informationen pr¨sentiert und wie kann er a 4 mit dem System interagieren? Das Ziel ist ein methodisches und modellgetriebenes Vorgehen (Model Driven Engineering) beim Erstellen dieser Sichten und weitestgehend automatische Transformation zwischen den Sichten bis hin zu einsetzbarem Quellcode. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  6. 6. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE — UML-based Web Engineering Prozess und Notation zur Erstellung von Webanwendungen Folgt dem MDA-Ansatz (MOF-konforme Metamodelle und QVT-Transformationen) CIM, PIM und PSM entstehen weiterhin durch MDA Zus¨tzliche Sichtenbildung des PIM zum spezielleren Vorgehen beim a Web-Engineering Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  7. 7. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte klassische Anforderungsdefinition Akteure mit Use Cases etc. f¨r funktionale Anforderungen u klassisches Konzeptionsdesign Modellierung der Anwendungsdom¨ne a Inhaltsmodellierung: Klassendiagramme f¨r Informationsstrukturen u (Inhaltsmodell) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  8. 8. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte klassische Anforderungsdefinition Akteure mit Use Cases etc. f¨r funktionale Anforderungen u klassisches Konzeptionsdesign Modellierung der Anwendungsdom¨ne a Inhaltsmodellierung: Klassendiagramme f¨r Informationsstrukturen u (Inhaltsmodell) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  9. 9. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte Navigationsdesign Basiert auf Inhaltsmodell Abstrakte Beschreibung der Navigationsm¨glichkeiten eines o Benutzers Identifizierung von Navigationselementen Pr¨sentationsdesign a Platzierung der Navigationselemente und Informationen in abstrakten Sichten (UI Views) Implementierung Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  10. 10. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte Navigationsdesign Basiert auf Inhaltsmodell Abstrakte Beschreibung der Navigationsm¨glichkeiten eines o Benutzers Identifizierung von Navigationselementen Pr¨sentationsdesign a Platzierung der Navigationselemente und Informationen in abstrakten Sichten (UI Views) Implementierung Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  11. 11. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte Navigationsdesign Basiert auf Inhaltsmodell Abstrakte Beschreibung der Navigationsm¨glichkeiten eines o Benutzers Identifizierung von Navigationselementen Pr¨sentationsdesign a Platzierung der Navigationselemente und Informationen in abstrakten Sichten (UI Views) Implementierung Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  12. 12. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Modelle des UWE Design Prozesses Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  13. 13. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Wie f¨ngt die Entwicklung einer Web-Applikation an? a Was soll der Nutzer mit einer Web-Applikation tun k¨nnen? o Welche Informationen muss das System enthalten? Beispiel-Web-Applikation “Company” Die “Company” m¨chte sich im Internet pr¨sentieren. Hierzu sollen o a allgemeine Informationen uber die “Company” via Internet abrufbar sein. ¨ Dar¨ber hinaus k¨nnen Informationen zum Gesch¨ftsf¨hrer, zu Projekten, u o au zu s¨mtlichen Gesch¨ftsstellen und deren Mitarbeitern abgerufen werden. a a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  14. 14. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Anwendungsf¨lle zum Beispiel “Company” a ud: Use Cases of Company Example Company Show employees Show company infos of company Show tour through Show head projects of company of company Show departments Search employee of company of department WebAppUser WebAppUser Show employees Show projects of of department department Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  15. 15. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Informationsstruktur zum Beispiel “Company” cd: Information structure of Company Example Company −Name :String −Kind :String −Description :String −MainEmailAdress :String + departments + head 1..* Employee Department Project 1..* + projects −Name :String −Adress :String −Name :String + employees 1..* −Birthdate :Date −Name :String −Cost :String −Position :String −Start :Date −End:Date −Abstract :String + employees 1..* + projects −Description :String 1..* Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  16. 16. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Beginn der Entwicklung der Benutzerschnittstelle Welche Informationen werden dem Nutzer zur Verf¨gung gestellt? u Wie kann er durch diese Informationen navigieren? Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  17. 17. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Metamodell zu Navigationsmodellen Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  18. 18. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Notation zu Navigationselementen Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  19. 19. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Konstruktionsschritte eines Navigationsmodells Relevante Klassen des konzeptuellen Modells werden 1 Navigationsklassen (siehe Use Cases) Zus¨tzliche Attribute f¨r relevante Informationen weggelassener a u 2 Konzeptionsklassen Definition zus¨tzlicher direkter Assoziationen zur Vermeidung von a 3 Umwegen Zugriffselemente werden zur Realisierung der Navigation definiert 4 (z.B. Indizes oder Suchen) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  20. 20. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Konstruktionsschritte eines Navigationsmodells Relevante Klassen des konzeptuellen Modells werden 1 Navigationsklassen (siehe Use Cases) Zus¨tzliche Attribute f¨r relevante Informationen weggelassener a u 2 Konzeptionsklassen Definition zus¨tzlicher direkter Assoziationen zur Vermeidung von a 3 Umwegen Zugriffselemente werden zur Realisierung der Navigation definiert 4 (z.B. Indizes oder Suchen) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  21. 21. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Konstruktionsschritte eines Navigationsmodells Relevante Klassen des konzeptuellen Modells werden 1 Navigationsklassen (siehe Use Cases) Zus¨tzliche Attribute f¨r relevante Informationen weggelassener a u 2 Konzeptionsklassen Definition zus¨tzlicher direkter Assoziationen zur Vermeidung von a 3 Umwegen Zugriffselemente werden zur Realisierung der Navigation definiert 4 (z.B. Indizes oder Suchen) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  22. 22. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Konstruktionsschritte eines Navigationsmodells Relevante Klassen des konzeptuellen Modells werden 1 Navigationsklassen (siehe Use Cases) Zus¨tzliche Attribute f¨r relevante Informationen weggelassener a u 2 Konzeptionsklassen Definition zus¨tzlicher direkter Assoziationen zur Vermeidung von a 3 Umwegen Zugriffselemente werden zur Realisierung der Navigation definiert 4 (z.B. Indizes oder Suchen) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  23. 23. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Navigationsmodell zum Beispiel “Company” Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  24. 24. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Erste Uberlegungen zur optischen Repr¨sentation der a Benutzerschnittstelle ¨ Abstrakt Uberlegungen, welche Navigationsstrukturen wie pr¨sentiert werden. a ¨ Uberg¨nge zwischen einzelnen Pr¨sentationen definieren. a a Grundlage f¨r prototypische Umsetzung u Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  25. 25. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UML Erweiterung zum Sketching und Storyboarding Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  26. 26. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Sketching Methode Definition Zu Beginn wird zu jeder Sicht einer Hauptbenutzerschnittstelle ein grober/abstrakter Entwurf angefertigt. Entscheidung dar¨ber, wie u Navigationsklassen repr¨sentiert und wie auf sie zugegriffen wird. a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  27. 27. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Beispiel: Sicht der Company Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  28. 28. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Storyboarding Methode Definition Nach Erstellung abstrakter Benutzersichten werden Szenarios definiert, in denen die Sequenzen zu zeigender Benutzersichten durch m¨gliche o Navigationen des Nutzers definiert werden. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  29. 29. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Beispiel: Storyboard zum zeigen der Company-F¨hrung u und der Gesch¨ftsstellen a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  30. 30. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Schritte des Sketching und Storyboarding im Uberblick Erstellen einer Pr¨sentationsklasse f¨r jede Navigationsklasse. a u 1 Erstellen einer Pr¨sentationsklasse f¨r jedes Men¨ oder jeden Index. a u u 2 Erstellen einer Pr¨sentationsklasse f¨r jede Suche oder Tour. a u 3 Erstellen von Benutzersichten durch Aggregation entsprechender 4 Pr¨sentationsklassen. a Erstellen von Storyboard-Szenarios durch entsprechende Bindung 5 von Navigationselementen mit Sichten. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  31. 31. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Schritte des Sketching und Storyboarding im Uberblick Erstellen einer Pr¨sentationsklasse f¨r jede Navigationsklasse. a u 1 Erstellen einer Pr¨sentationsklasse f¨r jedes Men¨ oder jeden Index. a u u 2 Erstellen einer Pr¨sentationsklasse f¨r jede Suche oder Tour. a u 3 Erstellen von Benutzersichten durch Aggregation entsprechender 4 Pr¨sentationsklassen. a Erstellen von Storyboard-Szenarios durch entsprechende Bindung 5 von Navigationselementen mit Sichten. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  32. 32. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Schritte des Sketching und Storyboarding im Uberblick Erstellen einer Pr¨sentationsklasse f¨r jede Navigationsklasse. a u 1 Erstellen einer Pr¨sentationsklasse f¨r jedes Men¨ oder jeden Index. a u u 2 Erstellen einer Pr¨sentationsklasse f¨r jede Suche oder Tour. a u 3 Erstellen von Benutzersichten durch Aggregation entsprechender 4 Pr¨sentationsklassen. a Erstellen von Storyboard-Szenarios durch entsprechende Bindung 5 von Navigationselementen mit Sichten. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  33. 33. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Schritte des Sketching und Storyboarding im Uberblick Erstellen einer Pr¨sentationsklasse f¨r jede Navigationsklasse. a u 1 Erstellen einer Pr¨sentationsklasse f¨r jedes Men¨ oder jeden Index. a u u 2 Erstellen einer Pr¨sentationsklasse f¨r jede Suche oder Tour. a u 3 Erstellen von Benutzersichten durch Aggregation entsprechender 4 Pr¨sentationsklassen. a Erstellen von Storyboard-Szenarios durch entsprechende Bindung 5 von Navigationselementen mit Sichten. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  34. 34. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Schritte des Sketching und Storyboarding im Uberblick Erstellen einer Pr¨sentationsklasse f¨r jede Navigationsklasse. a u 1 Erstellen einer Pr¨sentationsklasse f¨r jedes Men¨ oder jeden Index. a u u 2 Erstellen einer Pr¨sentationsklasse f¨r jede Suche oder Tour. a u 3 Erstellen von Benutzersichten durch Aggregation entsprechender 4 Pr¨sentationsklassen. a Erstellen von Storyboard-Szenarios durch entsprechende Bindung 5 von Navigationselementen mit Sichten. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  35. 35. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Was ist ein Pr¨sentationsmodell? a Positionierung von Interaktions- und Informationselementen. Welche Informations- bzw. Interaktionselemente werden durch Interaktion ersetzt? Definition Ein Pr¨sentationsmodell definiert, welche Informationen und a Navigationselemente an welcher Stelle dem Benutzer pr¨sentiert werden. a Z.B. welche Inhalte und Navigationselemente in Fenstern oder Teilen eines Fensters dargestellt werden sollen und welche dieser Inhalte durch Benutzung eines Verweises entfernt bzw. ersetzt werden. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  36. 36. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Metamodell zum Pr¨sentationsmodell a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  37. 37. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Pr¨sentationsmodell (Ausschnitt) zum Beispiel “Company” a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  38. 38. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte des Baus eines Pr¨sentationsmodells a Definition Entscheidung dar¨ber, wieviele Fenster bzw. Framesets und deren u Untergliederung in Frames dem Benutzer dargestellt werden. Festlegung, ob ein oder mehrere Fenster verwendet werden. 1 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Frames 2 ein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten). Transformation der Pr¨sentationsklassen abstrakter Sichten in a 3 Webseiten. Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einer 4 Webseite. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  39. 39. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte des Baus eines Pr¨sentationsmodells a Definition Entscheidung dar¨ber, wieviele Fenster bzw. Framesets und deren u Untergliederung in Frames dem Benutzer dargestellt werden. Festlegung, ob ein oder mehrere Fenster verwendet werden. 1 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Frames 2 ein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten). Transformation der Pr¨sentationsklassen abstrakter Sichten in a 3 Webseiten. Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einer 4 Webseite. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  40. 40. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte des Baus eines Pr¨sentationsmodells a Definition Entscheidung dar¨ber, wieviele Fenster bzw. Framesets und deren u Untergliederung in Frames dem Benutzer dargestellt werden. Festlegung, ob ein oder mehrere Fenster verwendet werden. 1 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Frames 2 ein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten). Transformation der Pr¨sentationsklassen abstrakter Sichten in a 3 Webseiten. Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einer 4 Webseite. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  41. 41. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte des Baus eines Pr¨sentationsmodells a Definition Entscheidung dar¨ber, wieviele Fenster bzw. Framesets und deren u Untergliederung in Frames dem Benutzer dargestellt werden. Festlegung, ob ein oder mehrere Fenster verwendet werden. 1 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Frames 2 ein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten). Transformation der Pr¨sentationsklassen abstrakter Sichten in a 3 Webseiten. Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einer 4 Webseite. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  42. 42. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Pr¨sentationsfluss zum Beispiel “Company” a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  43. 43. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  44. 44. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  45. 45. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  46. 46. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  47. 47. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  48. 48. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  49. 49. Worum geht es? Umsetzung Zusammenfassung Ende Was wurde in diesem Vortrag vermittelt? Methodisches Vorgehen zur Erstellung von Web-Applikationen (Anforderungsdefinition − > Konzept(Inhaltsmodell − > Navigation − > Pr¨sentation) − > Implementierung). a Pr¨zise Notation zur technologieunabh¨ngigen Definition einer a a Web-Applikation Wiederverwendung und Erweiterung des UML-Metamodells (UML Profiles). Semiautomatischer Ansatz (teilweise automatisierte Transformation). Modellgetriebener Ansatz wird unterst¨tzt und folgt dem Prinzip der u MDA. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
  50. 50. Worum geht es? Umsetzung Zusammenfassung Ende Diskussion mit dem Publikum Verwendete Literatur: R. Hennicker and N. Koch. Modeling the user interface of web applications with uml, 2001. Alexander Knapp, Nora Koch, Martin Wirsing, and Gefei Zhang. UWE – Ein Ansatz zur modellgetriebenen Entwicklung von Webanwendungen. i-com, (6):5–12, March 2007. James A. Landay and Brad A. Myers. Sketching storyboards to illustrate interface behaviors. In CHI Conference Companion, pages 193–194, 1996. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

×