Entwurf und Entwicklung komponentenbasierter

adaptiver Web-Anwendungen

Zoltán FialaTechnische Universität Dresden

Lehrstuhl Multimediatechnik

{zoltan.fiala}@inf.tu-dresden.de

26.07.2004

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 2/22

Gliederung

Motivation und „Related Work“ Zielstellung Komponentenbasierte Web-Dokumente

– Ebenenmodell– Adaptationsunterstützung

Entwurfs- und Entwicklungsprozess Autorenwerkzeug Zusammenfassung und Ausblick

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 3/22

Motivation Trends im WWW

– enormes Wachstum der im WWW veröffentlichten Informationen

– Wandlung des Web vom Präsentations- zum Kommunikations- und Interaktionsmedium

– mobile Endgeräte mit unterschiedlichen Geräteeigenschaften

Forderung– Zeitnahe Bereitstellung personalisierter Inhalte– Anpassung an Nutzer, Endgerät, Umgebung

Problem– Durch Berücksichtigung unterschiedlicher Benutzer- bzw.

Endgeräteparameter extrem steigender Mehraufwand bei

» Entwurf» Implementierung» Verwaltung

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 4/22

Existierende Arbeiten Dokumentformate

– HTML, cHTML, WML, IML [WS01]– bieten nur unzureichende Adaptionsunterstützung – Kaum Wiederverwendung von Entwurfs- und

Implementierungsergebnissen Referenzmodelle

– Dexter [HS94], AHAM [DHW99]– Identifizieren gemeinsame Charakteristika von AHS

Entwurfs- und Vorgehensmodelle– OOHDM [Schw01], RMM [ISB99], Hera [Fras03], UWE

[Koch01] – konzentrieren sich auf die Konzeption und Modellierung

(adaptiver) Web-Anwendungen– kaum Wiederverwendung auf der Implementierungsebene

WebComposition Modeling Language [GSG00]– Komponentenorientierte Entwicklung von Web-

Anwendungen– Wiederverwendbare, deklarative Web-Komponenten

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 5/22

Zielstellung Zielstellung

– Methoden und Werkzeuge für komponentenbasierten Entwurf und Entwicklung adaptiver multimedialer Web-Anwendungen

– Einsatz wiederverwendbarer, anpassbarer Web-Komponenten im gesamten Autorenprozess

– Intuitive, visuelle Autorenunterstützung

Schritte– Entwicklung eines XML-basierten Dokumentenmodells– Analyse und Anpassung existierender

Vorgehensmodelle– Konzeption und prot. Realisierung ausgewählter

Autorenwerkzeuge für komponentenbasiert adaptive Web-Anwendungen

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 6/22

Komponentenhaftes Dokumentmodell

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 7/22

<AmaDocumentComponent name="TVProgram"><MetaInformation>

...……

</MetaInformation><Variants>

<Variant name="Adult_Program">...

</Variant><Variant name="Child_Program">

...</Variant>

</Variants></AmaDocumentComponent>

Beschreibung adaptiven Verhaltens

<AdaptiveProperties><If>

<Expr operator=”greaterThan”><UserParam>UserAge</UserParam><Const>18</Const>

</Expr><Then res="Adult_Program"/><Else res="Child_Program"/>

</If><AdaptiveProperties>

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 8/22

„Layout Managers“ BorderLayout BoxLayout OverlayLayout GridLayout

Transformers for– xHTML– cHTML– WML

Beschreibung adaptiven Layouts

Box-Layout

<LayoutProperties> <alay:LayoutManager> <alay:BoxLayout orientation="yAxis">

<alay:ComponentRef ratio="30%">PictureObject1

</alay:ComponentRef> <alay:ComponentRef ratio="70%">

TextObject1 </alay:ComponentRef> </alay:BoxLayout> </alay:LayoutManager></LayoutProperties>

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 9/22

Beispiel: BorderLayout

<BorderLayout><ComponentNorth yRatio="30%">title</ComponentNorth><ComponentCenter yRatio="40%">picture2</ComponentCenter>…<ComponentSouth yRatio="30%">explanation</ComponentSouth>

</BorderLayout>

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 10/22

