You are viewing this file using Presto in slideshow mode. View the same file as a normal HTML document.
You are viewing this file using in document mode. View the same file using Presto in slideshow mode.
To create a slideshow with Presto, you follow four steps:
Presto is free software released under the Affero GNU GPL License. Download the latest version of Presto on SourceForge.
See screenshots of Presto in action on SourceForge.
Here are the few steps you need to follow to produce a Presto slideshow.
The first step simply involves writing a normal HTML document that contains the whole slideshow. Slides can contain arbitrary HTML markup, as in any regular document. Hence you can use…
…in the same way you use them in an HTML document.
The content for each screen (i.e. each slide) is surrounded by tags <div class="slide"> and </div>. This is the way to tell Presto how to split the document and make a slideshow out of each piece.
The normal stylesheet defines the appearance of the HTML file in what we call "document" mode. You will probably want the document to be displayed differently through Presto, in "slideshow" mode. A companion CSS document can be used to style whatever part of the document you wish. Your slide stylesheet can be in any file, but it must have "Presto" for its title:
<link rel="alternate stylesheet" type="text/css" title="Presto" href="file.css" />
It is recommended that the Presto stylesheet be declared as "alternate", with the stylesheet for "document" mode declared as the default stylesheet. Multiple stylesheets for the same presentation are also possible. If your browser allows it, try to switch to the alternate stylesheet linked to this document.
Surprise! Some elements may be defined as hidden in a stylesheet, and visible in another. Using CSS styling, you can hence produce multiple presentations from a single document.
You also realize that, as with any CSS, the same document can result in much different presentations.
To include Presto to the document, copy the file presto.js into the same folder as the HTML document, and then add the following line to the <head> part of the document, as is shown in the example above:
Save the resulting document and open it (using the File/Open… menu) in any modern web browser. The document is displayed as a slideshow; as usual a mouse click moves to the next slide.
Hovering over the bottom left corner of the screen pops the Presto toolbar (try it):
These buttons allow you to, in order: 1) show the splash screen; 2) go back one slide; 3) jump to a slide number (press Enter to jump); 4) move one slide forward; 5) print the slideshow; 6) show the list of slide titles.
Your document can still be displayed in its original form. To load the HTML file in its original "document" mode (without Presto's animations, toolbars, etc.), simply add ?nopresto at the end of the filename in the browser's URL bar.
Hence the same input document can be used, both for presentation and for printing! The file you are currently reading is one such example. The web page and sildeshow on Presto's web site are the same file, displayed in either mode.
Presto allows you to add simple animations into your slides by inserting specially-formatted HTML comments inside an element.
For example, when displayed in presentation mode, the last paragraph in this slide contains a comment <!-- PP @0:hide @1:show -->. The @0 indicates what effect should happen after 0 mouse clicks in the slide (i.e. when the slide is first shown); in this case, the effect is hide, meaning that the element won't be shown when the slide is first displayed.
The @1 indicates what effect should happen after 1 mouse click in the slide; the effect is show, meaning that the element will appear after clicking once inside the slide. Try it!
See? It works. ;-)
You can write events for as many mouse clicks as you wish for the same element. For example, to have three paragraphs with the following comments inside will show/hide each one on each button click (try clicking to see what happens):
The events currently supported are: show, hide, fadein and fadeout.
This paragraph will fade out after 2 clicks.
This paragraph faded in after 1 click.
Your slide can contain links that jump to a particular slide. Simply add an onclick handler that calls the Presto command gotoPage(x), where x is the slide number you wish to jump to. For example:
<p onclick="gotoPage(2)">Goto to slide number 2</p>
Presto comes with a script called markdown2presto, that can turn a text file in Markdown format into a Presto-enabled HTML document. Consider the following contents in a file called markdown.txt…
Presentation title ================== Slide title ----------- Some content. Slide title 2 ------------- - A bullet list - With two items
One calls on the command line:
markdown2presto markdown.txt -s style.css
Presto was written by Sylvain Hallé, professor at Université du Québec à Chicoutimi, who prepares lots of presentations, slidecasts and handouts. He was missing a way to create quick n'dirty slideshows with full control of presentation, without using complex tools like Inkscape and the like.
Presto uses the following (free) software:
Presto has nothing to do with the Pixar movie Presto! (which, by the way, you definitely should watch).