An Integrated Approach for Platform-Independent Web Applications - PowerPoint PPT Presentation

An Integrated Approach for Platform-Independent Web Applications W3C Multimodal Interaction Workshop Sophia-Antipolis, 19.-20.7.2004 Gerald Hübsch and Thomas Springer Dresden University of Technology {huebsch,springet}@rn.inf.tu-dresden.de G. Hübsch, T. Springer – Dresden University of Technology

Motivation • Existing and upcoming wireless network Hotel infrastructures WAN Application enable ubiquitous Device Office Server Profile web-based LAN User applications Device Profile Profile GSM/UMTS/ Connexion User WLAN + WAN • State-of-the-Art web Profile Context application design: of use desktop-style target Context of use platforms for fully- Trip fledged browsers Customer Device visit Profile • Today requirements User User imposed by the Profile Profile Device heterogeneity and Profile limitations of mobile devices are Context Context of use neglected of use 2 G. Hübsch, T. Springer – Dresden University of Technology

Adaptation as a promising solution Adaptation is a promising solution to overcome the increasing differences in requirements imposed by mobile device technology Application-specific Functional adaptation Application-Level Complexity adjustment Context Information Adaptation of navigation Structure-Level structures & dialog flows Layout, semantic and User-Interface and Widget-Level syntactic UI transformation Application-independent Today’s adaptation approaches focus on User-Interface-level and Widget-level adaptation and support single modalities 3 G. Hübsch, T. Springer – Dresden University of Technology

Dialog Description Language 4 G. Hübsch, T. Springer – Dresden University of Technology

Single Source Authoring Single Source Authoring uses generic dialog descriptions and • applies dedicated adaptation algorithms parameterised by context information to generate device-specific content representations Application Context Generic Information Description + Semantic DDL meta- information Adaptation algorithms </table> Description A <textblock> Description B Aber das sollte auch OK Description C <textcell> <textline> sein. Es folgt ein Bild, <f> Das ist aber egal </f> Dieser Text sagt das <text> </textline> sagt mehr als tausend Auf ihre Augen <textline> Worte: kommt’s nicht an auch nichts aus. <img src=“bild.gif”/> </text> </textline> </p> </textcell> </textblock> </body> <textblock> <textline> 5 G. Hübsch, T. Springer – Dresden University of Technology

Adaptation Concepts Semantic and Syntactic Dialog Adaptation (UI & Widget Level Adaptation) Context Informationen XSL Stylesheet selects - Device Class for HTML - Network type XSL - User Stylesheet preferences for WML Semantic Dialog Syntactic Adapted Adaptation Source: Adaptation Dialog: Generic (Selective Device (XSLT) Device Content, Independent Specific Fragmentation) Markup with Layout, Semantic Content and Annontations Markup 6 G. Hübsch, T. Springer – Dresden University of Technology

Dialog Description Language • XML-based device independent markup language for Single Source Authoring of web content and web application UIs • Separation of structure, content and presentation • Inheritance concept for content reuse <ddl> … • Inline meta-information governs adaptation <dialog> … • Language concepts support semantic and <part> syntactic adaptation <property name=“type“>label</property> … • Support for dynamic content and interaction with </part> application logic (MVC) … </dialog> • Modular adaptation pipeline implements adaptation … algorithms </ddl> 7 G. Hübsch, T. Springer – Dresden University of Technology

Dialog Description Language ddl Abstract DDL Syntax include head dialog class content src name name test extends extends test test meta part property constant name class name name content name part test extends test test reference #PCDATA constant property part test 8 G. Hübsch, T. Springer – Dresden University of Technology

Dialog Description Language ddl DDL Syntax - Example include head dialog class content src name name test extends extends <ddl> test test <property name="title">MyDDL</property> <dialog> <part> meta part property constant name class name name <property name="type">label</property> content name part test <property name="content"> extends test test Single Source Authoring </property> reference #PCDATA <property name="bold">true</property> constant </part> property part </dialog> test </ddl> 9 G. Hübsch, T. Springer – Dresden University of Technology

Semantic Adaptation Selective exclusion / Alternative content based on context information Context information query <part test="class='pda' or class='desktop'"> <property name="type">image</property> <property name="src">logo.jpg</property> </part> <part test="class='wap'"> <property name="type">label</property> <property name="content"> Rent-A-Bike Login </property> </part> 10 G. Hübsch, T. Springer – Dresden University of Technology

Semantic Adaptation Fragmentation: Approach to meet size and usability constraints imposed by the target platform and the network protocol through semi-automatic dialog splitting Atoms form Dialog-split calculated sematically by fragmentation indivisable units algorithm part part atom part atom part atom part part part part part part part part part part part Fragment 1 Fragment 2 Dialog 11 G. Hübsch, T. Springer – Dresden University of Technology

Semantic Adaptation Example: Dialog fragmentation DDL Atom 12 G. Hübsch, T. Springer – Dresden University of Technology

Adaptation Engine 13 G. Hübsch, T. Springer – Dresden University of Technology

Dialog Adaptation Architecture DDL Adaptation Engine Architecture (Simplified) HTTP Request Device ClientRecognizer Profiles Document URL Fragment URL Content FragmentGetter URLGetter Storage Image DDL ImageFilter XMLParser DOM DDLPreprocessor Transcoding DOM Servlet Fragment Fragmentation Cache DOM XSLT- XSLTProcessor Stylesheets smallHTML, WML HTML WMLCompiler HTTP Response Filter Configuration DocumentValidation 14 G. Hübsch, T. Springer – Dresden University of Technology

Application Logic and Backend Integration 15 G. Hübsch, T. Springer – Dresden University of Technology

Application Logic and Backend access Application logic interaction and Backend Integration Event-driven MVC pattern • Dedicated language extensions for resource interface • declaration, dynamic content sections and event listeners Integration with adaptation concepts and Adaptation Engine • DDL Event Handler Resource DDL Backend Access Resource <resource name="LoginHandler" <resource name="RAB_Data" class="tud.eventhandler.RabHandler"> class="sql.RABConnection"> <method name="validatelogin"> <method name="getreservations"> <param name="lastname"/> <field name="__label" /> <param name="account"/> <field name="__rid" /> </method> </method> </resource> </resource> 16 G. Hübsch, T. Springer – Dresden University of Technology

Structure-Level Adaptation 17 G. Hübsch, T. Springer – Dresden University of Technology

Structure-Level Adaptation Semi-automated adaptation of web applications with complex • user interfaces is important for high user acceptance and low development costs Different application dialog flows for one task • Serialisation of complex dialogs and user interactions • Adaptation through dialog modularisation • – Application user interfaces are described as a set Transactional Dialog Units (TDU) , e.g. authored in DDL Navigation structure TDU set UI & Widget-level Composition Adaptation rules 18 G. Hübsch, T. Springer – Dresden University of Technology

Structure-Level Adaptation: Example Example: Phonebook Application TDU 1: Search for… TDU 2: Structure-level Adaptation Search options TDU 3: Search results Navigation structure Composition rules 19 G. Hübsch, T. Springer – Dresden University of Technology

Future Research Adaptation & Multimodal Interaction 20 G. Hübsch, T. Springer – Dresden University of Technology

Adaptation and Multimodality Multimodal user interaction + Adaptation Context Device of Use, Capabilities Environment Current I/O modalities Device User Collaboration Preferences 21 G. Hübsch, T. Springer – Dresden University of Technology