From b1e5155d5b3fe0c8130c5f9ded4f477a9af0db0b Mon Sep 17 00:00:00 2001 From: Abhay Rana Date: Fri, 5 Oct 2012 01:28:04 +0530 Subject: [PATCH] First talk --- ux/README.md | 251 ++++++ ux/amazon-1.jpg | Bin 0 -> 26327 bytes ux/amazon-2.jpg | Bin 0 -> 27600 bytes ux/amazon-3.jpg | Bin 0 -> 30065 bytes ux/amazon-4.jpg | Bin 0 -> 19019 bytes ux/amazon-5.jpg | Bin 0 -> 86160 bytes ux/amazon-6.jpg | Bin 0 -> 12384 bytes ux/amazon-6.png | Bin 0 -> 12420 bytes ux/amazon-7.png | Bin 0 -> 10893 bytes ux/avengers.png | Bin 0 -> 423651 bytes ux/blooper-1.jpg | Bin 0 -> 23100 bytes ux/blooper-2.jpg | Bin 0 -> 8180 bytes ux/blooper.jpg | Bin 0 -> 12312 bytes ux/chrome.jpg | Bin 0 -> 134116 bytes ux/cmd.jpg | Bin 0 -> 52408 bytes ux/css/main.css | 1014 +++++++++++++++++++++++++ ux/css/pdf.css | 159 ++++ ux/css/print.css | 167 ++++ ux/css/reset.css | 57 ++ ux/dmmt.jpg | Bin 0 -> 34650 bytes ux/eye.jpg | Bin 0 -> 19474 bytes ux/fb.jpg | Bin 0 -> 11027 bytes ux/flipkart-1.jpg | Bin 0 -> 70724 bytes ux/flipkart-2.jpg | Bin 0 -> 30552 bytes ux/gmail-2.jpg | Bin 0 -> 13914 bytes ux/gmail-field.jpg | Bin 0 -> 38847 bytes ux/gmail.jpg | Bin 0 -> 14234 bytes ux/google.jpg | Bin 0 -> 19895 bytes ux/gs.png | Bin 0 -> 111555 bytes ux/hangout.png | Bin 0 -> 137195 bytes ux/idm.jpg | Bin 0 -> 12867 bytes ux/index.html | 346 +++++++++ ux/index.html~ | 347 +++++++++ ux/indiaplaza.in.jpg | Bin 0 -> 56235 bytes ux/ios-1.jpg | Bin 0 -> 97637 bytes ux/js/reveal.js | 996 ++++++++++++++++++++++++ ux/kinect.jpg | Bin 0 -> 65244 bytes ux/lbd.jpg | Bin 0 -> 64750 bytes ux/lbd2.png | Bin 0 -> 9525 bytes ux/lbd3.png | Bin 0 -> 8852 bytes ux/lib/css/zenburn.css | 115 +++ ux/lib/font/league_gothic-webfont.ttf | Bin 0 -> 42324 bytes ux/lib/font/league_gothic_license | 2 + ux/lib/js/classList.js | 2 + ux/lib/js/head.min.js | 8 + ux/lib/js/highlight.js | 5 + ux/london.jpg | Bin 0 -> 47022 bytes ux/london.png | Bin 0 -> 76147 bytes ux/menus.png | Bin 0 -> 20010 bytes ux/minority.jpg | Bin 0 -> 86842 bytes ux/mockup.jpg | Bin 0 -> 34275 bytes ux/paint.jpg | Bin 0 -> 25541 bytes ux/plugin/speakernotes/client.js | 35 + ux/plugin/speakernotes/index.js | 55 ++ ux/plugin/speakernotes/notes.html | 109 +++ ux/postbox.png | Bin 0 -> 84431 bytes ux/siri.jpg | Bin 0 -> 77024 bytes ux/sketch.jpg | Bin 0 -> 29018 bytes ux/tabs.jpg | Bin 0 -> 51243 bytes ux/ux.jpg | Bin 0 -> 93940 bytes ux/wmp.jpg | Bin 0 -> 11770 bytes ux/yt-2.png | Bin 0 -> 254290 bytes ux/yt.jpg | Bin 0 -> 30154 bytes 63 files changed, 3668 insertions(+) create mode 100755 ux/README.md create mode 100755 ux/amazon-1.jpg create mode 100755 ux/amazon-2.jpg create mode 100755 ux/amazon-3.jpg create mode 100755 ux/amazon-4.jpg create mode 100755 ux/amazon-5.jpg create mode 100755 ux/amazon-6.jpg create mode 100755 ux/amazon-6.png create mode 100755 ux/amazon-7.png create mode 100755 ux/avengers.png create mode 100755 ux/blooper-1.jpg create mode 100755 ux/blooper-2.jpg create mode 100755 ux/blooper.jpg create mode 100755 ux/chrome.jpg create mode 100755 ux/cmd.jpg create mode 100755 ux/css/main.css create mode 100644 ux/css/pdf.css create mode 100755 ux/css/print.css create mode 100755 ux/css/reset.css create mode 100755 ux/dmmt.jpg create mode 100755 ux/eye.jpg create mode 100755 ux/fb.jpg create mode 100755 ux/flipkart-1.jpg create mode 100755 ux/flipkart-2.jpg create mode 100755 ux/gmail-2.jpg create mode 100755 ux/gmail-field.jpg create mode 100755 ux/gmail.jpg create mode 100755 ux/google.jpg create mode 100755 ux/gs.png create mode 100755 ux/hangout.png create mode 100755 ux/idm.jpg create mode 100755 ux/index.html create mode 100755 ux/index.html~ create mode 100755 ux/indiaplaza.in.jpg create mode 100755 ux/ios-1.jpg create mode 100755 ux/js/reveal.js create mode 100755 ux/kinect.jpg create mode 100755 ux/lbd.jpg create mode 100755 ux/lbd2.png create mode 100755 ux/lbd3.png create mode 100755 ux/lib/css/zenburn.css create mode 100755 ux/lib/font/league_gothic-webfont.ttf create mode 100755 ux/lib/font/league_gothic_license create mode 100755 ux/lib/js/classList.js create mode 100755 ux/lib/js/head.min.js create mode 100755 ux/lib/js/highlight.js create mode 100755 ux/london.jpg create mode 100755 ux/london.png create mode 100755 ux/menus.png create mode 100755 ux/minority.jpg create mode 100755 ux/mockup.jpg create mode 100755 ux/paint.jpg create mode 100755 ux/plugin/speakernotes/client.js create mode 100755 ux/plugin/speakernotes/index.js create mode 100755 ux/plugin/speakernotes/notes.html create mode 100755 ux/postbox.png create mode 100755 ux/siri.jpg create mode 100755 ux/sketch.jpg create mode 100755 ux/tabs.jpg create mode 100755 ux/ux.jpg create mode 100755 ux/wmp.jpg create mode 100755 ux/yt-2.png create mode 100755 ux/yt.jpg 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 `