
Deck.js: A JavaScript library for building modern HTML presentations.  - toni
http://imakewebthings.github.com/deck.js/
======
generalk
This looks beautiful, and I'm definitely in love with the idea of writing
presentations in HTML/JS/CSS rather than in a blob of Keynote or Powerpoint,
but there's one thing keeping me back:

Keynote gives me a second display with a timer, the current and next slides,
and notes. That's _huge._ On the rare occasion that I present I don't script
out everything I'm going to say, and the presenter info keeps me from rambling
too long or forgetting what my next point is.

~~~
joakin
That's a good idea for new functionality. A 'Open script' button that opens a
popup that you can move out the projector into the screen that you only see
that has an overview of slides and the notes.

------
jondot
I really like the aesthetics but as mentioned here it's not portable /
shareable offline. In addition - more than the fact that you need a modern
browser (which is ok, really), you need a modern projector for such a
resolution, and this is nothing you can just download and install.

Nothing is more awkward than displaying such a presentation on a backwards
projector which cuts it off.

I use this regularily, which solves both problems:
<https://github.com/geraldb/slideshow>

I plan to use this from now on, since it has nicer UI:
<https://github.com/juliocesar/shining>

For deck.js to be perfect it

\- needs to understand markdown

\- needs to use precent (%) scaling so it could scale resolutions easily

\- export to an offline format.

All in all it has astonishing UI effects which makes me want to use it.

~~~
masklinn
> \- needs to understand markdown

No it does not.

~~~
eykanal
I definitely believe that it does. Whether you're a programmer or not,
markdown is SIGNIFICANTLY faster to write than actual HTML code, and when the
purpose of using a templating system like this is often to reduce the time
required getting things to look good. By understanding markdown, the time
required to make a presentation _will_ be reduced significantly.

~~~
masklinn
Use your templating system on top of deck, deck itself has _no need
whatsoever_ for markdown.

------
ac
There's only one problem that's holding me back from switching to
HTML/SVG/CSS/JS for my slides: the problem of monitor/projector resolution
scale. Most projectors I've presented on had a low resolution: 640x480 or
800x600. Let's say my monitor has a 1600x900 resolution, so if I develop in
that resolution, my presentation would break (or at least it wouldn't look as
I expect it to). Presentation software and PDF viewers take care of that for
me: what you see on the screen is what you would get on the projector (i.e.
the text and graphics would have the same relative height&width as on the
screen). Is there any reliable way to achieve that in HTML presentations as
well?

~~~
CJefferson
Yes, I also find this the major thing holding me back from HTML presentations.
I wrote a HTML presentation for a conference and didn't realise this was a
problem until I came to present it, and found out there doesn't seem to be any
way to cleanly enlarge / shrink HTML.

EDIT: After a very quick reply to a bug report, I decided to try zoom in/out
in Chrome. For anyone else who hasn't tried this in a very long time, the zoom
in/out actually does a very good job, allowing me to resize slides to the
correct size. Some time after the introduction of CSS2 I found zoom in/out
became useless. Turns out at some point it became useful again.

~~~
ac
That's good and I'll definitely try Chrome. But, wouldn't it be great if the
library/framework just took care of that? In fact, one of the frameworks --
Shining -- referred from the other post has a JavaScript plug-in that seems to
do the resizing for different resolutions (although it's implemented in the
ugliest way possible, IMO).

~~~
troels
I believe both firefox and ie does fine with zoom as well. No need to support
edge cases in a library like thia, imho.

~~~
nitrogen
Scaling a presentation is not an edge case -- as other commenters have
mentioned, working with undesirable screen resolutions is the default for
presenters. It would be better to have the presentation scale automatically to
the window size than to have to press Ctrl+/Ctrl- to try to get it reasonably
close.

------
muxxa
Looks good - just make sure you bring a laptop with a modern browser installed
to the presentation. Compare: <http://pepelsbey.github.com/shower/en.htm>

~~~
masklinn
> Compare: <http://pepelsbey.github.com/shower/en.htm>

Your link is significantly worse than deck.js on "non-modern browser" (Camino
in my case, so ~FF3): shower's slidemap is completely broken and the slides
_do not_ open "full document". deck.js has layout glitches in the navigation
and status displays, and drops the transition effects (and stuff like drop-
shadows) but the slides themselves _work_.

S5 is more spartan, but more reliable than either proposal.

Edit: and as opposed to S5, neither can really be printed even in a browser
able to display them correctly (tested in Safari 5.1):

* S5 has a pared down print CSS, you get only the slide contents (not sure if it's possible to get additional notes), ugly but good.

* deck.js is unprintable, the printed document changes erratically depending on the slide you're on and it never looks like something that could ever be used

* shower is completely broken when a slide is fullscreened (prints a single page displaying the bottom half of the current view), in "overview" mode it does have a nice print css... but one which emphasizes the looks of the slideshow rather than having good/useful prints: there's a truckload of space between slides, an ugly drop shadow around each and every slide (drop shadows _which don't even appear in the overview_ ), apparently no handling of page breaks (so slides are cut off across pages, half on one page and half on the next)

Why would you print them, you ask? Well to give printouts of course, but also
to export to PDF, a very useful feature of MacOSX.

edit: tried Shower in Opera (11.11) since it's by an Opera Software guy, it's
a train-wreck: fullscreen slides don't work and print is terminally broken and
utterly unusable. Latest version is 11.50 so I'll probably try again with that
one, but not really impressed so far.

edit2: tested in 11.50, "fullscreen" slides work correctly, print is still
completely broken and unusable.

------
fredoliveira
I like the idea behind this and other projects like it, but I have one main
issue with it/them:

