{slidyimport}
{
	 "title" : "SliNKi = Slidy + WiNK",
	 "css" : "
	 				body { background-color: white; }
	 				div.slide h1 { color : #555555; }
	 				{request}res:/res/slidy/demo/css{/request}
	 ",
	 "copyright" : "© 2010 Peter Rodgers, Brian Sletten",
	 "favicon": "http://www.w3.org/Talks/Tools/Slidy2/graphics/icon-blue.png",
	 "duration" : "5",
	 "splash" : "{request}meta:demo:splash{/request}",
	"splashDuration": "7000"
}
{/slidyimport}

{request}meta:demo:background{/request}

{slidy+class@title}
{html}
<h1 style=" margin-top: -25px;">Sl<span style="color:red;">i</span>NKi =  Slidy + {request}meta:wink:logo{/request}</h1>
{/html}

This is a set of slides showing the [http://www.w3.org/Talks/Tools/Slidy2/|Slidy] macro extensions for {request}meta:wink:logo{/request}
 
<span style="font-size: 150%">{request}meta:wink:logo{/request}</span> is...

*a resource oriented Wiki application for [http:/www.1060research.com/netkernel/|NetKernel]
*available for install from the [http://docs.netkernel.org/book/view/book:readme/#Installing_Software_on_the_NetKernel_Platform|NetKernel repositories] using Apposite
*a recursive wiki markup runtime.
*extensible with hot installable macros

{/slidy}

{slidy}
=Wiki Slides=

Combining {request}meta:wink:logo{/request} with Slidy allows you to create presentations using Wiki markup.  You can make any wiki page into a Slidy presentation
with the following steps...

#Add a <span>{</span>slidyimport} statement at the top of your wiki document - this uses a JSON array to set up the page with the slidy scripts etc.
#Define a slide with a <span>{</span>slidy} tag.
#Write wiki inside the <span>{</span>slidy} tag.
#Create as many slides as you need all in the one wiki page.

The next slide shows an example...

{/slidy}

{slidy}
=WiNK Slidy Example=

Here's an example of a Slidy wiki page with two slides...

{html}
<pre>
&#123;slidyimport}
	{	"title": "Slidy Demo",
		"css" : "body: white;",
		"copyright": "blah blah bah",
	}
&#123;/slidyimport}

&#123;slidy}
=Hello=

Some text

*Bullet list
&#123;/slidy}

&#123;slidy}
=Second Slide=

Something else
&#123;/slidy}
</pre>
{/html}
<div style="margin-left: 600px;">Which looks like this...</div> 
{/slidy}

{slidy+class@example}
=Hello=

Some text

*Bullet list
{/slidy}

{slidy+class@example}
=Second Slide=

Something else

{/slidy}

{slidy}
=Features=

The following slides show the other features that are available...

==Source==

For reference the wiki source for these slides is [http:/wink/res/slidy/demo/content/demo.txt|here].


{/slidy}

{slidy}
=Incremental Reveal=
#Some numbered bullets
#Item 2

Below are some incremental bullets
{incremental}
*Some more bullets
*Another bullet
{/incremental}

Use the <span>{</span>incremental} tag to mark content for progressive reveal.

{html}
<pre>
&#123;incremental}
*Some more bullets
*Another bullet
&#123;/incremental}
</pre>
{/html}



{/slidy}

{slidy}
=Resource Oriented Requests=

Supports ROC requests with <span>{</span>request} tag
*Simple request syntax
{html}
<pre style="font-size: 60%">
&#123;request}res:/some/thing&#123;/request}
</pre>
{/html}

*Full [http://docs.netkernel.org/book/view/book:guide:logicalreference/doc:logicalreference:module:standard:logical:declarative:request:syntax|declarative request] syntax

{html}
<pre style="font-size: 50%">
&#123;request}
&#60;request>
&#60;identifier>active:groovy&#60;/identifier>
&#60;argument name="operator">res:/myscript.gy&#60;/argument>
&#60;/request>
&#123;/request}
</pre>
{/html}

Below is a dynamic inline groovy script showing the current time...

{request}
<request>
<identifier>active:groovy</identifier>
<argument name="operator">
<script>
<![CDATA[
d=new Date();
resp=context.createResponseFrom(
	"Time now: $d".toString()
	);
resp.setExpiry(resp.EXPIRY_ALWAYS);
]]>
</script>
</argument>
</request>
{/request}

{/slidy}


{slidy}
=Self Referencing Links=

Since this is just a Wiki you can create links within the presentation

*Here is a link back to the [#(2)|second slide]
*Which is this wiki markup...

{html}
<pre>
Here is a link back to the [#(2)|second slide]
</pre>
{/html}


{/slidy}

{slidy}
=Images - SVG=

Here is an external referenced SVG using the <span>{</span>svg} tag

{svg}res:/res/slidy/demo/img/circles.svg{/svg}

Example:

{html}
<pre>
&#123;svg}res:/slidy/demo/img/circles.svg&#123;/svg}
</pre>
{/html}

Here is a literal inline SVG using the <span>{</span>svgliteral} tag

{svgliteral}
<svg xmlns="http://www.w3.org/2000/svg" width="5cm" height="4cm">
  <g transform="scale(0.3)">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
  </g>
  </g>
</svg>
{/svgliteral}

{/slidy}

{slidy}
=Images - Bitmap=

Here is a bitmap using the <span>{</span>image} tag

{image}/wink/res/slidy/demo/img/glassfrog.jpg{/image}

Example:

{html}
<pre>
&#123;image}wink/res/slidy/demo/img/glassfrog.jpg&#123;/image}
</pre>
{/html}

{/slidy}

{slidy}
=POH - Plain Old HTML=

Use the <span>{</span>html} tag for plain old HTML

{html}
<textarea id="textarea" name="text" style="width: 300px; height: 150px;">
This is a plain old html editable textarea...

But it uses HTML5 persistent storage - try an edit, hit save then refresh this presentation.
</textarea>
<input type="submit" value="Save" onclick="save()"/>
<script type="text/javascript">
<!--
function save()
{
  window.localStorage['value'] = $("#textarea").value;
  alert("Changes Saved");
 }

$(document).ready(function()
	{
		$("#textarea").value = window.localStorage['value'];
	}
);
-->
</script>
{/html}

Here's an example of how the <span>{</span>html} tag can be used to include the [http://vis.stanford.edu/protovis/|Protovis] Javascript Visualization Library...

{html}
<script type="text/javascript" src="/wink/res/slidy/demo/script/protovis-r3.2.js">_</script>
<div>
    <script type="text/javascript+protovis">
<!--
var data = pv.range(0, 10, .1).map(function(x) {
    return {x: x, y: Math.sin(x) + Math.random() * .5 + 2};
  });

/* Sizing and scales. */
var w = 400,
    h = 200,
    x = pv.Scale.linear(data, function(d) d.x).range(0, w),
    y = pv.Scale.linear(0, 4).range(0, h);

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(20)
    .left(20)
    .right(10)
    .top(5);

/* Y-axis and ticks. */
vis.add(pv.Rule)
    .data(y.ticks(5))
    .bottom(y)
    .strokeStyle(function(d) d ? "#eee" : "#000")
  .anchor("left").add(pv.Label)
    .text(y.tickFormat);

/* X-axis and ticks. */
vis.add(pv.Rule)
    .data(x.ticks())
    .visible(function(d) d)
    .left(x)
    .bottom(-5)
    .height(5)
  .anchor("bottom").add(pv.Label)
    .text(x.tickFormat);

/* The area with top line. */
vis.add(pv.Area)
    .data(data)
    .bottom(1)
    .left(function(d) x(d.x))
    .height(function(d) y(d.y))
    .fillStyle("rgb(121,173,210)")
  .anchor("top").add(pv.Line)
    .lineWidth(3);

vis.render();
-->
    </script>
  </div>
{/html}


{/slidy}

{slidy}
=Support For Handout Notes=
*This slide has handout notes
*Press the '''A''' key to reveal handout notes
{notes}
This content is only visible in the printout versions of the slides.

{html}
<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="200"/>
{/html}
{request}meta:demo:handout:note{/request}
{/notes}
{/slidy}

{slidy}
=Images - Bitmap Incremental Test=

Here is a bitmap using the <span>{</span>image} tag inside <span>{</span>incblock} (incremental revealed block content)
{incblock}
{image}/wink/res/slidy/demo/img/glassfrog.jpg{/image}
{/incblock}


{/slidy}

{slidy}
=Images - SVG Incremental Test=

Here is an external referenced SVG using the <span>{</span>svg} tag inside <span>{</span>incblock} (incremental revealed block content)

{incblock}
{svg}res:/res/slidy/demo/img/circles.svg{/svg}
{/incblock}

Here is a literal inline SVG using the <span>{</span>svgliteral} tag

{incblock}
{svgliteral}
<svg xmlns="http://www.w3.org/2000/svg" width="5cm" height="4cm">
  <g transform="scale(0.3)">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
  </g>
  </g>
</svg>
{/svgliteral}
{/incblock}


{/slidy}

{slidy}
=Source Code Highlighting=
Use the <span>{</span>java} source code tag

{java}
//Actually Javascript but its source code...
var data = pv.range(0, 10, .1).map(function(x)
{
    return {x: x, y: Math.sin(x) + Math.random() * .5 + 2};
  }
 );
 {/java}
 

{/slidy}
 
{slidy}
=Layout Test - Double Column, Float Image=
 
Demonstrates the <span>{</span>wiki} tag which allows parsing of wiki embedded within HTML
 
{html}
<table>
<tr>
<td valign="top">
{wiki}
*Bullet Col 1 Item 1
*Bullet Col 1 Item 2
*Bullet Col 1 Item 3
{/wiki}
</td>
<td valign="top">
{wiki}
*Bullet Col 2 Item 1
*Bullet Col 2 Item 2
*Bullet Col 2 Item 3
{/wiki}
</td>
</tr>
</table>
<div style="float:right; margin-right: 200px;" class="incremental">
<div>
<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="200"/>
<div style="font-size: 40%">
{wiki}
=Floating Frog=
{/wiki}
</div>
</div>
</div>
{/html}
 

{/slidy}

{slidy}
=Technical: How it works=

"'''''It eeeze not a miricle. It eeeze sciyance'''''"

The integration of Slidy into {request}meta:wink:logo{/request} is accomplished by a small set
of dynamically imported macros ([#(22)|quick reference]).  You can consider these as a specialized application framework running on top
of the core {request}meta:wink:logo{/request} runtime platform.

There is a  [http://docs.netkernel.org/book/view/book:tutorial:wink/|detailed guide] to {request}meta:wink:logo{/request} which explores how it is itself
just a composite resource-oriented application built on top of a set of core NetKernel services. 

{request}meta:wink:logo{/request} was one of the first applications we developed on the general ROC abstraction of NetKernel 4.  It's now about
4 years old and, even though NetKernel and the service libraries it uses have undergone continual evolution in that time,  {request}meta:wink:logo{/request} has not required any maintenance or bug fixes. 

{/slidy}

{slidy}
=Technical: Usage Notes=

*Remember that a set of slides is really a single resource - you can see this if you press the '''A''' key to reveal all slides.
*As such, all requests and includes etc are evaluated in a single pass
*To do interactive stuff you'll probably want to make ajax requests to NK services - [http://jquery.com/|jquery] is pre-included in each slideset.

 
{/slidy}

{slidy}
=Slidy Keys QuickRef=

*'''F11''' - Toggle fullscreen display mode (if your browser supports this!).
*'''A''' - Show all slides and notes, for printing
*'''F''' - Hide/Show lower navigation bar
*'''C''' - Show table of contents
*'''S''' - Scale font ''Smaller''
*'''B''' - Scale font ''Bigger''


{/slidy}

{slidy}
=Slidy Macros QuickRef=

*'''<span>{</span>slidyimport}''' - set's up the Slidy environment in {request}meta:wink:logo{/request} optionaly ''may'' have JSON array of optional settings...
{html}
<pre>
&#123;slidyimport}
{	"title": "Your title here",
	"css" : " body: white; //Any other css changes",
	"copyright": "Your copyright statement here",
	"cssref": "res:/some/referenced/css/resource.css"
}
&#123;/slidyimport}
</pre>
{/html}
*'''<span>{</span>slidy}''' defines a slidy slide - the contents are recursively evaluated as wink wiki text (may include further macro tags).
*'''<span>{</span>request}''' a ROC request (simple or declarative request syntax).
*'''<span>{</span>incremental}''' - mark list items for incremental reveal
*'''<span>{</span>incblock}''' -  mark a block item (image, div, para etc) for incremental reveal.

{/slidy}



{slidy}
=Slidy Macros QuickRef - Content Macros=
*'''<span>{</span>notes}''' specifies notes that are only visible on handouts - press '''A''' to view
*'''<span>{</span>html}''' a block of plain HTML.
*'''<span>{</span>wiki}''' a parseable block of wiki inside a block html!
*'''<span>{</span>image}''' a bitmap image reference (must be externally visible to browser)
*'''<span>{</span>svg}''' an SVG image reference (may be an internal resource request)
*'''<span>{</span>svgliteral}''' an inline SVG image.
*'''<span>{</span>java}''' - content is rendered using source code highlighting.
*'''<span>{</span>xml}''' - content '''must''' be XML and is rendered using XML colour highlighting.

{/slidy}

{slidy+class@test}
=Background=
==Testing Testing==
* One 
* Two
* Three
* Four

This slide has a background image and "Background Text" in the lower right corner.
{/slidy}

{slidy+class@inter}
=Interstitial Example=

This slide is supposed to be a smart interstitial!

''(Yeah I know the design sucks.  But it proves the concept)''
{/slidy}

{slidy}
=After Interstitial=
All back to normal again.
{/slidy}

{slidy}
=Horizontal Center=

{centerh+width@75%}
<div style="background-color: yellow; padding: 20px;">
This should be horizontally centered and be 75% wide. Using
<span>{</span>centerh+width@75%}..<span>{</span>/center}
</div>
{/centerh}

{centerh+width@300px}
{html}
<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="300px"/>
{/html}
{/centerh}

{centerh+width@20%}
<div style="background-color: #44AA44; color: black; padding: 20px;">
{wiki}
*Some
*Narrow
*Bullets
{/wiki}
</div>
{/centerh}

{/slidy}

{slidy}
=Vertical Center=
{centerv}
<div style="background-color: yellow; padding: 20px;">
This should be vertically centered
<span>{</span>centerv}..<span>{</span>/center}
</div>
{/centerv}

{/slidy}

{slidy}
=Horizontal + Vertical Center Text=
{centerh+width@30%}
{centerv}
<div style="background-color: yellow; padding: 20px;">
This is text  in the horizontal and vertical middle.
</div>
{/centerv}
{/centerh}
{/slidy}

{slidy}
=Horizontal + Vertical Center Image=
{centerh+width@600px}
{centerv}
{html}
<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="600px"/>
{/html}
{/centerv}
{/centerh}
{/slidy}

{slidy}
=Horizontal + Vertical Center Wiki=
{centerh+width@200px}
{centerv}
<div style="border: 4px solid yellow; width:200px; border-radius: 10px; -moz-border-radius: 10px;">
{wiki}
==Title==
*Bullet 1
*Bullet 2
*Bullet 3
{/wiki}
</div>
{/centerv}
{/centerh}
{/slidy}

{slidy}
=Centered Tables in MediaWiki Syntax with CSS=
{html}
<style>
/*Define our table style here - could be done in the main css*/
.mytable	{ border: 2px solid green; border-radius: 10px; -moz-border-radius: 10px; width: 300px;}
.postrow 	{ font-style: italic; font-weight: bold; background-color: red;}
</style>
{/html}

{centerh+width@300px}
{centerv}
{wiki}
{| class="mytable" cellspacing="0" cellpadding="0"
|- 
|GET
|{html}<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="100px"/>{/html}
|- class="postrow"
|POST
|{html}<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="100px"/>{/html}
|- 
|PUT
|{html}<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="100px"/>{/html}
|-
|DELETE
|{html}<img src="/wink/res/slidy/demo/img/glassfrog.jpg" width="100px"/>{/html}
|}
{/wiki}
{/centerv}
{/centerh}
{/slidy}