Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Creating And Distributing Presentations On The Web

Delivering great presentations is an art, and preparing the slides for them very much so, too. But we’re not going to talk about that. We’re also not going to get into the debate about whether to use open or closed technologies to create slide decks — this is something you need to hash out yourself, and there are some interesting discussions going on.

What I will talk about is how I (and you, of course) can use the Web to find content for your talks, record them, share them with others and save them for future audiences. I’ll also explain how to share it all for free and how to convert closed formats into open ones by using the Web.

In 2010 I delivered a boatload of talks that people attended, downloaded, commented on and remixed for their own training sessions and presentations. I love to share my research and information, because when you set them free they can inspire and help others to get their own voices heard. Here’s how I did it.

Free Tools For Recording And Spicing Up Talks Link

Let’s begin with the only paid-for system I use in the whole process: I write my slides in Apple’s iLife application Keynote. I use it because when I do my work I’m usually offline (on trains, in airport lounges, in hotel rooms without free connectivity, etc.).

Keynote is great: I can resize and mask images, embed video, export as PDF, and there are a lot of beautiful, subtle and effective animations and transitions. Creators of slide tools should view Keynote as a model, and 280slides actually did so. Apple should also consider using a standardized format for HTML slides to import; in fact, this is one of the interesting discussions going on.

If I need to use high-quality images, I don’t spend money or time getting licensed content. Instead, I go to the advanced search option on Flickr, find photos with Creative Commons licenses and use these. All I need to do then is publish a link with each photo in my slides. Even I can do that much for copyright law.

Advanced Search in Flickr1
Flickr’s advanced search interface2 lets you specify the license of photos. You’ll probably want “Creative Commons” or “license-free.” Also check out The Commons3 for good old photos that have been donated to Flickr by libraries and museums.

Sharing Slides, Archiving The Originals Link

When I finish working, I give my talk using Keynote and export it as a PDF for sharing on the Web. I share my talk by uploading it to SlideShare4, which entails the following:

  • The talk gets converted to an embeddable Flash movie;
  • The talk becomes an HTML transcript shown on the SlideShare website;
  • The talk is hosted on its server, which means I don’t have to pay for traffic;
  • People can “favorite,” bookmark and comment on my slides.

In addition to hosting my work on SlideShare, I usually also zip the original Keynote file; Keynote doesn’t format presentations as individual files, but rather as a folder of resources. I upload them to Amazon S35, where I pay a few pennies a month to store heaps of data. This is my back-up archive should anything terrible happen to SlideShare or my computer.

Asking For Feedback, Offering Code Examples Link

Another interesting service for speakers is SpeakerRate6, where people can — wouldn’t you guess? — rate speakers and their talks. SpeakerRate also has an API that allows you to pull out the ratings in case you want to show them off on your portfolio.

I normally host code examples from my presentations on GitHub7. There, they are accessible, and I can update and edit the code without having to create my own ZIP files for people to download. It’s incredibly useful for making quick changes in response to what people have requested in comments and for reacting to questions you received during the talk.

Hosting your code on GitHub automatically begins the process of versioning. People can embed and alter your original examples, and the code is displayed with color-coding, making it readable.

Setting up an account on GitHub and getting your code in there is pretty straightforward — just follow the simple tutorial8.

Recording Talks Link

I normally record my talks so that I can listen to them in the gym and other places where I can’t write. There’s a free tool for this that works across all platforms. It’s called Audacity9. Just hit the record button and it will create the audio file where you specify.

Editing in Audacity is as easy as cropping the things you don’t want:

Editing audio in Audacity10
Large view11

You can save the audio in MP3 or OGG (among other formats). I usually save them as MP3s and then add them to iTunes for tagging so that I can add cover art and other extras to prep them for the iPod.

Syncing Audio And Slides Link

With SlideShare, you can also create a “Slidecast” of your talks, which means syncing the audio and the slides. It’s a cool feature, but I don’t like the editor as it is; the handles used to define the start and end times of slides don’t allow them to be close together — and that can throw off the syncing. It’s also a time-consuming process. I’m working on some alternatives, and correspondence with SlideShare indicates that it is, too. Regardless, I’ve found that Slidecasts get a lot of visitors, so it can be worth it.

Recording Video Link

There was seldom a camera to record me wherever I spoke last year, and an amazing amount of recorded talks never see the light of day. If no camera is available to record your talk, then you can record the screen as you present.

