javascript flash html5 wysiwyg prezi

javascript - Prezi HTML5 Editor a través de impress.js



flash wysiwyg (6)

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

Hace poco impress.js que impress.js se creó como una versión HTML5 de Prezi. Esto nos ayuda a alejarnos de la tecnología patentada de Flash y, en su lugar, a utilizar un estándar web abierto que se convertirá en 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 para la diapositiva). Se vuelve difícil visualizar la presentación, especialmente cuando el código se extiende a una longitud 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>

Un ejemplo de JS Fiddle .

Entonces, ¿hay un editor WYSIWYG HTML5 Prezi que pueda usar? Me gustaría uno, ya que facilitará mucho la creación de presentaciones basadas en HTML5, CSS3 y JavaScript.

Hay otra forma de crear presentaciones de 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 cualquier computadora.

Hay dos presentaciones hechas con JSpres para un ejemplo. La primera es solo la promoción del proyecto, y la segunda es la presentación que imaginó el proyecto sobre las olimpiadas de TI nacionales 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

Entonces, si alguien quiere verlo y probarlo, pero tengo algunos problemas, escribí una guía simple que te ayudará a entender los conceptos básicos y se puede encontrar aquí: http://blog.jspres.com/2013/03/getting-started/

Así que pondré algunas pantallas para provocar un poco de curiosidad en ti al ver el proyecto. Deseo que te guste.

Hay varios editores WYSIWYG para Impress.js, discutidos en su rastreador de problemas de GitHub .

https://github.com/tantaman/Strut e Impressionist parecen ser los más elogiados. El puntal está muy desarrollado (último compromiso: ayer)

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

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

Repositorio de Github: https://github.com/tantaman/Strut

y aquí hay un video de 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.