{slinki}
{
	 "title" : "SliNKi 3rd Generation",
	 "copyright" : "© 2012-2013, 1060 Research Limited",
	 "favicon" : "/wink/res/slinkyTemplate/nk2010/favicon.png",
	 "splashDuration": 6000,
	 "css" : [
				{ "href" : "/wink/res/revealImpl/1.1.1/css/print/print.css", "media" : "print" },
				{ "href" : "/wink/res/revealImpl/1.1.1/css/reveal.css" },
				{ "href" : "/wink/res/revealImpl/1.1.1/css/theme/1060.css" },
				{ "href" : "/wink/res/revealImpl/1.1.1/css/print/screen.css", "screen" : true },
				{ "href" : "/wink/res/revealImpl/1.1.1/css/print/pdf.css", "pdf" : true },
				{ "href" : "/wink/res/revealImpl/1.1.1/lib/css/magula.css" },
				{ "href" : "/wink/style/xmlverb.css" },
				{ "href" : "/org/netkernel/html5/framework/bootstrap/latest/css/bootstrap.min.css" },
				{ "href" : "/org/netkernel/html5/framework/fontawesome/latest/css/font-awesome.min.css" }
			]
}
{/slinki}

{splash}
{request}res:/res/materials/2013/01/SliNKi-Splash.txt{/request}
{/splash}

