Mobile Web Portal

From Door43

Contents 1 Tools 2 Implementation 2.1 The Main Idea 2.2 A more detailed approach 3 Why do it this way? 4 Resources

Update: please read this post that introduces the initial release of the Door43 Mobile Web Portal: http://www.dsmedia.org/blog/introducing-door43-mobile-portal.

The Mobile Web version of Door43 is taking a different approach than doing a standard "mobile view". We are designing the mobile version of the website to function in a similar way as the low-end mobile phone app version.

Tools

PHP - The mobile version is a single PHP script.

jQuery + jQuery Mobile - for user interface & other magic.

Implementation

The Main Idea

• All pages are rendered as straight HTML with no (or mobile-friendly custom theming), wrapped in jQuery Mobile headers/footers.
• All links are rewritten so that they pass through the mobile script and can be rendered accordingly.

A more detailed approach

Some pseudo-code / prose to sketch it out:

1. The PHP script (e.g. http://en.door43.org/m/index.php) checks to see if it has been passed a parameter in the 'page' GET variable. If not, it retrieves the default home page (Mobile Home) for the host from which it was called (e.g. en.door43.org, id.door43.org, etc.) by passing the "action=render" parameter to MediaWiki's index.php script (more here)

   $page = "wget" http://en.door43.org/w/index.php?title=Mobile_Home&action=render

2. The retrieved content in $page is processed for links that are internal to the Door43 wiki family (e.g. http://en.door43.org/wiki/Stories or http://xog.door43.org/wiki/Engero). These links are parsed and rewritten so that they pass back through the script (e.g. http://en.door43.org/m/index.php?page=Stories, http://xog.door43.org/m/index.php?page=Engero).
3. The rendered page content with the rewritten links is reassembled, with headers and footers set to be jQuery Mobile compatible, and rendered in the browser.
4. When the user clicks on link from their phone browser, the mobile script is called again and the process repeats for each link in the called page.

Things to consider:

• Media handling - downloading audio/video files
• Image display - dynamic downscaling?
• Caching - tapping into the APC cache to improve the user experience

Why do it this way?

Two reasons:

1. It should be relatively straightforward to make functional across all languages with minimal coding and UI translation
2. It will pave the way for the mobile apps which will likely use the same kind of approach, but with one significant addition: the mobile apps will cache everything on the device and will only download content over a data link if the requested content does not already exist on the device. This provides two immensely important things: data persistence (your content is on your phone when you have no data connection) and less expense, which is a crucial consideration in regions of the world where data downloads are costly.

Resources

• http://www.mediawiki.org/wiki/Manual:Parameters_to_index.php#Actions
• http://us2.php.net/manual/en/function.parse-url.php
• http://us2.php.net/manual/en/function.http-build-url.php