Advanced Responsive Web Framework based on MPEG-21

JaeWon Moon Digital Media Research Center, Korea Electronics

Technology Institute, Korea Seoul, Korea

jwmoon@keti.re.kr

Tae-Beom Lim, Kyung Won Kim, Seok Pil Lee, SeWoom Lee

Digital Media Research Center, Korea Electronics Technology Institute, Korea

Seoul, Korea

Abstract — In the past few years, the rise of smart devices such as smart pad, smart phone and TV was extremely huge and that was the reason why responsive user interface started to play more and more important roles in the industry. Most users expect a scalable UI that is not only PC-compliant but is also adapted for tablet and mobile phone without any other configurations. In this paper, we propose a new advanced responsive web framework for the XML based user interface. To provide a generic solution, the proposed scalable framework language is implemented with MPEG-21 DID. The main task of this system is generating an adapted user interface for each use case automatically. While the service provider offers UI with multiple contents, the proposed framework provides more efficient, adaptable services compared to conventional methods.

Keywords-component; formatting; Responsve Web Design, Scalable Application, Metadata, MPEG-21 DID, ASMD

I. INTRODUCTION Adaptive Source Multi Device (ASMD)(Fig. 1) is a concept

to provide proper contents efficiently for supporting for the heterogeneous networks and the emergence of mobile devices[1]. It is recommended that user interface of ASMD needs to be designed for multi devices, multi platforms, multi browsers, multi users and sensor/event. Many service providers usually create a mobile version UI and address for an adapted interface. However creating mobile versions for each case and new device would be impossible and decreasing the productivity.

Responsive Web Design (RWD) [2], [3] is a key component to perform ASMD. It is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself. But not only device capabilities but also user environments and preferences need to be considered to provide more suitable UI/UX.

Ajax is a set of various techniques to change contents asynchronously to consider the usage environment supported by a web browser. This technique includes these elements: Standardized HTML and CSS for presenting, Scripting languages used on the server, XML and XSLT to process the

data, JavaScript to bind and process the data, XMLHttpRequest

object to operate data asynchronous. However, many of the developers and Web designers still code in Classic style because of the difficulties of technical integration.

In this paper, we propose an advanced responsive web framework for scalable web application to provide scalability in XML based user interface. To provide a generic solution, the proposed Advanced Responsive Web framework Language (ARWL) is designed based on the MPEG-21 DID [5],[6],[7]. The remainder of this paper is organized as follows. In section 2, we present our proposed Advanced Responsive web framework for providing scalable services. In section 3, we summarize implementation issues. Finally, we draw our conclusions and suggest future works in section 4.

II. ADVANCED RESPONSIVE WEB FRAMEWORK Advanced responsive web framework is a system to build UI

that alters how they look using traditional UI solutions like flash and java. That is, there is only one document for the page regardless of the device accessing it, but its presentation changes using parser to specify which item applies for the user’s browsers displaying the page. The goal of the advanced responsive web framework is to enable system to make scalable user interface whereby end-user state is modified for various and dynamically changing usage environments by using metadata and delivery-context. The proposed framework makes a single website that works effectively with PC, tablet and smart phone browsers regardless of device types. It

Figure 1. One Source Multi Use (OSMU) & Adaptive Source Multi Devices (ASMD)

2012 IEEE Second International Conference on Consumer Electronics - Berlin (ICCE-Berlin)

978-1-4673-1547-0/12/$31.00 ©2012 IEEE

consists of three parts: a server, an intermediary and a client. Each part can have filtering engines that can parse UI page from mark-up language to make an adaptable interface.

To prepare a responsive user interface, first Advanced Responsive web Framework mark-up Language (ARFL) document has to be created. It includes mark-up language describing user interface and delivery context information. The original legacy XML-based user interface is separately divided into resources based on ARFL schema. Then ARFL is composed with these Resource, Choice, Condition and Selection elements based on MPEG-21. The combination of MPEG-21 DID elements enable to give multiple choice of situations.

