Monday, May 23, 2011

Cross-platform web applications

Utilizing the advantage of browsers, a web application is usually preferred when developing a new program specializes in mobile devices. It not only brings the benefit of platform independence since it can run on any devices that have a browser; it is also a cheaper and easier way for implementation. However, there are numerous browsers (Firefox, Chrome, Opera …) and many mobile OS platforms (Android, iOS, Windows Phone …), thus a web application needs an extra layer on top to recognize and treat each browser and platform differently and properly.

            1. DEVICE AWARENESS
            “Device awareness is the process of using information in a Web request to identify a
mobile browser or device and determine its capabilities.” By knowing the capabilities, the mobile web could determine what kind of layouts, scripting, styles … are the most suitable for a particular device. There are two steps to analyze a device to diagnose device abilities.
            Using HTTP Request Headers to Identify Mobile Devices
            Whenever a browser sending a request to a web server, it sends several headers that contains information about itself. These metadata are used to identify the device, especially the following three headers:
            - The User-Agent header identifies the mobile browser and almost always also identifies
the mobile device manufacturer and model.
            - The X-Wap-Profile header provides a URL to a User Agent Profile, a document that describe the capabilities of the mobile device and browser.
            - The Accept header provides a list of MIME types for content supported in the browser or
device. For example, .gif .png or .jpg types are supported.
            Using a Device Database to Obtain Device Capabilities
            After getting those headers, their information are used to query from a Device Database to retrieve all the characteristics of the device. A Device Database could be a XML, JSON file or could be a DBMS provided by the device vendors which contains the APIs for many popular web runtime frameworks.
            There are two famous Device Databases are using: the Wireless Universal Resource File (WURFL) and DeviceAtlas 
           
            2. CONTENT ADAPTATION
            Content adaptation is the strategy of customizing mobile markup, styles, and scripts for groups of mobile devices with common capabilities. Content adaptation uses the principles of device awareness to identify devices and browsers and group them according to shared properties.
            Creating Device Groups
            Base on the capabilities of each device, they are divided into many groups that have same characteristics. For example, group of browsers supporting JavaScript and AJAX, or WML only; group of devices have 320 pixels screen or less or more.


            Choosing Adaptation Points
            For each group specified above, a certain technology is determined to be used to be able to adapt its abilities. For instant, a website targeting all devices might need to provide a WML page for old browsers while targeting smartphones only need to have a CSS to support landscape screen orientation.
            Writing Content Adaptation Rules for Device Groups
            Content adaptation rules are specific numbers that need to be implemented for each group. A 320 pixels screen size could have maximum 750 characters for a message, or excluding Webkit CSS extensions for groups that does not support Webkit are some particular rules need to be applied for each group.
            Implementing Content Adaptation
            The last thing need to do for this layer is implementing all the tasks above using PHP code. Overall, a web application needs to have one more layer to realize the device and its supports to give the best mobile user experience.


            3. DIAGRAM
           






REFERENCES



No comments:

Post a Comment