ASP Mobile Web Site
Here’s the “problem”:
Develop a new mobile web site. Make it standards compliant, and ensure it supports ARIA. Best to use the latest technology (i.e. HTML5). Site needs to leverage content contained on self-hosted WordPress-based site … both from posts and pages. Should use static pages so that it can be hosted, 100%, on the Content Distribution Network – requiring no web server!
The über-simple solution is to use one of the WP plug-ins that will handle this chore … however … most WP-based sites have more content then you want to include on a mobile site! So how do you do something new, while leveraging the old?
Break it down …
(1) Mobile site using new technology that supports ARIA, and multiple platforms — plus it needs to degrade gracefully.
The toolset of choice will be jQuery-mobile. It handles all those pesky ARIA, HTML5, and “degrading gracefully” requirements. And who doesn’t like designing with the latest and greatest new tools!
(2) Getting my content OUT of WP.
Face it, while WP is an impressive tool, there are times you want to re-purpose your content. WP does not make this too easy without using PHP and the “loop” – which “fails” the requirement for no web server. How about using RSS … it gives you static content? Well WP natively supports RSS for posts and comments (both posts and pages) … but not for pages! Enter the WCM Page Feeder plug-in for WordPress. Now, by simply adding “?feedpage” to the end of the page URL, you have the RSS feed … and static content!
(3) Okay, I have my RSS, now what?
Since we are already using jQuery and iQuery-mobile on our static pages, let’s see what jQuery plug-ins exist for our needs. The jQuery plug-in pages list a number of potential solutions — but the best solutions came from zRSSFeed and the jQuery Google Feed Plugin. These both employ the Google Feeds API. After “experimenting” (read “playing”) with both, I decided on the zRSSFeed plugin since it would allow me to have more control over the RSS content that was used.
(I did need to make one small change to this plug-in. The plug-in automatically made every RSS ‘item’ a list item in an unordered list. That’s great for a traditional RSS feed where you may have 10 items, but doesn’t make too much sense for a web page that only has one item. So I modified the plug-in to not put the RSS ‘item’ into an unordered list when there is only one RSS ‘item.’)
Now I have the ability to simply parse a URL of the RSS feed and I have my content … all I need to do is to create pages for each of my various items I want to have on the site … no, no, no … that is way too much work! How can we create a static HTML page that will do the work for us?
(4) Code the “template page” with a Javascript-based URL parser!
Using development languages like PHP, Coldfusion, or ASP, passing URL parameters and using them for content is an easy thing to do … but what about Javascript and a page that is only processed by a browser … not a web server? Enter the simple Javascript to parse the contents of a URL (well, maybe not “simple” — it does use RegEx):
function get_url_parameters( parseme )
{
parseme = parseme.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]" + parseme + "=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
So now, we can have a static HTML file, that we pass the URL of the RSS feed to, and it will parse and display!
(5) Run on CDN without a web server?
Yup … if you use Amazon Cloudfront, you can set the “default root object” for a distribution, which in this case will be index.html (which spawns all the wpcontent.html calls) — and viola — instant web server without spinning up a new server process, and a global CDN to boot!
You can check this out by pointing your smartphone at http://aspfab.com/ (which will automatically forward you to the mobile site) — or by pointing your browser to http://m.advancedsolarphotonics.com/. The page that does all the heavy lifting is wpcontent.html (and yes, I gave it a default behavior, just in case it gets called directly).
