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

Техническое задание на справочник с калькулятором обоев

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

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

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

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

• / — главная: раскрой стены, что такое раппорт, стена до обоев, пять ошибок, вопросы
• /stena/ — подготовка стены: осмотр, сушка, как снять старые обои

Навигация — сантиметровая лента-рулетка сверху, общая для обеих страниц (Раскрой · Раппорт · Стена · Ошибки · Вопросы): метка едет к текущему разделу. В подвале — имя сайта, строка о сайте и меню.

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

1. Первый экран: заголовок «Сколько рулонов — и сколько уйдёт в обрезки», подзаголовок, три пункта с иконками, фото комнаты с полосами дамаска.
2. Раскрой стены: форма слева, схема стены и итог справа (раздел 4).
3. Что такое раппорт: определение и три образца стыковки — свободная, прямая, со смещением; у каждого — «В вашей комнате: N рул., X % в обрезки» по размерам из калькулятора.
4. Стена до обоев: четыре карточки проверок (скотч, влага, старые обои, пятна) и кнопка на /stena/.
5. Пять ошибок обойщика с рисунками: замер по полу, раппорт не учли, рулоны из разных партий, клеили непроверенную стену, сквозняк и кондиционер.
6. Вопросы: четыре раскрывающихся ответа, в том числе как посчитать рулоны вручную.

4. Калькулятор раскроя

4.1. Поля

Поле	Значение	По умолчанию
Режим	Периметр комнаты / каждая стена отдельно (4 стены)	Периметр 16 м
Высота	1,5–5 м	2,7 м
Окна, двери	Счётчики 0–6; окно 1,4 × 1,5 м с подоконником на 0,8 м, дверь 0,8 × 2,0 м	1 окно, 1 дверь
Рулон	Ширина от 30 см и длина; кнопки 0,53 × 10,05 и 1,06 × 10,05	0,53 × 10,05 м
Раппорт	От 5 см для прямой и смещённой стыковки	64 см
Стыковка	Свободная / прямая / со смещением	Прямая

При неверных размерах расчёт не выводится, вместо него — «Проверьте размеры: высота 1,5–5 м, раппорт для прямой и смещённой стыковки — от 5 см». Если полоса длиннее рулона — отдельное предупреждение.

4.2. Расчёт

• Длина куска = высота + 10 см припуска; при прямой и смещённой стыковке — вверх до целого раппорта; при смещённой каждая вторая полоса ещё + ½ раппорта. Свободная стыковка раппорт не учитывает.
• Число полос = ⌈периметр / ширина рулона⌉; в режиме по стенам — сумма ⌈стена / ширина⌉ по каждой стене (угол — новая полоса).
• Проём заменяет ⌊ширина проёма / ширина рулона⌋ полос короткими кусками: над проёмом и под окном.
• Куски раскладываются по рулонам «в первый, где хватает остатка»; пробуются три порядка резки — по убыванию длины, сначала полные полосы, по порядку, — берётся вариант с наименьшим числом рулонов. Остаток рулона по высоте не стыкуется.
• Вывод: рулонов, кусков и % в обрезки = (куплено − наклеено) / куплено, где «наклеено» — высоты кусков без припуска. Подсказка: меньше 15 %, 15–25 % и больше 25 %.

4.3. Схема

SVG перерисовывается на каждое изменение: стена рядами полос (по стенам или по 16 полос, на узком экране — по 8), узор — плитка дамаска с шагом раппорта, у смещённой стыковки чётные полосы сдвинуты, окна и двери нарисованы, на каждом куске — номер рулона. Под схемой — полоски-рулоны: какая доля каждого ушла в дело.

5. Страница «Стена»

1. Первый экран: заголовок «Сначала стена, потом обои», справа две полосы дамаска с отгибающимся углом.
2. Осмотр стены: выбор основания — бетон, штукатурка, гипсокартон, старая краска, старые обои — даёт первый пункт списка. Четыре проверки да/нет (скотч оторвал покрытие, стена влажная или свежая, обои отходят, пятна): каждое «да» добавляет пункт «Что сделать до клея» и подсвечивает слой на разрезе стены. Последний пункт всегда — «В конце — грунт по всей стене и дать ему высохнуть. Потом клей».
3. Пока сохнет: флажки «окно открыто», «кондиционер», «солнце на стену» рисуют на плане комнаты потоки воздуха и лучи, край обоев мигает. Вердикт: ни одного фактора — «Сохнет ровно», один — «Края могут отойти», два-три — «Края отойдут, швы разойдутся», с причинами.
4. Как снять старые обои: три шага — намочить, поддеть, очистить — с анимированными схемами и фото шпателя.
5. Вопросы: три ответа и кнопка «К раскрою стены».

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

Справочник бытовой: на нормы он не ссылается и не публикует чисел, которые нечем подтвердить.

• Форматы рулона 0,53 × 10,05 и 1,06 × 10,05 м — ходовые, даны как подсказки, поля свободные.
• Методика раскроя — своя (раздел 4.2), контрольный пример сверен вручную и пересчитан кодом.
• «Запас 10–15 %» и сроки высыхания клея не публикуются — «по инструкции на упаковке».

7. Дизайн

Стиль «обойная фабрика»: пудровый фон, изумруд и латунь, тонкие линейки, вертикальные стыки полос как сетка; узор-дамаск — только на образцах и схеме. Палитра: пудровый #EBDCD3, бумага #FBF6F2, изумруд #1E4B43, латунь #B08D57, чернила #20252B. Шрифты: Marcellus для заголовков, Fira Sans для текста. Фото комнаты, бесшовная плитка дамаска, разрез стены на прозрачном фоне и фото шпателя — растровые; иконки, пять рисунков ошибок, схема раскроя, план комнаты и шаги снятия — SVG. Анимации: метка рулетки, «подъезд» образцов раппорта к совпадению, отгибающийся угол, пульс слоя на разрезе, потоки воздуха и мигающий край. При настройке «уменьшить движение» всё отключается.

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

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

9. Приёмка

Проверка	Ожидаемый результат
Значения по умолчанию: 16 м, 2,7 м, окно и дверь, 0,53 × 10,05, раппорт 64, прямая	10 рулонов, 33 куска, 22 % в обрезки
То же, стыковка со смещением	11 рулонов, 29 % в обрезки
То же, свободная стыковка	10 рулонов, 22 %
Высота 1,2 м	Предупреждение «Проверьте размеры», расчёт не выводится
«Стена»: окно открыто и кондиционер	Потоки воздуха на плане, «Края отойдут, швы разойдутся»
Ширина 1440 и 390 px	Нет горизонтальной прокрутки, ошибок в консоли нет
Сторонние запросы	Нет ни одного