Prezi HTML5 Editor via impress.js

Question

Недавно я узнал, что impress.js был создан как версия HTML5 Prezi. Это помогает нам отойти от проприетарной технологии Flash и вместо этого использовать открытый веб-стандарт, который станет универсальным для всех платформ.

Однако, это раздражает, чтобы набирать код в текстовом редакторе HTML (например, писать перевод, вращение и значения шкалы для слайда). Трудно представить себе презентацию, особенно когда код расширяется до невыносимой длины.

Итак, вот пример, который я только что создал. При чтении HTML-кода ниже трудно точно узнать, где находятся слайды, и как они будут отображаться.

<div id="impress"> 
    <div class="step" data-x="0" data-y="0"> 
     Slide 1 at origin. 
    </div> 

    <div class="step" data-x="100" data-y="100" data-scale="0.5"> 
     Slide 2 has been moved south-eastern side and shrunk by half compared to slide 1. 
    </div> 

    <div class="step" data-x="-500" data-y="-405" data-rotate-x="50" data-rotate-y="-34" data-rotate-z="50" data-scale="2.5"> 
     Slide 3 has been rotated in 3D and is 2.5x larger than slide 1. 
    </div> 
</div> 

<script type="text/javascript" src="impress.js"></script> 

A JS Fiddle Example.

Так что есть WYSIWYG HTML5 Prezi редактор, который я мог бы использовать? Я бы хотел, так как это упростит создание презентаций на основе HTML5, CSS3 и JavaScript.

Answer 1

Эй, я недавно сделал Strut. Ее редактор презентаций только для ImpressJS и в настоящее время в альфа, но есть демо здесь: http://strut.io

Github репозиторий: https://github.com/tantaman/Strut

и вот YouTube VID об этом: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

Вы можете добавлять/удалять слайды, вставлять изображения и текстовые поля, менять шрифты, сохранять презентации и изменять переходы между слайдами, перемещая слайды вокруг в направлениях x, y & z.

Answer 2

Для редактирования слайдов инлайн контента есть первый прототип сделал с Aloha Editor * доступен в http://lab.evo42.net/editable-impress.js/ - добавление или организация слайдов пока не представляется возможным ...

*) http://aloha-editor.org

Answer 3

В качестве альтернативы, вы могли бы используйте Presenteer.js (http://willemmulder.github.com/Presenteer.js/), который просто перемещается из одного элемента HTML в другой и центрирует/масштабирует его в окне просмотра. Вам не нужны элементы данных, но они могут работать просто с CSS.

Answer 4

Я недавно опубликовал рабочий прототип impress.js editor, где я сосредоточился на позиционировании слайдов WYSIWYG в презентации.

Вы можете отслеживать прогресс или сообщить о проблемах на GitHub: https://github.com/naugtur/builder4impress

Answer 5

Есть несколько WYSIWYG редакторы Impress.js, обсуждали on its GitHub отслеживания проблем.

Strut и Impressionist, по-видимому, самые похвальные. Strut очень активно развивается (последняя фиксация: вчера)

Не обсуждался http://www.impressi.me/, который кажется заброшенным с апреля 2012 года. Это также очень просто: вы можете добавлять только текст и переходы. Нет изображений, не может вводить собственный размер шрифта.

Answer 6

Существует еще один способ создания презентаций impress.js, и это совершенно бесплатно - доступно на www.jspres.com.Модуль для создания презентаций основан на JavaScript, но проект содержит серверную часть, в которой хранятся презентации пользователей, и они могут обращаться к ним с каждого компьютера.

Для примера представлены две презентации, выполненные с использованием JSpres. Первый - это просто промо-проект, а второй - презентация, которая представляла собой проект о национальных олимпийских играх в моей стране (это причина не на английском, но вы должны увидеть переходы: P)

http://jspres.com/presentation/present/p:3

http://jspres.com/presentation/present/p:31

Так что, если кто-то хочет увидеть и попробовать, но есть некоторые проблемы, которые я написал простое руководство, которое поможет вам понять основы и могут быть найдены здесь: http://blog.jspres.com/2013/03/getting-started/

Поэтому я поставлю несколько экранов, чтобы немного спровоцировать любопытство в вас, чтобы увидеть проект. Хотелось бы, вам понравится.