Deck.js: A JavaScript library for building modern HTML presentations.(imakewebthings.github.com)
imakewebthings.github.com
Deck.js: A JavaScript library for building modern HTML presentations.
http://imakewebthings.github.com/deck.js/
25 comments
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.
DZSlides by Paul Rouget has that feature: http://paulrouget.com/dzslides/
I'm working on it: http://github.com/seppo0010/deck.remote.js
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.
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.
> - needs to understand markdown
No it does not.
No it does not.
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.
Use your templating system on top of deck, deck itself has no need whatsoever for markdown.
Alternatively, you could write a presentation compiler that translates Markdown to the appropriate deck.js HTML. You could even make it support different presentation frameworks, maybe even LaTeX/beamer.
There are already options that support Markdown. Here is an example of one:
https://github.com/adamzap/landslide
Markdown isn't expressive enough for presentations so you end up having to use HTML anyway.
https://github.com/adamzap/landslide
Markdown isn't expressive enough for presentations so you end up having to use HTML anyway.
Please file a bug on this - so that we can upvote.
Markdown support should be trivial, using Showdown.js
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?
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.
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.
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).
I believe both firefox and ie does fine with zoom as well. No need to support edge cases in a library like thia, imho.
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.
My understanding is that, for a while, browser zoom would only scale em values and (of course) percentages. Pixel values stayed fixed regardless of the zoom. Recently, browsers began scaling pixel values as well and most modern browsers can now zoom quite nicely. [citation needed]
I've been looking to switch from PowerPoint (OO Impress in fact) and LaTeX beamer to something else for some time, because none of them did everything I needed:
* I like LaTeX/beamer for the declarative style. If I need a two-column layout on my slide, I just type it in and it works. If I need to reveal parts of the slide step-by-step, I just type in \pause and it works. Also, I rarely need to adjust the font sizes etc.: the defaults are just sensible, if not outright beautiful. And, also, custom themes and goodies like the progress indicators are great (see the Singapore theme).
* I like Impress for the fact that I have a fine grained control over a layout, should I need a something that goes beyond a columns/rows layout. Also, I can import and resize graphics without pain (in LaTeX it takes time). Also, I have more choice of animations, but adding them is very time consuming. Finally, I don't need to rebuild the slides after the tiniest change as with LaTeX.
The HTML/SVG/CSS/JS seemed to have a potential to offer the best of both worlds, but the scaling problem (as described above) was throwing me back. In the process I've written down a list of features for my dream presentation tool:
* beautiful typography
* flexible layout: I should be able to specify the layout declaratively (e.g. two columns and a header, or a header, block of text and a table) with the tool figuring out the rest (font sizes, margins, etc) or fine-tune it manually where I can specify the font sizes and positions of every element
* themes and widgets (progress indicators, timers, slide numbers etc)
* should be easy to embed pictures and diagrams with scriptable animations (SVG+JS seems to be ideal for it, and I've used Inkscape for a while). The animations should be: rotation, translation, resizing, showing/hiding, change of color and zooming (the latter one being the only thing that I'm missing in both LaTeX and PowerPoint/Impress).
* being able to edit the presentation on the fly. I don't want to rebuild the slides every time I fix a typo.
* I like LaTeX/beamer for the declarative style. If I need a two-column layout on my slide, I just type it in and it works. If I need to reveal parts of the slide step-by-step, I just type in \pause and it works. Also, I rarely need to adjust the font sizes etc.: the defaults are just sensible, if not outright beautiful. And, also, custom themes and goodies like the progress indicators are great (see the Singapore theme).
* I like Impress for the fact that I have a fine grained control over a layout, should I need a something that goes beyond a columns/rows layout. Also, I can import and resize graphics without pain (in LaTeX it takes time). Also, I have more choice of animations, but adding them is very time consuming. Finally, I don't need to rebuild the slides after the tiniest change as with LaTeX.
The HTML/SVG/CSS/JS seemed to have a potential to offer the best of both worlds, but the scaling problem (as described above) was throwing me back. In the process I've written down a list of features for my dream presentation tool:
* beautiful typography
* flexible layout: I should be able to specify the layout declaratively (e.g. two columns and a header, or a header, block of text and a table) with the tool figuring out the rest (font sizes, margins, etc) or fine-tune it manually where I can specify the font sizes and positions of every element
* themes and widgets (progress indicators, timers, slide numbers etc)
* should be easy to embed pictures and diagrams with scriptable animations (SVG+JS seems to be ideal for it, and I've used Inkscape for a while). The animations should be: rotation, translation, resizing, showing/hiding, change of color and zooming (the latter one being the only thing that I'm missing in both LaTeX and PowerPoint/Impress).
* being able to edit the presentation on the fly. I don't want to rebuild the slides every time I fix a typo.
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
> 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.
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.
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.
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.
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
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
I think there are some advantages compared to sharing PDF presentation - embedded video at least.
I fucking hate PDF on the browser. It's very slow to download, take up huge resources, hard/not lenient in re-sizing and is the worst choice for presentations.
This is a lot better choice, but each scenario has different needs. PDF is good for books, and long documents.
This is a lot better choice, but each scenario has different needs. PDF is good for books, and long documents.
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.
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
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
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.
Just a thought.
What are the docs created in?
http://imakewebthings.github.com/deck.js/docs/
Beautiful.. would love to do something similar.
Beautiful.. would love to do something similar.
By hand, not generated. But feel free to steal.
Thanks, will take a look.
And didn't want to imply the rest of it is any less awesome. Really dig it.
I personally see myself using it purely on the web, as a way of getting across an idea or perhaps even a tutorial of some kind.
Big thumbs up.
And didn't want to imply the rest of it is any less awesome. Really dig it.
I personally see myself using it purely on the web, as a way of getting across an idea or perhaps even a tutorial of some kind.
Big thumbs up.
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.
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.
I couldn't reproduce these either in the latest Safari.
neither could I, but it's there in chrome
I can't reproduce any of these bugs using Firefox.
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?
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."Nice link -- that is a pretty sweet framework.
I have been pretty impressed with https://read.amazon.com/ so far.
Something like http://bccks.jp perhaps?
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.
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?
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?
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.
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.
> 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.
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.
I do all of my presentations with HTML. For the past few years, I've mostly been using Eric Meyer's S5, though I've used some other things as well.
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/)
I'm thinking specifically of DZSlides (http://paulrouget.com/dzslides/)
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
http://en.wikipedia.org/wiki/Opera_Show_Format
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.
Are they? On Ruby conferences, I see showoff (by schacon, sorry for the missing link) pretty often. It can be exported as well.
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.
What does this have that S5 [1] hasn't had for a few years now?
[1] http://meyerweb.com/eric/tools/s5/
[1] http://meyerweb.com/eric/tools/s5/
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.
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.
How about translating latex slides to this?
I gave up typing control codes back when wordperfect died. I'm not going back. Wysiwyg for me.
sometimes I hope prezi.com got an HTML5 version.
[deleted]
This is wonderful. Thanks.
[deleted](1)
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.