Browsing through the new iPhone Developer Site tonight I noticed a video title iPhone SDK and Web Developers. Figuring this was as close as I would get to developing for the iPhone I decided to give it a look. And damn Apple has made SafariTouch a really nice platform for applications. Here’s a some highlights of what’s new:

Native getElementsByClassName and CSS Selectors API

No more need to load up jQuery to do easy, advanced DOM walking. Safari has the same syntax as $() built right in, without the download hit and with a performance boost.

CSS Animations

Fully functional animations using CSS syntax built in. I think my favorite thing about this is that you can define the animation to run every time a certain CSS property is changed. Watch the video for details. Also, this functionality allows for things like rotating an object.

SVG Support

Built in SVG means lightweight, fully scalable vector graphics can be used anywhere a binary image normally would be.

Offline Data

The new SafariTouch has added the ability to create and interact with local databases that do not require internet access. Two simple javascript commands, one for creating a database and one for executing sql statements on that database, means no learning curve for anyone with database programming experience. I think my favorite thing about this is the ability to create an online app that can store data, but not store it on a remote server, keeping private information solely on the client. Security rules prevent any cross-site scripting vulnerabilities.

Full Screen Mode

By simply adding a meta tag to your document your webpage can launch in full screen without the SafariTouch chrome. This gives you about 25% more screen real estate and makes your webapp look like a native app. Smartly, I think, full screen mode only works when the site is launched from a WebClip on the home screen of the phone, preventing users from having their browsers hijacked by a random site they stumble onto. A final nice touch is having any links set to open in a new window launch a separate instance of SafariTouch, making the app truly feel native.

Gestures

A javascript API to replace mouseevents with gestureevents. The video claims that your javascript is passed the exact same data that a native app receives when a user interacts with the screen.

Developer Tools

Additionally, the SDK download comes with an iPhone Simulator with SafariTouch built in, so you can test a webapp on your desktop as it will appear on the Touch platform. I didn’t notice that it is not sending the proper UserAgent as a few sites I tried did not redirect me to their iPhone versions.

Finally, Dashcode, the Dashboard Widget editor, now has support for building webapps. It has built in templates that have a native look as well as the CSS animations baked in for a native feel.

The video is available in the iPhone Developer Center and loads in iTunes. It requires an ADC login to view it, but that’s a free signup if you don’t have one.

Update

Just finished checking to see if any of these new features are currently available on the iPhone. Only CSS transitions appears to be working. Oddly, same store with the iPhone simulator app from the SDK.