iphone web page transitions - javascript

I am developing a web page for iPhones and iPod Touch's. I am using the Universal iPhone UI framework. I need to have silding page transitions, but can't seem to get it working. Is there a good javascript framework I could use that would make this easier? I've done a lot of normal web dev with jquery, but it doesn't seem to like the iPhone.

Try http://code.google.com/p/iui/
It's a nice little JS framework, among other things, that will help you with the transition aspect. Have a flick through the documentation too, as it'll give you quite a few additional options as well.

Regardless of what framework you're using, the WebKit CSS trasitions are extensions of CSS and were developed with the iPhone and iPhone web-based apps in mind. You can do some very clever, complex animations with no JavaScript and only a few lines of CSS.
Here's what Google finds on the subject.

Try the following frameworks.
Jo
Sencha Touch
jQuery Mobile
These are for serving Web based mobile sites, they can then in turn be made into Apps for Android or iOS using PhoneGap
Of the 3, Sencha is the more mature project and has the most things out of the box. Jo looks very promising and would probably directly compete with Sencha. jQuery mobile is very interesting but just far to early to do any production code with it, too rough around the edges. jQuery mobile takes a different approach to the others as it is html based and it interperates the attributes on tags to turn things into tableviews or menus.
jQuery mobile is quicker to hack together and get your head around, where the other two take a little bit more thinking. But once you figure them out its easy enough.
If you don't want to serve the site via a url at all and want to just build an app then Appcelerator is the way to go. You write code in JS and it makes native Android or iOS apps for you. You will get access to pretty much the full Android/iOS api.
I have coded with appcelerator, however I am no longer going to use it and use one of the above frameworks, probably Sencha for just now. I can get access to the device native apis via PhoneGap and for simpler apps give a great experience cross device via a url.
Reference

Apple's Dashcode IDE has an extensive set of page transition templates for the iPhone. You should be able to fire up a quick project, get the look you want, then export the resulting HTML/CSS/Javascript into your favorite IDE.
The only catch is that it's OSX only.

I've been deep into an iPhone web app project lately. We evaluated iUI, but decided against it for various reasons. Consequently, I've developed most of the same functionality from scratch. While I can't share the code from the actual product (as I'm under NDA), I have been documenting many of the techniques I've used to do certain things. Check out the links below:
http://segdeha.com/e/css-transitions/
http://segdeha.com/blog/2009/07/19/stupid-webkit-tricks

Related

Is there an easy way to get Android UI elements in an HTML page?

I'm developing a prototype of an Android app in HTML/CSS/JS, so that I can experiment with the UX of the app.
As a part of that I want to be able to style HTML elements as Android elements and (preferably) have them behave as if they're native Android UI elements.
Is there a JavaScript or CSS library that will do this for me? I've Googled, but nothing has come up.
I would recommend to take a look at the following Frameworks and Browserplugins. Maybe you will decide afterwards to regret using the native android toolkit at all, because it can be a big advantage to develop the application platform independent using HTML5 and Javascript techniques. Than later, if you want to port it to another platform you won't have to change a lot / almost nothing on the code base.
Phonegap
Ripple Browser Plugin (Phone Emulator)
JQuery Mobile
which is completely themeable: Jquery native android theme
The whole thing can finaly look like the following:
jpHolo

webview for user interface in android

I was searching for how to use swf file in android and most of the answer suggested me to use webview and an simple html file.
Now i think We can easily put css and javascript files in asset folder and then we can use them in an html5 code.
Looking at the power of HTML5, This will make app development for a web designer very easy job !
I just want to know that is it good to use this approach to build a good user interface in android ? Are there any technical pros/cons behind it ? will i miss some features provided by android ?
There are a lot of frameworks that allow you to write native android applications using HTML/CSS/JavaScript only. Here some of them :
PhoneGap
Cordova
Titanium
I've never used any of them, so I can't say if it's good or bad idea to write android apps this way, but here you can find a good session about it HTML5 versus Android.
There are pros & cons of using cross platforms. As per my point of view you shouldn't go for loading of everything in WebView.
I still recommend you native app approach because of following points :
WebView is one of the UI control in Android SDK. So, it will have
limitation of memory size and working with CPU utilization. So, you
might face performance issues in some devices.
As you know in older era we were used to work with desktop apps and after that everything is shifted to web-application.
It was
possible only because our browser(s) gets more features for e.g. more
memory area, CPU access, threading, individual Processing (like
google chrome) etc...
in-short, web browsers gets more smart and get treated as separate application. Now a days web-application can have mostly similar
performance as desktop apps. So, everything is now shifted to
web-application development.
This era will come in to Mobile development in later stage. but currently we are in middle stage of Mobile development and Cross platform development. So until and unless Web-View control of any platform (iOS / Android) gets more powerful, we can not totally relay on that.
I Hope I explain it properly :)

