reveal.js: HTML5 based Slide Presentation Tool | Hacker News Reader

reveal.js: HTML5 based Slide Presentation Tool

github.com

110 pointsstevewilhelm32 comments

Ever since watching the Google I/O 2012 presentations where there are live demos in the slides, I've been trying to find a good off-the-shelf toolkit for doing these sorts of presentations. One example that really wow'd me was the Google Application Engine "Endpoints" demo, where they were interacting with the site they had just pushed in the slides.

I wanted something like that where I could take the javascript based backend driven visualizations we've been doing for internal use at CrowdFlower and show those off to the world. I also want something that can work with webgl¹ for some other fun deck-related things.

So I looked at a bunch of HTML presentation toolkits and was pretty irritated. Then I found reveal, and it is by far the best for hacking in. Its dependencies are minimal, its css and js is easy to understand and hack, and its markup structure is very clean. I really appreciate the project.

¹ By the way, don't try and do webgl without some toolkits. The API is messy and the error handling for shaders is incomprehensible. I'm using Three.js or scenejs, depending on requirements.

You wanted Google's solution, which is open sourced[0].. but decided on another?

[0] http://io-2012-slides.googlecode.com/

Yeah I wanted something with a bit more chrome and javascript hooks.

You might want to look at Tao Presentations, http://www.taodyne.com. Very simple to write slides, see http://www.taodyne.com/shop/en/blog/15-multilingual-presenta.... Yet fully 3D capable, see http://www.taodyne.com/shop/en/blog/27-reconstructing-the-te....

Not based on Javascript, it has its own language to make it easier to write slides. But can include web pages with something like:

   url 0, 0, 800, 600. "http://www.google.com"

(draws a 800x600 Webkit browser at the center of the screen)

Link to live demo:

http://lab.hakim.se/reveal-js/

This is one of the tools I (quickly) reviewed (together with showoff and impress.js) before preparing slides for my last presentation [1]; but in the end I went back to KeyNote + Gist (for copy-paste syntax coloring) and one ColourLover palette, because it was faster/more comfortable to use for me, allows PDF export etc.

I'm curious how many coders prefer a non-coding slide tool as well?

[1] https://speakerdeck.com/u/thbar/p/transforming-data-with-rub...

While these HTML5 based slide tools are fun, I find they generally aren't even comparable to Powerpoint from Office 95 in terms of features and usability, which is unfortunate.

While this might be nice for putting presentations on the internet, I consider vital features to include, at a minimum:

* Display presenter notes on a second screen * Cope smoothly with differing screen resolutions * Print out PDFs of presentation

Now, this system does seem to cope with the first of these, if I install node.js, but not the others.

I don't want to sound like a downer, just put into perspective that at the moment I feel that HTML5 presentations have a long way to go to catch Powerpoint / Keynote. Hopefully they will some day.

It has the ability to display presenter notes on a second screen - albeit it needs a little setting up. https://github.com/hakimel/reveal.js#speaker-notes (edit: Seen you had noticed this already. Point still stands, this feature does exist.)

Screen resolutions, I haven't tried but does it not? He talks about it working on mobile safari, so I presume it's OK on an iPad screen at least.

Printing... the logical (to me) way of doing this is to design in PowerPoint then convert to this system. That makes the creation easier, and allows you to print it out or convert to PDF.

No, the screen resolutions is a serious problem.

Design your slides on a big desktop, and half the slide will be invisible on iPad.

This is a problem with projectors, where I have given talks from 640x480 to 1024x768 and beyond. What size do I design my slides at?

Why bother converting a powerpoint presentation? Is this really that much better than putting a PDF on your website?

The library sizes to fit a large variety of screen resolutions, PDF export has been added as well: https://github.com/hakimel/reveal.js#pdf-export

Looks fairly interesting. I wonder how it will behave if you add slides after initialization. If that was supported, I could try to build a http://createjs.org/ based slide editor for this.

Adding slides after initialization isn't a problem. I'm also working on an editor for this: http://www.youtube.com/watch?v=l3RQZ4mcr1c&feature=plcp

All right, then I probably shouldn't bother :-)

However, maybe some of the Create.js components, like Hallo.js would make sense? http://hallojs.org/

Hallo.js looks cool. I like the idea of inline editing. That said, I've already spent a good amount of time fixing integration errors with my current editor so am not sure I want to restart that process with another library right now. Perhaps after release.

Well, if it is going to be open source, I may be able to help with that :-)

This looks great! Is this available somewhere to play with? If it supports vertical align in addition to the features you demoed there, that's all I need for most of my presentations.

It's not online anywhere yet unfortunately. Vertical alignment is on the to-do list – will be added as an opt-in config value.

