Введение

Добро пожаловать в документацию по подготовке к демо-экзамену 2026 года. Это руководство охватывает все ключевые инструменты и технологии, которые понадобятся для успешной сдачи: от визуального проектирования сайтов в Bootstrap Studio до настройки локального сервера и работы с базами данных.

Материал структурирован последовательно — от базовых понятий к более сложным темам. Каждый раздел содержит пошаговые инструкции, иллюстрации и практические советы, чтобы вы могли быстро освоить необходимые навыки.

1. Интерфейс программы

Bootstrap Studio имеет интуитивно понятный интерфейс, разделенный на несколько ключевых панелей:

Редактирование HTML-кода

Bootstrap Studio позволяет не только визуально редактировать страницу, но и напрямую работать с HTML-кодом:

• Правый клик → Edit HTML — редактирование HTML-кода выбранного элемента
• Правый клик → Edit as HTML — редактирование всей области в текстовом режиме
• Custom Code — компонент для вставки произвольного HTML/CSS/JS кода
• Overview Panel — древовидная структура DOM для навигации по вложенным элементам

Основные элементы управления

2. Создание и управление проектами

Создание нового проекта

1. Нажмите File → New или используйте Ctrl+N
2. Выберите один из вариантов:
   • Blank Page — пустая страница для создания с нуля
   • Templates — готовые шаблоны (Landing, Portfolio, Blog и др.)
   • Bootstrap Version — выбор версии Bootstrap (4.x или 5.x)
3. Укажите имя проекта и место сохранения

Структура проекта

MyProject.bsdesign/
├── index.html
├── assets/
│   ├── css/
│   │   ├── styles.css
│   │   └── custom.css
│   ├── js/
│   │   ├── script.js
│   │   └── custom.js
│   ├── img/
│   │   └── logo.png
│   └── fonts/
├── components/ (пользовательские компоненты)
└── project.json (настройки проекта)

Сохранение и экспорт

• Сохранить проект: Ctrl+S — сохраняет .bsdesign файл
• Экспортировать: Ctrl+E — экспортирует готовый HTML/CSS/JS код
• Publish: Публикация на хостинг через FTP/SFTP (на экзамене не используется — интернета нет)

3. Работа с компонентами Bootstrap

Добавление компонентов

1. Откройте панель Components слева
2. Найдите нужный компонент (используйте поиск)
3. Перетащите компонент на холст (Stage)
4. Настройте свойства в панели Options

Основные категории компонентов

Layout (Разметка)

• Container / Container Fluid — контейнеры для контента
• Row — строки сетки Bootstrap
• Column — колонки с настройкой ширины (col-md-6, col-lg-4 и т.д.)
• Section — семантический блок для секций страницы

Navigation (Навигация)

• Navbar — адаптивная навигационная панель
• Nav — простое меню навигации
• Breadcrumb — хлебные крошки
• Pagination — пагинация страниц

Components (Элементы)

• Button — кнопки с различными стилями (Primary, Secondary, Outline и др.)
• Card — карточки для контента с изображением, заголовком и текстом
• Table — таблицы с поддержкой полосатости, обводки, hover-эффектов
• Alert — уведомления и сообщения (Success, Warning, Danger, Info)
• Badge — значки и метки
• Modal — модальные окна (всплывающие диалоги)
• Carousel — слайдеры изображений с индикаторами и стрелками
• Accordion — раскрывающиеся блоки (спойлеры)

Forms (Формы)

• Form — контейнер формы
• Input — текстовые поля (text, email, password, number)
• Textarea — многострочные поля для длинного текста
• Select — выпадающие списки
• Checkbox / Radio — чекбоксы и радиокнопки
• File Input — поле загрузки файлов
• Form Group — обёртка с label для полей формы

Редактирование компонентов

• Двойной клик — редактирование текста
• Правая кнопка мыши — контекстное меню (Duplicate, Delete, Copy HTML и т.д.)
• Options Panel — изменение атрибутов, классов, стилей
• Drag & Drop — перемещение элементов в структуре

