5.95M

Category:

internet

ПП_Барабанов

1.

«Министерство образования и науки Республики Татарстан государственное
автономное профессиональное образовательное учреждение «Тетюшский
государственный колледж гражданской защиты»
Производственная практика ПМ.09
Проектирование, разработка и
оптимизация веб-приложений
Выполнил: Барабанов Павел Алексеевич
Специальность 09.02.07
Информационные системы и
программирование
Курс 4, группа 405
Руководитель: Шакирова Л.И.
Место прохождения практики: ГАПОУ
Тетюши, 2026
«Тетюшский государственный колледж
гражданской защиты»

2.

Раздел 1
Задание 1.
Анализ предметной области
индивидуального задания
различными методами: контентанализ, вебометрический анализ,
анализ ситуаций, моделирование
Контент-анализ: грузоперевозки B2B/B2C,
доставка «до двери», страхование.
Ценности: надёжность, пунктуальность,
GPS. История: 2009–2020 (4 этапа).
Вебометрика: лендинг с якорями,
admin.php с авторизацей. Стек: PHP/MySQL
(PDO), Bootstrap 5.2. Соцсети: Telegram, VK,
Одноклассники. Логотипы
Microsoft/Google/IBM — заглушки.
Ситуации: 1) Клиент → заявка через sbforms (внешний сервис). 2) Менеджер →
правит контент через admin.php (нет
защиты). 3) Переход на WP → плагин через
Options API.
Моделирование: таблица site_content (id,
key_name, value). Сущности: Компания
(услуги, новости, история, команда),
Заявка. Проблемы: заявки не сохраняются,
админка без авторизации, нет
версионирования и валидации.

3.

Задание 2.
Описание бизнес-процессов
предметной области
индивидуального задания
Управление контентом: админ-панель (7
разделов) → UPDATE в site_content → контент
обновляется мгновенно.
Обработка обращений: клиент заполняет форму
→ данные уходят во внешний сервис
StartBootstrap Forms → локально заявки НЕ
сохраняются → дальнейшая обработка вручную.
Информирование: менеджер публикует до 6
новостей (с модальными окнами) и 3 услуги →
клиент читает и принимает решение.
Представление компании: таймлайн (4 этапа с
2009 г.), команда (3 сотрудника), услуги
(перевозки, «до двери», страхование) →
формирование доверия.
Масштабирование на WordPress: плагин
autotravel-legacy-admin → данные через Options
API (вместо прямых SQL) → сохранение контента и
интерфейса.
Раздел 1

4.

Раздел 1
Задание 3.
Сбор данных для создания веб
приложения
Группы данных:
Компания: название, слоган, история (4
этапа), команда (3 сотрудника),
копирайт
Услуги: 3 позиции (название, описание,
иконка)
Новости: 6 записей (заголовок,
подзаголовок, полный текст, превью)
Контакты: заголовок, подзаголовок,
поля формы (имя, email, телефон,
сообщение)
Методы сбора: анализ предметной
области, интервью с заказчиком, изучение
конкурентов, прототипирование.
Модель хранения: таблица site_content (id,
key_name, value, updated_at). Выбрана изза: отсутствия изменений схемы БД,
простоты админ-панели, подходит для
фиксированной структуры.
Медиафайлы: новости (6 PNG), «О нас» (4
JPG), команда (3 JPG), логотип компании
(PNG), логотипы партнёров (SVG).

5.

Раздел 1
Задание 4.
Разработка и анализ требований к
веб приложению
ФУНКЦИОНАЛЬНЫЕ
ТРЕБОВАНИЯ:
НЕФУНКЦИОНАЛЬНЫЕ
ТРЕБОВАНИЯ:
Одностраничный лендинг с якорной
навигацией, контент из БД (без ручного
HTML)
Админ-панель с тематическими
вкладками для редактирования всех
текстов
Форма обратной связи (имя, email,
телефон, сообщение) с валидацией
Производительность: загрузка
страницы ≤3 сек, минимум запросов к
БД (индекс key_name)
Надёжность: обработка ошибок БД без
технических деталей
Удобство: админ-панель интуитивно
понятна, навигация в 1 клик
ТРЕБОВАНИЯ К UI/UX:
Фиксированная навигация, бургер-меню
на мобильных
Разделы: главный, услуги, новости, о
компании, команда, контакты
Модальные окна для новостей, таймлайн
с чередованием блоков
Админ-панель: вкладки по разделам,
кнопка сохранения, уведомление
ТРЕБОВАНИЯ К
МАСШТАБИРУЕМОСТИ:
Переход с «ключ-значение» на реляционную
модель без переработки фронтенда
Поддержка онлайн-заявок с уведомлением
менеджеров
Интеграция с WordPress через плагин
(бесшовный переход)
Кодовая база с переиспользуемыми функциями
для лёгкого добавления разделов

6.

