Browse Source

First talk

techflash2019
Abhay Rana 8 years ago
commit
b1e5155d5b
63 changed files with 3668 additions and 0 deletions
  1. +251
    -0
      ux/README.md
  2. BIN
      ux/amazon-1.jpg
  3. BIN
      ux/amazon-2.jpg
  4. BIN
      ux/amazon-3.jpg
  5. BIN
      ux/amazon-4.jpg
  6. BIN
      ux/amazon-5.jpg
  7. BIN
      ux/amazon-6.jpg
  8. BIN
      ux/amazon-6.png
  9. BIN
      ux/amazon-7.png
  10. BIN
      ux/avengers.png
  11. BIN
      ux/blooper-1.jpg
  12. BIN
      ux/blooper-2.jpg
  13. BIN
      ux/blooper.jpg
  14. BIN
      ux/chrome.jpg
  15. BIN
      ux/cmd.jpg
  16. +1014
    -0
      ux/css/main.css
  17. +159
    -0
      ux/css/pdf.css
  18. +167
    -0
      ux/css/print.css
  19. +57
    -0
      ux/css/reset.css
  20. BIN
      ux/dmmt.jpg
  21. BIN
      ux/eye.jpg
  22. BIN
      ux/fb.jpg
  23. BIN
      ux/flipkart-1.jpg
  24. BIN
      ux/flipkart-2.jpg
  25. BIN
      ux/gmail-2.jpg
  26. BIN
      ux/gmail-field.jpg
  27. BIN
      ux/gmail.jpg
  28. BIN
      ux/google.jpg
  29. BIN
      ux/gs.png
  30. BIN
      ux/hangout.png
  31. BIN
      ux/idm.jpg
  32. +346
    -0
      ux/index.html
  33. +347
    -0
      ux/index.html~
  34. BIN
      ux/indiaplaza.in.jpg
  35. BIN
      ux/ios-1.jpg
  36. +996
    -0
      ux/js/reveal.js
  37. BIN
      ux/kinect.jpg
  38. BIN
      ux/lbd.jpg
  39. BIN
      ux/lbd2.png
  40. BIN
      ux/lbd3.png
  41. +115
    -0
      ux/lib/css/zenburn.css
  42. BIN
      ux/lib/font/league_gothic-webfont.ttf
  43. +2
    -0
      ux/lib/font/league_gothic_license
  44. +2
    -0
      ux/lib/js/classList.js
  45. +8
    -0
      ux/lib/js/head.min.js
  46. +5
    -0
      ux/lib/js/highlight.js
  47. BIN
      ux/london.jpg
  48. BIN
      ux/london.png
  49. BIN
      ux/menus.png
  50. BIN
      ux/minority.jpg
  51. BIN
      ux/mockup.jpg
  52. BIN
      ux/paint.jpg
  53. +35
    -0
      ux/plugin/speakernotes/client.js
  54. +55
    -0
      ux/plugin/speakernotes/index.js
  55. +109
    -0
      ux/plugin/speakernotes/notes.html
  56. BIN
      ux/postbox.png
  57. BIN
      ux/siri.jpg
  58. BIN
      ux/sketch.jpg
  59. BIN
      ux/tabs.jpg
  60. BIN
      ux/ux.jpg
  61. BIN
      ux/wmp.jpg
  62. BIN
      ux/yt-2.png
  63. BIN
      ux/yt.jpg

+ 251
- 0
ux/README.md View File