{slide}
{html}
<style>
.mystyle	{ background-color: #EDEA49; }
</style>
<h1 style="font-size: 200%">{request}meta:slinki:logo{/request} v3</h1>
<h2>3rd Generation HTML5 Slides</h2>
<div style="margin-left: auto; margin-right: auto; text-align: center;">
<img src="/wink/res/slinkyTemplate/nk2010/slide-title1.png"/>
</div>
{/html}

<div style="position:absolute; bottom: 20px; right: 160px;">
<div style="font-size: 100%;">
<i class="icon-user"> </i> Brian Sletten / Peter Rodgers
</div>
<div style="">
''February 2013''
</div>
</div>
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
==Overview==
*{request}meta:slinki:logo{/request} is an HTML5 presentation application
*The combination of:
**NetKernel's [http://docs.netkernel.org/book/view/book:wikicore:book/|wiki resource model] and its existing collection of macros
**reveal.js HTML5 [https://github.com/hakimel/reveal.js|slides template]

These slides are a single wiki page powered by... 
*{request}meta:wink:logo{/request} a [http://www.1060research.com/netkernel/|NetKernel] Wiki Application
*{request}meta:wink:logo{/request} lets you use resource oriented macros
*Which means {request}meta:slinki:logo{/request} "just works" here.

<div style="float: right; margin-top: -20px;">
'''To create presentations all you do is write wiki...''' <i class="icon-circle-arrow-right" style="font-size: 70px;"> </i>
</div>

{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
==3rd Generation==
*This is the 3rd generation featuring a new slide engine ([https://github.com/hakimel/reveal.js|reveal.js]) and a completely clean bootstrap.
*It now allows other HTML5 libraries to be used at the same time.
*We're using [http://fortawesome.github.com/Font-Awesome/|Font-Awesome] and [http://twitter.github.com/bootstrap/|Bootstrap] in this slide set.
{html}
  <div class="row-fluid">
    <div class="span5">
{wiki}
====Bootstrap====
Bootstrap is being used for this CSS column layout
{/wiki}
    </div>
    <div class="span5">
{wiki}
====Font-Awesome====
<i class="icon-magic"> </i> Is being used for the Icons
{/wiki}
    </div>
  </div>
{/html}
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide+class@smaller}
==What's New?==
{html}
  <div class="row-fluid">
    <div class="span3">
	<i class="icon-hand-right" style="font-size: 180px;"> </i>
	</div>
    <div class="span4">
{wiki}
*Brand new clean-boot process
*Full control over CSS
**including print/screen
*Full control over Scripts
**Including reveal.js configuration
*HTML5 touch enabled on Tablet/Phone
*3D Transitions (try pressing "Escape")
*Support for vertical slides
*Simple clickable progress bar control <i class="icon-hand-down"> </i>
{/wiki}
    </div>
    <div class="span4">
{wiki}
*PDF Export Friendly
**press A and print to PDF
*Clean default fonts/styling
*Works as independent wiki macro library
**no need for WiNK
*New ROC power-user macros
**<span>{</span>wikiref} - sources and parse resource as wiki
*Fixed SVG graphics
{/wiki}
    </div>
  </div>
{/html}
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
==What Else is New?==
{html}
<div class="row-fluid">
<div style="float:left; font-size: 180px;" class="span3">
<i class="icon-book"> </i>
</div>
<div class="span8">
{wiki}
*{request}meta:slinki:logo{/request} is available ''inside'' the NetKernel doc system!
*Slides are now first-class searchable docs!
*{request}meta:slinki:logo{/request} is now a module in the wiki-core package (use apposite to get latest '''wiki-core''')
*{request}meta:slinki:logo{/request} slides ''just work'' as docs.
*Here's a demo in your NK system now...
{/wiki}
</div>
</div>
{/html}
[http://localhost:1060/book/view/book:org:netkernel:wiki:slinki/]
{request}meta:st:nk2010:footer{/request}
{/slide}


{slide}
===Example===

Here's an example of the wiki syntax

{html}
<pre>
&#123;slide}
===Instance of Example Page===
*Bullet 1
*Bullet 2

Mary had a little lamb.
&#123;/slide}
</pre>
{/html}

'''<span>{</span>slide}''' is the macro that delimits a slide.

''The following slide is the rendering of the wiki shown above...''
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
===Instance of Example Page===
*Bullet 1
*Bullet 2

Mary had a little lamb.
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
===Presentations===

*Each '''<span>{</span>slide}...<span>{</span>/slide}''' block defines a different slide
*You add as many slides as you need for your presentation
*The content is all just ''wiki'' text
*So its ''very fast and very easy'' to create presentations

*{request}meta:slinki:logo{/request} is Resource Oriented - so you can easily include other resources.  This means its very easy to create slide libraries and save ''lots'' of time.
*Its even easy to have ''dynamically generated slides''.

{request}meta:st:nk2010:footer{/request}
{/slide}


{slide}
===Booting===
To boot to {request}meta:slinki:logo{/request} inside {request}meta:wink:logo{/request} (''or within NetKernel docs'') you use the <span>{</span>slinki} macro at the top of your page...

{html}
<pre>
&#123;slinki}
{
	//Options go here as a JSON array (see reference)
}
&#123;/slinki}
</pre>
{/html}

This dynamically transforms the page into a presentation.

If you remove the <span>{</span>slinki} macro your page just looks like a regular wiki page (which can be handy as a basic high-level preview mode)
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
===Macro Engines===
{request}meta:slinki:logo{/request} is just one macro provided as part of NetKernel's ''Wiki Resource Model''.
So its simple to extend with [http://docs.netkernel.org/book/view/book:wikicore:book/doc:wiki:core:macros|your own macro engines].

Some of the built-in macro engines include:

{html}
<div style="font-size: 80%;">
{wiki}
*'''<span>{</span>notes}''' specifies notes that are only visible on handouts
*'''<span>{</span>html}''' a block of plain HTML.
*'''<span>{</span>wiki}''' a parseable block of wiki inside a block of html.
*'''<span>{</span>image}''' a bitmap image reference
*'''<span>{</span>java}''' - content is rendered using source code highlighting.
*'''<span>{</span>xml}''' - content '''must''' be XML and is rendered using XML colour highlighting.
{/wiki}
</div>
{/html}
{request}meta:st:nk2010:footer{/request}
{/slide}
{slide}
===Example: 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}

====Or use highlight.js====
Use tags <span>{</span>html}&lt;pre>&lt;code>...&lt;/code>&lt;/pre><span>{</span>/html}

{html}<pre><code class="javascript" contenteditable="">
//Javascript source code...
var data = pv.range(0, 10, .1).map(function(x)
{
	return {x: x, y: Math.sin(x) + Math.random() * .5 + 2};
}
);
</code></pre>{/html}
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
<h1>{request}meta:slinki:logo{/request} QuickRef</h1>
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
<h3>{request}meta:slinki:logo{/request} QuickRef 1</h3>

*'''<span>{</span>slinki}''' boots the {request}meta:slinki:logo{/request} environment.
*May contain a JSON array of settings...
{html}
<pre>
&#123;slinki}
{	"title": "Your title here",
	"copyright": "Your copyright statement here",
	"scripts" : [ "/foo/baa.js", "/boo/baz.js" ]
}
&#123;/slinki}
</pre>
{/html}
''For full details see the {request}meta:slinki:logo{/request} reference docs''

[http://localhost:1060/book/view/book:org:netkernel:wiki:slinki/]
{request}meta:st:nk2010:footer{/request}
{/slide}
{slide}
<h3>{request}meta:slinki:logo{/request} QuickRef 2</h3>

*'''<span>{</span>slide}''' defines a slide - the contents are evaluated as wiki.

*An optional ''class'' argument specifies the class to use in the slide.
*For example:

'''<span>{</span>slide+class@mytitle}''' 

*Gives the slide a CSS class of "mytitle"

<div style="float: right;">
'''Here's an example...''' <i class="icon-circle-arrow-right" style="font-size: 70px;"> </i>
</div>

{request}meta:st:nk2010:footer{/request}
{/slide}

{slide+class@mystyle nobackground}
===class example===

This slide is declared with the class argument (you can add more classes as space separated items)

*'''<span>{</span>slide+class@mystyle}'''

The ''mystyle'' class is defined in your CSS like this..

<pre>
.mystyle	{ background-color: #EDEA49; }
</pre>

{request}meta:st:nk2010:footer{/request}
{/slide}


{slide}
<h3>{request}meta:slinki:logo{/request} QuickRef 3</h3>

Other macros specific to presentations are:

*'''<span>{</span>incremental}''' - mark list items for incremental reveal

The most powerful is:

*'''<span>{</span>request}''' a ROC resource request.
*'''<span>{</span>wikiref}''' an ROC resource request that is recursively parsed as wiki.

This lets you request other resources to include in your wiki.

A request can be either a simple URI or the full power of a [http://docs.netkernel.org/book/view/book:guide:logicalreference/doc:logicalreference:module:standard:logical:declarative:request:syntax|declarative request].

{request}meta:st:nk2010:footer{/request}
{/slide}

{slide+class@smaller}
===Everything is a Resource===

*The presentation is a resource
**All the slides are resources
***''Everything is a resource.''
*The ''representation'' of the ''presentation'' (not easy to say) is generated with recursive ROC requests.
*Resource requests can be embedded using the <span>{</span>request} macro.
*We added a footer on every page by declaring a request like this...
{html}
<pre>
&#123;request}meta:footer&#123;/request}
</pre>
{/html}
*Each {request}meta:slinki:logo{/request} logo is done like this
{html}
<pre>
&#123;request}meta:slinki:logo{/request}
</pre>
{/html}

*So its really easy to create '''slide libraries'''.   Or if the URI is to an http:// URL - you can do "slide mashups".

{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
<h1>Get {request}meta:slinki:logo{/request} and ROC it.</h1>
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
<h3>To get {request}meta:slinki:logo{/request}</h3>
#[http://www.1060research.com/netkernel/download|Download] a copy of NetKernel
#Boot up NK and go to [http://localhost:1066/panel/urn:org:ten60:apposite:client:panel:view|Apposite] - accept all the latest updates
#That's it.

*If you want to serve/share presentations just install "wink" and put your presentation in a wiki.
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide+class@smaller}
===To ROC it===
*NetKernel is 21st Century technology that powers some of the world's largest sites, carrier-class telecoms systems and essential Web infrastructure you probably didn't even realise you rely on.
*Resource Oriented Computing (ROC) was conceived by [http://www.1060research.com|1060 Research].
*The NetKernel Resource Oriented Computing Platform is developed by [http://www.1060research.com|1060 Research] and is published under a dual-license open source model.
*ROC is easy to learn, and those that do wouldn't go back. Onsite Training and Consulting in Resource Oriented solutions is available from [http://www.1060research.com|1060 Research].
===Contact===
{html}
<table>
<tr>
<td style="padding-left: 10px; border-left: 1px solid silver; padding-right: 50px;">
<i>Peter</i><br/>
pjr <span>[</span>at] netkernel <span>{</span>dot} org<br/>
@pjr1060, @netkernel
</td>
<td style="padding-left: 10px; border-left: 1px solid silver;">
<i>Brian</i><br/>
brian <span>[</span>dot] sletten <span>[</span>at] gmail <span>{</span>dot} com<br/>
@bsletten
</td>
</tr>
</table>
{/html}
===ROC News===
[http://wiki.netkernel.org/wink/wiki/NetKernel/News/latest|NetKernel ROC News] is published every Friday.

{html}
<table>
<tr>
<td><img width="100px" src="/wink/res/slinkyTemplate/nk2010/1060Research-xsmall.png"/></td>
<td><img src='/wink/res/slinkyTemplate/nk2010/cross-new1.png'/></td>
<td>{image}/wink/style/poweredby.png{/image}</td>
</tr>
</table>
{/html}
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide+class@smaller}
===Acknowledgements===
*{request}meta:slinki:logo{/request} was developed by Brian Sletten and Peter Rodgers
*Brian (who writes a ''lot'' of slides) provided the vision and was inspired by Dave Ragget's original [http://www.w3.org/Talks/Tools/Slidy2/#%281%29|Slidy] script
*In this 3rd generation of {request}meta:slinki:logo{/request} we've integrated [https://github.com/hakimel/reveal.js|reveal.js] as the engine for slide transitions - grateful thanks to [http://hakim.se|Hakim El Hattab]
*The underlying {request}meta:wink:logo{/request} application is an old and simple NK demo
*The wiki resource model uses the Eclipse Mylyn Wikitext parser

===License===
*{request}meta:slinki:logo{/request} is licensed under the [http://www.1060research.com/license/|1060 Public License v1.2]
*Reveal.js is licensed under an MIT License.

===Source Code===
*The source is available here: http://svn.netkernel.org/svn/slinki/
{request}meta:st:nk2010:footer{/request}
{/slide}

{vslides}

{slide}
==Secret Sauce==

If you want to see how we set up these slides to use bootstrap and font-awesome. Press the down arrow <i class="icon-arrow-down"> </i>
{request}meta:st:nk2010:footer{/request}
{/slide}

{slide}
==SliNKi Macro==

{html}
<pre>
&#123;slinki}
{
 "title" : "SliNKi 3rd Generation",
 "copyright" : "© 2012-2013, 1060 Research Limited",
 "favicon" : "/wink/res/slinkyTemplate/nk2010/favicon.png",
 "splashDuration": 4000,
 "css" : [
			{ "href" : "/wink/res/revealImpl/1.1.1/css/print/print.css", "media" : "print" },
			{ "href" : "/wink/res/revealImpl/1.1.1/css/reveal.css" },
			{ "href" : "/wink/res/revealImpl/1.1.1/css/theme/1060.css" },
			{ "href" : "/wink/res/revealImpl/1.1.1/css/print/screen.css", "screen" : true },
			{ "href" : "/wink/res/revealImpl/1.1.1/css/print/pdf.css", "pdf" : true },
			{ "href" : "/wink/res/revealImpl/1.1.1/lib/css/magula.css" },
			{ "href" : "/wink/style/xmlverb.css" },
			{ "href" : "/org/netkernel/html5/framework/bootstrap/latest/css/bootstrap.min.css" },
			{ "href" : "/org/netkernel/html5/framework/fontawesome/latest/css/font-awesome.min.css" }
		]
}
&#123;/slinki}
</pre>
{/html}
Here's the [http:/wink/res/materials/2013/01/SliNKi.txt|full source for these slides]
{request}meta:st:nk2010:footer{/request}
{/slide}

{/vslides}