| presentation: YAPT demo |
| image-directory: yapt-demo-images |
| author: Bertrand Delacrétaz |
| date: September 2003 |
| cvs: $Id: yapt-demo.txt,v 1.5 2003/10/14 11:54:40 bdelacretaz Exp $ |
| A (short) journey through the (few) YAPT features. |
| |
| slide: What is YAPT? |
| hint-style: LotsOfText |
| |
| Yet Another Presentation Tool. |
| |
| The idea is to make it super-easy to create decent-looking presentations, for display or printing. |
| |
| A presentation consists of a single structured (wiki-like) ASCII file, with some simple rules: |
| |
| * The first line must contain "presentation:" (without quotes) followed by the presentation title. |
| |
| * Each slide starts with a "slide:" line. |
| |
| * Empty lines separate paragraphs. There must be an empty line between the slide: line and the slide text. |
| |
| * For images, use a single line starting with img_XXXX: where XXX is the CSS class |
| name to use. See yapt-images.css for available classes. |
| |
| * A "presentation" page containing all slides is available for printing. |
| |
| * Presentations are converted in XML on the way. |
| |
| That's it. There are more details and examples in the following slides, and you can have a look a the yapt-demo.txt |
| file from which this presentation is created. |
| |
| slide: Navigation |
| hint-style: LittleText |
| |
| Click anywhere on a slide to go to the next one. |
| |
| Use the grey links at the bottom of the page to go to the previous slide, or to the index. |
| |
| note: This page uses a hint-style line to indicate that it contains little text and can use a larger font |
| |
| slide: Testing source code |
| hint-style: LittleText |
| |
| You can embed source code examples using the code: demarcation. |
| |
| code: |
| <?xml version="1.0"?> |
| <some-element-here attrib="yes"> |
| <child-element-indented/> |
| </some-element-ends> |
| <foo/> |
| |
| Here we use the "preserve-space" option of the slop parser to preserve indentation. |
| |
| Currently, code cannot contain blank lines, it would be better to use an "endcode:" marker for the end: |
| |
| code: |
| public class SomeJavaClass { |
| // the whole thing up to closing } should be in one block |
| |
| // this follows a blank line |
| } |
| |
| |
| slide: Test results |
| |
| CSS styles have been tested with the latest version of Firebird, Opera and IE on Mac OSX, they might not |
| work properly with other browsers. |
| |
| When printing, only Opera honors the "page-breaks" CSS properties, current versions of other browsers |
| will break images and slides in two when laying out pages. |
| |
| slide: Image examples: half-left image |
| |
| img_leftHalf: screenshot.jpg |
| Here's a example with an image. Try zooming or resizing your browser to presentation sizes to see how the display |
| behaves, the image must stay on the left and take half the width of the screen or page. |
| |
| If you add text here it comes as a new paragraph. |
| |
| |
| slide: Image examples: half-right image |
| |
| img_rightHalf: screenshot.jpg |
| Here's about the same thing, only with the image on the right. |
| |
| subtitle: A subtitle |
| At this size, we'd only add a small legend here. |
| |
| |
| slide: Image examples: two images at 33% |
| |
| img_leftThird: screenshot.jpg |
| Let's try with images on both the left and right sizes, how does this behave at |
| different zoom settings? |
| |
| img_rightThird: tree.gif |
| subtitle: Flow! |
| When resizing, the text should flow freely between images. |
| |
| slide: Conclusions |
| |
| I'll try to use this tool for actual presentations in the near future, so it |
| will certainly get some improvements. |
| |
| Missing features include: |
| |
| * Real bulleted lists (but according to some they are evil;-) |
| |
| * Code sections (monospaced fonts etc) |
| |
| * Presentation wizard to automatically generate complicated flashy layouts with lots of stupid |
| transitions. Just kidding. |