HOW TO Start Developing iPhone Web Apps?

In recent times, one of the hot topics discussed on the blogosphere is the advantages and disadvantages of developing websites for smartphones instead of applications. During the Tangelo Startup House, Tangelo developed a  web application adapted to be displayed in Retina Display, HTML5 and CSS3. Twitday was met with widespread approval from the beginning. So much so that before its publication, our new website began to have its first visitors.

With this post we want to share with you some tips that helped us in developing our first WebApp for iPhone.

So do you want to develop your first web application?

First of all keep in mind iPhone’s Safari Browser support HTML5 and CSS3. For this reason, you need to know the latest technology available and the iPhone touch API, as well.

Using frameworks will help you if you are doing it for the first time. However, we really prefer to do all the actions manually because then it is much easier to find the code and make changes, if necessary.

These links are very useful to learn about the innovations in the mobile browser: Safari Dev Center, Surfin- Safari, HTML5 presentation. With this in mind you can start building your website. You can do everything manually or by using a frameworks.

The most popular frameworks are:

  • JQTouch: It is quite easy to start developing webapps, but if we put a lot of content on our website it        starts getting cluttered.
  • Sencha Touch: It is a powerful tool based on the ExtJS library. This tool is highly recommended
  • JQuery Mobile: (NEW) This library is very similar to JQTouch.

Tools and Tips to help you to develop a webbapp for iPhone

  • IPhone Simulator: To work with the iPhone SDK (Software Development Kit) you will need to register you as an iPhone developer and install the iPhone SDK. Once you have installed it, you will find the iPhone simulator in it.
  • Console: ( to debug our pages) Once enable you can use this feature with a single javascript call: i.e. console.log(‘message’)
  • Viewport: By default, Safari on the iPhone will render your page as if it were a desktop browser on a big screen, with 980 pixels width available for the web content. Then it will scale down the content so that it fits the small screen. As a result, the user sees your page with miniscule, illegible letters and must zoom in to see the interesting parts. You must declare the viewport meta element. It sets the width to the maximum device width. You will might follow:

<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no” />

  • Home Screen Icon: When a user adds your page to the Home screen, the iPhone uses a screenshot of your page as an icon. But you can improve it providing your own icon. The icon must be a 57×57 png file.
  • <link rel=”apple-touch-icon” href=”icon.png” />

  • Offline: You might declare the cache manifest to allow users to access to your WebApp without an internet connection. The cache manifest gets the static content you want for offline WebApps . To enable this you might add the manifest attributte to html tag and create a file .manifest with all content wich you want to store.
  • Hide address bar: To hide the address bar you might add this JavaScrip code. Simply scroll the page one pixel down, using window.scrollTo. If your page is too short to be scrollable, you can add an additional meta element to make it scrollable:
  • windows.onload = function() {

    window.scrollTo(0, 1) }

  • Special links: If your Web has a phone number you can select it by touch and call the number without typing it out. Phone numbers automatically become links provided, of course, that they have a phone number format. But if you want to create the phone links manually, you can use the phone’s prefix (URI scheme), for example:
  • <a href=”tel:800555123″>Call 800-555-123</a>

    If an SMS text is more your style, use the sms: scheme to launch the iPhone’s text message application.

    <a href=”sms:800555123″>Send SMS</a>

    Or mail to

    <a href=”mailto:example@itangelo.com”>Questions?</a>

    Images (Retina display):

    You can define multiple Style Sheets, allowing each device to use the appropriate one. This way you make good use of the capabilities of each device.

    You just have to carefully define the meta tag for the style sheet to be automatically selected as follows:

    NORMAL

    <link rel=”stylesheet” media=”only screen” href=”styles/normal.css”>

    IPHONE

    <link rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”styles/iphone.css”>

    IPAD

    <link rel=”stylesheet” media=”only screen and (min-device-width: 481px) and (max-device-width: 1024px)” href=”styles/ipad.css”>

    IPHONE 4

    <link rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” href=”styles/ipod-4.css”  />

      Conclusion

      The advantage of developing WebApps for iPhone is that we can concentrate all our efforts into one single WebBrowser. We even have frameworks which help us to easily insert on track.

      So, what are you waiting for?

      Making iPhone applications can be more fun than making normal websites. We have many tools, tutorials and people -for example bloggers- to make it easy and help you to get it right.

      5 Comments

      1. http://fastingforweightloss.net 2012/03/19 at 9:29 pm

        My husband and i felt quite thankful that Jordan managed to finish up his investigations because of the ideas he received out of your blog. It is now and again perplexing to simply find yourself releasing instructions which some other people may have been trying to sell. And we remember we have the blog owner to appreciate because of that. These explanations you’ve made, the straightforward blog menu, the friendships you assist to engender – it is most sensational, and it is leading our son and the family consider that this issue is thrilling, and that is exceptionally fundamental. Thanks for the whole thing!

        Reply

      2. I am still amazed at how quickly smartphone became such a dominant category in the software industry with such incredible opportunities!
        My recent post Kratzbaum-Blogparade: Der Gewinner steht fest!

        Reply

      3. danke fur die Infos, aber weib jemand ob es noch aktuell ist ?

        Reply

        1. Hallo Kratzbaum,

          Danke für dein Kommentar. Die Infos ist noch aktuell, unsere Quelle sind unsere “developers”, die arbeiten jeden Tag für unsere Firma und wiessen genau vorüber sie reden.

          Falls du noch Fragen hast, stehen wir gern zur Verfühgung.

          M. F. G.

          Leila

          Reply

      4. Without doubt , accept as true with what you claimed. Your main basis had been definitely easy and simple to know. I express to you, I inflammation and get irked while people mention factors that they simply do not know about. You managed to hit the nail directly on the head or identified out each while not complications. , people can take a signal. Will likely be back to get more. Thanks

        Reply

      Leave a Reply