Last active
August 29, 2015 14:02
-
-
Save ryanj/7ebf56442930b4c2188b to your computer and use it in GitHub Desktop.
Use Docker, gist.github.com, and Reveal.js to produce themed slideshow presentations for conferences and / or hackathons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'> | |
<h2>Broadcasting Your</h3> | |
<h1>Reveal.js</h1> | |
<h2>Slideshow Presentations</h2> | |
<h1>LIVE</h1> | |
<p>on</p> | |
<img style="disply:block;border:none;background:none;box-shadow:none;width:50%;" alt='OpenShift-logo' src='http://ryanjarvinen.com/presentations/shared/img/OpenShift_Horizontal_RGB_Reverse.png'/> | |
<p class='fragment'><small><a href='http://slide-shifter.rhcloud.com/'>slide-shifter.rhcloud.com</a><br/> | |
<a href='http://github.com/ryanj/reveal.js'>github.com/ryanj/reveal.js</a></small></p> | |
</section> | |
<section data-background-transition='zoom' data-transition='linear'> | |
<section data-background-transition='zoom' data-transition='linear'> | |
<h2>Presentations on the Open Web</h2> | |
<p> | |
<span class='fragment'>Reveal.js is a framework</spam><br/><span class='fragment'>for easily crafting</span> <br/><span class='fragment'>beautiful presentations</span><br/> <span class='fragment'>in HTML</span> <br/><br/><div class='fragment'><p>You'll need a browser with | |
support for CSS 3D transforms to see it's full capabilities. | |
</p></div> | |
<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> | |
</section> | |
<section data-transition='concave'> | |
<h3>pre-requisites</h3> | |
<p> | |
In order to deploy and update your slideshow content on OpenShift you'll need to have:<ol><li class='fragment'><code>git</code></li><li class='fragment'><code>RubyGems</code></li><li class='fragment'>and the <a href="https://openshift.redhat.com/app/login?then=%2Fapp%2Fconsole%2Fapplication_type%2Fcart%21nodejs-0.10%3Fname%3Drevealjs%26initial_git_url%3Dhttps%253A%252F%252Fgithub.com%2Fryanj%2Freveal.js.git"><code>rhc</code></a> command-line tool</li></ol><p><span class='fragment'> installed and available</span><br/> <span class='fragment'> in your development environment</span></p> | |
</p> | |
</section> | |
</section> | |
<section data-transition='concave'> | |
<section data-transition='concave'> | |
<h2>Creating a New Deck</h2> | |
<p class='fragment'> | |
A fresh slide deck can be created using OpenShift's <code>rhc</code> commad-line tool, or through the OpenShift web console. | |
</p> | |
<br/> | |
<br/> | |
<ol> | |
<li class='fragment'>web browser</li> | |
<li class='fragment'>command line</li> | |
</ol> | |
</section> | |
<section data-transition='linear'> | |
<h2>Click to Launch</h2> | |
<p>You can <a href='https://openshift.redhat.com/app/console/application_type/cart!nodejs-0.10?name=revealjs&initial_git_url=https%3A%2F%2Fgithub.com/ryanj/reveal.js.git'>fire up your own copy of this presentation right from your browser</a> using OpenShift's <a href='https://www.openshift.com/blogs/launching-applications-with-openshifts-web-based-workflow'>app launch workflow</a></p> | |
<br/><br/><h1 class='fragment'><a href='https://openshift.redhat.com/app/console/application_type/cart!nodejs-0.10?name=revealjs&initial_git_url=https%3A%2F%2Fgithub.com/ryanj/reveal.js.git'><Launch Slides></a></h1> | |
</section> | |
<section> | |
<h2>Launching an app with rhc</h2> | |
<p class='fragment'>Use the <code>--from-code</code> option to specify your initial git source when launching your app.</p><br/><p class='fragment'>The following command will spin up a fresh nodejs server along with the included project source, allowing you create your own slide deck in a single command:</p> | |
<br/><pre class='fragment'><code contenteditable>rhc app create revealjs nodejs-0.10 --from-code=http://github.com/ryanj/reveal.js.git</code></pre> | |
</section> | |
<section data-transition='concave'> | |
<h2>Live on the web in Seconds</h2> | |
<br/> | |
<p class='fragment'><b><i>That's it!</i></b></p><br/><p class='fragment'>Your new Reveal.js deck should now be available via the URL printed in the previous command's output.</p> | |
<br/> | |
<p class='fragment'>A live demo is available here:<br/> <a href='http://slide-shifter.rhcloud.com'>slide-shifter.rhcloud.com</a></p> | |
</section> | |
</section> | |
<section> | |
<section> | |
<h2>Modifying your new Deck</h2> | |
<p class='fragment'> | |
There is plenty of great information about using Reveal.js in the project's <a href='http://github.com/hakimel/reveal.js'>README page on GitHub</a>. | |
</p> | |
<p class='fragment'> | |
Their <a href='http://lab.hakim.se/reveal-js/'>original slide deck sample conent</a> also contains a lot of great examples. | |
</p> | |
</section> | |
<section> | |
<h3>Local Development</h3> | |
<p class='fragment'> | |
Start up a local development server with: | |
</p> | |
<pre class='fragment'><code contenteditable>npm install | |
grunt serve</code></pre> | |
</section> | |
<section> | |
<h3>Saving your changes</h3> | |
<p class='fragment'> | |
When you're ready to deploy your new slide content to your hosted environment, save your changes with <code>git add</code> and <code>git commit</code>: | |
</p> | |
<pre class='fragment'><code contenteditable>git add index.html | |
git commit -m 'adding my own deck of Revealjs slides'</code></pre> | |
</section> | |
<section data-transition='linear'> | |
<h3>Pushing to OpenShift</h3> | |
<p class='fragment'>Then, deploy your changes to the cloud with: | |
</p> | |
<pre class='fragment'><code contenteditable>git push</code></pre> | |
</section> | |
</section> | |
<section data-transition='concave'> | |
<section> | |
<h2>Broadcasting Your Slide Transitions</h2><h1 class='fragment grow'>with Socket.IO</h1> | |
<pi class='fragment'>Now that your custom slide content is available on the web, check your server logs for follow-up info on how to configure your presentation device: | |
</p> | |
<pre class='fragment'><code contenteditable>rhc tail revealjs</code></pre> | |
</section> | |
<section data-transition='concave'> | |
<p>The Hosted plugin for Reveal.js will automatically generate a new random secret key,<br/><span class='fragment'>and print sample configuration information to the log:</span></p><br/> | |
<pre class='fragment'><code contenteditable>Tell OpenShift to save this broadcast token and publish it as an environment variable: | |
rhc env set REVEAL_SOCKET_SECRET=13970277424997223296 -a revealjs | |
rhc app restart revealjs | |
Then, configure your browser as a presentation device by loading the following URL: | |
http://revealjs-ryanj.rhcloud.com/?setToken=13970277424997223296</code></pre><br/> | |
<p><span class='fragment'>Use <code contenteditable>rhc tail revealjs</code> to fetch a fresh random secret key for your deck, or make up your own secret keyphrase - </span><br/><span class='fragment'>just be sure to use the same value on the server as you do in your presentation device.</span></p> | |
</section> | |
<section data-transition='concave'> | |
<p><span clas='fragment'>After following the instructions in the log,</span><br/><span class='fragment'>any slide transitions that take place on your presentation device will automatically be relayed out to any web browsers that are currently viewing your OpenShift-hosted slide deck!</span></p> | |
</section> | |
<section data-transition='zoom' data-background-transition='zoom'> | |
<p>Be sure to use two different devices or brower types when testing your broadcasting relay<br/> <span class='fragment'>(FireFox vs. Chrome, desktop vs. mobile, etc.)</span></p> <br/> | |
<p><span class='fragment'>Additional details on using the <code>hosted</code> plugin for Reveal.js<br/> are available in this post:</span><br/> <br/><span class='fragment'><a href='https://www.openshift.com/blogs/broadcast-your-slideshow-presentations-with-socketio-and-revealjs'>Broadcasting your slideshow presentations<br/> with Socket.io and Reveal.js</a></span></p> | |
</section> | |
</section> | |
<section> | |
<h2>Works in Mobile Safari</h2> | |
<p> | |
Try it out! You can swipe through the slides and pinch your way to the overview. | |
</p> | |
</section> | |
<section data-markdown> | |
<script type="text/template"> | |
## Markdown support | |
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown). | |
``` | |
<section data-markdown> | |
## Markdown support | |
For those of you who like that sort of thing. | |
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown). | |
</section> | |
``` | |
</script> | |
</section> | |
<section id="transitions"> | |
<h2>Transition Styles</h2> | |
<p> | |
You can select from different transitions, like: <br> | |
<a href="?transition=cube#/transitions">Cube</a> - | |
<a href="?transition=page#/transitions">Page</a> - | |
<a href="?transition=concave#/transitions">Concave</a> - | |
<a href="?transition=zoom#/transitions">Zoom</a> - | |
<a href="?transition=linear#/transitions">Linear</a> - | |
<a href="?transition=fade#/transitions">Fade</a> - | |
<a href="?transition=none#/transitions">None</a> - | |
<a href="?#/transitions">Default</a> | |
</p> | |
</section> | |
<section id="themes"> | |
<h2>Themes</h2> | |
<p> | |
Reveal.js comes with a few themes built in: <br> | |
<a href="?#/themes">Default</a> - | |
<a href="?theme=sky#/themes">Sky</a> - | |
<a href="?theme=beige#/themes">Beige</a> - | |
<a href="?theme=simple#/themes">Simple</a> - | |
<a href="?theme=serif#/themes">Serif</a> - | |
<a href="?theme=night#/themes">Night</a> <br> | |
<a href="?theme=moon#/themes">Moon</a> - | |
<a href="?theme=solarized#/themes">Solarized</a> | |
</p> | |
<p> | |
<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> | |
</p> | |
</section> | |
<section> | |
<h2>Global State</h2> | |
<p> | |
Set <code>data-state="something"</code> on a slide and <code>"something"</code> | |
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. | |
</p> | |
</section> | |
<section data-state="customevent"> | |
<h2>Custom Events</h2> | |
<p> | |
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name. | |
</p> | |
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;"> | |
Reveal.addEventListener( 'customevent', function() { | |
console.log( '"customevent" has fired' ); | |
} ); | |
</code></pre> | |
</section> | |
<section> | |
<section data-background="#007777"> | |
<h2>Slide Backgrounds</h2> | |
<p> | |
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported. | |
</p> | |
<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> | |
</section> | |
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"> | |
<h2>Image Backgrounds</h2> | |
<pre><code><section data-background="image.png"></code></pre> | |
</section> | |
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px"> | |
<h2>Repeated Image Backgrounds</h2> | |
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> | |
</section> | |
</section> | |
<section data-transition="linear" data-background="#4d7e65" data-background-transition="slide"> | |
<h2>Background Transitions</h2> | |
<p> | |
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade. | |
</p> | |
</section> | |
<section data-transition="linear" data-background="#8c4738" data-background-transition="slide"> | |
<h2>Background Transition Override</h2> | |
<p> | |
You can override background transitions per slide by using <code>data-background-transition="slide"</code>. | |
</p> | |
</section> | |
<section> | |
<h2>Clever Quotes</h2> | |
<p> | |
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> | |
“The nice thing about standards is that there are so many to choose from”</q> and block: | |
</p> | |
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"> | |
“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.” | |
</blockquote> | |
</section> | |
<section> | |
<h2>Pretty Code</h2> | |
<pre><code data-trim contenteditable> | |
function linkify( selector ) { | |
if( supports3DTransforms ) { | |
var nodes = document.querySelectorAll( selector ); | |
for( var i = 0, len = nodes.length; i < len; i++ ) { | |
var node = nodes[i]; | |
if( !node.className ) { | |
node.className += ' roll'; | |
} | |
} | |
} | |
} | |
</code></pre> | |
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> | |
</section> | |
<section> | |
<h2>Intergalactic Interconnections</h2> | |
<p> | |
You can link between slides internally, | |
<a href="#/2/3">like this</a>. | |
</p> | |
</section> | |
<section> | |
<section id="fragments"> | |
<h2>Fragmented Views</h2> | |
<p>Hit the next arrow...</p> | |
<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> | |
</section> | |
<section> | |
<h2>Fragment Styles</h2> | |
<p>There's a few styles of fragments, like:</p> | |
<p class="fragment grow">grow</p> | |
<p class="fragment shrink">shrink</p> | |
<p class="fragment roll-in">roll-in</p> | |
<p class="fragment fade-out">fade-out</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> | |
<p class="fragment current-visible">current-visible</p> | |
<p class="fragment highlight-current-blue">highlight-current-blue</p> | |
</section> | |
</section> | |
<section> | |
<h2>Spectacular image!</h2> | |
<a class="image" href="http://lab.hakim.se/meny/" target="_blank"> | |
<img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> | |
</a> | |
</section> | |
<section> | |
<h2>Export to PDF</h2> | |
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p> | |
<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> | |
</section> | |
<section> | |
<h2>Take a Moment</h2> | |
<p> | |
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. | |
</p> | |
</section> | |
<section> | |
<h2>Stellar Links</h2> | |
<ul> | |
<li><a href="http://slid.es">Try the online editor</a></li> | |
<li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li> | |
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li> | |
</ul> | |
</section> | |
<section> | |
<h1>THE END</h1> | |
<h3>Revaljs by Hakim El Hattab / hakim.se</h3> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment