Требования к онлайн-редактору

Требования к онлайн-редактору

Онлайн редактор HTML5 предназначен для создания макетов фотокниг и фотосувениров. В общем случае подразумевает создание коллажа из фотографий пользователя на основе готового шаблона оформления с использованием фонов, рамок, масок, арт-объектов и написания текстов на нескольких страницах (печатных поверхностях разного размера) для одного изделия.

Необходимо обеспечить простой, интуитивно понятный интерфейс в сочетании с быстрой бесперебойной работой редактора. Редактор должен работать как на стационарном компьютере, так и на мобильных устройствах без дополнительной загрузки какого-либо программного обеспечения. Архитектура редактора должна предусматривать необходимость оптимального сочетания передачи больших объемов данных (загрузка фото и объектов редактора), требования к скорости работы (скорость реакции 1-3сек, для операций требующих больше 5 сек отображать динамику процесса), отказоустойчивость при разрыве связи (в т. ч. слабый канал) и не требовать больших ресурсов устройства пользователя.

Параметры изделия, которые необходимы для отображения в редакторе:

1.  ТИП/ПодТип изделия (фотокнига, фотоальбом, календарь квартальный, комплект магнитов…). Для отображения в редакторе необходимо выбрать на сайте позицию товара с определенными характеристиками.

При изменении части характеристик – свойств товара (формат, способ печати, материал обложки) будет происходить изменение выбранной позиции товара (справочник ТМЦ).

Часть характеристик не меняет ТМЦ, а только влияет на стоимость (количество страниц в печатном блоке).

Дополнительные опции также влияют на стоимость товара без изменения ТМЦ (выбор материала обложки, форзаца или блока, металлические уголки, доп. услуги: проверки макета или убрать логотип) и могут добавлять печатные поверхности (индивидуальный форзац, вклейка в ежедневник).

2.  Печатные поверхности – описывают размер и количество поверхностей, на которых будет наноситься печать или другая персонализация изделия (гравировка, цветной форзац и др). Параметры печатных поверхностей содержат информацию о порядке отображения в редакторе, линиях сгиба, зоне обрезки/зоне безопасной печати.

3.  Тип печатной поверхности – введен для указания программе особенностей печатной поверхности: обложка разворот, блок печатный, форзац, нахзац, лицевая поверхность, обложка лицевая, обложка задняя, шпигель, календарь перекидной и т. д.

Связь Темы, дизайны, шаблоны:

1.  Темы – справочник, который позволяет делить товары и готовые шаблоны для оформления по наиболее популярным темам и поводам их создания: Путешествие, Дети, Свадьба, Новый год и т. д.

2.  Дизайны – справочник, который позволяет объединить несколько шаблонов оформления разных изделий (календарь, книга, открытка) в одну группу : Наш малыш, Зимняя сказка, Свадебный серый и т. д.

3.  Шаблоны - это заготовки(готовые макеты, но без фото) для оформления своего макета в редакторе с определенным дизайном и привязанные к определенным ТМЦ (один шаблон может быть привязан к нескольким ТМЦ, если у них одинаковый набор печатных поверхностей). На данный момент создание шаблона происходит в редакторе. Разница в наличии у менеджера-дизайнера дополнительных функций: загрузка новых фонов, рамок, масок, артов и возможности сохранить проект как шаблон. После сохранения проекта как шаблона из него удаляются все фото из фотоконтейнеров. После этого менеджер привязывает созданный шаблон к дизайнам и ТМЦ в отдельной таблице «Макеты с сайта».

Крайне важно сохранение шаблонов отдельными страницами, чтобы в редакторе можно было создать свой макет из готовых страниц разных шаблонов!!

Изделия одного ПодТипа ТМЦ (а иногда и Типа ТМЦ) имеют одинаковый набор свойств, опций и печатных поверхностей. Внутри подтипа ТМЦ отличаются между собой форматом и значениями свойств.

