Apple® today announced that this year is the last year the company will exhibit at Macworld Expo. Philip Schiller, Apple’s senior vice president of Worldwide Product Marketing, will deliver the opening keynote for this year’s Macworld Conference & Expo, and it will be Apple’s last keynote at the show.
When Lilia Martinez-Coburn, my colleague at hi5, first told me about the upcoming Nokia N97, I was skeptical. I’ll eat my words today.
Nokia is certainly rising to the challenge and seems to be on track to be a BMW to Apple’s Mercedes-Benz in the new “internet in your pocket” generation of mobile phones. Consider these key ingredients:
Cinematic UX – Finally, someone has successfully xeroxed Apple’s Core Animation’s GPU + implicit animation model and who better than Nokia. The implicit animation model is key in making great UX with minimal pain and bugs. I suspect the UX polish is focused on the main “phone top” idle screen, but it’s a great showing.
Web Browser – It’s WebKit and Nokia already has a decent port.
Industrial design – N97’s form factor is great. Nokia is no slouch when it comes to ID, and they’re very close here. N97’s a fair amount thicker, but not too shabby.
But there are details that we won’t know until the N97 ships and are key to making sure Nokia doesn’t pull a “Prada”. Those are:
Performance – Touch interfaces need to have minimal to no latency. Graphics needs to be fast, and I have no doubt a GPU is sitting in that N97. Hopefully S60 5th Edition is up to speed here.
Software Ecosystem – Will Nokia provide an app store? Will there be refinements to S60 to let 3rd party developers finally make great apps? And can these developers make money? Nokia certainly is integrating with partners on the social networking front. But …
Nokia Maps? – Well, I’m certainly skeptical of Nokia’s ability to out innovate Google on mapping technology, but I wish them the best of luck. Competition is always good, and I hope Nokia finds the game changer in building their own mapping service.
I have two closing thoughts for now – 1) MacWorld is in January. I can’t wait to see that Apple tablet. 2) Finally, a new “internet communicator” with potential… though it hasn’t shipped yet.
This CoverFlow demo is part of a new open source project I’ve started, CSS-VFX. The idea with CSS-VFX is to demonstrate all the cool things that are possible with Apple’s CSS Visual Effects extensions.
How does it work?
The zflow demo in CSS-VFX uses the Apple CSS Visual Effects extensions for hardware accelerated (on iPhone!) 3D perspective correct transforms and easily animated transitions. HTML 5 Canvas is used for simulating reflections.
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.
What’s next?
I hope that CSS-VFX can become a series of graphics gems that clearly illustrate how to use CSS Visual Effects, as well as talk about some of the corner cases and best practices to get the best performance. If you come up with something you’d like to include, please let me know. I’ll be tinkering with a few more gems myself, just watch the project for more as time goes on.
And tell a friend, I can’t wait to see what everyone else does with these great new features in Safari on iPhone.
Where to learn more
The CSS-VFXopen source project is a good place to start. You can just use the zflow code in your own iPhone web pages (there’s docs on how to do that); and deep dive into the innerworkings of zflow to understand what exactly is going on.
Also, check out Apple’s proposed extensions: CSS 3D Transforms, CSS Transitions, and CSS Animation. They provide full specifications on what’s possible. Of course, there are a few gotchas when using these in practice, and I hope to document these as things progress.