Create Your First Mobile WebApp in Just 30' Minutes

We could say that the main difference between a WebApp and a Native App is that the first one executes in the browser (e.g. Safari) of the device, being in most cases access to the internet necessary, either through 3G or Wifi, without the need to download it in our device, while the second one is directly installed in the memory of the device. These applications are available in the Apple applications store, the App Store. We will get into an example later so you will clearly understand.

In this instruct able I will teach you how to create your first Hello World!! Mobile WebApp in just 30´minutes.

Necessary software and tools

  To sucessfully accomplish the example you will need the following software, Open Source mostly, so it will not cost you a single dollar.

  Graphic software: Gimp. (free) (http://www.gimp.org)

  It is an image editing program, simple to use and easy to learn. 

  HTML editor software: Nvu or BlueGriffon (free) (http://net2.com.nvu/)

  As its own name points out it is a free HTML editor. This program will be joining us throughout the book and it is very easy to use. You will quickly get used to it. It will help us to create the code and layout we need for our first two Web Apps.

Phonegap simulator: You can download it form my webpage, in download section: http://www.how2appbook.com/downloads.php in Software section you can download the phonegap simulator. Only for mac users. If you are a windows user write me at: info@how2appbook.com

Optional: My book in which I teach with details how to create your first mobile WebApp and iPhone App

URL demo: if you have an iPhone you can view the example in your device here: View in your iPhone!!

The folder with full example files are here:

Designing our first graphic

   We don´t have limitations about creating our own graphics, but we must be cautious with the size, format or extension of them, I use to save all my graphics in .PNG format.

  In our first example we are going to create a graphic with a size of 150px X 200 px and we will name it “helloworld.png”. You can use the gimp software or photoshop if you usually manage this software, you are free. If you want, you have the picture inside "helloworld" folder inside "Instructables_WebApp" ZIP file.

  Let´s do it, are you ready?

f you want you can make your image with these measures, don´t forget save it as a .png file, we will proceed as follows: “File>>Export to >>helloworld.png”, saving the image inside  “helloworld” folder.

Note.- If you like and have interest in creating more complex graphics I recommend you the gimp.org web where there are several free manuals to deep into this matter, as in this instruct able I assume that you know draw a pic.

Frameworks that help us create WebApps for the iPhone.

  It´s now the time to discover one of the biggest secrets about WebApps development. And this is that starting from a code developed by a third-party, usually open-source, we can provide our application (WebApp) a full native look.

  What can we create with these interfaces?

 -  Optimized menus and interfaces for iphone can be created from HTML standards.

  - No JavaScript knowledge necessary, that saves us time and costs in the development and the layout of our application.

 -  They are very easy to implement for the beginner user.

  There are many free available UI frameworks in Internet (just google the next description: “UI frameworks for iPhone”). The integration process is the same in every one of them, it consists in downloading the files and work with the templates adding our contents. In this instructable we are going to apply a native look to our application “Helloworld”, you will see how our application changes without a single code line.


The framework that you see in the picture is that I modified to make my example. If you are interested you can download it for free on my website in how2app.com

Now the next step we open and run the "Nvu" or "Bluegriffon" html editor software and open the “index.html” file that exists inside the "Instructables_WebApp" ZIP folder. You will find something like the first image, in visual mode. 

You can also change the "Hello World Instructables!!!" "About" and "Hello World" text for which you want to. 


2.-) In the second image I explain each part of the code does. 

This is a simple example, if you liked you can buy my book in which I teach with details how to create your first mobile WebApp andiPhone App 

Note.- I propose you as an exercise to change the word "Hello world" by your name, be sure to "save" the change. In the next step we are going to run our web app in the Simulator to see your application.

You must downloaded the phonegap simulator (it´s in my Website: how2appbook.com in downloads section: Software). If you have already downloaded the “PhoneGap simulator” application, execute it.

Once you have done that, the following window will appear showing a mobile, which is a Sony Ericsson model by default. Change it to an iPhone selecting “Menu>>Skin>>Iphone”. Also the zoom can be changed.

To open our "Helloworld" example click in the upper right file icon. I have labeled it “HERE”. Click and look for the “index.html” file, inside the "instruct able_Webapp folder", open it without second thoughts. The result should be the second image.

If all has gone well, you will see your name before which put hello world!

I hope that you like, if you have any query can send it to my email: info@how2appbook.com