Необходима возможность уже в редакторе после выбора изделия на сайте и выбора шаблона оформления иметь возможность изменить выбранные параметры изделия, в том числе формат и подтип ТМЦ. Изменения должны приводить к замене выбранного ТМЦ и изменению отображения в редакторе (горизонтальный формат на вертикальный, книгу на альбом и т. д.), сохраняя при этом выбор дизайна/шаблона и заполненные фотографии и тексты.

Для создания своего макета в редакторе кроме готовых шаблонов используются:

1.  Фотографии, который клиент загружает со своего устройства (компьютер, смартфон, планшет), из соцсетей (В Контакте, Instagramm, Facebook…), с сайта (ранее загруженные клиентом на наш сайт фото. Необходимо хранение с группировкой по папкам. По умолчанию папка = название проекта), по URL-ссылке. Возможны другие источники фото. Фотографии и другие объекты сохраняются в 3-х размерах: small, medium, original. Small для отображения в ленте фотографий. Medium для отображения в рабочем поле редактора. Original для генерации макета для печати – эта часть. Использованные в проекте фотографии помечаются счетчиком количества раз использования. И есть дополнительный фильтр для отображения только неиспользованных фото.

2.  Раскладки – макеты страниц с контейнерами для фото и текстов. Без дополнительного декора. Можно рассматривать раскладки как вариант готовых шаблонов.

3.  Фоны – имеют много общего с фотоконтейнерами, но имеют особенности поведения: всегда расположены на нижнем уровне, геометрия фонового контейнера точно равна размеру печатной поверхности или развороту. Важно, что клиент может использовать фотографию в качестве фона.

4.  Рамки и маски – две разные таблицы, но часть рамок требует применения маски, чтобы края фотографии не вылезали за резную или округлую рамку. Поэтому к рамке часто указывается ссылка на подходящую для нее маску.

5.  Арт-объекты (клипарты) – декоративные элементы на прозрачном фоне. Необходима группировка артов по темам, дизайнам. Желательно по умолчанию показывать арты, привязанные к выбранному шаблону с возможностью выбора другой темы, дизайна или всех артов. Желателен поиск по дополнительным тегам : по цветам (красный), по предмету (слон), по сезону (зима….)

6.  Календарные сетки – по сути арт, но выделенный в отдельное окно. Основные теги: год, месяц, дизайн

7.  Шрифты – имеют большое количество настроек, как по выбору шрифтов, так и по параметрам контейнера и настройке теней.

8.  Шаблонные Тексты – тексты, которые использованы в готовых шаблонах для обозначения мест для ввода текстов пользователем : «Ваш текст», «Напишите свою историю»…

9.  Тексты, которые создают клиенты при работе в редакторе или готовые тексты в шаблонах, которые должны остаться в макете, если пользователь их не удалил: заголовки, цитаты….

Текущая конфигурация сохраняет данные о параметрах выбранного изделия и созданном макете в следующих таблицах:

1.  Проект – служит объектом для описания всех выбранных параметров изделия, связи с созданным макетом и является объектом для оформления заказа. Отображается в личном кабинете клиента с превью первой страницы, указанием названия ТМЦ, выбранных опций и стоимости товара. Именно проект клиент кладет в корзину при оформлении заказа.

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

3.  Страницы в JPG – таблица хранит ссылки на готовые страницы макетов. Страницы также создаются в 3-х разрешениях: для превью, для отображения готового макета в режиме просмотра на экране и в разрешении для печати. Хранение этих данных временное, по истечении 3-х месяцев готовые макеты удаляются. При необходимости их можно сгенерировать заново.

Основной функционал редактора:

1.  3 режима: экспресс, творческий, дизайнер. Экспресс режим подразумевает ограниченный функционал. С возможностью у пользователя переключать режим. С запоминанием для пользователя последнего выбранного им режима.

2.  Экспресс-редактор подразумевает простое и быстрое создание макета на основе готового шаблона. Готовый шаблон при этом режиме не изменяется пользователем.

3.  Функционал экспресс-режима (кратко, см. подробнее ниже):

3.1  Загрузка фото и их ручная расстановка в контейнерах

3.2  Автозаполнение фотоконтейнеров фотографиями из ленты

3.3  Редактирование изображений (обрезка, поворот, ? эффекты яркости, контрасности и насыщенности, применение фильтров – черно-белый, негатив, сепия)

