Show Cases

Visit Siruna

Banner

Who's Online

We have 3 guests online
Component-based development of adaptive mobile web applications
Written by Heiko Desruelle   
Sunday, 25 July 2010 09:34
 
Introduction - Mobile has become a powerful mass medium, with a greater reach and faster growth than any other known media type [1]. However, not only penetration rates are starting to outnumber PCs, mobile technology itself is also catching up fast. Today, even devices from the low-end segment start to have internet access capabilities and support for browsing, e-mails, etc. The growing diversity of devices with internet connectivity has resulted in a boosted need for applications being available at any time, anywhere and on any device. 

Current technologies for the creation and delivery of mobile applications are however insufficiently prepared for this level of change. Without the appropriate platform or tool support, the adaptivity requirements remains the developer's responsibility to handle, which inevitably drives up costs and narrows the target market. This unbalance situation has led to the general believe that the development of platform-dependent mobile applications does not represent the future for the mobile industry.

The evolution towards the web as an application platform is gaining momentum. Standardized Web technologies try to overcome most of the restrictions plaguing native applications development and introduces browser technology as a universal client through which all interaction with the device is handled.

This blog entry summarizes the research from my master thesis, in which I tried to demonstrate the feasibility of the web as an application platform. An architecture and the necessary algorithms are proposed in support of adaptive Web-based application development.
 
Architecture - The architecture aims at extending web application frameworks with a portable library for component-based development. Components can be requested, whilst it is the library's responsibility to provide the necessary degree of adaptivity and autonomously select the optimal rendering. The decomposition shown in Slide 29 of the presentation below is at the heart of the proposed system. Given the client-device's capabilities, an optimal candidate is selected by pushing all available components through a filtering pipeline. This process is elaborated in the following section.
 
Algorithm - The suggested component selection algorithm will evaluate the suitability of the available components and autonomously select the most appropriate candidate. It encompasses the following four consecutive steps.
 
Step 1: Resource fetching 
 
A preliminary step collects all available components and their metadata. The metadata specifies the component type, priority settings and the device capabilities it requires for an optimal rendering. This will be the selection process's initial set of candidates.
 
Step 2: Type filtering
 
A coarse filtering is performed on the fetched candidates. Their defined types are matched to the requested component type. Only the matching candidates are passed to the following filter. This action aims at minimizing the next filter's execution time, as it is computationally the most complex part of the algorithm.
 
Step 3: Suitability filtering
 
The remaining candidates are evaluated and scored by matching their capability requirements to the requesting device. A naive tactic would be to apply simple Boolean logic, in which a component can only be accepted or rejected. This is an almost infeasible approach, as it would require the availability of perfectly matching components for each possible device configuration. Instead, the use of fuzzy logic is proposed to express a degree of similarity in terms of "maybe- ness". This enables the system to objectively evaluate all candidates and even take less-than-perfect matches into account if no better solution is available.

The suitability filtering relies on the Logic Scoring of Preference (LSP) method [2] with specific adaptations to fit the mobile context. LSP is a general quantitative decision method, initially designed for the evaluation, comparison and selection of complex hardware and software systems. Using predefined fuzzy distance functions, each of the candidate's required device capabilities are matched to the actual device characteristics. These functions express a percentage degree of similarity in which the device's capabilities match that certain requirement.

For each candidate, the individual degrees of similarity for the required device capabilities are combined  into one objective overall score. This aggregated score is used to determine the best-matching candidate. The basic aggregator mechanisms in LSP are based on the superposition of fundamental Generalized Conjunction/Disjunctions (GCD) [3], enabling the specification of aggregations in terms of 17 graded combinations of conjunction and disjunction. The equation below shows the GCD's Weighted Power Mean (WPM) implementation [4], with variables Wi  representing the relative weight for each individual score xi. The exponent r expresses the degrees of conjunction and disjunction.

 
Step 4: Conflict resolution
 
Conflict resolution is the algorithm's final step. The possibility exists that multiple candidates are evaluated with the same degree of overall similarity regarding the device’s characteristics. These conflicts are handled by upholding a priority-based selection policy. The component's priorities are predefined in their metadata and ensure that the final candidate selection will only contain one component.
 
Data structure - Each component consists of a metadata descriptor and a container for its markup, styling and scripting resources. For portability considerations, XML is used to specify the component's descriptor. The metadata contains an overview of the name, type and device capability requirements. No specific naming conventions are imposed for the resources in the container, as the required associations are specified in the metadata descriptor.
 
Proof of concept - In order to demonstrate the feasibility of this system, a proof of concept implementation was made for Joomla! [5]. This version mainly focusses on the previously identified technical and algorithmic challenges. In a second implementation phase, portability was explicitly verified by porting the system to Drupal [6], a technologically similar framework.
 
Results - A proof of concept for the Joomla! 1.5 framework was successfully implemented, providing the required means to cope with mobile platform fragmentation. It supports the creation of adaptive Web-based applications and offers developers the necessary flexibility to create and instantly deploy new components.

