1. Главная
2. Кейсы
3. «Молодежь51»
4. Техническое задание

Техническое задание на сайт сети молодёжных центров

Пример ТЗ по кейсу МАУ МП «Молодежь51»: сайт описан таким, каким он работает на молодежь51.рф. Так выглядит документ, который мы составляем до начала работ: что есть на сайте, как ведёт себя каждая страница и как проверить, что всё сделано.

1. Общие сведения

Назначение	Сайт муниципального автономного учреждения молодёжной политики Мурманска: сведения о сети молодёжных центров, их программах и расписании, новости и анонсы мероприятий, официальные документы учреждения.
Аудитория	Молодёжь Мурманска, которая ищет занятие, мероприятие или конкурс; жители и организации, которым нужны сведения об учреждении.
Главная задача	Посетитель с любой страницы находит нужный центр, его адрес и расписание, а также ближайшие мероприятия.
Язык	Русский.
Наполнение	Новости, анонсы, фотоотчёты, расписание и документы публикуются из панели управления, без правки вёрстки.

2. Структура сайта

• Главная (раздел 4)
• Новости и Анонсы мероприятий — две отдельные ленты (раздел 7)
• Выбрать центр — список центров и страница каждого центра (раздел 5)
• Медиа — фотоотчёты (раздел 8)
• О нас — об учреждении, его философии и ценностях
• Расписание центров (раздел 6), Платные услуги, Реквизиты, Руководство, Дополнительная информация (раздел 9) — в меню левой колонки
• Контакты — администрация, отделы и центры: адрес, руководитель, телефон, почта, часы работы

3. Шаблон страницы

Шапка: полное название учреждения, логотип, слоган, меню, поиск, ссылка на сообщество во «ВКонтакте», ссылка «Версия для слабовидящих». Пункт «Выбрать центр» раскрывает список всех центров.

Левая колонка: меню разделов учреждения: «Главная страница», «Новости», «Расписание центров», «Фотоотчеты», «Платные услуги», «Реквизиты», «Руководство», «Дополнительная информация», «Контакты», и баннеры-ссылки на внешние ресурсы (Госуслуги, город, профильные ведомства).

Правая колонка: «Расписание центров» — афиша текущего месяца со ссылкой на страницу расписания; список центров: значок, название, адрес, ссылка на страницу центра; виджет Госуслуг «Решаем вместе» и кнопка «Написать».

Подвал: название, знак © с годами, короткое меню («Главная страница», «Анонсы», «Карта центров», «Контакты»), строка разработчика.

На телефоне меню сворачивается в мобильное; в мобильном меню есть пункт «Для слабовидящих».

4. Главная страница

1. Слайдер с баннерами учреждения.
2. Три последние новости: изображение, заголовок, начало текста, ссылка «Подробнее».
3. Блок об учреждении: логотип, короткий текст о сети центров, кнопка «Наши контакты».

5. Центры

5.1. Список центров

Страница «Выбрать центр» и выпадающий список в меню: все центры и отделы учреждения. В списке — название и адрес; клик ведёт на страницу центра.

5.2. Страница центра

Заголовок — название центра, хлебные крошки. Содержимое на вкладках:

Вкладка	Содержимое
О центре	Направление работы, основные функции, кто может участвовать
Программы	Список программ и занятий с описанием
Проекты	Проекты и мероприятия центра
Контакты	Адрес, руководитель, телефон, почта, часы работы

Над вкладками — кнопка «Расписание», ведёт на страницу расписания (раздел 6).

6. Расписание центров

Страница «Расписание работы центров на месяц»: по каждому центру — таблица, где строка — программа или занятие с ответственным специалистом, столбцы — дни недели с часами занятий; выходной обозначается «В». Расписание обновляется раз в месяц вместе с афишей в правой колонке.

7. Новости и анонсы

• Две ленты: «Новости» и «Анонсы мероприятий». В карточке — изображение, заголовок, начало текста, ссылка «Подробнее»; лента разбита на страницы.
• В анонсе в начале текста — дата мероприятия или срок подачи заявок.
• Страница записи: заголовок, хлебные крошки, текст, изображения; ссылки на внешние формы регистрации допускаются.

8. Медиа

Страница «Медиа» (в левом меню — «Фотоотчеты»): фотоотчёты с мероприятий — заголовок события и фотографии под ним, новые отчёты сверху.

9. Сведения об учреждении и документы

Страница	Содержимое
Дополнительная информация	Ссылки на файлы: устав, годовая бухгалтерская отчётность по годам, результаты специальной оценки условий труда, политика обработки персональных данных, перечни товаров, работ и услуг для закупок у субъектов малого и среднего предпринимательства — по годам и редакциям
Платные услуги	Тарифы на оказание платных услуг
Реквизиты, Руководство	Сведения об учреждении и его руководителях

Новый документ добавляется загрузкой файла и ссылкой на странице; старые редакции остаются в списке.

10. Версия для слабовидящих

Ссылка «Версия для слабовидящих» в шапке, на телефоне — пункт «Для слабовидящих» в мобильном меню. По клику над страницей появляется панель:

Настройка	Варианты
Размер шрифта	Три размера
Шрифт	Arial / Times
Интервал между буквами	Стандартный / средний / большой
Интервал между строками	Стандартный / полуторный / двойной
Цвета сайта	Пять схем: чёрным по белому, белым по чёрному, тёмно-синим по голубому, коричневым по бежевому, зелёным по тёмно-коричневому
Изображения	Показывать / скрыть
Сброс	«Параметры по умолчанию», «Обычная версия»

Выбранные настройки запоминаются в браузере посетителя и сохраняются при переходе между страницами.

11. Технические требования

• Адаптивная вёрстка: сценарии разделов 5–10 проходятся с телефона.
• Сайт работает по HTTPS; запрос по http:// перенаправляется на https://.
• Человекопонятные адреса: /vybrat-centr, /raspisanie-centrov, /media, /kontakty, страницы центров и записи — по названию.
• Несуществующий адрес ведёт на страницу ошибки с кодом 404.
• На всех страницах — виджет Госуслуг «Решаем вместе» для обращений граждан.

12. Приёмка

Работа принимается, когда каждый сценарий проходит на компьютере и на телефоне:

#	Сценарий	Ожидаемый результат
1	Меню «Выбрать центр» → любой центр	Открылась страница центра с вкладками «О центре», «Программы», «Проекты», «Контакты»
2	На странице центра — кнопка «Расписание»	Открылось расписание текущего месяца, в нём есть таблица этого центра
3	«Анонсы мероприятий» → вторая страница ленты	Показаны более ранние анонсы
4	Открыть по очереди каждую ссылку в «Дополнительной информации»	Каждый документ открывается
5	«Версия для слабовидящих» → «Белым по чёрному» → перейти на другую страницу	Схема сохранилась; «Обычная версия» вернула обычный вид
6	На телефоне: мобильное меню → «Для слабовидящих»	Появилась панель настроек
7	Набрать адрес сайта с http://	Открылась та же страница по https://