3

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.

Xyand
  • 4,470
  • 4
  • 36
  • 63
  • are you trying to build a "presentation" tool like theirs or trying to build a whole website? – therin Oct 11 '11 at 22:04
  • @therin I'm focusing on the "presentation" component which will cover most of the site. It is not a presentation, however, it shares many of its visual features. – Xyand Oct 11 '11 at 22:11

6 Answers6

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.

Thomas Handorf
  • 371
  • 5
  • 11
2

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.

therin
  • 1,448
  • 1
  • 15
  • 27
  • 1
    Oh yeah. I don't like pure Flash Sites either. But you can always embed Flash into your website while keep the whole structure still HTML/CSS. – Felipe Oct 11 '11 at 22:17
  • Does it seem reasonable to write the "presentation" component in pure Flash? – Xyand Oct 11 '11 at 22:22
  • Yes, if that's what you're going for. I'm just stressing the fact that gigantic Flash websites are not optimal, they aren't easily edited, and they are not accessible. Use Flash wisely please =) – therin Oct 11 '11 at 22:26
  • For me it does. I love flash/flex but I hate pure-Flash websites. Flash for a subset of your website seems reasonable to me at least. – Felipe Oct 11 '11 at 22:27
1

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>
Thomas Handorf
  • 371
  • 5
  • 11
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.

Felipe
  • 11,557
  • 7
  • 56
  • 103
  • I'm not a Flash developer. By saying fast, what time period did you have in mind? For an experienced developer of course. – Xyand Oct 11 '11 at 22:20
  • I've not used prezi very extensively but the whole thing looks simple to me. No doubt they've optimized it quite a bit, judging from the public they have. I'm not sure. Perhaps 2 to 3 weeks for an experienced developer. I'm not a great estimator by the way. – Felipe Oct 11 '11 at 22:23
1

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.

Shamaila Tahir
  • 988
  • 2
  • 8
  • 17
  • My estimate above for point 1 can be taken as a good estimate while for 2 I am also not sure can give you better estimate after getting more information about the project. – Shamaila Tahir Oct 12 '11 at 10:29
  • So mainly you need zooming and panning of images/text and panning. As you said there can be many widgets shown on the canvas at a time and each could have its own zooming, so I guess it should take atleast 5 weeks. My experience with canvas is that its really fantastic but its not cross browser we have to make efforts to make it look the same or almost the same in all browsers (Specially in IE). So keep the margin of cross browser issues in mind. – Shamaila Tahir Oct 14 '11 at 07:57
  • @Shamaila would it be possible to view the application? – Peter De Winter Nov 18 '11 at 08:54
  • The owner of the application wants me to not show it to anyone. He has not yet launched the application and he is too sensitive about it. So I am sorry I cannot show it to you. – Shamaila Tahir Nov 19 '11 at 08:37
0

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).

Erik Sundvall
  • 89
  • 7