Experiments with HTML, CSS, and JavaScript as a mobile development platform

One of the elements of our iPad research this summer was the exploration of development platforms for mobile devices. Earlier in the year I had completed a fun little RSS viewer using Dashcode. As exciting as this was I was left a bit perplexed at the complex code created to do something pretty simple.

I looked at native IOS apps and while I love Xcode and the ios developer platform it seems like overkill for the types of apps that libraries and academic institutions need. For example, one of the most important features of an academic mobile app seems to be the ability to easily update the content and to by default support multiple platforms. Neither of these goals seemed to be in sync with “native” apps.

As a third option I have spent the last few weeks examining the development of mobile-centric websites using a suite of web development tools. I just posted a ‘how to’ in the ZSR library tech explore blog for writing a simple mobile ‘app’ for the ZSR library using the jQTouch platform, a JavaScript and CSS framework that enables quick, simple development of websites that behave and look a lot like native iPhone applications.

Some of the really neat features detailed in the resources listed on that site were 1)the ability to cache files for offline use, 2) the ability to incorporate geographic data, video, etc and 3)the ability to write to a local database. This means that we could easily write websites that enable off-line use and capture of data, support geo-location and incorporate multi-media.

One challenge of creating usable sites is finding a good dynamic engine to run them. In order to build on the static app I investigated a python based development framework called Django. Django uses an MVC based framework to simplify the creation of dyanmic websites. I followed the Django tutorial. The process includes the creation of data models, site views and url path definitions. I took the static iphone site that I created and mapped the data into a data model and moved the html page into a site view.

While the resulting app doesn’t look very different, it is supported by a back-end database which enables the addition of new sites and features without manual coding. In addition, the separation of the view and model controllers meant that it was pretty easy to create and RSS proxy and JSON catalog search services to help make the site more dynamic.

The completed test app is located at http://erikmitchell.info/librware/site/1 and the static site is at http://erikmitchell.info/lita_mobile/static_site.

This entry was posted in software and tagged , , , . Bookmark the permalink.

Leave a Reply