Entwurf und Entwicklung komponentenbasierter adaptiver Web-Anwendungen

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

2. 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. 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. 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. 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. Komponentenhaftes Dokumentmodell Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

7. 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> <AmaDocumentComponent name="TVProgram"> <MetaInformation> ... … … </MetaInformation> <Variants> <Variant name="Adult_Program"> ... </Variant> <Variant name="Child_Program"> ... </Variant> </Variants> </AmaDocumentComponent> Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

8. 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:ComponentRef> </alay:BoxLayout> </alay:LayoutManager> </LayoutProperties> Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

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

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

12. 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. 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. Conceptual Design • Media Model • Submodell des CM • Hierarchisches Modellaus 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. Application Design • Application Model • Logische, strukturelle undNavigationsaspekte • Gruppiert Konzeptattributezu Slices • Slice: bedeutungstragendeReprä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. 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. 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. Data Transformation Process Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

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

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

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

25. 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. • [HS94] Halasz, F., Schwartz, M.: “The Dexter Hypertext Reference Model”, Comm. of the • ACM, vol. 37, pp. 30-39, 1994 Oberseminar an der LMU München, 26.07.04 Zoltán Fiala

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