ТЗ на разработку сайта

1

25 июня 2013 г.

Техническое задание на разработку сайта

sevendeco.ru

2

Формат сайта: информационно-познавательный портал (своеобразная школа флористического декора) и Интернет-каталог товаров SevenDeco. Школа декора подразумевает мастер-классы, энциклопедические статьи и конкурсы с использованием продукции SevenDeco. Для участия в конкурсах предполагается простая регистрация с возможностью загрузки фото, описания, комментария и оценки. Интернет-каталог подразумевает актуальный список товаров SevenDeco по категориям согласно 1С Цель создания сайта: развернуть открытую площадку, где любой желающий (от ребёнка до взрослого) сможет легко научиться делать красивые дизайнерские композиции по простым шагам и из доступных материалов. Каждый сможет поделиться своими идеями, как сделать красивую вещь из материалов SevenDeco. А также получить всю исчерпывающую информацию по материалам для композиции, видам хобби и т.д. Найти адреса магазинов, где можно купить продукцию SevenDeco. Принять участие в конкурсах на лучшую композицию, поделиться мнениями, оставить пожелание. Задачи сайта:

- сгенерировать интерес целевой аудитории (дети от 5 лет и их родители, флористы, дизайнеры, школы декора)

- получить обратную связь для развития бренда - дать возможность партнёрам ознакомиться с ассортиментом, концепцией

бренда и возможностями продвижения

Хорошие примеры - по наполняемости http://azdecor.ru/ - но без интернет-магазина http://hobbywork.ru/ http://www.decor-doma.ru/

- по визуализации http://www.pandurohobby.co.uk/ http://loftcenter.ru/

http://azdecor.ru/

http://hobbywork.ru/

http://www.decor-doma.ru/

http://www.pandurohobby.co.uk/

http://loftcenter.ru/

3

1. ШАБЛОНЫ СТРАНИЦ (6)

1.1. ГЛАВНАЯ 1.2. СТРАНИЦА-СПИСОК (мастер-класс, энциклопедия, конкурс) 1.3. СТРАНИЦА-БЛОК (мастер-класс, энциклопедия, конкурс, «поделись

идеей») 1.4. СТРАНИЦА КАТАЛОГА 1.5. ТЕКСТОВАЯ СТРАНИЦА («где купить», SevenDeco и др. по

необходимости) 1.6. ОКНО (регистрация, вход, загрузка, комментарии, обратная связь)

2. СТРУКТУРА САЙТА и ОПИСАНИЕ СТРАНИЦ 2.1. ГЛАВНАЯ СТРАНИЦА

Блок меню Блок с мастер-классами Блок с баннерами Подвал

2.1.1. БЛОК МЕНЮ

(по центру, горизонтальное вверху, двухуровневое)

Пример: http://www.moskva.fm/

Слева:

- логотип (ссылка на главную страницу) - заголовок (под логотипом) «твоя школа декора»

Верхний уровень меню:

- флористика (ссылка на страницу со списком мастер-классов, отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне, сложности и материалам)

- декорирование (ссылка на страницу со списком мастер-классов, отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне и сложности и материалам)

- бижутерия (ссылка на страницу со списком мастер-классов, отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне и сложности и материалам)

- ещё (выпадающий список) - аквариумистика (ссылка на страницу со списком мастер-

классов, отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне и сложности и материалам)

- скраббукинг (ссылка на страницу со списком мастер-классов,

Лого Seven Deco

твоя

школа декора

флористика декорирование бижутерия ещё (выпадающее

меню)

поделись идеей

войти / регистрация

SevenDeco материалы (выпадающее

меню)

где купить хобби-энциклопедия

конкурсы поиск по сайту

http://www.moskva.fm/

4

отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне и сложности и материалам)

- декупаж (ссылка на страницу со списком мастер-классов, отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне и сложности)

- квилинг (ссылка на страницу со списком мастер-классов, отсортированных по данной тематике, и с возможностью сортировки по популярности, новизне и сложности)

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

список ещё должен иметь возможность редактирования: добавления

новых видов хобби и удаления (переименования) старых - поделись идеей (ссылка на страницу с загруженными идеями по использованию товаров SevenDeco и загрузки своей идеи) - войти / зарегистрироваться (всплывающее окно регистрации или входа – описано ниже)

Регистрация даёт возможность комментировать и оценивать мастер-классы, участвовать в конкурсах, загружать фото и тексты своих идей

Нижний уровень меню -SevenDeco (ссылка на страницу с вопросами и ответами по бренду SevenDeco) -материалы выпадающий список (категории товара согласно номенклатуре 1С, список подробно описан ниже) Пример раскрывающегося меню каталога по категориям с картинками-миниатюрами http://www.disneystore.com/

- декоративные сыпучие материалы (ссылка на страницу со списком данной категории продукции и возможностью сортировки по подкатегориям)

- декоративные украшения (ссылка на страницу со списком данной категории продукции и возможностью сортировки по подкатегориям)

- натуральные декоративные материалы (ссылка на страницу со списком данной категории продукции и возможностью сортировки по подкатегориям)

- инструменты, химические средства (ссылка на страницу со списком данной категории продукции и возможностью сортировки по подкатегориям)

(Список материалы должен иметь возможность редактирования: добавления категорий и удаления старых)

-где купить (ссылка на страницу с возможностью сортировки по городам)

-хобби-энциклопедия (ссылка на список статей с возможностью сортировки) -конкурсы (ссылка на список конкурсов, отсортированных по активности) -поиск по сайту (только текстовый)

http://www.disneystore.com/

5

2.1.2. БЛОК С МАСТЕР-КЛАССАМИ

(Центральная зона главной страницы) Фото мастер-класса (ссылка на список мастер-классав)

начинающим

увлекающимся

профессионалам

Пример: http://www.disneystore.com/

Содержание вкладок

1. Фото детского мастер-класса (оно же – ссылка на страницу со списком мастер-классов, отсортированным по уровню сложности и с возможностью дальнейшей сортировки по видам хобби, популярности, новизне и материалам). Текст вкладки «начинающим»

2. Фото мастер-класса среднего уровня (оно же – ссылка на страницу со списком мастер-классов, отсортированным по уровню сложности и с возможностью дальнейшей сортировки по видам хобби, популярности, новизне и материалам). Текст вкладки «увлекающимся»

3. Фото мастер-класса высокого уровня (оно же – ссылка на страницу со списком мастер-классов, отсортированным по уровню сложности и с возможностью дальнейшей сортировки по видам хобби, популярности, новизне и материалам). Текст вкладки «профессионалам»

2.1.3. БЛОК С БАННЕРАМИ (внизу под блоком с мастер классами – ширина блока равна ширине блока с мастер-классами) Новый конкурс или новый мастер-класс

Новые поступления в ассортимент SevenDeco

Новый (хороший) магазин-партнёры

Примеры: http://www.teletie.ru/

Анимированные фото с информацией (3 прямоугольных блока в ряд) 1.Новый конкурс или новый мастер-класс (ссылка на список мастер-классов или конкурсов, отсортированный по новизне) 2.Новые поступления в ассортимент SevenDeco (ссылка на текстовую страницу со списком новинок ) 3.Магазин-партнёр (ссылка на сайт магазина – открывается в новом окне/вкладке)

2.1.4. ПОДВАЛ

http://www.disneystore.com/

http://www.teletie.ru/

6

(скелет сайта и ссылки на группы в соцсетях, счётчики в виде 9 блоков по 3 в ряд обратная связь SevenDeco – материалы и инструменты

для флористического хобби Яндекс Метрика LiveInternet © 2013 SevenDeco facebook

(лого) вконтакте (лого)

одноклассники (лого) YouTube (лого)

флористика декорирование бижутерия аквариумистика скраббукинг декупаж квилинг эмбоссинг … (новые хобби 1-2 строки)

группы материалов SevenDeco -декоративные сыпучие материалы -декоративные украшения -натуральные декоративные материалы -инструменты, химические средства … (новые группы)

конкурсы поделиcь идеей мастер-классы … (список самых популярных мастер-классов)

где купить Москва Санкт-Петербург Новосибирск

хобби-энциклопедия всё о видах хобби всё о материалах SevenDeco

7flowers-decor.ru nobilismarco.com 7flowers.ru

Таблица 1-я строка – ширина – 3 строки

1 блок (верхний левый) -Обратная связь – при нажатии, всплывающее окно с формой обратной связи

(описана ниже) слева -Лого Facebook (ссылка на группу – открывается в новом окне) -Лого Вконтакте (ссылка на группу – открывается в новом окне) справа -лого Одноклассники (ссылка на группу – открывается в новом окне) -лого YouTube (ссылка на канал – открывается в новом окне)

2 блок (верхний средний) SevenDeco – материалы и инструменты для флористического хобби

(ссылка на информацию о бренде)

3 блок (верхний правый) - Счётчики Яндекс Метрика и LiveInternet + встроенный в страниц сайта Google Analyctics © 2013 SevenDeco

2-я строка с блоками имеет ширину в 10 строк 4 блок (средний левый) -флористика (ссылка на соответствующий список) -декорирование (ссылка на соответствующий список) -бижутерия (ссылка на соответствующий список) -аквариумистика (ссылка на соответствующий список) -скраббукинг (ссылка на соответствующий список) -декупаж (ссылка на соответствующий список) -квилинг (ссылка на соответствующий список) -эмбоссинг (ссылка на соответствующий список)

7

+ 2 пустые строки для добавления новых хобби 5 блок (средний средний) группы материалов SevenDeco (ссылка на весь каталог) -декоративные сыпучие материалы (ссылка на соответствующий список) -декоративные украшения (ссылка на соответствующий список) -натуральные декоративные материалы (ссылка на соответствующий

список) -инструменты, химические средства (ссылка на соответствующий список) + 5 пустых строк для добавления новых групп

6 блок (средний правый) -конкурсы (ссылка на соответствующий список) -поделиcь идеей (ссылка на соответствующую страницу) -мастер-классы (ссылка на список всех мастер-классов) + 7 пустых строк для добавления списка популярных (или новых) мастер-

классов 3-я строка – ширина 4 строки

7 блок (нижний левый) где купить (ссылка на соответствующий раздел) -Москва (ссылка на соответствующий список) -Санкт-Петербург (ссылка на соответствующий список) -Новосибирск (ссылка на соответствующий список)

8 блок (нижний средний) хобби-энциклопедия (ссылка на список всех статей) -всё о видах хобби (ссылка на соответствующий список) -всё о материалах SevenDeco (ссылка на соответствующий список) 9 блок (нижний правый) -7flowers-decor.ru (ссылка на сайт, отрывается в новом окне, вкладке) -nobilismarco.com (ссылка на сайт, отрывается в новом окне, вкладке) -7flowers.ru (ссылка на сайт, отрывается в новом окне, вкладке)

8

2.2. СТРАНИЦА-СПИСОК (МАСТЕР-КЛАСС)

(по ссылкам с верхней строки меню с названиями хобби и с центрального блока с мастер-классами) Пример: http://www.wildberries.ru/

Имиджевый фото-коллаж, меняющийся в зависимости от вкладки (виды хобби, хобби по сложности, материалы, новый мастер-класс, популярный мастер-класс)

вкладки фильтров и сортировки ниже

виды хобби уровень сложности материалы популярное новое

все | флористика | декорирование | бижутерия | аквраиумистика | скраббукинг | декупаж | квилинг | эмбосинг

все | начинающим | увлекающимся | профессионалам

все | декоративные сыпучие материалы | декоративные украшения | натуральные декоративные материалы | инструменты, химические средства

фото Название мастер-класса 1 > Развернуть

Кратко: о мастер-классе





Пример со списком: http://blog.da-medvedev.ru/

Пояснения к списку: 1. Нажимая вкладки «виды хобби», «уровень сложности» или «материалы», открываются области внизу (для каждой вкладки открывается только одна своя область – обозначены соответствующими цветам). Области под вкладками дают возможность детальной пошаговой одновременной сортировки мастер-классов. 5 параметров сортировки:

- вид хобби - уровень сложности - материалы

http://www.wildberries.ru/

http://blog.da-medvedev.ru/

9

- популярность (от самого высоко оценённого к мало оценённому или неоценённому). Если оценок нет или они равны, список формируется по дате добавления - новизна (от самого нового к первому добавленному)

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

- карточки с закладками для сортировки списка - виды хобби (открывается поле ниже вкладок с ссылками для дальнейшей сортировки списка) - все - флористика

- декорирование - бижутерия - аквраиумистика - скраббукинг - декупаж - квилинг - эмбосинг

список должен иметь возможность ручного редактирования: добавления новых видов хобби и удаления старых (ненужных)

- уровень сложности (открывается поле ниже вкладок с ссылками для

дальнейшей сортировки списка) - начинающим - увлекающимся - профессионалам

список должен иметь возможность ручного редактирования: добавления новых уровне и удаления старых (ненужных), переименования

- материалы (открывается поле ниже вкладок с ссылками для дальнейшей

10

сортировки списка) - все

- декоративные сыпучие материалы - декоративные украшения - натуральные декоративные материалы - инструменты, химические средства

список должен иметь возможность ручного редактирования: добавления новых уровне и удаления старых (ненужных), переименования

- новое (вверху самый новый мастер-класс, внизу самый старый) - популярное (на основе оценок– вверху мастер-класс с самыми высокими оценками, ниже с низкими оценками и вообще без оценок и без комментариев)

Содержание блока в списке: - имиджевое фото по тематике (слева) - название мастер-класса (вверху в центре) - стрелочка и надпись «развернуть» (вверху справа) - краткое описание мастер-класса (справа внизу)

11

2.2.1. ОТКРЫВШИЙСЯ (РАЗВЕРНУВШИЙСЯ) БЛОК

Данный блок появляется после нажатия на одну из стрелок и надписью «развернуть» в списке блоков. Раскрываясь, блок двигает нижние блоки вниз. Закрываясь (нажатие на ту же стрелку), блок поднимает нижние блоки обратно наверх. При раскрытии и закрытии появляется и убирается только часть ниже фото и краткого описания (выделена цветом) Пример движения: http://www.forum3.ru/ (меню сбоку, только у нас будут так двигаться большие блоки в центре)

Как пример - http://mir-kubikov.ru/articles/ разверните новость. У вас в строке образовалась ссылка - http://mir-kubikov.ru/articles/#!item712 Но это не новая страница, а просто ссылка на элемент на данной странице. Прелоадер – фигура показывающая, что идёт загрузка блока. Важно для медленного соединения

Фото : -поделка мастер-класса (с возможностью увеличить)

Название мастер-класса V Свернуть

Кратко о мастер-классе

Да V 12 Форма голосования (для зарегистрированных)

Шаги мастер-класса (текстовый блок) + или - миниатюрный видео-плеер YouTube c видео-версией мастер-класса

Поделиться в соцсетях

Комментировать (для зарегистрированных)

- Галерея-слайдер (с возможностью увеличить) пошаговые фото по мастер-классу

Материалы: - список групп товаров с ссылками на списки в каталоге

- Скачать PDF - Прочитай подробнее про материалы (Ссылка на список статей энциклопедии, отсортированный по материалам) - Прочитай подробнее про хобби (Ссылка на список статей энциклопедии, отсортированный по видам хобби) - Прими участие в конкурсе (Ссылка на конкурс(ы) по теме мастер-класса)

На странице остаются: - верхнее меню

http://www.forum3.ru/

http://mir-kubikov.ru/articles/

http://mir-kubikov.ru/articles/#!item712

12

- подвал - слева - фото мастер-класса

- «Да» - квадрат с полупрозрачной «галочкой». Ниже под фото. Нажимая, «галочка» красится в красный цвет и рядом появляется количество проголосовавших за мастер-класс (активно для зарегистрированных пользователей). Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и появляется возможность голосовать.

За конкретный мастер-класс пользователь может голосовать один раз. ! Как вариант, заложить возможность генерации кода проверки для защиты от спам-роботов !

- «поделиться» ниже слева под «голосовать» – иконки соцсетей в столбик с ссылками на формы поделиться соцсетей (facebook, vkontakte, odnoklassinki, google+, twitter)

- комментировать (ниже «поделиться») -Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и открывается список (поверх страницы мастер-класса) с комментариями и полем для комментирования. -Зарегистрированный пользователь нажимает на ссылку «комментировать» и поверх страницы «вылетает» окно со списком комментариев и формой для комментария внизу (список описан ниже). Комментарий сразу опубликуется без возможности отредактировать. Администратор имеет право удалить или отредактировать комментарии, или заблокировать пользователя. - справа - название мастер-класса (вверху по центру) - стрелочка и надпись «свернуть» (справа вверху)

- кратко о мастер-классе (ниже под названием) - блок с текстом ниже под кратким описанием. В этот же блок можно

(при необходимости) вставлять блок с видео-плеером YouTube

- ниже в ширину всего блока - галерея-слайдер с подробными фото по мастер-классу (ниже

текстового блока) Нажимая на фото – можно увидеть увеличенную картинку - ниже под галереей

- два блока - список материалов с ссылками на списки в каталоге

(блок слева) Скачать PDF (Ссылка на PDF-версию мастер-

класса, открывается PDF-файл, который можно сохранить, если файла нет – нет ссылки – пустое поле)

Прочитай подробнее про материалы

(Ссылка на список статей энциклопедии, отсортированный по материалам)

Прочитай подробнее про хобби (ссылка на список статей энциклопедии, отсортированный по видам хобби) Прими участие в конкурсе (ссылка на

конкурс(ы) по теме мастер-класса, если конкурса нет – нет

13

ссылки – пустое поле) (блок справа в три строки)

14

2.3. СТРАНИЦА-СПИСОК (ЭНЦИКЛОПЕДИЯ)

(по ссылке в нижней строке меню «хобби-энциклопедия) Имиджевый фото-коллаж, меняющийся в зависимости от вкладки (виды хобби, алфавит, материалы, популярная статья, новая статья)

вкладки фильтров и сортировки

хобби алфавит материалы

популярное новое

все | флористика | декорирование | бижутерия | аквраиумистика | скраббукинг | декупаж | квилинг | эмбосинг | …

А-Д | Е-И | К-Н | О-Т | У-Щ | Э-Я

все | декоративные сыпучие материалы | декоративные украшения | натуральные декоративные материалы | инструменты, химические средства | …

фото Название статьи 1 > Развернуть

Начальный текст статьи





Пояснения к списку: 1. Нажимая вкладки «виды хобби», «алфавит» или «материалы», открываются области внизу (для каждой вкладки открывается только одна своя область – обозначены соответствующими цветам). Области под вкладками дают возможность детальной пошаговой одновременной сортировки статей. 5 параметров сортировки:

- вид хобби - алфавит (формируется по первым буквам в названии статьи) - материалы - популярное - новое

Все 5 параметром можно применить одновременно! 2. При загрузке статьи через 1С Битрикс, как в случае с тэгами, метками и рубриками в блогах, статье присваиваются категории из 3 параметров. Например, после загрузки текста и фото статьи, указываем:

15

-к какому виду хобби относится (1 или несколько видов одновременно) -о каких материалах идёт речь Все 2 параметра имеют возможность редактирования: удаления или редактирования, добавления новых. Параметр «популярность» формируется по количеству оценок. Параметр «новизна» формируется автоматически по дате добавления Параметр «алфавит» формируется по первым буквам в названии статьи Содержание страницы На странице остаются: - верхнее меню - подвал В центре (под меню): - Имиджевый фото-коллаж, меняющийся в зависимости от вкладки (виды хобби, алфавит, материалы, популярная статья, новая статья) - карточки с закладками для сортировки списка - виды хобби (открывается поле ниже вкладок с ссылками для дальнейшей сортировки списка статей) - флористика


список должен иметь возможность ручного редактирования: добавления новых видов хобби и удаления старых (ненужных), переименования

- алфавит (открывается поле ниже вкладок с ссылками для дальнейшей сортировки списка)

- А-Д - Е-И - К-Н - О-Т - У-Щ - Э-Я

- материалы (открывается поле ниже вкладок с ссылками для дальнейшей

сортировки списка) - декоративные сыпучие материалы - декоративные украшения - натуральные декоративные материалы - инструменты, химические средства

список должен иметь возможность ручного редактирования: добавления новых категорий и удаления старых (ненужных), переименования

16

- новое (от последней опубликованной статьи к первой) - популярное (на основе оценок от самого высоко оценённого к мало оценённому или неоценённому). Если оценок нет или они равны, список формируется по дате добавления

Содержание блока в списке - имиджевое фото по тематике (слева) - название статьи (вверху в центре) - стрелочка и надпись «развернуть» (вверху справа) - начальный текст статьи (справа внизу)

17


Данный блок появляется после нажатия на одну из стрелок и надписью «развернуть» в списке блоков. Раскрываясь, блок двигает нижние блоки вниз. Закрываясь (нажатие на ту же стрелку), блок поднимает нижние блоки обратно наверх. При раскрытии и закрытии появляется и убирается только часть ниже фото и краткого текста (выделена цветом) Пример движения: http://www.forum3.ru/ (меню сбоку, только у нас будут так двигаться большие блоки в центре)

Фото по теме статьи (с возможностью увеличить)

Название статьи V Свернуть



Основной текст статьи


Комментировать (для зарегистрированных)

- Галерея-слайдер (с возможностью увеличить) иллюстрации по теме статьи


Ссылки на списки мастер-классов, отсортированные по теме - по материалам - по видам хобби

На странице остаются: - верхнее меню - подвал - слева - фото по теме статьи

- «Да» - квадрат с полупрозрачной «галочкой». Ниже под фото. Нажимая, «галочка» красится в красный цвет и рядом появляется количество проголосовавших за статью (активно для зарегистрированных пользователей). Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма


18

описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и появляется возможность голосовать.

За конкретную статью пользователь может голосовать один раз. - «поделиться» ниже слева под «голосовать» – иконки соцсетей в

столбик с ссылками на формы поделиться соцсетей (facebook, vkontakte, odnoklassinki, google+, twitter)

- комментировать -Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и открывается окно (поверх страницы статьи) с комментариями и полем для комментирования. -Зарегистрированный пользователь нажимает на ссылку «комментировать» и поверх страницы «вылетает» окно со списком комментариев и полем для комментария внизу (список описан ниже). Комментарий сразу опубликуется без возможности отредактировать. Администратор имеет право удалить или отредактировать комментарии, или заблокировать пользователя.

- справа – название статьи (вверху по центру) - стрелочка и надпись «свернуть» (справа вверху)

- блок с начальным текстом ниже справа под названием - блок с основным текстом статьи (ниже под начальным)

- ниже в ширину всего блока - галерея-слайдер с иллюстрациями по теме статьи (ниже блока из двух колонок) Нажимая на фото – можно увидеть увеличенную картинку

ниже под галерей - два блока

- список материалов с ссылками на списки в каталоге (блок слева)

- Ссылки на списки мастер-классов, отсортированные по теме - по материалам - по видам хобби

19

2.4. СТРАНИЦА-СПИСОК (КОНКУРСЫ)

(по ссылке в нижней строке меню «конкурсы» или с баннера внизу слева на главной странице) Имиджевый фото-коллаж, меняющийся в зависимости от вкладки (виды хобби, новые конкурсы, материалы, архив конкурсов)

вкладки фильтров и сортировки

виды хобби новые материалы победители

Флористика | декорирование | бижутерия | аквраиумистика | скраббукинг | декупаж | квилинг | эмбосинг | …

декоративные сыпучие материалы | декоративные украшения | натуральные декоративные материалы | …

фото Название конкурса 1 > Развернуть

Начальный текст условий конкурса





Пояснения к списку: 1. Нажимая вкладки «виды хобби» и «материалы», открываются области внизу (для каждой вкладки открывается только одна своя область – обозначены соответствующими цветам). Области под вкладками дают возможность детальной пошаговой одновременной сортировки статей. 4 параметра сортировки:

- вид хобби - материалы - популярное - новое

Все 4 параметра можно применить одновременно! 2. При загрузке статьи через 1С Битрикс, как в случае с тэгами, метками и рубриками в блогах, конкурсу присваиваются категории из 2 параметров. Например, после загрузки текста и фото конкурса, указываем: -к какому виду хобби относится (1 или несколько видов одновременно)

20

-какие группы материалов используются Эти 2 параметра имеют возможность редактирования: удаления или редактирования, добавления новых. Параметр «новизна» формируется автоматически по дате добавления Параметр «победители» означает, что конкурс закрыт. Необходимо предусмотреть соответствующую функцию для конкурса – отключение голосования и вывод фото победителя на место главного фото Описание страницы На странице остаются: - верхнее меню - подвал В центре (под меню): -имиджевый фото-баннер горизонтальный (вид хобби, группа материалов, иллюстрация к последнему конкурсу, фото поделки последнего победителя) - карточки с закладками для сортировки списка - виды хобби (открывается поле ниже вкладок с ссылками для дальнейшей сортировки списка конкурсов) - флористика


список должен иметь возможность ручного редактирования: добавления новых видов хобби и удаления старых (ненужных), переименования

- новые (открывается список активных конкурсов) - материалы (открывается поле ниже вкладок с ссылками для дальнейшей

сортировки списка) - декоративные сыпучие материалы - декоративные украшения - натуральные декоративные материалы

список должен иметь возможность ручного редактирования: добавления новых категорий и удаления старых (ненужных), переименования

- победители (Список «победители» выстраивается среди всех закрытых конкурсов на основании даты закрытия: от последнего закрытого к первому закрытому) Содержание блока в списке: - имиджевое фото – афиша конкурса или фото поделки победителя (слева) - название конкурса (вверху в центре) - стрелочка и надпись «развернуть» (вверху справа) - начальный текст условий конкурса или(справа внизу)

21


Данный блок появляется после нажатия на одну из стрелок и надписью «развернуть» в списке блоков. Раскрываясь, блок двигает нижние блоки вниз. Закрываясь (нажатие на ту же стрелку), блок поднимает нижние блоки обратно наверх. При раскрытии и закрытии появляется и убирается только часть ниже фото и краткого текста (выделена цветом) Пример движения: http://www.forum3.ru/ (меню сбоку, только у нас будут так двигаться большие блоки в центре)

- Афиша конкурса - Или последнее загруженное фото - или фото поделки победителя - имя (псевдоним) участника (зарегистрированного)

Название конкурса V Свернуть


Да V 12 Форма голосования (для зарегистрированных) Если конкурс завершён – голосовать нельзя

Основной текст конкурса -шаги как сделать поделку - или пресс-релиз по итогам конкурса


Комментировать весь конкурс (для зарегистрированных)

- Галерея-слайдер (Фото поделок участников конкурса) нажимая на фото, оно открывается в верхнем левом блоке (внизу под фото появляется имя участника) И появляется возможность оценить фото (участника)


Участвовать (для зарегистрированных) Если конкурс завершён – ссылка не активна

На странице остаются: - верхнее меню - подвал - слева - афиша или фото последней загруженной поделки - имя (псевдоним) участника (внизу под фото)

- «Да» - квадрат с полупрозрачной «галочкой». Ниже под фото. Нажимая, «галочка» красится в красный цвет и рядом появляется количество проголосовавших за участника (активно для зарегистрированных пользователей).


22

Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и появляется возможность голосовать. За себя пользователь голосовать не может. За другие работы пользователь может голосовать по одному разу за каждую работу.

- «поделиться» (конкурсом) ниже слева под «голосовать» – иконки соцсетей в столбик с ссылками на формы поделиться соцсетей (facebook, vkontakte, odnoklassinki, google+, twitter)

- комментировать (конкурс) -Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и открывается окно-список (поверх страницы конкурса) с комментариями и полем для комментирования. -Зарегистрированный пользователь нажимает на ссылку «комментировать» и поверх страницы «вылетает» окно со списком комментариев и формой для комментария внизу (список описан ниже). Комментарий сразу опубликуется без возможности отредактировать. Администратор имеет право удалить или отредактировать комментарии, или заблокировать пользователя. - справа – название конкурса (вверху по центру) - стрелочка и надпись «свернуть» (справа вверху)

- блок с начальным - блок с основным текстом (условия конкурса: шаги как сделать

поделку, или пресс-релиз по итогам конкурса

- ниже под текстом - галерея-слайдер с фото участников конкурса. Нажимая на фото, оноо открывается в верхнем левом блоке (с возможностью увеличить). И появляется возможность оценить фото участника (для зарегистрированных) Если конкурс завершён – оценить нельзя, только посмотреть фото.

- ниже под галереей - два блока -

- список материалов с ссылками на списки в каталоге (блок слева)

- Участвовать Если жмёт зарегистрированный – «вылетает» окно с формой «загрузки» (форма описана ниже). После введения всех необходимых данных и загрузки фото форма сворачивается и фото с именем появляется в форме как последнее загруженное. Если жмёт незарегистрированный – «вылетает» окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль, форма сворачивается и появляется возможность загрузить фото. Если конкурс завершён – ссылка не активна)

23

2.4.2. ОКНО ЗАГРУЗКИ ФОТО ДЛЯ КОНКУРСА

ИМЯ ПОЛЬЗОВАТЕЛЯ

Загрузить фото (выбор папки для загрузки)

Участвовать (отправка данных)

Администрация сайта имеет право удалить фото, если оно не соответствует условиям конкурса

Окно «вылетает» поверх сайта после нажатия ссылки «участвовать» в блоке с идеями (если пользователь зарегистрирован и вошёл на сайт или после регистрации)

таблица Заголовок (имя зарегистрированного пользователя) Ниже графы:

- Загрузить фото (выбор папки для загрузки) Предупреждающая надпись: Администратор имеет право удалить фото, если оно не соответствует условиям конкурса

- Участвовать (отправка данных) После нажатия Нажимая кнопку, окно закрывается.

Если загрузка прошла успешно, на странице «конкурса» обновляется главное фото слева вверху на загруженное. Внизу под фото обновляется имя на имя пользователя только что загрузившего фото. Если загрузка не прошла, страница остаётся без изменений. А поверх сайта высвечивается надпись: «ошибка загрузки» Загружать можно фото до 5 мб в формате JPG. При загрузке фото ужимается до небольшого веса и размера (например 500-600 кб с сохранением пропорций)

24

2.5. СТРАНИЦА «ПОДЕЛИСЬ ИДЕЕЙ»

(по ссылке из меню на главной странице – верхняя строка –кнопка «поделись идеей») Фото последней загруженной поделки (с возможностью увеличить) - имя (псевдоним) участника (зарегистрированного)

Название последней загруженной идеи V Свернуть

Условия постоянного конкурса «поделись идеей»


Описание последней поделки (шаги, как это сделано)

Поделиться (страницей) в соцсетях

Комментировать страницу (для зарегистрированных)

- Галерея-слайдер (Фото поделок участников) нажимая на фото, оно открывается в верхнем левом блоке (внизу под фото появляется имя участника, , описание идеи, материалы. И появляется возможность оценить идею

Материалы: - список материалов для идеи

- Поделись идеей (для зарегистрированных)

На странице остаются: - верхнее меню - подвал - слева - фото последней загруженной поделки - имя (псевдоним) участника (внизу под фото)

- Да» - квадрат с полупрозрачной «галочкой». Ниже под фото. Нажимая, «галочка» красится в красный цвет и рядом появляется количество проголосовавших за идею (активно для зарегистрированных пользователей). Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль (высылаемый на e-mail) форма сворачивается и появляется возможность голосовать.

- «поделиться» ниже слева под «голосовать» – иконки соцсетей в столбик с ссылками на формы поделиться соцсетей (facebook, vkontakte,

25

odnoklassinki, google+, twitter) - комментировать

-Если жмёт незарегистрированный – вылетает окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и пароль (высылаемый на e-mail) форма сворачивается и открывается список (поверх страницы «поделись идеей») с комментариями и полем для комментирования. -Зарегистрированный пользователь нажимает на ссылку «комментировать» и поверх страницы «вылетает» текстовая страница со списком комментариев и формой для комментария внизу (список описан ниже). Комментарий сразу опубликуется без возможности отредактировать. Администратор имеет право удалить или отредактировать комментарии, или заблокировать пользователя. - справа – название последней идеи (вверху по центру) - стрелочка и надпись «свернуть» (справа вверху)

- блок с условиями загрузки - текст с описание шагов последней поделки

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

- два блока - ниже под текстом - список материалов

- поделись идеей Если жмёт зарегистрированный – «вылетает» окно с формой «загрузки» (форма описана ниже). После введения всех необходимых данных и загрузки фото форма сворачивается и фото с именем появляется в форме как последнее загруженное. Если жмёт незарегистрированный – «вылетает» окно с формой «регистрации» (форма описана ниже). Введя имя (псевдоним), e-mail и код регистрации (высылаемый на e-mail) форма сворачивается и появляется возможность загрузить фото. Статистики по идеям (кто больше получил голосов) пока не будет. Листая галерею и открывая идеи, мы видим количество проголосовавших. Всё. Возможно в дальнейшем придумаем какую-то статистику, но это уже доработки по другому ТЗ и договору

26

2.5.1. ОКНО ЗАГРУЗКИ ИДЕИ

ИМЯ ПОЛЬЗОВАТЕЛЯ

Придумай название композиции!

Опиши, какие материалы SevenDeco использовались?

Опиши пошагово, как создать композицию? Шаг 1 Шаг 2 Шаг 3

Загрузить фото композиции (выбор папки для загрузки)

Поделись идеей (отправка данных)

Администрация сайта имеет право удалить идею, если она не соответствует условиям конкурса

Форма «вылетает» поверх сайта после нажатия ссылки «участвовать» в блоке с идеями (если пользователь зарегистрирован и вошёл на сайт или после регистрации)

таблица Заголовок (имя зарегистрированного пользователя) Ниже графы слева:

- Придумай название композиции! - Опиши, какие материалы SevenDeco использовались? - Опиши пошагово, как создать композицию! - Загрузить фото композиции (выбор папки для загрузки) - Поделись идеей (отправка данных)

Справа - графы для заполнения Предупреждающая надпись: Администрация сайта имеет право удалить идею, если она не соответствует

условиям конкурса

После нажатия Нажимая кнопку, окно закрывается.

Если загрузка прошла успешно, на странице «идеи» обновляется главное фото, графы описание и материалы. Внизу под фото обновляется имя на имя пользователя только что загрузившего фото. Если загрузка не прошла, страница остаётся без изменений. А поверх сайта высвечивается надпись: «ошибка загрузки» Загружать можно фото до 5 мб в формате JPG. При загрузке фото ужимается до небольшого веса (например 500-600 кб с сохранением размера)

27

2.6. СТРАНИЦА КАТАЛОГА

(по ссылке «материалы» в нижней строке меню из выпадающего списка подкатегорий)

декоративные украшения

Бабочки | Бусы | Ветки, цветы, листья | Кристаллы, марблс | Насекомые, земноводные | Перья | Птички | Пчелы | Фрукты, овощи

Читать подробнее (ссылка на список энциклопедии, отсортированный по тематике категории) Где используют (ссылка на список мастер-классов, отсортированный по тематике категории)

Название Цвет Штрих код

Фото-миниатюра с возможностью увеличить изображение

Бусы декоративные, кристаллы 30 шт

Красный 00000000001


Бусы декоративные кубы, 30 шт

Синий 00000000002


Бусы декоративные шары, 20 шт

зелёный 00000000003

Остаются: - верхнее меню - подвал В центре: - таблица-список Верхняя строка – категория товаров Ниже область с сортировкой по подкатегориям Ниже список с колонками

- фото-миниатюра с возможностью увеличить - полное название товара - цвет - штрих-код

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

28

- штрих-код - Обновление базы раз в день ночью Структура каталога Категории и подкатегории - декоративные сыпучие материалы Грунт декоративный

Песок декоративный - декоративные украшения

Бабочки Бусы Ветки, цветы, листья Кристаллы, марблс Насекомые, земноводные Перья Птички Пчелы Фрукты, овощи

- натуральные декоративные материалы Бамбук Ветки Листья скелетированные Мох Орехи, кокосы, шишки Попурри Ракушки Шары

- инструменты, химические средства Клей Лента флористическая Ножницы Секаторы Термопистолет клеевой

29

2.7. СТРАНИЦА «SevenDeco»

(по ссылке «SevenDeco» в нижней строке меню)

Всё, что нужно знать о SevenDeco вопросах и ответах

Что такое SevenDeco?

Кратко о бренде

Что входит в SevenDeco?

Категории товаров с ссылками на каталог

Для кого SevenDeco

Характеристика целевой аудитории с ссылкой на конкурсы

Где применяют SevenDeco?

Текст, ссылка на мастер -классы

Как продают SevenDeco?

Коммерческое предложение и партнёрские программы + ссылка на PDF материалы по бренду

Кто продаёт SevenDeco?

Описание магазинов и ссылка на города из раздела «где купить»

Остаются: - верхнее меню - подвал В центре: - таблица Заголовок Всё, что нужно знать о SevenDeco в вопросах и ответах

Ниже Слева вопросы о бренде

Что такое SevenDeco? Что входит в SevenDeco? Для кого SevenDeco Где применяют SevenDeco? Как продают SevenDeco? Кто продаёт SevenDeco?

Справа – ответы с ссылка на материалы сайты и материалы для загрузки Кратко о бренде

Категории товаров с ссылками на каталог Характеристика целевой аудитории с ссылкой на конкурсы Текст, ссылка на мастер –классы Коммерческое предложение и партнёрские программы + ссылка

на PDF материалы по бренду Описание магазинов и ссылка на города из раздела «где купить»

Таблица должна иметь возможность редактирования через 1C Битрикс, быстрого добавления новых вопросов и ответов, редактирования старых

30

2.8. СТРАНИЦА «ГДЕ КУПИТЬ»

(по ссылке «где купить» в нижней строке меню»)

попадаем на страницу со списком всех магазинов по городам.

Остаются: - верхнее меню - подвал В центре: - таблица Заголовок Название города Ниже Слева: Название или лого магазина (сети) Справа: адрес (а) Таблица должна иметь возможность редактирования через 1C Битрикс, быстрого добавления новых городов и адресов, редактирования старых

Москва | Новосибирск | Санкт-Петербург

Название магазина (сети) или ЛОГО

Адрес(а), телефон, ссылка на сайт

Название магазина (сети) или ЛОГО

Адрес(а), телефон, ссылка на сайт

31

2.9. ОКНО РЕГИСТРАЦИИ

(по ссылке «войти /регистрация» в верхней строке меню и по ссылкам из блоков с мастер классами, статьями энциклопедии, конкурсами и «поделись идеей»)

Вкладки

Войти Зарегистрироваться

Электронный адрес

Пароль напомнить пароль

ИМЯ

Электронный адрес

Пароль

Пароль ещё раз

Зарегистрироваться

Окно «вылетает» (открывается) поверх конкретных страниц-блоков: - «Мастер-класс» - «Статья энциклопедии» - «Конкурс» - «Поделись идеей» При нажатии на «голосовать», «комментировать», «участвовать», «поделись идеей» или по ссылке из верхнего меню Таблица Вкладка Войти: Графы слева Электронный адрес Пароль Графы справа Поля для заполнения Вкладка Зарегистрироваться:

Графы слева: - ИМЯ - Электронный адрес - Пароль - Пароль ещё раз - Зарегистрироваться Нажимая, окно сворачивается

На почте приходит автоматическое письмо: Благодарим за регистрацию

32

Графы справа: Поля для заполнения

33

2.10. ОКНО СО СПИСКОМ КОММЕНТАРИЕВ (вылетающее окно после нажатия «комментировать» в блоках с мастер-классами, статьями энциклопедии, конкурсов и «поделись идеей»)

Имя пользователя Комментарий 1



Комментировать

отправить

Список открывается поверх конкретных страниц-блоков: - «Мастер-класс» - «Статья энциклопедии» - «Конкурс» - «Поделись идеей» Сверху Блоки с Именем пользователей и текстами комментариев. Длина списка определяется количеством комментариев. Внизу форма для комментария. Комментарий сразу опубликуется без возможности отредактировать. И кнопка - отправить Администратор имеет право удалить или отредактировать комментарии, или заблокировать пользователя.

34

2.11. КАБИНЕТ АДМИНИСТРАТОРА

Реализован на платформе 1С битрикс.

- редактирование и добавление информации на сайт

-фото главное -текстовый блок -фотогалерея -комментарии пользователей -удаление работ пользователей -блокировка пользователей

Личного кабинета пользователя не предусмотрено Для решения проблем пользователей будет окно «обратной связи» по ссылке в подвале

Имя пользователя

Вопрос администратору

отправить

ТЗ на разработку сайта

Marketing

Transcript of ТЗ на разработку сайта