Making HTML5 Presentations in the Cloud with Markdown: Slid.es

by Ted Curran

Since coming to the realization that we should all be writing for the web and not for paper, I’ve been trying to figure out a new way of working in Markdown that totally circumvents desktop authoring programs like Microsoft Office altogether and lets you produce web-native content. This helps me get out of thinking of my content as either a “document” or a “presentation”, because my work usually ends up as both eventually anyway.

Instead, the first step in my writing process for all kinds of work is to create an outline in Markdown and then fill in my thoughts around an organized “skeleton” of an idea. Once my work is in Markdown, I can easily convert those documents into PDFs, websites, Word docs, emails, blog posts, or even PowerPoint-style presentations. I use Mou Markdown editor on Mac and HarooPad on Windows to write in Markdown, then use the exporting capabilities of those apps to produce great looking HTML code for posting my work online.

A new tool I discovered, Slid.es, a simple HTML5 presentations app where you can paste your lovely HTML code onto your slides and it will translate that into nicely formatted slides with titles and bullets.

For example, Slid.es takes this:

<h1>html5 presentations</h1> <p>or</p> <h2>"Who needs PowerPoint?!?"</h2>

and turns it in to this:

HTML Presentations or "Who Needs PowerPoint?"

Lookin’ good for just a little code, eh?

The tool has gorgeous themes, animations, and even adds a vertical dimension to traditionally linear presentations. However, the way you work on slides is in a regular WYSIWYG editor (the kind you see in blogs, learning management systems, and webmail apps.) These WYSIWYG editors are great because they can easily be peeled back to the raw HTML, enabling students to develop the chops to improve their work without worrying about breaking anything. They can choose to work visually or in code, and can learn to flip back and forth between the two workflows to see how HTML code is translated to visual design.

Slid.es is not the only HTML5 presentation app out there, but it is the most user-friendly for mainstream users. Highly technical GitHub dwellers have long used HTML5 presentations like Impress,js, Reveal.js, and Google’s HTML5 Rocks Presentations to impress fellow hackers with lean, well designed code and hand-tooled design. These tools are great for ~~advanced~~ intermediate coders but intimidating to newbies who just want to get their thoughts out. Slid.es takes the best from these excellent open source presentation projects and boils them down for average users.

UPDATE: I just published a video tutorial for working with Reveal.js presentations and Markdown, so if you’re ready to take the plunge, click here!

Slid.es stores your presentations in the cloud so they can be accessed from anywhere with an internet connection. Your presentations can even be viewed natively on any smartphone or tablet due to their HTML5 goodness. Rather than having compatibility issues and “I left my flash drive at home” problems, this tool can help you keep your work with you at all times.

How Does it Fit in Education?

Studies show that most computer education in schools is limited to creating Microsoft Office documents, while HTML training is considered “Computer Science” training and is seldom offered. By the time students reach high school, they are well-versed in the process of creating PowerPoints but ignorant of even the basics of HTML. Markdown is a great bridge between these two worlds because it lets you see how the gears of HTML work under the surface. It gives students an understanding of the way to format a document into headers, paragraphs, links, and images– the stuff of the web. It does this in a human-friendly format that is less scary than the HTML code itself. If students can grasp the basics of Markdown (which they can learn in a week) then they are developing basic skills in HTML that can be built upon continuously throughout their career.

Finally, Markdown is entirely based on plain text, so it does not require expensive software bundles like Microsoft Office to be licensed on every machine. For cash-strapped schools, using Markdown with web-based WYSIWYG editors can teach them a 21st Century way of working that doesn’t leave them dependent on expensive software bundles.