Authoring tool discussion

[iangilman]

I love it!

Perhaps out of the scope of this library, but I figured I'd file it here nonetheless: in order for this to be useful for more than a few people, you need some sort of authoring tool for these kinds of presentations, such as what Prezi has, or my own Infinite Canvas tool from several years ago:

http://infinitecanvas.jgate.de/create?name=Brad%27s%20Somber%20Mood

Any plans to do something like that, or are you leaving it to the community?

[bartaz]

impress.js just started as an experiment and my personal tool for creating presentations and I really wasn't expecting all the buzz around it. So at this point it's kind of authors responsibility to build the presentation content and styles in HTML+CSS.

Anyway, it's very true that it's a little bit painful and requires quite a lot of time to create such a presentation now. Regular web development tools such as Web Inspector in Chrome (or Firebug in Firefox) are helpful but it's hard to call it 'editor'. And it is true that more and more people are asking for edit tool.

My answer at this point would be that I understand the need - even myself, as I'm probably the one that is using it the most right now ;) but I don't really have plans (not enough free time) to build such a tool.

[greenido]

+1 to iangilman. I'll try to find some time to do something in this area :) It sounds like a good idea that will let many more people enjoy this cool js lib.

[iangilman]

@greenido awesome! I'd love to see what you come up with, and I may be interested in helping out (if I can find the time).

[creatorrr]

@greenido You can count me in too! Let me know if you are serious and need a hand (with coding, testing, documentation, whatever.)

Cheers! This is me @creatorrr !

[EdwardHinkle]

Hi guys, if you could keep me in the loop with what you are all doing, I will most likely be starting down the path of creating an authoring tool as well. People in my agency have been wanting to start using Prezi this year, but with flash and such we have a lot of restrictions. Impress.js is exactly what they needed, but none of them are coders, so I'll be working on an authoring tool for them.

I'd be happy to collaborate with any of you that are interested.

[edumerco]

Does Inkscape.org could work? It is aldeady being used in Sozi (http://sozi.baierouge.fr/wiki/en:welcome).

Congratulations for Impress, great work. :)

e

[creatorrr]

@EddieHinkle It'd be great! Could you ask others as well? Let's put together a framework and start working.

@bartaz Any ideas? Plans for any API?

I'm in, by the way. :-)

[iangilman]

@edumerco I think ideally the creation tool would itself be a web app, rather than a native app like Inkscape.

Thanks for the link to Sozi, though… great to see so many people exploring zooming presentations!

[edumerco]

Hi.

@edumerco I think ideally the creation tool would itself be a web app, rather than a native app like Inkscape.

That is a great idea for sure, but don't underestimate the weight of offline options...

Thanks for the link to Sozi, though… great to see so many people exploring zooming presentations!

Personally, I do those since years in a very manual way: vector based pdf with manual zooming. :-)

Best regards...

e

[laubsauger]

Hi there,

I just found this neat little experiment yesterday and started to think about something like impress.js.studio on instant. Since this would make this lib useful to people who have little to no javascript/html/css knowledge but still want to build 3D Zoom Presentations.

And since this is already aimed at browsers that implement modern html5 techs, you can provide those offline options with ease while working with a webapp ( http://slides.html5rocks.com/#app-cache )

Just forked and started to work out a concept in my head

[bartaz]

Hey guys. That's great that you have such enthusiasm to build authoring tool.

Just few things to keep in mind.

First of all, impress.js is just a library that takes handles positioning and transitions between the slides. The markup is just HTML (with some predefined structure) and the styles are pure CSS, they are not connected to impress.js in any way. As I see it now, everyone who uses impress.js just copies style.css from demo. It shouldn't happen, CSS should be prepared for a presentation to suit the content. So it will be a great challenge to create authoring tool that will handle creation of HTML content and custom CSS styling.

Second thing. It's a very early release. It doesn't have any number, but it's like 0.1 alpha codename "not finished yet", you know ;) I don't know if it will happen, but there may be some significant changes (for example to HTML structure), and probably some public JavaScript API will be available at some point (to allow triggering transitions to chosen slides). Keep that in mind, please, and watch for the changes in repo. I will probably start giving some version numbers soon, so you will know with which version you are working, etc.

Keep me posted if there is anything you need in terms of understanding how impress.js works or in terms of stuff you'd need in API.

[laubsauger]

Hi Bartaz,

that is exactly what i expected. I will focus on positioning for now since those attributes can't change to much i guess.

For positioning: I'm thinking of some type of grid where you can snap those slides in the 3D space plus a rotation/skewing system similar to most 3d modelling applications - working with arrows that can be dragged on the respective axis.

And yup, version numbers would help :)

