Skip to content

Latest commit

 

History

History
247 lines (191 loc) · 7.59 KB

example.mdwn

File metadata and controls

247 lines (191 loc) · 7.59 KB
Raw

; Sample input file for the KISS slide deck creator

; Turn this into a bunch of html files with: ; kiss.py example.mdwn

; This file's name ends with a .mdwn extension because smart text ; editors tend to color code the markdown in such files in ways that ; work well for our purpose.

; Lines that start with ; are comments. They cause lines to be ignored.

; The first slide is the universal slide. These values will be used for each ; slide (don't worry, you can override on a per-slide basis later). If it ; looks like a lot of options, it doesn't have to be: You can omit any ; option and stick with the in-built default. The options in this file are all ; set to the in-built default (except for the background image, which is ; normally blank).

; We can specify background colors by html color name. ; See http://www.w3schools.com/cssref/css_colornames.asp for 147 colors [black] ; Or we can specify a color by hex code: [bg_color=#000000] ; Or we can say it another way: [bg_color=black]

; The foreground text color is similar. By hex code: [text_color=#FFFFFF] ; Or color name: [text_color=white]

; Set the font [font_family=Helvetica, Verdana, Arial, Sans-serif] [font_size=40px] [font_style=normal]

; We can specify bold with [bold]

; But the default normal text is usually better: [font_weight=100]

; Text is displayed against the background image inside a semi-opaque box. ; This provides contrast and lets your audience see your text. [opacity=55] ; We can even change the color of the semi-opaque box. Black is usually best, ; though: [text_bg=black] ; The semi-opaque box can appear in any of 9 places: ; [top_left] [top] [top_right] ; [left] [center] [right] ; [bottom_left] [bottom] [bottom_right] ; By default, text goes in the middle of the screen: [center] ; Text within the box can be left, center or right justified: [halign=left]

; We can set the background image in long form: [bg_image=example.png] ; Or we can just name a file: [example.png]

; Normally we want the background image to be stretched to fit the screen: [bg_height=100%] [bg_width=100%]

; And normally we want it to start in the upper left corner: [bg_x=0px] [bg_y=0px]

; Each slide can have a title or you can set one globally. Normally the title is ; blank: [title=]

; But we're going to give this example a title, just for demonstration: [title=KISS Demo]

; We can have the slides auto advance after a certain number of ; seconds (press F5 to start playback of slides): [duration=30] ; But normally, we want to advance it manually: [duration=0]

; Playback should loop around to the first slide at the end of the ; deck: [autorewind=on]

; That's it! Those are the default universal options for your slides. Override ; them as you please. You probably want the default for most options, so you ; can delete most of the above from your input file.

; Start each slide with two dashes. Everything after the dashes (but before ; the next dash line) gets copied to the slide

Keep It Simple, Silly

Good slides are simple and pretty. They engage
an audience but do not distract from the speaker.

Bullets Are Dangerous

Most slide software steers you toward
templates for cookie-cutter slides full
of bullet points and gimmicky transitions.

-- [claire_smith.jpg][right][bg_width=auto]

Say it shorter

KISS does the opposite. Each slide
is one picture and one smallish text
box.

-- [ali_luminescent_right.jpg] [opacity=85][bottom_left]

Flexibility

You can get fancy if you want, but
KISS makes it easiest to do simple
messages and clear images.

-- [example_cactus.jpg]

KISS Tutorial

This is a slide. It inherits all the default values of
the universal slide, including the background image.

BTW, this presentation looks a lot better if you press F-11 to go full screen.

; Set options on the line with the dashes: ; Or we could use [bg_image=] to display the default background color.

-- [white] [text_color=black] We can override the background
image by specifying a background
color (in this case, white).

-- [example_cactus.jpg]

Keys

By now, you know to hit the space bar to go
to the next slide. Other keys:

  • Ctrl+Home - First slide
  • Ctrl+End - Last slide
  • Page Up - Table of contents -- [example_cactus.jpg]

Simple Slides

The slides are simple. Here's that last one:

 --
 # Keys
 By now, you know to hit the space bar to go  
 to the next slide.  Other keys:  
 
   * Ctrl+Home - First slide 
   * Ctrl+End - Last slide
   * Page Up - Table of contents

-- [example_cactus.jpg]

Unicode

If you want bullets, you can use:

♥ the usual <ul> tags
♥ unicode characters (as we did here)

KISS handles UTF-8 just fine. Don't fear the unicode!

-- [example_cactus.jpg][bottom]

Pandoc

We use Markdown by default. But there is a command line option that allows you to specify any other filter to convert what you type to html. Here is how we could use Pandoc to process rst input:

  --filter "pandoc --from=rst --to=html"

-- [example_cactus.jpg] [bottom]

Markdown Tips

A paragraph is one or more lines of text followed by one or more blank line. Newlines are treated as spaces, so you can reflow your paragraphs as you like. If you need a hard line break, put two or more spaces at the end of a line, or type a backslash followed by a newline.

See Pandoc readme for more tips.

-- [example_cactus.jpg]

HTML Too

Of course, this is just a web page. You can put html here and it works as expected.
DuckDuckGo logo
DuckDuckGo is a search engine that protects privacy and has lots of features.

-- [example_cactus.jpg] [top]

<style type="text/css"> #fooObject { /* simple box */ position:absolute; left:0px; top:8em; width:auto; line-height:3em; border:2px solid cornflowerblue; white-space:nowrap; padding:0.5em; background-color:grey; background-image: url(${opaque_image}); } </style> <script type="text/javascript"> var foo = null; // object function doMove() { foo.style.left = parseInt(foo.style.left)+1+'px'; setTimeout(doMove,20); // call doMove in 20msec } function init() { foo = document.getElementById('fooObject'); // get the "foo" object foo.style.left = '0px'; // set its initial position to 0px doMove(); // start animating } window.onload = init; </script>

You can get fancy with the
javascript if that's your thing.

Javascript is for ART★STARS!

-- [example_ottoman.jpg] [bottom]

Portability

KISS outputs html, css and javascript files,
so your slideshow will run in any modern
browser on any modern computer or smart
phone.

--

More Features

I'm still adding effects, like this silly fade in:

What's brown and sticky? A stick.