The App Structure

The following is the app folder structure. As mentioned in Part I, we used jQuery and jQuery mobile as the mobile javascript frameworks for the colour match app.

- www
-- js
--- jquerymobile.js
--- colourpicker
--- jquery.js
--- script.js
-- css
--- images
- phonegap.js
- index.html
- results.html
- details.html
- favourites.html
- picker.html
- popular.tml
- about.html
- plugins
....

The app structure for www folder is very similar to a website folder structure. In fact, you can basically take www folder and upload it onto a web server to run the app as a web app. The structure is very straight forward; javascript files in JS folder, CSS and presentation images in CSS folder and all the templates in the root folder. phonegap.js is the Javascript file that comes with PhoneGap and is necessary in order to use PhoneGap APIs and plugins.

The components from jQuery mobile used within the app are Single page template, Header bars, Buttons, Layout grids, Select menus, and List views. We created a custom theme in CSS so the look and feel of those components are customised for the app.

Troubleshooting XCode/PhoneGap Issues

We encountered a few issues with XCode and PhoneGap during development.

1. Unable to talk to web service APIs

When the app was running as a web app, everything was working well, but as soon as we put it onto XCode, the colour picker no longer worked – it didn’t return any result. This was caused by PhoneGap file download restriction and to resolve the issue, the following values in PhoneGap.plist file were updated:

OpenAllWhitelistURLsInWebView: YES
ExternalHosts
 - thedomainforapi.com

2. PhoneGap APIs and Plugins were not working

We were using a few PhoneGap APIs and Plugins but some of them were not working at all. It took us a while to isolate the issue, but the problem was because we were using Prototype Javascript Framework for Colour Picker and Prototype and PhoneGap don’t work together. Rather than trying to hack Prototype Framework, we removed it altogether and refactored the Colour Picker.

3. Some PhoneGap plugins were throwing ARC errors when compiling

Disabling ARC for specific files did the trick.

Installing certificates & provisioning profiles

Once we have the code ready and tested on Simulator, we wanted to make sure it worked well on the device as well. In order to deploy the app onto a real device, we had to install a provisioning profile and a certificate. The process requires a few steps, but if you follow this article, you should not have any problem. For installing certificate and profile for distribution (ie: submitting to the app store), we followed this article. (Thanks, David!)

iTunes App Store Submission Process

Surprisingly, the process of submitting the app to iTunes App Store wasn’t as hard as installing certificates & provision profiles. Refer to slide 32+ of this presentation for screenshots. The slides are a bit dated as we didn’t have to download Application Loader separately, it already came with XCode 4.

Finally… how long did it take to get it approved?

We submitted the app on Saturday (midnight Friday) but we had to cancel the first submission and resubmit the app again on Tuesday due to some last minute changes. The app was approved the following Monday around 4am (Australian Eastern Standard Time Zone (AEST)). We received an email from the app store around 2am which said the app was under review and at 4am, we received another email saying the app was approved and ready for sale. Reading the guidelines before submitting the app to ensure the app complies with the App Store Review Guidelines must have helped us.

Feel free to download the app from the app store to see it in action.

If you are interested in getting an iPhone/iPad application that uses web technologies for your company or organisation, contact us at Anansi Web Development to find out how we may be able to help you.

Other useful articles

We have written a few articles in the past on developing for iPhone and iPad and working with PhoneGap which you might find useful:

• Embed a YouTube video iframe in a phonegap app
• How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins
• 10 Useful Javascript Snippets for your mobile websites
• How to use hi-res images in web apps for iPhone4
• Top 10 jQuery Mobile Code Snippets that you need to know
• Five Important Steps into iPhone App Development for Beginners
• Designing and Optimising Websites for iPad
• How to disable text auto correction in iPhone web app
• Tips for iPhone Web App Development

Last week, we submitted an iPhone app to iTunes app store. This week, it was approved by Apple and the app is now available for download from the app store. Since everyone knows that HTML5 and app development is the future of mobile space, we’d like to share with you our experience of developing an HTML5 iPhone app using jQuery mobile & PhoneGap.

