9 клас — програма модуля

Ти отримуєш акаунт на шкільному сервері — комп'ютері в дата-центрі, який працює цілодобово. Розбираєшся, як влаштоване одне дерево тек у Linux, як писати абсолютний і відносний шлях і чим відрізняються теки www/, data/ та upload/. Наприкінці кладеш свою першу сторінку в www/ і відкриваєш її за власною адресою в інтернеті.

Після уроку ти

• вмієш заходити на сервер по SSH зі свого комп'ютера й давати йому команди текстом
• вмієш знаходити свої файли серед чужих і писати шлях до будь-якого з них
• вмієш класти сторінку в теку www/ так, щоб її відкрив будь-хто в інтернеті
• вмієш ховати чернетки в теку data/, куди не зазирне сусід по класу
• вмієш полагодити сторінку, на якій замість слова «Київ» показані нечитабельні символи

Ти робиш історію, де внизу кожної сцени стоять кнопки і від вибору читача залежить кінцівка. Тексти сцен генеруєш через шкільну модель запитом POST /api/llm, а потім щонайменше один абзац переписуєш руками. Сюжет спершу малюєш схемою зі стрілок, щоб не лишилося сцен, у які не веде жоден вибір.

Після уроку ти

• вмієш міняти температуру і top-p так, щоб з того самого завдання виходив то рівний, то несподіваний текст
• вмієш писати завдання для моделі так, щоб вона віддавала текст потрібної довжини й у потрібному вигляді
• вмієш ловити вигаданий факт у відповіді моделі й перевіряти його за джерелом
• вмієш малювати сюжет схемою зі стрілок і знаходити сцени, у які не веде жоден вибір
• вмієш зібрати сцени у story.json і показати історію на своїй сторінці

Ти формулюєш три дослідницькі питання про клас і будуєш під них таблицю в Grist. Розбираєшся, чому колонка з годинами, яку таблиця вважає текстом, не дасть ні суми, ні середнього, і як записувати дати, щоб сортування працювало. Заразом відкриваєш CSV Блокнотом і бачиш, чим саме розділені колонки і що таке BOM.

Після уроку ти

• вмієш добирати тип під кожну колонку своєї анкети
• вмієш записувати дати так, щоб таблиця сортувала їх правильно
• вмієш чистити колонку, у якій «Київ» і «київ» стали двома різними значеннями
• вмієш відкривати таблицю Блокнотом і бачити роздільник, лапки й кодування
• вмієш писати fields.json — опис полів анкети для машини

Твоя сторінка вперше починає приймати дані: однокласник заповнює форму, і в приватному файлі ~/data/responses.csv з'являється новий рядок. Ти верстаєш поля за власним fields.json, надсилаєш відповідь через fetch() без перезавантаження і простежуєш увесь шлях у DevTools. Потім те саме значення надсилається curl-ом повз форму — і видно, чому перевірка в браузері є зручністю, а не захистом.

Після уроку ти

• вмієш зверстати поле анкети так, щоб підпис до нього не зникав під час набору
• вмієш надсилати відповідь, не перезавантажуючи сторінку
• вмієш простежити шлях відповіді від натиснутої кнопки до рядка в CSV
• вмієш обійти власну перевірку одним запитом з термінала
• вмієш викреслити з анкети поле, без якого підсумок не зміниться

Ти будуєш структуру виступу за даними власного опитування: п'ять частин, у кожної одне питання, заголовок слайда — твердження, а не тема. Далі верстаєш каркас на reveal.js — звичайну веб-сторінку з тегів <section>, яку відкриває браузер. Діаграм ще немає: замість них два порожні <canvas> під наступний урок.

Після уроку ти

• вмієш ділити свій виступ на п'ять частин і давати кожній одне питання
• вмієш переписувати заголовок слайда з теми на твердження
• вмієш рахувати слова на слайді й різати все, що понад 40
• вмієш підбирати колір тексту й тла з контрастом не нижчим за 4,5:1
• вмієш збирати презентацію з тегів <section> і відкривати її браузером

Порожні слоти chart1 і chart2 з минулого уроку заповнюються діаграмами, які Chart.js будує з файлу data.json: виправив там число — слайд перемалювався сам. Ти проходиш дерево рішень і добираєш тип діаграми під свої числа. Друга половина уроку — про те, як діаграма викривляє правду обрізаною віссю чи переставленими стовпчиками, і як перевірити власні дві.

Після уроку ти

