How to prepare your page for an HTML5 presentation
To turn your CMS Page into a presentation, you can:
- either create or modify the HTML of your page manually using a few elements recognized by the RevealJS Presentation Framework,
- or make a presentation with a third party tool
Modifying the HTML content manually
Each slide in the presentation is represented by HTML content within a <section/> element. When you place a <section/> within another <section/> element (two-level), you thus make nested slides that the user can view by pressing the up and down buttons.
The <section/> elements should be placed in the <div class="slides"> element, which, in turn, - in <div class="reveal">.
- In the "Content" perspective, edit a page, the content of which you want to turn into a presentation.
- Change its layout template to "HolisticWare.Layout.Presentations.RevealJS".
- Switch to Code mode.
- Split the HTML content into slides by wrapping them with
<section/> elements. Nest <section> elements in other <section/> elements where necessary. - Wrap all the content split by
<section/> elements with <div class="reveal"><div class="slides"></div></div>. - Save and publish the page.
See the HTML code example at the bottom of this page.
Using a third-party tool to create presentations
You can use the tool by http://slid.es to create your presentation, then export it and paste on a page.
Note: The presentation you create at http://slid.es is public. To make it private, you should purchase their "Pro" version. Alternatively, you can make your presentation manually as described above.
- Go to http://slid.es and log in. You can use your Google or Facebook account.
- Create a deck and add slides to it. (The '+' button to the right adds another "horizontal" slide, the '+' button at the bottom adds another "vertical" slide.)
- Save your presentation on the http://slid.es server.
- Export the presentation and copy the markup from the edit box. Please note that the original markup is not XHTML but HTML-based. You may need to correct that by using
<br/> instead of <br> etc.
Now in the CMS Console:
- In the "Content" perspective, create a page.
- Change its layout template to "HolisticWare.Layout.Presentations.
- Switch to Code mode.
- Within
<body></body>, add <div class="reveal"></div>. - Then within
<div class="reveal"></div>, add the presentation's markup exported from http://slid.es. - Save and publish the page.
Now you can view the presentation in your browser.
HTML code example
Expand code<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3>
<p><small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></p>
</section>
<section>
<h2>Heads Up</h2>
<p>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.</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> <!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>Slides can be nested inside of other slides, try pressing <a href="#" class="navigate-down">down</a>.</p>
<a href="#" class="image navigate-down"><img src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow" height="238" width="178" /></a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Press down or up to navigate.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>Cornify</p>
<a class="test" href="http://cornify.com"><img src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn" height="326" width="280" /></a>
</section>
<section>
<h2>Basement Level 3</h2>
<p>That's it, time to go back up.</p>
<a href="#/2" class="image"><img src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);" height="238" width="178" /></a>
</section>
</section>
<section>
<h2>Point of View</h2>
<p>Press <strong>ESC</strong> to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.</p>
</section>
<section>
<h2>rvl.io</h2>
<p>If you don't like writing slides in HTML you can use the online editor <a href="http://www.rvl.io" target="_blank">rvl.io</a>.</p>
</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>
<h2>Marvelous Unordered List</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
<section>
<h2>Fantastic Ordered List</h2>
<ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>
</section>
<section>
<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="?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> - <a href="?#/themes">Default</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>
<section data-state="alert">
<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>
<a href="#" class="image navigate-down"><img src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow" height="238" width="178" /></a>
</section>
<section data-state="blackout">
<h2>"blackout"</h2>
<a href="#" class="image navigate-down"><img src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow" height="238" width="178" /></a>
</section>
<section data-state="soothe">
<h2>"soothe"</h2>
<a href="#" class="image navigate-next"><img src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);" height="238" width="178" /></a>
</section>
</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 style="font-size: 18px; margin-top: 20px;">Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
</code>
</pre>
</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>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>
<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>
</section>
</section>
<section>
<h2>Spectacular image!</h2>
<a class="image" href="http://lab.hakim.se/meny/" target="_blank"><img src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny" height="299" width="320" /></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 width="455" height="356" id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" 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="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
<li><a href="http://hakim.se/projects/reveal-js">Leave feedback on my site</a></li>
<li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
</ul>
</section>
<section>
<h2>It's free</h2>
<p>reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below. Donations will go towards hosting and domain costs.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="cmd" value="_donations" type="hidden" /> <input name="business" value="hakim.elhattab@gmail.com" type="hidden" /> <input name="lc" value="US" type="hidden" /> <input name="item_name" value="reveal.js / rvl.io" type="hidden" /> <input name="no_note" value="0" type="hidden" /> <input name="currency_code" value="USD" type="hidden" /> <input name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest" type="hidden" /> <input src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image" /></form>
</section>
<section>
<h1>THE END</h1>
<h3>BY Hakim El Hattab / hakim.se</h3>
</section>
</div>
</div>
</body>
</html> 
RevealJS