About the app
The app is called “Colour Match” and the purpose of the app is to allow users to pick any colour using a colour picker tool and display clothing & accessories that match the colour from Online Shopping USA database. Features of the app include a colour picker, a selection of most popular colours for easy browsing, favourites where users can save their favourite products and email, facebook and twitter sharing.

Technologies used
The technologies used for the app are:
- jQuery 1.7.1 + jQuery Mobile 1.0.1 (Javascript framework)
- PhoneGap 1.4.1
- HTML5 (template structure & Web SQL database storage)
- CSS3 (webkit animations and layout)
- PHP for web services (a few custom web services were written to obtain data from a mySQL database that resides on web server)

PhoneGap plugins used
We used the following PhoneGap plugins to provide native features that are not possible to implement using Javascript/HTML.
- Twitter
- ChildBrowser
- EmailComposer

Development timeline
It look us about a week to come up with the concept and fine-tune requirements before starting the actual development. The HTML5 + CSS development took less than a week as jQuery mobile made it pretty easy to have a working functional app within a few days. The design of the app took a few days. Most of the development time was spent on writing web services in PHP and writing a system that automatically scans images and picks the most appropriate colour. It took us half a day to set up Xcode, PhoneGap, provisional certificates etc (mind you, this wasn’t the first time we did this, but it still took us some time because we are not very familiar with a Mac computer). Then one full day was spent integrating and intalling PhoneGap plugins into the app, and finally submitting it to iTunes. All up, it took about 4 weeks from the start of the project to the day the app became available on iTunes app store.

—

Part II will cover more technical details such as the app structure, submission process to iTunes, installing certificates and troubleshooting XCode issues.

We’ve put together some of the best holiday sales for web designers and developers. Enjoy!

The book is written for jQuery Mobile Beta 2 which is the current version of jQuery Mobile and there are 3 parts to the book.

Part I covers the basics you need to know about jQuery Mobile. The thing I like about it is that it contains a lot of sample code, so if you like to create a website while reading the book, you can do so easily with the help of sample code. The tutorials in Part I is great for someone who wants to just get a simple mobile site up and running without wanting to worry too much about the UI and the nitty gritty details.

Part II focuses on the fundamentals of building user interfaces with jQuery Mobile. It covers dialogs, forms, navigations, lists, header, footer and other essential elements of a website. I particularly liked the “Creating Forms” chapter because it contains a lot of information about different input elements and attributes that you can use in jQuery Mobile. Forms are one of the most trickest elements in web designs and it is very helpful to have the whole chapter dedicated to this subject. If you are looking to create a mobile web application that uses forms, this chapter is a must-read.

Part III is titled Beyond the Basics and it contains 3 chapters; themeing jQuery Mobile, the jQuery Mobile API and a complete web app example. As you probably already knew, jQuery Mobile comes with 5 default themes that you can choose from, but more often than not, you need to create a custom theme that suits your website or web app. Themeing jQuery Mobile chapter explains just how you can do that with an example red theme. The jQuery Mobile API is another favourite chapter of mine because when I was developing in jQuery Mobile a few months ago, there weren’t a lot of resources available on how the API works, in particular, the methods and events available. It could have saved me a lot of time if only I had this book back then. The last chapter in Part III is a complete web app example. The web app example uses PHP5 for the back end and as the title suggest, it is a complete app, meaning you can take the example code, upload it to your web server and have a fully functional web app in jQuery Mobile.

Overall, the book is an excellent book for developers who want to dive into mobile app development with jQuery Mobile. There are a lot of screenshots, code examples and references to help you get started. What I like most about the book is that it’s written by a developer for developers which means the tutorials are easy to follow and will get you up to speed on the basics of app development in no time.

PhpRiot PHP Reference

This app gives you full access to PHP manual, Zend Framework programmer’s guide and Smarty Template Engine manual. There is also a quiz training system, which you can use to test and improve your PHP knowledge.

iHTML