It isn't trivial to share presentations, which is something that most people
will want to do. Sadly the fact that you can build a presentation in HTML (and
that people can look at it online) doesn't outweigh sharing a PDF. Don't get
me wrong, I'm all for lighter more flexible solutions (which html is), but the
market as a whole generally isn't.

~~~
DEinspanjer
Why can't you just share a simple link?

Note these presentations were made with a different html slide deck utility,
but I think that it should be easy to do the same thing with deck.js.

<http://bit.ly/mozilla-metrics-mango-brownbag> <http://bit.ly/mozilla-metrics-
bbuzz>

------
rglover
Although this doesn't retain a lot of the features we're accustom to with
PowerPoint and Keynote, I think it holds a different purpose. What about using
this on a marketing site for your web app? Build a deck for potential
customers to go through. Offer up backup options like a PDF or PPT for
download. I think deck.js has a lot of potential and cool possibilities.

------
telemachos
This looks very nice. I use slidedown[1] right now (Ruby + jQuery). There,
slides are written as one Markdown file and then slideshow builds that into a
presentation (the Javascript gets included in the file). I could imagine
writing a small script to automate doing a similar thing here. (Not really
necessary, but I like that workflow.)

The only extra I'm missing right away is a simple, built-in way to embed code
blocks with some kind of syntax highlighting. (Slidedown uses Pygments + a
simple custom syntax to specify language.) Probably shouldn't be too hard to
make an extension that does that.

[1] <https://github.com/nakajima/slidedown>

------
krmmalik
I really like this library. I probably wouldnt use it for presentations for
the reasons already cited by others, but i can see it being useful for
interactive help manuals or information packs personally.

Just a thought.

------
nicpottier
What are the docs created in? <http://imakewebthings.github.com/deck.js/docs/>

Beautiful.. would love to do something similar.

~~~
imakewebthings
By hand, not generated. But feel free to steal.

~~~
dmvaldman
The scrolling of the docs is definitely interesting, with URL fragments
changing continuously along with small page effects, but I think the bugs may
outweigh the features...

For instance, clicking anywhere on the scroll wheel causes the fragments to
cycle through. The URL bar goes a bit crazy. Quick scrolling also lags because
of this. The back button causes the same effect. Perhaps there is a way to fix
all this. But even so I find it creates a jarring user experience.

~~~
miles_matthias
I couldn't reproduce these either in the latest Safari.

~~~
dmvaldman
neither could I, but it's there in chrome

------
jonpaul
Has anyone investigated something like this to publish eBooks on the web? It
looks this could make reading an eBook easy on the web. What are your
thoughts?

~~~
janfoeh
<http://treesaverjs.com> might be close to what you're suggesting:

    
    
      "Treesaver® is a JavaScript framework for creating magazine-style 
      layouts using standards-compliant HTML and CSS."

~~~
miles_matthias
Nice link -- that is a pretty sweet framework.

------
jwarzech
I love these new projects for building web based presentations. Back in 2003 I
had to take a speech course and quickly got sick of every presentation where
someone would be abusing PowerPoint with an abundance of typewriter and laser
animations. I started writing all my presentations in HTML/Javascript and
editing together compilation videos to stand out. Looking back it was a great
way to practice the craft.

------
flavy
IMHO, two things that will make it perfect: 1)Support of onMouseWheel
2)Support of mobile gestures BTW, does anybody know of anything supporting
those?

------
otaku_coder
This is pretty awesome! Love the design, the docs in particular. We've been
building something similar at slidereach - <http://slidereach.com> but the
focus is on import from ppt/keynote/pdf rather than a markup-based
presentation. Is this a more preferred route?

------
wingerlang
It looks beutiful and all. But does people actually do presentations like this
for hand? (css and html).

If this could be done with an interface like PPT i would like it. But then it
would be kind of redundant. I like PPT, although most people have no sense of
design.

~~~
ac
> It looks beutiful and all. But does people actually do presentations like
> this for hand? (css and html).

Yep, I've used LaTeX/beamer for quite some time. It's great for some things
(not only math, but really any advanced text formatting and layout and some
simple animations) and awful for others (graphics, mostly). PowerPoint, on the
other hand, allows you more fine-grained control over layout, and is more
graphics/diagram-friendly -- but having to do everything with a mouse is kind
of daunting. I'd rather type everything in, let the system lay it out for me
and then correct what doesn't look good.

------
highriseo
What goals are being accomplished here that are not adressed with other
HTML/JS/CSS presentation frameworks?

I'm thinking specifically of DZSlides (<http://paulrouget.com/dzslides/>)

------
tungwaiyip
This is pioneered by Opera some years ago. They have so many good ideas that
they deserve lot more attention.

<http://en.wikipedia.org/wiki/Opera_Show_Format>

------
michaelw
This isn't the first such library and I doubt it's the last. Until _any_
authoring tool can export to this format these libraries are always going to
be curiosities.

~~~
Argorak
Are they? On Ruby conferences, I see showoff (by schacon, sorry for the
missing link) pretty often. It can be exported as well.

------
anshargal
It's awesome that Deck.js has virtual back/forward keys for iPad. Last time I
saw some html/javascript presentation on tablet there were no way to turn
page.

------
RyanMcGreal
What does this have that S5 [1] hasn't had for a few years now?

[1] <http://meyerweb.com/eric/tools/s5/>

~~~
autarch
It looks like it's a lot more amenable to customization.

I've used S5 for many presentations, and there's a limit to how much you can
customize the look without getting into nasty hacks.

It also doesn't have any sort of theme or plugin architecture. Basically,
deck.js looks like S5 for the modern era.

------
baltcode
How about translating latex slides to this?

------
greggman
I gave up typing control codes back when wordperfect died. I'm not going back.
Wysiwyg for me.

------
est
sometimes I hope prezi.com got an HTML5 version.

------
sidcool
This is wonderful. Thanks.

