Модуль I · IT Skills (Cloud Services & Documents) · тема 4, урок 2 з 2 · 120 хвилин
Минулого уроку ти навчився просити в моделі те, що тобі потрібно, і тримати
героя однаковим від панелі до панелі. У тебе вже є шість зображень
у локальній теці, prompts.json, character.md
і storyboard.md.
Мета сьогодні. Зібрати з цих шести картинок сторінку, яку читають саме в тому порядку, який ти задумав. Комікс — це не альбом картинок під одну. У нього свої правила, і ми розберемо їх по черзі.
Спершу — сама панель: чому широка читається довше за вузьку. Потім — проміжок між панелями: як він перескакує час. Далі — бульбашка: як із неї видно, хто саме говорить. І наприкінці — позначка про те, що картинки намалювала модель.
.ai-disclosure: яка
модель малювала панелі і що в них зробив ти сам;alt, який переказує дію на панелі, а не називає файл.images/panel-1.png, але
самі файли на сервер не заливаються — вони живуть у твоїй локальній теці
~/local/comic/images/. По FTP їде тільки легкий текст:
comic/index.html, comic.css і comic.json.
Готовий комікс із картинками вчитель дивиться очно, на твоєму екрані.alt і підпис, чи збігаються імена файлів
із prompts.json, чи є видима позначка про AI. Саме зображення
перевіряє людина.| Етап | Хв | Що робимо |
|---|---|---|
| Розминка | 10 | Дві сторінки коміксу: де читач спотикається |
| Панель і жолоб | 20 | Панель як одиниця часу, жолоб як монтажна склейка |
| Бульбашки | 15 | Репліка, думка, крик, шепіт, кепшн; хвостик |
| Практика: сітка | 30 | Конструктор розкладки → свій comic.css і каркас HTML |
| Адаптивність | 15 | 390 px без горизонтального скролу |
Маркування і alt | 15 | .ai-disclosure і переказ дії замість «картинка» |
| Здача і показ | 15 | FTP, check 08, комікс на екрані |
| Разом | 120 |
~/www/comic/index.html — 6 і більше .panel, у кожної
<img> з непорожнім alt і <figcaption>,
4 і більше бульбашок текстом у DOM, видима позначка про AI;
comic.css — сітка й адаптив; comic.json — машиночитний опис
сторінки. Три файли, разом кілька кілобайтів.Найдивніше в коміксі: час тут вимірюється не секундами, а простором
У фільмі час іде сам. У коміксі час іде рівно так швидко, як швидко рухається око читача. А око рухається так, як ти йому дозволив. Панель — це не «рамка навколо картинки», це порція часу, яку читач витрачає.
Звідси головне практичне правило: широка панель читається довше за вузьку. Не тому, що в ній більше подій, а тому, що око фізично довше йде зліва направо до наступної рамки. Вузька панель — це «клац, клац, клац». Панель на всю ширину — це видих, пауза, момент, на якому читач зупиняється.
Європейська й американська традиція читає сторінку так само, як текст: зліва направо, згори вниз. Око проходить перший ряд до кінця, стрибає вниз-ліворуч, проходить другий ряд. Це називають Z-шляхом. У манзі порядок дзеркальний — справа наліво, бо японський текст так набирається. Отже, порядок читання — це домовленість мови, а не закон природи. Але в межах однієї сторінки її варто дотримуватись: інакше читач загубиться.
У другому ряду в тебе дві панелі: ліва на 1/3 ширини, права на 1/2. Разом вони не заповнюють ряд, і праворуч лишається порожня діра. Що зробить око читача, дійшовши до цієї діри?
Фінал твоєї історії: герой уперше бачить місто згори і мовчить. Ти хочеш, щоб читач затримався тут довше, ніж на будь-якій іншій панелі. Дописувати текст не можна — герой мовчить. Що ти змінюєш у верстці?
Проміжок між панелями має назву — і саме він робить із картинок історію
Жолоб (англ. gutter) — це проміжок між сусідніми панелями.
У CSS Grid це просто gap. А в мові коміксу це монтажна
склейка — місце, де історія стрибає вперед. Те, чого в цьому стрибку
не показали, читач домальовує сам.
Ось у чому фокус. Ти показуєш панель «рука заносить каменюку» і панель «розбите вікно». Удару ти не малював. Але кожен читач впевнений, що бачив його — бо склеїв дві панелі в голові. Дію виконав не автор, а читач. Тому кажуть: найголовніше в коміксі відбувається в жолобі.
gap: 14px у контейнері сітки.
Але читається він як час. Тому gap: 0 — це не «акуратніше»,
це «події відбуваються злитно, без пауз».| Прийом | Як виглядає | Що читає читач |
|---|---|---|
| Ширший жолоб | більший gap саме перед цією панеллю | «пауза була довгою» |
| Зміна плану | крупний план → загальний план | «ми відійшли, минув час» |
| Зміна світла | день → сутінки → ніч | «минув день» |
| Зміна стану світу | сніг зійшов, дерево зацвіло, ремонт добудували | «минув тиждень, місяць, сезон» |
| Зміна стану героя | подряпина зажила, волосся відросло, одяг інший | «час минув на самому герої» |
| Напис від автора | прямокутник із текстом «Через тиждень» у кутку панелі | найпростіше — але це вже слова |
Перші п'ять прийомів працюють без єдиного слова — і саме тому вони цінніші. Прямокутник із написом «Через тиждень» у кутку панелі теж скаже читачеві про час. Але це підказка, яку автор дав, бо не зумів показати.
Такий прямокутник — голос автора, а не персонажа. У нього є своя назва:
кепшн, від англійського caption. Чим він відрізняється
від бульбашки з реплікою, розберемо на кроці 4.
Між третьою і четвертою панеллю читач має зрозуміти, що минув тиждень. Написів від автора у твоєму коміксі немає принципово — жодного слова від оповідача. Що ти робиш?
Форма бульбашки — це інтонація. Хвостик — це адреса
Бульбашка робить дві речі одночасно. Формою вона каже, як звучить репліка: рівний овал — звичайна мова, хмарка — думка, зубчаста — крик, пунктирна — шепіт. Хвостиком вона каже, кому належить голос: гострий кінець дивиться на того, хто говорить.
У панелі двоє: ліворуч сестра, праворуч брат. Ти поставив дві бульбашки — вгорі ліворуч «Ти брав мій ключ?» і внизу праворуч «Ні». На перегляді однокласник читає це як розмову сестри з самою собою. Що ти забув?
Герой стоїть перед дверима і не вимовляє вголос «А якщо там нікого немає». Ти зверстав це звичайним овалом із гострим хвостиком. Однокласники впевнені, що він сказав це вголос. Що змінити?
Клацай ширини панелей. Сторінка малює макет і одразу пише
grid-template-areas, HTML-каркас з alt-заглушками
і блок .ai-disclosure
CSS Grid дозволяє описати розкладку сторінки словами. Ти оголошуєш шість
колонок і даєш кожній панелі коротке ім'я. Далі малюєш цими іменами сітку
прямо в коді — так і працює grid-template-areas.
Читається вона буквально. Ім'я, яке стоїть у кількох колонках підряд, робить свою панель ширшою. Ім'я, яке зайняло цілий рядок, розтягує панель на всю ширину сторінки.
На сторінці з шести панелей вистачає трьох ширин. 1/3 — це 2 колонки з шести. 1/2 — це 3 колонки. На всю ширину — усі 6. Ряд має «закритися» рівно, без порожньої діри праворуч. Конструктор стежить за цим сам. Він скаже, коли довелося розтягнути останню панель у ряду.
Висота стовпчика — скільки часу читач витрачає на панель. Пласка гребінка означає монотонну сторінку.
comic.cssindex.htmlЗаміни ЗАМІНИ: в кожному alt, підписах
і бульбашках на свій текст. Імена файлів мають збігатися з полем
file у prompts.json з минулого уроку.
comic.jsonfloat і не flex
У flex ряди не знають один про одного, і «прибити» панель до
конкретного місця сітки не вийде. Grid описує сторінку двовимірно —
саме так, як її бачить читач.Ти хочеш, щоб п'ята панель була на всю ширину, а шоста — під нею, теж
на всю ширину. У grid-template-areas ти написав рядок
"p5 p5 p5 p6 p6 p6". Що вийде на екрані?
Обери тип і напрямок хвостика — забери готовий SVG-фрагмент, який лягає поверх панелі
Бульбашку можна зверстати двома способами. HTML-бульбашка —
це <div class="bubble"> з border-radius.
Робиться швидко, але овал виходить надто правильним, а хвостик доводиться
дороблювати трюком з ::after.
SVG-бульбашка малює будь-яку форму: і зубчастий крик, і хмарку думки. При цьому текст лишається текстом — його видно скрінрідеру й пошуку.
Головне в обох варіантах однакове: текст живе в DOM, а не в пікселях картинки. Тому бульбашку кладуть поверх зображення абсолютним позиціонуванням, а не всередину нього.
Однокласник згенерував панелі одразу з текстом усередині зображення: модель домалювала бульбашки сама. Виглядає ефектно. Назви найсерйознішу практичну проблему, яка вилізе вже завтра.
390 пікселів ширини — і твоя сітка 2 + 3 + 1 перестає бути сіткою
Розкладка на шість колонок чудова на ноутбуці. На телефоні панель у 1/3 ширини перетворюється на смужку 110 пікселів, де не видно ні героя, ні тексту. Тому на вузькому екрані комікс роблять одноколонковим: панелі йдуть однією стрічкою згори вниз у тому самому порядку читання.
| Помилка | Чому болить | Як правильно |
|---|---|---|
width: 320px у панелі | панель не може стиснутись — з'являється скрол | ширину задає сітка, панель просто width:100% |
<img width="900"> | картинка розпирає колонку | img{max-width:100%;height:auto} |
| довге слово в бульбашці | нерозривний рядок штовхає блок | коротші репліки або overflow-wrap:anywhere |
немає <meta name="viewport"> | телефон малює сторінку як «десктоп» і зменшує все | рядок viewport у <head> |
| текст у 11 px «щоб влізло» | нечитабельно на телефоні | не дрібніти; краще менше слів |
Перевірити просто: DevTools → режим пристрою → ширина 390. Автоперевірка
робить те саме і звіряє document.scrollWidth з innerWidth.
На ноутбуці комікс ідеальний. На телефоні сторінка їздить убік, і праворуч
видно білу смугу. У CSS ти знаходиш .panel{width:300px}.
Прибираєш — скрол лишається. Куди дивитись далі найперше?
Блок .ai-disclosure — обов'язкова частина роботи, а не примітка дрібним шрифтом
Твої панелі згенерувала модель. Читач цього не знає, доки ти йому не скажеш. І тут є проста річ: людина, яка дивиться зображення, за замовчуванням вважає, що його намалював або сфотографував хтось. Якщо це не так — вона має право знати.
Це не шкільна вигадка. У Євросоюзі є закон про штучний інтелект — AI Act, Регламент ЄС 2024/1689. Його стаття 50 вимагає позначати картинки, які зробила або переробила модель. Позначку має бути видно людині, а не тільки програмі.
Індустрія додає технічний бік. Усередині самого файлу можна зберегти
його історію: хто і чим його зробив, що з ним робили далі. Цей запис
називають C2PA. Є й окреме слово-мітка для походження картинки —
trainedAlgorithmicMedia, тобто «зроблено навченим алгоритмом».
Його бере зі свого словника агенція IPTC. Такі мітки читає програма,
а не людина.
На шкільному рівні від тебе потрібне головне — видима людині позначка просто на сторінці.
| Пункт | Погано | Добре |
|---|---|---|
| Назва моделі | «зроблено AI» | «панелі згенеровано моделлю назва, версія яка» |
| Що зробила людина | «я все придумав» | «сюжет, розкадровка на 6 панелей, канон героя, усі промпти, 40 переробок 3-ї панелі, весь текст бульбашок, верстка» |
| Що зробила модель | «трохи допомогла» | «растрові зображення 6 панелей за моїми промптами; текст усередині зображень не генерувався» |
| Інструмент і дата | — | інструмент, де запускав, дата генерації |
| Що не робив | — | «реальних людей не зображено» |
Чому це не формальність: маркування — єдине, що відрізняє чесну роботу з інструментом від видавання чужої праці за свою. І воно працює на тебе: список «що зробила людина» — це і є твоя робота, розписана по пунктах. Без нього здається, що ти просто натиснув кнопку.
Учень написав унизу сторінки сірим 10-м кеглем «AI». Формально позначка є. Назви дві причини, чому перевірка такої позначки не прийме.
alt у коміксі — це не опис картинкиЦе переказ дії. Людина, яка не бачить панель, має зрозуміти історію
У звичайного зображення alt відповідає на питання «що на картинці».
У коміксі питання інше: що відбулося. Панель — це не ілюстрація, це кадр
сюжету, і якщо його пропустити, історія розсиплеться.
Порівняй три варіанти alt до однієї панелі — крупний план,
хлопець опускає очі, за спиною зачиняються двері:
| Варіант | Текст | Що з ним не так |
|---|---|---|
| 1 | alt="panel-4.png" | ім'я файлу — це не інформація; скрінрідер прочитає його вголос по літерах |
| 2 | alt="хлопець у синій куртці" | опис зовнішності без дії: сюжет зупинився |
| 3 | alt="Крупний план: Тарас опускає очі, за його спиною зачиняються двері під'їзду" | усе на місці: план зйомки, хто, що робить, що змінилося |
alt панеліПлан зйомки + хто в кадрі + що робить + що змінилося.
Репліку в alt дублювати не треба: текст бульбашки і так лежить у DOM,
скрінрідер прочитає його окремо. Інакше читач почує репліку двічі.
alt і figcaption
alt — замість зображення: його чує лише той, хто картинку
не бачить. figcaption — підпис поруч із зображенням:
його бачать усі. Тому в alt іде дія, а в figcaption —
те, що корисно й видющому читачеві: номер панелі, план зйомки, час дії.
Дублювати один в один — марно.Твоя шоста панель — німа: герой сам на порожній зупинці, жодного слова.
Ти пишеш alt="", бо «там нічого не сказано». Чому це помилка
саме тут, хоча порожній alt узагалі-то буває правильним?
Кроки 1—9 — у себе на комп'ютері, кроки 10—12 — вивантаження й перевірка. Галочки зберігаються, сторінку можна закрити.
~/local/comic/images/ лежать твої PNG — вони залишаються в тебе
назавжди. У ~/www/comic/ їде тільки index.html,
comic.css і comic.json. Спробу залити картинку
понад 500 КБ або будь-яке відео сервер відхилить сам — файл просто не з'явиться.Чекер не бачить твоїх картинок. Він читає розмітку, звіряє її
з prompts.json і стискає вікно до 390 px. Спроби не обмежені.
Демонстраційний режим: результат згенеровано для показу. На сервері
ця кнопка викликає POST /api/check, який запускає
check 08 від імені учня.
.ai-disclosure і називаєш хоч одну річ,
яку модель зробила не так, як ти просив.Це те, що бачить учитель, коли виставляє оцінку.
| Складник | Вага | Результат |
|---|
alt панелі переказує дію, а не описує зовнішність.src не збігаються з prompts.json —
регістр, пробіл, panel1 замість panel-1;alt дублює текст бульбашки — скрінрідер читає репліку двічі.Додай сьому панель-фінал. Далі онови обидва файли. У
comic.json з'явиться новий запис у panels.
У prompts.json з минулого уроку — новий запис із полями
file, prompt і seed. Імена файлів
у двох записах мають збігатися.
У .ai-disclosure допиши одне речення про сьому панель: що саме
ти змінив у промпті, щоб фінал тримався канону героя.
Мова коміксу, CSS Grid, доступність і маркування AI — усе з відкритих джерел. Перевіряти дозволено й корисно.
gap.
developer.mozilla.org/CSS_grid_layoutgrid-template-areas — іменовані області.
developer.mozilla.org/CSS/grid-template-areasgrid-area — прив'язка елемента до області.
developer.mozilla.org/CSS/grid-area@media (max-width: …).
developer.mozilla.org/Using_media_queries<figure> і <figcaption>.
developer.mozilla.org/HTML/Element/figuretrainedAlgorithmicMedia.
cv.iptc.org/newscodes/digitalsourcetypeПовний список із поясненнями, що звідки взято, —
у файлі urok-08-джерела.md поруч із цією сторінкою.