Creating Slides

Helena Rasche

Bérénice Batut

Saskia Hiltemann

Updated: Jul 26, 2021

Or view the plain-text slides without JS

Tip: press P to view the presenter notes

1 / 22

Presenter notes contain extra information which might be useful if you intend to use these slides for teaching.

Press P again to switch presenter notes off

Press C to create a new window where the same presentation will be displayed. This window is linked to the main window. Changing slides on one will cause the slide to change on the other. Useful when presenting.

How to format slides?
How do we add presenter notes?
How to use the features of the slide show tool?
What sort of content should be included in slides?

2 / 22

Create a new set of slides
Add presenter comments

3 / 22

Slides

Introduce a subject
Quick overview
Not too much text
Images are Nice

4 / 22

Slides a great way to introduce an audience to your subject.
They're best to use for a quick overview, not a detailed look at the subject.
Lots of images can be a good choice to communicate information, and avoid slides full of text when possible as learners can get bored or distracted.

Content

Background information for the tutorial. E.g.:
- Motivation why X is useful
- Concepts needed to get most out of tutorial
Examples relevant to audience
- Avoid: "here is a feature to add link type tracks"
- Try for: "If you want to visualise SVs in cancer, ... this link type tracks are useful"
- Try for: Using examples from existing papers

5 / 22

If your slides are attached to a tutorial, then they can be a good place to provide learners with motivation for the tutorial.
If you can provide examples that are relevant to your audience, this will encourage them to follow the tutorial.
Try to avoid dry text and links to external resources whenever possible, those can be best in the tutorial which a learner would read at their own pace, rather than slides which are presented at the presenter's pace.

Formatting: Basic

Slide Title

A list

Item 1
Item 2

and numbered list

Item
Item

Some text with a link and an image:

Description of the image

