Один урок на тиждень. Нижче — що саме відбувається на кожному занятті, чого ти навчишся і що в тебе залишиться після нього. Уроки йдуть по порядку: кожен спирається на попередній.
01
Операційні системи, Linux і твій сервер
Перший урок модуля: ти отримуєш акаунт на шкільному сервері, заходиш туди по SSH зі свого комп'ютера і одразу міняєш пароль. Далі розбираєш, як у Linux улаштоване одне дерево тек замість дисків C: і D:, і що означає рядок прав drwxr-xr-x. Наприкінці кладеш файл у теку www/ і відкриваєш свою сторінку за власною адресою в браузері.
Після уроку ти
- вмієш заходити на шкільний сервер по SSH зі свого комп'ютера і міняти там пароль
- вмієш спитати в сервера командою, де ти зараз і що лежить у теці
- вмієш записати той самий шлях по-віндовому і по-лінуксовому: C:\Users\Петренко і /home/petrenko.o.8a
- вмієш прочитати рядок drwxr-xr-x і сказати, хто цю теку побачить
- вмієш покласти файл у теку www/ і відкрити його за своєю адресою
Залишається в тебе: Акаунт на сервері зі своїм новим паролем і файл index.html у теці ~/www/, який відкривається за адресою учня в браузері.
SSH і зміна пароля
команди pwd, ls, cd, nano
права rwx і числа 644 / 755
FTP-клієнт
Відкрити урок 01
02
Технічний паспорт машини: sysinfo.sh і публікація
Ти питаєш у самого сервера, з чого він зроблений: модель процесора, обсяг пам'яті, вільне місце на диску. Шість команд діагностики ти складаєш в один файл sysinfo.sh, робиш його виконуваним через chmod +x і запускаєш. Числа з виводу пояснюєш своїми словами в таблиці на сторінці.
Після уроку ти
- вмієш дізнатися командою lscpu, скільки ядер у процесора сервера
- вмієш показати командою df -h, скільки місця лишилося на диску
- вмієш сказати, що з речей на парті — hardware, що — software, а що — firmware
- вмієш написати файл sysinfo.sh, який виконує шість команд одразу
- вмієш скласти на сайті таблицю: компонент, його модель, що він робить
Залишається в тебе: Виконуваний скрипт ~/www/lesson-01/sysinfo.sh, створений ним файл hardware.txt і сторінка з таблицею компонентів, де модель CPU та обсяг RAM збігаються з виводом скрипта.
lscpu, free -h, lsblk, df -h, uptime, uname -a
шебанг і chmod +x
перенаправлення виводу у файл
hardware / software / firmware
Відкрити урок 02
03
Порти, протоколи, кабелі: чим і як з'єднують пристрої
Урок про те, чим фізично з'єднують пристрої і чому однакові на вигляд кабелі працюють по-різному. Ти розділяєш поняття роз'єму і протоколу, рахуєш на аркуші смугу для картинки 4K та час передавання файлу на 8 ГБ. Потім дивишся на власну мережу з термінала командами ip -br a, ip r і ping.
Після уроку ти
- вмієш подивитися на два однакові кабелі USB-C і сказати, який швидший
- вмієш порахувати, скільки секунд летітиме файл на 8 ГБ
- вмієш пояснити, чому 4K не працює на старому кабелі HDMI
- вмієш дізнатися командою ip -br a адресу свого комп'ютера
- вмієш перевірити командою ping, чи відповідає сервер і за скільки мілісекунд
Залишається в тебе: Файл ~/www/lesson-02/assets/net.log із виводом ip -br a, ip r і ping, а поруч index.html із заготовкою таблиці на п'ять інтерфейсів.
ip -br a, ip r, ping
біти проти байтів у розрахунку швидкості
смуга: роздільна здатність × fps × біти
TTL і default via
Відкрити урок 03
04
Мережевий паспорт і стенд 5 інтерфейсів
Продовження теми: тепер ти сам вимірюєш числа своєї мережі. Дивишся ім'я, MAC, IP і маску через ip a, шлях до сайту через traceroute, затримку через ping, а швидкість каналу міряєш тричі через curl -w і рахуєш середнє. У парі з однокласником перевіряєш чужий сабдомен запитом curl -I.
Після уроку ти
- вмієш знайти командою ip a адресу свого комп'ютера в мережі
- вмієш заміряти командою ping, за скільки мілісекунд відповідає сервер
- вмієш побачити командою traceroute усі машини на шляху до сайту
- вмієш заміряти швидкість каналу тричі й порахувати середнє
- вмієш записати вивід команди у файл і не втратити його з екрана
Залишається в тебе: Заповнена таблиця стенда 5 інтерфейсів на сторінці lesson-02, файл speed.txt із трьома замірами та середнім і файл peer.txt із результатом перевірки сабдомена однокласника.
traceroute і стрибки маршруту
curl -w і curl -I
RTT, TTL, втрати пакетів
Мбіт/с проти МБ/с
Відкрити урок 04
05
Як звук стає файлом: дискретизація і формула розміру
Ти розбираєш, як коливання повітря перетворюється на числа: частота дискретизації, розрядність, кількість каналів. За формулою рахуєш вагу хвилини нестисненого запису наперед, а потім звіряєш свій розрахунок із реальним файлом через ffprobe. Наприкінці робиш із WAV файл MP3 однією командою ffmpeg.
Після уроку ти
- вмієш порахувати на аркуші, скільки мегабайтів займе хвилина запису
- вмієш дізнатися командою ffprobe, з якою частотою записано твій файл
- вмієш знайти у виводі команди бітрейт і тривалість
- вмієш зробити з файлу WAV файл MP3 однією командою
- вмієш сказати, коли брати WAV, коли FLAC, а коли MP3
Залишається в тебе: Локальна тека media/lesson-03/ із source.wav і out-320.mp3; на сервері у ~/www/lesson-03/ лежать probe-source.json та index.html із власним розрахунком ваги.
ffprobe і ffmpeg
частота дискретизації і теорема Найквіста
розрядність 8 / 16 / 24 біти
WAV, FLAC, MP3
Відкрити урок 05
06
Аудіолабораторія: одне джерело — чотири формати
З того самого source.wav ти робиш чотири файли різної якості, по одній команді на файл, і слухаєш їх у навушниках, щоб почути, де починається різниця. Свій вибір формату доводиш не словами, а числами: бітрейт і вага кожного файлу йдуть у report.csv. Аудіо лишається на твоєму комп'ютері, на сервер їде лише текст.
Після уроку ти
- вмієш зробити з одного WAV чотири файли різної якості, по одній команді на кожен
- вмієш почути на музиці, де саме починається різниця, і назвати цей файл
- вмієш зібрати п'ять рядків чисел у файл report.csv
- вмієш вибрати формат для свого телефона й підкріпити вибір своїми числами
Залишається в тебе: Чотири файли в media/lesson-03/ (три MP3 різного бітрейту й out.flac) і три текстові файли на сервері: report.csv, cmd.txt та index.html із таблицею.
бітрейт і ключ -b:a
стиснення з втратами і без втрат
FLAC
звіт report.csv
Відкрити урок 06
07
Растр і вектор: піксель, dpi, вибір формату
Ти наближаєш фото до окремих квадратиків і бачиш, що зображення — це таблиця чисел, а вектор описує ті самі фігури інакше. Рахуєш, скільки сантиметрів завширшки вийде відбиток файлу на 1200 px, і вчишся обирати формат під конкретну картинку. Реальні параметри файлу читаєш командою identify, а зменшену копію робиш через magick -resize.
Після уроку ти
- вмієш наблизити фото до окремих квадратиків і сказати, скільки їх у рядку
- вмієш порахувати, скільки сантиметрів завширшки буде відбиток файлу 1200 px
- вмієш вибрати формат для картинки перед тобою: JPEG, PNG, WebP, SVG чи GIF
- вмієш виконати identify source.png і прочитати кожне число з відповіді
- вмієш зробити зменшену копію командою magick -resize
Залишається в тебе: Локальна тека media/lesson-04/ із source.png і thumb.jpg; на сервері у ~/www/lesson-04/ лежать identify.txt, cmd.txt та index.html.
ImageMagick: identify і magick -resize
растр і вектор
пікселі, роздільна здатність, dpi
альфа-канал
Відкрити урок 07
08
Чотири файли з одного PNG і власний SVG
Практична половина теми зображень. З одного source.png ти командами робиш чотири різні файли: мініатюру, JPEG низької якості, прозорий PNG і WebP, а п'ятий файл — logo.svg — пишеш руками, тег за тегом. Економію ваги рахуєш у відсотках і ставиш у таблицю на сторінці-галереї.
Після уроку ти
- вмієш зробити з одного source.png чотири файли: мініатюру, «поганий» JPEG, прозорий PNG і WebP
- вмієш назвати вголос, що робить кожен ключ у твоїй команді magick
- вмієш написати logo.svg руками: viewBox, фігури, текст, кольори
- вмієш порахувати економію ваги у відсотках і поставити її в таблицю
Залишається в тебе: Файл logo.svg до 20 КБ, sizes.csv із заголовком file,format,width,height,bytes і чотирма рядками даних, cmd.txt із виконаними командами та сторінка-галерея у ~/www/lesson-04/.
ключі -resize і -quality
-strip і метадані фото
WebP
SVG: viewBox і фігури
Відкрити урок 08
09
Відео зсередини: fps, роздільна здатність, кодек ≠ контейнер
Відео — це послідовність кадрів плюс доріжка звуку, і сьогодні ти розбираєш файл на ці складники. Справжні параметри дізнаєшся командою ffprobe, а не за назвою файлу, і розділяєш два різні поняття: кодек і контейнер. Наприкінці рахуєш вагу ролика наперед і перекодовуєш джерело в 720p30 однією командою ffmpeg.
Після уроку ти
- вмієш сказати, чому цілий файл .mp4 не відкрився на телевізорі
- вмієш однією командою ffprobe source.mp4 дізнатися розмір кадру, fps і кодек
- вмієш порахувати наперед, скільки мегабайтів важитиме ролик на 60 секунд
- вмієш пояснити, чому ролик зі слайдами легший за футбол тієї самої тривалості
- вмієш зменшити ролик до 720p30 однією командою ffmpeg
Залишається в тебе: Локальна тека media/lesson-05/ із source.mp4 і v720p30.mp4; на сервері у ~/www/lesson-05/ лежать probe.txt, cmd.txt та index.html із розрахунком ваги.
ffprobe
fps і роздільна здатність
бітрейт як вага секунди
кодек проти контейнера (MP4, MKV, WebM)
Відкрити урок 09
10
Мій перший монтаж у командному рядку
Ти збираєш ролик приблизно на 10 секунд без відеоредактора, самими командами. Вирізаєш фрагменти ключами -ss і -t, склеюєш їх через concat, накладаєш титр фільтром drawtext. Червоні рядки помилок ffmpeg читаєш і виправляєш сам, а весь монтаж описуєш текстом так, щоб той самий ролик можна було зібрати заново.
Після уроку ти
- вмієш вирізати з довгого відео потрібні три секунди однією командою, без відеоредактора
- вмієш склеїти кілька вирізаних фрагментів в один ролик і полагодити склейку, якщо вона не вийшла
- вмієш написати поверх картинки свій підпис і поставити його в потрібний кут
- вмієш прочитати рядок помилки і сказати, що саме виправити
- вмієш описати монтаж текстом так, щоб той самий ролик зібрався з нуля
Залишається в тебе: Ролик final.mp4 і кадр poster.jpg лишаються на твоєму комп'ютері; на сервер їдуть чотири текстові файли: cmd.txt, probe.txt, report.csv та index.html із монтажним листом.
ключі -ss, -t, -to
склейка concat
фільтр drawtext
згасання fade
Відкрити урок 10
11
Формат — це структура, а не розширення (magic numbers)
Тип файлу задають перші байти всередині, а не букви після крапки — і сьогодні ти в цьому переконуєшся сам. Дивишся сигнатури десяти файлів набору, серед яких три з підміненим розширенням, і заповнюєш звіт detect.txt: ім'я, розширення, справжній MIME-тип, збіг. Заразом відкриваєш свій .docx як zip-архів і бачиш, з яких файлів він складений.
Після уроку ти
- вмієш сказати, що всередині файлу насправді, навіть коли розширення не відповідає вмісту
- вмієш подивитися перші байти будь-якого файлу однією командою — у Git Bash або в PowerShell
- вмієш заповнити звіт на десять файлів: ім'я, розширення, справжній тип і чи вони збіглися
- вмієш відкрити свій .docx як архів і показати, з яких файлів він складений
- вмієш пояснити, чому картинка з сервера інколи не показується, а завантажується
Залишається в тебе: Три текстові файли у ~/www/lesson-06/: detect.txt на десять рядків у форматі «ім'я | розширення | MIME-тип | збіг», signatures.md та index.html; сам набір лишається локально.
сигнатура файлу (magic number)
xxd і шістнадцяткові байти
MIME-тип у форматі тип/підтип
unzip -l
Відкрити урок 11
12
Пакетна конвертація скриптом і manifest.json
Те, що минулого разу ти робив руками для десяти файлів, тепер робить скрипт — і робить однаково щоразу. detect.sh визначає тип за вмістом, convert.sh через розгалуження case обирає, у що перетворити файл, а підсумок скрипт записує в manifest.json. Окремо ти домагаєшся, щоб другий запуск нічого не зіпсував і не наплодив копій.
Після уроку ти
- вмієш обробити цілу теку файлів однією командою замість сотні кліків
- вмієш написати скрипт, який сам дивиться, що всередині файлу, і залежно від цього обирає конвертацію
- вмієш зробити скрипт ідемпотентним: другий запуск нічого не ламає
- вмієш скласти звіт manifest.json, у якому числа не суперечать одне одному
- вмієш знайти, на чому саме впав скрипт, і виправити це місце
Залишається в тебе: Чотири файли у ~/www/lesson-06/: detect.sh, convert.sh, manifest.json та index.html, який показує таблицю через fetch; тека out/ і сам набір лишаються на твоєму комп'ютері.
розгалуження case
set -e і перевірка bash -n
ідемпотентність
JSON і fetch
Відкрити урок 12
13
Як працює генеративна модель. Анатомія промпта
Сьогодні готової картинки немає — є текст, за яким модель робить файл gen-1.png. Ти розбираєш, як із шуму виходить зображення, навіщо потрібен seed і з яких семи блоків складається запит. Параметри кожної генерації записуєш у prompts.json, а під картинкою підписуєш, що її зробила машина і яка саме.
Після уроку ти
- вмієш пояснити, звідки береться картинка, якої ніде не існувало
- вмієш скласти запит із семи блоків і дописати список того, чого на картинці бути не повинно
- вмієш записати seed, щоб завтра повторити вдалу картинку
- вмієш знаходити сліди машини: зайві пальці, криві літери, неправильні тіні
- вмієш підписати роботу так, щоб було видно: тут працював ШІ
Залишається в тебе: Файл gen-1.png лишається в локальній теці media/lesson-07/; на сервер їдуть prompts.json із записом генерації (модель, параметри, seed) та index.html із маркуванням.
дифузія і латент
seed
сім блоків промпта
маркування згенерованого зображення
Відкрити урок 13
14
Галерея з чесною атрибуцією + підсумковий тест модуля
З одного задуму ти робиш чотири спроби поспіль, змінюючи в промпті одну річ за раз, і записуєш кожну ітерацію в prompts.json. Той самий підпис командою exiftool записує той самий підпис усередину самих файлів у поля XMP, а під галереєю ти прямо пишеш, що зробила людина, а що модель. Наприкінці — підсумковий тест по всіх семи темах модуля.
Після уроку ти
- вмієш міняти в промпті одну річ за раз і записувати, що з цього вийшло
- вмієш однією командою прочитати текст, захований усередині .png
- вмієш вписати своє ім'я і джерело зображення в метадані файлу
- вмієш підписати роботу так, щоб не було питання «а це точно ти зробив?»
- вмієш показати на картинці конкретну ваду і назвати її причину
Залишається в тебе: Три текстові файли у ~/www/lesson-07/: prompts.json на чотири записи, exif.txt і index.html із галереєю та атрибуцією; поле Description у exif.txt збігається з полем prompt у prompts.json.
exiftool
метадані XMP: Creator, Credit, Description
чанки tEXt та iTXt у PNG
чесна атрибуція роботи людини й моделі
Відкрити урок 14
15
Ігри, 3D і занурення: VR / AR / MR
На парті лежать окуляри, і кожен приміряє їх по черзі, а далі ви розбираєте намальовану кімнату на складники: точки, грані й картинку, натягнуту зверху. Ти розводиш поняття VR, AR і MR, з'ясовуєш, чому в окулярах стає зле, і чим 3DoF відрізняється від 6DoF. Наприкінці збираєш власну сцену з трьох фігур на A-Frame і кладеш її на сервер.
Після уроку ти
- вмієш розрізняти на око, де VR, де AR, а де MR, і пояснювати чому
- вмієш розібрати 3D-предмет на точки, грані й текстуру зверху
- вмієш пояснити, чому в окулярах стає зле і як цього уникнути
- вмієш перевірити, чи помічає пристрій, що ти зробив крок убік
- вмієш зібрати свою першу сцену й покласти її на сервер
Залишається в тебе: Сцена index.html із трьох об'єктів і файл game-design.json із задумом гри у теці ~/www/lesson-08/; бібліотека aframe.min.js підключена з власного сабдомена, а не з чужого сайту.
A-Frame і теги a-scene, a-box
полігон, меш, текстура
3DoF проти 6DoF
частота кадрів і затримка
Відкрити урок 15
16
VR-прототип і фінальне портфоліо модуля
Сцена з минулого уроку починає реагувати: об'єктів стає п'ять, один обертається сам через атрибут animation, другий рахує твої кліки і показує число написом просто в сцені. Друга робота дня — портфоліо: одна головна сторінка, з якої відкриваються всі вісім робіт модуля. Сцену ти показуєш на захисті, а адресу портфоліо можна дати будь-кому після курсу.
Після уроку ти
- вмієш читати розмітку сцени по рядках і пояснювати кожен атрибут
- вмієш запускати рух одним атрибутом, без жодного рядка JavaScript
- вмієш робити предмет клікабельним і рахувати кліки написом у сцені
- вмієш знаходити причину чорного екрана за одну хвилину, а не за урок
- вмієш зібрати головну сторінку з восьми посилань і перевірити кожне
Залишається в тебе: Сцена з п'яти об'єктів з анімацією та лічильником кліків у ~/www/lesson-08/ і головна сторінка ~/www/index.html, де всі вісім посилань віддають код 200.
атрибут animation в A-Frame
обробник кліку і тег a-text
консоль браузера для пошуку помилок
код відповіді 200
Відкрити урок 16