Our goal for today's HTML workshop is to introduce some animations that will make your web app feel more like a native iPad app.
JQTouch is a collection of free, semi-standard libraries designed to work on handheld web browsers. Apple's Safari browsers (for handheld and desktop) support these HTML extensions, but Explorer and Firefox do not.
At the heart of JQTouch is some complex JavaScript code and related CSS files. We won't touch that code -- we will just include it by referring to it in the HTML header.
JQTouch also supports navigation features such as swiping, but we won't go into that today.
It is possible to change colors and such by linking to your own personalized CSS files. But for now, we will just focus on getting JQTouch to work.
Download the JQTouch package, and decompress/unzip it. The whole package includes some demo files, but for this exercise you will need only the contents of the jqtouch folder.
Put a copy of the jqtouch folder in your workspace. I copied the contents of the JQTouch directory to
Documents/Projects/HTML/405/jqtouch/, and this file is
Documents/Projects/HTML/405/m.htm
Upload the entire contents of jqtouch to your web server, and be sure to preserve the relative positions between your HTML page and the jqtouch library. (This is the easiest way to break a web page. Make sure that you have uploaded all the files that you need, and that you've uploaded them where you've told your web browser to find them.)
While you would ordinarily make a separate web page for each component of your web site (such as a home page named index.html, an about.html page, a contact.html page), JQTouch expects every possible section of your web app to be joined in a single HTML file.
What we usually think of as pages that exsit at separate file names, a web app expects to find in a separate, uniquely named div.
For instance, this div has the unique ID "divs."
At it happens, the section that starts out with the "class=current" designation is the table of contents, which I have given the ID "home". (I might have called it "pickle" -- the name "home" has no significance.)
The "home" section includes links that point to divs on this page. JQTouch is set up by default so that when it encounters a link ("a") within a list item ("li") within an unordered list ("ul"), the browser will slide the current view out to the left, and slide the contents of the named DIV tag in from the right.
There are other animation options, such as "pop" or "cube", but we won't go into those today.
Note that the home page has an "About" button.
In the "div" tag labled "home" we find this code: <a class="button slideup" id="infoButton" href="#about">About</a>
As you can see, pushing the "About" button invokes a different behavior. Other possible behaviors include "swap", "pop", "cube", "dissolve" and the default "slide". Note also that the "about" section has a button with the class "goback".
This div will look like a separate panel that slides in when the "About" button is clicked. It might offer background information, credits, contact infromation, etc. I have implemented it as a temporary window that must be dismissed before you can get back to work. (I would not suggest that this page lead to any additional content on your site.)
Using a computer (not an iPad), you can download the final version of this page from "http://people.setonhill.edu/405/m.htm" and view the source code.
Apply what you've learned. First, look for the "home" div, and change the "slideup" value in the "about" button, so that it will "swap" instead. (Did it work? What other effects can you create?)
Add your own new item to the table of contents. (Watch how I do it in the video.)
If you want to change colors or otherwise adjust styles, you are free to add your own CSS pages after the JQTouch CSS pages. But bear in mind, the standard look of an iOS app is part of the reason apps are so much fun to use -- we feel we instantly know what they should do, and we feel rewarded when the apps behave as we expected.