This is a must-have utility app for web developers as it displays HTML source of a web address. There are two modes available; on Portrait mode, it displays raw HTML and on Landscape mode, it shows a web view alongside the source.

CSS UNIT Converter

This is a quick and easy conversion calculator for Front-end developers working with pixels, ems, percentages, and points. It lets you convert a font size in pixel to em, pt and % easily. The conversion table is very useful because you can see all the different values in a single screen.

CSS Quick Reference

CSS Reference app provides handy access to all of the W3C’s Cascading Style Sheets (CSS) properties, pseudo-classes and pseudo-elements, including the syntax (with the equivalent JavaScript syntax for the given property), possible values for each property, usage notes, and fully rendered sample code. The sample HTML code can be edited and re-displayed using the built-in browser which mean you can try different values and see how it looks without having to use another CSS Editor.

Mobile CSS Reference

Mobile CSS Reference gives you descriptions, examples, syntax and limitations of CSS properties and selectors on a nice UI.

WhatTheFont

This app lets you identify the fonts in a photo or a screeshot. So the next time you see a great font in a magazine ad, poster, or on the web, you can just take out your iPhone and snap a photo, and WhatTheFont will identify that font for you. This app requires Internet connection and works via Wi-Fi or the mobile phone (3G) network.

Linux Command Reference

With Linux Command Reference (LCR) app, you can access to the most widely used Linux commands to date. Although this app doesn’t cover every single Linux command, it is a good “starter” for anyone who’s just starting out with the Linux operating system.

JSInt

JSInt is an interactive JavaScript console which lets you perform mathematical calculations or for learning JavaScript. Just input your Javascript statement in the console and it will return you the result. For example, if you enter parseInt(5.135, 10), it will return 5. JSInt uses JavaScriptCore Open Source library which implements JavaScript 1.5 / ECMA-262 3rd edition.

Chmod

Chmod is a handy little utility app for determining file and directory permissions on Mac OS X, Linux and Unix operating systems.

RGB Colors

RGB Colors iPhone app show you the color of the RGB combination that you choose using the sliders provided. It will be useful when you want to use rgb or rgba values to declare a color in CSS.

WordPress

WordPress app enables you to manage your WordPress blog or site from your iPhone device. With this app, you can moderate comments, create or edit posts and pages, and add images or videos with ease. All you need is a WordPress.com blog or a self-hosted WordPress.org site running 2.9.2 or higher. I have written a step-by-step guide on how to use WordPress iPhone app.

Dropbox

Dropbox app lets you access all your photos, docs, and videos saved in your Dropbox account from your iPhone. Not only does it let you access the files, you can also save photos and videos into your Dropbox account from your iPhone.

PassGen

PassGen generates a random password that is between 4 and 16 digits and comprised of upper and lower case letters, numbers and special characters. It can also be used to generate Hexadecimal passwords. Once a password has been generated, it can be emailed.

Coupons for Godaddy Domain names

Any order (eg: SSL certificate, Domain Name, Hosting, etc)

Check out and like our Webmaster Resources page on Facebook for your chance to win USD 30*!

on.fb.me/webmaster-resources

* will be given as paypal gift.

Myer Store Locator

Store Locator for iPhone
Get your business found by many smartphone users all over Australia.
Let your customers locate your stores quickly and easily.
Obtain an easy-to-remember web address sitelocator.mobi/yourstore
No need to install anything! Just touch and go!

SIGN UP NOW!

What does it do?

The iPhone Store Locator is a store locator web app that works by postcode or your location via GPS. There are two main components to the Store Locator app; front end and back end.

The front end allows users to locate a store or a business by postcode or by their current location (using iPhone’s built-in GPS). The app will find up to 5 store locations nearby that are within approximately 25 kilometers (15 miles) radius of the specified location.

The back end allows franchise owners and service providers to add the locations of their offices and stores from a web based system and this will automatically geocode addresses. The web based back end enables businesses to add, edit and delete store locations from anywhere via a simple user interface. Businesses can also customise the brand of their front end app by uploading a logo.

Why a web app instead of a native app?

