Техническое задание на реализацию портала о медитации на Drupal 7




Дата канвертавання19.04.2016
Памер176.62 Kb.

Техническое задание на реализацию портала о медитации на Drupal 7.




Предисловие

Сайт http://www.osho.ru это сайт Московского Центра Медитаций Ошо Ветры – посвящен прежде всего медитации, жизни и наследию Ошо – просветленного мастера из Индии, деятельности московского центра Ошо и существующей при нем коммуны близких по духу людей,.


Редизайн сайта было решено совместить также с реорганизацией его структуры и контента, улучшить юзабилити а также упростить навигацию, но по возможности не в ущерб его дизайну. По итогам реструктуризации старый сайт превратился в портал из пяти разделов пять разделов, реализация всех 5 разделов на Drupal 7.
За основу макета темы для сайта берется наш эскиз (рисунок glavnaya_oshoru) (есть PSD но выполненное дизайнером полиграфистом).
Основные задачи :

1)Темизация и верстка (полностью валидная и кроссбраузерная) по psd макету темы для Drupal 7

2)Помощь в разработке функционала (настройка вывода отдельных страниц и блоков, разработка модулей по необходимости)
План работы:


  1. Рассмотрение и обсуждение ТЗ и psd эскиза главой страницы

  2. Распределение задач

  3. Выбор сервиса для контроля выполненных работ и оформления в нем проекта

  4. Вычисление необходимого времени и утверждение этапов и сроков работы

  5. Утверждение плана оплаты

Примеры понравившихся дизайнов:


Рисованные сайты:



http://spring.tnvacation.com

http://undergrad.biola.edu

http://ndesign-studio.com/

http://www.thepixel.com/blog/

http://boompa.ca/

http://www.toucouleur.fr/ хорошенькие тизеры топиков под шапкой и их расположение

http://webdesignerwall.com/tutorials/photoshop-hand-drawn-design

http://www.templatemonster.com/flash-templates/14172.html - прикольная идея с кошкой

http://www.pachamama.com
Понравились отдельные элементы:
http://www.bestcarpets.ru – входы в каталог виде иконок, общая организация контента

http://днс-доверие.рф - слайдер на главной странице

http://www.freemeditation.com/ - нравиться юзабилити сайта, организация контентной части, а также модули слайд-шоу и аудио-видео
Наши самостоятельные попытки поменять дизайн:



http://www.ksebe.ru – (логин и пароль для доступа в разделе «дополнительно»)
Основные ресурсы сети интернет из мира Ошо (иностранные):

http://www.osho.com/

http://oshonews.com/

humaniversity.com

http://www.pachamama.com

http://www.osho-patagonia.com/

http://www.osho-mevlana-commune.nl/

http://www.oshomiasto.it/index.php?option=com_content&view=article&id=229&Itemid=20&lang=en

http://www.osholeela.co.uk/

http://www.oshorisk.dk/
Основные ресурсы сети интернет из мира Ошо (русские):



http://oshogid.ru/

http://oshoworld.ru/

http://oshogroups.ru/

http://www.osho-odessa.com/www/


Целевая аудитория и задачи портала

Целевая аудитория - это люди, ищущие смысл жизни, находящиеся в духовном поиске, преимущественно женщины. Перед порталом стоят следующие основные задачи:




  1. Информационная (на портале будет размещено максимум информации об Ошо и мире саньясы) – раздел Ошо и Ошо центр, наша коммуна.

  2. Реклама семинаров и групп, которые поводит Ошо центр «Ветры» - раздел Ошо Центр

  3. Общение – одним из разделов будет социальная сеть - сообщество саньясинов Ошо – раздел «Клуб друзей Ошо»

  4. Размещение рекламы различных медитационных групп и семинаров (раздел «Клуб друзей Ошо» - доска объявлений)


