2012-02-23 3 views
16

私は最近、がPreziのHTML5バージョンとして作成されていることを知っていました。これは、私たちが独自のFlashテクノロジから離れ、代わりにすべてのプラットフォームに共通するオープンなWeb標準を使用するのに役立ちます。impressionz.jsによるPrezi HTML5エディタ

しかし、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に基づいてプレゼンテーションを作成する方がはるかに簡単になるため、1つをお勧めします。また、スライドを追加したり、配置することはできませんまだ...

*)http://aloha-editor.org

+0

Preziは今HTML5です:https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135 – user824294

答えて

34

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

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

、ここではそれについてユーチューブのVIDです: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

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

+0

非常に素晴らしい、私感動しました! (PUNは意図していません)。ライブデモはオフラインのようですが。 –

+0

tantaman.github.com/Strutは素晴らしいです、 "概要"ビューのトップビューを編集してください。 – diyism

2

* Presenteer.js(http://willemmulder.github.com/Presenteer.js/)を使用して、HTML要素から次のHTML要素に移動し、ビューポート内でその中心をズーム/ズームします。データ要素は必要ありませんが、CSSで簡単に作業できます。

2

、あなたは可能性 - http://lab.evo42.net/editable-impress.js/で入手可能なアロハエディタで行った最初のプロトタイプがありますスライドコンテンツをインラインで編集するための

2

私は最近、プレゼンテーションでスライドのWYSIWYGポジショニングに焦点を当てた作業用のimpress.js editorプロトタイプを公開しました。

あなたは進行状況を追跡したり、githubの上の問題を報告することができますhttps://github.com/naugtur/builder4impress

5

がImpress.jsのためのいくつかのWYSIWYGエディタがあり、on its GitHub課題追跡を議論しました。

StrutおよびImpressionistが最も賞賛されるようです。 Strutは非常に積極的に開発されています(最後のコミット:昨日)

2012年4月から放棄されたhttp://www.impressi.me/があります。これは非常に基本的なものです。テキストとトランジションのみ追加できます。イメージはありません。カスタムフォントサイズを入力することはできません。

3

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

例としてJSpresで2つのプレゼンテーションが行われています。最初のものはプロジェクトのプロモーションだけで、2番目のプロジェクトは私の国の国家IT olimpicsに関するプロジェクトを想起させたプレゼンテーションです(これは英語ではありませんが、移行を参照する必要があります: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 here enter image description hereenter image description hereenter image description hereenter image description here

+0

これは素晴らしい製品の1つです。私は本当にそれを楽しむ!あなたもそれを試してみる必要があります! :) – Bankin

関連する問題