Mercurial > hg > Papers > 2015 > taiki-master

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Slide Show (S9) 10-Minute Tutorial</title>


<style>
html, body { margin: 0; padding: 0; }

body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

a:link, a:visited { color: black; }

h1 { font-size: 30pt;  }
h2 { font-size: 28pt;  }
h3 { font-size: 25pt;  }
p, li, dt, dd, td, th { font-size: 18pt; }

pre { font-size: 14pt;  }
pre.small { font-size: 11pt; }

pre.code {
        background-color: azure;
        padding: 5px;
      }

ul { list-style-type: square; }

.center { text-align: center; }

.slide { page-break-after: always;
         min-height: 100mm;
         padding: 40px;

         border: 1px dotted black;

/*
  background: -moz-linear-gradient( top, maroon, red);
*/
       }


/*
for princexml (CSS3 paged media support)
@page { size: A4 landscape }
*/
</style>

</head>
<body>

<div class="presentation">

<div class='slide '>
<!-- === begin markdown block ===

      generated by markdown 1.1.1 on Ruby 2.0.0 (2014-02-24) [universal.x86_64-darwin13]
                on 2014-04-30 20:49:38 +0900 with Markdown engine kramdown (1.3.3)
                  using options {}
  -->

<!-- _S9SLIDE_ -->
<h1 id="slide-show-s9-10-minute-tutorial">Slide Show (S9) 10-Minute Tutorial</h1>

<p>Agenda</p>

<ul>
  <li>What’s Slide Show (S9)? </li>
  <li>Wiki-Style Markup Language - Markdown, Textile</li>
  <li>How it works - Just press F11! </li>
  <li>What’s S5? What’s S6?</li>
  <li>Gradient Themes Using “Loss-Free” Vector Graphics in S9 </li>
  <li>Turn Your Online Wiki Pages into Slide Shows - Sputnik Case Study</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="whats-slide-show-s9">What’s Slide Show (S9)?</h1>

<h3 id="what">What?</h3>

<p>A Free Web Alternative to PowerPoint and KeyNote in Ruby</p>

<h3 id="getting-started-in-1-2-3-easy-steps">Getting Started in 1-2-3 Easy Steps</h3>

<ul>
  <li>Step 1: Author your slides in plain text using a wiki-style markup language</li>
  <li>Step 2: Generate your slide show using the <code>slideshow</code> gem</li>
  <li>Step 3: Open up your slide show in your browser and hit the space bar to flip through your slides</li>
  <li>That’s it. Showtime!</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="wiki-style-markup-language---markdown">Wiki-Style Markup Language - Markdown</h1>

<p>Lets you create slide shows and author slides in plain text
using a wiki-style markup language that’s easy-to-write and easy-to-read.
Sample:</p>

<pre><code>What's Slide Show (S9)?
=======================

### What?

A Free Web Alternative to PowerPoint and KeyNote in Ruby

### Getting Started in 1-2-3 Easy Steps

- Step 1: Author your slides in plain text using a wiki-style markup language
- Step 2: Generate your slide show using the `slideshow` gem
- Step 3: Open up your slide show in your browser
- That's it. Showtime!
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="how-it-works---just-press-f11">How it works - Just press F11!</h1>

<p>The Slide Show (S9) Ruby gem turns your slides in plain text into a web page
that’s an all-in-one-page handout and a live slide show all at once.</p>

<pre><code>$ slideshow tutorial

=&gt; Preparing slide show 'tutorial.html'...
=&gt; Done.
</code></pre>

<p>Turn your web page into a slide show and your browser into full screen projection
with a single push button (F11).  Hit the space bar or the right arrow, down arrow
or page down key to flip through your slides.</p>

<p>That’s all. It’s that simple.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="slide-show-s9-template-pack-options">Slide Show (S9) Template Pack Options</h1>

<h3 id="whats-s5">What’s S5?</h3>

<p>Simple Standards-based Slide Show System (S5) -Eric Meyer’s (of CSS fame) public domain (free, open source) slide show package inspired by Opera Show and others
that works in all modern browsers (without any plugin required
because it includes its own slide show machinery in JavaScript).</p>

<p>(Use the <code>s5blank</code> or <code>s5themes</code> template pack to create S5 slide shows.)</p>

<h3 id="whats-s6">What’s S6?</h3>

<p>S6 started as a rewrite of Eric Meyer’s S5 using the jQuery JavaScript library – offering easier to understand and easier to extend code. Add plugins, effects and more. Contributions welcome!</p>

<p>(Use the <code>s6blank</code> or <code>s6syntax</code> template pack to create S6 slide shows.)</p>

<h3 id="whats-slidy-whats-slippy-whats-google-html5-slides">What’s Slidy? What’s Slippy? What’s Google HTML5 Slides?</h3>

<p>Check the <a href="http://slideshow.rubyforge.org/templates.html">Slide Show Template Gallery</a>
for more template packs and samples.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gradient-themes-using-loss-free-vector-graphics-in-s9">Gradient Themes Using “Loss-Free” Vector Graphics in S9</h1>

<h3 id="css3-background-gradients">CSS3 Background Gradients</h3>

<p>Using modern browser such as Firefox (3.6+), Chrome and Safari you can
now theme your slide shows using using “loss-free” vector
graphics in plain old CSS. Thanks to gradient support in backgrounds in CSS3.</p>

<p>For example, the linear gradient from top to bottom with four color is defined
in CSS3 as:</p>

<pre><code>.gradient_yellow_orange {

  background: -webkit-gradient(linear, 0% 0%, 0% 100%,
                 from(yellow), to(orange),
                 color-stop(0.33,orange), color-stop(0.66,yellow));

  background: -moz-linear-gradient(top, yellow, orange, yellow, orange);
}
</code></pre>

<p>Using Slide Show (S9) you can use the <code>gradient</code> helper that
generates the CSS3 for you:</p>

<pre><code>{{ gradient yellow orange yellow orange }}
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="turn-your-online-wiki-pages-into-slide-shows---sputnik-case-study">Turn Your Online Wiki Pages into Slide Shows - Sputnik Case Study</h1>

<p>Inspired by the Slide Show (S9) Ruby gem - Yuri Takhteyev has
added S9-style slide shows
to <a href="http://sputnik.freewisdom.org/en/Slideshow_Demo">Sputnik</a> - a wiki in Lua.</p>

<p>Lets you author slide shows online in your browser.
It’s - surprise, surpise - a wiki and, thus, lets you
 work togther with others on a slide show,
track changes and versions, link and get linked, and much much more.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="thanks---learn-more---questions-comments">Thanks - Learn More - Questions? Comments?</h1>

<p>Gerald Bauer designed and developed the Slide Show (S9) Ruby gem.
Find out more @ <a href="http://slideshow.rubyforge.org"><code>slideshow.rubyforge.org</code></a></p>

<p>Questions? Comments? Send them along
to the <a href="http://groups.google.com/group/webslideshow">Free Web Slide Show Alternatives - S5, S6, S9 And Friends - Forum/Mailing List</a>.
Thanks!</p>
<!-- === end markdown block === -->
</div>


  </div> <!-- presentation -->
</body>
</html>
author	taiki
date	Wed, 18 Feb 2015 01:22:47 +0900
parents
children