Створення презентацій у Кузні контенту

# Створення презентацій у Кузні контенту [TOC] ## Режим презентацій Презентації, створені у «Кузні контенту», працюють на Markdown. Це мова розмітки, функції якої є за [посиланням](https://content.hneu.edu.ua/s/features). Щоб перетворити документ на презентацію, розділіть контент на слайди. Потім у **Меню** <i class="fa fa-caret-down"></i> виберіть <i class="fa fa-tv fa-fw"></i> **Режим презентації**. Презентації коректно відображаються на всіх пристроях. Щоб детальніше зрозуміти, як працює режим презентації, перейдіть за [посиланням](https://content.hneu.edu.ua/p/4j-YeAoZu#/). Знаходячись у режимі презентації, натисність `Esc`, щоб переглянути структуру. Клавіша `S` відкриває режим спікера з таймером доповіді, а `B` зупиняє презентацію. ## Слайди Слайд — окрема сторінка презентації. Для налаштування слайдів є тег ``. Після двокрапки вказуються команди, які ми розглянули нижче. Рекомендуємо писати тег на початку слайду. ### Створення Для створення окремого слайду розділіть текст трьома дефісами `---`. Для створення слайду у поточній гілці вкажіть чотири дефіси `----`. Між цією командою і текстом слайду має бути пустий рядок. Приклад: ```! Слайд 1 --- Слайд 2 ---- Слайд 2.1 ``` ### Анімація Для анімації слайду є команда `data-transition="..."`. У лапках вкажіть її назву: `slide`, `zoom`, `fade`, `concave`, `convex` та `none`. Приклад: ```!  Слайд 1 ---  Слайд 2 ``` Кастомізуйте анімацію, додавши їй напрям. Для цього через дефіс після назви анімації вкажіть постфікс `in` чи `out`. Приклад: ```!  Слайд 1 --- ``` Швидкість анімації вказується у команді `data-transition-speed="..."`. На місці трьох крапок вкажіть `slow`, `fast` та `default`. Приклад: ```!  Слайд 1 --- ``` ### Колір та зображення фону Скористаємося командою `data-background="..."`. Замість трьох крапок вкажіть колір у HEX-форматі. Знайти колір, що починається з символу `#`, можна за [посиланням](https://htmlcolorcodes.com/color-picker/). Приклад: ```!  Слайд 1 --- ``` За допомогою цієї команди також можна встановити зображення фону. Для цього на місці трьох крапок вкажіть посилання на зображення. Приклад: ```!  Слайд 1 --- ``` ## Фрагменти Фрагмент — засіб роботи з окремими елементами. Докладніше про це за [посиланням](https://revealjs.com/fragments/). ### Порядок відображення Ця функція потрібна, коли треба, щоб текст з'являвся поетапно, а саме після натискання на клавіатурі на стрілку вправо або пробіл. Якщо такий текст починається з нового рядка, скористайтеся тегом `div`, якщо текст повинен залишатися на тому ж рядку — тег `span`. Вкажіть клас `class="fragment"` та команду `data-fragment-index="..."`. На місці трьох крапок вкажіть число, яке відповідає порядку появи елементів. Приклад. Уявіть, що на одному слайді є 2 фрагменти. Один у `data-fragment-index="..."` має значення 0, а інший 1. Тоді коли ви перший раз натиснете на стрілку вправо чи пробіл, з'явиться елемент зі значенням 0. Коли ви натиснете другий раз, з'явиться елемент зі значенням 1. Приклад: ```! Слайд 1 <div class="fragment" data-fragment-index="0"> Рядок, який з'явиться після натискання стрілки вправо чи пробілу. </div> --- Слайд 2 Перше слово та <span class="fragment" data-fragment-index="0">друге слово, яке з'явиться у цьому ж рядку після натискання стрілки вправо чи пробілу. </span> --- Слайд 3 <div class="fragment" data-fragment-index="0"> Рядок, який з'явиться після першого натискання стрілки вправо чи пробілу. </div> <div class="fragment" data-fragment-index="1"> Рядок, який з'явиться після другого натискання стрілки вправо чи пробілу. </div> ``` ### Колір тексту Для цього є команда-клас `highlight-...`. Замість трьох крапок вкажіть `red`, `blue` чи `green`. Приклад: ```! Слайд 1 <div class="fragment highlight-red"> Текст, у якого з'явиться колір після натискання стрілки вправо чи пробілу. </div> --- ``` ### Анімація Для анімації окремих елементів у класі вкажіть значення `grow`, `shrink`, `fade-out` та `fade-up`, `down`, `left` і `right`. Приклад: ```! Слайд 1 <div class="fragment shrink"> Анімація окремого рядка, яка з'явиться після натискання стрілки вправо чи пробілу. </div> --- ```