类似 Prezi 的 Web 界面。 Flash 还是 HTML5？答案

【问题标题】：Prezi-like web interface. Flash or HTML5?类似 Prezi 的 Web 界面。 Flash 还是 HTML5？
【发布时间】：2011-10-11 21:55:18
【问题描述】：

我想编写一个用户体验类似于 Prezi.com 的 Web 界面。为此目的，最好的技术是什么？

项目要求：

快速实现（这是一个演示） - 粗略估计一下，我不胜感激
大量数据 - 需要动态内容加载/卸载。

我的自然候选人是 Flash 和 HTML5。

Prezi.com 是一个替代的演示平台，它使用单个画布缩放/平移/旋转控件，而不是经典的逐张幻灯片界面。 here 提供了一个示例。

编辑

我网站的视觉部分需要在画布上显示多个小部件（图像、视频、文本），并允许用户通过缩放和平移来导航。每个小部件都有自己的原生缩放。小部件的数量将是巨大的，但是同时只有少量的小部件是可见的。

【问题讨论】：

您是在尝试构建像他们一样的“演示”工具，还是尝试构建整个网站？
@therin 我专注于“演示”组件，它将覆盖网站的大部分内容。它不是一个演示文稿，但它具有许多视觉特征。

标签： flash html canvas air prezi

【解决方案1】：

如果它仍然对您很重要，Webpgr 正是您正在寻找的。它基于 HTML5，您可以使用单击和滑动手势来浏览页面。有一个类似 Photoshop 的在线编辑器。它处于测试阶段，但您可以申请一个帐户。

【讨论】：

【解决方案2】：

Felipe 是对的，如果您的目标是快速，那么 Flash 就是您的最佳选择。话虽如此，但是，当我说纯 Flash 网站几乎永远不会做对时，我认为这里的大多数人都会同意我的看法。尽量少用它，并且只用于真正需要动画的东西。

【讨论】：

哦，是的。我也不喜欢纯 Flash 站点。但是您始终可以将 Flash 嵌入到您的网站中，同时保持整个结构仍为 HTML/CSS。
用纯Flash写“presentation”组件看起来合理吗？
是的，如果这就是你想要的。我只是强调一个事实，即巨大的 Flash 网站不是最佳的，它们不容易编辑，而且它们也无法访问。请明智地使用 Flash =)
对我来说确实如此。我喜欢 flash/flex，但我讨厌纯 Flash 网站。至少在我看来，你的网站子集的 Flash 是合理的。

【解决方案3】：

如果您需要它，我认为您可能会从 Adobe 开发基于 Flash 的应用程序所需的整个应用程序套件中受益。

Android 平板电脑应该能够运行它，以及所有桌面浏览器。只有 iOS（iPad 和 iPhone）会被排除在外。

恕我直言，HTML5 还不成熟。

或者，您可以使用 Adobe AIR 并为 Web、iOS 和 Android 本地编译。

【讨论】：

我不是 Flash 开发人员。说快，你想到什么时间段？当然对于经验丰富的开发人员而言。
我没有广泛使用prezi，但对我来说整个事情看起来很简单。毫无疑问，从他们拥有的公众来看，他们已经对其进行了相当多的优化。我不知道。经验丰富的开发人员可能需要 2 到 3 周。顺便说一句，我不是一个很好的估算师。

【解决方案4】：

我刚刚完成了一个几乎类似于 prezi.com 的应用程序，而不是演示文稿，我们有视频。我建议您将 GWT 用于整个应用程序，将 HTML5 用于您想要开发的视觉功能。我不确定您对视觉功能的具体需求，但如果它们与 prezi 有点相似，那么您可以使用画布。

关于时间和成本估算，我会将应用程序分为两部分

1) 整体网站、登录、facebook/google 登录集成添加新的 prezi，查看流行的 prezi，注册验证码，忘记密码，查看自己的 prezi，输入 cmets 和 prezi 的评级。开发此网站的时间不应超过 3 周。

2) 视觉特征组件。如果您可以与我们分享更多详细信息，我可以告诉您更多信息。我认为 prezi 的组件将需要大约 3 周的时间。

【讨论】：

我上面对第 1 点的估计可以作为一个很好的估计，而对于第 2 点，我也不确定在获得有关该项目的更多信息后能否给您更好的估计。
所以主要是你需要缩放和平移图像/文本和平移。正如你所说，一次可以在画布上显示许多小部件，每个小部件都可以有自己的缩放，所以我想至少需要 5 周。我对画布的体验是它非常棒，但它不是跨浏览器，我们必须努力使其在所有浏览器中看起来都相同或几乎相同（特别是在 IE 中）。因此，请记住跨浏览器问题的余量。
@Shamaila 可以查看申请吗？
应用程序的所有者希望我不要向任何人展示它。他还没有启动应用程序，他对它太敏感了。所以很抱歉我不能给你看。

【解决方案5】：

现在有layerJS，一个可以创建Prezi-like HMTL5 Web 界面的开源库。如果您需要一些元素相互独立移动，它甚至允许多层。

超级简单：只需添加一个stage div，放入一个或多个图层，然后在您之间添加任意数量的frame具有缩放、平移和旋转过渡。

通过使用与“画布”不同的图层布局类型，不仅有类似 Prezi 的过渡。

HTML 代码如下所示：

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

【讨论】：

【解决方案6】：

看看 Sozi http://sozi.baierouge.fr/wiki/en:welcome 一个开源的类似 Prezi 的环境，它使用 SVG（和 Inkscape 作为编辑器）。

【讨论】：