Various types of components were implemented, targeting a wide range of devices. Support was confirmed for low-end devices, feature-phones and smartphones such as Android and iPhone devices.

In terms of portability, the use of encapsulation and restricted communication paths in the architectural design have clearly separated the framework-dependent parts from the rest of the system. Providing a port to Drupal 6 only required the adaptation of the resource storage, caching service and device capability detection. The process of transferring actual components does not require any modifications, as they are completely independent from the underlying framework.
 
Conclusion - The proposed architecture provides a means for developers to cope with mobile platform fragmentation. We have developed an approach for the creation and delivery of adaptive mobile web-based applications. This system extends web application frameworks with component-based development capabilities and applies a mobile adaptation of the LSP method for performing multi-valued candidate evaluations.
 
References
[1] T. Ahonen, Mobile As 7th of the Mass Media: Cellphone, Cameraphone, Iphone, Smartphone. Futuretext, 2008.
[2] J.J. Dujmovic, A method for evaluation and selection of complex hardware and software systems. In: Proceedings of the International Conference for the Resource Management and Performance Evaluation of Enterprise Computing Systems (CMG96), San Diego, CA, USA, Vol. 1, pages 368-378, Dec 1996.
[3] J.J. Dujmovic, Preferential Neural Networks. Chapter 7 in "Neural Networks - Concepts, Applications and Implementations." Vol. II. Prentice - Hall Advanced Reference Series, Prentice Hall, pages 155-206, 1991.
[4] I. Batyrshin, O. Kaynak, I. Rudas, Generalized conjunction and disjunction operations for fuzzy control. In: Proceedings of EUFIT98, Vol. 1, pages 7-10, Sep 1998.
[5] Anonymous, Joomla!. http://www.joomla.org [Online].
[6] Anonymous, Drupal. http://www.drupal.org [Online].
 
Joomla!Days NL 2010: Building mobile websites with Joomla!
Written by Heiko Desruelle   
Sunday, 25 April 2010 14:38
Joomla!days Netherlands - 23 & 24 April 2010, Utrecht

 

Last weekend I gave a presentation at the Dutch Joomla!Days on how to deal with the complexity of mobilizing websites.

If you are looking for the slides, here they are:

 
Mobile progressive enhancement
Written by Heiko Desruelle   

Browsing on a desktop/laptop is a quite different experience than browsing on a mobile device. First of all, mobile devices can have significant limitations (small screen size, limited text-input capabilities, limited JS capabilities, ...). On the other hand, these devices also offer new opportunities (location-awareness, touch-based interaction, ...). 

 

The combination of these two facets is part of a project I'm currently working on. The goal is to optimize the presentation of Joomla! components based on the capabilities of the requesting device. As Joomla! components are (or at least should be :p) designed based on the Model-View-Controller (MVC) pattern, there is already a nice separation of concerns which makes a great starting point for this project.

 

I've looked at Progressive Enhancement (PE) and it seems an ideal approach in this context: As you design your Joomla! component, you should think in "layers". Start by making sure your component renders and works correctly on the lowest capable browser (= lowest common denominator). Next, for the more capable/recent browsers, you gradually improve functionality and presentation by adding layers of CSS and/or JS. This approach ensures an optimal experience for a broad range of devices.

 

You can create all sorts of enhancement layers for your component: Basic and andvanced CSS layers to enhance the style of your component. JavaScript layers to eg perform form-validation.

 

An other interesting option is to create layers which make use of specific device characteristics. These layers are selected based on the capabilities of the requesting device, so in addition, your component will need to perform device detection (eg WURFL), to be able to select the correct enhancement layers. Some examples: A JavaScript layer to hide optional form-fields on devices without a hardware keyboard, or one to detect the user's geolocation and mark the nearest store in a product catalog.

 

I've set up a small demonstration site, using the QuickCart product catalog component. For testing, the different enhancement layers are selected based on URL-parameters, but it can also be done using information from device capability detection.  

 

Lowest Common Denominator

A very simplistic view: no complex HTML, no CSS, no scripting. This will render correctly on any device. The following layers can be placed on top of this view. All layers are independent and can randomly be combined according to the characteristics of the requesting device.

Link: http://www.wafl.ugent.be/wcm/?mode=w

 

 

CSS Layer

Link: http://www.wafl.ugent.be/wcm/?mode=wc

 

 

 

CSS + Geolocation Layers

The geolocation layer calculates the distance from your current location to the different stores. Also the nearest store is marked as such. For this demo: if your device does not support geolocation, Ghent will be chosen as your current location. 

Link: http://www.wafl.ugent.be/wcm/?mode=wgc

 

 

JQuery Layer 

Link: http://www.wafl.ugent.be/wcm/?mode=wj

 

 

JQuery + CSS Layers

