WiNK edit 

	 "title" : "SliNKi = Slidy + WiNK",
	 "css" : "
	 				body { background-color: white; }
	 				div.slide h1 { color : #555555; }
	 				div.slide { padding: 20px; }
li { color: #555555; }
div.slide h1 {	
		background: #DDDDDD; padding-left: 5px; margin-top: 5px; margin-right: 100px;
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px;
		border-radius: 10px;
a:link { color: #5F58A1; }
a:visited { color: #5F58A1; }
div.toolbar { font-size: 40%; }
pre {
border: 0px;
background-color: #D3D8E3;
font-weight: normal;
padding:0.2em 1em;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
border-radius: 10px;

	 "copyright" : "© 2010 Peter Rodgers, Brian Sletten",
	 "favicon": "",
	 "duration" : "5",
	 "splash" : "
A demonstration of Slidy in combination with the WiNK wiki.
Press space or click the page for next slide...
", "splashDuration": "7000" }


Background Text



SliNKi = Slidy + WiNK

This is a set of slides showing the Slidy macro extensions for WiNK

WiNK is...

  • a resource oriented Wiki application for NetKernel
  • available for install from the NetKernel repositories using Apposite
  • a recursive wiki markup runtime.
  • extensible with hot installable macros

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

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


Some text

*Bullet list

=Second Slide=

Something else
Which looks like this...


Some text

  • Bullet list

Second Slide

Something else


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


For reference the wiki source for these slides is here.

Incremental Reveal

  1. Some numbered bullets
  2. Item 2

Below are some incremental bullets

  • Some more bullets
  • Another bullet

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

*Some more bullets
*Another bullet

Resource Oriented Requests

Supports ROC requests with {request} tag

  • Simple request syntax





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

Time now: Tue Jun 18 15:49:10 UTC 2019

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



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

Images - Bitmap

Here is a bitmap using the {image} tag



POH - Plain Old HTML

Use the {html} tag for plain old HTML

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)

Images - SVG Incremental Test

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


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

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

  • Bullet Col 1 Item 1
  • Bullet Col 1 Item 2
  • Bullet Col 1 Item 3
  • Bullet Col 2 Item 1
  • Bullet Col 2 Item 2
  • Bullet Col 2 Item 3

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

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

  • {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.


Testing Testing

  • One
  • Two
  • Three
  • Four

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

Interstitial Example

This slide is supposed to be a smart interstitial!

(Yeah I know the design sucks. But it proves the concept)

After Interstitial

All back to normal again.

Horizontal Center

This should be horizontally centered and be 75% wide. Using {centerh+width@75%}..{/center}

  • Some
  • Narrow
  • Bullets

Vertical Center

This should be vertically centered {centerv}..{/center}

Horizontal + Vertical Center Text

This is text in the horizontal and vertical middle.

Horizontal + Vertical Center Image

Horizontal + Vertical Center Wiki


  • Bullet 1
  • Bullet 2
  • Bullet 3

Centered Tables in MediaWiki Syntax with CSS


© 2008-2011, 1060 Research Limited