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




Скачать 136.08 Kb.
НазваниеТехническое задание на разработку сайта. Постановка задачи
Дата публикации13.05.2014
Размер136.08 Kb.
ТипТехническое задание
skachate.ru > Информатика > Техническое задание
yoga-yuga.ru

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

Постановка задачи:

По предоставленным макетам дизайна главной и внутренних страниц сверстать шаблоны страниц сайта. Разработать движок и закрытую административную панель для управления и наполнения разделов. Ниже представлена подробная информация по структуре каждой из страниц.

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

Страница содержит следующие элементы:

  • Шапка

    • логотип с текстом <<Академия “Йога Юга”>> с ссылкой на главную страницу;

    • форма для заказа обратного звонка – текст “Есть вопросы? Звоните!”, номер телефона и кнопка “оставить номер”;

    • блок со значками “домой” (ссылка на главную страницу), “обратная связь” (ссылка на отправку письма по адресу feedback@yoga-yuga.ru).

  • Горизонтальное меню с разделами:

  • “Об академии” с подменю “Персонал” и “Наши инструкторы”;

  • “Курсы и семинары” с подменю “Базовая ступень”, “Продвинутая ступень” и “Учительская ступень”;

  • “Расписание”;

  • “Услуги”;

  • “Фото и видео”;

  • “Контакты”.

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

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

  • Заголовок «Ближайшие события» под ним заголовок последнего или того, который выберет менеджер в админ-панели, ее краткий текст. Под текстом ссылка “Подробнее”, при клике на нее открывается страница собятия;

  • Справа, или ниже - зависит от решения дизайнера, от блока с последним событием – небольшой блок с остальными событиями в кратком виде. Блок раскрывается вниз, чтобы можно было увидеть остальные события.

  • Подвал:

    • Полоска, растянутая по всей ширине страницы с ссылкой “YogaYuga – начни сегодня!”;

    • Текст копирайта – <<© 2014, Академия “Йога-Юга”, Краснодарский край, Туапсинский район, п. Южный. >>;

Значки с ссылками на страницы в социальных сетях “Вконтакте”, “Facebook” и “Одноклассники”.

Форма “Заказать звонок”.

При клике на кнопку “Заказать звонок” открывается всплывающее окошко, где размещена форма со следующими элементами:

  • поле “Имя”

  • поле “Номер телефона”

  • поле “Эл. почта”

  • поле “Ваш вопрос:”

  • кнопка “Отправить”

Все поля кроме «Ваш вопрос» и «Эл. Почта» - необязательны к заполнению.

Перед отправкой формы поля должны валидироваться. Т.к. посещать сайт могут жители из стран СНГ желательно поле “Номер телефона” разбить на несколько полей для ввода кода страны, оператора и остальной части номера.

После отправки формы данные записываются в базу данных, а на адрес callback@yoga-yuga.ru, а также смс на телефон +79002560219, отсылаются уведомления о новом заказе обратного звонка, с контактной информацией посетителя сайта.

^ Блок со слайдером.

В левой части блока необходимо разместить слайдер (использовать один из jQuery плагинов, с кроссбраузерной поддержкой – обязательно все основные десктопные браузеры и мобильный Safari на iOS). У слайдера должна быть навигация для листания назад\вперед и настройка анимации переходов.

Фотографии для слайдера будут предоставлены позже, на этапе разработки поставить пару заглушек для демонстрации.

Блок с событиями.

У каждого события имеются следующие сущности:

  • заголовок

  • дата события

  • текст с изображениями, внешними ссылками и т.д.

  • краткий анонс (не более 120 символов)

В активной части страницы слева выводится последняя опубликованная новость целиком. Справа от нее (или ниже – будет окончательно решено после разработки дизайна) разместить колонку с еще четыре последними новостями. Для каждой выводить дату события, заголовок и краткий анонс. Под ними разместить ссылку “Все события” на страницу с событиями.

Страница “YogaYuga – начни сегодня!”.

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

Редактируется через админ-панель (модуль “Страницы сайта”).

Страница “Об академии”.

На этой странице размещается текст об академии и том, какие услуги она предлагает с ссылками на внутренние страницы.

Редактируется через админ-панель (модуль “Страницы сайта”).

Страница “Персонал”.

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

Редактируется через админ-панель (модуль “Сотрудники”).

Страница “Наши инструкторы”.

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

Редактируется через админ-панель (модуль “Сотрудники”).

Страница “Курсы”.

На этой странице размещаются три блока “Базовая ступень”, “Продвинутая ступень” и “Для инструкторов”. В каждом блоке выводится название курса, краткая информация о нем, и ссылка “подробнее”. При клике на ней раскрывается спрятанная под кат подробная информация.

