How-To: Create an iPhone Web App

-

The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but what if you just want to design a site or form that looks like a native iPhone App?
This is where iWebKit comes in. iWebKit is a free framework package for creating websites and applications that are optimized for the iPod Touch, iPhone & iPad. The bulk of the framework is CSS3 which can work its magic to makeover any dreadful site and make it look fresh.
I will be covering the web-form aspect of creating an optimized site, but iWebKit has many deeper features that can communicate directly with the OS. Its documentation is excellent, so dig around or check out the demo site on your iPhone to get inspiration.
When designing for the iPhone OS, you should use the iPhone simulator available in the SDK to get an idea of where your design is heading. You can also use Safari to get a pretty close representation, but nothing beats using a real physical device. It’s amazing how cool it feels and you really do get the impression it’s a native application.

Getting Started

Here is what the form looks like on the iPhone before we optimize it.

It’s pretty dull looking, to say the least. Below is the original HTML code being used. We’re going to get Apple-blood running through it and give it a makeover. 

<html><head><title>Test Form</title></head>
<body>
  <form method="post">
    Name: <input type="text" size="12" maxlength="12" name="name">
    Password:<input type="password" size="12" maxlength="36" name="passw"><br />
    Gender:<br />
    Male:<input type="radio" value="Male" name="gender"><br />
    Female:<input type="radio" value="Female" name="gender"><br />
    Favorite Food:<br />
    Steak:<input type="checkbox" value="Steak" name="food[]"><br />
    Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
    Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
    <textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!

    Select a Level of Education:<br />
    <select name="education">
      <option value="Jr.High">Jr.High</option>
      <option value="HighSchool">HighSchool</option>
      <option value="College">College</option>
    </select><br />
    <input type="submit" name="" value="Submit" />
  </form>
</body>
</html>


This code needs to be in an HTML file in the same folder as the iWebKit framework. I called it index.html.







The first step is to add these lines between the<head> tags.







<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="javascript/functions.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="homescreen.png"/>
<link href="startup.png" rel="apple-touch-startup-image" />





These lines tell the iPhone browser that this page is designed for it. It also references the CSS, JavaScript and images for the iPhone Home Screen and a startup image.



To create the top title bar we need to enter the following code immediately after the <body>tag.


<div id="topbar">
  <div id="title">Test Form</div>
</div>




If you load up the page in your iPhone simulator browser you will see this bar at the top.







Now we need to start our main content with the following <div> tag.








All the form fields will be inside of this <div> and we won’t close it till the end of the form. The first form fields we want are the Name and Password fields.



Replace the original code:


Name:<input type="text" size="12" maxlength="12" name="name"><br />
Password:<input type="password" size="12" maxlength="36" name="passw"><br />

With this:



<ul class="pageitem">
  <li class="bigfield"><input placeholder="Name" name="name" type="text" /></li>
  <li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li>
</ul>




Our Name and Password fields have now been transformed.




The <ul> container represents the white box while the <li> tag is to signify separate sections inside of the white box. You could also put each of these fields in their own <ul>containers and they would look like two separate boxes. To save screen space, I group similar items together. Now lets replace those old fashioned radio buttons from the Gender question.



Replace this:


Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />




Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />




With this:

<span class="graytitle">Gender</span>
<ul class="pageitem">
  <li class="radiobutton">
    <span class="name">Male</span>
    <input name="gender" type="radio" value="M" />
  </li>
  <li class="radiobutton">
    <span class="name">Female</span>
    <input name="gender" type="radio" value="F" />
  </li>
</ul>

The radio buttons are changed for the better.




Next up are the checkboxes under the Favorite Food question.


Replace this:Favorite Food:


<br />


Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />



Chicken:<input type="checkbox" value="Chicken" name="food[]"><br /> 




With this:


<span class="graytitle">Favorite Foods</span>
<ul class="pageitem">
  <li class="checkbox">
    <span class="name">Steak</span>
    <input name="steak" type="checkbox" />
  </li>
  <li class="checkbox">
    <span class="name">Pizza</span>
    <input name="pizza" type="checkbox" />
  </li>
  <li class="checkbox">
    <span class="name">Chicken</span>
    <input name="chicken" type="checkbox" />
  </li>
</ul>




Now instead of check boxes, we get those pretty on/off sliders we’re accustomed to inside the iPhone OS.




The textbox is pretty simple since it just creates a nice white box around the textbox.



Replace:


<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />





Lets move on to the dropdown menus. Dropdowns always use the iPhone’s built-in method and help create the feeling of a native app.



Replace this:




Select a Level of Education:<br />
<select name="education">
  <option value="Jr.High">Jr.High</option>
  <option value="HighSchool">HighSchool</option>
  <option value="College">College</option>
</select><br />




With this:




