Skip to content

Slid.es for lightweight presentations

May 20, 2013
slides-sample

My meeting presentation

For a long time, PowerPoint was the unchallenged ruler of the presentation software roost. Things seem to be changing, though. Many Mac users prefer Apple’s Keynote software and the online tool Prezi is very popular among educators. All of those tools rely on proprietary formats that restrict the kinds of situations where presentations can be used – online, offline, laptop, mobile, etc. This article introduces you to a new tool that is a little trickier to use but very versatile.

ProfHacker recently wrote about creating presentations in HTML documents with special tags. These “markdown” systems are based on HTML, Javascript, and CSS — so they work on pretty much any device. By messing with CSS files you can change the fonts, colors and such, while the Javascript files provide transitions and other goodies. There’s no software to download. View the final presentation in any current browser or embed it in a web page [just not a WordPress.com blog…].

The new WYSIWYG editor Slid.es (formerly rvl.io) can help you do all of this without the hassles of coding. I used it last month to create a presentation for a meeting and everything went fine. I built the slides on the screen, linked images to my Flickr space, and arranged the deck to my liking. Then I embedded the slide deck on a web page and presented it from my iPad.

deck overview

Deck overview

Viewing notes:  to move forward, backward, up or down while watching a presentation click the on-screen arrows, swipe your tablet, or use keyboard arrow keys. Pressing ESC gives you an overview of the deck and lets you click the slide you’d like to see next.

Using a deck offline

It’s very easy to view your decks online. If you WANT to use a deck offline you’ll have to go through some extra steps:

  1. Slid.es is based on a Javascript presentation framework called reveal.js. Download a copy of the framework and unzip it. You can change the folder name to match your deck.
  2. In Slid.es, open the deck you want to use, choose the “Export” option, and copy the code
  3. Open the index.html file in your favorite editor and replace the “slides” code block with what you just copied (the snippet below shows you where it goes)
  4. Edit the theme to match the “Style” you selected in Slide.es (see the stylesheets in the css/theme folder). Oddly, the “Quicksand” theme I chose uses a CSS file called “sky”:
    <link rel=”stylesheet” href=”css/theme/sky.css” id=”theme”>
  5. If you have images then download them and put them in a folder called “img”. Change the image links in the index file to something like “img/imageFileName.jpg”

The “Slides” section goes in this spot in the middle of the index.html document:

<body>
<div class="reveal">
<!-- Paste your code here -->
<!-- The following lines should appear after your code -->
</div>
<script type="text/javascript" src="lib/js/head.min.js"></script>
<script type="text/javascript" src="js/reveal.min.js"></script>

The folder should now contain everything you need to present a show – with or without an Internet connection. You can also upload the folder to a website. The size of my final folder, not counting images, was a whopping 520K. To get even smaller, eliminate the plugins and lib/font folders from the original framework. I have not (yet) found a way to save the folder on my iPad and play the presentation offline.

It’s not as tricky as it may sound. Honest! I’m no coding whiz and I was able to pull it off.

Read more

3 Comments leave one →
  1. February 24, 2014 1:22 am

    awesome article, I host whole folder in Google Drive(Google drive can host static webapp now). Once page has loaded. i can play presentation offline via Chrome browser in my iPhone. Thanks for sharing.

Trackbacks

  1. Top new posts of 2013 | NspireD2: Learning Technology in Higher Ed.
  2. Slid.es for lightweight presentations | Technol...

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s