How to create quick HTML5 browser apps with Keynote

[erz]

Hi folks, I am currently researching the various WYSIWYG HTML5 editors (yes, it's mainly CSS and JavaScript) and other means to create interactive rich media content that is accessible without flash on iPads and the like. So before I turned to reviewing the workflow of new developments like Hype, Radi, CSSanimate and their ilk or use Inkscape to output JavaScript enriched SVG I created a proof of concept to using Keynote for interactive mockups that work on an iPad as browser apps via iWork.com

I ran into a couple of problems with iWork.com so if you happen to know how to work more of the glitches, I'd be more than happy to improve the experience. Anyway, here is the "game" http://tumblr.com/xzr2op4nct

Thanks in advance,
Jakob

 

[digitalField]

reminds me of old HyperCard apps.

 

[erz]

Reworked the "app" with Hype

Now I gave Tumultco's Hype a spin and boy, if you do have the graphics readily available simple output to HTML5 is much easier than tweaking your Keynote file. Keynote shapes are converted to transparent PNG when you drag and drop them into Hype, so I could set up the whole thing relatively quickly. Some interface issues are still plaguing the app, but I see it as a public beta (for 30$ in the App store) anyway. If the tool set evolves into flash territory I wonder what they'll eventually charge.

Not rendering fast enough on an iPad1 to be usable but looks great in Safari on my iMac to me:
http://dl.dropbox.com/u/3532118/html5iPad/html5iPad.html