iPhone web applications, templates, frameworks? [closed] - iphone

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Does anyone have any good starting points for me when looking at making web pages/sites/applications specifically for viewing on the iPhone?
I've looked at templates like the one Joe Hewitt has made, and also seen some templates I can purchase, which I haven't done yet.
I figured someone else had already started on this track and decided that I could probably leech on their newfound knowledge :)
So, does anyone have any pointers? I'm well aware of the problem that the more such a template/framework makes a web app look like a native iPhone app, the more likely I'm going to get into trouble because it just isn't, but for now I want a framework I can start building on, and then in the process figure out how to make it distinctive enough to be perceived as a web app as well as looking like a native iPhone application.
Specifically I'm looking for features like:
stylesheets set up, or pointers to how to do them for iPhone
page flipping animation, ie. pick an item in a list, list scrolls out of view to the left and information for item scrolls in from the right
the animation part would have to work with dynamic pages, ie. not just one big page that has divs set up for each sub-item, which at least one such framework had as a sort of quick fix, I would need to have list item picking load the page for that item, and then when loaded, scroll to it
Edit: To avoid people reading only the question and answering, before reading my other reply, I'll add my clarification for GPL licensing and similar issues here.
The framework I need to use can not be distributed under a license which would require me to license my own project out under a similar license. The GPL family of licenses allows for exceptions regarding library usage, but this won't apply to this since by necessity, the kind of framework I would need to use would be all source code.
The project can easily accomodate commercial libraries.
Also, I don't need a library or a framework as such, example files that look good and aren't overly obfuscated would be welcome as well.

Answer 1

I found iphone-universal on Google Code the other day. Haven't had a chance to try it out but it looks promising.

Answer 2

jQtouch looks outstanding.

Answer 3

The iUI library, originally from Joe Hewitt, would be a good place to start. The library is BSD licensed and has no commercial restrictions.
You're right in assuming iphone-universal is not an option for you -- its actually licensed under Affero GPL which triggers the distribution clause simply by accessing the software over a network which is quite different to standard GPL.

Answer 4

I'm currently looking into http://webapp.net.free.fr/. Check out the demo here. Compared to the other frameworks mentioned, it has the following advantages:
Under active development
Active user community
Has an open license, free to distribute as long as you include the copyright/disclaimer
The last point was really the winner for me. I'm looking at building something that will be included in a commercial product, so the other frameworks like iphone-universal and iwebkit (both GPL) weren't options.

Answer 5

QuickConnectiPhone is LGPL so you can use it the way you want. It has a custom Dashcode project that includes the needed files. It is highly modular. It will even let you compile your JavaScript, HTML, and CSS into an installable application if you want.
http://sourceforge.net/projects/quickconnect/
For more information you could look at http://tetontech.wordpress.com

Answer 6

Try iwebkit
http://iwebkit.net
Here is a demo:
http://m.iwebkit.net

Answer 7

This looks good, but unfortunately it's being licensed under GPLv3, so I'm actually a bit afraid to start looking at that code. The framework I either need to find, or develop if needs be, must be able to be used as part of a commercial program, without having to license the entire program different. Commercial libraries are fine, I just haven't found any I can demo yet, presumably because I could just then steal all the code if I wanted to.
Guess I'll look further, thanks for the link though.
Edit: Clarification. I'd be fine with the requirement to share the source to the web framework part for the iPhone, if someone wanted it, but since this framework is all source, I'm afraid that incorporating bits of it into an existing web application (to make a skin for iPhone), I'd be making the whole web application liable for GPL license, which is totally out of the question. Even sharing all the files related to the iPhone pages is out of the question, since they will contain proprietary code.

Answer 8

I've been mucking around with iUI, and find it quite good, but to be honest I haven't looked at the licencing model, so I've no idea what it is. It is very simple and straight forward though, and works well with ASP.NET MVC.

Answer 9

Check out iWebkit 6. It works only on iOS 5, though :(.
UPDATE
You can also use saurik's. It doesn't have all of the features you said you wanted, but I'll try to see how to implement them. Also, you said you wanted to build on it. For a demo (saurik took down the actual good part of cydia.saurik.com) you can use mine on my other site.
To avoid transferring all those images, just add this in the header:
<link rel="stylesheet" type="text/css" href="http://cache.saurik.com/menes/style.css" />
also, add this to your CSS:
body > panel > fieldset > div > a: hover {
background-image: url('menutouched.png')
}
menutouched.png is here:
This function in js slides the page. It is from Joe Hewitt’s iUI project:
function swipePage(fromPage, toPage, backwards)
{
toPage.style.left = “100%”;
toPage.setAttribute(“selected”, “true”);
scrollTo(0, 1);
var percent = 100;
var timer = setInterval(function()
{
percent += animateX;
if (percent <= 0)
{
percent = 0;
fromPage.removeAttribute("selected");
clearInterval(timer);
}
fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%";
toPage.style.left = (backwards ? -percent : percent) + "%";
}, animateInterval);
}
For loading the next page, you could try something like executing a window.location with a delay. The timing is up to you though.
You also need to add this to your CSS:
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
}