Tuesday, December 2nd, 2008
Shawn Lauriat hacked CSS Transition support into the presentation app S5. Now he has posted slides from one of his talks that uses the functionality.
See how you can add fun (or annoying ;) transitions to your S5 prezos, even on the iPhone:
Monday, November 24th, 2008
Category: Debugging
, JavaScript, iPhone
KUMAGAI Kentaro has created a JSCocoa based interactive console for the iPhone:
I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa through John Resig’s article and I abandoned my project and rewrited my codes on JSCocoa.
Now it works on the top of JSCocoa. It’s very helpful while inspecting the hierarchy of the view tree or size of the views etc.
Very cool stuff as you can run code on the fly and see it all change in the emulator. His article explains how you set it up, and gives you some fun examples.
Friday, November 21st, 2008
John has done a really good job at wrapping up information on the various options for JavaScript developers on the iPhone platform.
He discusses the various approaches:
I was chatting with someone on the PhoneGap team about their Android support. There is a play to be had to enable rich mobile applications all based on the Open Web stack that we know and love :)
Friday, November 14th, 2008
Dr Nic has shared his experiences using WebKit to implement part of your iPhone app (in his case SurfView):
Negatives
- (void)webViewDidFinishLoad:(UIWebView *)webView is slow. “You’re running an interpreter (JavaScript runtime) on top of a device with a small CPU and small memory. Go figure.”Why you may want to do it
WebKit for rapid prototyping: WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.
It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.
WebKit isn’t the holy grail for non-Objective-C developers, but if your grand-poobar level skills are in JavaScript and HTML, and your Objective-C/iPhone skills are still catching up, then its a wonderful prototyping platform. Especially for static, complicated displays of data. Especially if that data includes HTML content from an external feed which needs to be rendered.
For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.
A very nice read.
Friday, November 7th, 2008
We’ve talked a bit about Apple’s extensions to HTML and CSS; <canvas> has of course gone on to much fame and fortune. Charles Ying pointed us to his CSS-VFX project which aims to be
a collection of components and code examples that illustrate the power of CSS Visual Effects. So far, only 1 gem that illustrates a popular RIA user interface demo, “Cover Flow” is currently available. If you’d like to see more, please don’t hesitate to suggest something you’d like to see.
Charles has a blog entry with a video showing off a mobile Safari demo of using Apple’s CSS Visual Effects to create a Cover Flow interface:
The demo makes use of a variety of these extensions:
* zflow starts by loading each image from the images array. When each image is loaded, we scale the image to fit in a square region, and apply 3D CSS transforms to scale it in place.
* Reflections - zflow then takes the scaled image and creates a Canvas element that contains a gradient alpha mask of the image’s reflection (using a “reflect” function to do this) and positions the canvas element in place.
* Touch Controller - zflow creates a TouchController object, who’s job is to field touch events from Mobile Safari and calculate an appropriate offset.
* Clicking - zflow detects when no move events have been made, and zooms + rotates the focused image forward by setting a “CSS Transition”ed 3D transform on the focused image. Clicking again transitions the image back.
* Inertia - zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, we calculate the projected velocity and set the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes — slowing the tray down gradually.
It makes you wonder how many folks are going to need to learn the SDK in the future…
Thursday, October 9th, 2008
Category: iPhone
Now that the NDA has been released, book publishers are finally able to get out their wares. Christopher Allen and Shannon Appelcline have written iPhone in Action, and have kindly given the Ajaxian community free downloads of a couple of the early access chapters:
I hope to see books that focus on what you can do with the Web APIs too of course ;)
This article is based on iPhone in Action, to be published January 2009. It is being reproduced here by permission from Manning Publications. Manning early access books and ebooks are sold exclusively through Manning. Visit the book’s page for more information.
Friday, October 3rd, 2008
I am so happy that the NDA mess is over! Clancy has written about how you can have your iPhone Web app run in full screen and has a demo app that shows it off:
Monday, September 29th, 2008
Ben Putman has put together a nice iPhone Safari 3D navigation menu example that shows off the transforms and events available on the latest mobile Safari.
Ben told us:
In thinking of an interesting test, I've created a menu that you can rotate across a fixed y-axis with touch, allowing you to spin the menu around and see the depth and back of elements. There are also some examples of how animations can be used as you click and the menu unfolds. I also added a lightbox to examine how one might view some photos although it's not really practical in this form.
Open up the demo in your iPhone / Touch and also take a peak at the source to see what is going on, with snippets like this:
Monday, September 22nd, 2008
Category: iPhone
Dave Johnson calls PhoneGap "AIR for the iPhone" because this nice little hack, first created at an iPhone BarCamp, wraps the Web view with a container. This container gives the view access to APIs available on the device, that may not be available yet via WebKit alone. AIR provides a similar container for Flash and Ajax content on the desktop.
PhoneGap is a free open source development tool and framework that allows web developers to take advantage of the powerful features in the iPhone SDK from HTML and JavaScript. We're trying to make iPhone app development easy and open. For many applications a web application is the way to but in Safari you don't get access to the native iPhone APIs, and the that's the problem we're trying to solve.
It is written in Objective-C and allows developers to embed their web app (HTML, JavaScript, CSS) in Webkit within a native iPhone app. We're big advocates of the Open Web and want JavaScript developers to be able to get access iPhone features such as a spring board icon, background processing, push, geo location, camera, local sqlLite and accelerometers without the burden of learning Objective-C and Cocoa.
PhoneGap also has a web app that allows web developers to quickly package their web app into a native iPhone app by providing a URL, a name and icon graphic the web service with automagically create a native iPhone application. We haven't open sourced that code but we're going to soon.
PhoneGap was conceived at iPhoneDevCamp II by Nitobi developer Brock Whitten, Rob Ellis, freelance designer Colin Toomey and Eric Oesterle.
There are a few APIs available now, and others pending:
You can take a peak at the open source code on github. For example, here is the code that wraps the iPhone location service:
[c]
@implementation Location
- (id)init{
NSLog(@"Gap::Location");
locationManager = [[CLLocationManager alloc] init];
[locationManager setDelegate:self];
return self;
}
+ (void)startTracking{
NSLog(@"starting location tracker");
[locationManager startUpdatingLocation];
}
+ (void)stopTracking{
NSLog(@"stopping location tracker");
[locationManager stopUpdatingLocation];
}
- (void)location{
NSLog(@"location is");
}
- (void)log{
NSLog(@"the location is...");
}
- (void)dealloc {
[locationManager release];
[super dealloc];
}
@end
[/c]
Thursday, September 18th, 2008
Dylan Schiemann wrote about how disappointing it was that the iPhone didn't support SVG:
Safari on the iPhone does not currently have support for SVG. Safari 3 beta on Mac and Windows is currently the best browser on the planet for SVG performance, so this is a somewhat disappointing omission. We are hopeful that by the end of the year, the iPhone will receive the Safari 3 upgrade, and along with that native support for SVG. For now, we’ll have to wait on dynamic charting and drawing tools due to no SVG and the lack of mousemove event handlers.
It appears that if you point your iPhone 2.1 browser to SVG content and tests it now works!
Wednesday, September 17th, 2008
Tomi Mickelsson has created a fun iPhone Web App called Spin the Bottle. You know, a Web app, not one that has to get into the Apple store.
You can check it out on the iPhone/Touch/emulator and you will see how Tomi uses the iPhone specific APIs, such as:
Monday, September 8th, 2008
iPhone apps get a lot of attention and press and understandably so. For a lot of iPhone app developers, these tiny apps can turn into a tremendous cash cow making development for the phone platform invaluable. But considering that the iPhone is running Safari on it, it's surprising that we haven't seen a whole lot more buzz surrounding the use of the new Webkit functionality available to the browser.
Paul Bakaus, lead developer for the jQuery UI team, has started exploring the possibilities of what Safari can offer to web application developers:
So I wasn’t content with the things I’ve tried doing in Safari, and recently began digging through the documentation of the iPhone SDK and the actual CSS Transforms spec.
I was a bit skeptical when I first read about all the cool functions that work in Webkit iPhone, but nowhere else, because there was little documentation, and literally nothing done by other developers, no demos, no tests. I thought, surely, some students with too much free time must have jumped on that immediately?
Seems like Paul was on the right track as finding information on taking advantage of there features for the iPhone was scarce. So by using a iPhone simulator, Paul was able to start hacking at some of the built-in Webkit features, especially the 2D CSS Transforms.
Here comes the cool stuff: The perspective function seems to define how the other primitive functions behave.
Let’s have a look at a practical example: Take a look at the following three functions:
* rotateX - Rotates the element on the X axis.
* rotateY - Rotates the element on the Y axis.
* rotateZ - Rotates the element on the Z axis (By default, same as “rotate”)Try these out - all three will give you flat, 2d animations, although they are, in fact, functions that use a 3D matrix. However, now change the -webkit-perspective property to 200, and try again. Now, you established virtual depth, and all three functions will give you incredible results.
The end result of Paul's tinkering is a very cool flip effect that is handled within the iPhone's browser and similar to that found in typical iPhone applications. While only a small demo, this opens up possibilities in how browser-based applications can react within the iPhone and what can be presented to mobile web users.
To see the demo, you will need an iPhone or an iPhone simulator.
Tuesday, August 12th, 2008
Category: JavaScript, Mobile, Performance