SlideShare ist ein Scribd-Unternehmen logo
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

Weitere ähnliche Inhalte

Andere mochten auch

Desarrolllo del tema 2 practica4 b.3
Desarrolllo del tema 2 practica4 b.3Desarrolllo del tema 2 practica4 b.3
Desarrolllo del tema 2 practica4 b.3
Alejandra Lagos
 
Portafolio de evaluación
Portafolio de evaluaciónPortafolio de evaluación
Portafolio de evaluación
bibianab30
 
Urknall im Universum
Urknall im UniversumUrknall im Universum
Urknall im Universum
fosbe
 
Mein verrückter Dschungel
Mein verrückter DschungelMein verrückter Dschungel
Mein verrückter Dschungel
fosbe
 

Andere mochten auch (20)

Managementthemen Oktober 2009 Infobroker
Managementthemen Oktober 2009 InfobrokerManagementthemen Oktober 2009 Infobroker
Managementthemen Oktober 2009 Infobroker
 
Presentación19
Presentación19Presentación19
Presentación19
 
Desarrolllo del tema 2 practica4 b.3
Desarrolllo del tema 2 practica4 b.3Desarrolllo del tema 2 practica4 b.3
Desarrolllo del tema 2 practica4 b.3
 
Portafolio de evaluación
Portafolio de evaluaciónPortafolio de evaluación
Portafolio de evaluación
 
Powerpoint Präsentation der PHSt
Powerpoint Präsentation der PHStPowerpoint Präsentation der PHSt
Powerpoint Präsentation der PHSt
 
Options
OptionsOptions
Options
 
Urknall im Universum
Urknall im UniversumUrknall im Universum
Urknall im Universum
 
Mein verrückter Dschungel
Mein verrückter DschungelMein verrückter Dschungel
Mein verrückter Dschungel
 
Prozessoptimierung mit ITIL
Prozessoptimierung mit ITILProzessoptimierung mit ITIL
Prozessoptimierung mit ITIL
 
Jueves Lardero
Jueves LarderoJueves Lardero
Jueves Lardero
 
Kreise
KreiseKreise
Kreise
 
Finanzas y agua
Finanzas y aguaFinanzas y agua
Finanzas y agua
 
Firmenauskunft Pazifik-Ozeanien
Firmenauskunft Pazifik-OzeanienFirmenauskunft Pazifik-Ozeanien
Firmenauskunft Pazifik-Ozeanien
 
infobroker-tv Sendeplan - 9. Kalenderwoche 2010 (01.03 - 05.03.2010)
infobroker-tv Sendeplan - 9. Kalenderwoche 2010 (01.03 - 05.03.2010)infobroker-tv Sendeplan - 9. Kalenderwoche 2010 (01.03 - 05.03.2010)
infobroker-tv Sendeplan - 9. Kalenderwoche 2010 (01.03 - 05.03.2010)
 
Seo onpage en comercio digital internacional
Seo onpage en comercio digital internacionalSeo onpage en comercio digital internacional
Seo onpage en comercio digital internacional
 
Fauna Andaluza
Fauna AndaluzaFauna Andaluza
Fauna Andaluza
 
Branchen kompakt-reports-05-2010
Branchen kompakt-reports-05-2010Branchen kompakt-reports-05-2010
Branchen kompakt-reports-05-2010
 
BranchenThemen Medien & Verlage Gesamtübersicht 2013
BranchenThemen Medien & Verlage Gesamtübersicht 2013  BranchenThemen Medien & Verlage Gesamtübersicht 2013
BranchenThemen Medien & Verlage Gesamtübersicht 2013
 
Markenüberwachung Deutschland in wenigen Schritten zur sicheren Marke
Markenüberwachung Deutschland in wenigen Schritten zur sicheren MarkeMarkenüberwachung Deutschland in wenigen Schritten zur sicheren Marke
Markenüberwachung Deutschland in wenigen Schritten zur sicheren Marke
 
Crisi de la Restauració.
Crisi de la Restauració.Crisi de la Restauració.
Crisi de la Restauració.
 

Ähnlich wie Web Application Interface Modelling - UWE Approach

ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3
guest08d4be
 
