commit b1e5155d5b3fe0c8130c5f9ded4f477a9af0db0b Author: Abhay Rana Date: Fri Oct 5 01:28:04 2012 +0530 First talk diff --git a/ux/README.md b/ux/README.md new file mode 100755 index 0000000..05999e4 --- /dev/null +++ b/ux/README.md @@ -0,0 +1,251 @@ +# reveal.js + +A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting. + +Note that this requires a browser with support for CSS 3D transforms and ``classList``. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. A [classList polyfill](http://purl.eligrey.com/github/classList.js/blob/master/classList.js) is incuded to make this work in < iOS 5, < Safari 5.1 and IE. + +Curious about how it looks in action? [Check out the demo page](http://lab.hakim.se/reveal-js/). + +## Usage + +### Markup + +Markup heirarchy needs to be ``
`` where the ``
`` represents one slide and can be repeated indefinitely. If you place multiple ``
``'s inside of another ``
`` they will be shown as vertical slides. For example: + +```html +
+
+
Single Horizontal Slide
+
+
Vertical Slide 1
+
Vertical Slide 2
+
+
+
+``` + +### Configuration + +At the end of your page, after ````, you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below. + +```javascript +Reveal.initialize({ + // Display controls in the bottom right corner + controls: true, + + // Display a presentation progress bar + progress: true, + + // Push each slide change to the browser history + history: false, + + // Enable keyboard shortcuts for navigation + keyboard: true, + + // Loop the presentation + loop: false, + + // Number of milliseconds between automatically proceeding to the + // next slide, disabled when set to 0 + autoSlide: 0, + + // Enable slide navigation via mouse wheel + mouseWheel: true, + + // Apply a 3D roll to links on hover + rollingLinks: true, + + // UI style + theme: 'default', // default/neon/beige + + // Transition style + transition: 'default' // default/cube/page/concave/linear(2d) +}); +``` + +### API + +The Reveal class provides a minimal JavaScript API for controlling its navigation: + +- Reveal.navigateTo( indexh, indexv ); +- Reveal.navigateLeft(); +- Reveal.navigateRight(); +- Reveal.navigateUp(); +- Reveal.navigateDown(); +- Reveal.navigatePrev(); +- Reveal.navigateNext(); +- Reveal.toggleOverview(); + +### States + +If you set ``data-state="somestate"`` on a slide ``
``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. + +Furthermore you can also listen to these changes in state via JavaScript: + +```javascript +Reveal.addEventListener( 'somestate', function() { + // TODO: Sprinkle magic +}, false ); +``` + +### Slide change event + +An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. + +```javascript +Reveal.addEventListener( 'slidechanged', function( event ) { + // event.previousSlide, event.currentSlide, event.indexh, event.indexv +} ); +``` + +### Fragment events + +When a slide fragment is either shown or hidden reveal.js will dispatch an event. + +```javascript +Reveal.addEventListener( 'fragmentshown', function( event ) { + // event.fragment = the fragment DOM element +} ); +Reveal.addEventListener( 'fragmenthidden', function( event ) { + // event.fragment = the fragment DOM element +} ); +``` + +### Folder Structure +- **css/** Core styles without which the project does not function +- **js/** Like above but for JavaScript +- **plugin/** Components that have been developed as extensions to reveal.js +- **lib/** All other third party assets (JavaScript, CSS, fonts) + +## Speaker Notes + +If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another. + +To include speaker notes in your presentation, simply add an `