name: inverse layout: true class: center, middle, inverse <div class="my-header"><span> <a href="/archive/2021-05-01/topics/contributing" title="Return to topic page" ><i class="fa fa-level-up" aria-hidden="true"></i></a> <a class="nav-link" href="https://github.com/galaxyproject/training-material/edit/2021-05-01/topics/contributing/tutorials/create-new-tutorial-slides/slides.html"><i class="fa fa-pencil" aria-hidden="true"></i></a> </span></div> <div class="my-footer"><span> <img src="/archive/2021-05-01/assets/images/GTN-60px.png" alt="Galaxy Training Network" style="height: 40px;"/> </span></div> --- <img src="/archive/2021-05-01/assets/images/GTN.png" alt="Galaxy Training Network" class="cover-logo"/> # Creating Slides <div class="contributors-line"> <a href="/archive/2021-05-01/hall-of-fame/hexylena/" class="contributor-badge"><img src="https://avatars.githubusercontent.com/hexylena" alt="Helena Rasche">Helena Rasche</a> <a href="/archive/2021-05-01/hall-of-fame/bebatut/" class="contributor-badge"><img src="https://avatars.githubusercontent.com/bebatut" alt="Bérénice Batut">Bérénice Batut</a> <a href="/archive/2021-05-01/hall-of-fame/shiltemann/" class="contributor-badge"><img src="https://avatars.githubusercontent.com/shiltemann" alt="Saskia Hiltemann">Saskia Hiltemann</a> </div> .footnote[Tip: press `P` to view the presenter notes] ??? 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. --- ### <i class="far fa-question-circle" aria-hidden="true"></i><span class="visually-hidden">question</span> Questions - 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? --- ### <i class="fas fa-bullseye" aria-hidden="true"></i><span class="visually-hidden">objectives</span> Objectives - Create a new set of slides - Add presenter comments --- # Slides - Introduce a subject - Quick overview - Not too much text - Images are Nice --- ## 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 --- ## Formatting: Basic .pull-left[ <span style="font-size: 35px;font-family: 'Yanone Kaffeesatz';font-weight: normal;text-align: center;">Slide Title</span> A list - Item 1 - Item 2 and numbered list 1. Item 2. Item Some text with a [link](https://example.org/) and an image:  ] .pull-right[ ```markdown ### 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:  --- ``` ] Slides begin with a title `### ...` and should end with a `---` ??? It's standard markdown. There is less need to follow semantic heading guidelines (not skipping levels). Slides should begin with a header and end with `---` --- ### Formatting: Alignment .left[Left-aligned text] .center[Centered text] .right[Right-aligned text] .left[] .center[] .right[] ```markdown .left[Left-aligned text] .center[Centered text] .right[Right-aligned text] .left[] .center[] .right[] ``` ??? Alignment is not too complex, just css classes being applied to contents. --- ### Formatting: Incremental Text 1. Item -- 2. Appears -- Just separate every item with two dashes (`--`) ```markdown 1. Item -- 2. Appears ``` --- ### Formatting: Images .pull-left[ Demo: 10% .image-10[  ] 50% .image-50[  ] ] .pull-right[ Source: ```markdown 10% .image-10[  ] 50% .image-50[  ] ``` ] There are [other CSS classes available](https://github.com/galaxyproject/archive/2021-05-01/blob/main/assets/css/slides.css#L67) for other sizes --- ### Formatting: Tables .pull-left[ Demo: column1 | column2 | column3 --- | --- | --- aaaaaaaaaa | bbbb | cccc dddd | eeeeeeeeeeee | ffff gggg | hhhh | iiiiiiiiii ] .pull-right[ Source: ```markdown column1 | column2 | column3 --- | --- | --- aaaaaaaaaa | bbbb | cccc dddd | eeeeeeeeeeee | ffff gggg | hhhh | iiiiiiiiii ``` ] By default, tables are left-aligned with text left-aligned. ??? The tables do not need to be aligned, we just did that in this slide for legibility / clarity. --- ### Formatting: Tables with Aligned Text Different alignments for the individual columns can be controlled with the `:` character .pull-left[ Demo: | Tables | Are | Cool | |:-------------|:--------:|--------------:| | left-aligned | centered | right-aligned | | row2 | row2 | row2 | ] .pull-right[ Source: ```markdown | Tables | Are | Cool | |:-------------|:--------:|--------------:| | left-aligned | centered | right-aligned | | row2 | row2 | row2 | ``` ] --- ### Formatting: Footnotes Content with footnotes Source: ```markdown .footnote[Normal footnote with plenty of text] ``` Demo: .footnote[Normal footnote with plenty of text] --- ### Formatting: Two Columns This is achived with the `.pull-left` and `.pull-right` classes. ```markdown .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[  ] ``` Will be rendered as: --- ### 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 ] .pull-right[  ] --- ## Presenter Notes Allows you to: - See the next slide before the audience - See notes you have made on your slides  --- ### Presenter Notes: Formatting ``` ### My Slide ??? Things written below the ??? are only shown in the presenter view. Press `p` to bring this up --- ``` ??? Things written below the ??? are only shown in the presenter view. Press `p` to bring this up --- ## Shortcut Keys - <kbd>?</kbd> activates help - <kbd>Escape</kbd> leaves help - <kbd>p</kbd> activates presenter mode - <kbd>f</kbd> activates full screen mode ??? The key to close the help isn't shown in the keyboard shortcuts so participants may need to be informed about this. --- ### <i class="fas fa-key" aria-hidden="true"></i><span class="visually-hidden">keypoints</span> Key points - Slides are often presented before the hands-on portion, provide relevant background information - Provide examples that are relevant to your audience --- ## Thank you! This material is the result of a collaborative work. Thanks to the [Galaxy Training Network](https://wiki.galaxyproject.org/Teach/GTN) and all the contributors! <div class="contributors-line"> <a href="/archive/2021-05-01/hall-of-fame/hexylena/" class="contributor-badge"><img src="https://avatars.githubusercontent.com/hexylena" alt="Helena Rasche">Helena Rasche</a> <a href="/archive/2021-05-01/hall-of-fame/bebatut/" class="contributor-badge"><img src="https://avatars.githubusercontent.com/bebatut" alt="Bérénice Batut">Bérénice Batut</a> <a href="/archive/2021-05-01/hall-of-fame/shiltemann/" class="contributor-badge"><img src="https://avatars.githubusercontent.com/shiltemann" alt="Saskia Hiltemann">Saskia Hiltemann</a> </div> <img src="/archive/2021-05-01/assets/images/GTN.png" alt="Galaxy Training Network" style="height: 100px;"/> This material is licensed under the <a rel="license" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.