Structure

assets: Web fonts and CSS SASS source styles, primarily. OUTPUT for CSS: workshop.css stays here. fieldnotes.css goes into examples directory (this is from settings in my SASS compiler). common.scss doesn't have an output; it is included and wrapped into both workshop.css and fieldnotes.css. Find old versions of the workshop in assets/archive.
bin: Build script
content: Content files for presentation and field notes. Put relevant images for content in content/images.
examples: Files for attendees. fieldnotes.html outputs here (from fieldnotes.content in content directory). Any images necessary for fieldnotes should go in examples/images.
presentation: Presentation HTML files (slidy HTML5 presentation)
presenter-examples: Examples for presenters to use; not necessary for attendees
scratch: Working area for in-workshop demos. Any files here (except the README) are ignored by git.
workshop.zip: Doesn't exist at time of writing, but if it is there now, it's a ZIP of the examples directory for easier download.

Creating Slideshow Content

Slideshow Controls

B: Make content/font bigger (like zooming in)
S: Make content/font smaller (like zooming out)
F: Show/hide bottom bar
A: Toggle showing of all slides at once
Home: Go to first slide
End: Go to last slide

Build Script

The build script is at bin/build.pl. You can run

$ ./build.pl -h

To get options/help.

Hint: You can use the LiveReload app (available on the Mac AppStore) to automatically run the build script when files in the repo/directory change.

ZIP File

The ZIP file in the archive is created with the command

zip -r workshop.zip examples

Slide Levels

A second-level header will create a normal content slide, e.g.

## I am a slide

I am content on the slide, with images and lists and whatnot.

A first-level header will create a title-only slide, to be used to split up sections in slide decks. e.g.

# This is a title slide

This content wouldn't show up because it's on a title-only slide. So don't put anything here.

Image alignment and styling on slides

Default

Markdown like this:

## Signs of the Apocalypse are Everywhere!

![](images/01-iphone-adoption-graph.png)

will result in an image floated left, with styling/background/border, spanning approximately half of the slide horizontally.

Other Alignments

Note: The text in the heading elements used in the following examples is not displayed to the screen.

Reverse Alignment

Reverse-aligned images are presently about the same as default, but with the float to the right. To effect this, use code like:

### Reverse: Android Fragmentation

![](images/01-there-is-no-android.jpg)

That is, a heading of any level that starts with the word Reverse and an image within that section.

Figures/Spanning Full Width

You can also make a standalone image slide, in which the image spans full width and has less background space used.

Do this by using:

### Figure: Opera Mini Growth Chart

![](images/01-opera-mini-growth.png)

That is, any heading level that starts with Figure, containing an image.

Illustrative Images

There is also a way to remove all background styling from images and have them span wide. I'm using this for images that are "illustrative" versus figurative.

This can be done with:

## Illustration: Pew Pew

![](images/03-pew.png)

That is, any heading element starting with Illustration that has a contained image.

Image Captions

You can add captions to any of the image types listed above by doing this:

![I'm too fat!](images/02-my-fat-site.png "My fat site")

cloudfour / workshop-here-everywhere