|
|
For a "Quick Start Guide" to `decker` see [this page](Quick-Start).
|
|
|
|
|
|
For an FAQ see [this page](FAQ).
|
|
|
|
|
|
# Documentation
|
|
|
|
|
|
## Keyboard Shortcuts
|
|
|
- <kbd>N</kbd>, <kbd>SPACE</kbd>: Next slide
|
|
|
- <kbd>P</kbd>: Previous slide
|
|
|
- <kbd>←</kbd>, <kbd>H</kbd>: Navigate left
|
|
|
- <kbd>→</kbd>, <kbd>L</kbd>: Navigate right
|
|
|
- <kbd>↑</kbd>, <kbd>K</kbd>: Navigate up
|
|
|
- <kbd>↓</kbd>, <kbd>J</kbd>: Navigate down
|
|
|
- <kbd>Home</kbd>: First slide
|
|
|
- <kbd>End</kbd>: Last slide
|
|
|
- <kbd>B</kbd>, <kbd>.</kbd>: Pause (Blackout)
|
|
|
- <kbd>F</kbd>: Fullscreen
|
|
|
- <kbd>ESC</kbd>, <kbd>O</kbd>: Slide overview / Escape from full-screen
|
|
|
- <kbd>S</kbd>: Speaker notes view
|
|
|
- <kbd>?</kbd>: Show keyboard shortcuts
|
|
|
- <kbd>alt</kbd> + click: Zoom in. Repeat to zoom back out.
|
|
|
|
|
|
Inherited from [reveal.js](https://github.com/hakimel/reveal.js/wiki/Keyboard-Shortcuts).
|
|
|
|
|
|
|
|
|
## YAML-Header
|
|
|
|
|
|
| Parameter | Options | Effect |
|
|
|
|---------------|----------------------------------|--------------------------------|
|
|
|
| `author` | String | Displayed on first slide |
|
|
|
| `date` | String | Displayed on first slide |
|
|
|
| `title` | String | Displayed on first slide |
|
|
|
| `subtitle` | String | Displayed on first slide |
|
|
|
| `controls` | `0` or `1` | Turn arrow controls on/off |
|
|
|
| `progress` | `0` or `1` | Turn progress bar on/off |
|
|
|
| `slideNumber` | `true` or `false` | Turn slide numbers on/off |
|
|
|
| `lang` | Any ISO Language Code (eg. `de`) | HTML content language |
|
|
|
| `dir` | `RTL` or `LTR` | Text content direction |
|
|
|
| `author-meta` | | HTML document header meta data |
|
|
|
| `date-meta` | | HTML document header meta data |
|
|
|
| `keywords` | | HTML document header meta data |
|
|
|
| `theme` | | |
|
|
|
| `css` | | Additional CSS resources |
|
|
|
| `history` | `true` or `false` | Show slides in browser history |
|
|
|
|
|
|
A complete list of all meta data options can be found in the Pandoc HTML template(`resource/template/deck.html`).
|
|
|
|
|
|
## Columns
|
|
|
|
|
|
A column slide can be defined by `{layout="columns"}` in the slide header and by defining the orientation and scope each column in subheaders with `{.left}`, `{.center}` (optional), or `{.right}` tags.
|
|
|
|
|
|
| Tag | Target | Effect | Example |
|
|
|
|----------------------|-------------------------------------------------|------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|
|
|
|
| `{layout="columns"}` | Slide headers (`#`) | Use columns of this slide | `# Slide header {layout="columns"}` |
|
|
|
| `{.left}` | Secondary headers (`##`) | Define start of left column | `## {.left}` or `## Text {.left}` |
|
|
|
| `{.center}` | Secondary headers (`##`) | Define start of central column (optional) | |
|
|
|
| `{.right}` | Secondary headers (`##`) | Define start of right column | |
|
|
|
| `{.top}` | Secondary headers (`##`) | Define start of top row | |
|
|
|
| `{.bottom}` | Secondary headers (`##`) | Define start of bottom row | |
|
|
|
| `{.mid}` | Slide headers (`#`) or secondary headers (`##`) | Vertically centers columns. Can be assigned to the slider header for all columns or to individual columns. | `# Text {layout="columns" .mid}` or `## {.right .mid}` |
|
|
|
|
|
|
### Example:
|
|
|
In this Wiki you will find documentation and instructional material for Decker.
|
|
|
|
|
|
```
|
|
|
# Slide header {layout="columns"}
|
|
|
# Welcome to Decker
|
|
|
Decker is an e-authoring tool for the creation of web-based educational content.
|
|
|
|
|
|
[[_TOC_]]
|
|
|
|
|
|
|
|
|
# Setup
|
|
|
|
|
|
Decker software is under active development. Use our [feedback and bug tracker](https://gitlab2.informatik.uni-wuerzburg.de/decker/feedback) if you run into problems or want to share your ideas with us. Just open a new issue!
|
|
|
|
|
|
|
|
|
## Windows
|
|
|
|
|
|
Download: [Windows Installer](http://store.hci.informatik.uni-wuerzburg.de/decker/Decker-nightly.msi)
|
|
|
|
|
|
- Click the link and download the Microsoft Installer file, `Decker-nightly.msi`.
|
|
|
- Find the file in your `Downloads` folder and install Decker by double clicking it and following the installer instructions.
|
|
|
- If you have installed Decker previously you might need to manually uninstall the previous version. The Windows installer does not yet support automatic reinstallation.
|
|
|
|
|
|
|
|
|
## MacOS
|
|
|
|
|
|
Download: [MacOS Installer](http://store.hci.informatik.uni-wuerzburg.de/decker/Decker-nightly.pkg)
|
|
|
|
|
|
- Click the link and download the MacOS package `Decker-nightly.pkg`.
|
|
|
- Find the file in your `Downloads` folder. Right-click to open the file and follow the installer instructions.
|
|
|
|
|
|
|
|
|
## Linux
|
|
|
|
|
|
A linux executable is available here: [decker-linux-nightly](http://store.hci.informatik.uni-wuerzburg.de/decker/decker-linux-nightly)
|
|
|
|
|
|
- Rename the file to `decker`.
|
|
|
- Enter `chmod +x decker` on the command line to make the file executable.
|
|
|
- Move the executable to a directory that is on `$PATH` to be able to use `decker` anywhere.
|
|
|
|
|
|
# First Steps
|
|
|
After downloading the correct Decker version for your operating system from the [Setup](home#setup), follow this guide to learn the basics of Decker.
|
|
|
|
|
|
## Windows
|
|
|
|
|
|
- Use the Windows file explorer to navigate to a folder suitable for saving presentations. We suggest creating a new folder e.g. `C:\Users\<username>\Documents\presentations`.
|
|
|
- Open a *Console* by typing `powershell` in the address bar of the file explorer.
|
|
|
- Continue with subsection [*Opening a presentation*](Home#opening-a-presentation).
|
|
|
|
|
|
## MacOS
|
|
|
|
|
|
## Optional column title with vertically centered content {.left .mid}
|
|
|
- Use Finder to navigate to a folder suitable for saving presentations. We suggest creating a new folder e.g. `/Users/<username>/Documents/presentations`.
|
|
|
- Open a *Console* by right clicking the folder symbol and choosing `Services > New Terminal at Folder`.
|
|
|
- Continue with subsection [*Opening a presentation*](Home#opening-a-presentation).
|
|
|
|
|
|
## Subheader in the left column
|
|
|
## Opening a presentation
|
|
|
|
|
|
## Optional center column {.center}
|
|
|
- Type `decker example` in the *Console*. This will generate a new folder named `example`.
|
|
|
- Navigate to this new folder by typing `cd example` in the *Console*. If you close the *Console* the presentation might not be loaded correctly, therefore we recommend to only close the *Console* after concluding the presentation.
|
|
|
- Type `decker server` in the *Console*. This command will open a local web server.
|
|
|
- Open a web browser (we recommend Google Chrome). If you don't have another instance of this server running open, type [http://localhost:8888/](http://localhost:8888/) in the address bar.
|
|
|
- You should now see a Decker presentation designed to provide an overview of some of the features that Decker offers.
|
|
|
- To close the server created by Decker, either close the *Console* or terminate the process by using the keyboard shortcut.
|
|
|
|
|
|
## {.right}
|
|
|
Many of our users simply use `decker example` and rename/modify the `example-deck` to create their own presentation.
|
|
|
|
|
|
# Slide with central columns {layout="columns" .mid}
|
|
|
# Creating your first presentation
|
|
|
|
|
|
Now we will get into creating your own presentations with Decker:
|
|
|
|
|
|
- Keep `decker server` and your browser window on `localhost:8888` running in the background.
|
|
|
- Create and open a file called e.g. `minimal-deck.md` in the `example` folder.
|
|
|
- Your presentation files **must** have the ending `-deck.md`.
|
|
|
- Copy the following text or write your own. We recommend text editors such as [**Notepad++**](https://notepad-plus-plus.org/) or [**Visual Studio Code**](https://code.visualstudio.com/).
|
|
|
|
|
|
```
|
|
|
# This is a new slide!
|
|
|
|
|
|
Lorem ipsum
|
|
|
|
|
|
## This is a sub-heading
|
|
|
|
|
|
dolor sit
|
|
|
|
|
|
# This is slide number two!
|
|
|
|
|
|
amet
|
|
|
```
|
|
|
- Save the file and take a look at your browser window. On the `Generated Index` page under `Slide decks` there should be a new presentation called `minimal-deck.html`
|
|
|
- The presentation running in your browser window will update itself with any changes made to the `-deck.md` file after saving it.
|
|
|
|
|
|
# Contents of a Decker project folder
|
|
|
|
|
|
In the simplest case, a new Decker presentation consists of the following files:
|
|
|
|
|
|
- `decker.yaml`: A file containing configuration option. If you have never used Decker before you should copy the one that is located in the `example` folder generated by Decker.
|
|
|
- At least one file called `*-deck.md`. This is a text file in the popular `Markdown` format.
|
|
|
|
|
|
After running e.g. `decker server`, Decker will have generated additional files and folders:
|
|
|
|
|
|
## Dense Slide Layouts
|
|
|
- `public`: This folder contains your generated `html` presentation and files that are needed by the `html` files to look nice and function during a presentation. Everything in `public` is generated or copied automatically and will be so again if the folder is deleted.
|
|
|
- `.decker`: A hidden folder (depending on your system settings you might not even see it) where some auto-generated files are located. This folder is unimportant for you as a user.
|
|
|
|
|
|
Slides can be vertically compressed to decrease the height of the content by assigning `{.dense}`, `{.x-dense}`, or `{.xx-dense}` to slide headers.
|
|
|
## File paths
|
|
|
|
|
|
| Tag | Target | Effect | Example |
|
|
|
|---------------|---------------------|----------------------------------|------------------------|
|
|
|
| `{.dense}` | Slide headers (`#`) | Decrease height of content | `# Header {.dense}` |
|
|
|
| `{.x-dense}` | Slide headers (`#`) | Additionally, decrease font size | `# Header {.x-dense}` |
|
|
|
| `{.xx-dense}` | Slide headers (`#`) | Further decrease font size | `# Header {.xx-dense}` |
|
|
|
Paths to local file resources that are referenced by slide sets need to be provided in several contexts. For example:
|
|
|
|
|
|
- as a URL in an image tag to locate local media files like images or videos (learn more about including media files on the page [Media](Media))
|
|
|
|
|
|
``` {.markdown}
|
|
|
## A very important image
|
|
|
![](image.png)
|
|
|
```
|
|
|
|
|
|
- as the value of meta data variables, for example to provide the location of the bibliography database and the citation style definition
|
|
|
|
|
|
``` {.yaml}
|
|
|
bibliography: /bib/bibliography.tex
|
|
|
csl: /bib/chicago-author-data.csl
|
|
|
```
|
|
|
|
|
|
In any case, path values for local file resources are interpreted either as relative to the defining file, if specified as a *relative path*, or as relative to the project root directory, if specified as an *absolute path*.
|
|
|
|
|
|
Consider the following project layout and file contents:
|
|
|
|
|
|
``` {.txt}
|
|
|
project
|
|
|
├── images
|
|
|
│ └── image.png
|
|
|
└── slides
|
|
|
└── slide-deck.md
|
|
|
```
|
|
|
|
|
|
`slides/slide-deck.md` contains:
|
|
|
|
|
|
``` {.markdown}
|
|
|
# First slide
|
|
|
|
|
|
![Project relative path](/images/image.png)
|
|
|
![Document relative path](../images/image.png)
|
|
|
```
|
|
|
|
|
|
Both image paths reference the same image file. |
|
|
\ No newline at end of file |