4. Стили и скрипты

Работа с CSS

1. Откройте панель Design → Styles
2. Нажмите + для создания нового CSS файла
3. Напишите свои стили в редакторе
4. Файл автоматически подключится к проекту

/* Пример пользовательских стилей */
.my-custom-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    color: white;
}

.my-button {
    background: #667eea;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.my-button:hover {
    background: #764ba2;
    transform: translateY(-2px);
}

Работа с JavaScript

1. Откройте Design → JavaScript
2. Создайте новый JS файл
3. Добавьте свой код

// Пример JavaScript кода
document.addEventListener('DOMContentLoaded', function() {
    // Плавная прокрутка к якорям
    const links = document.querySelectorAll('a[href^="#"]');
    
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(
                this.getAttribute('href')
            );
            target.scrollIntoView({ behavior: 'smooth' });
        });
    });
});

Подключение внешних библиотек

• Локальные файлы: Импортируйте через Design Panel
• Встроенные библиотеки: Google Fonts, Font Awesome, Animate.css, AOS (подключаются через Settings → Libraries)

5. Предпросмотр и экспорт

Предпросмотр в браузере

Bootstrap Studio имеет встроенный Live Preview — при любом изменении на холсте страница в браузере обновляется автоматически, без необходимости нажимать F5.

• Нажмите кнопку Preview или Ctrl+P
• Сайт откроется в браузере по умолчанию на локальном адресе
• Изменения применяются мгновенно (Live Preview) — не нужно обновлять страницу
• Можно открыть предпросмотр на нескольких устройствах одновременно (по IP в локальной сети)

Адаптивный предпросмотр

В Bootstrap Studio можно переключать режимы просмотра, чтобы увидеть, как сайт выглядит на разных устройствах. Размеры соответствуют стандартным брейкпоинтам Bootstrap 5:

• Desktop — полноэкранный режим (≥1200px)
• Tablet — планшеты (≥768px)
• Mobile — смартфоны (≤576px)
• Custom — произвольное разрешение (вручную)

Экспорт проекта

1. Выберите File → Export или Ctrl+E
2. Настройте параметры экспорта:
   • Minify CSS/JS — минификация кода для уменьшения размера файлов
   • Include jQuery — включить библиотеку jQuery (если используется)
   • Export Images — экспорт всех изображений проекта
   • Pretty Print — форматирование HTML для читаемости
3. Выберите папку для сохранения (например, D:\OpenServer\domains\mysite)
4. Нажмите Export

6. Использование шаблонов и тем

Bootstrap Studio содержит обширную коллекцию профессиональных шаблонов, которые можно использовать как основу для проекта. Это значительно ускоряет работу на демо-экзамене — не нужно создавать дизайн с нуля.

Встроенные шаблоны

При создании нового проекта (File → New) доступны готовые шаблоны, разделённые по категориям:

Применение шаблона

Работа с готовыми блоками (Blocks)

Помимо полных шаблонов, Bootstrap Studio предлагает библиотеку готовых блоков (секций страницы), которые можно комбинировать между собой:

• Headers — шапки сайта с логотипами и навигацией
• Heroes — большие вступительные секции с заголовком и кнопкой
• Features — секции с преимуществами / возможностями
• Pricing — таблицы цен и тарифов
• Testimonials — отзывы клиентов
• Contacts — контактные формы и карты
• Footers — подвалы с ссылками и копирайтом

Создание собственных компонентов

1. Создайте нужный блок на странице и настройте его
2. Выделите корневой элемент блока
3. Правая кнопка → Create Component
4. Укажите имя и категорию для компонента
5. Компонент появится в панели Components и будет доступен во всех проектах

7. Open Server Panel (OSPanel)

Возможности OSPanel

• Веб-серверы: Apache, Nginx
• PHP версии: 5.x, 7.x, 8.x (можно переключать)
• Базы данных: MySQL, MariaDB, PostgreSQL
• phpMyAdmin для управления БД
• Поддержка SSL/HTTPS
• Модульная система с возможностью расширения

