-
-
Save gshipley/4b79205dbb908b86adf3 to your computer and use it in GitHub Desktop.
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='linear'> | |
</section> | |
<section data-transition='concave'> | |
<section data-transition='concave'> | |
<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> | |
<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> | |
<h2>Tips on using Reveal.js</h2> | |
<p class='fragment'>There is a lot 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> | |
<section> | |
<section> | |
<h3>Host your own themed slideshow index with Docker</h3> | |
<p class='fragment'>Start up a local development server on port 8080:</p> | |
<pre class='fragment'><code contenteditable>docker run ryanj/gist-reveal.it</code></pre> | |
<p class='fragment'>For production, I like to daemonize the process, configure a default gist_id, and make the container available on port 80:</p> | |
<pre class='fragment'><code contenteditable>docker run -d -p 80:8080 -e "DEFAULT_GIST=af84d40e58c5c2a908dd" ryanj/gist-reveal.it</code></pre> | |
</section> | |
<section> | |
<h3>GITHUB API RATE LIMITS</h3> | |
<p class='fragment'>Include your own GitHub application keys if you plan on making more than 60 requests in 2 hours:</p> | |
<pre class='fragment'><code contenteditable>docker run -e "GH_CLIENT_SECRET=11becbb840e0ff7414b19104e9e797556498fc3f" -e "GH_CLIENT_ID=639ffe9fd9dcc4f6eb4b" ryanj/gist-reveal.it</code></pre> | |
</section> | |
<section> | |
<h3>Built-in Analytics</h3> | |
<p class='fragment'>Include your own GA-TRACKER key:</p> | |
<pre class='fragment'><code contenteditable>docker run -e "GA_TRACKER=UA-12345678" ryanj/gist-reveal.it</code></pre> | |
</section> | |
<section id='openshift'> | |
<h3>Hosting on OpenShift</h3> | |
<p>You can launch this application on OpenShift in a single command:</p> | |
<pre class='fragment'><code contenteditable>rhc app create gistreveal nodejs-0.10 \ | |
--from code=http://github.com/ryanj/gist-reveal.it \ | |
DEFAULT_GIST=YOUR_DEFAULT_GIST_ID \ | |
GH_CLIENT_SECRET=YOUR_GH_CLIENT_SECRET \ | |
GH_CLIENT_ID=YOUR_GH_CLIENT_ID \ | |
REVEAL_SOCKET_SECRET=0P3N-S0URC3 \ | |
GA_TRACKER=YOUR_GA_TRACKER</code></pre> | |
<p class='fragment'>Or, <a href="https://openshift.redhat.com/app/console/application_types/custom?name=reveal&initial_git_url=https%3A%2F%2Fgithub.com/ryanj/gist-reveal.it.git&cartridges[]=nodejs-0.10">click here to launch on the web!</a></p> | |
<p class='fragment'>Then, use the <code>rhc env set</code> command to publish your application config and keys to the system environment.</p> | |
</section> | |
</section> | |
<section data-transition='concave'> | |
<section> | |
<h2>Broadcasting Your Slide Transitions</h2><h1 class='fragment grow'>with Socket.IO</h1> | |
<pre class='fragment'><code contenteditable>docker run -e "REVEAL_WEB_HOST=YOUR_HOSTNAME_HERE" -e "REVEAL_SOCKET_SECRET=0P3N-S0URC3" ryanj/gist-reveal.it</code></pre> | |
<p>Configure your browser as a presentation device by setting the same key in your browser's localStorage</p> | |
<pre class='fragment'><code contenteditable>localStorage.secret="YOUR_SECRET_KEY"</code></pre> | |
</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> | |
</section> | |
</section> | |
<section> | |
<h1>THE END</h1> | |
<h3>Revaljs by Hakim El Hattab / hakim.se</h3> | |
<h3><a href="http://gist-reveal.it">gist-reveal.it</a> by <a href="http://twitter.com/ryanj/">ryanj</a> and <a href="https://github.com/fkautz">fkautz</a></h3> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment