Operational Dynamics
Technology, Strategy, and IT Operations Consulting   |   Open Source Research and Development   |   Blogs

Projection:
Usage

1. Put slides in individual .html files

1 <section>
2 
3     <!-- your HTML here -->
4 
5 </section>

Each slide must be in it's own file. The convention we recommend is to put them in the slides/ directory under the root of your presentation; we will follow that convention for the rest of this document.

2. List the slides

Make a list of the slides, in order, and put it in list.txt:

1 slides/Introduction.html
2 slides/VisualExample1.html
3 slides/VisualExample2.html
4 slides/TheEnd.html

The files are relative to the location of the presentation master.

It might be tempting to call your slides 01_Introduction.html and 02_VisualExample1.html. While this will indeed order them in the slides/ directory, I strongly recommend against doing this; you'll be in for a nightmare if you later want to insert or rearrange the slides.

3. Create presentation master

Put the HTML code that loads the JavaScript and CSS that powers the presentation in a single file at the root directory. I use a name that relates to the title of the presentation, for example DidntTeachYouInSchool.html for the talk titled "What they didn't teach you in school: The tools and techniques needed to actually contribte to an open source project":

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <meta http-equiv="Content-Language" content="en">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 7 
 8 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
 9 
10 <script src="engine/projection.js" type="text/javascript"></script>
11 <link rel="stylesheet" href="engine/style.css">
12 <link rel="stylesheet" href="themes/style.css">
13 
14 <title>What they didn't teach you in school</title>
15 </head>
16 
17 <body>
18 
19 <div class="deck">
20     <!-- Slide content will be inserted here -->
21 </div>
22 
23 </body>
24 </html>

4. Include presentation engine files

The presentation master, whatever you've called it, needs to load jQuery, then the Projection engine itself and the CSS styles that make the magic happen, and then any additional stylesheets you might want to theme your slides. You need:

engine/projection.js
engine/style.css
engine/full.css
engine/list.css
engine/single.css

which you can download directly, or get via Git by forking the project from GitHub. Copy them into your tree, and you should then be able to load your presentation in a browser.

Please do copy these files into your presentation locally. GitHub has been making a point lately that they are not a CDN. But more than that, we are not doing "releases"; future versions of this code may do things differently and you don't want your presentation to break just because we changed something.

Next: Writing slides, Previous: Background, Up: Overview.


These documents copyright © 2013 Operational Dynamics Consulting, Pty Ltd unless otherwise noted. Copyright of work by other authors is retained by those authors. Most material in this site is made available under an Open Source or Open Content licence; see the top level LICENCE file in that project's source repository for details

Files on this site (notably program code) will be delivered as Content-Type: text/plain unless syntax-highlighted or binary. All times UTC