Red Rome Virtual iPhone & iPad

Apple iPad 2 Manual – iPad 2 User Guide

Apple has posted the user manuals for the iPad 2 on their support site.  The following are the links to the 198 page manual.

• Apple iPad 2 User Guide for iOS 4.3

For the 3G iPad 2's, Apple has released separate product information documentation.

• iPad 2 3G + WiFi Important Product Information Guide for Verizon
• iPad 2 3G + WiFi Important Product Information Guide for AT&T

If you like to download the User Guide of Apple iPad for iOS 4.2 and for iOS 3.2 Software you can download from the following links below.

• User Guide of iPad for iOS 4.2 Software
• User Guide of iPad for iOS 3.2 Software

Creating the Virtual iPhone OS 4.0 Springboard

The Springboard Application on the iPhone is the home screen or main menu from which you launch all other applications. A screenshot of the iPhone OS 4.0 springboard is below:

As you can see from the screenshot, there are a few different parts to the springboard. First, there is the dock. It is at the bottom of the screen and can hold anywhere from 0 to 4 icons.

Second there is the pages that hold all the icons. Each page holds up to 16 icons and one can have at most 11 pages:

Finally at the top is the status bar which shows the time, battery, and signal strength among other items.

Using jQuery to Create the Virtual iPhone & Virtual iPad

While it may be educational and fun to write all the JavaScript code for the Virtual iPhone & Virtual iPad from scratch, it would be extremely time consuming. An article by Oliver Mezquita Prieto really sums up the reasons to use a JavaScript framework:

1. Saves you time. Even if you really love programming in Javascript, you will save a bunch of time doing your work with one these frameworks.

2. Has much of your work already done. Don’t reinvent the wheel. Don’t waste time in doing something it has already been done and tested and re-tested by thousands of users.

3. Makes you use less code. With less code you get a smaller file size, better maintenance and less development time.

4. Makes your code more readable. Which also aids in better maintenance and less development time.

5. Makes your web application execute faster. These frameworks are really fast in performing their tasks and most of them have been optimized for really fast execution.

6. Makes your web application run in most modern browsers. If you dealt with Javascript a bit, you’ll have realized how different browsers have different ways of the doing the same exact stuff. Handcrafted cross-browser development can get annoying and irritating. These frameworks have already taken care of that and will just work in most browsers.

via Undisciplined Bytes

Fortunately, there are many JavaScript libraries available to streamline the coding process. There is a comparison list that I used to try and decide which framework would be best. I started to use Yahoo! UI Library but I quickly found the code to be cumbersome and not intuitive. So I went back and looked at a few others. In the end, I decided to go with jQuery for the reason mentioned on their website:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

via jQuery

Additional Apps that Don’t Have an Icon

In addition to the 22 applications that are shown on the iPhone Home Screen, there are a few more applications that are not shown.  First, there is the home screen itself.  This is called Springboard by Apple.

There is also the lock screen which is shown when the iPhone is turned on and requires the user to "slide to unlock".  This application could be part of springboard but I am going to place it in a separate directory called lockscreen.  The main reason for placing the lock screen in a different directory is to separate different types of code from each other to simplify development and updates.

A newer application that is only available on the iPhone 3GS is Voice Control.  This app is started by holding down the home button for a few seconds, then when the screen appears, you can say a command.  If Voice Control recognizes the command, it will start the appropriate application.  This application will be placed in the directory voicecontrol.

There also needs to be a directory for other parts of the iPhone OS that aren't true applications.  The main two types are the Status Bar and the Pop-up.  The status bar is located at the top of every application and the popup could be located over any application that is open.  These will also be placed in separate directories to separate their code.

Those are the major applications that will need to be separate.  If there are any additions needed, I will update this post accordingly.

Structure of Virtual iPhone

The structure of the Virtual iPhone OS will be very similar to that of a real iPhone.  The iPhone OS is essentially a collection of applications that are a standard part of the OS.  Here is the list of standard iPhone applications included with iPhone OS 4.0:

First Page

1. Messages
2. Calendar
3. Photos
4. Camera
5. YouTube
6. Stocks
7. Maps
8. Weather
9. Voice Memos
10. Notes
11. Clock
12. Calculator
13. Settings
14. iTunes
15. App Store
16. Compass

Second Page

1. Contacts
2. Game Center

Dock

1. Phone
2. Mail
3. Safari
4. iPod

The Virtual iPhone will have each application placed into a seperate directory to keep the files seperate.  You can download a copy of the directories here:

Virtual iPhone OS 4.0 Directories

Creating the iPhone OS with HTML, CSS & Javascript

I have always been an admirer of the iPhone user interface design.  The iPhone OS 4.0 has advanced the UI to a new level.  While the iPhone OS is written is Objective C, I am attempting to recreate the iPhone for the web only with HTML, CSS & Javascript.  This will provide all people with a chance to use the beautiful and intuitive interface of the iPhone & iPad.