[bartaz]

So it seems quite close to my "vision" of edit tool for impress.js, nice :)

You will probably need some API method to move the "camera", right now it only automatically positions itself to show specific presentation step in the center of the screen with correct scale.

[laubsauger]

A camera method would be needed thats true.

But it will also be just awesome. I imagine roaming through the space (and time) continium that embraces your presentation: picking stuff, dropping it somewhere else, one click will get you in edit mode for a respective slide letting you edit contents and stylings inline - prezi will be so 2011 :)

[greenido]

Very cool guys! I'm now traveling for the next 2-3 weeks but after that - I hope to kickstart this project :)

[bartaz]

I'm closing this issue, as it doesn't affect my codebase at this moment.

But feel free to use it as a forum for authoring discussion ;)

[laubsauger]

I've made the first steps towards this. It is more or less a clumsy interface sketch - no real functionality besides crappy html source export. I will mainly wait for one or another api goodie to emerge but feel free to get motivated or inspired :D

http://laubsauger.github.com/studio.html

[creatorrr]

@laubsauger Impressive work! Though, you are right about the API bit. As @bartaz said earlier - this is sort of an alpha release as of now and we should rather wait for an API to come through.

+1 for the great job anyway! :)

[naugtur]

Hi. I just found this thread and it looks like I have a different idea about editing impress.js presentations. IMHO the most important problem is setting x, y, rotate and scale in html and refreshing it all the time. It would be better to do it in a WYSIWYG manner..

I hacked a quick a proof of concept in a fork of mine. See https://github.com/naugtur/impress.js You can take a look over here: http://naugtur.github.com/ (but it's not staying there forever)

[laubsauger]

Yup thats nice. With a little doodad to drag on for rotation, moving etc. this will do it :) I got the GUI sketch ready for that and will implement it asap if i have time on my hands

[bartaz]

Guys,

I created new issue about impress.js API for authoring #88. If you have any suggestions about what may be useful to have there, please join the discussion there.

[bartaz]

Let's keep it open to encourage discussion.

[bartaz]

You may like this: http://hsivaram.com/tech/2012/03/15/preview-impressionist-a-visual-editor-for-impress-js/

[laubsauger]

Oh boy! That is freakin' awesone. The interface looks really promising despite a few hicks here and there. The adobe guy did a bunch of nice work there :D

I'm so glad that i could not free up time to work further on the Editor idea since this would've blasted it

[naugtur]

Ok, this encouraged me to finally fix up and push the first prototype of my idea of WYSIWYG interaction. You can take a look, it's there: https://github.com/naugtur/builder4impress

I recommend trying it on the overview slide (start with pressing the left arrow) ;) It just works, drag the letters M[move] R[rotate] S[scale] It should still be uncomfortable to use, but that's life :)

[bartaz]

I'm too lazy to pull and check ;)

@naugtur Can you host it somewhere? Creating a gh-pages branch should be enough for a static demo.

[naugtur]

Ok, it deployed.

Usage tip: Hover a slide, a control shows, M just drags, dragging R horizontally rotates, dragging S vertically scales.

I dropped it here: http://naugtur.github.com/#/overview

The overview is linked on purpose - moving elements works properly in overview and doesn't scale back on slides, but I already know how to fix that

[bartaz]

@naugtur That's an interesting UI concept. Not very intuitive at the beginning (clickinig on letters and dragging), but quite simple. But it will get a little bit compicated if you add positioning on Z and 3D rotations

[naugtur]

@bartaz Letters will be substituted with controls and correctly hinted. I didn't want to spend time on drawing icons etc. My main concern about the controls (at the moment) is positioning them at the center of the element despite of all transformations, because it's easy to rotate the element in a way that puts them far enough for user to hover other slides while trying to reach the controls.

I've got 3 different ideas how to handle 3D, but complete WYSIWYG authoring in 3D would require control over the "camera". As far as I remember, you didn't feel like implementing that when we first talked about impress ;)

On Fri, Mar 16, 2012 at 12:17 PM, Bartek Szopka reply@reply.github.com wrote:

@naugtur That's an interesting UI concept. Not very intuitive at the beginning (clickinig on letters and dragging), but quite simple. But it will get a little bit compicated if you add positioning on Z and 3D rotations

---

Reply to this email directly or view it on GitHub: https://github.com/bartaz/impress.js/issues/5#issuecomment-4537787

[paulirish]

just FYI..

This is from a japanese developer but is also an authoring tool for impress: http://php5.xoop.jp/impress/index.html

source: https://github.com/yamazakidaisuke/impress.js-design

