I have been doing research into mobile frameworks that could help in the development of mLearning apps. Besides the native software development kits (SDKs) for iOS and Android, there are a number of frameworks available that use HTML/CSS and JavaScript for mobile web development. The most popular of these frameworks seems to be JQuery Mobile. DreamWeaver 6 JQuery starter pages that make it very easy to get going.

These starter pages all provide all the required JavaScript libraries to get started. In DreamWeaver, you can view the HTML source code side-by-side a live preview and also pick from JQuery Theme Swatches to change the appearance of headers, page content, buttons, etc.

If the five default themes don’t meet your needs, you can create your own custom theme with the JQuery ThemeRoller and download it to your local site.

DreamWeaver 6 makes it easy to create the pages of your mobile site; just insert JQuery items, like buttons, sliders, checkboxes etc., then link and style theme as needed.

For testing on mobile devices, I used Adobe Shadow, a nifty little app available for both iOS and Android devices. This app mirrors a desktop webpage on any number of mobile devices. As you make changes to your page/site, these changes are reflected instantly on the connected mobile devices.

If you want to turn your mobile site into an app, DreamWeaver 6 provides another great enhancement: the PhoneGap Build Service panel. PhoneGap is an open-source framework that allows developers to build a mobile site with HTML, CSS and JavaScript and then:

1. Add access to native phone features, e.g. access to a phone’s accelerometer
2. Package the mobile site as an app for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian.

Once you sign up for PhoneGap’s Build service and set up the requires certificates and provisioning profiles, you can package a mobile site into an app right from within DreamWeaver 6.

The Build Service panel even provides QR codes for app download directly to a mobile device.

I’m not an expert in HTML, CSS and JavaScript, but even I could build a simple mobile site and package it as apps for Android and iOS. View the video below to see my test app running on an iPhone.

Best of all, the whole process only took a couple of hours; imagine what an experienced HTML/CSS person can do with this workflow!

In my test app I purposely used long lists that required scrolling. As expected, the app was not as responsive to scrolling and touch inputs as a truly native app would be. But then again, this is a small price to pay for the advantage of developing a mobile app ONCE and deploy it to several mobile platforms with a few mouse clicks.