https://github.com/cloudfour/workshop-here-everywhere
Workshop: How to get from Here to Everywhere (Taking your web skills mobile)
https://github.com/cloudfour/workshop-here-everywhere
Last synced: about 1 year ago
JSON representation
Workshop: How to get from Here to Everywhere (Taking your web skills mobile)
- Host: GitHub
- URL: https://github.com/cloudfour/workshop-here-everywhere
- Owner: cloudfour
- Created: 2012-04-20T18:49:10.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2013-03-14T04:55:51.000Z (about 13 years ago)
- Last Synced: 2025-01-21T13:45:19.132Z (about 1 year ago)
- Language: PHP
- Size: 57.5 MB
- Stars: 1
- Watchers: 10
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.mdown
Awesome Lists containing this project
README
# 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!
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
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
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
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:
