1. Главная
2. Кейсы
3. Это можно в посудомойку?
4. Техническое задание

Техническое задание на справочник «Это можно в посудомойку?»

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

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

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

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

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

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

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

1. Первый экран: заголовок «Это можно в посудомойку?», лид, три значка-тезиса, справа фото кухни с открытой машиной.
2. «Загрузите машину»: полка из 12 предметов, фото посудомойки с тремя зонами, журнал загрузки (раздел 4).
3. «Почему нельзя?»: пять тарелок — чугун, алюминий, дерево, нож, золотая кайма — с причиной.
4. «Значки на дне посуды»: посудомойка, индукция, микроволновка, духовка — свои SVG, не копии официальных знаков.
5. Плашка «А что с плитой?» с анимированной сценой (магнит тянется к кастрюле) и кнопкой на /plita/.
6. Вопросы: четыре раскрывающихся ответа.

4. Загрузка посудомойки

4.1. Управление

Предмет тянут с полки в машину мышью или пальцем либо нажимают на него — тогда он ложится в свою корзину; с клавиатуры — Enter или пробел. Зоны на фото машины: верхняя корзина (6 мест), нижняя (7), корзинка приборов (2). Предмет, брошенный мимо зон, уходит в свою корзину; если корзина полна — в первую свободную. Нажатие на предмет в машине вынимает его, кнопка «Разгрузить» очищает всё. Ничего не сохраняется.

4.2. Вердикты

Вердикт	Предметы
Нельзя (красный ✕)	Чугунная сковорода, алюминиевая кастрюля, деревянная доска, нож, хрустальный бокал, тарелка с золотой каймой
По маркировке (жёлтый !)	Антипригарная сковорода, пластиковый контейнер, термокружка
Можно мыть (зелёный ✓)	Кастрюля из нержавейки, обычная тарелка, стеклянная форма

4.3. Правило корзины и журнал

• Пластиковый контейнер и термокружка не в верхней корзине — к причине добавляется «Переложите в верхнюю корзину». Для остальных предметов корзина на вердикт не влияет.
• Журнал: каждый предмет с вердиктом и причиной, последний — сверху; счётчик «Загружено N из 12» и полоса.

5. Страница «Посуда и плита»

1. Первый экран: крошки «Посудомойка · Посуда и плита», заголовок, SVG-сцена плиты — кастрюля, пар, светящиеся кольца, магнит.
2. Магнитный тест: шесть материалов — чугун, нержавейка, алюминий, алюминий с диском, медь, жаропрочное стекло; цвет кастрюли меняется под материал. Магнит тянут ко дну (засчитывается, если отпустить в области дна) или жмут «Поднести магнит». Вердикт: чугун и алюминий с диском — «Прилип — индукция подойдёт»; нержавейка — «Как повезёт — проверьте свою»; алюминий, медь, стекло — «Не держится — для индукции нет»; под вердиктом — пояснение.
3. Какая плита — какая посуда: вкладки Газ / Стеклокерамика / Индукция, по умолчанию индукция. На каждой пять материалов со шкалой: «Подходит», «С оговорками», «Нет» и короткой причиной. Подпись: «Шкала — сравнение материалов между собой, не измерение».
4. Дно и конфорка: ползунок 50–130 % — диаметр дна относительно конфорки, по умолчанию 100 %. Меньше 80 % — «тепло уходит мимо, на индукции зона может не включиться» (красный); 80–115 % — «Дно и конфорка совпадают» (зелёный); больше 115 % — «края греются слабее» (жёлтый). Ниже 90 % вокруг дна проступает оранжевый «уходящий жар».
5. Вопросы: четыре ответа.

6. Источники

Законов и ГОСТов сайт не цитирует: что можно мыть в машине, решают производители посуды и техники. Вердикты — общие рекомендации, сверенные по нескольким источникам производителей и продавцов техники и посуды, везде с оговоркой «смотрите значок на дне и инструкцию машины».

• Нельзя: дерево (набухает, трескается), алюминий (щёлочь разрушает защитную плёнку), чугун без эмали (ржавеет, слетает прожиг), ножи, хрусталь, позолота.
• По маркировке: антипригарные сковороды, пластик (обычно верхняя корзина), термокружки.
• Индукция работает с посудой, дно которой притягивает магнит; минимальный диаметр дна задаёт производитель плиты — на сайте без чисел.
• Стеклокерамика — ровное гладкое дно; газ — пламя не выходит за дно.

7. Дизайн

Стиль «кухня в томатах»: сливочный фон с кафельной сеткой, карточки с крупным скруглением, рейлинг с крючками вместо меню. Палитра: сливочный #FFF9EF, томатный #D64933, оливковый #6B7A3A, текст #1C1A18; статусы — зелёный #4E8A3A, жёлтый #E0A422, красный #D64933. Шрифты: Montserrat Alternates для заголовков, PT Sans для текста. Фото кухни, двенадцать предметов на прозрачном фоне и пустая машина — растровые; логотип, значки на дне, сцены плиты, кастрюля с магнитом и конфорка — SVG; крючки рейлинга — CSS. Анимации: крючок качается при наведении, предмет «падает» в корзину, строки журнала въезжают, кольца пульсируют, магнит тянется и прилипает. При настройке «уменьшить движение» всё отключается.

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

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

9. Приёмка

Проверка	Ожидаемый результат
Нажать на чугунную сковороду	«Нельзя» и причина про ржавчину в журнале, «Загружено 1 из 12»
Перетащить контейнер в нижнюю корзину	«По маркировке» и приписка «Переложите в верхнюю корзину»
Кнопка «Разгрузить»	Машина и журнал пусты, счётчик 0
Магнит к нержавейке	«Как повезёт — проверьте свою»
Магнит к алюминию с диском	«Прилип — индукция подойдёт», диск на дне нарисован
Ползунок «Дно и конфорка» на 70 %	Красный вывод, вокруг дна — уходящий жар
Ширина 1440 и 390 px	Нет горизонтальной прокрутки, ошибок в консоли нет
Сторонние запросы	Нет ни одного