One of the most common questions asked is why we chose a web app over a native app for this project. There were quite a few reasons why we went this way, but let us highlight 3 main benefits for businesses and developers.

1. Benefits For Businesses/Clients

Accessibility (No Download/Install)

There are some popular Store Locator native iPhone apps on App Store like Starbucks Store Locator and McDonalds Store Locator. However, the problem with a native app is that you need to download and install the app first before you can use it. And most people who just need to use the app every once in a while are not likely to download the app. This is why web apps are better. If, for example, you are looking for the nearest Myer store while you are on the road, the first thing you would do is go to Myer website. And on Myer website, you will see a banner ad with a special message for iPhone users that goes something like “Looking for a Myer Store near you? Click here!” and once you click/touch on that link, you will be taken to the Myer Store Locator for iPhone. Since it is a web app, you don’t need to install anything at all. All you need is Internet connection and WebKit-based browser which you already have with your phone.

Portability

With native iPhone apps, the app is only available for one single device – the iPhone. However, with the web app, we have developed it in such a way as it is compatible with most browsers so you can use it not just on an iPhone but also on other smart phones like Android, HTC and Blackberry. It is a great win for businesses because they are able to reach broader smart phone users on multiple devices and platforms with one single app.

Cost Saving

Getting a web app developed is much cheaper compared to getting a native app developed. With Store Locator for iPhone, business owners get the best of both worlds. Unlike having a website where the business owner has to manage hosting, domain name registration, etc, Anansi Store Locator is a hosted solution and therefore all the technical details are looked after by Anansi. There is no need to spend thousands of dollars on development or server infrastructure. Since the app is already developed and hosted by Anansi, all you need is to pay for is a subscription fee. Users of the app won’t need to pay anything as it will be available for free on the web.

2. Benefits For Developers

Ease of Maintenance

Since iPhone web apps don’t need to be approved by Apple to be listed on App Store, the developers (Anansi Web Development), can release updates whenever necessary. Updates take effect immediately the moment they are deployed onto the web server, as oppose to native apps where updates have to be installed by the user on their iPhone. As a web app developer, you can be sure that every user of the app is using one single version, whereas with native iPhone apps, it is possible for users to be using different (outdated) versions.

No Sharing of Revenue Stream

Apple takes about 30% of the price from iPhone apps sold on App Store. However, with web apps, the developer doesn’t need to share the revenue. The cost of running/hosting the web app works out to be much cheaper than sharing the revenue with Apple.

Full Control

Native iPhone apps are like desktop apps that are installed onto your mobile device while web apps are accessed from a web location via a URL. Having a web app means the developer has full control over the app, when it comes to configuring, deploying and upgrading the app. It suits our business model because we need to allow business owners to be able to sign up and make their Store Locator app available as quickly as possible, and this is not possible with native iPhone apps where you have to go through approval from Apple to be listed in the App Store which could take at 1-2 weeks.

iPhone web apps, however, are not without its flaws. Web apps are generally not as sexy as a native app. However, in our case, we are developing a utility app, not a game app, and therefore sexiness is not a requirement! The user interface for the iPhone Store Locator is designed to look and feel like a native app so we feel we are geting the best of both worlds. If you are interested in taking a look or signing up for your business, check out the app site or contact us at any time.

1. First Post
The first ever blog post for Web Development Blog was written almost 5 years ago, on Christmas Day 2005. It is titled Welcome to All Things Web.

2. A post I enjoyed writing the most
I enjoyed writing almost all the Web Development Tutorials on this blog, because writing them gives me a sense of satisfaction from sharing my knowledge with other developers all over the world.

3. A post which had a great discussion
I wrote a tutorial on Removing file extension via .htaccess 3 years ago in 2007 but it is still the most popular blog post on this blog, linked by many and have the most number of comments – mainly by developers and webmasters asking questions or helping each other.

4. A post on someone else’s blog that you wish you’d written
This is a very tough one because there are many blog posts that I like. But if I had to choose one, it would be Why all programmers should blog written by Joerg Mueller. I personally would like to see more blogs by programmers and developers. I think we have way too many designers blogs but not as many developers blogs.

