HTML5 mobile development using HTML5BoilerPlate

Question

I'm starting a HTML5 mobile application with HTML5BoilerPlate as a template and I cannot find a lot of resources regarding the best practises for HTML5 mobile development. I am looking for stuff such as:
- navigation using tab bar controller
- navigation between view
- how to best handle content ? (is it better to use several divs within the content div and only show one div at a time ?)

In fact, I'd like to understand some of the things done in Google Latitude.

Is there any good beginners guide for those items ?

Answer 1

• You have to implement a lot more of the logic around these 'controller' components. Some of the classes that might be present in iOS development are not in HTML5. You either need to roll your own or use an existing framework.
• Navigation between views is handled programmatically. You would need to do it yourself, by implementing components that can animate to/from the screen, or use one of the readily available frameworks like Sencha Touch or jQuery Mobile.
• It depends on how you want the visual flow to work. I know that Sencha Touch adds in the divs lazily so not to take up as much memory. I guess the trick here is to experiment to find the best implementation that suits your needs (and then write a blog article).

SixRevisions has a pretty good article on getting started in general HTML5 programming. Some other articles, here, some good tips here, and Apple's docs.

The best beginner guide that I found for Sencha Touch was their examples included with the source code. They have an example for just about every UI control they ship and multiple applications that will gently introduce you to the framework. Other resources include their Vimeo Channel, their forum, and their docs.

Also, you can probably pull up a mobile site and take a look at how they are implementing their code using Chrome/Safari's developer toolbar. You may have to emulate a user agent string of a mobile browser though.

Answer 2

We have released a Mobile Boilerplate and the documents in the associated wiki are definitely something you should look into for info about this.