assets
: Web fonts and CSS SASS source styles, primarily. OUTPUT for CSS:workshop.css
stays here.fieldnotes.css
goes intoexamples
directory (this is from settings in my SASS compiler).common.scss
doesn't have an output; it is included and wrapped into bothworkshop.css
andfieldnotes.css
. Find old versions of the workshop inassets/archive
.bin
: Build scriptcontent
: Content files for presentation and field notes. Put relevant images for content incontent/images
.examples
: Files for attendees.fieldnotes.html
outputs here (fromfieldnotes.content
incontent
directory). Any images necessary for fieldnotes should go inexamples/images
.presentation
: Presentation HTML files (slidy HTML5 presentation)presenter-examples
: Examples for presenters to use; not necessary for attendeesscratch
: Working area for in-workshop demos. Any files here (except theREADME
) are ignored by git.workshop.zip
: Doesn't exist at time of writing, but if it is there now, it's a ZIP of theexamples
directory for easier download.
B
: Make content/font bigger (like zooming in)S
: Make content/font smaller (like zooming out)F
: Show/hide bottom barA
: Toggle showing of all slides at onceHome
: Go to first slideEnd
: Go to last slide
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.
The ZIP file in the archive is created with the command
zip -r workshop.zip examples
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.
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.
Note: The text in the heading elements used in the following examples is not displayed to the screen.
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.
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.
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.
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")