3.4  Удаление фотографий из фотоконтейнера (пустые контейнеры не отображаются в готовом макете).

3.5  Поворот внутри контейнера на 90 градусов

3.6  Редактирование текстов

3.7  Изменение порядка страниц

3.8  Добавление/удаление разворотов

4.  Дополнительный функционал творческого режима редактора:

4.1  Свободное добавление, удаление и редактирование фотографий на странице

4.2  Свободное добавление, удаление и размещение элементов на странице

4.3  Смена макета и фона страницы

4.4  Размещение объектов по слоям

4.5  Добавление/удаление и настройка параметров текстов

5.  Дополнительный функционал для дизайнера-администратора:

5.1  Добавление фонов, рамок, масок, арт-объектов, календарных сеток, шаблонных текстов. В общем случае должна быть возможность связывать добавленные элементы с пользователем и должны быть признаки для возможности скрыть или выложить элементы для всеобщего использования (отображения в ленте элементов).

5.2  Сохранение макета как шаблона с удалением фото из фотоконтейнеров. Также необходима возможность привязки созданного шаблона к пользователю, признаки доступности шаблона для других пользователей и цена использования.

6.  Автозаполнение

7.  Автосохранение

8.  Просмотр макета

Общее описание функций редактора
Новые функции - изменение выбранных при входе в редактор параметров	Экспресс
После входа в редактор с выбранными параметрами изделия нужно возможность изменения следующих параметров	да
Изменение формат/размера фотокниги	да
Изменение материала/вида обложки	да
Настройка других параметров фотокниги в перспективе. Например, добавление индивидуального или цветного форзаца
Изменение Подтипа/Типа ТМЦ для совместимых изделий. Например, смена альбома полиграфического на альбом с фотопечатью или на фотокнигу.	да
Изменение шаблона/дизайна с реализацией меню выбора другой темы/дизайна	да
Возможность выбора и вставки отдельных страниц из других шаблонов
Общие кнопки
добавление пустого контейнера для фото
справка по созданию и заказу проекта.	да
всплывающие подсказки с наличие параметра пользователя для запрета/разрешения подсказок	да
Загрузка фотографий для использования в проекте	да
Автоматическое заполнение контейнеров фотографиями	да
Добавление текстового контейнера
Отмена последнего действия (до последнего сохранения)	да
Возврат последнего отмененного действия	да
Уменьшение/увеличение масштаба страницы	да
Поворот рабочего поля на 90градусов
Страницы проекта
В верней части редактора располагается лента страниц с превью всех страниц макета. Переход на нужную страницу осуществляется выбором страницы в ленте. Страницы в ленте можно менять местами простым перетаскиванием	да
— листание страниц назад/вперед. Кнопки позволяют вернуться на предыдущую или на следующую страницу	да
— перелистывание страниц. Переход на первую или на последнюю страницу	да
По правой кнопке мыши вызывается доп. меню с функциями "Копироватьстраницу", Вставить перед страницей, Вставить после страницы.	да
Добавление/удаление страниц	да
Управление проектом
— просмотр проекта. Позволяет просмотреть готовый макет фотоизделия	да
— сохранить проект. Сохранив макет, можете приостановить работу или выйти из редактора, не потеряв результат своего труда	да
— автосохранение проекта. Автоматическое периодическое сохранение проекта при наличии изменений и авторизацией в редакторе автора проекта.	да
— добавить в корзину и оформить заказ. На кнопку следует нажимать, когда макет полностью свёрстан и вы готовы сделать заказ	да
— вернуться в личный кабинет. Переход из создания макета на страницу «Мои проекты» Личного Кабинета	да
— сообщить об ошибке. При возникновении ошибок при работе в редакторе	да
— ошибки на текущей странице. Показывает ошибки, возникшие при редактировании	да
Загрузка фотографий
При открытии нового проекта вам предлагается сразу загрузить фотографии, которые вы будете использовать в своем проекте. Вы можете согласиться, либо отложить это действие, нажав на крестик или кнопку "Позже"	да
Кнопка в правом верхнем углу. Если вам нужно загрузить фотографии в процессе редактирования, используйте кнопку загрузки фотографий на верхней панели	да
Также вы можете загрузить фотографию в любой контейнер в процессе редактирования, щелкнув двойным кликом мыши на фотоаппарат по значку	да
в контейнере. В каждый контейнер вы можете загрузить только одно фото.	да
Источники загрузки фото
с устройства пользователя	да
соцсети
В Контакте	да
Инстаграм	да
Фэйсбук
Google+
Облачное хранилище
ICLOUD
Google Диск
Яндекс Диск
DropBox
По URL-ссылке
С сайта	да
Загруженные фотографии появятся в виде ленты уменьшенных изображений в закладке «Фото» нижней панели.
После загрузки фотографий вам будет предложено автозаполнение (ссылка) макета фотографиями.
Помимо разовой операции автозаполнения контейнеров можно заполнять контейнеры фотографиями вручную. Для этого нужно перетащить нужное изображение из ленты в контейнер.
Меню правой кнопки мыши на рабочем поле редактора
копирование объекта под курсором (фотоконтейнер, текст, арт-объект, календарь)
вставка скопированного объекта (можно вставлять несколько раз и на разных страницах)
Для фотографии применимы функции "Сделать фоном разворота" и "Сделать фоном страницы". При выборе функции фотография станет фоном открытого в этот момент разворота. Для работы функции "Сделать фоном страницы" нужно выбрать левую или правую страницу.
Фукция "Очистить контейнер" удаляет фото из контейнера, но оставляет все остальные параметры включая рамку и маску.
Информация о контейнере
Добавить место для фото
Добавить арт-объект
Выбрать фон
Добавить текст
Отменить последнее действие
3 Форматы изображений, используемые в редакторе
В данный момент, поддерживается загрузка файлов только с расширением jpg и png.
Если вы хотите загрузить изображения, то лучше воспользоваться форматом jpg, для арт-объектов предпочтителен формат png, поддерживающий прозрачность фона.
Операции с фотоконтейнерами, арт-объектами
Прежде чем совершать какие-либо действия над фотографией в макете, её нужно активировать. Для активации сделайте один короткий щелчок мышкой на фотографии, вокруг фотографии появится рамка, фон вокруг фото поблекнет.
Управление контейнером с фотографией
Вы можете использовать значки на рамке контейнера, такие как:
Перемещение контейнера (за любую точку внутри контейнера или спц. значок)
Вращение контейнера (за значок поворота над контейнером)
Масштабирование/растягивание контейнера. Вы можете уменьшать/увеличивать размер контейнера с фотографией в нем, наведя курсор на угол контейнера. Изменение размеров происходит с сохранением пропорций
Кадрирование/обрезка. Наведя курсор на боковой край контейнера с фотографией, вы можете обрезать фотографию с любой стороны. Необходимо добавить контроль того, чтобы между фото и контейнером не возникало пустого зазора.
Вписать фото в контейнер/ подогнать контейнер под фото - по максимальной стороне фото вписывается в размер контейнера, а по меньшей стороне контейнер уменьшается до размера фото	да
Подогнать фото под контейнер - по минимальной стороне фото заполняет контейнер, а по максимальной стороне фото центрируется в контейнере.	да
Удаление контейнера. Нажатие клавиши Delete приводит к удалению активного контейнера. Желательно продублировать кнопкой Удаления
Изменение слоев. В случае, если объекты расположены друг над другом и нужно изменить их порядок, используйте кнопки управления слоями в закладке «Настройки» на панели инструментов слева.
Копирование объекта. Для копирования любого контейнера сделайте его активным, нажмите клавиши Ctrl + C затем, чтобы вставить объект, нажмите Ctrl + V (либо воспользуйтесь соответствующими кнопками на левой панели инструментов).
Тень - использовать, угол, расстояние, прозрачность, цвет. Есть установки по умолчанию. После изменения пользователем параметров - сохранять последние введенные параметры для пользователя.
Рамки - использовать, картинки/графические, область применения: текущий контейнер, разворот, вся книга, параметры графических рамок: цвет, толщина
Маски - использовать
Фоны - картинка/цветной/фото. Применяются эффекты и фильтры. Возможно применение на разворот или страницу. Желательно добавление применения на всю книгу.
Редактирование фото/арт-объекта внутри контейнера
Перемещение фото внутри контейнера/ Выбор части фото - может достигаться путем открытия отдельного окна с отображением всего фото и прозрачной области, соответсвующей размеру контейнера. Или доп. Иконкой, появля. щейся при наведении курсора на активный контейнер. При захвате иконки - перемещение фото внутри контейнера.
Поворот фото внутри контейнера должен быть реализован 2-мя способами: поворотом на 90 градусов и ползунком/вводом значения для тонкой корректировки
Вписать фото в контейнер - по максимальной стороне фото вписывается в размер контейнера, а по меньшей стороне контейнер уменьшается до размера фото	да
Подогнать фото под контейнер - по минимальной стороне фото заполняет контейнер, а по максимальной стороне фото центрируется в контейнере.	да
Отразить фото/арт-объект по горизонтали/вертикали
Эффекты: яркость, контрастность, прозрачность	да
Фильтры: оригинальный, черно-белый, сепия….см. инстаграм	да
Работа с текстом
Добавление/Удаление текстового контейнера
Перемещение, поворот/вращение, изменение размера текстового контейнера
Редактирование текста с выбором шрифта, размера, выравнивания, жирности, курсива, цвета, прозрачности
Параметры фона текстового контейнера: прозрачность, тип баллуна, наличие стрелки, скругление углов
Параметры тени текста: наличие, угол, цвет, расстояние, прозрачность, внутренняя тень
Тиснение и свечение - дополнительниые опции. Не являются принципиальными

Сравнительная таблица режимов редактора (пока примерная)

Параметры	Экспресс	Творческий	Дизайнер
Изменение размера фотокниги	+	+	+
Изменение материала страниц	+	+	+
Настройка других параметров фотокниги	+	+	+
Изменение материала обложки	+	+	+
Изменение вида обложки	+	+	+
Изменение типа форзаца	+	+	+
Изменение стиля форзаца	+	+	+
Изменение темы оформления	+	+	+
Страницы/развороты
Изменение макета страниц	+	+	+
Изменение фона страниц	+	+	+
Перемещение разворотов	+	+	+
Добавление/удаление разворотов	+	+	+
Перемещение страниц в рамках одного разворота	+	+	+
Очистка страниц	+	+	+
Фотографии
Импорт фотографий	+	+	+
Автозаполнение/Автомикс фотокниги фотографиями	+	+	+
Обрезка фотографий и поворот	+	+	+
Применение фильтров: черно-белый, негатив и сепия	+	+	+
Применение эффектов яркости, контрасности и насыщенности	+	+	+
Расширенное редактирование изображения с плавным поворотом и т. д.		+	+
Произвольное размещение и перемещение фоторгафий на страницах		+	+
Удаление фотографий из фотоконтейнера	+	+	+
Добавление новых контейнеров для фотографий		+	+
Объекты
Добавление элементов оформления на страницы (клипарты, рамки, маски)		+	+
Удаление элементов оформления со страниц (клипарты, рамки, маски)		+	+
Произвольное размещение и перемещение клипартов по странице		+	+
Размещение объектов по слоям		+	+
Загрузка пользовательских элементов (рамки, маски, клипарты)			+
Использование элементов (рамки, маски, клипарты) из других тем		+	+
Текст
Добавление текста в готовые текстовые контейнеры		+	+
Изменение шрифта, размера и других параметров оформление текста		+	+
Изменение шрифта, размера и других параметров текста на корешке		+	+
Произвольное размещение и перемещение текста на страницах		+	+
Добавление новых контейнеров для текста		+	+
Дополнительные возможности
Сброс к начальным настройкам		+	+
Добавление тени к элементам (клипартам, фотоконтейнерам)		+	+
Изменение прозрачности элементов (фотоконтейнеры, клипарты, тексты)		+	+
Редактирование векторных рамок (скругление, цвет, толщина)		+	+