Лабораторные работы по дисциплине «Web-технологии» (СибГУТИ).
Серверные лабы (lab4–lab9) — Linux-администрирование на VirtualBox + Ubuntu 20.04 Server/Desktop с bash-автоматизацией.
Лабы по веб-дизайну (lab10+) — макеты в Figma.
Все лабы оформляются LaTeX-отчётом по ГОСТ 7.32 (XeLaTeX), готовым для импорта в Overleaf.
⚠️ ВажноМетодички преподавателя для серверных лаб используют другие версии ВМ и зависимостей — все скрипты в этом репозитории реализованы на Ubuntu 20.04 с зависимостями под эту версию.
Но LaTeX-отчёты написаны в соответствии с требованиями методички и фактическая реализация может отличаться от методички — это нормально.Для дизайн-лаб (Figma) ВМ и
config.shне используются — работа ведётся в браузере или desktop-приложении Figma.
| Образ | Ссылка |
|---|---|
| 🖥️ Ubuntu 20.04 Desktop | ubuntu-20.04.6-desktop-amd64.iso |
| 🔧 Ubuntu 20.04 Server | ubuntu-20.04.6-live-server-amd64.iso |
| Лаба | Тема | Что делается | Скрипты | LaTeX-отчёт | Скриншоты | Методичка |
|---|---|---|---|---|---|---|
| Lab 4 | NAT + DHCP | Настройка шлюза (gateway) с NAT и iptables, установка DHCP-сервера isc-dhcp-server | lab4/ | latex-report/ | screenshots/ | PDF 4 |
| Lab 5 | DNS + DDNS | Установка BIND9, настройка прямой/обратной DNS-зоны, интеграция с DHCP (динамические DNS-записи) | lab5/ | latex-report/ | screenshots/ | PDF 5 |
| Lab 6 | Seafile | Развёртывание облачного хранилища Seafile на MariaDB + Nginx, подключение Desktop-клиента | lab6/ | latex-report/ | screenshots/ | PDF 6 |
| Lab 7 | iRedMail | Настройка полноценного почтового сервера iRedMail (Postfix + Dovecot + OpenLDAP + Nginx), отправка писем | lab7/ | latex-report/ | screenshots/ | PDF 7 |
| Lab 8 | WordPress + PrivateBin | Развёртывание LAMP-стека (Apache2 + MySQL + PHP), установка WordPress и PrivateBin с HTTPS | lab8/ | latex-report/ | screenshots/ | PDF 8 |
| Lab 9 | Ansible Monitoring | Автоматизация сбора информации с узлов сети через Ansible (SSH-ключи, inventory, playbook) | lab9/ | latex-report/ | screenshots/ | PDF 9 |
| Lab 10 | Основы Figma | Макет интернет-магазина домашних растений (1440 px) + адаптивы 768 px и 360 px, Layout grid, Constraints | — | latex-report/ | screenshots/ | PDF 10 |
| Lab 11 | Веб-дизайн | Многостраничный макет сайта чемпионата по фиджитал-футболу (5 страниц: главная, команда, участник, турнирная таблица, магазин) + адаптивы 768 px и 360 px | — | latex-report/ | screenshots/ | PDF 11 |
| Lab 12 | Основы HTML и CSS | Четыре независимых Codepen-задания: разметка текста и атрибуты, списки и таблицы, CSS-селекторы, оформление текстовых блоков (типографика, фоны, маркеры списков) | — | latex-report/ | screenshots/ | PDF 12 |
| Lab 13 | Погружение в JavaScript | Четыре урока: переменные и бонусный баланс, массивы и поиск через includes, SPA-сайт «Персонажи Marvel» (fetch к API, карточки и модалки на Bootstrap 5), деплой на собственный сервер за Caddy с TLS Let's Encrypt |
lab13/ | latex-report/ | screenshots/ | PDF 13 |
| Lab 14 | Резюме, PDF, Material Wave | Интерактивное веб-резюме на чистых HTML/CSS/JS: редактирование текста «на месте» (contenteditable), сохранение правок и фото в localStorage, экспорт в PDF через window.print() + @media print, CSS-анимации изменений и эффект Material Wave (ripple); деплой на собственный сервер за Caddy |
lab14/ | latex-report/ | screenshots/ | PDF 14 |
| Lab 15 | Python (Stepik) | Решения учебных задач курса по программированию на Python: переменные и присваивание, числовые типы, модуль math, ввод-вывод, операторы сравнения и логические операторы (~70 подвигов) | lab15/ | — | — | — |
Применимо к серверным лабам (lab4–lab9). Все они строятся на одной внутренней сети VirtualBox (intnet):
Internet
|
enp0s3 (NAT)
[gateway] 192.168.N.1
enp0s8 (intnet)
|
├── desktop1 192.168.N.10 (Ubuntu Desktop, DHCP)
├── seafile 192.168.N.4 (Seafile)
├── mail 192.168.N.5 (iRedMail)
├── wordpress 192.168.N.6 (LAMP + WordPress)
└── privatebin 192.168.N.7 (PrivateBin)
N— твой номер студента, задаётся один раз вconfig.texи проходит через все отчёты автоматически.
Lab 10 (Figma) ВМ не использует — работа ведётся в браузере, скрипт-каркаса и config.sh в папке lab10/ нет.
web-technologies-labs/
│
├── labN/ ← папка каждой лабораторной работы
│ ├── README.md ← описание лабы + ссылка на скачивание scripts.zip
│ ├── config.sh ← общие переменные (IP, имя студента, сеть) — только серверные лабы
│ ├── <vm>_labN_<task>.sh ← bash-скрипты автоматизации — только серверные лабы
│ ├── Методичка (labN).pdf ← PDF методички преподавателя
│ └── latex-report/ ← LaTeX-отчёт для Overleaf
│ ├── README.md ← ссылка на скачивание overleaf ZIP
│ ├── main.tex ← точка входа: подключает все части отчёта
│ ├── config.tex ← настройки студента (номер, ФИО, группа)
│ ├── parts/ ← разделы отчёта (intro, chap1..N, conclusion)
│ │ ├── title.tex ← титульная страница
│ │ ├── intro.tex ← введение
│ │ ├── chap1.tex ← глава 1 (теория / топология)
│ │ ├── chap2.tex ← глава 2 (практика / команды)
│ │ ├── chap3.tex ← глава 3 (результаты / проверка)
│ │ └── conclusion.tex ← заключение
│ ├── screenshots/ ← скриншоты для отчёта (PNG/JPG)
│ │ ├── screenshots.sh ← скрипт автоматического сбора скриншотов
│ │ └── README.md ← список скриншотов с подписями
│ ├── img/ ← прочие изображения (выполнение скриптов)
│ ├── fonts/ ← шрифты (Times New Roman и др. для ГОСТ)
│ └── labN_latex_report.pdf ← скомпилированный PDF отчёта
│
├── LaTeX_g7-32_template_tsvs-main/ ← базовый LaTeX-шаблон по ГОСТ 7.32
│
└── .github/
└── workflows/
└── release-latex.yml ← GitHub Actions: собирает ZIP для Overleaf
и scripts.zip при каждом push в main
Если хочешь редактировать скрипты на хосте и сразу видеть изменения на всех ВМ — настрой глобальную общую папку один раз на золотом образе, и все клоны унаследуют её автоматически.
Шаг 1. В VirtualBox → Файл → Настройки → Общие папки → Добавить:
- Путь на хосте: папка с репозиторием
- Постоянное подключение: ✅
- Автоподключение: ✅
- Сделать глобальной: ✅
Шаг 2. Установить зависимости внутри ВМ (достаточно сделать только на золотом образе):
sudo apt install -y virtualbox-guest-utils build-essential dkms
sudo usermod -aG vboxsf $USER
# перезагрузить ВМПосле перезагрузки папка появится автоматически в /media/sf_<имя_папки>. Все клоны этого образа сразу имеют доступ — никакой дополнительной настройки не требуется.
Настройка выполняется дважды: для золотого образа Server и золотого образа Desktop.
Все последующие клоны унаследуют настройку автоматически.