• вмієш подивитися на свої числа й сказати, яка діаграма їм підходить і чому саме вона
• вмієш упізнати три способи збрехати правдивими числами: обрізана вісь, 3D і «зручний» порядок стовпчиків
• вмієш описати діаграму кодом: що малювати, з яких чисел і як підписати
• вмієш тримати числа в окремому файлі data.json і оновлювати слайд правкою в ньому
• вмієш підписати вісь, одиницю й кількість опитаних так, щоб діаграму можна було перевірити

Ти робиш комікс на шість панелей, і складність не в гарній картинці, а в тому, щоб на всіх шести був той самий герой. Складаєш аркуш канону з восьми вимірюваних ознак, ставиш цей опис у кожен промпт незмінним і міняєш по одному параметру, коли панель не вийшла. Зображення залишаються на твоєму комп'ютері: на сервер їдуть тільки три текстові файли.

Після уроку ти

• вмієш складати аркуш канону героя з восьми ознак, які можна виміряти, а не оцінити на око
• вмієш ділити промпт на сталу частину — опис героя — і змінну, що відбувається саме на цій панелі
• вмієш задавати кадр словами: «крупний план», «камера знизу», «герой у лівій третині»
• вмієш переробити невдалу панель: фіксуєш seed, міняєш одну річ і дивишся, що дала саме вона
• вмієш здавати prompts.json, за яким будь-хто відтворить твої шість панелей

Шість картинок стають сторінкою, яку читають саме в тому порядку, який ти задумав. Ти розкладаєш панелі сіткою, керуєш темпом читання шириною панелі й жолоба, пишеш текст бульбашок у розмітці, а не всередині картинки. Наприкінці ставиш під коміксом видиму позначку про те, яка модель малювала панелі і що в них зробив ти сам.

Після уроку ти

• вмієш розкладати шість панелей у сітку й робити окремі панелі ширшими за сусідні
• вмієш уповільнювати читача широкою панеллю і ширшим жолобом перед нею
• вмієш писати текст бульбашок прямо на сторінці, щоб було видно, хто говорить і в якому порядку
• вмієш ставити під коміксом видиму позначку .ai-disclosure
• вмієш писати alt, який переказує дію на панелі, а не називає файл

Музику й ефекти до майбутнього трейлера ти пишеш текстом, а не береш готовим файлом із мережі. У Strudel патерн — це рядок коду: змінив число в setcpm() — і темп змінився одразу, при вчителі. Ефекти збираєш у jsfxr і здаєш їхні числа, а не сам звук: аудіо залишається на твоєму комп'ютері.

Після уроку ти

• вмієш рахувати, скільки секунд гратиме твоя музика, і підганяти її під ролик
• вмієш чути різницю між чотирма формами хвилі й називати потрібну
• вмієш зробити з короткого писку удар барабана або тягучу струну, налаштувавши огинаючу
• вмієш написати музику текстом і зберегти її у файл music.strudel
• вмієш зібрати три звукові ефекти й записати їхні числа у sfx.json

З панелей коміксу і звуку ти збираєш трейлер на 20–40 секунд, але не мишкою у відеоредакторі, а скриптом build.sh, який робить усе однією командою. Заміниш через тиждень одну панель — просто запустиш скрипт заново, нічого не згадуючи. Друга частина уроку — субтитри WebVTT, щоб ролик зрозумів і той, хто його не почує.

Після уроку ти

• вмієш скласти весь монтаж у один файл, який збирає ролик однією командою
• вмієш зробити так, щоб скрипт зупинявся на першій помилці, а не віддавав зіпсований ролик
• вмієш перезібрати трейлер після заміни однієї панелі, нічого не згадуючи
• вмієш написати репліки з часом показу так, щоб глядач устигав їх прочитати
• вмієш зняти з готового ролика справжні числа через ffprobe і покласти їх у звіт

Сирі відповіді з твоєї форми — це порожні клітинки, однакові рядки, «999 хвилин» і три написання одного й того самого слова. Ти пишеш скрипт build_dash.py, який читає CSV, чистить його і складає готові числа у data.json. Заразом рахуєш середнє й медіану на своїх даних і формулюєш кожен показник як відповідь на чиєсь питання.

Після уроку ти