Задание 5.
Определение программных средств
разрабатываемого веб приложения
Серверная часть (Backend): PHP 8.0+ (генерация HTML,
обработка POST, чтение/запись контента), PDO (защита
от SQL-инъекций)
База данных: MySQL 5.7+, движок InnoDB, таблица
site_content, кодировка utf8mb4, phpMyAdmin для
администрирования
Клиентская часть (Frontend): HTML5 + CSS3, Bootstrap
5.2.3 (адаптивная сетка, модальные окна), кастомный
styles.css, JavaScript + Bootstrap Bundle (Popper.js),
форма обратной связи через StartBootstrap Forms
Иконки и шрифты: FontAwesome 6.3.0, Google Fonts:
Montserrat (заголовки), Roboto Slab (основной текст)
Среда разработки: XAMPP/OpenServer (Apache, MySQL,
PHP), IDE (VS Code/PhpStorm), phpMyAdmin, Git
Интеграции: CDN (Bootstrap, FontAwesome, Google Fonts,
StartBootstrap Forms) с атрибутом crossorigin для CORS
Развёртывание: стандартный PHP/MySQL-хостинг
(копирование файлов + импорт SQL-дампа), опционально
— интеграция с WordPress через плагин autotravellegacy-admin
Раздел 1

7.

Задание 6.
Раздел 1
Разработка технического задания
проектируемого приложения
1
ОПРЕДЕЛЕНИЕ
ТЕМАТИКИ:
Веб-приложение для транспортной
компании AutoTravel (грузоперевозки,
доставка «до двери», страхование
грузов).
Решение
двух
задач:
публичное представление компании
(услуги, история, команда, форма
обратной связи) + инструмент для
сотрудников по обновлению контента
без разработчика.
2
СБОР КЛЮЧЕВЫХ СЛОВ:
Анализ предметной области, интервью
с заказчиком, изучение конкурентов в
сфере грузоперевозок → выявление
стандартного набора информации,
ожидаемой клиентами.
3
Кластеризация:
Главный экран (заголовок,
подзаголовок, CTA-кнопка)
Услуги (3 карточки)
Новости (6 записей с
модальными окнами)
История (таймлайн, 4 этапа)
Команда (3 сотрудника)
Контакты (форма: имя, email,
телефон, сообщение)

8.

Раздел 1
Задание 7.
Проектирование информационной
Обоснование выбора CMS: Готовая инфраструктура,
снижение стоимости сопровождения, удобство для
нетехнических сотрудников. Выбран из-за экосистемы
плагинов, документации на русском и возможности
создания собственного плагина для бесшовного
перехода с standalone-версии.
системы с применением CMS
АРХИТЕКТУРА НА WORDPRESS
ПЛАГИН AUTOTRAVEL-LEGACY-ADMIN
Уровень представления: тема WordPress,
воспроизводящая структуру лендинга (главный
экран, услуги, новости, история, команда, контакты)
Уровень бизнес-логики: плагин autotravel-legacyadmin (управление контентом через интерфейс в
админ-панели)
Уровень данных: MySQL, контент хранится через
Options API в таблице wp_options (вместо
site_content)
Структура: главный файл регистрации, файл админпредставления, вспомогательные функции
Функции: регистрация плагина, добавление пункта меню,
подключение стилей, обработка сохранения через
admin_post
Защита: nonce-токен (CSRF), проверка прав через
current_user_can, сохранение через update_option, чтение
через get_option
Интерфейс: идентичен standalone-версии (те же вкладки,
поля, жёлтая цветовая схема) → минимизация
адаптационного периода

9.

Раздел 2
Задание 1.
Внутренняя поисковая оптимизация
(SEO)
• Оптимизированы метатеги (title, description,
keywords)
• Исправлена иерархия
заголовков (h1, h2, h3)
• Добавлены атрибуты alt
для всех изображений
• Внедрена
микроразметка Schema.org
(JSON-LD)
• Добавлены мета-теги Open
Graph для соцсетей
• Ускорена загрузка
страницы (lazy load, defer)
• Улучшена доступность
сайта (ARIA-атрибуты, метки
для форм)

10.

Раздел 2
Задание 2.
Внешняя поисковая оптимизация
(SEO)
Размещена информация о
компании в отраслевых каталогах
и бизнес-справочниках
Организован сбор и мониторинг
отзывов клиентов на ключевых
площадках
Обеспечено единообразие
контактных данных компании
во всех внешних источниках
Опубликованы экспертные
материалы на тематических
порталах о логистике

11.

Раздел 2
Задание 3.
Индексация сайта
Создан и настроен файл
robots.txt с запретом
индексации
административной панели и
служебных файлов
Сформирована XML-карта
сайта с указанием
приоритета и частоты
обновления страниц
Настроены мета-теги robots
для управления индексацией
на уровне отдельных страниц
Сайт зарегистрирован в
Яндекс Вебмастер и Google
Search Console
Подтверждены права
владения и загружена карта
сайта в панели вебмастеров
Оптимизирована скорость
загрузки для ускорения
обхода поисковыми
роботами

12.

