Prezi HTML5 Editor a través de impress.js

Question

Recientemente supe que impress.js se ha creado como una versión HTML5 de Prezi. Esto nos ayuda a alejarnos de la tecnología Flash propia y, en su lugar, utilizar un estándar web abierto que será universal para todas las plataformas.

Sin embargo, es molesto escribir el código en un editor de texto HTML (como escribir la traducción, la rotación y los valores de escala de la diapositiva). Resulta difícil visualizar la presentación, especialmente cuando el código se extiende a una duración insoportable.

Así que aquí hay un ejemplo que acabo de crear. Al leer el código HTML a continuación, es difícil saber exactamente dónde están las diapositivas y cómo se mostrarán.

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

¿Existe un editor WYSIWYG HTML5 Prezi que pueda usar? Quisiera uno porque facilitará mucho la creación de presentaciones basadas en HTML5, CSS3 y JavaScript.

Answer 1

Hola, recientemente hice Strut. Es un editor de presentaciones sólo para ImpressJS y está actualmente en alfa, pero hay una demostración en vivo aquí: http://strut.io

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

y aquí hay una vid youtube al respecto: http://www.youtube.com/watch?v=zA5s8wwme44&feature=share

Puede agregar/eliminar diapositivas, insertar imágenes y cuadros de texto, cambiar fuentes, guardar presentaciones y modificar transiciones entre diapositivas moviendo las diapositivas en las direcciones x, y & z.

Answer 2

Para editar el contenido de las diapositivas en línea hay un primer prototipo hecho con Aloha Editor * disponible en http://lab.evo42.net/editable-impress.js/ - la adición o la organización de las diapositivas no es posible sin embargo ...

*) http://aloha-editor.org

Answer 3

Alternativamente, usted podría utilice Presenteer.js (http://willemmulder.github.com/Presenteer.js/) que simplemente se mueve de un elemento HTML al siguiente y lo centra/lo acerca a la ventana gráfica. No necesitará los elementos de datos, pero puede trabajar simplemente con CSS.

Answer 4

Recientemente publiqué un prototipo de trabajo impress.js editor donde me centré en el posicionamiento WYSIWYG de las diapositivas en la presentación.

Puede seguir el progreso o informar de problemas en github: https://github.com/naugtur/builder4impress

Answer 5

Hay varios editores WYSIWYG para Impress.js, discutido on its GitHub seguimiento de incidencias.

Strut y Impressionist parecen ser los más elogiados. Strut está muy activamente desarrollado (último compromiso: ayer)

No se menciona el http://www.impressi.me/, que parece estar abandonado desde abril de 2012. También es muy básico: solo puede agregar texto y transiciones. No hay imágenes, no puede ingresar un tamaño de fuente personalizado.

Answer 6

Hay otra manera de crear presentaciones impress.js y es completamente gratis, disponible en www.jspres.com.El módulo para crear presentaciones está basado en JavaScript, pero el proyecto contiene el lado del servidor que almacena las presentaciones de los usuarios y pueden acceder a ellas desde cada computadora.

Hay dos presentaciones realizadas con JSpres como ejemplo. El primero es solo promo del proyecto, y el segundo es la presentación que imaginaba el proyecto sobre los olímpicos nacionales de TI en mi país (esta es la razón por la que no está en inglés, pero hay que ver las transiciones: P)

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

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

Así que si alguien quiere ver y probar, pero tienen algunas dificultades que he escrito una guía sencilla que le ayudarán a entender los conceptos básicos y se pueden encontrar aquí: http://blog.jspres.com/2013/03/getting-started/

Entonces pondré algunas pantallas para provocar un poco curiosidad en ti para ver el proyecto. Desearía que te guste