Prezi-like web interface. Flash or HTML5?

Question

I would like to write a web interface that resembles Prezi.com in its user experience. What would be the best technology for that purpose?

Project requirements:

1. Fast implementation (it is a demo) - I'd appreciate a rough estimate
2. Large amounts of data - dynamic content loading/unloading is required.

My natural candidates are Flash and HTML5.

Prezi.com is an alternative platform for presentations that uses single canvas zoom/pan/rotate controls instead of classic slide-by-slide interface. An example is available here.

Edit

The visual part of my website needs to display multiple widgets (images, videos, text) on canvas and allow the user to navigate by zooming and panning. Each widget would have its own native zoom. The number of widgets would be enormous, however, simultaneously only a small number of widgets are visible.

Answer 1

If you need it fast I think you'd probably benefit from the whole application suite Adobe has to develop Flash-based applications.

Android Tablets should be able to run it, as well as all desktop Browsers. Only iOS (iPad and iPhone) would be left out.

IMHO HTML5 is not mature yet.

Alternatively, you could use Adobe AIR and compile for the web, iOS and Android natively.

Answer 2

I have just finished an application which is almost like prezi.com, instead of presentations we have videos. I would recommend you to use GWT for the whole application and HTML5 for the visual features you want to develop. I am not sure about your specific needs for the visual features but if they are somehow similar to prezi then you can use canvas.

About time and cost estimates I would break the application into two parts

1) Overall site, logins, facebook/google login integration add new prezi's, view popular prezi's, register with captcha, forgot password, view one's own prezi's, enter comments and ratings on prezi's. It should take not more then 3 weeks to develop this site.

2) The visual features components. I can tell you more about this if you can share more details with us. I think prezi's component will take about 3 weeks.

Answer 3

Felipe is right, if fast is your goal then Flash is the way to go. That being said, however, I think that most people around here would agree with me when I say that pure Flash sites are almost never done right. Try to use it sparingly, and only for things that really require animation.

Answer 4

Have a look at Sozi http://sozi.baierouge.fr/wiki/en:welcome an open source Prezi-like environment that uses SVG (and Inkscape as editor).

Answer 5

If it still matters to you, Webpgr is exactly what your are looking for. It's HTML5 based and you can use click and swipe gestures to navigate through the page. There is a Photoshop-like online editor. It's in beta but you can request an account.

Answer 6

There is now layerJS, an open source library which can create Prezi-like HMTL5 web interfaces. It even allows multiple layers if you need some elements to move independently of each other.

It's super simple: just add a stage div put one or more layers in and add as many frames as you want between you can have zooming, panning and rotating transitions.

There is more than just Prezi like transitions by using a different layer layout type than "canvas".

The HTML code would look like this:

<div data-wl-type="stage">
  <div data-wl-type="layer" data-wl-layout-type="canvas">
    <div data-wl-type="frame" data-wl-name="frame1" data-wl-x="100" data-wl-width="1000" data-wl-rotation="45" ...>
    </div>
    <div data-wl-type="frame" ...>
    </div>
  </div>
</div>