Модуль I · IT Skills (Cloud Services & Documents) · тема 3, урок 1 з 2 · 120 хвилин · класи 9A і 9B
Мета. Побудувати структуру виступу за даними власного
опитування з теми 2. А потім зверстати її каркасом презентації на
reveal.js — звичайною веб-сторінкою, яку відкриває браузер.
Головна думка уроку одна: презентація — це історія, а не набір слайдів. Слайд не має пояснювати замість тебе. Він показує одну думку, поки ти говориш.
Перевір себе так. Прибери проєктор — виступ розсипався? Значить, історії не було, був конспект на екрані.
Сьогодні діаграм ще немає. На слайдах будуть два порожні слоти:
<canvas id="chart1"> і <canvas id="chart2">.
Наступного уроку ти заповниш їх діаграмами Chart.js із власного
data.json. Тому каркас роби так, щоб потім його не переверстувати.
<section> і відкривати
її браузером.| Етап | Хв | Що робимо |
|---|---|---|
| Розбір прикладів | 15 | Дві презентації поруч — виписуємо 5 ознак «слайда-простирадла» |
| Драматургія виступу | 15 | Розкладаємо свої дані по блоках «гачок → проблема → дані → рішення → заклик» |
| Композиція і текст | 20 | Шторка «до/після», лічильник слів — скорочуємо текст слайда до 40 слів |
| Колір і контраст | 15 | Калькулятор контрасту двома піпетками — добираємо пару з контрастом ≥ 4,5:1 |
| Знайомство з reveal.js | 15 | Структура section, гарячі клавіші — копіюємо шаблон у ~/www/deck/ |
| Практика: 8 слайдів | 35 | Верстаємо титул, зміст, проблему, 2 слоти під діаграми, висновок, джерела, контакти |
| Підсумок | 5 | Проганяємо свій слайд через «Слайд-рецензента» |
| Разом | 120 |
| Файл | Куди | Що в ньому |
|---|---|---|
index.html | ~/www/deck/ | 8+ слайдів <section>, два порожні <canvas>, підключення локального reveal.js |
deck.css | ~/www/deck/ | один файл стилів: кольори з контрастом ≥ 4,5:1, кегль, вирівнювання |
outline.md | ~/www/deck/ | структура виступу: теза кожного слайда одним реченням, рівно стільки тез, скільки слайдів |
~/upload/
і далі в ~/www/deck/. Верстаєш і дивишся презентацію ти
у себе на комп'ютері, бо так швидше; на сервер кладеш готове.reveal.js уже лежить на сервері локально, у теці
/assets/reveal/. Жодних cdn.jsdelivr.net,
unpkg.com і cdnjs. Причин дві: у класі інтернет
падає, а презентація має відкритися все одно — і автоперевірка
не пропускає зовнішні домени в src та href.
Так само, як A-Frame у 8 класі.Чому 12 слайдів із даними підряд глядач не витримує, а 8 слайдів з аркою — витримує легко
Драматургія — це не про театр, це про порядок. Ще в 1863 році Густав Фрайтаг розібрав п'єси на п'ять частин. Ось вони: зав'язка, наростання, кульмінація, спад, розв'язка. Відтоді ту саму схему беруть сценаристи, журналісти й люди, які виступають із даними.
Ключ у слові напруга. Глядач слухає доти, доки в голові лишається питання без відповіді. Питання закрилося або й не з'явилося — увага пішла.
Тому виступ не починають з «Я досліджував сон однокласників». Починають із розриву: «Ми з вами вчора писали контрольну. Половина класу спала менше шести годин. Це видно в оцінках».
| Блок | Питання, на яке відповідає слайд | Приклад із теми «сон і оцінки» |
|---|---|---|
| Гачок | Чому мене це має обходити? | «Половина класу спить менше шести годин» |
| Проблема | Що саме не так? | «Ми думаємо, що недосип — це нормально» |
| Дані | Звідки я знаю? | «Опитав 24 людини, ось розподіл» |
| Кульмінація | Що найголовніше? | «У тих, хто спить < 6 год, середній бал на 1,8 нижчий» |
| Розв'язок | Що з цим робити? | «Три речі, які реально працюють» |
| Заклик | Що зробити тобі сьогодні? | «Заміряй свій сон тиждень — і порівняй» |
Зверни увагу: у кожного блоку одне питання. Це і є місток до наступної теми — правила «один слайд — одна думка».
Ти зробив 12 слайдів: титул, потім дев'ять слайдів із даними підряд, потім «Дякую за увагу». На репетиції клас відволікається вже з четвертого слайда, хоча дані правильні. Що зламано?
Найдорожче правило презентацій коштує рівно нічого: розрізати слайд на два
Правило одного повідомлення. Слайд показує одну тезу. Не тему («Результати»), а твердження («Хто спить менше — вчиться гірше»).
Перевірка проста. Скажи вголос, що на слайді, одним реченням. Знадобилося друге речення через «а ще»? Значить, це два слайди.
Звідси випливає й формулювання заголовка. Заголовок-тема нічого не повідомляє: «Продажі», «Дані», «Висновки».
Заголовок-твердження працює сам, навіть якщо глядач відволікся. Наприклад: «Продажі впали втричі», «24 відповіді за три дні», «Спати менше шести — дорого». Це і є твоє домашнє завдання наприкінці уроку.
Тут працює не смак, а механіка сприйняття. Річард Маєр вивчав, як люди вчаться з екрана. Він описав ефект надлишковості (redundancy effect).
Суть така. Один і той самий текст написаний на екрані й вимовляється вголос. Люди засвоюють його гірше, ніж коли він тільки звучить або тільки написаний.
Причина проста: читання швидше за мовлення. Глядач дочитує твій абзац за кілька секунд, а ти ще на середині першого речення. Далі він або нудьгує, або читає вперед. І в обох випадках тебе не слухає.
Виходить, що зоровий і слуховий канали не доповнюють один одного, а конкурують.
<aside class="notes"> —
нотатки доповідача. Їх видно тільки тобі, у другому вікні. На слайді лишається
теза, число або зображення. Так само працює й у reveal.js — далі покажемо як.На слайді «Результати» у тебе три графіки й чотири висновки під ними. Виступ — 6 хвилин. Сусід каже «зате все на одному екрані, зручно». Що ти зробиш?
Ти боїшся забути текст і виписав увесь виступ на слайди дрібним шрифтом — щоб підглядати. На репетиції вчитель каже, що клас тебе не слухав узагалі. Чому так вийшло і куди дівати текст?
Число, яке рятує від «на репетиції 5 хвилин, на захисті 12»
Найвідоміший орієнтир дав Ґай Кавасакі у 2005 році — правило 10/20/30. Це 10 слайдів, 20 хвилин і кегль не менший за 30 пунктів. Писав він про презентації для інвесторів, але арифметика всередині проста: 2 хвилини на слайд.
Це не закон природи, а орієнтир. Для шкільного захисту на 5—7 хвилин зручніше рахувати 1—1,5 хвилини на слайд. Слайди тоді коротші, тез менше.
Важливо інше — щоб число взагалі було. Не призначив слайду час — він забере стільки, скільки схоче.
| Виступ | Слайдів за нормою 1,5 хв | За нормою 2 хв (10/20/30) | Де це трапляється |
|---|---|---|---|
| 5 хв | 3—4 | 2—3 | захист проєкту в класі |
| 7 хв | 4—5 | 3—4 | наш урок 15 і 16 |
| 10 хв | 6—7 | 5 | шкільна конференція |
| 20 хв | 13 | 10 | рівно правило Кавасакі |
І окремо про «резерв». У reveal.js є вертикальні слайди — про них далі. Найкорисніше класти на них деталі, яких у виступі немає.
Хтось запитав: «а скільки саме людей ти опитав у понеділок?» Ти тиснеш ↓ і показуєш слайд, якого інакше ніхто б не побачив. Виступ не подовжується, а відповідь у тебе є.
На репетиції вдома ти вклався у 5 хвилин, а на захисті той самий набір слайдів розтягнувся на 12. Слайди ті самі, ти нічого не додавав. Що показує твоя структура — і що з нею робити?
Око не читає слайд — воно його сканує. Твоя робота — вирішити, у якому порядку
Слайд з'явився — і в глядача є приблизно секунда, щоб вирішити, куди дивитися. Рядок за рядком він не читає. Він сканує.
Це показали дослідження Nielsen Norman Group. На сотнях сеансів айтрекінгу вони побачили F-подібний патерн. Погляд іде вздовж верхнього рядка, потім коротшим рядком нижче, потім вниз по лівому краю.
Слайд — це широкий екран із малою кількістю тексту. Тут частіше працює простіший Z-патерн: верхній лівий кут → верхній правий → по діагоналі вниз-ліворуч → нижній правий. Звідси й розкладка:
| Інструмент | Як працює | Помилка новачка |
|---|---|---|
| Розмір | найбільший елемент читають першим | заголовок і підпис однакового кегля — око не знає, з чого почати |
| Вага і колір | жирне і контрастне виступає вперед | жирним виділено пів слайда — отже, нічого не виділено |
| Порожнє місце | ізольований елемент читається як головний | слайд заповнено «щоб не було порожньо» |
На твоєму слайді заголовок «Скільки сплять дев'ятикласники» і число «5,8 години» набрані однаковим кеглем, обидва по центру. Учитель каже: «Я не розумію, на що дивитися». У чому справа?
Шість рядків тексту — це вже забагато, і ось чому
Є старе «правило 6×6»: не більше шести рядків на слайді й не більше шести слів у рядку. Скажемо чесно — це народне правило, а не результат експерименту. Простежити його до конкретного дослідження не вдається.
Але воно живуче, бо описує реальну межу. Шість рядків × шість слів = 36 слів. Приблизно стільки глядач устигає прочитати, не перестаючи тебе слухати.
У нашому уроці автоперевірка рахує простіше: жоден слайд не містить понад 60 слів. Шістдесят — це вже дуже щедро. Комфортна зона — до 40 слів. Саме її показує лічильник у редакторі нижче.
Твій слайд «Що показало опитування» — 8 рядків приблизно по 12 слів. Ти кажеш: «Це ж усього одна тема, отже, один слайд, правило не порушено». Що з цим не так?
Слайд, який гарний на ноутбуці, і слайд, який видно в класі, — це різні слайди
Контраст. Це різниця в яскравості між текстом і тлом. Стандарт доступності WCAG 2.1 (критерій 1.4.3) вимагає не менше 4,5:1 для звичайного тексту. Для великого — 3:1: це від 18 пунктів, або від 14 жирним. Те саме число перевіряє й наша автоперевірка.
| Текст | Тло | Контраст | Вердикт |
|---|---|---|---|
| #111111 | #FFFFFF | ≈ 18,9:1 | чудово, з будь-якої парти |
| #FFFFFF | #1F3A5F | ≈ 11,5:1 | чудово, темна тема |
| #9AA6B2 | #FFFFFF | ≈ 2,5:1 | провалено — світло-сіре на білому |
Чому це не вигадка. Проєктор у класі з'їдає контраст. Лампа стара, у вікна світить сонце, білий насправді світло-сірий.
Те, що на екрані ноутбука виглядало «стильно приглушено», на стіні стає порожнім місцем. Тому світло-сірий текст на білому — помилка номер один на захистах.
Кегль. Правило Кавасакі каже: не менше 30 пунктів. У reveal.js це працює зручно. Бібліотека верстає слайд на віртуальному полотні 960 × 700, а потім масштабує все полотно під реальний екран.
Тому розміри в CSS ти задаєш один раз, і на проєкторі вони ростуть пропорційно. Стандартна тема reveal.js бере базовий кегль 42 px — уже великий. Зменшувати його «щоб влізло» — це рівно та помилка, від якої правило й захищає.
Вирівнювання. Найдешевший спосіб зробити слайд охайним — поставити все по одній лівій лінії. Елементи, вирівняні по спільному краю, читаються як одна група. Розкидані читаються як шум.
Це відомі гештальт-принципи близькості й подібності. У класичному наборі принципів дизайну CRAP (Contrast, Repetition, Alignment, Proximity) вирівнювання не випадково має окрему літеру.
Ти зверстав слайди світло-сірим текстом (#9AA6B2) на білому —
на ноутбуці виглядає елегантно. У класі на проєкторі половина класу
каже, що нічого не видно. Що саме перевірити й на що замінити?
На слайді три блоки: заголовок по центру, список ліворуч, число праворуч із власним відступом. Кожен блок сам по собі акуратний, а слайд виглядає неохайно. Що виправити першим — і чому саме це?
<section>Презентація як звичайна веб-сторінка: HTML, CSS і трохи JS
reveal.js — відкрита бібліотека, яка перетворює HTML
на презентацію. Ліцензія MIT, тобто користуватися можна вільно. Ніякого
особливого формату файлів тут немає.
Є index.html. У ньому <div class="reveal">,
усередині нього <div class="slides">. А всередині —
кожен слайд це один <section>.
Це головна ідея reveal.js. Горизонтальні слайди — основна лінія розповіді, ти йдеш по ній стрілкою →. Вертикальні — гілка вниз від одного горизонтального слайда, стрілка ↓.
У коді різниця одна. Вертикальні — це <section>,
вкладені всередину іншого <section>.
Нотатки — це те, що ти говориш. Вони живуть у
<aside class="notes"> всередині слайда. На екрані їх
не видно.
Клавіша S відкриває вікно доповідача. Там поточний слайд, наступний, твої нотатки й таймер. Саме сюди переїжджає весь текст, який ти боявся забути.
Фрагменти — спосіб показати вміст слайда частинами.
Клас fragment означає «з'явиться за наступним натисканням».
Корисно там, де важливий порядок: спочатку питання, потім відповідь.
Варіанти: fade-in (за замовчуванням), fade-up,
grow, strike, highlight-red.
| Клавіша | Що робить |
|---|---|
| → ← ↓ ↑ | рух по карті: горизонталь і вертикаль |
| Пробіл | наступний слайд або наступний фрагмент |
| Esc або O | режим огляду — уся карта презентації на одному екрані |
| S | вікно доповідача: нотатки, наступний слайд, таймер |
| F | повний екран |
| B або . | затемнити екран — коли треба, щоб дивилися на тебе |
У документації reveal.js бібліотеку підключають з CDN — чужого сервера в інтернеті. Так само роблять у більшості прикладів. Нам так не варто, і причин дві.
src і
href на сторінці. Будь-який зовнішній домен —
критерій не пройдено, і це критерій обов'язковий.Бібліотека вже розкладена вчителем і доступна з твого сайту за
шляхом /assets/reveal/. Підключення виглядає так:
../assets/reveal/… або
reveal/…. Головне — шлях без домену. У редакторі нижче
цей шлях можна змінити одним полем, і згенерований код перебудується.Відкрити index.html подвійним кліком можна. Але вікно
доповідача (клавіша S) так не запрацює. Воно відкриває друге вікно
і спілкується з першим, а браузер із протоколом file:// цього
не дозволяє.
Тому підійми крихітний локальний сервер прямо в теці презентації.
Далі відкриваєш http://localhost:8000/ — і S працює.
&&: рядок
mkdir deck && cd deck там просто впаде з помилкою парсера.
Пиши або двома рядками, або так:
mkdir deck; if ($?) { cd deck } — PowerShell 5.1
mkdir deck && cd deck — Git Bash, macOS, Linuxdeck.cssОдин файл стилів на всю презентацію. Тут задаються твої кольори, розміри й вирівнювання. Контраст у кольорах — не нижчий за 4,5:1. Візьми це за основу й зміни під себе, але контраст перевір.
Ти хотів зробити 10 горизонтальних слайдів і про всяк випадок уклав усі
десять <section> один в одного. Тепер стрілка →
нікуди не веде, а вся презентація «падає» вниз одним стовпцем.
Що сталося?
У сусіда презентація на захисті відкрилася голим чорним текстом на білому, без жодного стилю, хоча вдома все працювало. У класі саме зник інтернет. Що він зробив не так і як це виправити за хвилину?
Вписуєш тези — сторінка малює карту, рахує час і збирає готовий index.html
Це головний інструмент уроку. Тут ти проєктуєш структуру, а не верстаєш. Додаєш слайди, переставляєш їх, позначаєш вертикальні підслайди.
Карта, лічильники, попередження й готовий код перебудовуються наживо — щойно ти щось змінив.
[chart1] або [chart2] у тексті слайда
генератор перетворить на <canvas id="chart1"> — той самий
порожній слот, який ти заповниш діаграмою наступного уроку. У підрахунку слів
маркери не враховуються. Порожній рядок у тексті слайда просто пропускається.Час рахується тільки по горизонтальних слайдах: вертикальні — це резерв, який ти показуєш, лише якщо запитали, і виступ він не подовжує.
index.htmlСкопіюй і збережи як index.html у теці deck/,
поруч із deck.css. Нотатки доповідача згенеровані як заготовки.
Впиши в них те, що справді говоритимеш.
outline.mdАвтоперевірка звіряє кількість тез у outline.md з кількістю
слайдів. Генератор тримає ці числа однаковими. Але текст тез усе одно
перечитай і перепиши по-людськи.
Редактор нічого не надсилає на сервер — усе рахується у твоєму браузері. Вміст полів не зберігається: скопіюй код, перш ніж закривати сторінку.
Кроки 1—9 — у себе на комп'ютері, кроки 10—12 — здача по FTP. Галочки зберігаються, сторінку можна закрити.
index.html, deck.css,
outline.md — у ~/www/deck/. Бібліотеку reveal.js
заливати не треба: вона вже лежить на сервері й спільна для всього класу.
Скріншотів, відео й картинок понад 500 КБ приймальня не пропустить.Чекер не оцінює красу. Він рахує слайди, слова, контраст і дивиться, чи не тягнеш ти щось із чужого домену. Спроби не обмежені.
Демонстраційний режим: результат згенеровано для показу. На сервері
ця кнопка викликає POST /api/check, який запускає
check 05 від імені учня.
outline.md — не дивлячись на слайди;Це те, що бачить учитель, коли виставляє оцінку.
| Складник | Вага | Результат |
|---|
<aside class="notes">,
а не на екрані;<section> вкладені один в одного — уся презентація
стала однією вертикальною гілкою;<canvas id="chart1"> забули — і на наступному
уроці доводиться переверстувати каркас.Перепиши заголовки всіх слайдів так, щоб кожен був твердженням, а не темою. Наприклад: «Продажі» → «Продажі впали втричі». Або «Результати опитування» → «17 із 24 сплять менше семи годин».
Потім онови outline.md: теза кожного слайда має збігтися
з новим заголовком. Цю роботу наступного уроку переробляти не доведеться —
діаграми стануть на готовий каркас.
Усе, що на цій сторінці подано як норму, має джерело. Де правило народне — так і написано.
section,
вертикальні слайди, фрагменти, нотатки доповідача, гарячі клавіші,
полотно 960×700.
revealjs.com,
vertical-slides,
fragments,
speaker-viewdist/ і plugin/.
github.com/hakimel/reveal.jshttp.server — локальний сервер однією командою.
docs.python.org/3/library/http.serverПовний список із поясненнями, що звідки взято, —
у файлі urok-05-джерела.md поруч із цією сторінкою.