Редактируется через админ-панель (модуль “Страницы сайта”).

Страница “Расписание”.

Эта страница открывается при переходе по ссылке “Расписание” в блоке с новостями на главной странице. Здесь размещается список всех событий. События сортируются по дате, начиная с ближайшей. По-умолчанию отображать 10 событий, остальные постепенно подгружать при прокрутке страницы.

В каждом блоке выводится следующая информация:

  • заголовок

  • дата события

  • краткий текст с небольшим фото, при клике по тексту происходит переход на страницу события

Редактируется через админ-панель (модуль “Расписание”).

Страница события.

На этой странице размещается подробная информация по конкретному событию:

  • заголовок

  • дата события

  • текст (может содержать изображения, ссылки на внешние ресурсы, видео c vimeo, youtube, vk и т.д.

  • Кнопка «Зарегистрироваться на курс», которая открывает ниже форму со следующими полями:



  • Фамилия

  • Имя

  • Отчество

  • Номер телефона

  • Адрес эл. почты

  • Выпадающие списки страна, регион и город; если нужного города нет в списке – выводить текстовое поля для ввода названия города.

Редактируется через админ-панель (модуль “Расписание”).
Страница “Услуги”.

На этой странице размещается описание услуг, которые мы предлагаем.

По аналогии с блоками на странице “Курсы” отображается сначала краткие описания с возможностью раскрыть подробную информацию по каждой услуге.

Редактируется через админ-панель (модуль “Страницы сайта”).

Страница “Фото и видео”.

На этой странице размещаются альбомы, сгруппированные по разделам (блокам) “Фото” и “Видео”. Каждый альбом отображается в виде миниатюр. Фотография для миниатюрки задается в админ-панели при создании или редактировании альбома.

^ Для альбомов с фотографиями:

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

^ Для альбомов с видеороликами:

При клике на миниатюрку открывается страница с миниатюрками видеороликов (в каждой из них отображается кадр, который был загружен при создании\редактировании альбома через админ-панель). При нажатии на одну из них в всплывающем окне открывается плеер (Youtube или Vimeo). Для отображения плеера используется специальный код, который был указан при добавлении видео в соответствующий альбом. Видео начинает проигрываться сразу при загрузке плеера. В шапке окна выводится надпись к видео и значок для закрытия окна.

Все альбомы создаются и редактируются через админ-панель (модуль “Фото и видео”).

Страница “Контакты”.

На этой странице размещается схема проезда (из яндекс или гугл), контактная информация и возможно расписание электричек с tutu.ru

Редактируется через админ-панель (модуль “Страницы сайта”).

^ Описание административной части сайта.

Админ-панель представляет собой закрытый раздел сайта открывающийся по адресу:

http://yoga-yuga.ru/admin

Авторизация

При входе в админ-панель открывается форма авторизации со следующими элементами:

  • Email

  • Пароль

  • Кнопка Вход

  • Ссылка “Забыли пароль?”

При переходе по ссылке “Забыли пароль?” пользователь вводит email, который он ранее использовал для входа. После этого нажимает “Отправить”, на указанный адрес приходит письмо с ссылкой на страницу, где он вводит новый пароль, подтверждает его и нажимает “Сохранить”.

После этого открывается форма авторизации. Поля формы должны валидироваться как на клиентской части, так и на серверной.

^ Описание общего интерфейса

Интерфейс админ-панели состоит из:

  • верхнего горизонтального меню

  • рабочей области, где отображается интерфейс для управления тем или иным модулем (подробнее - ниже);

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

В верхнем горизонтальном меню содержит следующие разделы:

  • Администрирование (доступен только администратору);

  • Настройки меню;

Также в правом углу разместить значок для выхода с админ-панели. При клике на нем разлогинивать пользователя и перенаправлять на страницу с формой входа.

Администрирование

В этом разделе находятся все административные настройки сайта, которые не доступны обычным менеджерам. Настройки необходимо разнести по двум вкладкам – “Общие настройки” и “Менеджеры”.

На вкладке “Общие настройки” разместить следующие настройки, сгруппированные по блокам:

  • Блок “Обратный звонок” c полями для указания номера телефона и адреса эл. почты, на которые будут приходить уведомление о заказе обратного звонка.

  • Блок “Регистрация на курс” с полем для указания адреса эл. почты, на который будет приходить уведомление о новой регистрации.

  • Чекбокс “Включить заглушку <<Технические работы на сайте>>”.

  • Кнопку “Сохранить”.

При нажатии кнопки “Сохранить” настройки записывать в БД.

На вкладке “Менеджеры” в таблице выводить данные менеджеров, имеющих доступ к админ-панели. Данная таблица состоит из следующих колонок:

  • Фамилия, имя

  • Email

  • Удалить

В колонке “Удалить” отображать значки для удаления учетных данных менеджера.

Над таблицей разместить кнопку “Добавить менеджера”, при нажатии на которую открывать страницу с формой, содержащей следующие поля:

  • Фамилия

  • Имя

  • Email

  • Кнопка “Создать”

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

<<

Здравствуйте.

Вам разрешен доступ к админ-панели сайта yoga-yoga.ru по адресу:

http://yoga-yuga.ru/admin/

Логин: <адрес эл. почты>

Пароль Вы сможете задать при первом входе в админ-панель.

>>

^ Настройки меню

В этом разделе можно создавать, изменять, управлять видимостью, удалять разделы и подразделы меню сайта.

При открытии выводить таблицу со списком разделов меню. Название разделов разместить в редактируемых полях для возможности быстрого редактирования. Если раздел содержит подразделы слева от названия отображать значок для раскрытия списка его подразделов. Над таблицей и в каждом раскрытом блоке со списком подразделов отображать кнопку “Добавить” для создания нового пункта меню. Справа от названий разделов\подразделов отображать значок с карандашом, для перехода к форме редактирования пункта меню.

При нажатии кнопки “Добавить” или при клике по значку с карандашом открывать страницу с формой, содержащей следующие элементы:

  • Поле “Название”;

  • Выпадающий список “Раздел”, в котором вывести разделы меню верхнего уровня. Если требуется создать новый раздел верхнего уровня – выбор из списка не выполняется.

  • Выпадающий список “Модуль”, в которой вывести все доступные модули сайта, например, “Страницы сайты”, “Расписание”, “Фото и видео” и т.д.

  • Кнопка “Сохранить”.

Если пункт меню был открыт для редактирования - поля формы заполнять соответствующими данными из БД. При нажатии на кнопку “Сохранить” данные проверяются на корректность и записываются в соответствующую таблицу БД.

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

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

Ниже идет описание административного интерфейса каждого модуля сайта.

Модуль “Страницы сайта”

В данном разделе выводить таблицу со следующими колонками:

  • Название страницы

  • Дата создания

  • Действие (редактировать \ удалить)

Над таблицей разместить кнопку “Создать страницу”.

При нажатии кнопки “Создать страницу” или ссылке “изменить” в таблице - открывать страницу, на которой разместить форму со следующими элементами:

  • Поле “Название страницы”

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

  • Кнопка “Сохранить”.

При редактировании ранее созданной страницы форма заполняется автоматически данными из БД. При нажатии кнопки “Сохранить” данные записываются в соответствующую таблицу БД.

Каждая страница должна открываться по прямой ссылке вида:

http://yoga-yuga/pages/<название_страницы>

Модуль “Расписание”

В данном разделе выводить список блоков по каждому событию. В блоке указывается следующая информация:

  • Дата события

  • Заголовок

  • Краткий текст события

  • Ссылка для перехода на странице редактирования данного события

  • Ссылка “Сделать главным” – при клике на нее данное событие публикуется на главной странице сайта

Над блоками с событиями разместить кнопку “Создать новое событие”. Рядом с ней форму с полем для указания числа отображаемых событий на главной странице в блоке “Ближайшие события” и кнопкой “Сохранить”.

При нажатии кнопки “Создать новое событие” (аналогично, при клике по ссылке “Редактировать” в блоке события) открывать страницу с формой, в которой разместить следующие элементы:

  • Поле “Заголовок”

  • Виджет для выбора даты события

  • Визуальный редактор для вставки краткого анонса события.

  • Визуальный редактор для вставки полного текста события.

  • Кнопка “Сохранить”.

При редактировании ранее созданного события форма заполняется автоматически данными из БД. При нажатии кнопки “Сохранить” данные записываются в соответствующую таблицу БД.

^ Модуль “Сотрудники”

В данном разделе выводить ссылки “Персонал” и “Инструкторы”.

В зависимости от того, какая ссылка была нажата, ниже выводить блоки, содержащие следующую информацию:

  • Фотография сотрудника

  • Фамилия, имя

  • Краткая информация о сотруднике

  • Ссылка “Редактировать”

Над блоками разместить кнопку “Добавить сотрудника”.

При нажатии кнопки “Добавить сотрудника” или переходе по ссылке “Редактировать” в блоке, открывать страницу с формой, содержащей следующие элементы:

  • Поле “Фамилия”

  • Поле “Имя”

  • Поле “Фотография” для загрузки фотографии

  • Визуальный редактор для ввода краткой информации о сотруднике

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

  • Кнопка “Сохранить”

При редактировании данных по ранее добавленному сотруднику форма заполняется автоматически данными из БД. При нажатии кнопки “Сохранить” данные записываются в соответствующую таблицу БД с указанием группы в которую входит сотрудник – “персонал” или “инструкторы”.

Необходимо также реализовать возможность изменения порядка вывода блоков на сайте.

^ Модуль “Фото и видео”

Аналогично клиентской части раздела сначала выводить миниаюрки альбомов, сгруппированные по разделам “Фото” и “Видео”.

Над списком миниатюрок в каждой из группы разместить кнопку “Создать альбом”, а справа от каждой миниатюрой значок в виде карандаша. При нажатии на кнопку “Создать кнопку” или значок открыть страницу для создания\редактирования альбома.

^ Для фотоальбома:

На странице расположить форму со следующими элементами:

  • Название альбома;

  • Кнопка “Загрузить фотографии”.

При нажатии этой кнопки открывается диалоговое окно для выбора одной или нескольких фотографий. После выбора нужных файлов прогресс загрузки файлов на сервер отображается в виде индикатора с процентом. При загрузке на сервере сохраняются три версии каждой фотографии – миниатюрка (размер по высоте – не более 90px, вес – 15-20kb), сжатая копия (размер 1200*800, вес ~ 150-200kb) и оригинальный файл. На сжатую копию наносить прозрачный watermark с текстом “yoga-yuga.ru”.

Далее (если альбом ранее уже был заполнен) выводить загруженные фотографии в таблице с тремя колонками – “О”, “Фотография” и “Надпись”.

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

Во второй колонке разместить миниатюрки загруженных фотографий. При клике открывать в всплывающем окне большую фотографию.

В третьей колонке разместить поля для ввода надписей для каждой из фотографий.

Под таблицей разместить кнопку “Сохранить”, при нажатии проверяются данные в полях. Если все заполнено верно - данные сохраняются в БД.

^ Для видеоальбома:

На странице расположить форму со следующими элементами:

  • Название альбома;

  • Блок “Добавить видеоролик” с полями “Код” (для вставки кода видеоролика с Youtube или Vimeo), “Главный кадр” (для загрузки миниатюрки кадра, которая будет отображаться на странице с альбомами на сайте) и кнопкой “Добавить”.

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

Далее (если альбом ранее уже был заполнен) выводить добавленные видеоролики в таблице с тремя колонками – “О”, “Видеоролик” и “Надпись”.

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

Во второй колонке разместить миниатюрки главного кадра каждого видео. При клике открывать в всплывающем окне плеер для проигрывания соответствующего видеоролика.

В третьей колонке разместить поля для ввода надписей для каждого видеоролика.

Похожие:

Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку сайта Постановка задачи
Необходимо разработать веб-сайт «Coachim». Веб-сайт предназначен для продажи и проведения веб-сессий с коучами
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку Сайта-визитки компании
Общие сведения Данный документ является техническим заданием на разработку и публикацию сайта
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку сайта интернет-магазина цветов
Разработка концепции сайта, информационное проектирование, оформление Технического задания
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание сайта
Сайта. В техническом задании описаны назначение Сайта, цели, задачи и основные этапы Проекта, требования к функционалу, структуре,...
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку сайта
Широкий ассортимент товаров, известные бренды, высокое качество продукции (замороженных овощей,фруктов,полуфабрикатов)
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку сайта Евразийского портала по управлению...
Цель создания веб-сайта содействовать установлению связей, проведению дискуссий и созданию экспертной образовательной сети для специалистов...
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку интернет-магазина мебели
Браузеры для просмотра сайта. Основные браузеры на которых будет просматриваться сайт и на которых будет производиться тестирование...
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание на разработку веб-сайта I. Информация о должности
«Зеленого роста», с предоставлением детальной информации и инструментов для повышения энергоэффективности экономик и перехода у низкоуглеродному...
Техническое задание на разработку сайта. Постановка задачи iconКоммерческое предложение на разработку сайта
Центр поддержки предпринимательства чуп по оказанию услуг «Нью-Тон» предлагает Вам разработку сайта Вашей организации
Техническое задание на разработку сайта. Постановка задачи iconТехническое задание Описание разделов и структурная схема сайта Структура сайта
Индивидуальный менеджер проекта (представление интересов компании на территории рф, работа от лица компании по согласованию строительства...

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2014
контакты
skachate.ru
Главная страница