1. Главная
2. Кейсы
3. Стройматериалы в Костроме
4. Техническое задание

Техническое задание на каталог строительных материалов с расчётом толщины стены

Пример ТЗ по кейсу «Строительные материалы в Костроме»: справочник описан таким, каким он работает на stroitelnye-materialy-v-kostrome.ru. Так выглядит документ, который мы составляем до начала работ: что на каждой странице, как считается толщина стены и разбирается маркировка, что проверяем при приёмке.

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

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

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

• / — каталог материалов: витрина, фильтры, таблица, сравнение, «одна стена — разной толщины», вопросы продавцу, частые вопросы
• /markirovka/ — расшифровка маркировки

Навигация — липкая левая колонка: название, группы с числом материалов (Все 19 · Стены 7 · Фундамент и бетон 3 · Утеплитель 5 · Листовые 4), ссылка на маркировку и блок «Норма для Костромы — 3,13 м²·°C/Вт» со стеной в разрезе. До 960 px колонка заменяется липкой шапкой с чипами групп. В подвале — строка о сайте, три ссылки и «Числа — по сводам правил и ГОСТ, источники — в карточке материала».

3. Каталог материалов

1. Витрина из шести образцов: кирпич, газобетон, каменная вата, OSB, гипсокартон, арматура. Клик сбрасывает фильтры и раскрывает строку материала.
2. Фильтры: назначение (все, стены, фундамент, утепление, внутри) и условия (все, улица, сырость, только сухо). Сортировка: по порядку, теплее, легче, тоньше стена. Счётчик «Показано N из M»; если ничего не подходит — подсказка снять один из фильтров.
3. Таблица из 19 строк: материал, плотность, теплопроводность λ (условия эксплуатации Б), морозостойкость, «где нельзя», толщина стены по норме со шкалой, галочка «сравнить».
4. Строка раскрывается: описание, особенности, три вопроса продавцу, источник чисел. Первая строка открыта.
5. «Одна и та же тёплая стена — разной толщины»: шесть столбиков с фактурами материалов, высота пропорциональна толщине, сноска о том, как считали.
6. «Что спросить у продавца» — шесть вопросов; частые вопросы — четыре.

4. Толщина стены по норме

• ГСОП Костромы = (20 + 3,2) × 213 = 4942 °C·сут.
• Требуемое сопротивление теплопередаче стен жилого дома R = 0,00035 × 4942 + 1,4 = 3,13 м²·°C/Вт.
• Толщина t = (R − 1/8,7 − 1/23) × λБ, округление до 10 мм. 8,7 и 23 — коэффициенты теплоотдачи внутренней и наружной поверхности.
• Для утеплителей выводится толщина слоя с пометкой «слоем»; для OSB — «обшивка, не стена»; для бетона, ФБС и арматуры — «не стеновой материал» или «больше 6 м». Если у материала задан диапазон λ — выводится диапазон толщины.
• Под таблицей — оговорка: расчёт упрощённый, однородный слой без швов, перемычек и креплений.

5. Сравнение

• Галочка в строке; максимум три материала, четвёртый вытесняет первый. По умолчанию выбраны полнотелый кирпич, газобетон и каменная вата.
• Панель с выбранными видна внизу, пока каталог на экране. «Сравнить выбранные» активна от двух материалов.
• Таблица сравнения: группа, плотность, λ, толщина, морозостойкость, «где нельзя», источник. Лучшие λ и толщина подсвечены.
• Выбор сохраняется в браузере и восстанавливается после перезагрузки.

6. Расшифровка маркировки

1. Поле ввода (по умолчанию «Газобетон D500 B2,5 F100») и восемь примеров-кнопок. Разбор запускается через 350 мс после ввода; адрес вида /markirovka/#B25 подставляет строку в поле.
2. Распознаются: марка М, класс B, морозостойкость F (в том числе F₁/F₂), водонепроницаемость W, плотность D, подвижность П, цемент ЦЕМ и старое ПЦ/Д, OSB/ОСП, шлифовка Ш/НШ, гипсовые плиты ГСП и ГКЛ, арматура А/В500С, фанера ФК/ФСФ, эмиссия E, горючесть НГ/Г, формат кирпича НФ, размеры, номер ГОСТ, полное обозначение кирпича.
3. Результат: строка со скобками и выносками и карточка на каждую часть; наведение подсвечивает пару «часть — карточка». Непонятная строка — подсказка с примерами.
4. Таблица частых букв: клик по букве разбирает пример. Ниже — старая и новая маркировка цемента (ПЦ 500 Д0 → ЦЕМ I 42,5Н, без пересчёта марки в класс) и обозначение кирпича по девяти частям. Частые вопросы — три.

