I was able to use inDesign CS5 to start the project, and everything looked promising, until I hit a wall that is iBooks. You see, iBooks are meant to have flowing text within their pages. The content from page 1, to 2, to 3 flows through. On top of this, the video was an inline block element that would not wrap text around itself. Perhaps with more research I could have found a solution, but I believe the iBook format is not a good way to present a heavily designed publiction to a user. It's GREAT for reading, but not so much for layouts.
HTML5 is not a standard set in stone yet. Lots of people are buzzing about it, but if you develop your project using HTML5 for a base, you might as well forget good support for corporate users of Internet Explorer 7. But the iPad has excellent support for HTML5 and CSS3, so developing for a single platform removed the difficulty of trying to develop a cross platform solution.
So, onwards to a web app. I used Google a ton on this project, getting hints along the way. One of the most difficult answers to find was the size of the viewable screen for a web app on the iPad. The screen size of an iPad is 768 pixels wide by 1024 pixels tall in portrait mode. However, the answer I needed was for the status bar that sits on top of the iPad, 20 pixels tall. So my final application window size was 768 x 1004.
There are a good bit of meta tags assoicated with an app. The ones I used were:
- name="viewport" content="width=768px, height=1004px, minimum-scale=1.0, maximum-scale=1.0"
- meta name="apple-mobile-web-app-status-bar-style" content="black"
- meta name="apple-mobile-web-app-capable" content="yes"
To start the project, I created a master wrapper DIV with an id equal to ipad. I set this to be 768 wide by 1004 tall. Inside of this DIV I needed to portions. A place to put pages and a place to house a status bar. I created a DIV with the id pages, and one with an id of menubar.
I stacked my 14 pages in the pages div, one after another. I gave the top one a z-index of 100, and the rest 25. At first I faded from page to page, but the app suffered performance as it was delivering roughly a 120k image for each page. So I simplified the JavaScript before the beta release so that when a page turn action was called, the targeted page was moved to the top of the stack with a z-index of 100 and the active page was changed to 25. This would then set the top page of the stack.
I used JavaScript to count the number of pages and limit this action so that it would not go past the first and last page.
Touch Events
To make the web app run faster, I had to write touch events instead of click events. Touch events are triggered when a user touches the screen. A click event has to simulate moving a virtual mouse to the spot and clicking that spot, so it lags a half step behind on the iPad. Touch events are really cool, and here is how they work.
There are 4 different events. They are
I stacked my 14 pages in the pages div, one after another. I gave the top one a z-index of 100, and the rest 25. At first I faded from page to page, but the app suffered performance as it was delivering roughly a 120k image for each page. So I simplified the JavaScript before the beta release so that when a page turn action was called, the targeted page was moved to the top of the stack with a z-index of 100 and the active page was changed to 25. This would then set the top page of the stack.
I used JavaScript to count the number of pages and limit this action so that it would not go past the first and last page.
Touch Events
To make the web app run faster, I had to write touch events instead of click events. Touch events are triggered when a user touches the screen. A click event has to simulate moving a virtual mouse to the spot and clicking that spot, so it lags a half step behind on the iPad. Touch events are really cool, and here is how they work.
There are 4 different events. They are
- touchstart
- touchmoved
- touchend
- touchcancel
touchstart is called whenever a user first touches anywhere on the screen. The X,Y of the touch is passed back to the event. There can also be multiple touches worked on at the same time, as it's returned in an array.
touchmoved is called whenever a touch is moved across the screen without the user lifting a finger. As with touch start, multiple touch moves (2 or more fingers) are returned to the events object.
touchend is called when the user lifts up his or her finger. The odd part is that no event object is returned at this point. You have to record the information from touchstart and touchmoved if you want to create a reaction.
TO BE CONTINUED... (11/24/2011)