• вмієш розкладати роботу з даними на три кроки — узяти, почистити, покласти — і пояснювати, навіщо їх розділяють
• вмієш чистити дані: обробляти пропуски, знаходити дублікати, помічати викиди
• вмієш рахувати середнє й медіану й показувати числами, чому медіана стійкіша
• вмієш формулювати показник як відповідь на чиєсь питання, а не як просто число
• вмієш читати CSV через csv.DictReader і писати data.json через json.dump

Скрипт із минулого уроку ти ставиш у розклад cron, і дашборд починає оновлюватися без тебе — уночі й на канікулах. Заразом вчишся помічати, коли автоматика зупинилася: сторінка виглядає так само гарно, тільки числа на ній учорашні. Наприкінці сервер видаляє твій data.json і чекає 16 хвилин — це єдиний доказ, що розклад справді працює.

Після уроку ти

• вмієш поставити свій скрипт у розклад сервера й сказати, о котрій він запуститься
• вмієш за три кроки знайти причину, чому «вручну працює, а за розкладом ні»
• вмієш вести лог скрипта: що туди писати, чого не писати і як не дати йому рости вічно
• вмієш показувати на сторінці вік чисел, а не робити вигляд, що вони свіжі

Ти збираєш чат-бота, який проводить опитування, і будуєш його як скінченний автомат: порядок питань і збережені відповіді тримає твій код, а модель відповідає тільки за слова. Пишеш системний промпт із межами того, чого бот не робить. Потім сам підсовуєш боту фразу «ігноруй попередні інструкції» і лагодиш те, що зламалося.

Після уроку ти

• вмієш намалювати розмову бота як схему: одне питання — один стан, стрілка до наступного
• вмієш сказати, що в боті рахує твій код, а що віддають моделі, і чому саме так
• вмієш написати боту системний промпт разом зі списком того, чого він не робить
• вмієш підсунути власному боту prompt injection і полагодити те, що зламається
• вмієш перевірити схему на глухі кути: чи з кожного стану є вихід і чи до кожного можна дійти

Тринадцять уроків ти працював сам, а тепер у команди одна тека на трьох-чотирьох і кожен править файли одночасно з рештою. Ти клонуєш репозиторій зі шкільної Gitea, працюєш у власній гілці, відкриваєш pull request і рев'юєш чужий. Разом команда верстає каркас сайту з чотирьох сторінок зі спільною навігацією і одним файлом стилів.

Після уроку ти

• вмієш забрати спільну теку команди до себе на комп'ютер і працювати в ній
• вмієш віддавати свої зміни так, щоб файли однокласників не затерлися
• вмієш підписувати кожну зміну реченням, зрозумілим тобі ж через місяць
• вмієш просити однокласника подивитися твій код і самому писати зауваження до чужого
• вмієш полагодити файл, у який двоє написали різне в один і той самий рядок

Чотири сторінки від чотирьох людей ти зводиш в один сайт: дослівно однаковий блок меню, один style.css, узгоджені імена файлів. Далі розбираєшся з деплоєм — що відбувається після git push, як спрацьовує вебхук і як за журналом знайти ланку, на якій публікація обірвалася. Наприкінці команда за п'ять хвилин захищає продукт на живому сайті, відкритому з телефона вчителя.

Після уроку ти

• вмієш звести чотири сторінки в один сайт: спільний style.css і дослівно однаковий блок меню
• вмієш відправити зміни командою git push і за кілька секунд побачити їх на адресі сайту
• вмієш перевірити кожну сторінку сайту й відрізнити 404 від 403
• вмієш знайти за журналом, на якій ланці обірвалася публікація
• вмієш показати роботу команди за п'ять хвилин, відкривши живий сайт

Останній урок модуля — це не нова тема, а перевірка того, що ти вже зробив: сайт, форма, дашборд і бот, а разом із ними зайві права на теках, забутий токен у коді й копії чужих відповідей. Ти читаєш рядок drwxr-xr-x, шукаєш командою find файли, доступні на запис усім, і виносиш секрети за межі ~/www. Потім переходиш на вхід за SSH-ключем, рахуєш стійкість пароля в бітах і проходиш тренажер фішингу.

Після уроку ти

• вмієш читати рядок прав drwxr-xr-x і перекладати його в число — і навпаки
• вмієш однією командою знаходити у своїй теці файли, які може переписати будь-хто
• вмієш виносити токен із .js у файл поза ~/www, а той, що вже втік, — відкликати
• вмієш збирати пароль із кількох випадкових слів і рахувати його стійкість у бітах
• вмієш упізнавати фішинговий лист і знаходити у своїх публічних файлах чужі телефони та пошти