ContributorsHelena Rasche Bérénice Batut Saskia Hiltemann
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?
Create a new set of slides
Add presenter comments
- Introduce a subject
- Quick overview
- Not too much text
- Images are Nice
- 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.
- 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
- 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.
.pull-left[ Slide Title
- Item 1
- Item 2
and numbered list
Some text with a link and an 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: <img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="Description of the image. " loading="lazy"> ---
Slides begin with a title
### ... and should end with a
- 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.
.left[Left-aligned text] .center[Centered text] .right[Right-aligned text] .left .center .right
.left[Left-aligned text] .center[Centered text] .right[Right-aligned text] .left[<img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="Left-aligned image. " loading="lazy">] .center[<img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="Centered image. " loading="lazy">] .right[<img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="Right-aligned image. " loading="lazy">]
- 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
- Incremental text can be added
- And appears incrementally on every slide.
Just separate every item with two dashes (
1. Item -- 2. Appears
- 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.
] .pull-right[ Source:
10% .image-10[ <img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="GTN Logo. " loading="lazy"> ] 50% .image-50[ <img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="GTN Logo. " loading="lazy"> ]
There are other CSS classes available for other sizes
- 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.
column1 | column2 | column3 — | — | — aaaaaaaaaa | bbbb | cccc dddd | eeeeeeeeeeee | ffff gggg | hhhh | iiiiiiiiii ]
column1 | column2 | column3 --- | --- | --- aaaaaaaaaa | bbbb | cccc dddd | eeeeeeeeeeee | ffff gggg | hhhh | iiiiiiiiii
By default, tables are left-aligned with text left-aligned.
- 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
| Tables | Are | Cool | |:-------------|:--------:|--------------:| | left-aligned | centered | right-aligned | | row2 | row2 | row2 |
- 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.
Content with footnotes
.footnote[Normal footnote with plenty of text]
.footnote[Normal footnote with plenty of text]
- 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[ 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[ <img src="/archive/2021-12-01/assets/images/GTN-60px.png" alt="GTN Logo. " loading="lazy"> ]
Will be rendered as:
- 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
.pull-left[ Some text, as many text as we want…..
or even table
column1 | column2 | column3 — | — | — row1 | r1c2 | r1c3 row2 | r2c2 | r2c3 row3 | r3c2 | r3c3 ]
- 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.
Allows you to:
- See the next slide before the audience
- See notes you have made on your slides
- 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
Things written below the Speaker Notes are only shown in the presenter view. Press
p to bring this up
- 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.
- ? activates help
- Escape leaves help
- p activates presenter mode
- f activates full screen mode
- c clones the slides into a popup
- 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.
- 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 ]
.pull-right[ .image-100 ]
- 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