Syntax - mrhenko/WebbNote GitHub Wiki

WebbNote is basically a framework that takes an HTML page that is marked up in a certain way and turns it into a web based presentation with voice over. This is a reference for the syntax that you are supposed to use on the HTML page.

The basics

The HTML page should be written in HTML5 and contain links to some CSS and Javascript. Boilerplate example:

<!DOCTYPE html>
<html class="">

<head>
	<title>The title of your presentation</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="webbnote/core.css" media="screen" />
	<link rel="stylesheet" href="webbnote/default_theme.css" media="screen" />
	<link rel="stylesheet" href="webbnote/print.css" media="print" />
</head>

<body>

	<article id="keynote">
		
	</article>

	<script src="webbnote/jquery-1.4.4.min.js"></script>
	<script src="webbnote/webbnote.js"></script>
	<script>
		var files = new Array('yoursoundfile.mp3', 'yoursoundfile.ogg');
		init_webbnote(files);
	</script>

</body>

</html>

The content of the presentation goes in-between the <article> and </article>.

Slides

Use the <section> element, with the class "page", to create a slide. Example:

<section class="page">
	This is the content of my slide.
</section>

You can use as many slides as you'd like. The topmost slide in your html-document will be considered the starting slide.

Timing

Slides (and also text-bullets) can be visible or hidden at any given time using the "data-visible" and "data-hide" attributes. The timing is always absolute, from the start of your audio file. You can use milliseconds or mm:ss format the timing.

Title and heading

The first slide of your presentation should contain the title of the presentation. Mark this up as an <h1>. Example:

<h1>My title</h1>

Note: Do not use more than one <h1> element in one presentation.

Each consecutive slide should also have a heading. Use <h2> to mark it up. Example:

<h2>The heading of my second slide</h2>

Any subheadings on a slide should be <h3> (or <h4>, <h5> etc. depending on what is semantically appropriate).

Content

The content of your presentation should be outlined as an unordered (bulleted) list. Example

<ul>
	<li>The first item of my list</li>
	<li>The second item</li>
	<li>etc...</li>
</ul>

Note: In some earlier versions of WebbNote the slide headings where also part of the content list. As of version 0.1 this is depreciated.

Images

If your presentation contains pictures/images, these are supposed to be markup with <img> tag and placed as part of a list item. In the default theme images can be positioned to the right of the text by using the class "right".

The audio

Note: Due to differences in browser behavior it is recommended that you provide your audio file (speech recording) in at least two formats; .mp3 and .ogg.