Basics of making an iPad HTML5 App
Screen navigation includes the ability to touch, to scroll, and to swipe through the iPad. There is no point in utilizing the swipe and drag functions in the default web mode of the iPad, since the point and drag functions are used for scrolling and panning. You can add event listeners to sidestep default touch events and create your own. This is a technique mastered by the CaringHands app, one of the 10 winners of the Verizon Wireless Innovative App Challenge that we read from verizon wireless.
The first step is to remove the default functionality of the point and drag function. With the use of jQuery, you can easily bind the tapping, swiping, and custom scrolling. To make this easier, you can invoke the .click() on the links to bind swipes and jump to the next post. These links are often found on WordPress and HTML Newsletter templates.
Prepare your tools
Before the rigorous steps, it’s important to gather all the right devices and tools. In terms of device hardware, you need an Intel-based Mac laptop, preferably the ones that run on Mac OS X Lion or later versions. Along with your iPad, you need to have an excellent code editor for HTML 5. Here are two of our most recommended facilities:
The Xcode is the solution for most integrated development environments (IDE) that runs on Apple devices. We recommend that you install the Command Line Tools.
Orientation Change for your iPad
Depending on the device orientation, there are two ways in which you can change the layout of your app: binding the orientation Change-event and checking the resolution in CSS. To simplify things, perhaps the easiest method of doing this is to check the viewport size using a media query in the CSS. Depending on the width of the browser window, this would likely work with the tablet to get a suitable layout for your tool. However, this method is only limited to your tablet’s current display technology. This won’t work with new technologies, as they will sport a higher pixel density which will confuse your app’s style sheets. To set the content width, the ideal cutoff resolution for the iPad would have to be 980 pixels.
Use Custom Icon on Homescreen
To open a website as an app on the home screen, you need to choose the icon from the Safari status bar in order for a specific link pointing out the icon to be located on the header. With specific sizes for multiple devices, iPad icons are usually at 72×72 PX. Take note that the HTML header starts to get inflated as they are only capable of 57×57 PX. If this happens, the iPad will automatically add rounded corners at the end of the file name to cater the entire name.
About the Author
Lily Sommers is a writer and regular contributor TechieDoodlers.com, an up-and-coming tech blog. When not engrossed in the latest tech news from industry leaders like Verizon Wireless and Samsung, Lily can be found writing about phones, games and designs.
Get in touch with her on Twitter (@LilySommers).