View
110
Download
3
Category
Preview:
DESCRIPTION
Citation preview
Икономически университет - Варна
Катедра маркетинг
В А Р Н А 2 0 1 4
Курсов проект по
Компютърни технологии в
рекламата и медийните комуникации
Описание на bhcoffee.drupalgardens.com
Разрабитили: Проверили: РадостинаМакавеева; ФН:117352, Илияна Събева; ФН: 117351 Снежина Минакова 117627
РМК, магистри, задочно обучение
Доц. Д-р Стефан Дражев ас. Елица Узунова
Икономически университет - Варна
Катедра маркетинг
2
Описание на bhcoffee.drupalgardens.com
( кратък линк: http://bit.ly/1nHeVuq )
1. Увод
За направата на сайта ни, избрахме CMS системата Друпал.CMS означава Content
Management System - система за управление на съдържание. Домашната страница на
проекта е: https://drupal.org.
Drupal е водеща система за управление на съдържанието на един сайт. С нейна
помощ може да се направи както прост сайт с няколко страници, така и сложен сайт с
различни потребителски роли, различни видове страници, гъвкава бизнес логика и най -
разнообразен визуален дизайн.
Когато се прави сайт с Друпал, може да се използва нает под наем сървър, на който
да се инсталира Друпал или да се избере по-лесния вариант на инсталация с един клик
чрез платформа като Drupal Gardens.
Drupal Gardens ( http://drupalgardens.com ) е платформа , в която просто се създава
потребителска сметка и потребителят може веднага да създаде нов Друпал сайт,
спестявайки си инсталиране и по-късната нужда от обновяване на Друпал модулите.
Фирмата стояща зад платформата Drupal Gardens, Acquia, се грижи за обновяването на
Друпал сайтовете безплатно и за поддръжката на сървърите.
2. Структура на сайта
Сайтът ни е на адрес http://bhcoffee.drupalgardens.com . Той се състои от следните елементи
(по страници):
( Повече информация относно как са направени страниците, ще намерите в
раздел “Приложение 1”, накрая на документа. )
Икономически университет - Варна
Катедра маркетинг
3
Страница: Начало
адрес: http://bhcoffee.drupalgardens.com/
Икономически университет - Варна
Катедра маркетинг
4
Виждат се следните елементи (от горе надолу) :
- блок (форма) за текстово търсене в сайта
- главно меню (в черно), показващо главните страници в сайта
- слоган/мото на сайта: “Пийте добро кафе! Четете добри книги!”
- заглавие на сайта: “BH Кафе - библиотека”
- телефон за резервация
- главен Rotating Banner ( Въртящ/Плъзгащ се Банер )
- ShareThis бутон за споделяне на страниците в социалните мрежи
- Анкета : “От къде научихте за BH кафе - библиотека и неговото местоположение?”
- вдясно от анкетата: Фейсбук блок с връзка към Фен страницата “BH Кафе Библиотека”,
бутон за харесване и броя на феновете във Фейсбук до момента
- под Фейсбук блока: Туитър блок с последните tweets с бутон за следване в Туитър
- най-долу в черно - завършващ блок с три раздела:
1. Карта на сайта
2. “Следвайте ни във Facebook и Twitter”
3. “За контакт” - адрес, телефон и email
Икономически университет - Варна
Катедра маркетинг
5
Страница “За нас”
адрес:http://bhcoffee.drupalgardens.com/content/%D0%B7%D0%B0%D0%BD%D0%B0
%D1%81
Икономически университет - Варна
Катедра маркетинг
6
Наред с познатите от предишната страница елементи, новото тук е:
- текста на страницата е форматиран, чрез редактор от тип WYSIWYG ( What you see is
What you get ) , буквално на български: “Каквото виждаш , това получаваш” - много
подобен на Microsoft Word редактор , който е вграден в нашия сайт когато редактираме
текста на дадена страница.
- картинката е вляво от текста (част е от него) и самия текст е вдясно
- отдолу в оранжево са текста за покана за посещение и телефона за резервации,
центрирани
Страница Галерия
адрес:
http://bhcoffee.drupalgardens.com/content/%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%
D0%B8%D1%8F-0
Тук пак с помощта на WYSIWYG редактора, сме направили таблица 2 по 2 в която
сме сложили текстови връзки към Снимки и Видео отгоре и картинки отдолу.
Икономически университет - Варна
Катедра маркетинг
7
Подстраница Снимки
адрес:
http://bhcoffee.drupalgardens.com/content/%D1%81%D0%BD%D0%B8%D0%BC%D0%BA%
D0%B8
Имаме таблица 3 по 4 с миниатюри на снимките, отдолу с pager ( линкове за 1ва,
2ра 3та и следваща и последна страници от галерията ).При щракване върху дадена
снимка, тя се отваря в Lightbox:
Икономически университет - Варна
Катедра маркетинг
8
… и може да се навигира между снимките с бутоните долу вляво.
Щракване встрани на потъмнената област или натискане на Esc ще ни върне обратно.
Щракване на Slideshow , ще започне автоматично да превърта снимките след кратка пауза.
Икономически университет - Варна
Катедра маркетинг
9
Подстраница Видео
адрес:
http://bhcoffee.drupalgardens.com/content/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE
Пак както на страницата Галерия, с помощта на таблица 2 по 2 и wysiwyg, сме
поместили фейсбук постове, взети с Copy Paste от фейсбук embed кодове.
Икономически университет - Варна
Катедра маркетинг
10
Страница BH Радио
адрес:
http://bhcoffee.drupalgardens.com/content/bh%D1%80%D0%B0%D0%B4%D0%B8%D0%BE
Копирали сме HTML кода с линк и картинка към Мултимедийния Stream за BH
Радио от фен страницата на BH Кафе, за да може след щракване да се слуша онлайн радио
станцията.
Икономически университет - Варна
Катедра маркетинг
11
Страница Другите за нас
адрес:
http://bhcoffee.drupalgardens.com/content/%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D
1%82%D0%B5-%D0%B7%D0%B0-%D0%BD%D0%B0%D1%81
Икономически университет - Варна
Катедра маркетинг
12
С помощта на wysiwyg редактора сме поставили въвеждащия текст “От
foursquare.com:”и след това снимка с отзиви на клиенти от сайта foursquare.com.
По същият начин сме поставили отзивите от Facebook.com.
Страница За контакт
адрес:
http://bhcoffee.drupalgardens.com/content/%D0%B7%D0%B0%D0%BA%D0%BE%D0%BD%
D1%82%D0%B0%D0%BA%D1%82
Имаме карта взета от Google Maps чрез embed код и форма за контакт, направена
чрез друпал модула Webform. Всяко изпращане на формата, ще бъде получено на наш
email адрес по избор.
Икономически университет - Варна
Катедра маркетинг
13
Приложение 1 - Как е направен сайта:
1. Как се прави нова страница в Друпал сайта:
- Влиза се през http://www.drupalgardens.com/ -> Log in . Въвеждат се потребител и парола.
- След това се избира от менюто “Add content” - най-вляво в сивата лента горе
След това се виждат видовете Съдържание (Content), които могат да се добавят:
Икономически университет - Варна
Катедра маркетинг
14
Повечето страници в сайта сме направили от типа “Basic Page”. Контактната форма
е от тип Webform, а Анкетата на началната страница е от тип Poll.
Галерията от снимки е от тип Gallery.
Щраквайки на Basic Page по-горе ще видим:
Оттук задаваме заглавие (Title ) и главен текст (Body) на новата страница. Виждат
се множеството бутони на WYSIWYG редактора горе под надписа Body.
С бутоните, които имаме, може да се центрира текст, да се удебелява, да се правят
таблици и линкове. Да се качват и добавят вътре в текста картинки и да се слагат
вляво/вдясно заедно на едно ниво с текста.
По надолу имаме множество опции, измежду които за създаване на меню елемент
за тази нова стреаница, точния текст в линка на страницата (напр. За нас ->
http://bhcoffee.drupalgardens.com/content/за-нас ) и накрая бутоните за запазване запазване
като чернова и предварителен преглед.
Икономически университет - Варна
Катедра маркетинг
15
За различните типове страници , повечето опции са същите, но например в типа
Poll (Анкета ) имаме опции за главния въпрос на анкетата и различните отговори, освен
нормалните Заглавие (Title ) и Тяло (Body), настройки на меню и пътя на страницата .
За типа Gallery, имаме опции за качване на множество снимки, освен другото.
За типа Wеbform, има опции за това какви полета да има формуляра. Всеки
формуляр може да има различни полета - текстови, от тип checkbox, от тип email адрес, от
тип качване на файл и пр.
2.Как се поставя и настройва блок в Друпал:
Отива се на страницата за администрация на блоковете:
Structure -> Blocks
Икономически университет - Варна
Катедра маркетинг
16
Там се избира дадения блок, да кажем “Search form” (полето за текстово търсене от
началната страница) и се избира регион за него.
След това най-долу има бутон за запазване.
Всеки блок има още настройки: отива се на линка Configure срещу блока и там се вижда:
Настройва се заглавие на блока, може пак да се смени региона в сайта.
По надолу има следните вертикални Tab-ове:
- Pages: оттук може да се избере на кои страници от сайта да се показва или да не се
показва този блок - например “само на началната страница” или “показвай само на
изброените страници”, или “показвай на всички освен изброените” …
- Content types - тази настройка позволява да се покаже/скрие блока в страниците от
избраните типове - Basic Page, Poll, Gallery
- Roles - може да се покаже/скрие блока за определени роли потребители.
По този начин сме поместили в сайта блоковете:
Икономически университет - Варна
Катедра маркетинг
17
- за главното черно меню - на всички страници
- блоковете за facebook фен страницата и последните twitter постове - на всички страници
- блоковете за сайт лого, слоган и заглавие на сайта
- блока на главния Rotating Banner ( виж по-долу )
3. Как се създава Rotating Banner:
Друпал модула “Rotating Banner”, който е активиран по подразбиране в Drupal Gardens, ни
дава линка “Add a rotating banner”, намира се до линка “Add block”.
Оттам се създава нов Rotating Banner, първо заглавието му:
… и след това се качват картинките, които ще се въртят, заедно с текста на всеки слайд:
Икономически университет - Варна
Катедра маркетинг
18
Освен това има няколко опции определящи:
- какъв да е ефекта на смяна на картинките - Transition type
- колко да е паузата на смяната - Delay
- да има ли и как да изглеждат контролите ( бутоните ) за ръчна смяна на слайдовете
По-надолу са налични и нормалните за всеки Друпал блок настройки - за региаон и
видимост/скриване за отделни конкретни страници, типове страници и потребителски
роли.
4. За EMBED кодовете, които сме използвали:
Това са HTML кодове, които сме взели от различни източници :
- facebook embed post - https://developers.facebook.com/docs/plugins/embedded-posts
- google maps - maps.google.com
- facebook fan page embed code - Like Box - https://developers.facebook.com/docs/plugins/like-
box-for-pagesи пр.
Икономически университет - Варна
Катедра маркетинг
19
Тези кодове се копират и поставят в друпал страниците, в режим редакция, като се
натисне “HTML” най-вдясно горе.
След като кода се постави, може да се върнем обратно в режим WYSIWYG.
Recommended