Требования к макету


  1. Верстка макета под CMS Drupal 7




  1. Дизайн и верстка должны быть полностью оптимизированы под SEO




  1. Доступность при выключенных(загружающихся) картинках




  1. Наличие Win/Mac/Linux-аналогов шрифтов




  1. Отсутствие багов при увеличенном шрифте

  2. Работоспособность при выключенном Flash

  3. Работоспособность при выключенном JavaScript

  4. Правильная структура заголовков (H1,H2,… и т.д. и TITLE)

  5. Корректная работа при вбивании реального текста, надёжность вёрстки

  6. Сайт должен нормально работать в IE7+, FF3+, Opera9+, Safari4+, Chrome последней версии

  7. Если используете CSS хаки, комментируйте, что это и для какого браузера, а лучше используйте css_browser_selector.js.

  8. Названия классов и id должны по смыслу соответствовать применению
    например, header, menu, footer, news

  9. Просьба разделять основные html блоки комментариями. Примерно так:



  10. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.

  11. Все что можно сделать без Javascript, делать без него.

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

/* ___________1. Сброс CSS____________________*/
/* ___________2. Типовые элементы____________*/
/* _______________2.1. Залоговки______________*/
/* _______________2.2. Ссылки________________*/
/* _______________2.3. Элементы форм_________*/
/*___________3. HEADER (Шапка сайта) __________*/
/*___________4. FOOTER (Подвал )_______________*/
/*___________5. SIDEBAR (Справа)_______________*/


  1. CSS и JS файлы должны быть в той же кодировке, что и макет

  2. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусмотреть, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.

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

  4. Если в макете используются нестандартные шрифты, обязательно оговорить, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)

  5. Обсудить заранее какие JavaScript библиотеки планируется использовать при верстке макета

  6. Если обработка событий делается при нажатии на ссылки, следить за тем, чтобы обработчики событий возвращали false, или же использовать href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх.

  7. Если Javascript кода много — его необходимо выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.




  1. Обязательная оптимизация скорости загрузки сайта




  1. Необходима полная валидация, доступность, использование микроформатов

http://validator.w3.org

http://jigsaw.w3.org/css-validator

http://validator.w3.org/mobile/
Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно.
Для каждого из 5 разделов портала необходимо разработать свою темизацию на основе общего эскиза. При этом многие элементы дизайна остаются общие для всех разделов. Пример - http://otoons.de.
Темизация может быть осуществлена при помощи изменения следующих элементов:

  • Фон страницы, цветовая гамма

  • Отдельные элементы контентной части, такие как цитаты

  • Шрифты заголовков

  • Возможность делать акцент на преобладании определенных картинок в дизайне раздела, например, для раздела Ошо - это его фото, элементы его галереи, его подпись

Примерный перечень разделов, категорий, подкатегорий и страниц, архитектуру сайта смотрите в файле «карта сайта».



ФУНКЦИОНАЛЬНЫЕ БЛОКИ
БЛОКИ МЕНЮ:

  1. Верхнее ссылочное меню над картинками (на каждой странице)

  2. Основное выпадающее меню - выпадающее CSS-меню по разделам (под картинками) (на каждой странице):

  • Ошо

  • Ошо Центр

  • Коммуна

  • Клуб Друзей – социальная сеть

  • Ваш Ангел

  1. Левое дополнительное меню в сайдбаре (меню навигации внутри раздела или категории)


БЛОКИ

  1. Блок книги в сайдбаре (мини обложка, название, пролистывание)

  2. Блок видео – мини проигрыватель

  3. Блок аудио плеера

  4. Блок – список самых интересных статей из определенной категории

  5. Блок последних комментариев

  6. Блок со списком самых интересных категорий

  7. Блок с мини календарем событий с датами (всплывание названия события и его дат при наведении)

  8. Блок вывода «Цитата дня». Для вывода в шаблоне на каждой странице цитаты Ошо из заданного набора. Цитаты меняются в случайном порядке с заданным интервалом времени с возможность принудительного пролистывания

  9. Блок подписаться на рассылку

  10. Блок с баннерами

  11. Блок Поиск по сайту. Поиск производится моментально при вводе ключевого слова в текстовое поле, результаты поиска сортируются и выводятся по степени релевантности

  12. Кнопки: ВКонтакте, Facebook, Twitter - ссылки на наши группы в данных социальных сетях

  13. Блок Pathway, на всех страницах, кроме Главной страницы

  14. В контенте около статей различне ссылки «поделиться»

  15. В футере Счетчики Livinternet и Rambler TOP100


