Reveal.js(lab.hakim.se)
lab.hakim.se
Reveal.js
http://lab.hakim.se/reveal-js/#/
31 comments
Yay .stretch! I was resizing & using negative top margin to fit big elems onscreen- it really didn't work very well :p
http://sequoia.github.io/composer-talk/#/5/2
Just used it in my presentation for uni! via slid.es However, the computer I used only had IE. So no cool animations, but I was happy with the fallback result (scrolling)!
I've been using reveal.js for all my presentations for a while now. It's great, keep up the good work! :)
Reveal.js is great.
Up until recently, I was putting slides together using Google Docs (ugh!), and thought there had to be a different way so I started looking around. Reveal.js looked the best to me, but I wanted two things:
1) It running on a server reading new slideshows automatically, and
2) To write the slides in pure markdown (like how some others use `---` for slide separation).
I ended up hacking together a quick Erlang-based slideshow server called Sliderl[1] that lists all slideshows (showing a quick preview of the first slide), and has a simple text-search. And of course, all the slideshows are rendered with Reveal.js.
1) Make sure Erlang is installed
2) clone the repo
3) put your slideshows in its "slideshow/" directory (slideshows must end with .markdown)
4) make
5) make run
6) Open browser to http://127.0.0.1:8000
I suppose it's simple if you have Erlang installed already, but if you don't have Erlang installed, you probably don't want to install it just to show some slides. A running example with some of my slide decks is at http://slides.sigma-star.com/
[1] https://github.com/choptastic/sliderl
Up until recently, I was putting slides together using Google Docs (ugh!), and thought there had to be a different way so I started looking around. Reveal.js looked the best to me, but I wanted two things:
1) It running on a server reading new slideshows automatically, and
2) To write the slides in pure markdown (like how some others use `---` for slide separation).
I ended up hacking together a quick Erlang-based slideshow server called Sliderl[1] that lists all slideshows (showing a quick preview of the first slide), and has a simple text-search. And of course, all the slideshows are rendered with Reveal.js.
1) Make sure Erlang is installed
2) clone the repo
3) put your slideshows in its "slideshow/" directory (slideshows must end with .markdown)
4) make
5) make run
6) Open browser to http://127.0.0.1:8000
I suppose it's simple if you have Erlang installed already, but if you don't have Erlang installed, you probably don't want to install it just to show some slides. A running example with some of my slide decks is at http://slides.sigma-star.com/
[1] https://github.com/choptastic/sliderl
Nice.
It looks like the "pure markdown" part is built into reveal.js now: https://github.com/hakimel/reveal.js#external-markdown
Might this also address your requirement to read new slideshows (via browser refresh)?
It looks like the "pure markdown" part is built into reveal.js now: https://github.com/hakimel/reveal.js#external-markdown
Might this also address your requirement to read new slideshows (via browser refresh)?
+1 for reveal.js. In a talk I gave recently about a PHP dep management tool, I used reveal.js (+fragments) + `script` command + ansi2html.sh to create colorized, step-by-step terminal demos without running it in the console.
Nice cuz a) no live coding, no risk there b) dep tool requires network access for most operations; bad wifi at conference = "oh no" c) ppl can follow along at home or go over the steps themselves d) not an image so you can select/copy text.
Here's an example: http://sequoia.github.io/composer-talk/#/7/1 (press spacebar to advance). I plan to write a blog post about my strategies for avoiding live coding in presentations... one of these days :p
Nice cuz a) no live coding, no risk there b) dep tool requires network access for most operations; bad wifi at conference = "oh no" c) ppl can follow along at home or go over the steps themselves d) not an image so you can select/copy text.
Here's an example: http://sequoia.github.io/composer-talk/#/7/1 (press spacebar to advance). I plan to write a blog post about my strategies for avoiding live coding in presentations... one of these days :p
The recently-released pandoc 1.12 (http://johnmacfarlane.net/pandoc) supports reveal.js as an output format. I've been using it for some time to give talks, and it works well. The 2-D navigation structure makes it easier to find slides when there are questions.
For a cool example of using Reveal.js, check out my Haskell Lectures http://shuklan.com/haskell/lec01.html
Not sure what's cooler — presentation itself or the topic.
Am I the only one who finds the concept of "vertical slides" a bit, errr, wrong?
A presentation is a linear process. The first time a skipped through someone's slides who had this concept (without being presented to) I missed half of the content.
Is it for "things I might not have time for"? or What am I missing here?
A presentation is a linear process. The first time a skipped through someone's slides who had this concept (without being presented to) I missed half of the content.
Is it for "things I might not have time for"? or What am I missing here?
I recently used reveal for a conference talk, and structured it so that most of the slides are vertical. My talk had 5 horizontal slides: hello, topic 1, topic 2, topic 3, and then goodbye. I started off by saying "hi, i'm gonna talk about these three things:" and then scrolling right, then going back left and saying "Okay, topic 1" and then down.
Someone who didn't see the talk but looked at the slides found it VERY confusing.
Someone who didn't see the talk but looked at the slides found it VERY confusing.
Agree vertical is a bit suck. It's because it's much more complex to navigate - you're twice as likely to get lost as your brain works hard to remember it's position in a 2D space, much harder than a 1D "line" I think.
The need for drill-down is valid, but I some means of entering/exiting a new context would require less brain power. Like tabbed browsing. Or push/pop from a stack.
We're trying to crack these problems with some presenation tools we're prototyping. Fun fun...
The need for drill-down is valid, but I some means of entering/exiting a new context would require less brain power. Like tabbed browsing. Or push/pop from a stack.
We're trying to crack these problems with some presenation tools we're prototyping. Fun fun...
I use them as "chapters". When there are question, I can navigate through chapters and the audience gets a repeat of the main points.
Use "space" for advancing.
Use "space" for advancing.
“Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.”
Alt+mouse is bound to "move window" by default in GNOME (and perhaps others), and your event handlers will never get fired. (Personally, I love this keybinding: IMHO, it's a every quick and efficient way to move windows, since it increases the "catchable" area to the entire window, not just the title bar.)
Also, did anyone else notice that progress bar at the bottom?
Alt+mouse is bound to "move window" by default in GNOME (and perhaps others), and your event handlers will never get fired. (Personally, I love this keybinding: IMHO, it's a every quick and efficient way to move windows, since it increases the "catchable" area to the entire window, not just the title bar.)
Also, did anyone else notice that progress bar at the bottom?
Another framework for making presentation that I love is Impress.js : http://bartaz.github.io/impress.js
It's a bit different and more technical than Reveal.js but it allow you to create fully customizable and unique presentation.
It's a bit different and more technical than Reveal.js but it allow you to create fully customizable and unique presentation.
Being on the low end of computing power, every time I see a reveal.js based presentation I cringe. I'm not embracing the trend for fancy transition in presentation, content first I guess. Maybe there are ways to gracefully degrade slides to avoid lagging ?
I wrote a cool little node application for reveal.js that lets you control the slideshow with your phone over websockets.
Reveal.js is great! :D
https://github.com/wridgers/slide
Reveal.js is great! :D
https://github.com/wridgers/slide
I still prefer Keynote to JS presentation tools since playing with layout is easier manually than with css (for me).
But one killer feature Keynote lacks is slide inheritance. I love using build-outs and I wish I could edit a parent slide and have the changes propagate to its children. This feature would be much easier to build out with a JS presentation framework.
But one killer feature Keynote lacks is slide inheritance. I love using build-outs and I wish I could edit a parent slide and have the changes propagate to its children. This feature would be much easier to build out with a JS presentation framework.
Sounds like Slide Masters in PowerPoint. Have you given it a try lately?
I loved signing up to slid.es - for some reason it's just never that smooth, but my brain was completely on autopilot and before I knew it, I could start building slides.
As for the app itself, I'll have to play around a bit more, but initial impressions are that it's very responsive and something I wish was available years ago.
As for the app itself, I'll have to play around a bit more, but initial impressions are that it's very responsive and something I wish was available years ago.
For quick and dirty presentations, I created http://glebbahmutov.com/slides-now/ - just drag and drop .md file. Supports themes, timers, etc. Even does very nice jobs with code blocks, because I need to show code a lot.
I've been using slid.es for a few things recently. It's really well-made, gives you a workable GUI with the option to edit HTML directly, gives you free cloud storage for your presentations, and is a nice change of pace and extra bit of glitter compared to Powerpoint. A job very well done.
Protip: In addition to standard fullscreen, Chrome also has a "Presentation mode" that makes all the browser UI autohide at the top and makes the content full screen. Useful if you don't want the browser UI cluttering up your presentation.
To people that want more classic style presentations which are exportable to PDF slides there's shower.
https://github.com/shower/shower
Used it for several presentations and I'm pretty satisfied.
https://github.com/shower/shower
Used it for several presentations and I'm pretty satisfied.
I ended up presenting my PhD with this and a mix of d3.js and inkscape-generated svg. You can do a lot with this, especially if you tune down the transitions, colors, and fonts a bit.
I suggest that you make the alt-click shortcut something else. Many Linux users have alt-click/drag mapped to moving/resizng their windows.
More of the same: http://pineapple.io/tags/presentations
It was great and it looks like it's just steady as she goes. Good job.
Everything Hakim makes is gold.
Been around for a good while, but still awesome.
You should check out all his labs on http://hakim.se/
Be ware that most of the stuff there is just PoC and you may have some issues trying to adapt them, but the showcases are awesome :)
You should check out all his labs on http://hakim.se/
Be ware that most of the stuff there is just PoC and you may have some issues trying to adapt them, but the showcases are awesome :)
Is there anything new about this?
Don't think it has been on HN since around the 1.2.0 release, so a lot has changed: https://github.com/hakimel/reveal.js/releases
Previous Discussion: https://news.ycombinator.com/item?id=4323172 (107 points, 420 days ago, 32 comments)
Not really. But it's awesome. I'm ok with being reminded of awesome things.
I had not seen this before. This is pretty neat.
I am using impress.js for all my presentations: http://bartaz.github.io/impress.js/
I use it here and there as well. I combined it with meteor to give a presentation without having to screen share. https://github.com/phillc/meteor-impress
Example: http://phillc-cd.meteor.com/
Open in multiple tabs and click the following button in the top left and move around.
Example: http://phillc-cd.meteor.com/
Open in multiple tabs and click the following button in the top left and move around.
The way this has been recently tied into `ipython notebook'[1] is surprisingly nice.
[1]http://www.youtube.com/watch?v=rBS6hmiK-H8
[1]http://www.youtube.com/watch?v=rBS6hmiK-H8
There is also a presentation hosting service, based on this at http://Slid.es
I looked at Reveal recently (the Google Chrome DevTools guys use it for all their demos) for a presentation but ended up using Bespoke.JS instead (which oddly enough the Mozilla folks have been using recently):
The following presentation gives a good overview of the differences between Bespoke and Reveal: http://markdalgleish.com/presentations/bespoke.js/
(keep pressing forward...it gets more interesting as you progress)
I liked the plugins, the docs were simple, they include grunt so your style changes are applied live, and they linked to other people presentations so you could peak at what others were doing.
In particular, I was 100% willing to switch right back to Keynote the moment any JS based presentation tool made me work on the tool more than the content. That never happened, and I ended up finishing the slides in Bespoke.
The following presentation gives a good overview of the differences between Bespoke and Reveal: http://markdalgleish.com/presentations/bespoke.js/
(keep pressing forward...it gets more interesting as you progress)
I liked the plugins, the docs were simple, they include grunt so your style changes are applied live, and they linked to other people presentations so you could peak at what others were doing.
In particular, I was 100% willing to switch right back to Keynote the moment any JS based presentation tool made me work on the tool more than the content. That never happened, and I ended up finishing the slides in Bespoke.
I'm confused- you stuck with Bespoke, right? It looks cool, but what recommends it over reveal.js? Did you try reveal or just look at it? I'm a reveal.js user but I'm not married to it.
comments from last year https://news.ycombinator.com/item?id=3383673
I've just "hacked" Reveal.js on my own prez to support some code injection and enter/leave support :-)
http://greweb.me/webaudioapi-introduction/
http://greweb.me/webaudioapi-introduction/
shameless plug: reveal.js works great with onsnap.js (http://miniqr.com/onsnap.r) how-to: allow microphone, start snapping
If you like whipping up quick, simple slideshows without any effort - I've been hacking away at Cleaver [0] for the past few weeks. You write a single markdown document and it parses into a single HTML document. I built it primarily for quick presentations at my Open Source club.
[0]: http://jdan.github.io/cleaver/
[0]: http://jdan.github.io/cleaver/
I'm also working on making reveal.js available to folks who don't know HTML. Give it a go at http://slid.es/