Show Cases

Visit Siruna

Banner

Who's Online

We have 2 guests and 1 member online
Mobile progressive enhancement
Written by Heiko Desruelle   
Monday, 21 December 2009 13:57

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

 

 
It has begun
Written by Kristof Vandermeeren   
Thursday, 05 March 2009 12:14

Earlier this week, we actually started coding. Yay! Things are looking good and everybody’s (still) optimistic.

Also, the general description of our project is now public. Go check it out!

 
Are we there yet?
Written by Kristof Vandermeeren   
Thursday, 07 May 2009 13:25
A feature list of our platform has been released. We will release our 0.1.0 alpha for Joomla! very soon. Stay tuned!
 
More Articles...
<< Start < Prev 1 2 Next > End >>

Page 1 of 2