Установка OSPanel

8. Настройка и использование OSPanel

Первый запуск

1. Кликните по иконке OSPanel в трее
2. Выберите Запустить (зеленый флаг)
3. Дождитесь запуска всех модулей (Apache, MySQL)
4. Иконка станет зеленой — сервер работает

Размещение сайта

Структура папок OSPanel:
D:\OpenServer\
├── domains/          ← Папка для сайтов
│   ├── localhost/    (стандартный домен)
│   ├── mysite/       (ваш сайт)
│   └── test-project/
├── modules/          (модули PHP, MySQL)
├── userdata/         (настройки, логи)
└── Open Server.exe

Создание сайта

1. Создайте папку в domains, например: D:\OpenServer\domains\mysite
2. Скопируйте экспортированные файлы Bootstrap Studio в эту папку
3. Откройте браузер и перейдите по адресу: http://mysite/

mysite/
├── index.html
├── assets/
│   ├── css/
│   ├── js/
│   └── img/
└── .htaccess

Настройка виртуальных хостов

1. Правый клик по иконке OSPanel → Настройки
2. Вкладка Домены
3. Добавьте новый домен с указанием папки
4. Перезапустите сервер

Управление модулями

9. Работа с phpMyAdmin

Доступ к phpMyAdmin

1. Убедитесь, что OSPanel запущен
2. Кликните по иконке OSPanel → Дополнительно → phpMyAdmin
3. Или откройте в браузере: http://localhost/openserver/phpmyadmin/
4. Введите данные для входа:
   • Пользователь: root
   • Пароль: (оставьте пустым или по умолчанию)

Интерфейс phpMyAdmin

• Левая панель — список баз данных и таблиц
• Верхнее меню — основные действия (SQL, Импорт, Экспорт)
• Центральная область — рабочая зона с данными

Основные вкладки

10. Управление базой данных

Создание базы данных

Создание таблицы

1. Выберите созданную базу данных
2. Введите имя таблицы: users
3. Укажите количество столбцов: 5
4. Настройте поля:
   • id — INT, AUTO_INCREMENT, PRIMARY KEY
   • name — VARCHAR(100)
   • email — VARCHAR(100), UNIQUE
   • password — VARCHAR(255)
   • created_at — TIMESTAMP, DEFAULT CURRENT_TIMESTAMP
5. Нажмите Сохранить

SQL-запросы

-- Создание таблицы
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Вставка данных
INSERT INTO users (name, email, password) 
VALUES ('Иван Иванов', 'ivan@example.com', 'hashed_password');

-- Выборка данных
SELECT * FROM users;

-- Обновление данных
UPDATE users SET name = 'Петр Петров' WHERE id = 1;

-- Удаление данных
DELETE FROM users WHERE id = 1;

Импорт базы данных

1. Выберите базу данных
2. Перейдите на вкладку Импорт
3. Нажмите Выберите файл и выберите .sql файл
4. Кодировка: utf-8
5. Нажмите Вперед

Экспорт базы данных

1. Выберите базу данных
2. Перейдите на вкладку Экспорт
3. Выберите метод: Обычный или Дополнительный
4. Формат: SQL
5. Нажмите Вперед для скачивания

Подключение к БД из PHP

<?php
// Параметры подключения
$host = 'localhost';
$dbname = 'mysite_db';
$username = 'root';
$password = '';

try {
    // Подключение через PDO
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", 
                   $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    echo "Подключение успешно!";
    
    // Пример запроса
    $stmt = $pdo->query("SELECT * FROM users");
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    foreach ($users as $user) {
        echo $user['name'] . " - " . $user['email'] . "<br>";
    }
    
} catch(PDOException $e) {
    echo "Ошибка подключения: " . $e->getMessage();
}
?>

11. Работа с GIMP