БЛОКИ СОЦИАЛЬНОЙ СЕТИ

  1. Блок логин «Вход в социальную сеть» - может быть видно только одну кнопку «Войти в социальную сеть Ошо», при нажатии на которую будет всплывать окно с формой для ввода логина и пароля:

  • Логин

  • Пароль

  • Войти в социальную сеть

  • Регистрация

  • Забыли пароль

Если человек уже зашел - то кнопка меняется за приветствие и аватар в уменьшенном виде
Сейчас на сайте
Последние блоги

Мероприятия по датам

Знаокмства (поиск пользователей по параметрам)

Подробное описание контента 5 разделов


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

http://dr.osho.ru/


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

Главная страница раздела Ошо – тизеры категорий раздела, обложка, цитата

http://www.osho.ru/osho.html



  1. Биография Ошо (Бхагван Шри Раджниш)

Категория посвящена биографии Ошо - текст, разбитый по периодам.

На главной странице тизеры всех периодов и цитата Ошо.
На странице периода ссылка на все остальные периоды.

Блок фотогалереи ошо и ошо видео




  1. Каталог книг Ошо

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

Блоки с тизерами книг других категорий (например книги о медитации и пр)

Блоки с аудио и видео ошо


  1. Ошо Дзен Таро

Нечто похожее на гадание на картах: колода карт, у каждой есть свое значение. Колоду раскладывают по определенным алгоритмам, у каждого расклада есть свое значение).

Страница значения карты состоит из картинки карт, ее описания, текстового комментария (отдельное текстовое поле), ссылки на аркан (категория карты).

Есть страница значений всех карт колоды как на примере (тизеры карт (картинка карты без тайтла!!) http://zorba-budda.ru/oracles/zen_tarot/deck/


И Страница раскладов: тизеры раскладов (картинка расклада, описание) и копка разложить, при переходе на страницу расклада появляется список карт с полным описанием, внизу кнопка «разложить еще раз». Карты выбираются по определенному алгоритму

http://oshosatori.ru/ru/oshotaro.html?type=1
Страница разложенного расклада: список выбранных при раскладе карт, ссылки на другие расклады

Пример раскладов http://oshosatori.ru/ru/oshotaro.html?type=1 (рассмотрим также вариант написания специального модуля, реализующего что-то наподобии игры с анимированным процессом выбора карт)

Механизм расклада карт:

на странице расклада с помощью заданного алгоритма выбирается определено число карт из общей колоды

Итогом расклада становится отображение списка выбранных карт с полным описанием (те список нод с типом ошо дзен таро)

http://oshosatori.ru/ru/oshotaro.html?type=1&deal=9



  1. Цитаты Ошо для вставки в контент – на всех страницах страницах будет большое количество цитат ошо, поэтому было б удобнее сделать по ним отдельную базу, чтобы потом вставлять их в контент и блоки.


Галерея фотографий
Список галерей:

    1. фото с групп и занятий Ошо Центра «Ветры»

    2. жизнь коммуны и фотогалереи каждого участника коммуны

    3. ошо фото и ошо артгалерея

    4. Юмор – забавные фото и приколы в разделе юмор (клуб друзей ошо)

    5. Личные Фотогалереи пользователей и групп (загрузка с предмодерацией)

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

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



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


Страница список видео одной тематики: название, описание, тизеры видео, облако тегов – ссылки на другие тематики видео)

Страница Видеоплеер – видео, комментарии с предмодерацией, ссылка на категорию
Список Галерей:

1) Ошо видео и дискурсы

2) Видео о медитации и

3) записи с групп, видео отзывы, видео презентации лидеров

4) Общий видео архив (смешное, про животных, наши любимые фильмы и пр.)

5) Личные видео альбомы пользователей (добавление с предмодерацией)




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

Страница списка аудиотреков одной тематики

Страница списка тизеров альбомов с описанием

Список Галерей:


  1. Музыка для медитаций

  2. Ошо аудио дискурсы




  1. Ошо нео-саньяса (статьи, каталог имен)

