README.md in parade-0.10.1 vs README.md in parade-0.10.2
- old
+ new
@@ -1,16 +1,14 @@
-# Parade Presentation Software
-Parade is an open source presentation software that consists of a Sinatra web
-app that 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 a slide presentation deck built with developers in mind.
-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:
+You compose parade presentations in markdown files and these files are presented
+as a small web-application. This allows you to quickly build technical
+presentations within minutes within your text editor instead of the tedious
+drag'n'drop and arrange you find in most presentation packages.
### Highlights
* Markdown backed data
@@ -29,24 +27,30 @@
and Coffeescript live within the browser. This allows for live
demonstrations of code.
* Web
- >Slide presentations are basically websites -- they run in your browser from your desktop. This allows for a wide range of possibilities for customization and expandability.
+ > Slide presentations are basically websites -- they run in your browser
+ from your desktop. This allows for a wide range of possibilities for
+ customization and expandability.
* Basic Templating and Color Schemes
- > Several templates and color scheme options have been provided to help you get started. While Parade does not currently provide anything near the variety of many other presentation packages, it is well-suited for basic presentations.
+ > Several templates and color scheme options have been provided to help you
+ get started. While Parade does not currently provide anything near the
+ variety of many other presentation packages, it is well-suited for basic
+ presentations.
+### Lowlights
+
* Design Flexibility (pros and cons)
> Unless you're skilled in CSS/Animations, you will likely have a harder
- time creating presentations with as much polish as other programs provide. However, this approach also makes Parade incredibly flexible if you do understand CSS/Animations.
+ time creating presentations with as much polish as other programs provide.
+ However, this approach also makes Parade incredibly flexible if you do
+ understand CSS/Animations.
-
-### Works In Progress
-
* Resizing
> Currently, the presentation system can change gradual sizes, but does not
have true full screen mode.
@@ -80,10 +84,17 @@
>
> ### *shift-space* or *cursor left* or *cursor up*
>
> Move to the previous slide
>
+>
+> ### *\`* (backtick)
+>
+> Launches a visor terminal within your presentation that allows you to go to
+> a specific slide by number, name or partial match of the slide title:
+> `goto 12`, `goto start`, `goto end`, `goto javascript`.
+>
> ### *h* or *?*
>
> Toggle help
>
> ### *f*
@@ -152,19 +163,18 @@
the `#`elements within your document.
### Separator: !SLIDE
Relying on the `#` as a separator is not always ideal. Alternatively, you can
-use the `!SLIDE` separator. This also provides you with the ability to define
-additional metadata with your slides and presentation.
+use the `!SLIDE` separator.
```markdown
!SLIDE
# My Presentation
-!SLIDE bullets incremental transition=fade
+!SLIDE
# Bullet Points
* first point
* second point
@@ -174,14 +184,13 @@
> 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.
+You can define special notes to your markdown which will not be displayed in
+the final presentation to the user.
-> Presenter mode has been removed until it can be rebuilt
-
Add a line that starts with .notes:
```markdown
## Important Slide
@@ -189,76 +198,89 @@
* 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
+# Presentation Customization
-### Metadata
+There are many ways you are able to customize your presentation.
-#### HTML IDs
+## Themes
-```markdown
-!SLIDE #slide-id-1
+Parade comes with a set of themes which can be enabled in your **parade** file:
+
+```ruby
+
+title "My Presentation"
+
+theme "hack"
+
+section "Introduction" do
+ slides "intro.md"
+end
+
```
-> In this example the id of the slide div would be set to `#slide-id-1`
+### Available Themes
-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.
+* archetect
+* hack
+* hayfield
+* merlot
+* minimal
+* slate
-#### Transitions
+## Slide Layout
+
+Parade supports various slide formats. These can be specified alongside the
+slide separators. By adding a slide format, it adds a special CSS class to the
+slide that is rendered. You may also specify custom CSS classes and an Id.
+
+### HTML IDs
+
```markdown
-!SLIDE transition=fade
+!SLIDE #slide-id-1
```
-> In this example, the slide will __fade__ when it is viewed. This will set
- `data-transition='fade'` on the slides's `div`.
+> In this example the id of the slide div would be set to `#slide-id-1`
-You can define transitions from the available body of transitions.
+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.
-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.
+### CSS Classes for Slide Sections
-##### Available Transitions
+Sometimes you want to add CSS classes to an entire section of slides:
-* 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
+```ruby
+section "Iteration 0" do
+ css_classes "title-and-content"
+ slides "iteration-zero-intro.md"
+ slides "iteration-zero-example.md"
+end
-#### CSS Classes
+section "Iteration 1" do
+ css_classes title"
+ slides "iteration-one-intro.md"
+ slides "iteration-one-example.md"
+end
+```
+### CSS Classes for Individual Slides
+
```markdown
!SLIDE bullets incremental my-custom-css-class
```
-> In this example, this will add custom css classes to the slide's `div` will
+> In this example, this will add css classes to the slide's `div` and will
display the following classes:
- `class='content bullets incremental my-custom-css-class'`. _Note:_ the content
- class is added by the default slide template.
+ `class='content bullets incremental my-custom-css-class'`.
-All remaining single terms are added as css classes to the slide's `div`.
+#### Defined Classes
-##### Defined Classes
+Parade defines a number of common slide formats:
-Parade defines a number of special CSS classes:
-
> ### title
> places the content closer to the center of the page
>
> ### center
> centers images on a slide
@@ -297,48 +319,47 @@
> ### execute
> on Javascript and Coffeescript highlighted code slides, you can
> click on the code to execute it and display the results on the slide
>
> ### blank
-> a slide without content is removed unless you specify that the slide is
-> blank.
+> a slide without content is removed from the presentation unless you specify
+> that the slide is blank.
-# Presentation Customization
+#### Loading Custom CSS
-## Themes
+By default Parade will load most CSS it finds within the the
+directory which parade was launched; the current working directory.
-Parade comes with a set of themes which can be enabled in your **parade** file:
+You may however also specify a single resource folder or multiple resource folders
+which parade will load instead of the current working directory.
```ruby
title "My Presentation"
theme "hack"
+resources "stylesheets"
section "Introduction" do
slides "intro.md"
end
```
-### Available Themes
+The following will look for a folder named *stylesheets* relative to the current
+working directory and load all the CSS files found within the directory.
-* archetect
-* hack
-* merlot
-* slate
### Customized Footer
The presentation has the following default footer:
```html
<div id="footer">
<span id="slideInfo"></span>
<span id="debugInfo"></span>
- <span id="notesInfo"></span>
</div>
```
You can override the default footer of the presentation by specifying a file path to a customized footer.
@@ -352,13 +373,92 @@
end
```
This example will load a file named `customer_footer.erb` within your presentation directory.
-## Loading Custom CSS and JavaScript
+### Customized Slide
-By default Parade will load most CSS and JavaScript it finds within the the
+Sometimes adding a class is not strong enough for what you need. So that's why
+it is possible to override the entire slide
+[template](https://github.com/burtlo/parade/blob/master/lib/views/slide.erb).
+
+### Overriding the default slide template for a presentation or section
+
+```ruby
+
+# Overrides the default slide template for the entire presentation
+# This file is in the root directory of the presentation
+template "default", "slide.erb"
+
+section "Iteration" do
+ # Overrides the default slide template for this SECTION of the presentation
+ # This file is in the root directory of the presentation
+ template "default", "iteration-slide.erb"
+ slides "outline.md"
+end
+```
+
+#### Setting a custom template for a single slide
+
+```markdown
+!SLIDE
+
+Introduction
+
+!SLIDE template=full_screen
+```
+
+```ruby
+
+section "Introduction" do
+ # Overrides the all slides with the 'full_screen' template value set
+ # This file is in the root directory of the presentation
+ template "full_screen", "full_screen.erb"
+ slides "outline.md"
+end
+```
+
+
+## Slide Transitions
+
+What is a presentation without slide transitions. Parade supports a variety
+for slide transitions that can be specified alongside the side separator.
+
+```markdown
+!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
+
+
+## Loading Custom JavaScript
+
+By default Parade will load most 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.
@@ -366,29 +466,28 @@
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.
+the JavaScript files found within those directories.
-## Custom JavaScript
+### 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.
+be executed 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:
@@ -541,10 +640,14 @@
>
> title:"Presentation Title" - the title of the presentation
>
> description:"Presentation Description" - a description of the presentation
+#### Example
+```parade gen presentation dir:dir_name title:"My preso"
+description:"Descrip"```
+
## parade generate outline
Create new parade outline file
Within the existing directory create a **parade** file that contains some
@@ -605,61 +708,25 @@
>
> 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
+* Elapsed / Remaining Timer
+* Drawing mode over the slides (Madden-style via canvas)
+* Highlighting (highlight region of slide / click to highlight)
## 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]
+* More Themes
+* Key-Frame Animations
+* Better slide resizing
-## 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