O'Reilly book has a great PhoneGap tutorial

The draft of a new O’Reilly book titled iPhone Apps with HTML, CSS, and JavaScript is in the works.

Chapter 7, titled “Going Native” contains a wonderful introduction to PhoneGap. This is an excellent starting point for those of you interested in using PhoneGap or simply understanding what PhoneGap is.

Building out a mobile web application using iUI. Biased towards iphone users

A co-worker and I have taken up the task of building out a mobile application biased towards iPhone users but we intend it to work decently on other advanced smartphone platforms like Android or Palm Pre. As such, we need something that will work reasonably well cross-platform and not rely compeletely on webkit-specific tricks.

The de facto standard for developing iPhone websites has settled on iUI made by Joe Hewitt of Firebug for Firefox and Facebook for iPhone fame. Now that I actually own an iPhone i have come to realization that creating a standalone app through something like PhoneGap is not totally necessary because you can develop a reasonable facsimile of the iPhone interface using webkit and iUI without going through the appstore.

Since I work for a website that gets good traffic (top 900 Alexa in the world) I think I can add a mobile version that is invisible to desktop users and hopefully get into search engine mobile indexes by adding an unobtrusive link to a mobile-targeted version of the pages.

iUI is nice because out of the box it looks like a copy of iPhone including much of the interaction and page-flip animations. These animations work equally well on Safari and Android. This would be expected because my understanding is that both browsers use webkit.

Design decision 1: Mobile-specific HTML? Or mix in with regular site HTML?

A cool thing about these new smartphone browsers is that you could theoretically produce 2 different targeted stylesheets specifically for handheld vs. desktop users. Having a common HTML page with separate CSS stylesheets sounds enticing but you need to take into account how much you have contained on your standard HTML page. There is certainly a lot of cruft extra stuff on a page that would be overloading for a mobile webpage. Whereas on the desktop version of our pages we aren’t concerned so much about page real estate the mobile browser only gives you 480px of width to work with and although people would be more willing to scroll beyond the fold of a mobile browser five finger flicks worth of content probably only equates to 2 pages of a full-size browser window.

For my purposes I know for a fact that our standard pages have a lot of crap that simply isn’t necessary for a mobile user and that it would probably take more effort to hide unnecessary items through CSS than it would be to simply make a separate page template. If you’re a DJango or Mako template user, the case is even stronger because the first thing I would do is make your own mobile-dedicated skeleton template.

PhoneGap thoughts

I’ve been trying to figure out PhoneGap for about a week now and I’m just now starting to understand it because the documentation is sparse.

This is my understanding:

A PhoneGap application is a iphone safari window without the UI stuff: no bookmark bar, no scroll bar, nothing. Just a plain white canvas.

The iphone UI stuff that you see in a PhoneGap application are not really cocoa. It is HTML, javascript, css, and webkit special features (animations) cobbled together to look like a native iphone cocoa app. You could make it look like a regular web page if you wanted to. You have the option to do standalone (offline) apps or web-based apps.

I am finding that the best starting point is to look at apple’s safari dev center to get access to the special features that safari has for the iphone like HTML5 support and the CSS3 animations.

The phonegap js library provides hooks into iphone-specific functions like touch, accelerometer, and GPS. If you do not need that functionality you do not need to use the js files.

As far as I can tell the best thing to do is make a web app first then point your phonegap application to it using the configuration file (Settings.plist). Your phonegap app is essentially a safari window that depends on your HTML and CSS to provide all of the UI because this is a safari pane, it has no navigation or address bar, or anything.

You make a regular web site but it can have access to special iPhone features using the javascript library (phonegap.js) they provide. Other stuff like SQLite support is built into safari.

Look at the Apple Safari Dev center (http://developer.apple.com/safari/mobile.php) to figure out the interesting things that Safari can do. Do not bother looking at iphone dev, your phonegap app is really a Mobile Safari app.

The examples they have are kind of confusing because some of the stuff looks like native cocoa applications. It is not native cocoa, they are using HTML, CSS and Javascript to make stuff that looks exactly like a cocoa app but it’s actually a web page. What amazes me is a guy was able to make that blocks game in HTML and Javascript.

Syndicate content