Главная страница: описание, тизеры статей категории, цитата о саньясе

Статьи категории: Просто статьи (название, обложка, текст)



Каталог имен таблица из трех столбцов (имя значение пол), сортировка по алфавиту, алфавитный указатель в верху страницы, возможность отображения только мужских или только женских имен. http://satorisalon.ru/sat.php?sat=873



  1. Цитаты и Даршаны, Ошо о Религиях и Мастерах, ашрамы Ошо, Ошо Юмор в данных категориях располагаются текстовые статьи с цитатами Ошо, картинками

http://www.oshoteachings.com/category/osho-on-bliss-bontentment-peace/

http://www.osho.ru/anekdoty-osho.html

Ошо центр

Данный раздел посвящен медитациям, семинарам и группам, которые проходят в Ошо центре «Ветры»

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



  1. Музыка, видео, книги, фотогалерея (функционал описан в предыдущем разделе)




  1. Медитации Ошо

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

Так же в категорию входят вопросы о медитации (с кнопкой добавить вопрос), а так же книги с описаниями техник:

http://www.osho.ru/voprosy/

http://www.osho.ru/meditatsii/oranzhevaya-kniga/
На главной странице категории тизеры разделов (тизер основых медитаций включают ссылки на сами медитации)


  1. Медитационные группы

Категория содержит страницы с описанием медитационных групп:

название, обложка, описание, ссылка на расписание в календаре событий, ссылка на фотогалерею, ссылка на отзывы и видеоотзывы, кнопка добавить отзыв, кнопка «подать заявку на участие»?



Главная – цитата Ошо, тизеры страниц с группами, ссылка на календарь событий

http://www.osho.ru/meditatsionnye-osho-gruppy-etot-med-tvoj.html


  1. Категория Впечатления и отзывы участников

Отзывы разбиты по группам, а внутри групп по времени проведения (не все отзывы) –

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



http://www.osho.ru/vpetchatleniya.html
Страница с отзывами к конкретной группе (например «За пределами ума январь 2010»)

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

Имя участника с фото и ссылкой-тизером на его акаунт (если он зарегистрирован)

вступительная фраза-заголовок

полный текст отзыва

После каждого отзыва ссылка на возврат к оглавлению

Блок с ссылкой на описание данной группы

Блок с видео отзывыми (если они есть



Блок с фотогалереей этой группы

http://www.osho.ru/vpetchatleniya/no-mindotzyvy/no_mind_2012.html
Для некоторых групп есть разделение также и по годам проведения, в этом случае добавляется страница с тизерам отзывов к группе по годам (заголовок, обложка, 3 – 4 вступительных фразы-заголовков отзывов):

http://www.osho.ru/vpetchatleniya/no-mindotzyvy/gruppa-no-mind-za-predelami-uma.html


  1. Календарь событий http://drupal.org/project/calendar

Примеры: google calendar, http://www.humaniversity.com/calendar
Главная страница календаря: Просмотр всех событий календаря (список тизеров событий календаря друг под другом, отсортированных по времени начала), вкладки других вариантов просмотра:

  • Просмотр дня (список тизеров событий по часам друг под другом)

  • Просмотр недели (таблица событий по дням (каждый столбец – день недели))

  • Просмотр месяца (таблица из квадратов с заполнением http://www.humaniversity.com/calendar/monthly-view , над таблицей - возможность выбора месяца из списка, листалка месяцев и годов)

  • Архив (список тизеров прошедших событий друг под другом)

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


  1. Страница (или всплывающее окно) записи на группу открывается при нажатии на соответствующую кнопку. Страница или окно представляет собой форму отправки данных на email: имя, тел, e-mail, название группы (подставл-ся автоматически), комментарий, дата события




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



  2. Страница (или всплывающее окно) задать вопрос организаторам: открывается при нажатии на соответствующую кнопку. Страница или окно представляет собой форму отправки вопроса организаторам на email.

Все формы по отправке данных должны быть с фильтрацией ввода данных (чтобы предотвратить размещение кода типа


База данных защищена авторским правом ©shkola.of.by 2016
звярнуцца да адміністрацыі

    Галоўная старонка