Skip to content

Instantly share code, notes, and snippets.

@laylasian

laylasian/gist-reveal.it-slides.html

Forked from ryanj/gist-reveal.it-slides.html
Created March 17, 2016 12:12
Show Gist options
  • Save laylasian/00f89e05d49c6af42f10 to your computer and use it in GitHub Desktop.
Save laylasian/00f89e05d49c6af42f10 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ryanj ryanj revised this gist Sep 18, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,7 +60,7 @@ <h3>Hosting on OpenShift</h3>
    <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</code></pre>
    <pre class='fragment'><code contenteditable>docker run -e "REVEAL_SOCKET_SECRET=0P3N-S0URC3" ryanj/gist-reveal</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>
  2. @ryanj ryanj revised this gist Sep 17, 2015. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,16 +2,16 @@
    <h2>Gist-Powered</h2>
    <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
    <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal'>github.com/ryanj/gist-reveal</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal/'>registry.hub.docker.com/u/ryanj/gist-reveal</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
    <h2>Try it out!</h2>
    <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a></p>
    <p>Or, by placing any valid Revealjs <a href="#sections">&lt;section&gt;</a> tag content into a fresh gist.</p>
    <br />
    <p class='fragment'>When you're ready to view your slides, grab your github gist id and add it to the end of this url:</p>
    <p class='fragment grow'><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    <p class='fragment grow'><a href='http://gist-reveal.it/'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    </section>
    <section data-transition='concave'>
    <section data-transition='concave'>
    @@ -29,38 +29,38 @@ <h2>Tips on using Reveal.js</h2>
    <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>
    <pre class='fragment'><code contenteditable>docker run ryanj/gist-reveal</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>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 -e "DEFAULT_GIST=af84d40e58c5c2a908dd" ryanj/gist-reveal</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>
    <pre class='fragment'><code contenteditable>docker run -e "GH_CLIENT_SECRET=11becbb840e0ff7414b19104e9e797556498fc3f" -e "GH_CLIENT_ID=639ffe9fd9dcc4f6eb4b" ryanj/gist-reveal</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>
    <pre class='fragment'><code contenteditable>docker run -e "GA_TRACKER=UA-12345678" ryanj/gist-reveal</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 \
    --from code=http://github.com/ryanj/gist-reveal \
    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'>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.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>
    <pre class='fragment'><code contenteditable>docker run -e "REVEAL_WEB_HOST=YOUR_HOSTNAME_HERE" -e "REVEAL_SOCKET_SECRET=0P3N-S0URC3" ryanj/gist-reveal</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>
    @@ -71,5 +71,5 @@ <h2>Broadcasting Your Slide Transitions</h2><h1 class='fragment grow'>with Socke
    <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>
    <h3><a href="http://gist-reveal.it">gist-reveal</a> by <a href="http://twitter.com/ryanj/">ryanj</a> and <a href="https://github.com/fkautz">fkautz</a></h3>
    </section>
  3. @ryanj ryanj revised this gist Sep 26, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -48,9 +48,10 @@ <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 \
    DEFAULT_GIST=YOUR_DEFAULT_GIST_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>
  4. @ryanj ryanj revised this gist Sep 26, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -45,13 +45,15 @@ <h3>Built-in Analytics</h3>
    </section>
    <section id='openshift'>
    <h3>Hosting on OpenShift</h3>
    <p>Or, Launch this application on OpenShift in a single command:</p>
    <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 \
    GH_CLIENT_SECRET=YOUR_GH_CLIENT_SECRET \
    GH_CLIENT_ID=YOUR_GH_CLIENT_ID \
    DEFAULT_GIST=YOUR_DEFAULT_GIST_ID \
    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'>
  5. @ryanj ryanj revised this gist Sep 26, 2014. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -43,6 +43,16 @@ <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>Or, 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 \
    GH_CLIENT_SECRET=YOUR_GH_CLIENT_SECRET \
    GH_CLIENT_ID=YOUR_GH_CLIENT_ID \
    DEFAULT_GIST=YOUR_DEFAULT_GIST_ID \
    GA_TRACKER=YOUR_GA_TRACKER</code></pre>
    </section>
    </section>
    <section data-transition='concave'>
    <section>
  6. @ryanj ryanj revised this gist Jun 17, 2014. 1 changed file with 7 additions and 2 deletions.
    9 changes: 7 additions & 2 deletions gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,13 @@ <h2>Tips on using Reveal.js</h2>
    <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, you might daemonize the process or make the container available on port 80:</p>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 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>
  7. @ryanj ryanj revised this gist Jun 17, 2014. 2 changed files with 57 additions and 76 deletions.
    76 changes: 0 additions & 76 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,76 +0,0 @@
    <section data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
    <h2>Gist-Powered</h2>

    <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</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>
    <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 data-transition='concave'>
    <section data-transition='concave'>
    <h2>Try it out!</h2>
    <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a>
    </p>
    <p>Or, by placing any valid Revealjs <a href="#sections">&lt;section&gt;</a> tag content into a fresh gist.</p>
    <br />
    <p class='fragment'>
    When you're ready to view your slides, grab your github gist id and add it to the end of this url:</p>
    <p class='fragment grow'><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    </section>
    </section>
    <section>
    <section>

    <h3>Host your own themed slideshow index with Docker</h3>
    <p class='fragment'>
    Start up a local development server with:
    </p>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 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=GA-12345678" ryanj/gist-reveal.it</code></pre>
    <br/>
    </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> <br/>
    </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>
    57 changes: 57 additions & 0 deletions gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <section data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
    <h2>Gist-Powered</h2>
    <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
    <h2>Try it out!</h2>
    <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a></p>
    <p>Or, by placing any valid Revealjs <a href="#sections">&lt;section&gt;</a> tag content into a fresh gist.</p>
    <br />
    <p class='fragment'>When you're ready to view your slides, grab your github gist id and add it to the end of this url:</p>
    <p class='fragment grow'><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    </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, you might daemonize the process or make the container available on port 80:</p>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 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>
    <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>
  8. @ryanj ryanj revised this gist Jun 11, 2014. 1 changed file with 6 additions and 226 deletions.
    232 changes: 6 additions & 226 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,9 @@
    <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>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <h2>Gist-Powered</h2>

    <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
    @@ -69,226 +68,7 @@ <h2>Broadcasting Your Slide Transitions</h2><h1 class='fragment grow'>with Socke
    <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/>
    </section>
    </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>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
    </small>
    </p>
    </section>

    <section>
    <h2>Works on Mobile</h2>
    <p>
    Try it out! You can swipe through the slides and pinch your way to the overview.
    </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>&lt;section data-background="image.png"&gt;</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;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</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">
    &ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
    </p>
    <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
    &ldquo;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.&rdquo;
    </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 &lt; 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>
    <section>
    <h1>THE END</h1>
    <h3>Revaljs by Hakim El Hattab / hakim.se</h3>
  9. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -292,5 +292,5 @@ <h2>Stellar Links</h2>
    <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 Ryan Jarvinen / <a href="http://twitter.com/ryanj/">ryanj</a></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>
  10. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ <h2>Slideshow Presentations</h2>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>Automated build available: registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
    <section data-background-transition='zoom' data-transition='linear'>
  11. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ <h2>Slideshow Presentations</h2>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>https://registry.hub.docker.com/u/ryanj/gist-reveal.it/</a></small></p>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>Automated build available: registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
    <section data-background-transition='zoom' data-transition='linear'>
  12. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,8 @@ <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>https://registry.hub.docker.com/u/ryanj/gist-reveal.it/</a>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>https://registry.hub.docker.com/u/ryanj/gist-reveal.it/</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
    <section data-background-transition='zoom' data-transition='linear'>
  13. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <a href='http://index.docker.io/ryanj/gist-reveal.it/'>ryan/gist-reveal.it</a><br/>
    <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>https://registry.hub.docker.com/u/ryanj/gist-reveal.it/</a>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
  14. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <small><a href='http://index.docker.io/ryanj/gist-reveal.it/'>ryan/gist-reveal.it</a><br/>
    <a href='http://index.docker.io/ryanj/gist-reveal.it/'>ryan/gist-reveal.it</a><br/>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
  15. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@ <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <small><a href='http://index.docker.io/ryanj/gist-reveal.it/'>ryan/gist-reveal.it</a><br/>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    </section>
    <section data-background-transition='zoom' data-transition='linear'>
  16. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,7 @@ <h2>Try it out!</h2>
    <br />
    <p class='fragment'>
    When you're ready to view your slides, grab your github gist id and add it to the end of this url:</p>
    <p><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    <p class='fragment grow'><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    </section>
    </section>
    <section>
  17. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 40 additions and 44 deletions.
    84 changes: 40 additions & 44 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,13 @@
    <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>
    <h2>Broadcasting Your</h3>
    <h1>Reveal.js</h1>
    <h2>Slideshow Presentations</h2>
    <p>on</p>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:50%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://dockercon-slides.com/'>dockercon-slides.com</a><br/>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:35%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://gist-reveal.it/'>gist-reveal.it</a><br/>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    </section>

    <section data-background-transition='zoom' data-transition='linear'>
    <section data-background-transition='zoom' data-transition='linear'>
    </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
    @@ -19,51 +17,49 @@ <h2>Presentations on the Open Web</h2>
    <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>Create your own themed slideshow deck</h3>
    <p>
    In order create your own slideshow content, just fork a copy of <a href='https://gist.github.com/ryanj/7ebf56442930b4c2188b'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/7ebf56442930b4c2188b'>https://gist.github.com/ryanj/7ebf56442930b4c2188b</a>
    </p>
    </section>
    </section>
    <section data-transition='concave'>
    <section data-transition='concave'>
    <h2>Try it out!</h2>
    <p class='fragment'>
    Edit your slides on GitHub, then paste your resulting github GIST id to the end of this url to view:</p>
    <p><a href='http://dockercon-slides.com'>http://dockercon-slides.com/YOUR_GIST_ID_HERE</a></p>
    </section>
    </section>
    <section>
    </section>
    <section>
    <h2>Tips on using Reveal.js</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>.
    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>
    <section data-transition='concave'>
    <section data-transition='concave'>
    <h2>Try it out!</h2>
    <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a>
    </p>
    <p>Or, by placing any valid Revealjs <a href="#sections">&lt;section&gt;</a> tag content into a fresh gist.</p>
    <br />
    <p class='fragment'>
    When you're ready to view your slides, grab your github gist id and add it to the end of this url:</p>
    <p><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
    </section>
    </section>
    <section>
    <section>

    <h3>Host your own themed slideshow index with Docker</h3>
    <p class='fragment'>
    Start up a local development server with:
    </p>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 ryanj/gist-reveal.it</code></pre>
    </section>
    <section>
    </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=GA-12345678" ryanj/gist-reveal.it</code></pre>
    <br/>
    </section>

    </section>
    <section data-transition='concave'>
    <section>
    </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>
    @@ -73,14 +69,7 @@ <h2>Broadcasting Your Slide Transitions</h2><h1 class='fragment grow'>with Socke
    <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/>
    </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
    @@ -133,6 +122,13 @@ <h2>Themes</h2>
    </p>
    </section>

    <section>
    <h2>Works on Mobile</h2>
    <p>
    Try it out! You can swipe through the slides and pinch your way to the overview.
    </p>
    </section>

    <section>
    <h2>Global State</h2>
    <p>
  18. @ryanj ryanj revised this gist Jun 10, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -295,4 +295,5 @@ <h2>Stellar Links</h2>
    <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 Ryan Jarvinen / <a href="http://twitter.com/ryanj/">ryanj</a></h3>
    </section>
  19. @ryanj ryanj revised this gist Jun 9, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ <h2>Slideshow Presentations</h2>
    <p>on</p>
    <img style="disply:block;border:none;background:none;box-shadow:none;width:50%;" alt='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://dockercon-slides.com/'>dockercon-slides.com</a><br/>
    <a href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    <a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a></small></p>
    </section>

    <section data-background-transition='zoom' data-transition='linear'>
  20. @ryanj ryanj revised this gist Jun 9, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,6 @@
    <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='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://dockercon-slides.com/'>dockercon-slides.com</a><br/>
  21. @ryanj ryanj created this gist Jun 9, 2014.
    299 changes: 299 additions & 0 deletions default-gist-reveal.it-slides.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,299 @@
    <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='Docker-logo' src='https://gist.github.com/ryanj/7ebf56442930b4c2188b/raw/6a6e03247efb03a0eee24a12f7beaf1ab4634563/Docker-whale.png'/>
    <p class='fragment'><small><a href='http://dockercon-slides.com/'>dockercon-slides.com</a><br/>
    <a href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</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>Create your own themed slideshow deck</h3>
    <p>
    In order create your own slideshow content, just fork a copy of <a href='https://gist.github.com/ryanj/7ebf56442930b4c2188b'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/7ebf56442930b4c2188b'>https://gist.github.com/ryanj/7ebf56442930b4c2188b</a>
    </p>
    </section>
    </section>
    <section data-transition='concave'>
    <section data-transition='concave'>
    <h2>Try it out!</h2>
    <p class='fragment'>
    Edit your slides on GitHub, then paste your resulting github GIST id to the end of this url to view:</p>
    <p><a href='http://dockercon-slides.com'>http://dockercon-slides.com/YOUR_GIST_ID_HERE</a></p>
    </section>
    </section>
    <section>
    <h2>Tips on using Reveal.js</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>Host your own themed slideshow index with Docker</h3>
    <p class='fragment'>
    Start up a local development server with:
    </p>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 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=GA-12345678" ryanj/gist-reveal.it</code></pre>
    <br/>
    </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> <br/>
    </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>&lt;head&gt;</code> using a <code>&lt;link&gt;</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>&lt;section data-background="image.png"&gt;</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;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</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">
    &ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
    </p>
    <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
    &ldquo;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.&rdquo;
    </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 &lt; 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>