English
资源说明：do_refactor :wtf, :to => :omg
= ShowOff Presentation Software
ShowOff is a Sinatra web app that reads simple configuration files for a
presentation. It is sort of like a Keynote web app engine - think S5 +
Slidedown. I am using it to do all my talks in 2010, because I have a deep
hatred in my heart for Keynote and yet it is by far the best in the field.
The idea is that you setup your markdown slide files in section subdirectories
and then startup the showoff server in that directory. It will read in your
showoff.json file for which sections go in which order and then will give
you a URL to present from.
It can:
* show simple text
* show images
* show syntax highlighted code
* bullets with incremental advancing
* re-enact command line interactions
* call up a menu of sections/slides at any time to jump around
* execute javascript or ruby live and display results
* do simple transitions (instant, fade, slide in)
* show a pre-show slideshow while you wait to start
It might will can:
* show a timer - elapsed / remaining
* perform simple animations of images moving between keyframes
* show syncronized, hidden notes on another browser (like an iphone)
* show audience questions / comments (twitter or direct)
* let audience members go back / catch up as you talk
* let audience members vote on sections (?)
* broadcast itself on Bonjour
* let audience members download slides, code samples or other supplementary material
* let you write on the slide with your mouse, madden-style via canvas
Some of the nice things are that you can easily version control it, you
can easily move sections between presentations, and you can rearrange or
remove sections easily.
= Usage
ShowOff is meant to be run in a ShowOff formatted repository - that means that it has a showoff.json file and a number of sections (subdirectories) with markdown files for the slides you're presenting.
$ gem install showoff
$ git clone (showoff-repo)
$ cd (showoff-repo)
$ showoff serve
If you run 'showoff' in the example subdirectory of ShowOff itself, it will
show an example presentation, so you can see what it's like.
= Slide Format
You can break your slides up into sections of however many subdirectories deep
you need. ShowOff will recursively check all the directories mentioned in
your showoff.json file for any markdown files (.md). Each markdown file can
have any number of slides in it, seperating each slide with the '!SLIDE'
keyword and optional slide styles.
For example, if you run 'showoff create my_new_pres' it will create a new
starter presentation for you with one .md file at one/slide.md which will have
the following contents:
!SLIDE
# My Presentation #
!SLIDE bullets incremental transition=fade
# Bullet Points #
* first point
* second point
* third point
That represents two slides, the first contains just a large title, and the
second is faded into view showing the title and three bullets that are then
incrementally shown. In order for ShowOff to see those slides, your
showoff.json file needs to look something like this:
[
{"section":"one"}
]
If you have multiple sections in your talk, you can make this json array
include all the sections you want to show in which order you want to show
them.
Some useful styles for each slide are:
* center - centers images on a slide
* full-page - allows an image to take up the whole slide
* bullets - sizes and seperates bullets properly (fits up to 5, generally)
* smbullets - sizes and seperates 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 js highlighted code slides, you can click on the code to execute it and display the results on the slide
Check out the example directory included to see examples of most of these.
Transitions can be supplied through the use of transition=tname on the !SLIDE
definition, where tname is one of the following supported transitions:
* blindX
* blindY
* blindZ
* cover
* curtainX
* curtainY
* fade
* fadeZoom
* growX
* growY
* none (this is the default)
* scrollUp
* scrollDown
* scrollLeft
* scrollRight
* scrollHorz
* scrollVert
* shuffle
* slideX
* slideY
* toss
* turnUp
* turnDown
* turnLeft
* turnRight
* uncover
* wipe
* zoom
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.
You can manage the presentation with the following keys:
* space, cursor right: next slide
* cursor left: previous slide
* d: debug mode
* c: table of contents (vi)
* f: toggle footer
* z: toggle help
* p: toggle preshow
= Preshow
If you want to show a slideshow while you wait to speak, you can run a preshow. Add a +_preshow+ directory
to your project (I use a symlink, so I don't have to add all the images into Git), put a bunch of images in the +_preshow+ directory and optionally add a +preshow+.+json+ file that provides descriptions for any of the images.
If you then press 'p' at the beginning of your presentation, it will prompt you for a number of minutes until
you start. Then it will count down the time until then, flipping through your pictures to entertain the
audience in the meantime. Press 'p' again to stop, or wait until the timer runs out.
= 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
This will bind an event handler for *showoff: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 *showoff:next* or
*showoff:prev*, you can prevent the default action (that is switching to the
appropriate slide) by calling *event.preventDefault()*:
!SLIDE prevent_default
# 2nd Example h1
This will bind an event handler for *showoff: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 array key another time, you will switch to the next slide.
The same applies to the *showoff:prev* event, of course.
= Custom Stylesheets
To insert custom Stylesheets into your presentation you can either place it into
a file (with extension .css) or 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.
jQuery & Sinatra
A Classy Combination
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.
= Editor integration
The "add slide" feature can allow you to add the necessary boilerplate from your editor. If you are using vim, you can
!showoff add -t code Check This Code
And your buffer will get
!SLIDE
# Check This Code #
@@@ Ruby
code_here()
added where your cursor was. Binding this to a keybinding can allow you to add new slides quickly.
= Command Line Interface
showoff 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
== Commands
[add] Add a new slide at the end in a given dir
[create] Create new showoff presentation
[help] Shows list of commands or help for one command
[heroku] Setup your presentation to serve on Heroku
[github] Setup your presentation to serve on GitHub Pages
[serve] Serves the showoff presentation in the current directory
[static] Generate static version of presentation
=== add [title]
Add a new slide at the end in a given dir
*Aliases*
* new
Outputs or creates a new slide. With -d and -n, a new slide is created in the given dir, numbered to appear as the last slide in that dir (use -u to avoid numbering). Without those, outputs the slide markdown to stdout (useful for shelling out from your editor). You may also specify a source file to use for a code slide
==== Options
These options are specified *after* the command.
[-d, --dir=dir] Slide dir (where to put a new slide file)
[-n, --name=basename] Slide name (name of the new slide file)
[-s, --source=path to file] Include code from the given file as the slide body
[-t, --style, --type=valid showoff style/type] Slide Type/Style ( default: title)
[-u, --nonumber] Dont number the slide, use the given name verbatim
=== create dir_name
Create new showoff presentation
*Aliases*
* init
This command helps start a new showoff presentation by setting up the proper directory structure for you. It takes the directory name you would like showoff to create for you.
==== Options
These options are specified *after* the command.
[-d, --slidedir=arg] sample slide directory name ( default: one)
[-n, --nosamples] Dont create sample slides
=== help [command]
Shows list of commands or help for one command
=== heroku heroku_name
Setup your presentation to serve on Heroku
Creates the Gemfile and config.ru file needed to push a showoff pres to heroku. It will then run heroku create for you to register the new project on heroku and add the remote for you. Then all you need to do is commit the new created files and run git push heroku to deploy.
=== github
Generates a static version of your site and puts it in a gh-pages branch for static serving on GitHub.
==== Options
These options are specified *after* the command.
[-f, --force] force overwrite of existing Gemfile/.gems and config.ru files if they exist
[-g, --dotgems] Use older-style .gems file instead of bundler-style Gemfile
[-p, --password=arg] add password protection to your heroku site
=== serve
Serves the showoff presentation in the current directory
==== Options
These options are specified *after* the command.
[-h, --host=arg] Host or ip to run on ( default: localhost)
[-p, --port=arg] Port on which to run ( default: 9090)
=== static name
Generate static version of presentation
=== ZSH completion
You can complete commands and options in ZSH, by installing a script:
mkdir -p $HOME/.zsh/Completion
cp script/_showoff $HOME/.zsh/Completion
echo 'fpath=(~/.zsh/Completion $fpath)' >> $HOME/.zshrc
= Real World Usage
So far, ShowOff has been used in the following presentations (and many others):
* LinuxConf.au 2010 - Wrangling Git - Scott Chacon
http://github.com/schacon/showoff-wrangling-git
* SF Ruby Meetup - Resque! - Chris Wanstrath
http://github.com/defunkt/sfruby-meetup-resque
* RORO Sydney Talk, Feb 2010 - Beyond Actions - Dave Bolton
http://github.com/lightningdb/roro-syd-beyond-actions
* LRUG's February meeting - Showing Off with Ruby - Joel Chippindale
http://github.com/mocoso/showing-off-with-ruby
* PyCon 2010 - Hg and Git; Can't we all just get along? - Scott Chacon
http://github.com/schacon/pycon-hg-git
* PdxJs Tech Talk - Asynchronous Coding For My Tiny Ruby Brain - Rick Olson
http://github.com/technoweenie/pdxjs-twitter-node
* RORO Perth Talk - Rails 3; A Brief Introduction Darcy Laycock
http://github.com/Sutto/roro-perth-rails-3
* PDXRB Tech Talk - Here's Sinatra - Jesse Cooke
http://github.com/jc00ke/pdxrb_sinatra
* Red Dirt Ruby Conference May 2010 - Plain Old Tokyo Storage - Jeremy Hinegardner
http://github.com/copiousfreetime/plain-old-tokyo-storage-presentation
http://plain-old-tokyo-storage.heroku.com/
* Lambda Lounge and StrangeLoop 2010 - JavaScript Functions : The Good Parts - Idioms for Encapsulation and Inheritance - Scott Bale
http://github.com/scottbale/JavaScript-Function-Idioms
* Open Source Bridge 2010 - Creating a low-cost clustered virtualization environment w/ Ganeti - Lance Albertson
http://github.com/ramereth/presentation-ganeti
* RailsConf 2010 - Domain-driven Test-assisted Production Rails Crisis Interventions - Rick Bradley
http://railsconf2010.rickbradley.com/ http://github.com/rick/presentation_railsconf_2010
* WebWorkersCamp - 25 promising projects in 50 minutes - Bruno Michel
http://github.com/nono/Presentations/tree/master/20100703_25_promising_projects_in_50_minutes/
* 11th Libre Software Meeting 2010 - Ruby 1.9, The future of Ruby? - Bruno Michel
http://github.com/nono/Presentations/tree/master/20100708_RMLL_Ruby_1.9/
If you use it for something, please let me know so I can add it.
= Editor Support
* TextMate Bundle - Showoff.tmdbundle - Dr Nic Williams
http://github.com/drnic/Showoff.tmbundle
* Emacs major-mode - showoff-mode - Nick Parker
http://github.com/developernotes/showoff-mode
= 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 interupting 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.
= Why Not S5 or Slidy or Slidedown?
S5 and Slidy are really cool, and I was going to use them, but mainly I wanted
something more dynamic. I wanted Slidy + Slidedown, where I could write my
slideshows in a structured format in sections, where the sections could easily
be moved around and between presentations and could be written in Markdown. I
also like the idea of having interactive presentation system and didn't need
half the features of S5/Slidy (style based print view, auto-scaling, themes,
etc).
= Requirements
* Ruby (duh)
* Sinatra (and thus Rack)
* BlueCloth
* Nokogiri
* json
* GLI gem
* Firefox or Chrome to present
* PDFKit (optional, for generating PDF of presentation) https://github.com/jdpace/PDFKit
= Contributing
See the CONTRIB.txt file for how to contribute to this project
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
