#-@cat analytics

// <script>function myfn() { alert('ciao');} dd.myfn = myfn;</script>
[StraightToThePoint<br/> a Javascript-based presentation tool]
@author,Luigi Rizzo, 13 july 2010@
@author, [[http://info.iet.unipi.it/~luigi/sttp/]]@

[StraightToThePoint]
StraightToThePoint is a simple editor and formatter for slides.
@@fr,  a.jpg@@
It 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 supported using the browser's textarea
  (exit using ESC or Q);
+ use @b,File -> Save as...@ to save of the modified slides
  (supported on Firefox and Explorer);

[Tool structure]
+The body of a presentation is in a plain text file;
+ manually prepend a header, in which case the file is as simple as
  <pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
\<html>\<head>\<META NAME="save" CONTENT="snapshot">
\<link rel="stylesheet" href="sttp.css" type="text/css">
\<script class="xsave" id="sd" type="text/javascript">
var savedata = 123; \</script>
\<script src="sttp.js" type="text/javascript">\</script>
\</head><body onload="main()">
\<textarea>
   .... your text here
\<\/textarea>
</pre>
+ or use the Makefile to build a self-contained version;
+ live-edit during presentations using the textarea

[Navigation]
+ jk, arrows, pgup/down, mouse clicks and scroller
   move through the slides;
+, Home and End move to the first and last slide;
+ 't' toggles an index of slides, from where you can select one
  with the mouse;
+, 'p' toggles between slides and printable version;
+ ESC and Q exit from the presentation and enter the editor
+ click on the top row to quit the editor and re-enter the presentation

[Markup]
@author, where we learn how to create a presentation@

[Markup]
+ empty line to break paragraphs;
+ lines starting with +, . or - for bulleted, numbered or unmarked lists;
+ indentation defines bullet depth
+ put a \ in front of a character to escape it
+ include figures using \@\@style1 style2 ..., imageurl@@

+ apply specific styles to spans 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 - tables]
+ tables are just written as
  <pre>\@table c l r c /\/ l r c define the alignment
    Exp. #| alfa    | beta    | gamma
    ------------------------------------
       1  |  1      |  18     | 3
       2  |  10     |  180    | 30
       3  |  100    |  1800   | 300
       4  |  1000   |  18000  | 3000
  </pre>
  resulting in
  @table c l r c
    Exp. #| alfa    | beta    | gamma
    ------------------------------------
       1  |  1      |  18     | 3
       2  |  10     |  180    | 30
       3  |  100    |  1800   | 300
       4  |  1000   |  18000  | 3000

table again...
  @table c l r c
    Exp. #| alfa    | beta    | gamma
    ------------------------------------
       1  |  1      |  18     | 3
       2  |  10     |  180    | 30
       3  |  100    |  1800   | 300
       4  |  1000   |  18000  | 3000

[Markup - embedded html and comments]
+ of course you can include html snippets
  <span style="font-size: 4pt; color: red;">a very tiny 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

[Markup - apply styles]
+ special formatting characters after initial whitespace
  are @b, [ + - . \@ @
+ a \ in front of a special character removes its meaning
+ C++ \/\/ and C \/* ... *\/ comments are allowed
+ a \\; forces a line break within the object
+ Plain text is supposed to start at column 1 and has no leading space
+ each  new slide has a [title] in square brackets
+ \@style1 style2 ...,text to be formatted@ is used to apply
 class="style1 style" ... to the text

[Markup - images]

+ \@\@style1 style2 ...,url\@\@ is used to insert an image.
  - predefined styles are bg (background), fl (float-left) and
    fr (float-right);
+ TODO: add a few more styles for common image locations

[Markup - lists]
+ lists start with + . - and their initial whitespace sets
  the depth;
+ bulleted lists start with a + as in this main list
+ number lists start with a . as in
  . alfa
  . beta
+ unnumbered lists start with a - as in
  - alfa
  - beta
  - gamma\\ this is actually on one line

[Embedded styles]
You can add a \<style type="text/css"\>...\</style\> section in your
  document and define additional style information
+ for complex styles, it is probably better to add your own \\
   \<link rel="stylesheet" href="mystyle.css" type="text/css"> \\
  to the \<head> section;

Similar to styles, you can also add some Javascript code
in \<script> tags.
+ 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>

[TODO]
+ add more styles for images;
+ add better support for drawing;
+ add predefined slide styles (e.g. 2-3 columns, 2-3 rows, combinations;
+ find a way to embed the presentation in a single container.

[Availability]

You have it already, it's 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-20100713.tgz]]

[Conclusions]
A slide show under html does not need to be too complex.
+ sttp is less than 400 lines of javascript and 100 lines of css;
+ it defines a very simple text-based markup language;
+ the conversion is done by Javascript;
+ you can edit your presentation within the browser.