I wanted to make my own WebApp for testing so I will know what to do when I've got some serious stuff to do. I found some info about using HTML, CSS and Javascript to make the web app look like real iOS but one thing that bugs my mind is hot to make the textfield look like the one iOS uses or at least similar to that and how to make it across the whole screen (width) but with some margins on the left and right... well so it looks nice and naturally.
I appreciate every single answer.
One option you could try is checking out Appcelerator Titanium which let's you develop iPhone/iPad/Android (and even Mac/PC) applications using just HTML/CSS/JavaScript. It allows you to utilize the native UI elements, including forms, lists, buttons, etc...
If you're thinking of developing mobile apps, this is a pretty cool tool to use (especially if you're not a Object-C wizz).
One example of a tool that uses Titanium is WunderList to-do application.
I'd use jquerymobile or sencha touch... depending on whether you're familiar with ExtJS or not. That way you can focus on adding in your content, not messing around with CSS forever to try and simulate something you'll replace with iOS eventually anyway.
http://jquerymobile.com/
http://dev.sencha.com/deploy/touch/examples/kitchensink/
You can do so using the -webkit-border-image CSS property. Even if you're using some kind of framework that does all that stuff for you, it's always nice to know how it's achieved under the hood, as it's always re-applicable somewhere else.
Ref: http://css-infos.net/property/-webkit-border-image
Related
I was wondering how difficult it would be to implement Sproutcore into my webpage for the simple task of being able to scroll DIV's on an iPhone or iPad with one finger instead of two.
Or is there an easier way?
Thank you in advance!
Pulling in SproutCore for just this purpose would be unwise, especially for a mobile app, as it would include far too much weight for very little added functionality for your app.
If you just want to have an iOS scroll view, there are other much lighter libraries for just this. A quick search (for "iOS html scroll view javascript") reveals:
http://code.google.com/mobile/articles/webapp_fixed_ui.html (how google does it)
SproutCore is a complete web application framework; incorporating it into an existing design for the purpose of getting touch scrolling functionality is probably more tool than you need. I'd look at JS libraries which are just interaction libraries, not application frameworks.
First of all I'm totally not advertising for this app or for this team.
I came a cross to their apps and I noticed that all their apps are using the same interface.
But what wondered me are these inside the apps are a special design websites inside their apps or what? because I'm interested how did they make it.
http://itunes.apple.com/us/app/awesome-laws-pro/id320196287?mt=8
By the way, I'm a Objective-c beginner and still learning.
It's hard to say what they do. It's easier to say what they could do.
They could be using a custom view and drawing things themselves. Or they could be rendering the text (quoted law) to an HTML string and loading that string into a WebView, linked with a stylesheet.
I am developing an App using Titanium for iPhone and Android. I created a button and a label and textfield. It looks good in iPhone but is scattered in Android.
I think I have to adjust the each of the control's position. But this would be a big overhead.
Is there any alternative mechanism there by which we can have controls correctly placed both in iphone and Android?
You should take a look at the guide for Designing the User Interface. With each new version of Titanium Mobile, the platform becomes more consistent between the various supported platforms. You really should not need to maintain separate codebases.
First of all don't go for same look and feel. iOS and Android are totally different OS. In Titanium you don't have many controls which are available for iOS.
Let the look and feel be different for Android, don't make it iPhonish.
http://wiki.appcelerator.org/display/guides/Designing+the+User+Interface
Though their docs are not maintained properly. I would suggest you to use some cool graphics which can enhance the look and feel of Application.
I created a button and a label and textfield. It looks good in iPhone but is scattered in Android.
It should not be, post your code. The look and feel might be different, but it should not be scattered.
I want to start developing IPhone application.
I need to understand something about it - I am working with a graphic designer.
If she supplies the GUI in HTML - will it be easy for me to develop with it?
How does it work? like regular web development?
Apple uses Objective C and Cocoa for iPhone applications. Neither uses HTML; you'll instead be using interactive controls like you'd find in a desktop application. Whether it's easy for you to develop using an HTML mockup will depend entirely on your skills with Cocoa. (In the same way I encourage designers to give me mockups in Photoshop knowing that I can easily build HTML versions of them.)
You might want to start with some of Apple's documentation on iPhone development: http://developer.apple.com/devcenter/ios/index.action
For GUI development of your own apps you have several options:
Code: UIKit framework in Objective-C
Interface Builder: Tool to click
your GUI together, but the logic
will be coded like in 1 in C, Obj-C
or C++
You can build a HTML gui and
present it in a web view, but for
native apps, this will only bring
you so far.
Oh, and no native Flash on iOS. :-)
You could write an app that uses HTML for its UI - in essence you'd simply be wrapping a webkit widget and driving your app from events generated by that UI. However, that's not going to give you a UI that really takes advantage of the phone.
For that, you need to get down and dirty with Objective C and the Cocoa Touch API for iOS. Another option is using Flash CS5, which is ActionScript based.
Strictly speaking, the answer is no, your HTML skills are not transferrable.
That said, there are two projects that deserve looking into, both of which are about producing native (or "native-ish") apps from HTML and JavaScript. The first is PhoneGap, and the second (which I think is more robust and promising) is called Appcellerator.
Neither of them give you really-and-truly full access to to the iPhone API, but they do allow a significant flattening of the learning curve for people who already have well developed web app skillz.
If you go the native route, bear this in mind: it took me about a month to go from being a web developer to being a slightly competent iOS developer, and six months or so to feel solid and reliable and productive with iOS.
I am trying to use Aptana to build an IPhone web application. I've never use Aptana. I downloaded the iphone support and started a new project. It is now asking me if I want to import a javascript library and lists the "big ones." Will IPhone's Safari be able to use these, specifically jquery? I saw that jquery had a special iphone library so my guess is no.
Should I tell it to use jquery (or other library) or should I download the special iphone javascript subset manually and try an integrate it in my project?
As far as I know JQuery should work fine on the iPhone. The specific libraries you are talking about must be additions to take advantage of iPhone only features like being able to handle the display orientation event or maybe use the webkit css animation extensions.
Although you will need to be careful with events since most mouse related events on the iPhone behave a little different from what you might expect. This presentation by PPK offers some clues about it:
http://yuiblog.com/blog/2009/04/27/video-ppk-jsevents/
Yep, iphone should run jquery just fine. The javascript support is surprisingly capable. Although you may want to look at some of the iPhone specific libraries out there. I forget their names. iUI I think?