How do I leverage my knowledge of Html/JS/CSS for iOs, Android, etc?

Is it possible to create responsive, mobile-style apps without coding directly for iOS or Android with the same html/js/css stack that is used for major browsers?
Have a look at these books, they really helped me get started with developing for mobile using web technologies:
Building Android Apps with HTML, CSS, and JavaScript
Building iPhone Apps with HTML, CSS, and JavaScript
As others have said you can make a web app styled for mobile. There are some nice framworks to help you with styling and things like nice animated swipes etc. I would recommend looking at jQuery Mobile and Sencha Touch.
For sencha there is a list of getting started resources in my answer to another stackoverflow question here.
If you you want to make your web app native (and have access to features like the camera and accelerometer) I would recommend PhoneGap, but there are other frameworks already mentioned like Titanium.
Phonegap can be used along with Sencha Touch or jQueryMobile and has lots of resources to help get you started e.g. the API docs and getting started guide (check out the phonegap website for others)
Hope that helps!!
Yeah, it's called Web App.
You're probably goin to use some touch/mobile library like jQuery Mobile or Sencha Touch to make the user interaction easier and fancy.
You don't need to code on C/Java to put out someting great for mobiles. ;)
On top of that you can also use PhoneGap to create the complete "native" look and feel, without writing any code in Java/Objective-C.
#Jason if you have Good Knowledge in java scrip then i prefer to you to start with Appcelerator Titanium Click Here Link For and Link two This will good For Developing Application for iphone and android platform .There are lot Tutorial you can find for both android and iphone.

Converting Existing site into Mobile Version

The existing site in cakephp with flash. We need to convert it into mobile version.
Please suggest me is there any possibilities for making mobile version.
Take a look at the following frameworks:
For ui and minor ux options
iwebkit http://www.iwebkit.info
(targets both safari and webkit based
browsers)
iui http://code.google.com/p/iui/
For a more advanced ux
jqtouch http://ww.jqtouch.com/ (targets safari, but looks quite good on webkit)
My personal favorite is jqtouch, and as you right now I'm in the middle of porting a cake app to mobile browsers.
If you want to make a real mobile site, you want to look into a framework for that. There are two big ones:
jQuery Mobile is a site based mobile site, you need to create html in your cakephp views. This is served to the user
Sencha Touch is aimed at more sophisticated sites with a lot of interactions. The site is serves as single page, all necessary data if loaded via json. You mentioned CakePHP, so you might want to use Bancha if you decide to use Sencha Touch.

Which javascript framework should i choose if I'm making one site for both medium Desktop PC and mobile phone?

Which javascript framework is most compatible with mobile phones and desktop both?
javascript disabled user of desktop are very low but mobile phone users are high and i heard not all javascript functions work in mobile phones.
See this question (Available iPhone Web Application JavaScript UI Library/Frameworks) for some ideas. Several answers refer to JQTouch (a jQuery plugin), which implies that jQuery may work for you.
there is no js-framework that works on all mobile phones:
if your target is iphone, jqtouch does offer nice iphone-specific stuff on top of jquery
if you want to reach iphone and android (and possibly some other high-end handsets) you could try xui, which is a jquery-like lightweight js-framework (by one of the phonegap-guys)
if your goal is to work on as many phones as possible, you might want to consider building the core of you site/app in standard html and progressively enhancing it with javascript for those
hope this helps,
frank
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.
PhoneGap
Another option you can go for:
baseJS
As for desktop, you know you can use any jquery, prototype, etc
You may want to start with looking at this to get an idea what is supported on the phones you want to support.
http://www.quirksmode.org/m/table.html
On mobile phones you are going to be most concerned with download size, unless you are only targeting phones with a 3G connection, so you may want to write your own framework that is geared toward what you want, specifically.
You will want to write your phone page to work without javascript, then, if there is javascript, then you may want to have it d/l your new framework, so the basic thing that is downloaded is just a bootstrap javascript file that can d/l the real javascript file that will be used.
Your bootstrap file can look at what is available, and if, for example, onfocus is available on a div element then it is probably a desktop, so you d/l the versions that use jquery and d/l the jquery files themselves.

Categories