There are numerous reasons why I love creating my slides as a simple HTML page, for example, I don’t want to collect emails of people that ask me to send them those, or I’m not worried that the format of my slides will not be recognized or the presentation will look terrible on someone else’s machine. The other reason is that I simply hate all presentation software, including Apple Keynote, LibreOffice Presenter or the one from Microsoft. I’m a programmer and given that I do prefer a simple and efficient approach. I hate touching the mouse, and fighting with alignment of my images or the size of fonts. I think, personally, that slides should be simple and should not be the core of a presentation; the story should be told by the presenter and not by his slides.
There are many good HTML frameworks for making slides, such as deck.js, slippy, impress.js all heavily based on the HTML5, CSS3 and JavaScript. To be honest, I haven’t tried them all, but somehow I ended up using reveal.js. For me, this framework is very simple, follows the HTML5 new semantics, does not require any initial setup and the result looks awesome. To make your presentation in reveal.js, you don’t need to be HTML5 or JavaScript wizard. If you know at least basic HTML, you should be fine. You can start with a index.html file they have in their Github repository.
For now, you can fast-forward to the <body;> section of that file and remove everything inside <div class=“slide”>. Each slide is represented as an HTML5 <section> element, where you put the slide content. See the examples in the original index.html for how to make your slides awesome. There are many examples from basic text to complex code highlighting. The good thing about reveal.js is it will make your slides look awesome on whatever resolution or screen. They even look awesome on mobile browsers.
Now, this blog post is not about teaching you reveal.js, but it is more about how you can publish your final presentation in OpenShift. If you sign up you get 3 free applications, which is enough for storing 3 different presentations slides. Also you can use one application to store multiple reveal.js presentations as they are just simple HTML pages.
So to start, just clone the reveal.js Github repository which includes all require libraries and assets:
git clone https://github.com/hakimel/reveal.js
Now, if you follow the Full setup instructions, you install NodeJS and Grunt, which you can use to start your presentation locally. We don’t want to run Grunt or NodeJS in OpenShift to serve our static presentation. For that, reveal.js comes with a simple Grunt task:
grunt zip
This will produce an archive with just enough JavaScript and CSS files and, of course, with your index.html file. To make it online, you need to create a new application in OpenShift:
rhc app create mypreso php-5.3
I used a PHP application, because that one is very small and the git push
command is super fast as it does not need to pull any dependencies or compile
assets. You can use whatever application type you want as we will just serve
static HTML files. Next step is unzipping your presentation into the
OpenShift application folder and make it available
online:
unzip reveal-js-presentation.zip -d ./mypreso/php/
rm -f ./mypreso/php/index.php
cd mypreso && git add -A && git commit -m "My preso" && git push
When the last command has finished, you should have your presentation available at http://mypreso-YOURDOMAIN.rhcloud.com. OpenShift supports custom domains so you can easily set up your own domain name for place where you store presentations, for example, preso.mfojtik.im.