Prezi HTML5 Editor tramite impress.js

Question

Ho recentemente saputo che impress.js è stato creato come versione HTML5 di Prezi. Questo ci aiuta ad allontanarci dalla tecnologia proprietaria di Flash, e invece utilizzare uno standard web aperto che diventerà universale per tutte le piattaforme.

Tuttavia, è fastidioso digitare il codice su un editor di testo HTML (come scrivere la traduzione, la rotazione e i valori di scala per la diapositiva). Diventa difficile visualizzare la presentazione specialmente quando il codice viene esteso a una lunghezza insopportabile.

Quindi ecco un esempio che ho appena creato. Durante la lettura del codice HTML di seguito, è difficile sapere esattamente dove si trovano le diapositive e come verranno visualizzate.

<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.

Quindi c'è un editor Prezi HTML5 WYSIWYG che potrei usare? Ne vorrei uno in quanto renderà molto più semplice creare presentazioni basate su HTML5, CSS3 e JavaScript.

Answer 1

Ehi, di recente ho realizzato Strut. Il suo un editor di presentazione solo per ImpressJS ed è attualmente in alpha, ma c'è una demo live qui: http://strut.io

Github repository: https://github.com/tantaman/Strut

ed ecco un vid youtube su di esso: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

È possibile aggiungere/rimuovere diapositive, inserire immagini e caselle di testo, cambiare font, salvare presentazioni e modificare le transizioni tra le diapositive spostando le diapositive nelle direzioni x, y & z.

Answer 2

Per la modifica della linea di contenuti diapositive c'è un primo prototipo realizzato con Aloha Editor * disponibile presso http://lab.evo42.net/editable-impress.js/ - aggiungendo o organizzare diapositive non è ancora possibile ...

*) http://aloha-editor.org

Answer 3

In alternativa, si potrebbe usa Presenteer.js (http://willemmulder.github.com/Presenteer.js/) che si sposta semplicemente da un elemento HTML a quello successivo e lo centra/zooma nella vista. Non avrai bisogno degli elementi di dati, ma puoi lavorare semplicemente con i CSS.

Answer 4

Ho recentemente pubblicato un prototipo funzionante impress.js editor in cui mi sono concentrato sul posizionamento WYSIWYG delle diapositive nella presentazione.

È possibile monitorare il progresso o segnalare problemi su github: https://github.com/naugtur/builder4impress

Answer 5

Ci sono diversi editor WYSIWYG per Impress.js, discusso on its GitHub issue tracker.

Strut e Impressionist sembrano essere i più elogiati. Strut è molto attivamente sviluppato (ultimo commit: ieri)

Non discusso c'è http://www.impressi.me/, che sembra abbandonato da aprile 2012. È anche molto semplice: è possibile aggiungere solo testo e transizioni. Nessuna immagine, non è possibile inserire una dimensione del carattere personalizzato.

Answer 6

C'è un altro modo per creare impression.js presentazioni ed è completamente gratuito - disponibile su www.jspres.com.Il modulo per la creazione di presentazioni è basato su JavaScript, ma il progetto contiene lato server che memorizza le presentazioni degli utenti e possono accedervi da ogni computer.

Ci sono due presentazioni fatte con JSpres per un esempio. Il primo è solo promozionale del progetto, il secondo è la presentazione che ha immaginato il progetto sulle olimpiadi IT nazionali nel mio paese (questo è il motivo per cui non è in inglese, ma devi vedere le transizioni: P)

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

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

Quindi, se qualcuno vuole vedere e provare, ma hanno alcuni problemi che ho scritto una semplice guida che vi aiuterà a capire le basi e può essere trovato qui: http://blog.jspres.com/2013/03/getting-started/

Quindi metterò alcuni schermi per provocare un po ' curiosità in te per vedere il progetto. Vorrei che ti piacesse.