Wiki Slides

Combining WiNK with Slidy allows you to create presentations using Wiki markup. You can make any wiki page into a Slidy presentation with the following steps...

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

The next slide shows an example...

WiNK Slidy Example

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

{slidyimport}
	{	"title": "Slidy Demo",
		"css" : "body: white;",
		"copyright": "blah blah bah",
	}
{/slidyimport}

{slidy}
=Hello=

Some text

*Bullet list
{/slidy}

{slidy}
=Second Slide=

Something else
{/slidy}

Features

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

Source

For reference the wiki source for these slides is here.

Incremental Reveal

1. Some numbered bullets
2. Item 2

Below are some incremental bullets

Use the {incremental} tag to mark content for progressive reveal.

{incremental}
*Some more bullets
*Another bullet
{/incremental}

Resource Oriented Requests

Supports ROC requests with {request} tag

• Simple request syntax

{request}res:/some/thing{/request}

• Full declarative request syntax

{request}
<request>
<identifier>active:groovy</identifier>
<argument name="operator">res:/myscript.gy</argument>
</request>
{/request}

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

Time now: Sat Apr 27 00:40:43 UTC 2024

Self Referencing Links

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

• Here is a link back to the second slide
• Which is this wiki markup...

Here is a link back to the [#(2)|second slide]

Images - SVG

Here is an external referenced SVG using the {svg} tag

Example:

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

Here is a literal inline SVG using the {svgliteral} tag

Images - Bitmap

Here is a bitmap using the {image} tag

Example:

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

POH - Plain Old HTML

Use the {html} tag for plain old HTML

This is a plain old html editable textarea... But it uses HTML5 persistent storage - try an edit, hit save then refresh this presentation.

Here's an example of how the {html} tag can be used to include the Protovis Javascript Visualization Library...

Support For Handout Notes

• This slide has handout notes
• Press the A key to reveal handout notes

Images - Bitmap Incremental Test

Here is a bitmap using the {image} tag inside {incblock} (incremental revealed block content)

<img src="/wink/res/slidy/demo/img/glassfrog.jpg"/>

Images - SVG Incremental Test

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

<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>

Here is a literal inline SVG using the {svgliteral} tag

<div class="svg"><script type="image/svg+xml">
<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>
</script></div>

Source Code Highlighting

Use the {java} source code tag

//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};
  }
 );
 

Layout Test - Double Column, Float Image

Demonstrates the {wiki} tag which allows parsing of wiki embedded within HTML

Floating Frog

Technical: How it works

"It eeeze not a miricle. It eeeze sciyance"

The integration of Slidy into WiNK is accomplished by a small set of dynamically imported macros (quick reference). You can consider these as a specialized application framework running on top of the core WiNK runtime platform.

There is a detailed guide to WiNK which explores how it is itself just a composite resource-oriented application built on top of a set of core NetKernel services.

WiNK 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, WiNK has not required any maintenance or bug fixes.

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 - jquery is pre-included in each slideset.

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 Macros QuickRef

• {slidyimport} - set's up the Slidy environment in WiNK optionaly may have JSON array of optional settings...

{slidyimport}
{	"title": "Your title here",
	"css" : " body: white; //Any other css changes",
	"copyright": "Your copyright statement here",
	"cssref": "res:/some/referenced/css/resource.css"
}
{/slidyimport}

• {slidy} defines a slidy slide - the contents are recursively evaluated as wink wiki text (may include further macro tags).
• {request} a ROC request (simple or declarative request syntax).
• {incremental} - mark list items for incremental reveal
• {incblock} - mark a block item (image, div, para etc) for incremental reveal.

Slidy Macros QuickRef - Content Macros

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

After Interstitial

All back to normal again.

Horizontal Center

Vertical Center

Horizontal + Vertical Center Text

Horizontal + Vertical Center Image

Horizontal + Vertical Center Wiki

Centered Tables in MediaWiki Syntax with CSS

GET
POST
PUT
DELETE