Dokumentgenerierung I.

Pipeline-based Document Generation

Input Doc.contains all variants and adaptationoptions

Transformadaptation to a certain client class

RenderingXHTMLcHTMLWML

Transformadaptation according to user preferences

Transformadaptation to specific technical capabilities

User model

User Properties and Preferences

Component

Repository

RequestTechnical

Client Capabilities

Step 1 Step 2 Step 3

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 11/22

Request

Pipeline-based Document Generation

Transformadaptation to a certain client class

RenderingXHTMLCHTMLWML

Transformadaptation according to user properties

Transformadaptation according to user preferences

Device / User ModelIdentification

ProfilePreference

ProfileDevice Profile

Dokumentgenerierung II.

Input Doc.contains all variants and adaptationoptions

Component

Repository

User ModelingCDL 4

update

User Interactions

Device ModelingDELI

Device Properties

update

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 12/22

Autorenprozess

Hypermedia Entwurfsmodelle– Identifizieren wichtige Phasen des Entwicklungsprozesses– Spezifizieren Hypermedia Anwendungen auf abstrakter Ebene– Berücksichtigen (mehr oder weniger) Adaptionsaspekte– Wichtige Vertreter

» RMM [ISB99], OOHDM [Schw01], WebML» Adaptionsaspekte: Hera [Fras03], OOHDM, UWE [Koch01]

– Wenig Unterstützung für Präsentationsadaption Idee

– Anpassung existierender Methoden für den Entwurf komponentenbasierter Web-Anwendungen

– Insbesondere Erweiterung um Adaptionsaspekte in der Präsentationsmodellierung

– Fokus: Modell-basierte Hera Entwurfsmethodologie

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 13/22

Conceptual Design

Conceptual Model (CM)– Repräsentiert die Anwendungsdomäne

über Konzepte und Konzeptattribute– Getypte Konzeptattribute

(Integer, String, Image, Audio, etc.)– Basiert auf RDFS

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 14/22

Conceptual Design Media Model

– Submodell des CM– Hierarchisches Modell

aus Medientypen– Definition von

Adaptionsregeln– Bedingtes Einfügen

von Medienvarianten Komponentenentwicklung

– Erstellung/Retrieval von Medieninstanzen, die die Konzeptattribute repräsentieren

– Kapselung der Medienobjekte in Medienkomponenten» MPEG-7

– Lieferung alternativer Medieninstanzen mit unterschiedlicher Qualität

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 15/22

Application Design

Application Model– Logische, strukturelle und

Navigationsaspekte– Gruppiert Konzeptattribute

zu Slices– Slice: bedeutungstragende

Repräsentation von Medienelementen

Adaptationsentwurf– Verschiedene Aspekte

» Anpassung der gesamten Navigationsstruktur» Variierende Besetzung von Slices mit Medienelementen » Dynamische Adaptation

– Appearance Conditions

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 16/22

Presentation Design

Presentation Model (PM)– Brücke zwischen

Navigationsstruktur und Implementierung

– Definiert, wie Slices visualisiert werden

– Idee: Layout Manager Konzept

– PD: Presentation Diagram

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 17/22

Presentation Design

Adaption im Presentation Model (PM)– Anpassung von Medienelementen an

» Technische Systemparameter (Farbtiefe)» Umgebungsparameter (Bandbreite)

– Corporate Design» Designvarianten (Fonts, Icons, Hintergründe)

» Unterschiedliche Nutzerpräferenzen» Externe Parameter (Jahreszeit, Ereignisse)

– Räumliche, zeitliche Anordnung von Unterkomponenten» Reorganisierung: Umordnung (GridLayout vs. BoxLayout)» Exclusion: „Herausnehmen“ bestimmter Elemente aus der

Präsentation» Separierung: Auslagerung bestimmter Präsentationselemente

auf externe Seiten– Dynamische Adaption (Adaptivität)

» z.B. Anpassung an sich dynamisch ändernde Bandbreiten

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 18/22

Data Transformation Process

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 19/22

Prototyp: Component-based WIS

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 20/22

Prototyp Online-Videothek

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 21/22

Autorenwerkzeug Modulares Autorenwerkzeug

