Конструктор тир-листов

Что такое тир-лист и чем он не является

Тир-лист распределяет сопоставимые элементы по упорядоченным уровням, например S, A, B и C. Чем выше строка, тем обычно сильнее предпочтение, лучше результат или соответствие выбранному критерию. Инструмент не вычисляет оценку и не решает, куда поместить элемент.

Поэтому тир-лист отличается от двух других распространённых видов досок:

Тир-лист подходит для мнений и сравнительных оценок: любимых альбомов, вариантов товаров, игровых персонажей, рецептов, которые стоит повторить, или идей для расстановки приоритетов. Чек-лист отмечает выполнение, а канбан-доска нужна, когда задачи проходят этапы рабочего процесса.

Заранее выберите понятные уровни

Стандартные обозначения S–F, условность, а не требование. Переименуйте их под задачу: Отлично / Хорошо / Возможно / Пропустить, Первый выбор / Запасной / Не подходит или используйте другую понятную шкалу. Доступно до 12 уровней.

Определите критерий до перемещения элементов. Рейтинг по «лучшей цене и качеству» может сильно отличаться от рейтинга по «лучшему качеству». Если люди увидят только экспортированное изображение, точный заголовок и понятные названия строк помогут правильно прочитать результат.

Элементы внутри одного уровня тоже можно переставлять. Используйте порядок слева направо для дополнительного выражения предпочтения либо считайте все элементы строки равноценными.

Текст и локальные изображения

На доску можно добавить до 100 элементов, в том числе не более 60 изображений. Текст удобен для названий, вариантов и идей. Изображения нормализуются в браузере, поэтому исходники разных размеров помещаются в одинаковые плитки, а ненужные метаданные не переносятся в сохранённый проект.

Поддерживаются исходные форматы PNG, JPEG и WebP. Один файл может занимать до 8 MiB, каждая сторона, до 8192 пикселей, а декодированное изображение, до 16 мегапикселей. При необходимости принятые изображения локально уменьшаются максимум до 512 × 512 пикселей. Суммарный объём нормализованных изображений в проекте ограничен 32 MiB.

Удалённые URL изображений и загрузка SVG намеренно не поддерживаются. Обработка только декодированных локальных растровых изображений исключает недоступные внешние ресурсы, ошибки Canvas из-за разных источников и активное содержимое SVG/XML. В памятке OWASP File Upload Cheat Sheet для многоуровневой защиты загрузок рекомендуется разрешать только необходимые форматы, ограничивать размер, проверять не только заявленный MIME-тип и перезаписывать изображения.

Перетаскивать необязательно

Перетаскивание удобно, но это не единственный способ ранжирования. Переведите фокус на элемент и воспользуйтесь командами перемещения либо нажмите Enter или Пробел, чтобы включить клавиатурный режим. Стрелками выберите уровень и позицию, подтвердите клавишей Enter или Пробел, а клавишей Escape отмените действие.

Так редактор удобен и на телефоне, где точное перетаскивание бывает сложным. Рекомендации W3C по перетаскиванию в WCAG 2.2 объясняют, почему функции с перетаскиванием требуют простой альтернативы для указателя. Здесь одно и то же перемещение доступно перетаскиванием, с клавиатуры, щелчком или касанием.

Что сохраняется в этом браузере

Название, уровни, текст элементов, данные изображений и рейтинг остаются в хранилище браузера на этом устройстве. Они не добавляются в URL страницы и не отправляются на сервер как данные редактора. Локальная копия для восстановления хранится в IndexedDB, поэтому обычное обновление страницы может вернуть вашу работу.

Локальное восстановление, не облачное хранилище. Другой браузер или устройство не увидит проект, очистка данных сайта удалит его, а пользователь того же профиля браузера может снова его открыть. На общем устройстве нажмите Очистить проект, а для отдельной резервной копии экспортируйте проект JSON.

JSON, PNG и SVG предназначены для разных задач

Импорт JSON проверяется до замены текущего проекта. Повреждённый, неподдерживаемый или слишком большой файл не изменит открытый проект. Размер проекта JSON ограничен 48 MiB.

PNG рисуется непосредственно в браузере с использованием нормализованных локальных изображений. Загрузку создаёт стандартный метод браузера canvas.toBlob(). Удалённые изображения не используются, поэтому Canvas не загрязняется данными из другого источника и остаётся доступным для экспорта.

SVG создаётся из небольшого неинтерактивного набора фигур, текста и элементов изображений. Пиксели PNG, JPEG или WebP встраиваются внутрь SVG, но не трассируются и не преобразуются в векторы. MDN сообщает, что SVG-элемент <image> отображает растровые изображения. В экспортированный файл не копируются произвольные загруженные SVG, скрипты, ссылки или HTML.

Ограничения для надёжного экспорта

Доступная ширина экспорта: 800, 1200, 1600 или 2400 пикселей. PNG можно создать в масштабе 1× или 2×, если итоговый растр не превышает 8192 пикселя по каждой стороне и 16 × 1024 × 1024 пикселя (около 16,8 мегапикселя). Если экспорт 2× превышает безопасный предел браузера, инструмент сообщит о проблеме, а не станет незаметно уменьшать доску. Для SVG действует тот же предел безопасности проекта и файла в 48 MiB.

По умолчанию элементы без рейтинга не попадают в готовое изображение. Включите Добавить элементы без рейтинга, чтобы показать их последней нейтральной строкой. Всегда проверяйте предварительный просмотр: очень длинный заголовок, большое число строк или элементов могут сделать технически корректную доску нечитаемой при публикации в малом размере.

Частые ошибки при создании тир-листа

• Смена критерия в процессе. Укажите сравнение в заголовке до ранжирования.
• Непонятные названия строк. Подписи «Возможно» и «Избегать» сообщают больше, чем цвета без объяснения.
• Восприятие уровня как точной оценки. Элементы одной полосы входят в общую категорию; расстояние до другой полосы не является измеренной величиной.
• Забытый раздел без рейтинга. Такие элементы не включаются в готовый экспорт автоматически.
• Отправка только файла проекта. JSON нужен для повторного открытия редактора; если получателю достаточно посмотреть результат, используйте PNG или SVG.