7. Источники чисел

У каждого материала в карточке — строка «Источник чисел» с пунктом свода правил или ГОСТ.

• Климат Костромы: 213 суток отопительного периода, средняя −3,2 °C — СП 131.13330.2025, табл. 5.1. По прежней редакции (2020) выходило 5098 и 3,18 — разница около 1,5 %, об этом сказано в ответах на вопросы.
• Норма R стен — СП 50.13330.2024, табл. 3; теплопроводность — табл. М.1, условия эксплуатации Б.
• Морозостойкость кладки цоколя F100 на 100 лет — СП 15.13330.2020, табл. 5.1.
• Маркировки: ГОСТ 530-2012 (кирпич и камень керамические), 379-2015 (силикатные), 31359-2024 и 31360-2024 (ячеистый бетон), 26633-2015 (бетон), 31108-2020 (цемент), 34028-2016 (арматура), 32567-2013 (OSB), 32614-2012 (гипсовые плиты), 3916.1-2018 (фанера); горючесть — ФЗ-123, ст. 13.

8. Дизайн

Строгий швейцарский стиль: белый лист, графитовый текст (#1C1D1F), тонкие серые линии, один красный акцент (#E30613) — только на активной группе и чипе. Шрифты: Geist для текста, Geist Mono для чисел и маркировок, табличные цифры. Изображения — вырезки 19 образцов материалов на прозрачном фоне и шесть вертикальных фактур для столбиков; стена в разрезе собрана из тех же фактур. Иконки — SVG. Анимации: рост шкал толщины и столбиков, раскрытие строки, прорисовка скобок и выносок, лёгкое смещение образцов витрины за курсором (только на мыши). При настройке «уменьшить движение» всё отключается.

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

• Статические страницы: HTML, CSS, JavaScript без библиотек; данные материалов и маркировок — в отдельных файлах, расчёт — в браузере.
• Таблица и разбор по умолчанию вписаны в HTML при сборке — поисковик видит их без JavaScript.
• Шрифты и все файлы — на своём сервере, сторонних запросов нет.
• Адаптивность: контрольные точки 1180, 960 и 560 px; до 960 px строки таблицы становятся карточками с подписями, витрина — в три колонки, панель сравнения — во всю ширину. Без горизонтальной прокрутки на 390 px.
• SEO: свой title и description у каждой страницы, canonical, schema.org (WebSite на главной, WebPage на маркировке), картинки для соцсетей 1200 × 630, sitemap.xml, robots.txt.
• Доступность: один H1 на странице, alt у образцов, выбор в сравнении доступен с клавиатуры.

10. Приёмка

Проверка	Ожидаемый результат
Каталог без фильтров	19 строк, первая раскрыта
Толщина стены	Газобетон D500 — 480 мм, кирпич полнотелый — 2 410 мм, каменная вата — 130 мм слоем, PIR — 90 мм слоем, OSB — «обшивка, не стена»
Утепление + сырость	Одна строка — ЭППС
Сортировка «теплее»	Первым PIR
Сравнение: отметить четвёртый материал	Первый выбранный вытесняется, в панели три
Перезагрузка после выбора	Отмеченные материалы сохранились
Маркировка по умолчанию	Разбор «D500 B2,5 F100»
«Бетон B25 W6 F150 П4»	B25 ≈ М350, W6 — 0,6 МПа, П4 — осадка конуса 16–20 см
«ГСП-DFH2»	Соответствует ГКЛВО
Непонятная строка	Подсказка с примерами, частей нет
Полное обозначение кирпича	Девять частей с карточками
Ширина 1440 и 390 px	Нет горизонтальной прокрутки, ошибок в консоли нет
Сторонние запросы	Нет ни одного