Икономически университет - Варна

Катедра маркетинг

В А Р Н А 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.