Prezi-подобный веб-интерфейс.Flash или HTML5?

Question

Я хотел бы написать веб-интерфейс, напоминающий Prezi.com по своему пользовательскому опыту. Какова будет лучшая технология для этой цели?

Требования к проекту:

1. Быстрое внедрение (это демо) - я бы оценил приблизительную оценку
2. Большие объемы данных - требуется динамическая загрузка / выгрузка контента.

Мои естественные кандидаты - Flash и HTML5.

Prezi.com - это альтернативная платформа для презентаций, в которой вместо классического интерфейса «слайд за слайдом» используются элементы управления масштабированием / панорамированием / поворотом на холсте. Пример доступен здесь .

Редактировать

Визуальная часть моего веб-сайта должна отображать несколько виджетов (изображения, видео, текст) на холсте и позволять пользователю перемещаться с помощью масштабирования и панорамирования. Каждый виджет будет иметь свой собственный зум. Количество виджетов было бы огромным, однако одновременно видно только небольшое количество виджетов.

Answer 1

Если это все еще имеет значение для вас, Webpgr - это именно то, что вы ищете.Он основан на HTML5, и вы можете использовать жесты «щелкать» и «смахивать» для перемещения по странице.Существует Photoshop-как онлайн-редактор.Это бета-версия, но вы можете запросить аккаунт.

Answer 2

Фелипе прав, если цель - быстрый, тогда Flash - это путь. При этом, однако, я думаю, что большинство людей здесь согласятся со мной, когда я скажу, что чисто Flash-сайты почти никогда не делаются правильно. Попробуйте использовать его экономно, и только для вещей, которые действительно требуют анимации.

Answer 3

Теперь существует layerJS , библиотека с открытым исходным кодом, которая может создавать Prezi-подобные HMTL5 веб-интерфейсы. Он даже позволяет несколько слоев , если вам нужно, чтобы некоторые элементы двигались независимо друг от друга.

Это супер просто : просто добавьте stage div, поместите в него один или несколько слоев и добавьте столько кадров , сколько вам нужно между масштабирование, панорамирование и вращающиеся переходы .

Существует не только переходы, подобные Prezi, с использованием другого типа макета слоя, чем "canvas".

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>

Answer 4

Я только что закончил приложение, которое почти похоже на prezi.com, вместо презентаций у нас есть видео. Я бы порекомендовал вам использовать GWT для всего приложения и HTML5 для визуальных функций, которые вы хотите разработать. Я не уверен в ваших конкретных потребностях в визуальных функциях, но если они чем-то похожи на prezi, то вы можете использовать canvas.

О смете времени и затрат Я бы разбил заявку на две части

1) Общий сайт, логины, интеграция с логином Facebook / Google, добавление новых prezi, просмотр популярных prezi, регистрация с помощью captcha, забытый пароль, просмотр собственных prezi, ввод комментариев и оценок для prezi. Разработка сайта должна занять не более 3 недель.

2) Визуальные особенности компонентов. Я могу рассказать вам больше об этом, если вы можете поделиться с нами более подробной информацией. Я думаю, что компонент prezi займет около 3 недель.

Answer 5

Если вам это нужно быстро, я думаю, вы, вероятно, выиграете от всего набора приложений, которые Adobe должна разрабатывать для Flash-приложений.

Планшеты Android должны быть в состоянии запустить его, как и все настольные браузеры. Только iOS (iPad и iPhone) будет оставлен.

ИМХО HTML5 еще не созрел.

В качестве альтернативы, вы можете использовать Adobe AIR и компилировать для Интернета, iOS и Android.

Answer 6

Взгляните на Sozi http://sozi.baierouge.fr/wiki/en:welcome среду, похожую на Prezi с открытым исходным кодом, которая использует SVG (и Inkscape в качестве редактора).