@ -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 ``<div class="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. For example:
```html
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide</section>
<section>
<section>Vertical Slide 1</section>
<section>Vertical Slide 2</section>
</section>
</div>
</div>
```
### Configuration
At the end of your page, after ``<script src="js/reveal.js"></script>``, 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 ``<section>``, "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 `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view.
You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`.
Once Node.js and the dependencies are installed, run the following command from the root directory:
node plugin/speakernotes
By default, the slides will be served at [localhost:1947](http://localhost:1947).
You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html`.
### Known Issues
- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions.
## Examples
* http://lab.hakim.se/reveal-js/ (original)
* http://www.ideapolisagency.com/ by [@achrafkassioui](http://twitter.com/achrafkassioui)
* http://lucienfrelin.com/ by [@lucienfrelin](http://twitter.com/lucienfrelin)
* http://creatorrr.github.com/ThePoet/
* http://moduscreate.com/ by [@ModusCreate](https://twitter.com/ModusCreate)
* http://idea.diwank.name/ by [Diwank Singh](http://diwank.name/)
* [Webapp Development Stack & Tooling](http://dl.dropbox.com/u/39519/talks/jquk-tooling%2Bappstack/index.html) by [Paul Irish](https://github.com/paulirish)
* [Lock-free algorithms](http://concurrencykit.org/presentations/lockfree_introduction/) by Samy Al Bahra
* [Not Your Average Drag and Drop](http://www.thecssninja.com/talks/not_your_average_dnd/) by [Ryan Seddon](https://github.com/ryanseddon)
* [Elasticsearch](http://spinscale.github.com/elasticsearch/2012-03-jugm.html) by [@spinscale](http://twitter.com/spinscale)
* [JavaScript Tooling](http://dl.dropbox.com/u/39519/talks/jsconf-tools/index.html) by [Paul Irish](https://github.com/paulirish)
* [The Graphical Web: Fostering Creativity](http://vhardy.github.com/presentations/html5-community-meet-up-2012/) by [Vincent Hardy](https://github.com/vhardy)
* [Mobile Web Programming is a Bloody Mess](http://westcoastlogic.com/slides/debug-mobile/) by [Brian LeRoux](https://github.com/brianleroux)
* [Bio Database Access and Sequence Alignment](http://www.philipbjorge.com/bioinformatics-presentation/) by [Philip Bjorge](https://github.com/philipbjorge)
* [Web vs Native](http://prez.mahemoff.com/state-native/) by [Michael Mahemoff](https://github.com/mahemoff)
* [Continuously Integrated JS Development](http://trodrigues.net/presentations/buster-ci/) by [Tiago Rodrigues](https://github.com/trodrigues)
* [To be Future Friendly is to be Device Agnostic](http://dl.dropbox.com/u/409429/presentations/toster-2012/index.html) by [Joe McCann](https://github.com/joemccann)
* [The Web Development Workflow of 2013](http://dl.dropbox.com/u/39519/talks/fluent/index.html) by [Paul Irish](https://github.com/paulirish)
* [How To Cope With Graphical Challenges Using Latest Web Technologies](http://alexw.me/playground/slideshows/w3c_netcraft/) by [Alex Wolkov](https://github.com/altryne)
* [Going Deeper with jQuery Mobile](http://andymatthews.net/downloads/presentations/going-deeper-with-jquery-mobile/) by [Andy Matthews](https://github.com/commadelimited)
* [Studio Nord](http://studionord.org)
* [Herrljunga Cider](http://herrljungacider.se/uk/campaign/)
[Send me a link](http://hakim.se/about/contact) if you used reveal.js for a project or presentation.
## History
#### 1.4 (master/beta)
- Main #reveal container is now selected via a class instead of ID
- API methods for adding or removing all event listeners
- The ```slidechange``` event now includes currentSlide and previousSlide
- Fixed bug where 'slidechange' was firing twice when history was enabled
- Folder structure updates for scalability (see /lib & /plugin)
- Slide notes by [rmurphey](https://github.com/rmurphey)
- Bumped up default font-size for code samples
- Added beige theme
- Added 'autoSlide' config
- Bug fix: The 'slidechanged' event is now firing upon 'hashchange'. Thanks [basecode](https://github.com/basecode)
- Bug fix: JS error when the 'progress' option was true but there was no progress DOM element
- ```keyboard``` config flag for disabling all keyboard navigation
#### 1.3
- Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff)
- Added support for looped presentations via config
- Fixed IE9 fallback
- Added event binding methods (Reveal.addEventListener, Reveal.removeEventListener)
- Added 'slidechanged' event
- Added print styles. Thanks [skypanther](https://github.com/skypanther)
- The address bar now hides automatically on mobile browsers
- Space and return keys can be used to exit the overview mode
- Events for fragment states ('fragmentshown'/'fragmenthidden')
- Support for swipe navigation on touch devices. Thanks [akiersky](https://github.com/akiersky)
- Support for pinch to overview on touch devices
#### 1.2
- Big changes to DOM structure:
- Previous #main wrapper is now called #reveal
- Slides were moved one level deeper, into #reveal .slides
- Controls and progress bar were moved into #reveal
- CSS is now much more explicit, rooted at #reveal, to prevent conflicts
- Config option for disabling updates to URL, defaults to true
- Anchors with image children no longer rotate in 3D on hover
- Support for mouse wheel navigation ([naugtur](https://github.com/naugtur))
- Delayed updates to URL hash to work around a bug in Chrome
- Included a classList polyfill for IE9
- Support for wireless presenter keys
- States can now be applied as classes on the document element by adding data-state on a slide
#### 1.1
- Added an optional presentation progress bar
- Images wrapped in anchors no longer unexpectedly flip in 3D
- Slides that contain other slides are given the 'stack' class
- Added 'transition' option for specifying transition styles
- Added 'theme' option for specifying UI styles
- New transitions: 'box' & 'page'
- New theme: 'neon'
#### 1.0
- New and improved style
- Added controls in bottom right which indicate where you can navigate
- Reveal views in iteratively by giving them the .fragment class
- Code sample syntax highlighting thanks to [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/)
- Initialization options (toggling controls, toggling rolling links, transition theme)
#### 0.3
- Added licensing terms
- Fixed broken links on touch devices
#### 0.2
- Refactored code and added inline documentation
- Slides now have unique URL's
- A basic API to invoke navigation was added
#### 0.1
- First release
- Transitions and a white theme
## License
MIT licensed
Copyright (C) 2012 Hakim El Hattab, http://hakim.se

BIN
ux/amazon-1.jpg View File

Before After
Width: 598  |  Height: 112  |  Size: 26 KiB

BIN
ux/amazon-2.jpg View File

Before After
Width: 668  |  Height: 111  |  Size: 27 KiB

BIN
ux/amazon-3.jpg View File

Before After
Width: 670  |  Height: 127  |  Size: 29 KiB

BIN
ux/amazon-4.jpg View File

Before After
Width: 643  |  Height: 74  |  Size: 19 KiB

BIN
ux/amazon-5.jpg View File

Before After
Width: 726  |  Height: 542  |  Size: 84 KiB

BIN
ux/amazon-6.jpg View File

Before After
Width: 666  |  Height: 77  |  Size: 12 KiB

BIN
ux/amazon-6.png View File

Before After
Width: 666  |  Height: 77  |  Size: 12 KiB

BIN
ux/amazon-7.png View File

Before After
Width: 642  |  Height: 96  |  Size: 11 KiB

BIN
ux/avengers.png View File

Before After
Width: 500  |  Height: 333  |  Size: 414 KiB

BIN
ux/blooper-1.jpg View File

Before After
Width: 450  |  Height: 169  |  Size: 23 KiB

BIN
ux/blooper-2.jpg View File

Before After
Width: 197  |  Height: 119  |  Size: 8.0 KiB

BIN
ux/blooper.jpg View File

Before After
Width: 150  |  Height: 193  |  Size: 12 KiB

BIN
ux/chrome.jpg View File

Before After
Width: 400  |  Height: 300  |  Size: 131 KiB

BIN
ux/cmd.jpg View File

Before After
Width: 663  |  Height: 331  |  Size: 51 KiB

+ 1014
- 0
ux/css/main.css
File diff suppressed because it is too large
View File


+ 159
- 0
ux/css/pdf.css View File

@ -0,0 +1,159 @@
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
/* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending
beyond the edge of the printed page, and prevents
unnecessary background images from printing */
* {
-webkit-print-color-adjust: exact;
}
body {
font-size: 22pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
overflow: visible;
background: #333;
}
html {
width: auto;
height: auto;
overflow: visible;
}
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls a,
.reveal .progress,
.reveal.overview,
.fork-reveal,
.share-reveal,
.state-background {
display:none;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div, a {
font-size: 22pt;
}
/* SECTION 4: Set heading font face, sizes, and color.
Diffrentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1,h2,h3,h4,h5,h6 {
text-shadow: 0 0 0 #000 !important;
}
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
a:link,
a:visited {
font-weight: bold;
text-decoration: underline;
}
/* SECTION 6: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto;
}
.reveal .slides {
position: static;
width: 100%;
height: auto;
left: auto;
top: auto;
margin-left: auto;
margin-top: auto;
padding: auto;
overflow: visible;
display: block;
text-align: center;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.reveal .slides>section, .reveal .slides>section>section,
.reveal .slides>section.past, .reveal .slides>section.future,
.reveal.linear .slides>section, .reveal.linear .slides>section>section,
.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
visibility: visible;
position: static;
width: 100%;
height: auto;
min-height: initial;
display: block;
overflow: visible;
left: 0%;
top: 0%;
margin-left: 0px;
margin-top: 50px;
padding: 20px 0px;
opacity: 1;
-webkit-transform-style: flat;
-moz-transform-style: flat;
-ms-transform-style: flat;
transform-style: flat;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
.reveal section {
page-break-after: always !important;
display: block !important;
}
.reveal section.stack {
margin: 0px !important;
padding: 0px !important;
page-break-after: avoid !important;
}
.reveal section .fragment {
opacity: 1 !important;
}
.reveal img {
box-shadow: none;
}
.reveal .roll {
overflow: visible;
line-height: 1em;
}
.reveal small a {
font-size: 16pt !important;
}

+ 167
- 0
ux/css/print.css View File

@ -0,0 +1,167 @@
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
/* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending
beyond the edge of the printed page, and prevents
unnecessary background images from printing */
body {
background: #fff url(none);
font-size: 13pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
overflow: visible;
}
html {
background: #fff;
width: auto;
height: auto;
overflow: visible;
}
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls a,
.reveal .progress span,
.reveal.overview {
display:none;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div, a {
font-size: 13pt;
font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000;
}
/* SECTION 4: Set heading font face, sizes, and color.
Diffrentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1,h2,h3,h4,h5,h6 {
color: #000!important;
height: auto;
line-height: normal;
font-family: Georgia, "Times New Roman", Times, serif !important;
text-shadow: 0 0 0 #000 !important;
text-align: left;
letter-spacing: normal;
}
/* Need to reduce the size of the fonts for printing */
h1 { font-size: 26pt !important; }
h2 { font-size: 22pt !important; }
h3 { font-size: 20pt !important; }
h4 { font-size: 20pt !important; font-variant: small-caps; }
h5 { font-size: 19pt !important; }
h6 { font-size: 18pt !important; font-style: italic; }
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
a:link,
a:visited {
color: #000 !important;
font-weight: bold;
text-decoration: underline;
}
.reveal a:link:after,
.reveal a:visited:after {
content: " (" attr(href) ") ";
color: #222 !important;
font-size: 90%;
}
/* SECTION 6: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible;
position: static;
width: auto;
height: auto;
display: block;
overflow: visible;
margin: auto;
text-align: left !important;
}
.reveal .slides {
position: static;
width: auto;
height: auto;
left: auto;
top: auto;
margin-left: auto;
margin-top: auto;
padding: auto;
overflow: visible;
display: block;
text-align: center;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.reveal .slides>section, .reveal .slides>section>section,
.reveal .slides>section.past, .reveal .slides>section.future,
.reveal.linear .slides>section, .reveal.linear .slides>section>section,
.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
visibility: visible;
position: static;
width: 90%;
height: auto;
display: block;
overflow: visible;
left: 0%;
top: 0%;
margin-left: 0px;
margin-top: 0px;
padding: 20px 0px;
opacity: 1;
-webkit-transform-style: flat;
-moz-transform-style: flat;
-ms-transform-style: flat;
transform-style: flat;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
.reveal section {
page-break-after: always !important;
display: block !important;
}
.reveal section.stack {
page-break-after: avoid !important;
}
.reveal section .fragment {
opacity: 1 !important;
}
.reveal section img {
display: block;
margin: 15px 0px;
background: rgba(255,255,255,1);
border: 1px solid #666;
box-shadow: none;
}

+ 57
- 0
ux/css/reset.css View File

@ -0,0 +1,57 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* HTML5BP:
These selection declarations have to be separate.
No text-shadow: twitter.com/miketaylr/status/12228805301
Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

BIN
ux/dmmt.jpg View File

Before After
Width: 389  |  Height: 500  |  Size: 34 KiB

BIN
ux/eye.jpg View File

Before After
Width: 356  |  Height: 253  |  Size: 19 KiB

BIN
ux/fb.jpg View File

Before After
Width: 283  |  Height: 39  |  Size: 11 KiB

BIN
ux/flipkart-1.jpg View File

Before After
Width: 607  |  Height: 495  |  Size: 69 KiB

BIN
ux/flipkart-2.jpg View File

Before After
Width: 355  |  Height: 444  |  Size: 30 KiB

BIN
ux/gmail-2.jpg View File

Before After
Width: 569  |  Height: 41  |  Size: 14 KiB

BIN
ux/gmail-field.jpg View File

Before After
Width: 975  |  Height: 271  |  Size: 38 KiB

BIN
ux/gmail.jpg View File

Before After
Width: 576  |  Height: 49  |  Size: 14 KiB

BIN
ux/google.jpg View File

Before After
Width: 621  |  Height: 252  |  Size: 19 KiB

BIN
ux/gs.png View File

Before After
Width: 600  |  Height: 307  |  Size: 109 KiB

BIN
ux/hangout.png View File

Before After
Width: 833  |  Height: 586  |  Size: 134 KiB

BIN
ux/idm.jpg View File

Before After
Width: 510  |  Height: 39  |  Size: 13 KiB

+ 346
- 0
ux/index.html View File

@ -0,0 +1,346 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UX &amp; Usability Designing</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/reset.css">-->
<link rel="stylesheet" href="css/main.css">
<script>
// If the query includes 'print-pdf' we'll use the PDF print sheet
document.write( '<link rel="stylesheet" href="css/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<body>
<div class="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>UX &amp; Usability Designing</h1>
<h3 class="inverted">- Abhay Rana (me@captnemo.in)</h3>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<section>
<section>
<h2>Types Of Designing</h2>
<h3>Informational Design</h3>
<ul>
<li>Posters</li>
<li>Notices</li>
<li>Content Websites</li>
</ul>
<br><br>
<h3>Interactive Design</h3>
<ul>
<li>User-oriented</li>
<li>Interactive</li>
</ul>
</section>
<section>
<h2>Informational Design</h2>
<img src="chrome.jpg">
<br><small>http://www.flickr.com/photos/ell-r-brown/5308119110/sizes/m/</small>
</section>
<Section>
<h2>Interactive Design</h2>
<img src="hangout.png">
<br><small>https://plus.google.com/hangouts/</small>
</section>
<section>
<h2>Youtube Leanback</h2>
<img src="yt-2.png"><br>
<small>http://www.youtube.com/leanback</small>
</section>
<section>
<h2>Postbox App</h2>
<img src="postbox.png"><br>
<small>http://www.postbox-inc.com/</small>
</section>
</section>
<section>
<section>
<h2 style="margin-top:-100px">Why do we need this?</h2>
<img src="amazon-1.jpg" />
<img src="amazon-3.jpg" />
<img src="amazon-4.jpg" />
<img src="amazon-6.jpg" />
<img src="amazon-7.png" />
<br><small>Amazon circa 2001, 2003, 2005, 2007, 2011 via archive.org</small>
</section>
<section>
<h2>Multi-Level Menus</h2>
<img src="amazon-5.jpg">
</section>
<section>
<h2>Flipkart.com</h2>
<img src="flipkart-1.jpg">
</section>
<section>
<h2>Indiaplaza.in</h2>
<img src="indiaplaza.in.jpg">
</section>
</section>
<section>
<section>
<h2>Interface Oriented Designing</h2>
<p>Some examples of interfaces ? </p>
</section>
<section>
<h2>Touch Based Interfaces</h2>
<img src="ios-1.jpg"><br>
<small>http://itunes.apple.com/gb/app/dvd-profiler-for-ios/id408455612?mt=8</small>
</section>
<section>
<h3>Touchable Websites</h2>
<img src="flipkart-2.jpg">
</section>
<section>
<h3>Command Line ?</h2>
<img src="cmd.jpg">
</section>
<section>
<h3>Voice Activated</h3>
<img src="siri.jpg"><br><small>http://goo.gl/4vFql</small>
</section>
<section>
<h3>Gesture Based</h3>
<img src="kinect.jpg">
<br><small>http://gamerant.com/microsoft-kinect-reviews-guide-benk-51320/</small>
</section>
<section>
<h3>Dream worthy Interfaces</h3>
<img src="avengers.png">
<br><small>Avengers, 2012 - Warner Bros</small>
</section>
</section>
<section>
<section>
<h2>Good Interfaces</h2>
<p>What do they all have in common?</p>
</section>
<section>
<h2>User-centered</h2>
<img src="google.jpg">
</section>
<section>
<h2>Easily Learnable</h2>
<img src="paint.jpg">
<img src="fb.jpg">
<img src="yt.jpg">
</section>
<section>
<h2>Fits in the environment</h2>
<ul>
<li>Angry Birds in <b>Windows</b></li>
<li>Dreamweaver in <b>iPhones</b></li>
<li>Windows on a <b>DJ Set</b></li>
<li>Temple Run using your <b>Mouse</b></li>
<li>Using Mouse to control a robot</li>
</ul>
</section>
<section>
<h2>And the gist is...</h2>
</section>
<section>
<h2 style="font-size:269px">DON'T MAKE ME THINK</h2>
</section>
</section>
<section>
<section>
<h2>Design Paradigms</h2>
<h4>Don't make me learn</h4>
<ul>
<li>Use existing design ideas</li>
<li>Don't re-invent the wheel</li>
<li>Design to learn quickly</li>
<li>Minimum Effort</li>
<li>Users are Lazy</li>
</ul>
</section>
<section>
<h2>Tabs</h2>
<img src="tabs.jpg">
</section>
<section>
<h2>Sensible Defaults</h2>
<p>Examples: </p>
<ul>
<li>Choose default country</li>
<li>Choose most-used price range</li>
<li>Show popular content</li>
<li>Reduce Design induced Frustration</li>
</ul>
</section>
<section>
<h2>Navigation Heirarchy</h2>
<img src="menus.png">
<p>Give your users an idea of what is important</p>
</section>
<section>
<h2>Eye Tracking</h2>
<img src="eye.jpg">
</section>
<section>
<h2>Using Icons</h2>
<ul>
<li>Bad Icons: <br><img src="gmail.jpg"></li>
<li>Fine Icons/Buttons: <br><img src="gmail-2.jpg"></li>
<li>More Bad Icons: <br><img src="idm.jpg"></li>
<li>Good: <br><img src="wmp.jpg"></li>
</ul>
</section>
<section>
<h2>Call To Action</h2>
<img src="gmail-field.jpg">
</section>
<section>
<h2>More CTA</h2>
<img src="gs.png">
</section>
</section>
<section>
<section>
<h2>Design Workflows</h2>
<blockquote>Produce at least 3 alternatives for every design decision - <a href="https://news.ycombinator.com/item?id=4312953">msuther</a></blockquote>
</section>
<section>
<h2>SketchFlow</h2>
<img src="sketch.jpg">
<p>Go through every screen &amp; its relation with other screens</p>
</section>
<section>
<h2>Mockups</h2>
<img src="mockup.jpg">
<p>Sketches, Wireframes, Mockups, Pixels, Shots</p>
</section>
<section>
<h2>Think Over every interaction</h2>
<p>Is this the easiest, most obvious interaction that the user would choose?</p>
<p>Can I offer an alternative to this interaction?</p>
<p>Don't miss out the power users</p>
<p>Don't try to do everything, do ONE THING WELL </p>
</section>
</section>
<section>
<section>
<h2>References</h2>
<p>This is just a small sample of what is out there in the web</p>
<h1>Doing><br>Learning><br>Reading</h1>
</section>
<section>
<h2>Don't Make Me Think - Steve Krug</h2>
<img src="dmmt.jpg">
</section>
<section>
<h2>GUI Bloopers</h2>
<img src="blooper-1.jpg">
<img src="blooper.jpg">
<img src="blooper-2.jpg">
</section>
<section>
<h2><a href="http://littlebigdetails.com"> Little Big Details </a></h2>
<img src="lbd.jpg">
<img src="lbd2.png">
<img src="lbd3.png">
</section>
<section>
<h2><a href="http://usabilityhell.com/">Usability Hell</a></h2>
<img src="london.png">
</section>
<section>
<h2><a href="http://ux.stackexchange.com"></a>ux.stackexchange</h2>
<img src="ux.jpg">
</section>
</section>
<section>
<section><h2>Questions?</h2></section>
<section>
<h1>Think</h1>
<h3>about how would you improve</h3>
<ul>
<li>A coffee machine</li>
<li>A power socket</li>
<li>google.com</li>
<li>muzi</li>
<li>anything really...</li>
</ul>
</section>
<section>
<h2>Thanks</h2>
</section>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Presentation progress bar -->
<div class="progress"><span></span></div>
</div>
<script src="lib/js/head.min.js"></script>
<script>
// Load reveal.js as well as a classList polyfill if needed
head.js( !document.body.classList ? 'lib/js/classList.js' : null )
.js( 'js/reveal.js', function() {
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
// Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: query.theme || 'default', // default/neon/beige
transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
});
} );
// If we're runnning the notes server we need to include some additional JS
// TODO Is there a better way to determine if we're running the notes server?
if( window.location.host === 'localhost:1947' ) {
head.js( 'socket.io/socket.io.js', 'plugin/speakernotes/client.js' );
}
</script>
</body>
</html>

+ 347
- 0
ux/index.html~ View File

@ -0,0 +1,347 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UX &amp; Usability Designing</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/reset.css">-->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<script>
// If the query includes 'print-pdf' we'll use the PDF print sheet
document.write( '<link rel="stylesheet" href="css/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<body>
<div class="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>UX &amp; Usability Designing</h1>
<h3 class="inverted">- Abhay Rana (me@captnemo.in)</h3>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<section>
<section>
<h2>Types Of Designing</h2>
<h3>Informational Design</h3>
<ul>
<li>Posters</li>
<li>Notices</li>
<li>Content Websites</li>
</ul>
<br><br>
<h3>Interactive Design</h3>
<ul>
<li>User-oriented</li>
<li>Interactive</li>
</ul>
</section>
<section>
<h2>Informational Design</h2>
<img src="chrome.jpg">
<br><small>http://www.flickr.com/photos/ell-r-brown/5308119110/sizes/m/</small>
</section>
<Section>
<h2>Interactive Design</h2>
<img src="hangout.png">
<br><small>https://plus.google.com/hangouts/</small>
</section>
<section>
<h2>Youtube Leanback</h2>
<img src="yt-2.png"><br>
<small>http://www.youtube.com/leanback</small>
</section>
<section>
<h2>Postbox App</h2>
<img src="postbox.png"><br>
<small>http://www.postbox-inc.com/</small>
</section>
</section>
<section>
<section>
<h2 style="margin-top:-100px">Why do we need this?</h2>
<img src="amazon-1.jpg" />
<img src="amazon-3.jpg" />
<img src="amazon-4.jpg" />
<img src="amazon-6.jpg" />
<img src="amazon-7.png" />
<br><small>Amazon circa 2001, 2003, 2005, 2007, 2011 via archive.org</small>
</section>
<section>
<h2>Multi-Level Menus</h2>
<img src="amazon-5.jpg">
</section>
<section>
<h2>Flipkart.com</h2>
<img src="flipkart-1.jpg">
</section>
<section>
<h2>Indiaplaza.in</h2>
<img src="indiaplaza.in.jpg">
</section>
</section>
<section>
<section>
<h2>Interface Oriented Designing</h2>
<p>Some examples of interfaces ? </p>
</section>
<section>
<h2>Touch Based Interfaces</h2>
<img src="ios-1.jpg"><br>
<small>http://itunes.apple.com/gb/app/dvd-profiler-for-ios/id408455612?mt=8</small>
</section>
<section>
<h3>Touchable Websites</h2>
<img src="flipkart-2.jpg">
</section>
<section>
<h3>Command Line ?</h2>
<img src="cmd.jpg">
</section>
<section>
<h3>Voice Activated</h3>
<img src="siri.jpg"><br><small>http://goo.gl/4vFql</small>
</section>
<section>
<h3>Gesture Based</h3>
<img src="kinect.jpg">
<br><small>http://gamerant.com/microsoft-kinect-reviews-guide-benk-51320/</small>
</section>
<section>
<h3>Dream worthy Interfaces</h3>
<img src="avengers.png">
<br><small>Avengers, 2012 - Warner Bros</small>
</section>
</section>
<section>
<section>
<h2>Good Interfaces</h2>
<p>What do they all have in common?</p>
</section>
<section>
<h2>User-centered</h2>
<img src="google.jpg">
</section>
<section>
<h2>Easily Learnable</h2>
<img src="paint.jpg">
<img src="fb.jpg">
<img src="yt.jpg">
</section>
<section>
<h2>Fits in the environment</h2>
<ul>
<li>Angry Birds in <b>Windows</b></li>
<li>Dreamweaver in <b>iPhones</b></li>
<li>Windows on a <b>DJ Set</b></li>
<li>Temple Run using your <b>Mouse</b></li>
<li>Using Mouse to control a robot</li>
</ul>
</section>
<section>
<h2>And the gist is...</h2>
</section>
<section>
<h2 style="font-size:269px">DON'T MAKE ME THINK</h2>
</section>
</section>
<section>
<section>
<h2>Design Paradigms</h2>
<h4>Don't make me learn</h4>
<ul>
<li>Use existing design ideas</li>
<li>Don't re-invent the wheel</li>
<li>Design to learn quickly</li>
<li>Minimum Effort</li>
<li>Users are Lazy</li>
</ul>
</section>
<section>
<h2>Tabs</h2>
<img src="tabs.jpg">
</section>
<section>
<h2>Sensible Defaults</h2>
<p>Examples: </p>
<ul>
<li>Choose default country</li>
<li>Choose most-used price range</li>
<li>Show popular content</li>
<li>Reduce Design induced Frustration</li>
</ul>
</section>
<section>
<h2>Navigation Heirarchy</h2>
<img src="menus.png">
<p>Give your users an idea of what is important</p>
</section>
<section>
<h2>Eye Tracking</h2>
<img src="eye.jpg">
</section>
<section>
<h2>Using Icons</h2>
<ul>
<li>Bad Icons: <br><img src="gmail.jpg"></li>
<li>Fine Icons/Buttons: <br><img src="gmail-2.jpg"></li>
<li>More Bad Icons: <br><img src="idm.jpg"></li>
<li>Good: <br><img src="wmp.jpg"></li>
</ul>
</section>
<section>
<h2>Call To Action</h2>
<img src="gmail-field.jpg">
</section>
<section>
<h2>More CTA</h2>
<img src="gs.png">
</section>
</section>
<section>
<section>
<h2>Design Workflows</h2>
<blockquote>Produce at least 3 alternatives for every design decision - <a href="https://news.ycombinator.com/item?id=4312953">msuther</a></blockquote>
</section>
<section>
<h2>SketchFlow</h2>
<img src="sketch.jpg">
<p>Go through every screen &amp; its relation with other screens</p>
</section>
<section>
<h2>Mockups</h2>
<img src="mockup.jpg">
<p>Sketches, Wireframes, Mockups, Pixels, Shots</p>
</section>
<section>
<h2>Think Over every interaction</h2>
<p>Is this the easiest, most obvious interaction that the user would choose?</p>
<p>Can I offer an alternative to this interaction?</p>
<p>Don't miss out the power users</p>
<p>Don't try to do everything, do ONE THING WELL </p>
</section>
</section>
<section>
<section>
<h2>References</h2>
<p>This is just a small sample of what is out there in the web</p>
<h1>Doing><br>Learning><br>Reading</h1>
</section>
<section>
<h2>Don't Make Me Think - Steve Krug</h2>
<img src="dmmt.jpg">
</section>
<section>
<h2>GUI Bloopers</h2>
<img src="blooper-1.jpg">
<img src="blooper.jpg">
<img src="blooper-2.jpg">
</section>
<section>
<h2><a href="http://littlebigdetails.com"> Little Big Details </a></h2>
<img src="lbd.jpg">
<img src="lbd2.png">
<img src="lbd3.png">
</section>
<section>
<h2><a href="http://usabilityhell.com/">Usability Hell</a></h2>
<img src="london.png">
</section>
<section>
<h2><a href="http://ux.stackexchange.com"></a>ux.stackexchange</h2>
<img src="ux.jpg">
</section>
</section>
<section>
<section><h2>Questions?</h2></section>
<section>
<h1>Think</h1>
<h3>about how would you improve</h3>
<ul>
<li>A coffee machine</li>
<li>A power socket</li>
<li>google.com</li>
<li>muzi</li>
<li>anything really...</li>
</ul>
</section>
<section>
<h2>Thanks</h2>
</section>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Presentation progress bar -->
<div class="progress"><span></span></div>
</div>
<script src="lib/js/head.min.js"></script>
<script>
// Load reveal.js as well as a classList polyfill if needed
head.js( !document.body.classList ? 'lib/js/classList.js' : null )
.js( 'js/reveal.js', function() {
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
// Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: query.theme || 'default', // default/neon/beige
transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
});
} );
// If we're runnning the notes server we need to include some additional JS
// TODO Is there a better way to determine if we're running the notes server?
if( window.location.host === 'localhost:1947' ) {
head.js( 'socket.io/socket.io.js', 'plugin/speakernotes/client.js' );
}
</script>
</body>
</html>

BIN
ux/indiaplaza.in.jpg View File

Before After
Width: 601  |  Height: 378  |  Size: 55 KiB

BIN
ux/ios-1.jpg View File

Before After
Width: 320  |  Height: 480  |  Size: 95 KiB

+ 996
- 0
ux/js/reveal.js View File

@ -0,0 +1,996 @@
/*!
* reveal.js 1.4
* http://lab.hakim.se/reveal-js
* MIT licensed
*
* Copyright (C) 2012 Hakim El Hattab, http://hakim.se
*/
var Reveal = (function(){
var HORIZONTAL_SLIDES_SELECTOR = '.reveal .slides>section',
VERTICAL_SLIDES_SELECTOR = '.reveal .slides>section.present>section',
IS_TOUCH_DEVICE = !!( 'ontouchstart' in window ),
// The horizontal and verical index of the currently active slide
indexh = 0,
indexv = 0,
// Configurations defaults, can be overridden at initialization time
config = {
// 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)
},
// Slides may hold a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of
// all current slides.
state = [],
// Cached references to DOM elements
dom = {},
// Detect support for CSS 3D transforms
supports3DTransforms = document.body.style['WebkitPerspective'] !== undefined ||
document.body.style['MozPerspective'] !== undefined ||
document.body.style['msPerspective'] !== undefined ||
document.body.style['OPerspective'] !== undefined ||
document.body.style['perspective'] !== undefined,
supports2DTransforms = document.body.style['WebkitTransform'] !== undefined ||
document.body.style['MozTransform'] !== undefined ||
document.body.style['msTransform'] !== undefined ||
document.body.style['OTransform'] !== undefined ||
document.body.style['transform'] !== undefined,
// Detect support for elem.classList
supportsClassList = !!document.body.classList;
// Throttles mouse wheel navigation
mouseWheelTimeout = 0,
// An interval used to automatically move on to the next slide
autoSlideTimeout = 0,
// Delays updates to the URL due to a Chrome thumbnailer bug
writeURLTimeout = 0,
// Holds information about the currently ongoing touch input
touch = {
startX: 0,
startY: 0,
startSpan: 0,
startCount: 0,
handled: false,
threshold: 40
};
/**
* Starts up the slideshow by applying configuration
* options and binding various events.
*/
function initialize( options ) {
if( ( !supports2DTransforms && !supports3DTransforms ) || !supportsClassList ) {
document.body.setAttribute( 'class', 'no-transforms' );
// If the browser doesn't support core features we won't be
// using JavaScript to control the presentation
return;
}
// Cache references to DOM elements
dom.wrapper = document.querySelector( '.reveal' );
dom.progress = document.querySelector( '.reveal .progress' );
dom.progressbar = document.querySelector( '.reveal .progress span' );
if ( config.controls ) {
dom.controls = document.querySelector( '.reveal .controls' );
dom.controlsLeft = document.querySelector( '.reveal .controls .left' );
dom.controlsRight = document.querySelector( '.reveal .controls .right' );
dom.controlsUp = document.querySelector( '.reveal .controls .up' );
dom.controlsDown = document.querySelector( '.reveal .controls .down' );
}
addEventListeners();
// Copy options over to our config object
extend( config, options );
// Updates the presentation to match the current configuration values
configure();
// Read the initial hash
readURL();
// Start auto-sliding if it's enabled
cueAutoSlide();
// Set up hiding of the browser address bar
if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
// Give the page some scrollable overflow
document.documentElement.style.overflow = 'scroll';
document.body.style.height = '120%';
// Events that should trigger the address bar to hide
window.addEventListener( 'load', removeAddressBar, false );
window.addEventListener( 'orientationchange', removeAddressBar, false );
}
}
function configure() {
if( supports3DTransforms === false ) {
// Fall back on the 2D transform theme 'linear'
config.transition = 'linear';
}
if( config.controls && dom.controls ) {
dom.controls.style.display = 'block';
}
if( config.progress && dom.progress ) {
dom.progress.style.display = 'block';
}
if( config.transition !== 'default' ) {
dom.wrapper.classList.add( config.transition );
}
if( config.theme !== 'default' ) {
document.documentElement.classList.add( 'theme-' + config.theme );
}
if( config.mouseWheel ) {
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
}
if( config.rollingLinks ) {
// Add some 3D magic to our anchors
linkify();
}
}
function addEventListeners() {
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
document.addEventListener( 'touchend', onDocumentTouchEnd, false );
window.addEventListener( 'hashchange', onWindowHashChange, false );
if( config.keyboard ) {
document.addEventListener( 'keydown', onDocumentKeyDown, false );
}
if ( config.controls && dom.controls ) {
dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false );
dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false );
dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false );
dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false );
}
}
function removeEventListeners() {
document.removeEventListener( 'keydown', onDocumentKeyDown, false );
document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
window.removeEventListener( 'hashchange', onWindowHashChange, false );
if ( config.controls && dom.controls ) {
dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false );
dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false );
dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false );
dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), false );
}
}
/**
* Extend object a with the properties of object b.
* If there's a conflict, object b takes precedence.
*/
function extend( a, b ) {
for( var i in b ) {
a[ i ] = b[ i ];
}
}
/**
* Measures the distance in pixels between point a
* and point b.
*
* @param {Object} a point with x/y properties
* @param {Object} b point with x/y properties
*/
function distanceBetween( a, b ) {
var dx = a.x - b.x,
dy = a.y - b.y;
return Math.sqrt( dx*dx + dy*dy );
}
/**
* Prevents an events defaults behavior calls the
* specified delegate.
*
* @param {Function} delegate The method to call
* after the wrapper has been executed
*/
function preventAndForward( delegate ) {
return function( event ) {
event.preventDefault();
delegate.call();
}
}
/**
* Causes the address bar to hide on mobile devices,
* more vertical space ftw.
*/
function removeAddressBar() {
setTimeout( function() {
window.scrollTo( 0, 1 );
}, 0 );
}
/**
* Handler for the document level 'keydown' event.
*
* @param {Object} event
*/
function onDocumentKeyDown( event ) {
// FFT: Use document.querySelector( ':focus' ) === null
// instead of checking contentEditable?
// Disregard the event if the target is editable or a
// modifier is present
if ( event.target.contentEditable != 'inherit' || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
var triggered = false;
switch( event.keyCode ) {
// p, page up
case 80: case 33: navigatePrev(); triggered = true; break;
// n, page down
case 78: case 34: navigateNext(); triggered = true; break;
// h, left
case 72: case 37: navigateLeft(); triggered = true; break;
// l, right
case 76: case 39: navigateRight(); triggered = true; break;
// k, up
case 75: case 38: navigateUp(); triggered = true; break;
// j, down
case 74: case 40: navigateDown(); triggered = true; break;
// home
case 36: navigateTo( 0 ); triggered = true; break;
// end
case 35: navigateTo( Number.MAX_VALUE ); triggered = true; break;
// space
case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); triggered = true; break;
// return
case 13: if( overviewIsActive() ) { deactivateOverview(); triggered = true; } break;
}
// If the input resulted in a triggered action we should prevent
// the browsers default behavior