Прези HTML5 редактор с помощью impress.js - программирование
Подтвердить что ты не робот

Прези HTML5 редактор с помощью impress.js

Недавно я узнал, что impress.js был создан как версия Prezi для HTML5. Это помогает нам отказаться от проприетарной технологии 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>

Пример скрипта JS.

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

4b9b3361

Ответ 1

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

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

и вот здесь есть информация о youtube: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

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

Ответ 2

Существует несколько редакторов WYSIWYG для Impress.js, обсуждаемых Strut и Impressionist, похоже, быть самым похвальным. Strut очень активно развивается (последняя фиксация: вчера)

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

Ответ 3

Существует еще один способ создания презентаций 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/

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

enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

Ответ 4

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

*) http://aloha-editor.org

Ответ 5

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

Ответ 6

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

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