iPhone Web Apps – A Treasure Hunt (Part 1)
I have an iPhone, but no Mac to code up some experiments with. Nothing major, just enough to satisfy the basic curiosity: what is this toy? What can it do that couldn't be done before? (and let's face it, it is a toy. With multi-touch hardware-accelerated geo-located interactive goodness, but a toy – just like every computing device any self-admitted geek has ever owned)
So that leaves building an iPhone web app. Normally there is some web page of documentation, and you read the documentation, and build it. Not so with mobile Safari development. Dust off the old map in the attic, and begin the treasure hunt.
Like any good treasure hunt, you get a whiff that "thar might be GOLD out thar." The skull-shaped island on the map is HTML5's canvas element – it's the new black with its 2D flash-less graphics, AND guaranteed to be supported consistently on the iPhone. So I play with it for a bit, and yes, it can draw shapes. And circles, and gradients, and stamp images. And then it stumbles as soon as we wander into animations – not the best refresh rate, and very cramped drawing space. Doesn't have that "feel" of a full application, not working for me yet.
So next step on the treasure hunt (find the crossed palm trees): get more drawing space! The interwebs figured out how to automatically scroll the window to get rid of the top navigation bar. Nice. Mix that in with YUI 3 to get the timing right and we are cooking. But that isn't enough – the big bar still fills up the bottom of the screen reminding me that all the cool kids have native apps and I'm still a lowly web app.
So what does the shadow at sunset point out on the rock wall? Tuns out that once you bookmark the page to a application icon (nice automatic shading and rounding on the icon, thank you Apple!) a few more meta tags work – including one that hides the bottom bar. Success: a nearly full-screen experience except for the clock across the top, but I can live with that. We are getting closer, dig down and pull on the old creaky lever.
However, like any good treasure hunt, it isn't supposed to be easy. The second you touch the screen and it shifts just like a dragged iPhone web page, the illusion shatters and the user knows you're just an amateur. Luckily, you can dig deeper and wrest back control using "preventDefault()" – and gain back total control over the interactive experience. Good luck getting that to happen automatically using YUI, not everyone plays nice yet... but they will soon!
Just when you think you are getting close, the poison darts shoot out from the ancient boobytrap. Everything is all stretched out, the canvas tag you are trying to draw on is really, really messing with your head, with coordinates all over the place. It is like the page is of some random dimensions, and touching in the middle thinks it is touching off to the side.Finally, just as you are getting drowsy and wondering "what was in those darts anyway?" the realization that canvas <width=""320"> is much, much different than CSS's canvas { width: 320px }. Why?!? Just to mess with me? Stop that! I was already confused enough with strange nested meta tags of <meta content="width=device-width" name="viewport"></meta>, then you got to go and say that how I define something as 320 pixels wide matters, a whole bunch. Not nice.
And then, the clouds part, and you see the sun shining through the leaves floating down from the trees, and the vision of what you could accomplish, the smoothness, the amazing frame rate, the 2d accelerated goodness… it's enough to get you moving again.
So there we stand at the entrance to the ancient cavern, the map in hand, the dotted line guiding towards that big black inky X somewhere deep within the dark. But will you we be able to find it?
So that leaves building an iPhone web app. Normally there is some web page of documentation, and you read the documentation, and build it. Not so with mobile Safari development. Dust off the old map in the attic, and begin the treasure hunt.
Like any good treasure hunt, you get a whiff that "thar might be GOLD out thar." The skull-shaped island on the map is HTML5's canvas element – it's the new black with its 2D flash-less graphics, AND guaranteed to be supported consistently on the iPhone. So I play with it for a bit, and yes, it can draw shapes. And circles, and gradients, and stamp images. And then it stumbles as soon as we wander into animations – not the best refresh rate, and very cramped drawing space. Doesn't have that "feel" of a full application, not working for me yet.
So next step on the treasure hunt (find the crossed palm trees): get more drawing space! The interwebs figured out how to automatically scroll the window to get rid of the top navigation bar. Nice. Mix that in with YUI 3 to get the timing right and we are cooking. But that isn't enough – the big bar still fills up the bottom of the screen reminding me that all the cool kids have native apps and I'm still a lowly web app.
So what does the shadow at sunset point out on the rock wall? Tuns out that once you bookmark the page to a application icon (nice automatic shading and rounding on the icon, thank you Apple!) a few more meta tags work – including one that hides the bottom bar. Success: a nearly full-screen experience except for the clock across the top, but I can live with that. We are getting closer, dig down and pull on the old creaky lever.
However, like any good treasure hunt, it isn't supposed to be easy. The second you touch the screen and it shifts just like a dragged iPhone web page, the illusion shatters and the user knows you're just an amateur. Luckily, you can dig deeper and wrest back control using "preventDefault()" – and gain back total control over the interactive experience. Good luck getting that to happen automatically using YUI, not everyone plays nice yet... but they will soon!
Just when you think you are getting close, the poison darts shoot out from the ancient boobytrap. Everything is all stretched out, the canvas tag you are trying to draw on is really, really messing with your head, with coordinates all over the place. It is like the page is of some random dimensions, and touching in the middle thinks it is touching off to the side.Finally, just as you are getting drowsy and wondering "what was in those darts anyway?" the realization that canvas <width=""320"> is much, much different than CSS's canvas { width: 320px }. Why?!? Just to mess with me? Stop that! I was already confused enough with strange nested meta tags of <meta content="width=device-width" name="viewport"></meta>, then you got to go and say that how I define something as 320 pixels wide matters, a whole bunch. Not nice.
And then, the clouds part, and you see the sun shining through the leaves floating down from the trees, and the vision of what you could accomplish, the smoothness, the amazing frame rate, the 2d accelerated goodness… it's enough to get you moving again.
So there we stand at the entrance to the ancient cavern, the map in hand, the dotted line guiding towards that big black inky X somewhere deep within the dark. But will you we be able to find it?
- Animating by drawing on the canvas – too slow.
- Animating by playing with the div's position – doesn't seem to be accelerated.
- Animating by adding CSS keyframes – can it be controlled enough?
Comments
Post a Comment