GIMP — это бесплатный графический редактор, который удобно использовать на демо-экзамене для подготовки графики: обрезки скриншотов, изменения размеров, сжатия изображений для веб-сайта.

Установка GIMP на Windows

1. Перейдите на официальный сайт gimp.org (заранее, до экзамена).
2. Скачайте установщик для Windows (обычно gimp-2.x.x-setup.exe).
3. Запустите файл установки и следуйте мастеру.
4. После установки запустите GIMP через ярлык на рабочем столе.

Базовый рабочий процесс для экзамена

Экспорт изображений для веб-сайта

1. Выберите Файл → Экспортировать как…
2. Задайте имя файла и формат:
   • .png — для скриншотов, иконок, изображений с прозрачностью
   • .jpg — для фотографий и полноцветных картинок без прозрачности
3. В окне настроек:
   • для JPEG установите качество 80–90%
   • для PNG оставьте настройки по умолчанию
4. Сохраните файл в папку проекта (assets/img или image).

Базовый функционал и ключевые инструменты GIMP

Для демо-экзамена достаточно уверенно владеть несколькими основными группами инструментов:

• Инструменты выделения:
  • Прямоугольное выделение (R)
  • Эллиптическое выделение (E)
  • Свободное выделение (F)
  • «Волшебная палочка» / Fuzzy Select (U)
  • Выделить по цвету (Shift+O)
• Инструменты трансформации:
  • Перемещение (M)
  • Кадрирование / Crop (Shift+C)
• Инструменты рисования и редактирования:
  • Текст (T)
  • Пипетка / Color Picker (O)
  • Кисти/карандаш/ластик
• Слои — отдельные уровни изображения; удобно держать фон на одном слое, текст и стрелки — на других.

Основные сочетания клавиш GIMP

Файл и редактирование

Горячие клавиши инструментов

Полезные инструменты в GIMP для экзамена

• Инструмент «Текст» — добавление подписей к скриншотам.
• Инструмент «Кисть» / «Карандаш» — выделение важных областей (стрелки, обводки).
• Слои — размещение текста, стрелок и фона на отдельных слоях.
• Фильтры → Размывание — маскирование конфиденциальной информации.

12. Работа с Draw.io

Draw.io (ныне diagrams.net) — это бесплатный онлайн-сервис для создания диаграмм, блок-схем, ER-диаграмм и архитектурных схем. На демо-экзамене он полезен для визуализации структуры ваших проектов, баз данных, пользовательских интерфейсов и бизнес-процессов.

Когда и зачем использовать Draw.io на экзамене

• Архитектура приложения: визуализация компонентов, модулей, их взаимодействия (MVC, слои приложения).
• ER-диаграммы (Entity-Relationship): структура базы данных, связи между таблицами, ключи.
• UML-диаграммы: диаграммы классов, последовательности, состояния, вариантов использования.
• Блок-схемы: алгоритмы, бизнес-процессы, пользовательские сценарии.
• Макеты (wireframes): прототипы интерфейсов и раскладка страниц.
• Диаграммы развёртывания: инфраструктура, хостинг, взаимодействие с сервисами.

Доступ к Draw.io

Draw.io доступен полностью в браузере — никакой установки не требуется. Есть работать можно несколькими способами:

1. Веб-версия (рекомендуется): откройте diagrams.net в браузере. Нет логина, регистрации, никаких ограничений.
2. Локальное приложение (опционально): скачайте Desktop версию для работы без интернета.
3. VS Code расширение: расширение Draw.io Integration позволяет редактировать диаграммы прямо в редакторе.

Основной рабочий процесс в Draw.io

Полезные функции Draw.io

1. Встроенные библиотеки фигур и иконок

• "More Shapes" — откройте через левую панель и добавьте нужные библиотеки
• UML: классы, интерфейсы, компоненты, пакеты
• Flowchart: прямоугольники, ромбы, овалы, параллелограммы
• Database (ER): таблицы, сущности, связи (1-to-1, 1-to-many)
• AWS, Azure, Google Cloud: облачные компоненты и сервисы
• Icons: иконки для визуализации объектов (пользователь, сервер, БД)