One of Keynote’s lesser-known features is that you can record a video of your slides with a voiceover. Simply go to Play → Record Slideshow before giving your talk:

Recording a Slide Show in Keynote12
Large view13

When you’re finished, export the video to QuickTime by going to File → Export:

Exporting a Recording to Quicktime14
Large view15

If you don’t use Keynote or if you jump in and out of your presentation, then record the presentation on your computer screen. There are a few pieces of software to choose from for that.

VLC16 is a video player that’s free and compatible with all operating systems. It can also record the screen; go to File → Open Capture Device → Screen. You can record a high-quality video of everything that goes on. There’s even a feature that records a part of the screen by following the cursor.

Setting the Video Encoding17
Large view18

Simply check the “Streaming/Saving” checkbox, click “Advanced,” and define a suitable location and settings for your video:

VLC Stream Settings19
Large view20

Screencasts are generally a great idea. Instead of performing live demos in my presentations, I record screencasts and embed them in Keynote. That way, I don’t need an Internet connection — they’re usually unreliable at conferences — and I can talk over the recording while on stage, rather than having to click, enter information and talk at the same time.

To screencast with a program other than VLC, I usually use the commercial app iShowU21. When I was still using Windows, I had Camtasia22. Both of these sit on your screen and let you record and pause easily:

iShowU in Action23
Large view24

Nowadays, I also use hosted services.

Screenr25 is absolutely fabulous for this purpose. Just start the applet on the page, grant it access to your machine, and start recording. You have five minutes, with audio. When you’re finished, the movie is automatically converted, and you can export the video to YouTube. The video conversion happens more or less in real time. All you need to sign into Screenr is a Twitter account. With Screenr you can also tweet an embeddable version of the video. If you need similar service for longer videos, check out Screencast-o-matic26.

Converting Video Link

The free tool I use is MPEG Streamclip27, and it’s available for Mac and Windows. Drag your video onto it, and select the format you need:

MPEGStreamClip in action28
Large view29

There are a lot of presets — iPod, iPad and so on:

Presets for MPEGStreamclip30
Large view31

Automatic Conversion And Hosting For Audio And Video Link

As you know, embedding videos on websites with HTML5 can be a pain, particularly when it comes to encoding them. Different browsers require different codecs.

There is, however, a simple way: Archive.org32 hosts all kinds of useful content. (The WayBackMachine, which keeps snapshots of how websites looked at a certain time, is probably the best known.) And you can host content there if you license it with Creative Commons. The good news? automatically converts your content to HTML5-friendly formats!

Check out the recording of my talk on HTML5 for gaming33. I recorded it with Audacity and saved and uploaded it as an MP3. The Ogg version was created by To embed it on a Web page, I just need to do this (line breaks added for readability):

<audio controls>
  <source src="
  <source src="

The same goes for video: free, fast hosting without limits, and automatic conversion. What more could you want?

Converting SlideShare To HTML Link

SlideShare creates embeddable Flash versions of my Keynote files (saved as PDF). I want to go with open technology and convert them back to HTML and images. You can do this with the mobile version of SlideShare.

If you call up a SlideShare presentation on a mobile device, you’ll get an HTML version with JavaScript and images. You can simulate this by sending the user agent of, for example, an iPad to the page before displaying it. In PHP, this takes a few lines of code:

$url = '
$url = preg_replace('/.net//','.net/mobile/',$url);
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0(iPad; U; CPU iPhone OS 3_2
like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) 
Version/4.0.4 Mobile/7B314 Safari/531.21.10");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
$page = curl_exec($ch); 
echo $page;

SlideShare’s Mobile Interface34
Large view35

I’ve scraped and converted the results, and now I can embed the SlideShare presentation as HTML and images using the converter tool:

Converting SlideShare embeds to html online36
Large view37

I still want to fix a few things, such as making the images preload intelligently and adding proper alternative text. SlideShare creates transcripts of your slides on the page, but if there are slides without images, then the two go out of sync. I’ve emailed the company about it, and a fix might be released soon.

Summary Link

