Making an iPhone app with HTML5 and CSS
Most of the iPhone applications at present are being developed in objective C which, for those who don’t have a programming background, is quite hard to learn. However, you can create a native app that lives with all the other apps with the help of HTML5 and CSS. Developing the startup screen and other simple work is not directly the part of the application and can be managed easily. For example, when you are in app mode, you have a screen size of 320px x 460px. When you are in web mode, it has a screen size of 320px x 356px. This can be done with basic HTML. So let’s get down to the real task.
Basically, the iPhone browser used for app development is also in the forefront of HTML5, so you won’t face much difficulty in understanding it. The app itself starts by defining your markup. Here is the markup for a sample Tetris app:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html manifest="tetris.manifest"> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"> <title>offline Tetris</title> </head> <body> <!-- Put your Markup Here --> <script type="text/javascript" src="tetris.js"></script> </body> </html> |
The manifest=”cache.manifest” property on the <html> tag is how the browser knows that we want to cache this web page offline. A brief explanation of the proprietary Apple markup is as follows:
– apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app.
– apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline.
– apple-touch-icon: This is the pointer to the image that want to be the icon.
– apple-touch-startup-image: This is a url pointing to the start-up image.
Now you would also need to put CSS at the top. The CSS piece of code is as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { overflow:hidden; background: #d7d7d7; margin:0; padding:0; } #tetris { width: 320px; height: 460px; background:#000; } |
The style is really just to the div element on our web page to make sure it fits in the iPhone’s viewport properly.
Tetris was a simple application and similar other iPhone applications, which are not too complex, can be developed with the help of HTML5 and CSS and you won’t need to learn objective C for that.
BlueHost | HostGator | Media Temple
