// [@background]  alternate style

[@background] main style for this presentation
    {tr small, StraightToThePoint primer}
    {br, Luigi Rizzo, Univ. di Pisa}
    @@bg,img/tower_640x480.jpg@@
    <style>
    // some things you might want to set here
    // remember that explorer does not support rgba
    #st_bottom { background: #808080; }
    // #st_bg { /* filled with the [@background] section */ }
    #st_shadow { background: rgba(100,100,100,0.5); }
    // h1 { background: rgba(100,100,255,0.5); min-height: 10%; }
    /* custom styles used in these slides */
    .box1 { border: solid red 1px; background: #ff8080; }
    .cmd { font-weight: bold; background: #66f;}
    </style>

[StraightToThePoint (sttp)<br/> a Javascript-based presentation tool]
@effect fade 400@
{author,Luigi Rizzo, 1 may 2011}
{author, [[http://info.iet.unipi.it/~luigi/sttp/]]}
{author, use arrow keys or scroller wheel
to flip through pages,<br/>CTRL +/- to resize}

[StraightToThePoint]
StraightToThePoint, or STTP, is a Javascript based presentation tool,
designed as a small and simple alternative to PowerPoint.

STTP is written in Javascript and CSS with a minimalist approach:
+ slides are written in plain text using a very basic markup language.
  Text structure (indentation, bullets, tables...)
  reflects the layout of the slides;
+, navigation uses intuitive keyboard (j,k, arrows, PgUp/Down, mouse) commands;
+, built-in editing is available through a browser's textarea
+, use {cmd,File -> Save as...} to save the modified slides
  (works on Firefox and Explorer);
And there is full support for {b,web-based interactive presentations}

[Basic use]
@effect slidefade 400@
Using StraightToThePoint is very simple: just create
an html file with this header:
- <pre style="font-size: 70%">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
\<html>\<head>\<META NAME="save" CONTENT="snapshot">
\<link rel="stylesheet" type="text/css"
   href="http://info.iet.unipi.it/~luigi/sttp/sttp.css">
\<script class="xsave" id="sd" type="text/javascript">
var savedata = 123; \</script>
\<script src="http://info.iet.unipi.it/~luigi/sttp/sttp.js"
    type="text/javascript">\</script>
\</head><body onload="main()">
\<textarea>
   .... your text here
\<\/textarea>
</pre>
  and add your presentation in plain text in the textarea,
  with [Slide Titles] in square brackets.

{b, You are done!}
+ point the browser to the file and you can browse through
  browse through the slides using arrow keys, the scroller,
  or jk, PgUp PgDown;
+ toggle between presentation and edit mode with ESC;

[Navigation]
A full list of commands is available with 'H'
(commands are case insensitive):
+ JK, arrows, PgUp/PgDn, mouse clicks and scroller
   move through the slides;
+, Home and End move to the first and last slide;
+ 'T' toggles a Table Of Contents, from which you can select
  a slide with the mouse;
+, 'P' toggles between slides and printable version;
+ ESC exits from the presentation and enters the editor
+ 'L' and 'S' activate the Listener and Speaker mode.

[Interactive presentations]
StraightToThePoint has support for distributed interactive presentations,
using a tiny Web-based server to keep track of the 'current' page in the
presentation. \\ There are two roles:
+, {b,listener}, started pressing 'L' to join to an existing presentation;
+, {b,speaker} started pressing 'S' and entering a session name
  in the text area. In speaker mode, commands are sent to the server
  and drive the navigation of listeners.
+, pressing L/S again toggles back to local mode.
Local navigation is always available. \\
{b,Note, security must be implemented on the server side!!}

In the archive file we supply a simple server, {tt,index.php},
which you should put in the same directory as the html file.
The server writes temporary data to the {tt,/tmp} directory.

[Markup]
{author, where we learn to create a presentation}

[Markup - basic approach]
The basic markup instructions let you quickly create slides.
Then you can refine the content using more sophisticated
formatting.

The typical steps are:
# create a list of slides (titles, summaries),
  don't worry about the formatting.
# fill the slides as needed;
# think of a common style (background, colors, fonts...) and
  create a [\@background] slide for that. Possibly also a \<style>
  section;
# now polish up the presentation with colors, special fonts, effects, etc.
StraightToThePoint is meant to simplify the first two steps,
using a very convenient format with little visual clutter,
and decouple as much as possible the formatting from the content.

[Markup 101]
The simplest slides look like this
-
  <pre>
[Introduction]
This is my first slide
+ i want one bullet
+ and another one
and then move on to more text

And a separate paragraph

[Conclusion]
+ i am good
+ i am really good
+ i also look good @@some_picture.jpg@@
+ ... good at what ?
</pre>
Square brackets mark titles, +'s indicate bullets, \@\@..\@\@ is for
images. \\ There are more annotations that you can use for tables,
links, text with custom styles, and so on.

[Markup details]
Here are a few markup details:
+, A slide starts with  \[title of the slide]
  in square brackets at the beginning of the line.
+, empty lines break paragraphs;
+= lines starting with *, + or - define items in a bulleted list;
+= lines starting with # define items in a numbered list;
+= lines starting with . define items in an unmarked list;
+, a ',' after one of the above characters defines a 'stop point'
  (i.e. display stops before that item, and moves on at the next
  keypress or mouse action);
*, a '=' after one of the above markers is a special stop point,
   and the item is removed at the click after is is being shown.

This can be useful for animations.

+ indentation defines nesting depth;
+ include figures using \@\@style1 style2 ..., imageurl\@\@ ;
+ urls can be specified with \[[url]] . The link is active
  and opens in another window;
+ you can apply specific styles to text using
  using \{style1 style2 ...,text to be formatted\}
  (e.g. this is used for {b,bold} and {i,italic} and {b i,mixed} fonts)

[Markup - line breaks]

A line break can be inserted in several ways:
+ with an empty line;
+ using the \\; sequence as in LaTeX
+ putting an explicit \<br/>

[Markup - lists]
Lists start with + . - and their initial whitespace sets
  the depth;
+ bulleted lists start with a + or - or * as in this main list
+ numbered lists start with a # as in
  # alfa
  # beta
+ unnumbered lists start with a . and appear as
  . alfa
  . beta

[Markup - tables]
Tables are written as
  @table l l l t=none
  <pre>@table c l r c
    Exp. #| alfa    | beta    | gamma
    ------------------------------------
       1  |  1      |  18     | 3
       2  |  10     |  180    | 30
       3  |  100    |  1800   | 300
  @endtable
  </pre> | which gives |
  @table c l r c
    Exp. #| alfa    | beta    | gamma
    ------------------------------------
       1  |  1      |  18     | 3
       2  |  10     |  180  | 30
       3  |  100    |  1800   | 300
   @endtable

Table entries can be almost anything, including other
tables, pictures etc (very convenient for alignment)
+ After the \@table sign you can specify styles for each column.
  {b,l c r} are predefined, but you can create your own;
+ you can also specify styles for the entire table (borders, etc)
  and for rows.

[Markup - embedded html and comments]
Of course you can include html snippets
  <span style="font-size: 10pt; color: red;">a small font in red</span>
+ and preformatted text in \<pre> ... \</pre> markers;
+ furthermore, you can have comments in C+ style // like this, should not appear
+ and also /* comment
  1 */ in
  plain /*
  comment 2 */ C style
Comments act {b,before} other processing so the can be used to
remove slides from the presentation without deleting them.

[Markup - images]

+ \@\@style1 style2 ...,url\@\@ is used to insert an image.
  - predefined styles are bg (background), fl (float-left) and
    fr (float-right);
+ there are a few predefined styles for for common image locations
  (e.g. bg for background, fl/fr for float left and right,
  tl/tr/bl/br for top/bottom left/right;
+ there are also some styles (hXX, wXX, szXX) to set image sizes
  as a fraction of the screen's width.

[Modifying styles]
You can add a \<style type="text/css"\>...\</style\> section in your
  document and override existing styles or define new ones;
+ for complex styles, it is probably better to add your own \\
   \<link rel="stylesheet" href="mystyle.css" type="text/css"> \\
  to the \<head> section;
+ also be aware that browser compatibility is very critical,
  and certain features (positioning, transparencies, etc.)
  are different in IE, Firefox, Chrome and others.

[Modifying the Javascript]
There is some support to put Javascript within your slides, but:
. it is undocumented;
. you probably should not use it,
Again, if you are so brave to write Javascript, you are better off
  manually adding it to the \<head> of your document
  using \<script> ... \</script>

[Templates and background]

A slide with the title [@background] is special, and it is
shown in the background of all other slides.
+ typically you can add there background images, logos, titles etc.
+ at the moment there is only one background for the entire presentation
  (but it will be easy to add support for multiple background, per-slide).

[Screen layers]
Many nice visual effects come from the use of multiple layers
(background, background images, transparent layers, text, headers).

StraightToThePoint offers you the following layers:
+ {box1,#st_bottom} at the bottom (farthest away from the viewer).
  This should contain the background color for the slide.
+ {box1,#st_bg} contains 
+ {box1,#st_shadow}
+ {box1,#st_slide} at the top, containing the text of the current
	slide.

[Plotting]

With the availability of HTML canvas on all major browsers,
it is possible to add some crude support for data plotting.
There is some experimental code already in, basically
you can enter a block

- <pre> @plot \\ x y \\ x y \\ ... \\ @endplot</pre>

to plot a graph with x-y points

@plot
0 0
1 10
2 15
3 20
4 15
5 10
@endplot

[Missing features]
This tool is for very quick slide production. It has decent
support for text-based presentations, but it is not a
graphic editor.

We will look at adding some things (visual effects, possibly
some drawing support, etc. but conditioned by the following:
+ must work well on the vast majority of browsers;
+ must be simple and not require 10K lines of Javascript.

[StraightToThePoint Availability]

You have it already, it's all in this file!
+ just save to disk and replace the inner textarea with your slides.
+ or, download the sources (css, js, Makefiles etc.) at \\
  [[http://info.iet.unipi.it/~luigi/sttp/sttp-20110501.tgz]]

[Conclusions]
A slide show under html does not need to be too complex.
+ sttp is about 2000 lines of javascript and css
  (including comments, plots, effects).
+ it defines a very simple text-based markup language;
+ the conversion is done by Javascript;
+ you can edit your presentation within the browser.

Once again, the URL for download is

[[http://info.iet.unipi.it/~luigi/sttp/sttp-20110501.tgz]]