

reveal.js: HTML5 based Slide Presentation Tool - stevewilhelm
https://github.com/hakimel/reveal.js

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

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

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

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

------
thibaut_barrere
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...](https://speakerdeck.com/u/thbar/p/transforming-data-with-ruby-and-
activewarehouse-etl)

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

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

~~~
CJefferson
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?

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

~~~
hakim
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](http://www.youtube.com/watch?v=l3RQZ4mcr1c&feature=plcp)

~~~
bergie
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/>

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

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

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

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

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

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

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

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

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

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

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