dude I just want to say I know you, I follow your posts, and as scary as this sounds, I think you are awesome. Well done sir.

I was Director of Animated GIFs at a recent conference, and part of my responsibilities involved harassing presenters for their slides.

I would like to mention that quite possibly the most important audience for your slides is the conference videographer. These people often have a hard time transferring fancy html presentation decks into slides they can easily slice in with your talk video.

With that in mind, I bid thee: use Keynote. It's like $20. Or at the very least, make sure whatever framework you use exports to pdf cleanly.

If I don't own a machine that runs Mac OS, can I run Keynote? I only have Linux machines at home (really).

Keynote's just the state of the art in Powerpoint presentations. Your nearest copy of your favorite OpenOffice clone will more than suffice at the same task.

Now, you are just joking.

I dont have any experience with keynote, but libreoffice (as its called these days!) is a nightmare. Handcoding html/css is, for this audience, easier and less frustrating. Actual powerpoint is somewhat doable, except for the whole having-to-boot to windows. There is a cognitive dissonance that just gets on your nerves.

So, in the general case, for the technically handicapped Powerpoint may be an alternative, but people in the industry are either using Linux or OSX. So, that leaves them with keynote (which im not familiar with) or some webbased solution.

LibreOffice presentations are not usable by anyone. And learning the idiosynchrasies of powerpoint seems like a much bigger assault on our patience, than just coding it up.

I do have to admit, that on an iPad, keynote could be brilliant. Touch makes a lot of sense for something this visual. But i havent tried that version of keynote either,

Keynote's just the state of the art in Powerpoint presentations

You know Microsoft succeeded when Powerpoint has become so generic that Keynote is described as being for "Powerpoint presentations".

Capturing the video display from the presenter seems almost easier than having a videographer manually time static slide changes along to the video afterwards.

This also assumes that people use slide decks that can't be shared afterwards (in their original glory), can't iframe content, or have syntax highlighting within reach? I'm sorry but for developer speakers and audiences, Keynote is a poor choice.

>Capturing the video display from the presenter seems almost easier than having a videographer manually time static slide changes along to the video afterwards.

Yes and no.

For starters, it's more expensive. You need a second camera and, at worst, potentially a second operator to worry over it.

Secondly, it's more error prone. Copying the VGA feed off the video switcher will fail in hilarious ways/also require a second person whose job it is to look over it.

I've thrown two conferences, and been responsible for front of the house AV for a total of three and a half. You're often understaffed or overbudget, and something often gives.

Even in the best of situations you end up wanting the slides as a backup.

>This also assumes that people use slide decks that can't be shared afterwards (in their original glory)

Post your .ppt or .key file!

>can't iframe content

PLEASE do not have your talk depend on conference wifi. It's impossible to guarantee stable internet with hundreds of nerds trying to slurp down hotel internet.

>I'm sorry but for developer speakers and audiences, Keynote is a poor choice.

I disagree. There's absolutely nothing these frameworks give you other than the warm fuzzies over the 3d transitions and that you got to style it using css.

You're displaying words and pictures on a screen, and Keynote is absolutely a killer at that task.

I see a lot of comments on ease of use, so I'm going to toss my hat in the ring: mdpress (https://github.com/egonSchiele/mdpress) makes presentations out of markdown files using impress.js. I wrote it because I needed something dead simple that I wouldn't have to think about. Example:

    # Hello world!
    
    ---

    # Welcome
    This is slide 2.

I found it hard to edit the HTML slides compared to the markdown for showoff, and the font-size is overall really too small (and my attempts to tweak it break a several assumptions in the CSS/transformations). HTML is not a great way to write content. Showoff is much better for browser-based. And it does export to PDF

Agree that HTML isn't ideal for writing content. Support for Markdown was added to reveal.js two days ago and I'm hoping that will make it a bit easier. A GUI editor is also underway for people that don't want to touch any code at all.

there is already a javascript plugin with the same name, doing a different thing though. The other reveal is a modal dialog : http://www.zurb.com/playground/reveal-modal-plugin

Until someone builds a slide editor that's as easy to use as this is pretty to view, it's mostly meaningless to most people.

It appears the author of this is working on an editor: http://youtu.be/l3RQZ4mcr1c

(YouTube link from a another comment in this thread)

Yes, but adding inline markdown support makes it useful to me, at least.

Different strokes for different folks. After having my list styles reset, unindent and unnumber everytime I edit some of my Word documents, and having the cursor disappear in documents (where the fix is, make a new document), I now vastly prefer document creation in Latex. It also makes versioning my documents easier.

Same with Powerpoint. If I could go through and make some divs with some unordered lists and have that render in any browser... YES PLEASE.

Reply on news.ycombinator.com