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

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

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

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

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

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

• / — журнал: мастер-классы, расчёт пряжи, ошибки, вопросы
• /obrazec/ — образец плотности: как связать, тренажёр счёта, пересчёт

Меню нет: в шапке логотип «art60 / журнал мастерской» и шесть бирок-тегов (всё, вязание, вышивка, лён, шитьё, для начинающих). В подвале — логотип, две строки о журнале и ссылки «Журнал» и «Образец плотности».

3. Журнал (главная)

1. Первый экран: заголовок «Рукоделие, которое получается с первого раза», рукописная пометка, полароид со скотчем, веточки сухоцветов.
2. Мастер-классы: лента из шести карточек — тёплые носки резинкой, вышивка гладью «Полевые цветы», льняная салфетка с мережкой, прихватка, шапка, игольница — и блок «шапка — шаги в фото». У карточки — сложность и время в вечерах.
3. Бирки-теги оставляют в ленте карточки своей темы; у карточки может быть несколько тегов; пусто — «В этой теме пока нет записей». Если страница прокручена меньше чем на 200 px, она подъезжает к ленте.
4. Клик по карточке открывает разворот во всю ширину под её рядом: фото, шаги, совет и факт. Открыт один разворот; закрывается кнопкой «×», повторным кликом или Esc.
5. «Сколько пряжи нужно»: калькулятор и сцена с весами (раздел 4).
6. Полоса «Образец плотности — с него всё начинается» со ссылкой на /obrazec/.
7. Частые ошибки: четыре записки с рисунками. Вопросы и ответы: пять раскрывающихся.

4. Калькулятор «Сколько пряжи нужно»

4.1. Поля

Поле	Значения	По умолчанию
Вещь	шарф, шапка, носки, свитер, плед — значки-прямоугольники	—
Размеры вещи, см	свои для каждой вещи	свои для каждой вещи
Образец	ширина, высота, см; вес, г	15 × 15 см, 11 г
Развеска мотка	50, 100, 150, 200 г	100 г

4.2. Расчёт

• Площадь вещи прямоугольниками: шарф и плед — ширина × длина; шапка — обхват × (глубина + 2 × отворот); носки — 2 × обхват × (стопа + паголенок); свитер — обхват груди × длина + 2 × длина рукава × (обхват вверху + манжета) ÷ 2.
• Граммы = площадь × вес образца ÷ площадь образца. Запас — 10 %, округляется отдельно.
• Мотки = ⌈(граммы + запас) ÷ развеска⌉, с правильным склонением.
• На экране: мотки, граммы, сколько из них запас, формула площади. Стрелка весов поворачивается по шкале и замедляется у конца.
• Выбранная вещь, размеры каждой вещи, образец и развеска сохраняются в браузере.

5. Страница «Образец плотности»

1. Первый экран: крошки «Журнал → Образец плотности», заголовок «Образец плотности: 20 минут, которые спасают свитер», полароид образца с линейкой.
2. Как связать и подготовить: четыре шага с фото — наберите с запасом, свяжите квадрат, постирайте и высушите, приколите и измерьте.
3. Тренажёр счёта: на учебном фото глади две линейки длиной «10 см» в масштабе фото — для петель и для рядов. Тянутся мышью или пальцем, с клавиатуры — стрелками (с Shift шаг крупнее). Пользователь вводит, сколько насчитал; «Проверить по фото» ставит точки на петлях и рядах под линейками и пишет их число. Расхождение больше чем на 1 — «не сошлось» с подсказкой. Разметка фото: 12 петель × 16 рядов в 10 см.
4. Пересчёт под свою плотность: петли = N по описанию × свои петли в 10 см ÷ петли в 10 см по описанию; ряды — так же, с округлением. Фраза «если набрать N петель, у вас выйдет X см вместо Y см», SVG-схема двух полотен в пропорции ширин и оговорка: для вещей с проймами и горловиной лучше подобрать спицы. Плотность из тренажёра сразу подставляется в пересчёт.
5. Что меняет плотность: спицы, пряжа, рука. Вопросы и ответы: четыре раскрывающихся.
6. Положение линеек, введённая плотность и поля пересчёта сохраняются в браузере.

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

Метод и оговорки — у производителей пряжи и гильдий; где источники расходятся, на сайте так и сказано.

• Метод «вес образца → площадь → вес» и запас 10 % — L. Gayle, «How Much Yarn Do I Need?», Interweave Knits, 2003.
• Размер образца: Craft Yarn Council, Knitting & Crochet Guild, Brooklyn Tweed, DROPS расходятся — сайт берёт «не меньше 15 × 15 см» и мерит 10 см в центре.
• Стирать ли образец: KCG и Brooklyn Tweed — да, DROPS — не обязательно; на сайте сказано, что источники расходятся.
• Пересчёт пропорцией и оговорка про проймы — DROPS, KCG; мотки одной партии — Craft Yarn Council.
• Лён Псковщины — ЭСБЕ, т. XXV, 1898: через Остров шло 10–15 % вывоза льна России. Мережка — словарь Ушакова.

7. Дизайн

Стиль «тёплый скрапбук»: рваная бумага, полароиды со скотчем, сухоцветы, рукописные пометки и сердечки, засечные заголовки, светлая тема. Палитра: крем, терракота, чернила, лён, шалфей, охра; нитка — тёмно-красная. Шрифты: Spectral для заголовков, Source Sans 3 для текста, Marck Script для рукописных пометок. Фото, бумага фона, обрывки бумаги с прозрачностью, весы и рисунки ошибок — картинки; иконки, значки вещей, подчёркивания «пером», стрелка весов и схема полотен — SVG, скотч — CSS. Анимации: красная нитка тянется за курсором от клубка (canvas, только на устройствах с мышью), полароиды наклоняются за курсором, подчёркивание заголовка «пишется», веточки качаются, цифры итога «подпрыгивают». При настройке «уменьшить движение» всё отключается.

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

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

9. Приёмка

Проверка	Ожидаемый результат
Шарф 22 × 170 см, образец 15 × 15 см / 11 г, моток 100 г	201 г, 3 мотка
Свитер со значениями по умолчанию	9 116 см², 491 г, 5 мотков
Пересчёт по умолчанию: описание 20 / 28 и 100 / 56, у вас 18 / 24	90 петель и 48 рядов
Тренажёр: ввести 12 и 16	«Сошлось», точки на петлях и рядах
Бирка и карточка	Лента фильтруется; разворот открывается под рядом и закрывается Esc
Перезагрузка страницы	Введённое в калькуляторе и пересчёте сохранилось
Ширина 1440 и 390 px	Нет горизонтальной прокрутки, ошибок в консоли нет
Сторонние запросы	Нет ни одного