How to do Browser-Based Presentations

If PowerPoint or Keynote aren't lively enough for your presentations, why not run a live demo from a browser instead? You can drive home that what you're talking about actually exists, you can pull in information from other sources rather than showing a single screenshot or brief excerpt.

A couple of things to keep in mind when you go this route...

In most browsers, it's easy to boost the font size as needed to make the presentation visible. You know how people doing projected presentations always make lame jokes about "reading the eye chart" because they put too much small-font text on their slides? With a browser, you can bump up the font size if this happens. Firefox or Safari: Ctrl-+ for Windows, Cmd-+ for OS X. (Although this is how those keyboard shortcuts are billed, you don't need the Shift key, so it ends up really being Ctrl/Cmd-=.)

I see live demos that bog down because the presenter spends a lot of time getting back to their original page, switching between tabs, looking for the right tab, or waiting for pages to load. Here are some tips for keeping the demo going at a reasonable pace:

1. 
   Whatever is the main page of your demo/presentation, set up as many ways as you can to get back there quickly. Make it your home page, just until the presentation is over. Make it a "quick link" on the browser bookmark bar.
   


2. 
   Browsers that can do tabs typically have a preference that doesn't have much use in day-to-day browsing. Firefox: When I open a link in a new tab, switch to it immediately. Safari: Select tabs and windows as they are created. Turn this setting on during the presentation. Every time you want to show what's behind another link, open the link in a new tab, which will immediately appear. (Windows: Ctrl-click. OS X: Cmd-click.) When finished with that page, close the tab and you'll instantly be back at your start page. (Windows: Ctrl-W. OS X: Cmd-W.)
   


3. 
   When you're 10-20 seconds from the end of your spiel on one page, close it and open the next link. Wrap up that discussion, with the audience focus on your voice rather than the screen image, while the next page loads.
   

When you're whipping up the text of your presentation, the key point is to get it out fast. Presentation software is good for flowing text into templates with headings, paragraphs, and list bullets. To get the same kind of efficiency for text you'll slap on a web page, you can use Markdown, a text-to-HTML converter that lets you write in wiki-like style (start a line with a * to make it a bullet point, and so on).

OS X Tip: Storing Screencaptures in a Different Folder

You may be familiar with the keyboard shortcuts Cmd-Shift-3 and Cmd-Shift-4 to do screen captures in OS X. The "3" shortcut takes a picture of the whole screen. The "4" shortcut lets you drag an area to capture. By default, the screen captures are stored in your Desktop folder. Adding the Ctrl key to the key sequence puts the result on the clipboard.

But what if you want to store the pictures somewhere else?

With the Mac's eye-catching GUI, it's easy to forget there's a real UNIX system under the hood. You can invoke the screen capture feature from the Terminal command line with the screencapture command:

screencapture ~/pic_in_home_directory.jpg # Waits a few seconds, then captures full screen
screencapture -iW /tmp/pic_in_some_other_directory.jpg # -i = use mouse to select; -W = capture full window

There are other options you can use, like -c to send output to the clipboard, or -t to set the output filetype. (I've got my system set to save JPGs by default, so I didn't use -t jpg in the examples above.)

In the UNIX shell, you could use the alias command to run screencapture with a preselected set of options. But that still forces you to specify the full path to the file on the command line, or switch to the directory where you want the file stored.

A more convenient technique is to use shell functions, which let you pass parameters. For example, here I create 2 commands I can use to take screen captures. blogsnap foo puts the output in foo.jpg in a predefined folder. clipsnap sends the output straight to the clipboard. mailsnap sends the output straight into a new mail message.

blogsnap() {
 screencapture -iW ~/documents/Blogs/Screencaps/$1.jpg
}

clipsnap() {
  screencapture -icW
}

mailsnap() {
  screencapture -iWM /tmp/$$.jpg
}

You can paste the commands below straight into a terminal window to define those commands temporarily, or put them into the shell initialization file (depending on the shell, typically .profile, .bashrc, or .kshrc) so that they're available in each new Terminal window.