The adaptation process utilizing advanced response web framework is illustrated in the Fig. 2. When a user request is made for an ARFL document, it must pass through at least one ARFL parser before being presented to the end-user renderer. ARFL parser’s role is to determine whether to select blocks of UI/UX contents marked up with ARFL expressions based on MPEG-21 DID. The evaluation of these expressions requires the server system to query the control information to the client and wait for the client to send the delivery context. The delivery context (device capability, service policy, sensor information, user information and optional information) can

apply to the interaction between a client and the user interface. The ARFL server parser intercepts the client control information and analysis the client control signal containing delivery context after getting the information. We use three types of analysis engines (context-aware engine, object-detect engine and usage-history engine) to figure out user’s real condition. And ARFL document needs to be adapted using results from engines in advance of the server transmits to end-user device. If intermediary server is used in the system, result document from ARFL server parser can be remodified using intermediary server policy and the client group information. After parsing process, the client gets the result document from the server or intermediary server. If necessary, the result document from server (or intermediary server) can be adapted to use other private client information with ARFL client parser. By the end of the process, all content selections will be resolved. Filtered user interface result should be well-formed format and rendered by the legacy device without any other adaptation. Fig. 3 shows the example of how UI/UX contents are transmitted in compliance with the pre-defined profile level.

III. IMPLEMENTATION ISSUES In this paper, we simulated the responsive web framework for

several user environment variables: age, gender, language, time information, device type, illumination level and service level. Instead of building separate sites for each condition, we built only one ARFL document to verify our framework. This ARFL document describes all content information, resources and conditions and can be changed depending on end-user’s environment variables and the results from the server engine.

We considered a common scenario involving an online cooking class to verify the proposed system. Fig. 4 shows reorganized UI from the framework on browser of smart-phone, PC and tablet PC. First of all, server can adapt ARFL using device context, including device type information and user information. As a result, we can see filtered video contents and thumbnail images on PC browser, images and text on tablet PC. When the renderer window is narrow like a tablet, the vertical menu converts from a regular column of links into a slide menu. In the case of smart phone, ARFL client parser reorganized the result from the server parser again. In the above example, once

Figure 2. Advanced Responsive Web Framework Figure 4. Responsive UI/UX on smartphone, tablet and PC

Figure 3. Adaptive Contents Layer for profile levels

the selection and filtering process was performed, different set s of selected items can be rendered case by case.

IV. CONCLUSIONS In this paper, we propose a new Advanced Responsive Web

Framework for scalable UI/UX to provide scalability in XML based web user interface. To provide a generic solution, the proposed ARFL is implemented with MPEG-21 DID. Advanced responsive web framework offers many advantages over conventional approaches to web application development. The primary advantages of proposed framework are less contents complexity and tighten control for the service provider automatically. Future work will be on designing more intelligent responsive framework system. The system will sense automatically the surrounding environment. We will also continue the process of integrating other intelligent context-aware engines. The work will be extended to cloud computing environment and devices to provide lightweight services.

REFERENCES [1] R. Mohan, J. R. Smith, and C.-S. Li, “Adapting Multimedia Internet

Content for Universal Access,” IEEE Trans. Multimedia, vol. 1, no. 1, Jan.-Mar. 1999

[2] B. Frain, “Responsive Web Design with HTML5 and CSS3”, Packt Publishing, April. 2012

[3] E. Marcotte, “Responsive Web Design”,Eyrolles, september. 2011 [4] N. Serrano, J.P. Arozegi, "Ajax Frameworks in Interactive Web Apps,"

IEEE. Software, vol. 24, pp. 12-14, Sep 2007. [5] ISO/IEC IS 21000-7 Information technology – Multimedia

framework(MPEG-21) – Part 7: Digital Item Adaptation, December 2007, ISO Publication

[6] ISO/IEC IS 21000-2 Information technology – Multimedia framework(MPEG-21) – Part 2: Digital ItemDeclaration, October 2005, ISO Publication

[7] Content Selection for Device Independence(DISelect), R.Lewiset et al., W3C Working Draft 2 May 2005.