Right now it's not very polished, but the author is happy to iterate on it if anyone has ideas.

[yamazakidaisuke]

Hi. Yesterday, I uploaded a version of English.

http://php5.xoop.jp/impress/index_en.html

Will be further upgraded.

[harish-io]

@bartaz Thanks for posting the link to impressionist.

Guys, Impressionist is now on github and I am also looking for some help testing this out. Please do take a look and log issues. http://hsivaramx.github.com/Impressionist/

Thanks Harish

[greenido]

Very cool - will check it out over the weekend...

On Fri, Mar 23, 2012 at 5:20 AM, Harish Sivaramakrishnan < reply@reply.github.com

wrote:

@bartaz Thanks for posting the link to impressionist.

Guys, Impressionist is now on github and I am also looking for some help testing this out. Please do take a look and log issues. http://hsivaramx.github.com/Impressionist/

Thanks Harish

---

Reply to this email directly or view it on GitHub: https://github.com/bartaz/impress.js/issues/5#issuecomment-4652944

[tddewey]

Not really a full on

[tddewey]

Crud... Not really a full on editor, but I had some initial thoughts about a WordPress plugin with a GUI for positioning and sorting slides. Able to pull in content from posts, pages, or custom slides. Etc. I'll post to github when I have anything. All of the above ideas are way more impressive tho :)

[jancborchardt]

Wow, Impressionist is really good!

I was going to suggest adapting this editor, which is based on SVG-Edit and currently uses Sozi as backend (impress.js and dizzy.js are on the plan). But Impressionist is already far ahead.

[bartaz]

Another possibility mentioned by @lunemec in #148

I got bored one afternoon so I created a little app that should allow users without HTML/CSS knowledge to use impress.js just by simply creating slides and assigning coordinates to them, check it out

:)

any new ideas are welcome

http://nacek.tk/impress/

[tantaman]

Hey, I recently started working on Strut (an ImpressJS GUI) https://github.com/tantaman/Strut live demo: http://strut.io

Its currently in alpha so there are some kinks. Contributions are welcome.

[bartaz]

@tantaman nice! and surprisingly similar to http://hsivaramx.github.com/Impressionist/ by @hsivaramx ;)

Maybe you guys should join your attempts?

[volca]

I working on Mimpress recently,an impress.js editor for iPad.

http://itunes.apple.com/app/id516198823

[bartaz]

@volca looks nice, too bad it's paid ;)

[volca]

@bartaz You can try it with promo code "JPPYE7HX7F49" :)

[tantaman]

@bartaz yeah, I actually found impressionist a few days ago as well. I asked them about working together last night (no response yet) but their code looks pretty difficult to maintain and extend.

[bartaz]

@tantaman I'm quite surprised you haven't seen it before as both strut and impressionist have very similar UI :)

[tantaman]

@bartaz Went ahead an added a note about Impressionist to Strut's readme.

[naugtur]

I had time to get back to builder4impress at last. Working prototype: http://naugtur.github.com/builder4impress/ [works best in chrome]

@bartaz I have added some functions to the API.

[computersrmyfriends]

Hello, I would like to use one of your tools to create and export presentations. But, unfortunately, I'm having trouble saving and exporting presentations on any of the tools listed above. I'm able to create and preview in strut but unable to export the files to use on my website. Also, I don't see any option to change the vanvas size in any of the tools. I liked the strut tool but its bad that I cant use what I create out of it. Impressionist is unable to even display preview on chrome (Windows). Builder4impress was very good to export the animations but I am unable to change the canvas size. Please provide a tool that is usable by non-programmers. Thanks

[lunemec]

Hi, I've tried it with mine tool .. lnemec.tk/impress .. click on show presentation when you finish it and then save the page in FF or chrome or wherever save page as ... some name and save it as complete web page to some folder

it will create myname.html and folder myname .. and you need both copied somewhere (flash, cd ..) and then you can run the presentation off-line by opening myname.html in FF or chrome, IE will not work I think

Enjoy

[computersrmyfriends]

Thank you lunemec but it's more complicated to use compared to writing the tags based on impress.js documentation. I was looking for a tool to make very large number of presentations using impress.js quickly instead of creating div's one by one manually.

[tantaman]

After you preview your presentation in Strut use your browser's "save page as" feature to save the presentation as a stand alone website. https://github.com/tantaman/Strut/issues/53

Hope that helps! Let me know if you have any trouble or need anything else.

Edit: there is also now a "zip presentation" option which will export the presentation to its HTML, CSS and JS source and give you a zip to download. Currently, zip presentation only works if you are accessing a hosted version of Strut or have "--allow-file-access-from-files" enabled in Chrome.