– Dient zur intuitiven grafischen Bearbeitung von Komponenten

– Verwaltet internes Objektmodell für XML-Inhalte» Eignung für beliebige XML-Dokumente» Spezifische Erweiterungen möglich

– Modulare Plugin-Struktur» Hinzufügen eigener Editormodule zur Bearbeitung

spezifischer Komponenten

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 22/22

Autorenwerkzeug Existierende Module

– Module zur Bearbeitung von Medienkomponenten» Bild, CSS, Audio, Text» Hinzufügen von Varianten und Adaptionsregeln

– Modul zur Spezifikation adaptiver Layoutbeschreibungen

Zur Zeit Editierfunktionen auf Instanzebene

– Geplant: Template-Ebene» „Anwenden an alle Bilder”» Layout für Componenten-Templates

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 23/22

Zusammenfassung und Ausblick Zusammenfassung

– Komponentenbasiertes Dokumentenformat für adaptive Web-Anwendungen

» Unterstützung für Wiederverwendung» Generische Definition von Adaptionseigenschaften

– Autorenprozess» Anpassung/Erweiterung existierender Arbeiten um Adaptionsaspekte

» insb. (dynamische) Präsentationsadaption» Zuarbeit zu komplexem Spezifikationsframework

» Spezifikation und Umsetzung der adaptiven Präsentationsschicht» Abbildung von „high-level” Spezifikationen auf

komponentenbasiertes Implementierungsmodell– Autorenwerkzeug

» Grafische Unterstützung in verschiedenen Phasen des Autorenprozesses Zu tun

– Spezifikation und Umsetzung der dynamische Adaption– Visuelle Werkzeuge für die Konfiguration des Adaptionsverhaltens von

Komponenten

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 24/22

Literatur[Fial03] Fiala, Z., Hinz, M., Meissner, K., Wehner, F.: A Component-based Approach for Adaptive, Dynamic Web Documents. Journal of Web Engineering, September 2003

[Fras03] F. Frasincar, G. J. Houben, and R. Vdovjak. Engineering Semantic Web information Systems in Hera. Journal of Web Engineering, September 2003

[Schw01] D. Schwabe, G. Rossi, R. Guimaraes. Designing personalized web applications. WWW10, Hong Kong, 2001

[Koch01] Koch, N., Kraus, A., Hennicker, R.: The authoring process of the UML-based web engineering approach. First International Workshop on Web-Oriented Software Technology. (2001)

[DHW99]De Bra, P., Houben, G., Wu, H.: “AHAM: A Dexter-based Reference Model for AdaptiveHypermedia”, Hypertext ’99, Darmstadt (1999)

[GSG00] Gaedke, M., Segor, C., Gellersen, H.-W.: “WCML: Paving the Way for Reuse in Object-Oriented Web Engineering”, SAC2000, 2000

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 25/22

Literatur[HS94] Halasz, F., Schwartz, M.: “The Dexter Hypertext Reference Model”, Comm. of theACM, vol. 37, pp. 30-39, 1994

[ISB95] Isakowitz, T., Stohr, E.A., Balasubramanian, P.: “RMM: A Methodology for StructuredHypermedia Design”, Comm. of the ACM, 1995

[WS01] Wadge, W., Schraefel, M.: “A Complementary Approach for Adaptive and Adaptable Hypermedia: Intensional Hypertext” In Hypermedia: Openness, Structural Awareness, and Adaptivity - International Workshop OHS-7, SC-3, and AH-3, Aarhus, Denmark,2001.

[HS94] Halasz, F., Schwartz, M.: “The Dexter Hypertext Reference Model”, Comm. of theACM, vol. 37, pp. 30-39, 1994

Oberseminar an der LMU München, 26.07.04 Zoltán Fiala 26/22

Benutzermodell

User Model

IdentificationProfile ID Password Role ...

DeviceProfile HardwarePlatform SoftwarePlatform WapCharacteristics BrowserUA NetworkCharacteristics PushCharacteristics ...

SessionProfile Session PageRequest UserInteractions Events ... PageRequest ...Session...

EnvironmentProf. ...

LongTermProfile References

PreferenceProfile Properties Rules