5. Your most helpful post
My most helpful post has to be Web Hosting Comparison Chart that I put together. Before publishing that post, I received many emails from friends and blog readers who asked me the same question, Which host do I recommend? It is very hard to recommend a single hosting company to everyone because the requirements for every website are different. But after writing that blog post, whenever someone asked me the question, I could just give them the link and they can make their own decision. In my opinion, helpful posts are the ones that provide an answer to a question.

6. A post with a title that you are proud of
I am not much of a copywriter, so my post titles are never entertaining or catchy. But this title certainly catches almost everyone’s attention, “Making a Passive Income Online“. And I am proud and amazed at the same time because I didn’t even try hard to come up with that title.

7. A post that you wish more people had read
I wish more people read my rant “So you don’t like ads on websites/blogs” and gave their 2cents worth.

Screen Resolution
1024×768 pixel resolution (9.7-inch (diagonal))
This is as big as a normal computer screen. According to the Analytics stats for this Web Development Blog, 10.47% of the total visitors have 1024×768 pixel resolution.

User Agent String

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10
(KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

This is useful if you have a device detection script on your server that redirects mobile devices to a different website. For example, since iPad doesn’t support Flash, if you have a flash website, it is a good idea to redirect iPad visitors to the HTML version of the website.

CSS for iPad

<link rel="stylesheet" media="only screen and (min-device-width: 768px)
and (max-device-width: 1024px)" href="ipad.css" type="text/css" />

<link rel="stylesheet" media="all and
(orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and
(orientation:landscape)" href="landscape.css">

As with optimising websites for iPhone, you can specify a CSS file just for iPad devices. You can also have different CSS for Portrait and Landscape orientations without using Javascript. This is useful if you want to hide certain elements (for example, sidebar) on Portrait orientation.

HTML 5 and CSS3
iPad supports HTML 5 and CSS3 so you can go crazy with box-shadows, text-shadows, border-radius, multiple backgrounds, video, canvas and geolocation features on your iPad friendly website.

JavaScript
As with iPhone, Javascript is supported on iPad. This will enable your iPad friendly website to have web 2.0 features, AJAX, dynamic content, and animation effects. If you are looking for a good Javascript Framework to use, check out jQTouch which is a jQuery plugin for mobile web development.

Flash
Neither iPad nor iPhone supports Flash. And Steve Jobs has made it pretty clear that he has no intention of supporting Flash in the near future.

Viewport

<meta name="viewport" content="width=device-width" />

Use a constant width for viewport rather than a fixed pixel width. Similarly, when it comes to layout design, consider Fluid width rather than Fixed width design.

Touch not click
This is something to bear in mind when designing websites for iPad and iPhone. They are both touch devices and not point and click, so make sure there is enough padding between links (eg: Navigation items) and buttons are large enough to be clicked touched on.

iPad Friendly Website ≠ Mobile Friendly Website
With iPhone, you can simply redirect to your existing Mobile version of the website for iPhone users, but you can’t do the same for iPad. iPad screen resolution is many times bigger than a normal mobile screen, hence, there will be a lot of whitespace when you view a mobile friendly website on an iPad. For this reason, it is sometimes better to serve the same version of the web friendly website to iPad devices rather than redirecting them to the mobile version of the website which is designed for small screens. And according to Apple, Safari on iPad is capable of delivering a “desktop” web experience.

Preview
If you want to check out how your website would look in iPad without an actual iPad device, open this Simulator in Safari browser and type in the address of the website you wish to view in the address bar on the iPad image (not the browser address bar). You can click on the top left corner of the iPad image to switch between Landscape and Portrait mode.

But if you have got a spare $800, you can buy iPad from Amazon Online Store for the real deal.

Inspiration
As always, Apple has a list of iPad ready websites for your inspiration. If you are looking for an iPad friendly WordPress Theme, be sure to check out Mobility WordPress Theme that provides a touch and slide friendly user interface for iPad viewers.