Задание 4.
Раздел 2
Конвертация трафика
ФУНКЦИОНАЛЬНЫЕ ТРЕБОВАНИЯ:
Форма обратной связи с обязательными полями
(имя, email, телефон, сообщение) и валидацией
Блокировка кнопки отправки до заполнения всех
полей и подтверждение успешной отправки
Динамическое управление текстом CTA-кнопки
главного экрана через админ-панель
ТРЕБОВАНИЯ К ПОЛЬЗОВАТЕЛЬСКОМУ
ПУТИ:
Последовательная воронка: главный экран → услуги
→ новости/история → команда → контакты
CTA-кнопка с конкретным призывом к действию
(«Рассчитать стоимость» или «Оставить заявку»)
Форма расположена в конце страницы после
ознакомления со всей информацией о компании
ТРЕБОВАНИЯ К ФОРМИРОВАНИЮ ДОВЕРИЯ:
Разделы истории компании (с 2009 года), команды и новостей
для демонстрации опыта и активности
Блок с логотипами партнеров и конкретные преимущества в
описании услуг
Понятные плейсхолдеры и атрибуты autocomplete для
удобного заполнения формы

13.

Задание 5.
Проведение общего аудита сайта: SEO,
юзабилити, тексты
Техническое SEO: Высокий балл.
Корректная индексация, метатеги, Schema.org (TransportCompany) и
адаптивная верстка.
Безопасность и архитектура: Стек
PHP/MySQL/PDO. Реализована
защищенная аутентификация в админпанели. Код защищен от XSS и SQLинъекций.
Юзабилити: Отличное. Фиксированная
навигация, плавные переходы,
интуитивно понятные формы с
валидацией «на лету».
Контент и доступность: Деловой
доверительный тон, ценностное
предложение сформулировано четко.
Сайт адаптирован для скринридеров
(aria-атрибуты).
Раздел 2

14.

Раздел 2
Задание 6.
Исследование способов ускорения
загрузки сайтов
ИЗОБРАЖЕНИЯ
CSS и JavaScript
Конвертация PNG/JPG в WebP или AVIF (сжатие
на 25–35%)
Использование «loading=“lazy”»
Атрибут srcset для адаптации под плотность
пикселей устройства
Скрипты подключены с defer
Bootstrap загружается через CDN
Форма расположена в конце страницы после
ознакомления со всей информацией о компании
СЕРВЕР И БАЗА ДАННЫХ
СЖАТИЕ ДАННЫХ
Весь контент загружается одним SQL-запросом к
site_content
Поле key_name имеет уникальный индекс
Понятные плейсхолдеры и атрибуты autocomplete
для удобного заполнения формы
Использование Gzip

15.

Раздел 2
Задание 7.
Техническая оптимизация,
дополнительные настройки

16.

Задание 8.
Улучшение поведенческих факторов
Снижение отказов
1
Рост времени на
сайте
2
Удобство (UX)
3
Раздел 2

17.

Задание 1.
Раздел 3
Разработка тестового сценария
проекта
Шаг
Действие
Ожидаемый результат
1
Открытие сайта
Главный экран, фикс. меню,
корректный Title и верстка.
2
Кнопка «Подробнее» →
Услуги
Плавный скролл,
отображение 3 карточек
услуг.
3
Раздел «Новости»
Открытие/закрытие 6
модальных окон с контентом.
4
Раздел «О нас»
Таймлайн из 4 этапов
истории (2009–2020 гг.).
5
Раздел «Команда»
3 карточки сотрудников с
фото и соцсетями.
Отправка заявки
Валидация полей (Email,
Телефон) и успешная
отправка.
Футер
Проверка копирайта,
соцсетей и ссылки «Админ
панель».
Админ-панель
Изменение подзаголовка →
Сохранение → Мгновенное
отображение на сайте.
6
7
8

18.

Задание 2.
Раздел 3
Сбор информации о webприложении
СТРУКТУРА ФАЙЛОВ:
ТЕХНОЛОГИЧЕСКИЙ СТЕК:
index.php / admin.php — Публичная часть и
админ-панель.
db.php — Модель данных (PDO, функция
loadContent).
autotravel.sql — Схема БД + 57 стартовых
записей.
.htaccess — Сжатие Gzip, кэш,
безопасность (Headers).
assets/ — Медиа, css/js — стили и скрипты.
Backend: PHP 8.0+, MySQL 5.7+ (InnoDB,
utf8mb4).
Frontend: HTML5/CSS3, Bootstrap 5.2.3,
FontAwesome 6.3.
Шрифты: Montserrat, Roboto Slab
(Google Fonts).
ДАННЫЕ И ЛОГИКА:
БД: Таблица site_content (Key-Value
хранилище).
Архитектура: Упрощенная (без MVC). Один
запрос к БД в начале страницы.
Формы: Внешний обработчик
StartBootstrap Forms.
БЕЗОПАСНОСТЬ:
SQL-инъекции: Исключены (PDO Prepared
Statements).
XSS: Экранирование htmlspecialchars().
Сервер: Запрет доступа к служебным файлам,
Security Headers.

ПП_Барабанов

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.