Slidy for Presentations

R. Alexander Miłowski

milowski@ischool.berkeley.edu

School of Information, UC Berkeley

Steps to Slidy

Copy the essential files (slidy.js, slidy.css, theme.css).
Create a single HTML document that includes these resources.
Add some number slides as div/@class="slide" to the document.

#1 The Essential Files

Clone: https://github.com/alexmilowski/iolab.git

Look in examples/slidy and copy all you see to your directory.

You can find the iSchool logo here.

#2 The HTML Document

Save this as presentation.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Slidy for Presentations</title>
      <meta name="copyright" content="Copyright &#169; 2014 Jane Q. Smith"/>
      <meta name="holder" content="Jane Q. Smith"/>
      <meta name="creator" content="Jane Q. Smith"/>
      <meta name="pubdate" content="2014-09-01"/>
      <link rel="stylesheet" type="text/css" href="slidy/slidy.css"/>
      <link rel="stylesheet" type="text/css" href="slidy/theme.css" />
      <script type="text/javascript" src="slidy/slidy.js"/>
      <script type="text/javascript">w3c_slidy.mouse_click_enabled = false;</script>
   </head>
   <body>
      <div class="background">   
         <header><img class="logo" src="ischool-logo.png"/></header>
         <footer>
            <p><a href="http://ischoool.berkeley.edu/" target="new">School of Information, UC Berkeley</a></p>
         </footer>
      </div>
      <div class="slide cover title">
         <hgroup>
            <h1>Slidy for Presentations</h1>
         </hgroup>
         <div class="author">
            <p><a href="http://www.milowski.com/" rel="name">R. Alexander Miłowski</a></p>
            <p><a href="mailto:milowski@ischool.berkeley.edu" rel="email">milowski@ischool.berkeley.edu</a></p>
            <p>School of Information, UC Berkeley</p>
         </div>
      </div>
      <div class="slide">  
         <h1>My First Slide</h1>
      ...
      </div>
   </body>
</html>

#3 Have at it!

Every slide must have a class="slide" attribute.
Add a class="incremental" for incremental display.
Feel free to add your own stylesheet if you need to do so.

For two-column slides, add a div wrapper on the slide with class="two-column":

<div class="slide">
   <h1>Two Columns</h1>
   <div class="two-column">
      <img src="fluffy-the-cat.png"/>
      <div>
         <p>Fluffy is my cat.</p>
         <p>He eats mice.</p>
      </div>
   </div>
</div>

Send me the HTML!

To present your pitch, just send me the HTML document and I'll merge! ...or use github.