Demo presentation

This is a small presentation, explaining how my custom system for making presentations works.

My presentation system

Syndamia AT syndamia.com

Before we go any further, click the icon, next to the printer above this rectangle, to the left.

Now the presentation should fill out the entire page. On the bottom right are your controls.

Press the right arrow in the controls to go to the next slide.

Introduction

I created a simple system for making presentations with slides in them. The gist of it is: different Markdown paragraphs are put into a rectangle, each rectangle representing a slide, with some added options for layout and format.

ftags

🔗

An ftag (“format tag”) is what I call a short string of characters, that starts with two ampersands (&&). Each ftag is a “marker” that gets replaced by some other text (usually HTML tags).

An easy example is the image of the Great Britain flag (part of Flags.awk, not the presentation system!): typing out &&GB (in lowecase), gets replaced by the actual image - ENG.

Why?

🔗

Formatting

Every (presentation-specific) ftag is listed and explained in Presentation.awk. To summarize, each slide is wrapped in &&slide and &&/slide (or &&clide and &&/clide), you can change font size for specific portions, you can add basic (without formatting) tables for fancy layout, you can align text and elements and you can add line breaks.

And they can work together in most different combination.

Though, remember that everything gets translated to HTML, so don’t do (even if it works)

&&slide &&font20 &&/slide &&/font

Enough talking, here are examples!

Font-size 18px
Font-size 20px
Font-size 22px
Font-size 25px
Font-size 30px (default)
Font-size 35px
This text is floated to the right
While this one is centered
Floated right
Floated right
Floated right

But you may realize that text floated to the right will make other text wrap around it! Maybe this should be changed?

The source Markdown for the predvious slide (without the pipes to the left) is:

|      &&slide
|      
|      &&font18 Font-size 18px &&/font
|      &&font20 Font-size 20px &&/font &&font22 Font-size 22px &&/font &&font25 Font-size 25px &&/font
|      Font-size 30px (default)
|      &&font35 Font-size 35px &&/font
|      
|      &&lineb5
|      
|      &&fright
|      This text is floated to the right
|      &&/fright
|      
|      &&lineb2
|      
|      &&centered While this one is centered &&/centered
|      
|      &&lineb2
|      
|      &&fright Floated right<br>Floated right<br>Floated right &&/fright
|      
|      But you may realize that text floated to the right will make other text wrap around it!
|      Maybe this should be changed?
|      
|      &&/slide

You can also easily tabularize

  • List Element 1
  • List Element 2

any sort of content

So you can very easily put images next to your text

The source Markdown for the predvious slide (without the pipes to the left) is:

|      &&clide &&table
|      
|      You can also easily tabularize
|      
|      &&cont &&fright
|      
|      - List Element 1
|      - List Element 2
|      
|      &&/fright &&/cont
|      
|      &&tarow
|      
|      **any** sort of content
|      
|      &&/table
|      
|      &&lineb1
|      
|      &&ftable
|      
|      So you can very easily put images next to your text
|      
|      &&centered ![](/tutorials/fix-no-frame-buffer-plan9/img/rio-default-login.png =120x) &&/centered
|      
|      &&/table &&/clide

Other features

As you’ve obviously noticed, the presentation “system” also adds a navigation bar, with which to present and navigate slides. You can also print very easily the whole presentation on A4 sheets of paper, since that’s the exact size of each slide.

Pretty much all other website functionalities, like themes and click-to-zoom images, aren’t inhibited. The slides are easily scrollable/browseable and if you don’t have JavaScript enabled, everything will be shown as a normal(-ish) article, without any major styling issues.

Setup

🔗

Everything is contained in 3 files: Presentation.awk, presentation.js and presentation.css, which pretty much work on your “compiled” HTML.

Presentation.awk handles replacement of ftags (only in /talks pages!). presentation.js is inserted into the HTML by &&presentation, and handles the navigation bar as well as insertion of presentation.css (the overall presentation-specific styling).

Thats All. Thank you for your time!

P.S. Press the same button (next to the print button) with which you started presenting, to stop presenting ;)
^