Upstage is a library for building web presentations.
This repository includes
index.html as a starting point.
build directory and
index.html to your own workspace and get writing.
You may also be interested in generating HTML from a template language.
An example using Jade is provided at
index.jade. (This is how I write my slides.)
To use the example, copy
package.json to your own workspace,
npm install to install the Jade compiler, then run
npm run build or
npm run watch
to build your presentation.
Upstage was created in 2010 for a YUIConf talk to embed actual live demos in the same medium as the presentation.
In 2012, the presentation Write Code That Works used Upstage to embed webcam video into a slide. This allowed the audience to see multiple live demos of various tablets and phones on the big screen. The presentation and its S9 source file are a fine example of what's possible.
Both of these talks used the APIs described below to extend Upstage.
npm install -g shifter cd src/upstage shifter
Source files are located in
Upstage is easily extensible. Interesting moments in the slideshow are exposed as events on Y.Upstage.
- Fired to move forward or backward a given number of steps or slides.
- Takes an integer representing how many steps to move. If negative, movement will be backwards.
- Default action: Will fire the navigate event with the specific slide index.
- Fired to request to move to the specified slide.
- Takes an integer representing the slide to move to.
- Default action:
- If the movement is allowed, the slide is moved.
- If the movement is out of bounds (less than 1 or more than the amount of slides), nothing happens and the event is not propagated.
- Therefore, if you want to know to when a slide actually moves, subscribe to the after moment of this event.
js/permalink.js for an example of using the navigate event.
- A YUI Widget representing the slideshow. Provides warp and navigate events.
- Requires upstage-keyboard, upstage-gesture, or your own plugin to actually navigate slides.
- Handles keyboard interaction to move between slides: back, forward, home, end, etc.
- Provides Upstage events: keydown.
- Handles gesture interaction.
- Provides Upstage events: ui:swipeleft, ui:swiperight, ui:tap, ui:heldtap.
- Updates the fragment identifier of the page to create permalinks to the slides.
- Navigates to the correct slide when a fragment identifier is in the URL.
- Blanks the screen when
- Uses the keydown event provided by upstage-keyboard.
- Blanks the screen when
Author, License, Bugs
Upstage was written by Reid Burke.
Upstage is available online at https://github.com/reid/upstage. You may file bugs or contact me there.