Parade Presentation Software

Parade is a Sinatra web app that reads serves up markdown files in a presentation format. Parade can serve a directory or be configured to run with a simple configuration file.

Comparison Vs PowerPoint / Keynote

Parade is easily out-done by professional presentation software packages as far as out-of-the-box style and design. However, there are benefits that Parade has over presentational software:

The Good

Markdown backed data

This ultimately makes it easier to manage diffs when making changes, using the content in other documents, and quickly re-using portions of a presentation.
Syntax Highlighting

Using GitHub flavored markdown, code fences will automatically be syntax highlighted making it incredibly easy to integrate code samples
Code Execution

Slides are able to provide execution and show results for JavaScript, and Coffeescript live within the browser. Allowing for live demonstrations of code.
Web

The system is simply a website which allows for a lot of possibilities

The Ugly

Lack of style

Most presentation packages are going to provide for you better templates
Speed of Layout and Animation

Unless you're skills are great with CSS/Animations, you are likely going to have a harder time creating presentations with as much polish.
Resizing

Currently the presentation system can change gradual sizes, but is not very capable of growing well to the full resolution of current presentation resolution.

Installation and Usage

$ gem install parade

Starting the Slide Show

$ parade

By default running parade with start a presentation from the current working directory. It will find all markdown files, **/*.md, within the directory and create a presentation out of them.

By default parade will split slides along lines that start with a single #

Slide Show Commands

You can manage the presentation with the following keys:

space or cursor right

Advance to the next slide or advance the next incremental bullet point or show the end result of the code execution.

shift-space or cursor left

Move to the previous slide

z or ?

Toggle help

f

Toggle footer (which shows slide count of total slides, percentage)

d

Toggle DEBUG information

c or t

Toggle the display of the Table of Contents

p

Toggle pre-show

Serving a specific directory

$ parade [directory]

This will start a presentation from the specified directory. Again, finding all markdown files contained within the directories or sub-directories.

Serving specific files

To include certain files, specify an order, duplicate slides, you will need to define a parade file. Within that file, you may define specific files, specific folders, and the order of the presentation.

title "My Presentation"
slides "intro.md"
section "directory_name"

slides and section are exactly the same, however you may choose to use one over the other depending of you are mentioning a specific file of slides or a directory which could contain another parade or be considered a section.

You can so define sub sections with a title and slides or additional sections.


title "My Presentation"

section "Introduction" do
  slides "intro.md"
end

section "Code Samples" do
  slides "ruby"
  slides "javascript"
  section "coffeescript"
end

Slide Format

Slide Separators

Separator: #

Slides are simply markdown format. As stated previously, slides will be separated along the #elements within your document.

Separator: !SLIDE

Relying on the # as a separator is not always ideal. So you may alternatively use the !SLIDE separator. This also provides you with the ability to define additional metadata with your slides and presentation.

!SLIDE

# My Presentation

!SLIDE bullets incremental transition=fade

# Bullet Points

* first point
* second point
* third point

Using this separator will immediately override #, so you will have to insert !SLIDE separators in all places you would like cut your slides.

Notes

You can define special notes that are shown in presenter mode.

Presenter mode has been removed until it can be rebuilt

Add a line that starts with .notes:

## Important Slide

* First Thing
* Second Things

.notes The reason that the second thing came about is because things changed.

In this example, the HTML output will contain a <p class='notes'> Toggle presenter notes with the n key while in the presentation.

Presenter mode has been removed until it can be rebuilt

Metadata

HTML IDs

!SLIDE #slide-id-1

In this example the id of the slide div would be set to #slide-id-1

You can define an ID that will be added to the slide's div. This id will be set to any value prefaced with the # character.

Transitions

!SLIDE transition=fade

In this example, the slide will fade when it is viewed. This will set data-transition='fade' on the slides's div.

You can define transitions from the available body of transitions.

The transitions are provided by jQuery Cycle plugin. See http://www.malsup.com/jquery/cycle/browser.html to view the effects and http://www.malsup.com/jquery/cycle/adv2.html for how to add custom effects.

Available Transitions

none (this is the default)
blindX, blindY, blindZ
cover
curtainX, curtainY
fade
fadeZoom
growX, growY
scrollUp, scrollDown, scrollLeft, scrollRight
scrollHorz, scrollVert
shuffle
slideX, slideY
toss
turnUp, turnDown, turnLeft, turnRight
uncover
wipe
zoom

CSS Classes

!SLIDE bullets incremental my-custom-css-class

In this example, this will add custom css classes to the slide's div will display the following classes: class='content bullets incremental my-custom-css-class'. Note: the content class is added by the default slide template.

All remaining single terms are added as css classes to the slide's div.

Defined Classes

Parade defines a number of special CSS classes:

center

centers images on a slide

full-page

allows an image to take up the whole slide

bullets

sizes and separates bullets properly (fits up to 5, generally)

columns

creates columns for every ## markdown element in your slides (up to 4)

smbullets

sizes and separates more bullets (smaller, closer together)

subsection

creates a different background for titles

command

monospaces h1 title slides

commandline

for pasted commandline sections (needs leading '$' for commands, then output on subsequent lines)

code

monospaces everything on the slide

incremental

can be used with 'bullets' and 'commandline' styles, will incrementally update elements on arrow key rather than switch slides

small

make all slide text 80%

smaller

make all slide text 70%

execute

on Javascript and Coffeescript highlighted code slides, you can click on the code to execute it and display the results on the slide

Presentation Customization

Themes

Parade comes with a set of themes which can be enabled in your parade file:


title "My Presentation"

theme "hack"

section "Introduction" do
  slides "intro.md"
end

Available Themes

archetect
hack
merlot
slate

Loading Custom CSS and JavaScript

By default Parade will load most CSS and JavaScript it finds within the the directory which parade was launched, the current working directory.

You may however also specify a single resource folder or multiple resource folders which parade will load instead of the current working directory.


title "My Presentation"

theme "hack"
resources "scripts"
resources "stylesheets"

section "Introduction" do
  slides "intro.md"
end

The following will look for a folder named scripts and a folder named stylesheets relative to the current working directory and load all the CSS and JavaScript files found within those directories.

Custom JavaScript

To insert custom JavaScript into your presentation you can either place it into a file (with extension .js) into the root directory of your presentation or you can embed a script element directly into your slides. This JavaScript will be executed—as usually—as soon as it is loaded.

If you want to trigger some JavaScript as soon as a certain page is shown or when you switch to the next or previous slide, you can bind a callback to a custom event:

Appearance

parade:willAppear

triggered before the slide is presented

parade:didAppear

triggered after the slide is presented

parade:show

Disappearance

triggered after the slide is presented

parade:willDisappear

triggered before the slide disappears

parade:didDisappear

triggered after the slide disppeared

parade:next

triggered when an attempt to move to the next slide or incremental bullet point

parade:prev

triggered when an attempt to move back a slide or incremental bullet point

These events are triggered on the "div.content" child of the slide, so you must add a custom and unique class to your SLIDE to identify it:

!SLIDE custom_and_unique_class
# 1st Example h1
<script>
// bind to custom event
$(".custom_and_unique_class").live("parade:show", function (event) {
  // animate the h1
  var h1 = $(event.target).find("h1");
  h1.delay(500)
    .slideUp(300, function () { $(this).css({textDecoration: "line-through"}); })
    .slideDown(300);

    return false;
});
</script>

This will bind an event handler for parade:show to your slide. The h1-element will be animated, as soon as this event is triggered on that slide.

If you bind an event handler to the custom events parade:next or parade:prev, you can prevent the default action (that is switching to the appropriate slide) by returning false:

!SLIDE prevent_default
# 2nd Example h1
<script>
$(".prevent_default").live("parade:next", function (event) {
  var h1 = $(event.target).find("h1");
  if (h1.css("text-decoration") === "none") {
    h1.css({textDecoration: "line-through"})
    return false;
  }
});
</script>

This will bind an event handler for parade:next to your slide. When you press the right arrow key the first time, the h1-element will be decorated. When you press the right arrow key another time, you will switch to the next slide.

The same applies to the parade:prev event, of course.

Custom Stylesheets

To insert custom Stylesheets into your presentation you can either place it into a file (with extension .css) into the root directory of your presentation or you can embed a link element directly into your slides. This stylesheet will be applied as soon as it is loaded.

The content generated by the slide is wrapped with a div with the class .+content+ like this.

<div class="content">
<h1>jQuery &amp; Sinatra</h1>
<h2>A Classy Combination</h2>
</div>

This makes the .content tag a perfect place to add additional styling if that is your preference. An example of adding some styling is here.

.content {
  color: black;
  font-family: helvetica, arial;
}
h1, h2 {
  color: rgb(79, 180, 226);
  font-family: Georgia;
}
.content::after {
  position: absolute;
  right: 120px;
  bottom: 120px;
  content: url(jay_small.png);
}

Note that the example above uses CSS3 styling with ::after and the content -attribute to add an image to the slides.

Command Line Interface

parade command_name [command-specific options] [--] arguments...

Use the command help to get a summary of commands
Use the command help command_name to get a help for command_name
Use -- to stop command line argument processing; useful if your arguments have dashes in them

parade help [command]

Shows list of commands or help for one command

parade generate presentation

Create new parade presentation

This command helps start a new parade presentation by setting up the proper directory structure for you. It takes the directory name you would like parade to create for you.

Options

dir:"directory_name" - the name of the directory you want to generate the presentation (defaults to presentation)

title:"Presentation Title" - the title of the presentation

description:"Presentation Description" - a description of the presentation

parade generate outline

Create new parade outline file

Within the existing directory create a parade file that contains some sample sections and slide references to get you started with creating your customized presentation.

Options

title:"Presentation Title" - the title of the presentation

description:"Presentation Description" - a description of the presentation

outline:"custom outline filename" - if you want to specify a custom outline filename (i.e. override the default parade filename).

parade generate rackup

Create new rackup file

Within the existing directory create a config.ru file that contains the default code necessary to serve this code on Heroku and other destinations.

parade server

Serves the parade presentation in the current directory

Options

These options are specified after the command.

-f, --file=arg Presentation file (default: parade)

-h, --host=arg Host or IP to serve on (default localhost)

-p, --port=arg The port to serve one (default: 9090)

Aliases

parade s

parade serve

parade static html [path/to/parade/file]

Generates a static html representation of the presentation.

Options

These options are specified after the command.

-o, --output=file Presentation output file

parade static pdf [path/to/parade/file]

Generates a pdf representation of the presentation.

Options

These options are specified after the command.

-o, --output=file Presentation output file

Future Plans

I really want this to evolve into a dynamic presentation software server, that gives the audience a lot of interaction into the presentation - helping them decide dynamically what the content of the presentation is, ask questions without interrupting the presenter, etc. I want the audience to be able to download a dynamically generated PDF of either the actual talk that was given, or all the available slides, plus supplementary material. And I want the presenter (me) to be able to push each presentation to Heroku or GitHub pages for archiving super easily.

Presenter Tools

simple highlighting (highlight region of slide / click to highlight)
timer (time left, percent done, percent time done)
editing slides
preview
let you write on the slide with your mouse, madden-style via canvas

Presentation Layout

theme support
squeeze-to-fit style
simple animations (image from A to B)
show a timer - elapsed / remaining
perform simple animations of images moving between keyframes
automatically resize text to fit screen [see Alex's shrink.js]

Output Formats

pdf with notes
webpage
let audience members download slides, code samples or other supplementary material

Clean up

More modularity with presentation filters and renderers to allow presenters to create custom ones for the particular slide show
Modular approach to features
Clean up Javascript

Interaction

questions / comments system
audience vote-based presentation builder, results live view
show audience questions / comments (twitter or direct)
let audience members go back / catch up as you talk
let audience members vote on sections (?)

Platforms

show synchronized, hidden notes on another browser (like an iphone)
broadcast itself on Bonjour

Parade Presentation Software

Comparison Vs PowerPoint / Keynote

The Good

The Ugly

Installation and Usage

Starting the Slide Show

Slide Show Commands

space or cursor right

shift-space or cursor left

z or ?

f

d

c or t

p

Serving a specific directory

Serving specific files

Slide Format

Slide Separators

Separator: #

Separator: !SLIDE

Notes

Metadata

HTML IDs

Transitions

Available Transitions

CSS Classes

Defined Classes

center

full-page

bullets

columns

smbullets

subsection

command

commandline

code

incremental

small

smaller

execute

Presentation Customization

Themes

Available Themes

Loading Custom CSS and JavaScript

Custom JavaScript

Appearance

Disappearance

Navigation

Custom Stylesheets

Command Line Interface

parade help [command]

parade generate presentation

Options

parade generate outline

Options

parade generate rackup

parade server

Options

Aliases

parade static html [path/to/parade/file]

Options

parade static pdf [path/to/parade/file]

Options

Future Plans

Presenter Tools

Presentation Layout

Output Formats

Clean up

Interaction

Platforms