2. Сетка (Grid) и выравнивание

• File → Page Setup: включите Grid и Snap to Grid для аккуратного размещения элементов
• Выравнивание: выделите несколько объектов и используйте кнопки Arrange (слева внизу) для выравнивания по горизонтали, вертикали, распределения

3. Слои (Layers)

• Меню View → Layers: создавайте несколько слоёв для различных компонентов
• Удобно для больших диаграмм — показывайте/скрывайте компоненты без удаления

4. Комментарии и аннотации

• Щёлкните правой кнопкой на элементе → Edit Data для добавления дополнительной информации
• Добавьте текстовые поля и комментарии с пояснениями

5. Сочетания клавиш

Примеры диаграмм, полезных на демо-экзамене

Пример 1: ER-диаграмма для базы данных

Если ваш проект использует MySQL/phpMyAdmin, создайте диаграмму базы данных:

1. Добавьте в Shape Libraries: Database (ER Diagram)
2. Перетащите таблицы (Entity) на холст
3. Добавьте поля (атрибуты) тройной стрелкой и привязав их к таблицам
4. Нарисуйте связи (Relationships): один-ко-многим, один-к-одному
5. Экспортируйте как PNG и добавьте в документацию проекта

Пример 2: Архитектурная диаграмма приложения

Покажите структуру вашего приложения:

• Frontend (Bootstrap Studio UI)
• Backend (PHP, Node.js)
• Database (MySQL)
• External APIs (если используются)
• Хостинг и сервер (OSPanel)

Пример 3: UML-диаграмма классов

Для проектов на PHP/JavaScript покажите структуру классов:

• Классы и их свойства
• Методы (public, private, protected)
• Наследование и интерфейсы
• Зависимости между классами

Пример 4: Блок-схема пользовательского сценария

Визуализируйте ключевые бизнес-процессы:

• Начало → Ввод данных → Проверка → Обработка → Результат → Конец
• Условные ветления (если/иначе)
• Циклы (повторение)

Быстрые советы для экзамена

• Много диаграмм = более высокая оценка: чем больше визуализации, тем лучше демонстрируется глубина проекта
• Экспортируйте в PDF: включите несколько диаграмм в итоговый report или документацию
• Используйте единый стиль: выберите одну цветовую палитру, единый шрифт, размеры элементов
• Добавьте легенду: если используются специальные условные обозначения
• Текст описания поверх диаграммы: добавляйте аннотации и номера версий
• Сохраняйте исходные файлы: экспортируйте в .drawio для возможности дальнейшего редактирования

12. Советы и хитрости

Тайм-менеджмент на экзамене

На демо-экзамене ограничено время и отсутствует интернет, поэтому важно правильно распределить усилия. Ниже — рекомендуемый порядок действий:

1. Первые 10 минут — внимательно прочитайте задание, составьте план работы
2. Настройка среды — запустите OSPanel, откройте Bootstrap Studio, phpMyAdmin, Zeal
3. Создание БД — начните с базы данных и таблиц, пока помните структуру
4. Вёрстка сайта — выберите шаблон, замените контент, доработайте стили
5. Интеграция — подключите PHP к БД, проверьте работу форм
6. Последние 15 минут — тестирование, исправление ошибок, финальная проверка

Лучшие практики вёрстки

• Используйте сетку Bootstrap (container → row → col) для адаптивной верстки
• Давайте осмысленные имена классам и ID — это облегчает отладку
• Группируйте связанные элементы в <section> и <div>
• Тестируйте сайт на разных разрешениях — используйте режимы Desktop, Tablet, Mobile
• Используйте семантические HTML5 теги: <header>, <nav>, <main>, <footer>
• Не забывайте про атрибут alt у всех изображений

Ускорение работы в Bootstrap Studio

