slideshow_revealjs.adoc in hyla-1.0.2

- old
+ new
@@ -1,26 +1,260 @@
-= Getting Started with Reveal.js
 :description: RevealJS Template to create a beautiful HTML Slideshow
 :backend: revealjs
 :author: Charles Moulliard
+:twitter: cmoulliard
+:blog: http://cmoulliard.github.io
 // Themes : default, beige, moon, blood, night, serif, simple, sky, solarized
-:revealjs_theme: solarized
+:revealjs_theme: default
+:linkattrs:
+:idprefix:
 
+= Getting Started with Reveal.js
+
 == Reveal.js
 
 HTML Presentations Made Easy
 
-[small]#Created by
-http://cmoulliard.github.io[Charles Moulliard] / http://twitter.com/cmoulliard[@cmoulliard]#
++++<small>+++
+Created by {blog}[{author}] / http://twitter.com/{twitter}[@{twitter}]#
++++</small>+++
 
 == Heads Up
 
 reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
 support for CSS 3D transforms to see it in its full glory.
 
-[sidebar]
++++<aside class="notes">+++
 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
++++</aside>+++
 
-== Another Slide
+== Vertical Slides
 
+DOES NOT WORK AS IT IMPLIED TO HAVE A SECTION NESTED IN ANOTHER SECTION
+Slides can be nested inside of other slides,
+try pressing +++<a href="#" class="navigate-down">+++down+++</a>+++.
 
++++
+<a href="#" class="image navigate-down">
+    <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+</a>
++++
 
+== Basement Level 1
+
+Press down or up to navigate.
+
+== Slides
+
+Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es[http://slid.es, window="_blank"].
+
+== Point of View
+
+Press **ESC** to enter the slide overview.
+Hold down alt and click on any element to zoom in on it using http://lab.hakim.se/zoom-js[zoom.js].
+Alt + click anywhere to zoom back out.
+
+== Marvelous Unordered List
+
+- No order here
+- Or here
+- Or here
+- Or here
+
+== Fantastic Ordered List
+
+[numbered]
+. One is smaller than...
+. Two is smaller than...
+. Three!
+
+== Transition Styles
+
+You can select from different transitions, like:
+
+link:?transition=cube#/transitions[Cube] -
+link:?transition=page#/transitions[Page] -
+link:?transition=concave#/transitions[Concave] -
+link:?transition=zoom#/transitions[Zoom] -
+link:?transition=linear#/transitions[Linear] -
+link:?transition=fade#/transitions[Fade] -
+link:?transition=none#/transitions[None] -
+link:?#/transitions[Default]
+
+
+== Themes
+
+Reveal.js comes with a few themes built in:
+
+link:?#/themes[Default] -
+link:?theme=sky#/themes[Sky] -
+link:?theme=beige#/themes[Beige] -
+link:?theme=simple#/themes[Simple] -
+link:?theme=serif#/themes[Serif] -
+link:?theme=night#/themes[Night] +++<br>+++
+link:?theme=moon#/themes[Moon] -
+link:?theme=solarized#/themes[Solarized]
+
++++<small>+++
+* Theme demos are loaded after the presentation which leads to flicker. +
+In production you should load your theme in the <code><head></code> using a <code><link></code>.
++++</small>+++
+
+== Global State
+
+Set +++data-state="something"+++ on a slide and +
++++"something"+++ will be added as a class to the document +
+element when the slide is open. This lets you apply broader style +
+changes, like switching the background.
+
+== Custom Events
+
+Additionally custom events can be triggered on a per slide basis by binding to the +++data-state+++ name.
+
+[source, java]
+Reveal.addEventListener( 'customevent', function() {
+  console.log( '"customevent" has fired' );
+} );
+
+[data-background=#007777]
+== Slide Backgrounds
+
+Set +++data-background="#007777"+++ on a slide to change the full page background to the given color.
+All CSS color formats are supported.
+
+Put macro block with data-background attribute just before the title of the slide which corresponds to the section tag
+used by Reveal
+
+```
+[data-background=#007777]
+== Slide Backgrounds
+```
+
+[data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"]
+== Image Backgrounds
+
+```
+[data-background=image.png]
+== Image Backgrounds
+```
+
+[data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png", data-background-repeat="repeat", data-background-size="100px"]
+== REPEATED IMAGE BACKGROUNDS
+
+```
+[data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png", data-background-repeat="repeat", data-background-size="100px"]
+== REPEATED IMAGE BACKGROUNDS
+```
+
+[data-transition="linear", data-background="#4d7e65", data-background-transition="slide"]
+== Background Transitions
+
+Pass reveal.js the +++backgroundTransition: 'slide'+++ config argument to make backgrounds slide rather than fade.
+
+[data-transition="linear", data-background="#8c4738", data-background-transition="slide"]
+== Background Transition Override
+
+You can override background transitions per slide by using +++[data-background-transition="slide"].
+
+== Clever Quotes
+
+These guys come in two forms, inline: ``__The nice thing about standards is that there are so many to choose from
+__'' 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.__''
+
+== Pretty Code
+
+[source, javascript, source-highlighter=highlightjs]
+----
+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';
+      }
+    }
+  }
+}
+----
+
+Courtesy of http://softwaremaniacs.org/soft/highlight/en/description/[highlight.js].
+
+== Intergalactic Interconnections
+
+You can link between slides internally, link:#/2/3[like this].
+
+== fragments
+
+== Fragmented Views
+
+Hit the next arrow...
+
+== To step Through
+
+---
+<p class="fragment">... to step through ...</p>
+---
+
++++
+<ol>
+  <li class="fragment"><code>any type</code></li>
+  <li class="fragment"><em>of view</em></li>
+  <li class="fragment"><strong>fragments</strong></li>
+</ol>
++++
+
++++<aside class="notes">+++
+This slide has fragments which are also stepped through in the notes window.
++++</aside>+++
+
+
+== Fragment Styles
+
+There's a few styles of fragments, like:
+
++++
+<p class="fragment grow">grow</p>
+<p class="fragment shrink">shrink</p>
+<p class="fragment roll-in">roll-in
+<p class="fragment fade-out">fade-out
+<p class="fragment highlight-red">highlight-red
+<p class="fragment highlight-green">highlight-green
+<p class="fragment highlight-blue">highlight-blue
+<p class="fragment current-visible">current-visible
+<p class="fragment highlight-current-blue">highlight-current-blue
++++
+
+== Export to PDF
+
+Presentations can be link:https://github.com/hakimel/reveal.js#pdf-export[exported to PDF], below is an example that's been uploaded to SlideShare.
+
++++
+<iframe id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" style="margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
+<script>
+  document.getElementById('slideshare').attributeName = 'allowfullscreen';
+</script>
++++
+
+== Take a Moment
+
+Press +b+ or +period+ on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen + during a presentation.
+
+== Stellar Links
+
+.Asciidoctor
+- http://http://asciidoctor.org/[Asciidoctor]
+- https://github.com/asciidoctor[Asciidoctor Source code on GitHub]
+
+.Reveal.js
+- http://lab.hakim.se/reveal-js[Reveal.js demo]
+- https://github.com/hakimel/reveal.js[Reveal.js Source code on GitHub]
+
+== THE END
+
+BY http://hakim.se[Hakim El Hattab] & http://cmoulliard.github.io[Charles Moulliard]
\ No newline at end of file