IBM SmartCloud Provisioning Workshop, 25. Oktober 2012
IBM SmartCloud Provisioning Workshop, 25. Oktober 2012IBM SmartCloud Provisioning Workshop, 25. Oktober 2012
IBM SmartCloud Provisioning Workshop, 25. Oktober 2012
IBM Switzerland
 

Ähnlich wie Web Application Interface Modelling - UWE Approach (20)

PLM Open Hours - Dokumentation von Projekten mit Implementierungsanteil
PLM Open Hours - Dokumentation von Projekten mit ImplementierungsanteilPLM Open Hours - Dokumentation von Projekten mit Implementierungsanteil
PLM Open Hours - Dokumentation von Projekten mit Implementierungsanteil
 
ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3ZüRich Ii Mobile App Final V3
ZüRich Ii Mobile App Final V3
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Plm Open Hours - Detailkonzepte welcher Art führen zu erfolgreichen Implement...
Plm Open Hours - Detailkonzepte welcher Art führen zu erfolgreichen Implement...Plm Open Hours - Detailkonzepte welcher Art führen zu erfolgreichen Implement...
Plm Open Hours - Detailkonzepte welcher Art führen zu erfolgreichen Implement...
 
Webdesign Fachbegriffe
Webdesign FachbegriffeWebdesign Fachbegriffe
Webdesign Fachbegriffe
 
IBM SmartCloud Provisioning Workshop, 25. Oktober 2012
IBM SmartCloud Provisioning Workshop, 25. Oktober 2012IBM SmartCloud Provisioning Workshop, 25. Oktober 2012
IBM SmartCloud Provisioning Workshop, 25. Oktober 2012
 
Einsatzmöglichkeiten von Virtual Private Workspace
Einsatzmöglichkeiten von Virtual Private WorkspaceEinsatzmöglichkeiten von Virtual Private Workspace
Einsatzmöglichkeiten von Virtual Private Workspace
 
Artikel Netzguide: SOA als Grundlage für "Composite Applications"​
Artikel Netzguide: SOA als Grundlage für "Composite Applications"​Artikel Netzguide: SOA als Grundlage für "Composite Applications"​
Artikel Netzguide: SOA als Grundlage für "Composite Applications"​
 
Agile UCD (UP09 Tutorial)
Agile UCD (UP09 Tutorial)Agile UCD (UP09 Tutorial)
Agile UCD (UP09 Tutorial)
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
 
OSLC in Aktion
OSLC in AktionOSLC in Aktion
OSLC in Aktion
 
Systementwurf mit UML
Systementwurf mit UMLSystementwurf mit UML
Systementwurf mit UML
 
Illik verteilte systeme
Illik verteilte systemeIllik verteilte systeme
Illik verteilte systeme
 
Design OOA OOD
Design OOA OODDesign OOA OOD
Design OOA OOD
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Artikel eHealthcare Kompendium: Service Orientierte Architekturen für Healthcare
Artikel eHealthcare Kompendium: Service Orientierte Architekturen für HealthcareArtikel eHealthcare Kompendium: Service Orientierte Architekturen für Healthcare
Artikel eHealthcare Kompendium: Service Orientierte Architekturen für Healthcare
 
Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Top 10 Internet Trends 2001
Top 10 Internet Trends 2001
 
Using openArchitectureWare 4.0 in domain "registration"
Using openArchitectureWare 4.0 in domain "registration"Using openArchitectureWare 4.0 in domain "registration"
Using openArchitectureWare 4.0 in domain "registration"
 
Microservices und das Entity Control Boundary Pattern
Microservices und das Entity Control Boundary PatternMicroservices und das Entity Control Boundary Pattern
Microservices und das Entity Control Boundary Pattern
 
Meister Training Professionelle Entwicklung: Alles rund um (mobile) App Entwi...
Meister Training Professionelle Entwicklung: Alles rund um (mobile) App Entwi...Meister Training Professionelle Entwicklung: Alles rund um (mobile) App Entwi...
Meister Training Professionelle Entwicklung: Alles rund um (mobile) App Entwi...
 

Web Application Interface Modelling - UWE Approach

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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