• Используйте поиск в панели Components — введите название на английском
• Дублирование элементов (Ctrl+D) быстрее, чем перетаскивание из панели
• Используйте готовые блоки (Blocks) вместо сборки секций из отдельных компонентов
• Создавайте пользовательские компоненты для повторяющихся элементов (карточки, кнопки)
• Горячие клавиши экономят время — выучите хотя бы основные (см. раздел 13)
• Включите Live Preview для мгновенного отображения изменений в браузере

Работа с изображениями

• Оптимизируйте изображения в GIMP перед импортом — файлы более 500 КБ замедляют загрузку
• Для фотографий используйте .jpg с качеством 80–85%
• Для скриншотов, иконок и логотипов используйте .png или .svg
• Именуйте файлы осмысленно: hero-banner.jpg вместо IMG_20260118.jpg
• Используйте класс img-fluid для адаптивных изображений

Безопасность

• Не оставляйте phpMyAdmin доступным без пароля на продакшене
• Используйте подготовленные запросы (prepared statements) в PHP для защиты от SQL-инъекций
• Валидируйте пользовательский ввод на стороне сервера (PHP) и клиента (JS)
• Не выводите ошибки PDO/MySQL на экран в продакшене — логируйте их в файл
• Регулярно обновляйте Bootstrap и другие библиотеки

Частые ошибки на экзамене

• Забытый экспорт — экзаменатор проверяет HTML-файлы, а не .bsdesign
• Неправильная кодировка БД — всегда используйте utf8mb4_general_ci
• Битые ссылки — проверяйте навигацию между страницами после экспорта
• Нерабочий PHP — убедитесь, что OSPanel запущен и файлы лежат в domains/
• Отсутствие адаптивности — всегда проверяйте мобильную версию
• Забытый index.html — главная страница должна называться именно index.html

Советы по дизайну

• Используйте не более 2–3 основных цветов и их оттенков
• Соблюдайте единый стиль на всех страницах — одинаковые шрифты, отступы, кнопки
• Обеспечьте контрастность текста — тёмный текст на светлом фоне (или наоборот)
• Используйте белое пространство (отступы, паддинги) для улучшения читаемости
• Выравнивайте элементы по сетке — это придаёт аккуратность

13. Горячие клавиши

Основные

Редактирование

Навигация и вид

15. Справочник Zeal

Зачем Zeal на экзамене?

На демо-экзамене интернет отсутствует. Zeal даёт возможность мгновенно найти нужное CSS-свойство, HTML-тег, Bootstrap-класс или PHP-функцию, заменяя Google и Stack Overflow.

Установка Zeal

Рекомендуемые docsets для экзамена

Загрузите следующие документации через Tools → Docsets → Available:

Использование Zeal

Быстрый поиск

Просто запустите Zeal и начните вводить название свойства, тега или функции в строку поиска. Результаты появляются мгновенно по мере набора.

• Введите display — найдёте CSS-свойство display со всеми значениями
• Введите navbar — найдёте документацию Bootstrap Navbar
• Введите PDO — найдёте PHP PDO для работы с базами данных
• Введите grid — найдёте CSS Grid и Bootstrap Grid system

Фильтрация по docset

Чтобы искать только в конкретной документации, используйте префикс с двоеточием:

css:flexbox        → ищет "flexbox" только в CSS-документации
bootstrap:card     → ищет "card" только в Bootstrap
php:array_filter   → ищет "array_filter" только в PHP
html:form          → ищет "form" только в HTML

Горячие клавиши Zeal

Примеры использования на экзамене

• Забыли класс Bootstrap для сетки? → Введите col- в Zeal и найдите все варианты колонок
• Не помните синтаксис SQL-запроса? → Введите INSERT INTO и найдёте полный синтаксис с примерами
• Нужно CSS-свойство для тени? → Введите box-shadow и получите синтаксис со значениями
• Как подключить PDO в PHP? → Введите php:PDO и найдёте примеры подключения к MySQL
• Какие атрибуты у тега form? → Введите html:form — полный список атрибутов с описанием

14. Часто задаваемые вопросы (FAQ)