Web Application Interface Modelling - UWE Approach

50 %
50 %
Information about Web Application Interface Modelling - UWE Approach

Published on February 10, 2009

Author: hglathe

Source: slideshare.net

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Add a comment

Related presentations

Related pages

UWE - UML-based web engineering

UWE - UML-based web engineering ... UML-based domain specific modelling ... For the semi-automatic generation of Web applications different approaches were ...
Read more

UWE - About UWE - uni-muenchen.de

About UWE An approach ... of Web applications. The characteristic of UWE is the fact to be ... of a Web domain specific modelling ...
Read more

UML-based Web Engineering - Programmierung und ...

UML-based Web Engineering (UWE) approach ... UML CASE tools to design Web applications with UWE ... User Interface Web Software UWE Approach Modelling ...
Read more

UML-based Web Engineering - uni-muenchen.de

uwe.pst.ifi.lmu.de UWE web site ... support of UWE notation for design of Web applications and RIAs ... User Interface Web Software UWE Approach Modelling ...
Read more

ArgoUWE: A CASE T ool for Web Applications

ArgoUWE: A CASE T ool for Web Applications ... a systematic approach for the development of Web ... Modeling UWE proposes the use of UML ...
Read more

Modeling Web Business Processes with OO-H and UWE

Modeling Web Business Processes ... n Different Web Modeling Approaches ... n Design & implementation of Web applications which
Read more

UML-based Web Engineering - Wikipedia, the free encyclopedia

UML-based Web Engineering. UWE (UML ... approach for the development of Web ... systematic design of Web applications (MagicUWE). UWE follows the ...
Read more

The Authoring Process of the UML-based Web Engineering ...

part of the UML-based Web Engineering (UWE) approach. ... Modeling Language, Web applications, ... of the Web application. Each abstract user interface is ...
Read more

Modeling Business Processes in Web Applications with ...

... Modeling Business Processes in Web Applications with ... modeling a Web application using UWE is ... of the MDE approach to web application ...
Read more