### Slide Title
A list
- Item 1
- Item 2
and numbered list
1. Item
2. Item
Some text with a [link](https://example.org/) and an image:
![Description of the image](/archive/2021-08-01/assets/images/GTN-60px.png)
---

Slides begin with a title ### ... and should end with a ---

6 / 22

Slides are written with standard markdown, and begin with a header, and end with three dashes.
Lists, links, and images are all written with their normal syntax.
If you're familiar with markdown and already writing your tutorial in it, this should be an easy addition.
The only differences are the dashes to separate slides, and speaker notes which we'll cover later.

Formatting: Alignment

Left-aligned text Centered text Right-aligned text Left-aligned image Centered image Right-aligned image

.left[Left-aligned text]
.center[Centered text]
.right[Right-aligned text]
.left[![Left-aligned image](/archive/2021-08-01/assets/images/GTN-60px.png)]
.center[![Centered image](/archive/2021-08-01/assets/images/GTN-60px.png)]
.right[![Right-aligned image](/archive/2021-08-01/assets/images/GTN-60px.png)]

7 / 22

Everything can be aligned using several CSS classes which are provided, left, right, and center.
The classes are added with a dot followed by the class, and then the contents within square brackets.

Formatting: Incremental Text

Item

8 / 22

Incremental text can be added

Formatting: Incremental Text

Item
Appears

9 / 22

Incremental text can be added

And appears incrementally on every slide.

Formatting: Incremental Text

Item
Appears

Just separate every item with two dashes (--)

1. Item
--
2. Appears

10 / 22

Incremental text can be added

And appears incrementally on every slide.

You can accomplish this with two dashes instead of three for incremental slides.
The dashes should be on their own line, just like the slide separating dashes.

Formatting: Images

Demo:

10%

GTN Logo (tiny)

50%

GTN Logo (slightly larger)

Source:

10%
.image-10[
  ![GTN Logo](/archive/2021-08-01/assets/images/GTN-60px.png)
]
50%
.image-50[
  ![GTN Logo](/archive/2021-08-01/assets/images/GTN-60px.png)
]

There are other CSS classes available for other sizes

11 / 22

There are a number of CSS classes available to use for styling the content you show on your slides.
Here you can see images scaled to 10% and 50%.
There are a number of other classes that you can find in the GTN's codebase.

Formatting: Tables

Demo:

column1	column2	column3
aaaaaaaaaa	bbbb	cccc
dddd	eeeeeeeeeeee	ffff
gggg	hhhh	iiiiiiiiii

Source:

column1    | column2      | column3
---        | ---          | ---
aaaaaaaaaa | bbbb         | cccc
dddd       | eeeeeeeeeeee | ffff
gggg       | hhhh         | iiiiiiiiii

By default, tables are left-aligned with text left-aligned.

12 / 22

Tables can be written in the simplified markdown syntax, or using a more complex one that allows for alignment.
Here a simple table is shown with several columns.
The tables do not need to be aligned, we just did that in this slide for clarity.

Formatting: Tables with Aligned Text

Different alignments for the individual columns can be controlled with the : character

Demo:

Tables	Are	Cool
left-aligned	centered	right-aligned
row2	row2	row2

Source:

| Tables       | Are      | Cool          |
|:-------------|:--------:|--------------:|
| left-aligned | centered | right-aligned |
| row2         | row2     | row2          |

13 / 22

If you need more complex tables, you can use the colon character to control the alignment.
If you are presenting numeric data or similar then this can be useful to make the data more readable.

Formatting: Footnotes

Content with footnotes

Source:

.footnote[Normal footnote with plenty of text]

Demo:

Normal footnote with plenty of text

14 / 22

Footnotes can be used for explanatory notes or adding things like references.
References are ideal footnote content as they are not necessarily important for comprehension of the slides, but might be useful later for learners.

Formatting: Two Columns

This is achived with the .pull-left and .pull-right classes.

.pull-left[
Some text, as many texts as we want...
or even table
column1 | column2 | column3
--- | --- | ---
row1 | r1c2 | r1c3
row2 | r2c2 | r2c3
row3 | r3c2 | r3c3
]
.pull-right[ ![GTN Logo](/archive/2021-08-01/assets/images/GTN-60px.png) ]

Will be rendered as:

15 / 22

Two column layouts can easily be achieved with the pull left and pull right classes.
The result of this is demonstrated on the next slide.

Formatting: Two Columns

Some text, as many text as we want.....

or even table

column1	column2	column3
row1	r1c2	r1c3
row2	r2c2	r2c3
row3	r3c2	r3c3

GTN Logo

16 / 22

Any content can be placed in the left and right columns
The addition of these classes will wrap all of their contents and place them on the left or right sides.
The two column layout is an especially good choice if you want to show a graphic and discuss some important points related to it.

Presenter Notes

Allows you to:

See the next slide before the audience
See notes you have made on your slides

Image showing presenter mode

17 / 22

Presenter Mode lets you have two windows with the same slides, one with presenter notes and a preview of the upcoming slide.
When giving presentations with multiple screens or on a projector, this makes life less stressful.
You can use the presenter notes to remind you, and others, of important content to mention on each slide.

Presenter Notes: Formatting

### My Slide

Some text!

???

Things written below the ??? are only shown in the presenter view. Press p to bring this up

---

18 / 22

Things written below the three question marks are only shown in the presenter view.
Press P to bring this up, and the question mark to show the presenter view shortcut keys.

Shortcut Keys

? activates help
Escape leaves help
p activates presenter mode
f activates full screen mode
c clones the slides into a popup

19 / 22

The key to close the help isn't shown in the keyboard shortcuts, but it is the escape key.
There are a number of other shortcuts which can be useful to know about.
The clone window function creates a popup with a copy of the slides, this can be used to show the presenter notes on one screen, and the actual slides on another screen that learners can see.

Videos

Slides with good speaker notes can be turned into videos

Enable this in the metadata of the slides:

title: "Creating Slides"
video: true
questions:
- "How to format slides?"

automatically rendered into narrated videos by the GTN

Screenshot of GTN video player showing a set of slides with a play icon and a transcript

20 / 22

The GTN automatically creates videos from selected slide decks.
Simply by setting video to true to the metadata, slides with sufficiently good speaker notes can be automatically turned into videos.
The slides have audio narration spoken from the script of the speaker notes by AWS Polly.
The audio clips, and slides are combined into a video which is then available in the GTN Video Library

Slides are often presented before the hands-on portion, provide relevant background information
Provide examples that are relevant to your audience

21 / 22

Thank you!

This material is the result of a collaborative work. Thanks to the Galaxy Training Network and all the contributors!

Helena Rasche

Bérénice Batut

Saskia Hiltemann

Galaxy Training Network

This material is licensed under the Creative Commons Attribution 4.0 International License.

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Creating Slides

question Questions

objectives Objectives

Slides

Content

Formatting: Basic

Formatting: Alignment

Formatting: Incremental Text

Formatting: Incremental Text

Formatting: Incremental Text

Formatting: Images

Formatting: Tables

Formatting: Tables with Aligned Text

Formatting: Footnotes

Formatting: Two Columns

Formatting: Two Columns

Presenter Notes

Presenter Notes: Formatting

Shortcut Keys

Videos

keypoints Key points

Thank you!

question Questions

Help