Entwurf und Entwicklung komponentenbasierter adaptiver Web-Anwendungen Zoltán Fiala Technische Universität Dresden Lehrstuhl Multimediatechnik {zoltan.fiala}@inf.tu-dresden.de 26.07.2004

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

Motivation Trends im WWW Forderung Problem 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

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

Zielstellung Zielstellung Schritte 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

Komponentenhaftes Dokumentmodell Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Beschreibung adaptiven Verhaltens <AmaDocumentComponent name="TVProgram"> <MetaInformation> ... … </MetaInformation> <Variants> <Variant name="Adult_Program"> </Variant> <Variant name="Child_Program"> </Variants> </AmaDocumentComponent> <AdaptiveProperties> <If> <Expr operator=”greaterThan”> <UserParam>UserAge</UserParam> <Const>18</Const> </Expr> <Then res="Adult_Program"/> <Else res="Child_Program"/> </If> Dokumentkomponente TV-Programm Definition verschiedener Varianten Erstellung einer Logik, die die jeweilige Variante wählt  adaptives Verhalten Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Beschreibung adaptiven Layouts „Layout Managers“ BorderLayout BoxLayout OverlayLayout GridLayout Transformers for xHTML cHTML WML Box-Layout <LayoutProperties> <alay:LayoutManager> <alay:BoxLayout orientation="yAxis"> <alay:ComponentRef ratio="30%"> PictureObject1 </alay:ComponentRef> <alay:ComponentRef ratio="70%"> TextObject1 </alay:BoxLayout> </alay:LayoutManager> </LayoutProperties> Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Beispiel: BorderLayout Präsentation eines Autos Definition der Anordnung der Komponenten mittels XML Transformation dieser Informationen während der Dokumentgenerierung mittels Stylesheet ( HTML, cHTML, WML) DesktopPC bzw. Laptopdarstellung Angepasste Darstellung auf <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

Dokumentgenerierung I. User model User Properties and Preferences Technical Client Capabilities Request Pipeline-based Document Generation Input Doc. contains all variants and adaptation options Transform adaptation to a certain client class Transform adaptation according to user preferences Transform adaptation to specific technical capabilities Rendering XHTML cHTML WML Step 1 Step 2 Step 3 Component Repository Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Dokumentgenerierung II. Request Input Doc. contains all variants and adaptation options Component Repository User Modeling CDL 4 update User Interactions Device Modeling DELI Device Properties Device / User Model Identification Profile Preference Profile Device Profile Pipeline-based Document Generation Transform adaptation to a certain client class Rendering XHTML CHTML WML adaptation according to user properties adaptation according to user preferences Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Autorenprozess Idee 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

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

Conceptual Design Komponentenentwicklung 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

Application Design Application Model Adaptationsentwurf 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

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

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

Data Transformation Process Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Prototyp: Component-based WIS Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Prototyp Online-Videothek Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

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

Autorenwerkzeug Module zur Bearbeitung von Medienkomponenten 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

Zusammenfassung und Ausblick 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

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 Adaptive Hypermedia”, 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

Literatur [HS94] Halasz, F., Schwartz, M.: “The Dexter Hypertext Reference Model”, Comm. of the ACM, vol. 37, pp. 30-39, 1994 [ISB95] Isakowitz, T., Stohr, E.A., Balasubramanian, P.: “RMM: A Methodology for Structured Hypermedia 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. Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

Benutzermodell User Model IdentificationProfile ID DeviceProfile Password Role ... DeviceProfile HardwarePlatform SoftwarePlatform WapCharacteristics BrowserUA NetworkCharacteristics PushCharacteristics ... SessionProfile Session PageRequest UserInteractions Events ... PreferenceProfile Properties Rules EnvironmentProf. ... LongTermProfile References Oberseminar an der LMU München, 26.07.04 Zoltán Fiala