<span class="graytitle">Level of Education</span>
<ul class="pageitem">
  <li class="select">
    <select name="education">
      <option value="Jr.High">Jr.High</option>
      <option value="HighSchool">HighSchool</option>
      <option value="College">College</option>
    </select>
    <span class="arrow"></span>
  </li>
</ul>




Notice the arrow span class adds the down arrow to the right of the selection box.




As far as the form goes, all that’s left is the Submit button and to close the <div> tag.



Replace this:


<input name="Submit" type="submit" value="Submit" />




With this:


<ul class="pageitem">
  <li class="button">
    <input name="Submit" type="submit" value="Submit" />
  </li>
</ul>

Now close the content <div> tag with the following:



</div>


Finally, we may want to put a footer at the bottom of our page. It’s nice to also support the iWebKit folks.



<div id="footer">
  <a href="http://iwebkit.net">Powered by iWebKit</a>
</div>




That’s it for the HTML portion. Two nice little touches you can do are for when someone adds the page to their home screen. When browsing the page, click the “+” button and select the Add to Home Screen option. You will see an icon that, by default, is a screenshot of the page. You can customize this by making your own 58×58 pixel image and referring to it in the <head> section. Mine is named homescreen.png and I’ve already included the code at the beginning of the article.



Now when this page is added to the Home Screen, it will look and feel like a native app. Why not have a startup screen displayed while the page loads? iWebKit also has this feature and you simply need a 320×460 pixel image that again, is referenced in the <head>section. I have called mine startup.png.




That’s it, we’re done! iWebKit has many other features that you should check out. You may get some inspiration for an app or at least look good to your boss when you pretty up that old form that’s been around for years. All the files used in this article are also attached for your viewing pleasure along with a short video walkthrough of this tutorial.



Project Files: iwebkit-tutorial-files.zip (94 KB, ZIP)













































Comments









  1. makeiphone4appsJanuary 25, 2012 at 3:08 AM
    I like this excellent and educational post. It is quite helpful. Visit us at http://www.makeiphone4apps.com to learn about how to create an iPhone apps. We motivate you to create an app and lead you to success.
    ReplyDelete











Post a Comment































Popular posts from this blog









Create Desktop Application with PHP






-














Image







    Here we will show you how you can create a web-based desktop application using PHP, CSS, HTML, and JavaScript with the help of PHP Desktop. In fact, PHP Desktop is an easy and simple solution we can use to create very powerful and complex desktop application.       What Is PHP Desktop?     PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite.     Mind you, the development workflow you are used to while creating web applications remains the same. The step of turning an existing website into a desktop application is basically a matter of copy and paste.     PHPDesktop is an all-made container that will just swallow your project. With that, you can easily transform an existing website into a desktop application without any modification. When you download PHP Desktop , you will have some set of files and folders; among them you will have a ...








Read more










Insert pandas dataframe into Mongodb






-














Image







    Insert pandas dataframe into Mongodb     Pandas is most commonly used open-source Python Library for data manipulation, it provides high-performance data manipulation and analysis using its powerful data structures.     Here we use pandas library to insert dataframe into Mongodb. I am taking Yahoo finance library to get dataset for a ticker and save that data into Mongo.      First, we import all the necessary libraries        from pandas_datareader import data as pdr    import pandas as pd    from pymongo import MongoClient    import yfinance as yf    yf.pdr_override()       We get data from yahoo finance          # download dataframe    data1 = pdr.get_data_yahoo("SPY", start="2017-01-01", end="2017-01-15")       Now, we make a connection to Mongodb.     Here I am connecting to local MongoDb Server on port 27018 and then creating a database with the name `finance`. MongoDB has a collection(table) and I name it as `mycollection`.       #Step 1: Connec...








Read more










Add and delete columns dynamically in an HTML table






-















To add new rows to a table (or table section) you can use insertRow, but there isn't an equivalent insertColumn in the  DOM table methods . So what you can do is iterate the rows in the table (or table section), and call insertCell for each row.     Javascript:   tableaddcolumn.js     // 2006-08-21 - Created // 2006-11-05 - Modified - head and body function addColumn(tblId) {  var tblHeadObj = document.getElementById(tblId).tHead;  for (var h=0; h<tblHeadObj.rows.length; h++) {   var newTH = document.createElement('th');   tblHeadObj.rows[h].appendChild(newTH);   newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1)  }   var tblBodyObj = document.getElementById(tblId).tBodies[0];  for (var i=0; i<tblBodyObj.rows.length; i++) {   var newCell = tblBodyObj.rows[i].insertCell(-1);   newCell.innerHTML = '[td] row:' + i + ', cell: ' + (tblBodyObj.rows[i].cells.length - 1)  } } function deleteColumn(tblId) {  v...








Read more