Link: http://www.wafl.ugent.be/wcm/?mode=wcj

 

 

JQuery + CSS + Geolocation Layers

Link: http://www.wafl.ugent.be/wcm/?mode=wcjg

 

 

JQuery + CSS + Orientation Layers

The  orientation layer adapts CSS based on the current screen orientation. In landscape mode, the screen is wide enough to place the item description next to its image. 

Link: http://www.wafl.ugent.be/wcm/?mode=wcjo

 

 

iUI Layer

Link: http://www.wafl.ugent.be/wcm/?mode=wi

 

   

 

 

iUI + Geolocation Layer

Link: http://www.wafl.ugent.be/wcm/?mode=wig

 

 

iUI + Orientation Layer 

Link: http://www.wafl.ugent.be/wcm/?mode=wigo

 

 
Interested in joining the dev-team?
Written by Heiko Desruelle   
Saturday, 12 December 2009 11:57

As I am currently the sole WAFL developer, things are progressing a bit slow. (WAFL used to be a university development project with 8 devs)

Please contact me ( This e-mail address is being protected from spambots. You need JavaScript enabled to view it ) if you are interested in joining the dev-team. We can talk about further WAFL development and how to kick-start the community. Because WAFL is popular and there are a lot of users out there (almost 4000 downloads in 6 months!).

 

Thanks!

Heiko 

 
New Siruna project: looking for testers!
Written by Heiko Desruelle   
Thursday, 20 August 2009 11:51

I am looking for Joomla! admins interested in trying out my latest project in cooperation with Siruna: an easy point and click website mobilizer with some nice optimizations for Joomla! Send me a message ( This e-mail address is being protected from spambots. You need JavaScript enabled to view it ) including a link to your site if you are interested. I will reply with more information and a beta-key to enter the program. Thanks!

 

Update: 

The new Siruna service has been launched. Please visit www.osmobi.com to try out this new mobile CMS experience!

 
WAFL configuration for Siruna
Written by Heiko Desruelle   
Wednesday, 22 July 2009 18:41

A short tutorial on how to connect the WAFL plugin with Siruna.

Step 1: Create a Siruna account and start a new mobile project

  • Register an account on our Siruna server. For now, the WAFL plugin only works in combination with our specifically adapted server. But we are working on a version, compatible with standard Siruna servers.
  • Login and add a new project. Don't forget to select Joomla as WCM (Web Content Management System)! Set the location of your Joomla! site as both the project base url and site homepage.
  • Click the 'view' button behind the title of your newly created project. We will use the parameters on this project information page (screenshot below) to configure the WAFL extension.

Step 2: Configure WAFL

Log in to the Joomla! administrator backend and open the WAFL settings page.

General options:

  • Siruna url: http://www.wafl.ugent.be
  • Port: 8080
  • Mobile url: http://www.wafl.ugent.be:8080 followed by 'mobile url' part from the project information page
  • Enable device detection: select 'yes' if you want WAFL to detect mobile requests and redirect them to Siruna
  • Base mobile template: template from which layout information will be extracted to generate mobile pages

Mapping:

  • Siruna username: the accountname you registered
  • Project id: you can get this from the project information page
  • Secret Key: generated by Siruna, copy it from the project information page
  • Project base url: the location of your Joomla! site

... Click save and you are ready to go!

 

Please use the forum if you need further assistance, things are not working out as they are supposed to be, or you just have some general remarks.

 

 
WAFL @ Joomla!days Netherlands
Written by Kristof Vandermeeren   
Thursday, 11 June 2009 12:13

WAFL will be holding a session tomorrow on the Joomla!days conference in Nieuwegein, the Netherlands.

 

Joomla!days Netherlands - 12 & 13 June 2009, Nieuwegein

 

More information can be found here.

 
Working on it
Written by Heiko Desruelle   
Sunday, 07 June 2009 18:26

Below, a screenshot of our latest internal WAFL version. As you can see, the automatic layout extraction has been drastically improved. Keep an eye out, we will try to release a new alpha soon! 


Beez Mobile

 
Second alpha version released!
Written by Kristof Vandermeeren   
Wednesday, 13 May 2009 18:08

We released a second alpha-version (0.1.1 or build 965 on our SVN)


  • Much faster device detection
  • Fully supporting the Joomla! cache
  • Some bugfixes
 
First alpha version released!
Written by Kristof Vandermeeren   
Sunday, 10 May 2009 17:26

Yesterday, we released the first alpha-version (0.1.0 or build 930 on our SVN) of our Joomla! extension. You can find it on our download-page. Please keep the following aspects in mind while using this release:


  • This is an ALPHA release and should NOT be considered stable.
  • The Siruna-mapping (”SirunaAdvanced”) will only work with the upcoming version of Siruna that has CMS Integration support. This version has not been made public yet.
WAFL screenshot

 

 
<< Start < Prev 1 2 Next > End >>

Page 1 of 2