web-dev-qa-db-ja.com

impress.js経由のPreziHTML5エディター

私は最近、 impress.js がPreziのHTML5バージョンとして作成されていることを知りました。これにより、独自のFlashテクノロジーから脱却し、代わりに、すべてのプラットフォームでユニバーサルになるオープンWeb標準を使用できます。

ただし、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例 。

では、使用できるWYSIWYG HTML5 Preziエディターはありますか？ HTML5、CSS3、JavaScriptに基づいたプレゼンテーションの作成がはるかに簡単になるので、1つ欲しいと思います。

javascriptflashhtmlwysiwygprezi
16
user824294

ねえ私は最近ストラットを作りました。 ImpressJS専用のプレゼンテーションエディタで、現在アルファ版ですが、ここにライブデモがあります： http://strut.io

Githubリポジトリ： https://github.com/tantaman/Strut

そしてここにそれについてのユーチューブビデオがあります： http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

スライドをx、y、z方向に移動することで、スライドの追加/削除、画像やテキストボックスの挿入、フォントの変更、プレゼンテーションの保存、スライド間の遷移の変更を行うことができます。

34
Matt Crinklaw-Vogt

Impress.jsにはいくつかのWYSIWYGエディターがあり、 GitHubで 問題トラッカーについて説明しています。

Strut と Impressionist が最も称賛されているようです。 Strutは非常に活発に開発されています（最終コミット：昨日）

議論されていない http://www.impressi.me/ 、これは2012年4月以降廃止されたようです。これも非常に基本的です。テキストとトランジションのみを追加できます。画像がありません。カスタムフォントサイズを入力できません。

5
Dan Dascalescu

Impress.jsプレゼンテーションを作成する別の方法があり、それは完全に無料です-www.jspres.comで入手できます。プレゼンテーションを作成するためのモジュールはJavaScriptベースですが、プロジェクトにはユーザーのプレゼンテーションを保存するサーバー側が含まれており、ユーザーはすべてのコンピューターからプレゼンテーションにアクセスできます。

例として、JSpresで作成された2つのプレゼンテーションがあります。 1つ目はプロジェクトの宣伝であり、2つ目は私の国の国家ITオリンピックに関するプロジェクトを想像したプレゼンテーションです（これが英語ではない理由ですが、移行を確認する必要があります：P）

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

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

ですから、誰かがそれを見て試してみたいが、いくつかの問題がある場合は、基本を理解するのに役立つ簡単なガイドを書きました。ここで見つけることができます： http://blog.jspres.com/2013/03/はじめに/

それで、私はあなたにプロジェクトを見るために少し好奇心を刺激するためにいくつかのスクリーンを置きます。私はあなたがそれを好きになることを望みます。

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

3
valkirilov

または、Presenteer.js（ http://willemmulder.github.com/Presenteer.js/ ）を使用して、あるHTML要素から次の要素に移動し、ビューポートで中央揃え/ズームすることもできます。データ要素は必要ありませんが、CSSで簡単に作業できます。

2
Willem Mulder

私は最近、実用的な impress.jsエディター プロトタイプを公開しました。ここでは、プレゼンテーションでのスライドのWYSIWYG配置に焦点を当てました。

Githubで進行状況を追跡したり、問題を報告したりできます： https://github.com/naugtur/builder4impress

2
naugtur

スライドのコンテンツをインラインで編集するために、Aloha Editor *で作成された最初のプロトタイプがあります http://lab.evo42.net/editable-impress.js/ -スライドの追加または配置はまだできません.。。

*） http://aloha-editor.org

2
rene.kapusta