When it comes to publishing presentations online, a lot can be automated by using the Web as a platform and taking advantage of conversion services. Many developers are working on Web-based presentation tools, and I am quite sure we’ll see a collaborative presentation platform come into existence this year, although the task might not be as easy as it sounds. I have listed the hidden requirements of presentation systems38 before, and some things still need to be fixed. Keep your eyes open and help the cause.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Chris is a Developer Evangelist living in London, England, who writes about Javascript development, accessibility, and all things open web. After several years evangelizing at Mozilla Foundation, he's now working at Microsoft's EdgeDev team.

  1. 1

    Hi Christian,

    Thanks for sharing and summarizing the great resources for sharing presentations on the web. Love screenr since it works on both Mac & PC. I didn’t realize VLC could record the screen.

    Not sure if you’ve seen it already, but I just found out about SpeakerDeck this past week. It’s by invite only: and looks to be another excellent option.

  2. 2

    And of course, events manage to overtake us – looks like yesterday’s update to Keynote makes it easier to publish presentations as HTML based slideshows, including transitions when using Safari (and presumably other browsers as CSS transitions are implemented).

  3. 3

    Christian! thanks for sharing such a informative article.

  4. 4

    Now this is the kind of tutorial I like to see on SM. Kind of obscure (in a good way). But loads of great tips. Thanks!

  5. 5

    Great content!

  6. 6

    don’t like the new navigation :'( it looks too much like that of a site built in the early 2000s

  7. 7

    Super useful !

  8. 8

    this was very useful for me.thanks

  9. 9

    Great information, I too did not know VLC did screen recording!, well done, thanks.

  10. 10


    does anyone know how to show online a presentation with sound synchronised to each slide ?

    It is a kind of slidecast but when pressing Next, the next slide would come up with sound and stop. I don’t want the presentation to continue ifself, I want the user to control himself the ongoing view of the presentation.

    I made it with PowerPoint (and probably other alternative tools would also do it) but I don’t know what to use to get such a presentation online, as it is.


  11. 11

    Fabulous post, Chris. Thanks for a bunch of great ideas!

  12. 12

    John Mindiola III

    January 9, 2011 11:18 pm

    @openflips I’m not exactly sure about your audio-slide-syncing question, but I know you can create buttons in PowerPoint for simple navigation like Next, Previous, etc. Also, for sharing your PowerPoint online, try docs [dot] com.

  13. 13

    A major point when recording the vocals is not to set the record level to high as with most but not all presentations the voice plays back with way to much distortion.
    Audacity also converts audio to .ogg vorbis format plus any other audio file type needed for the demanding audiophile and as you say it’s free.

  14. 14

    Thanks Christian for the great article. I sometimes see screencasts with a webcam/video thumbnail and wonder how that’s done. I’m on Ubuntu which limits my options even more! I look forward to web-based tools getting more and more powerful.

    I didn’t see the author and I recognised your photo in the “converting video” section, I remember you well from Hack Days and such! Keep up the good work :)

  15. 15

    Overall a good article, if not a little weak in places. Very little evidence exists to suggest that its worth the time and effort in producing video based versions of a presentation (i.e. PowerPoint or Keynote) without any added value (e.g. screencasts, live presentations, talking heads, etc…). I’ve working in the field of e-learning for the last five years on online undergraduate and postgraduate degree programmes, and students have consistently avoided video based presentations, in favour of:

    – printable PDFs with speaker notes,
    – MP3 podcasts and
    – Flash (Silverlight) based version presentations

    If your looking for a professional finish (particularly if your a company) I would recommend a program called Articulate Presenter, as it removes all the post audio editing, slide-audio sync issues, etc…

  16. 16

    Great post, thanks a lot for sharing.

  17. 17

    Philip Belcher

    January 13, 2011 7:36 am

    Highlight of the article is the use of screenshots from the classic game Mayhem in Monsterland! Nice one!

  18. 18

    to add to Dan’s comments I have found Adobe Presenter is a very good tool converting PowerPoint to web friendly video/audio presentations, though with our recent upgrade ‘Presenter’ has been moved out of the Acrobat Pro Extended package no doubt into something more expensive.

    The article was very interesting with some good useful links.

  19. 19

    Thanks Christian. With your lovely article, I am all set to step into the area of presenting well to clients and friends.
    That VLC can record, was a real sweet surprise.
    Thanks to SM too- keep the honey coming!

  20. 20

    Hello, thank you for a very good article. Just wanted to let you in on the search tool:
    which is kind of a Google for slides and basically makes whatever presentation you publish on your website searchable on a slide level. For example a slideshare search yields:

    Thats a good way of sharing right?


↑ Back to top