Modern Presentation using RevealJS

<section>
    <h1>Modernising Presentation</h1>
    <h3 class="fragment fade-in">using Reveal.JS</h3>
</section>



<section data-markdown>
  ## What is Reveal.JS?

  It's a framework that enables you to create beautiful interactive slide decks using HTML (with Markdown support).
</section>



<section>
  <section data-markdown>
	  ## Use case
  </section>

	<section data-markdown>
		Don't have Powerpoint or PC/Laptop
	</section>

  <section data-markdown>
		On the go
  </section>
</section>


<section>
  <section data-markdown>
	  ## What do you need to get started?
  </section>
	<section data-markdown>
		- GitHub account
		- Create your gist in Github and make it public - copy the token part from the gist url
		- Access your presentation by appending the token to gist-reveal.it/ ie. http://gist-reveal.it/b9280a790afd2f110862af68570a138f
	</section>
</section>



<section data-markdown>
	# Example gist content
</section>



<section data-markdown>
  ## Speaker View

  There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes.

  Press the <em>S</em> key to try it out.
</section>



<section>
  <section data-markdown>
    ## Vertical Slides

    Slides can be nested inside of each other.

    Use the <em>Space</em> key to navigate through all slides.

    <a href="#" class="navigate-down">
      <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
    </a>
  </section>

  <section data-markdown>
    ## Basement Level 1

    Nested slides are useful for adding additional detail underneath a high level horizontal slide
  </section>

  <section data-markdown>
    ## Basement Level 2
    That's it, time to go back up.

    <a href="#/2">
      <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
    </a>
  </section>

  <aside class="notes">
    Scroll down
  </aside>
</section>



<section data-markdown>
  ## Point of View

  Press <strong>ESC</strong> to enter the slide overview.

  Hold down alt and click on any element to zoom in on it using [zoom.js](http://lab.hakim.se/zoom-js). Alt + click anywhere to zoom back out.
</section>



<section data-markdown>
  ## Touch Optimized

  Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
</section>



<section data-markdown>
  ## Markdown support

  Write content using inline or external Markdown.
  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).

  ```
  ## This is a sample h2 tag in markdown
  > This is a block quote
  ```
</section>



<section>
  <h2>Fragments</h2>
  <p class="fragment" data-fragment-index="1">Hit the next arrow...</p>
  <p class="fragment" data-fragment-index="2">... to step through ...<span class="fragment">... a</span><span class="fragment"> fragmented</span><span class="fragment"> slide.</span>
</section>



<section>
  <p class="fragment grow">grow</p>
	<p class="fragment shrink">shrink</p>
	<p class="fragment fade-out">fade-out</p>
	<p class="fragment fade-up">fade-up (also down, left and right!)</p>
	<p class="fragment current-visible">visible only once</p>
	<p class="fragment highlight-current-blue">blue only once</p>
	<p class="fragment highlight-red">highlight-red</p>
	<p class="fragment highlight-green">highlight-green</p>
	<p class="fragment highlight-blue">highlight-blue</p>
</section>



<section>
  <section data-transition="zoom">
  	<h2>This slide will override the presentation transition and zoom!</h2>
  </section>

  <section data-transition-speed="fast">
  	<h2>Choose from three transition speeds: default, fast or slow!</h2>
  </section>

  <section data-transition="slide">
      The train goes on …
  </section>
  <section data-transition="slide">
      and on …
  </section>
  <section data-transition="slide-in fade-out">
      and stops.
  </section>
  <section data-transition="fade-in slide-out">
      (Passengers entering and leaving)
  </section>
  <section data-transition="slide">
      And it starts again.
  </section>
</section>



<section data-background="#dddddd">
  <h2>Slide Backgrounds</h2>
  <p>All CSS color formats are supported.</p>
</section>



<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-markdown>
  ## Image Backgrounds
</section>



<section data-background="http://i.giphy.com/90F8aUepslB84.gif" data-markdown>
  ## ... and GIFs!
</section>



<section>
  <h2>Pretty Code</h2>

  <pre><code data-trim data-noescape>
  function linkify(selector) {
      if (supports3DTransforms) {

          var nodes = document.querySelectorAll(selector);

          for (var i = 0, len = nodes.length; i & lt; len; i++) {
              var node = nodes[i];

              if (!node.className) {
                  node.className += ' roll';
              }
          }
      }
  }
  </code></pre>
</section>



<section data-markdown>
  ## Marvelous List

  - No order here
  - Or here
  - Or here
  - really!
</section>



<section data-markdown>
  ## Fantastic Ordered List

  1. One is smaller than...
  2. Two is smaller than...
  3. Three!
</section>

<section data-markdown>
## Tabular Tables
| Company       | Stock Value   | CEO           |
| ------------- |:-------------:| :-------------|
| Apple         | $153.67       | Tim Cook      |
| Google        | $996.17       | Sundar Pichai |
| Tesla         | $335.10       | Elon Musk     |
| Amazon        | $996.70       | Jeff Bezos    |
</section>

<section data-markdown>
  ## Clever Quotes

  These guys come in two forms, inline: <q>"The nice thing about standards is that there are so many to choose from"</q> and block:

  > "For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue."
</section>

<section data-markdown>
  ## Intergalactic Interconnections

  You can link between slides internally, [like this](#/3/2).
</section>

<section data-markdown>
  ## Take a Moment

  Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
</section>

<section data-markdown>
  # The End
  - [Gist used in presentation](https://gist.github.com/hhcordero/d6e8ebb89c9795a5027cbbdcdf5865b6)
  - Created by [Hakim El Hattab](http://hakim.se) / [@hakimel](http://twitter.com/hakimel)</small>
  - [Reveal.JS source code & documentation](https://github.com/hakimel/reveal.js)
</section>