7 ms·
Deck.js: A JavaScript library for building modern HTML presentations.
- muxxa 15y agoLooks good - just make sure you bring a laptop with a modern browser installed to the presentation. Compare: http://pepelsbey.github.com/shower/en.htm http://pepelsbey.github.com/shower/en.htm
- masklinn 15y ago> Compare: http://pepelsbey.github.com/shower/en.htm 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.
- deleted 15y ago[deleted]
- nopassrecover 15y agoNot sure why this is relevant (also I thought new users were meant to be green?). In any case, if you read the author's github page, touch support is in the works.
- generalk 15y agoThis 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 15y agoThat'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.
- johanl 15y agoDZSlides by Paul Rouget has that feature: http://paulrouget.com/dzslides/ http://paulrouget.com/dzslides/
- seppo0010 15y agoI'm working on it: http://github.com/seppo0010/deck.remote.js http://github.com/seppo0010/deck.remote.js
- fredoliveira 15y agoI 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.
- csomar 15y agoI 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.
- trusko 15y agoI think there are some advantages compared to sharing PDF presentation - embedded video at least.
- DEinspanjer 15y agoWhy 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-mango-brownbag http://bit.ly/mozilla-metrics-bbuzz http://bit.ly/mozilla-metrics-bbuzz
- jondot 15y agoI 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 https://github.com/geraldb/slideshow I plan to use this from now on, since it has nicer UI: https://github.com/juliocesar/shining 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 15y ago> - needs to understand markdown No it does not.
- eykanal 15y agoI 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 15y agoUse your templating system on top of deck, deck itself has no need whatsoever for markdown.
- LeafStorm 15y agoAlternatively, 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.
- 15y ago
- nicpottier 15y agoWhat are the docs created in? http://imakewebthings.github.com/deck.js/docs/ http://imakewebthings.github.com/deck.js/docs/ Beautiful.. would love to do something similar.
- imakewebthings 15y agoBy hand, not generated. But feel free to steal.
- nicpottier 15y agoThanks, 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.
- dmvaldman 15y agoThe 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.
- DasIch 15y agoI can't reproduce any of these bugs using Firefox.
- miles_matthias 15y agoI couldn't reproduce these either in the latest Safari.
- dmvaldman 15y agoneither could I, but it's there in chrome
- jwarzech 15y agoI 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.
- ac 15y agoThere'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 15y agoYes, 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 15y agoThat'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 15y agoI believe both firefox and ie does fine with zoom as well. No need to support edge cases in a library like thia, imho.
- 15y ago
- michaelw 15y agoThis 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 15y agoAre they? On Ruby conferences, I see showoff (by schacon, sorry for the missing link) pretty often. It can be exported as well.
- telemachos 15y agoThis 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 https://github.com/nakajima/slidedown
- wingerlang 15y agoIt 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.
- autarch 15y agoI 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.
- ac 15y ago> 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.
- RyanMcGreal 15y agoWhat does this have that S5 [1] hasn't had for a few years now? [1] http://meyerweb.com/eric/tools/s5/ http://meyerweb.com/eric/tools/s5/
- autarch 15y agoIt 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.
- rglover 15y agoAlthough 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.
- krmmalik 15y agoI 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.
- sidcool 15y agoThis is wonderful. Thanks.
- flavy 15y agoIMHO, two things that will make it perfect: 1)Support of onMouseWheel 2)Support of mobile gestures BTW, does anybody know of anything supporting those?
- anshargal 15y agoIt'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.
- highriseo 15y agoWhat 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/ http://paulrouget.com/dzslides/)
- jonpaul 15y agoHas 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?
- biturd 15y agoI have been pretty impressed with https://read.amazon.com/ https://read.amazon.com/ so far.
- janfoeh 15y agohttp://treesaverjs.com 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 15y agoNice link -- that is a pretty sweet framework.
- minikomi 15y agoSomething like http://bccks.jp http://bccks.jp perhaps?
- baltcode 15y agoHow about translating latex slides to this?
- tungwaiyip 15y agoThis 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
- greggman 15y agoI gave up typing control codes back when wordperfect died. I'm not going back. Wysiwyg for me.
- deleted 15y ago[deleted]
- est 15y agosometimes I hope prezi.com got an HTML5 version.
- otaku_coder 15y agoThis is pretty awesome! Love the design, the docs in particular. We've been building something similar at slidereach - http://slidereach.com 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?