project create a website

21
Икономически Университет гр.Варна Специалност “Реклама и медийни комуникации” Курсова работа по дисциплината Компютърни технологии в рекламата и медийните комуникации” Тема: Създаване на интернет сайт Изготвил: Проверил: Мария Михнева Михнева Ф№ 10631 Гр.: 43 Курс: 6 Ас. Елица Узунова Димана Михнева Михнева Ф№10632 Гр.:43 Курс: 6 Доц. д-р Стефан Дражев гр.Варна 2014

Upload: mimi-mihneva

Post on 25-Jun-2015

92 views

Category:

Technology


1 download

DESCRIPTION

Project: Create a website

TRANSCRIPT

Page 1: Project Create a website

Икономически Университет

гр.Варна

Специалност “Реклама и медийни комуникации”

Курсова работа

по дисциплината “ Компютърни технологии в рекламата и медийните

комуникации”

Тема: Създаване на интернет сайт

Изготвил: Проверил:

Мария Михнева Михнева

Ф№ 10631 Гр.: 43 Курс: 6

Ас. Елица Узунова

Димана Михнева Михнева

Ф№10632 Гр.:43 Курс: 6 Доц. д-р Стефан Дражев

гр.Варна 2014

Page 2: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 2 от 21

Съдържание

Въведение ......................................................................................................... 3

1. Описание на идеята .................................................................................... 4

1.1 История и идея на кампанията ............................................................ 4

1.2 Цели на кампанията ................................................................................ 4

1.3 Задачи на кампанията.............................................................................. 4

1.4 Канали за популяризация ........................................................................ 5

2. Създаване на интернет сайт ......................................................................... 6

Създаване на интернет сайт за MD Design Studio ................................. 6

Създаване на интернет сайт за събитието „Триизмерна Варна през

времето” ......................................................................................................... 7

3. Описание и структура на уеб сайта ............................................................. 7

MD Design Studio сайт ............................................................................ 8

Триизмрна Варна през времето сайт .................................................... 14

Заключение ..................................................................................................... 20

Връзки ............................................................................................................. 21

Page 3: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 3 от 21

Въведение

MD Design Studio възниква през месец октомври 2013 година в град

Варна. Фирмата се основа като дружество с ограничена възможност (ООД

- Дружество с ограничена отговорност може да се образува от едно или

повече лица, които отговарят за задълженията на дружеството с дяловата

си вноска в капитала на дружеството) и изпълнява дейност на рекламна

агенция. Рекламната агенция е организация (предприятие), чиято цел е да

популяризира даден продукт, стока или дейността на своите клиенти,

посредством маркетингови проучвания и анализ на пазара. След проучване

на пазара и конкуренцията, рекламната агенция изготвя бизнес модел

и/или цялостна визия на фирмата (клиента). Следващата стъпка е

организацията по изпълнението на изготвеният бизнес модел.

Дейност на фирмата:

Ние предлагаме решения от идея концепция - графичен дизайн до

цялостната реализация на проекта, като през този процес всяка стъпка и

действие е съгласувано с клиента. Съчетаваме професионализъм,

художествен опит, богата фантазия, творческо мислене и подчертан стил.

Ние залагаме на интересни и адекватни цветови решения и нетрадиционен

дизайнерски подход , за да сътворим перфектната и изискана визия за Вас

и Вашето лице пред света.

Задачи на фирмата:

Като първа задача на фирмата бе поставена организирането на

събитие/кампания, с което да се популяризира фирмата на пазара.

Събитието, което MD Design Studio реши да организира, е под заглавието

„Триизмерна Варна през Времето”.

Page 4: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 4 от 21

1. Описание на идеята

1.1 История и идея на кампанията

Идеята за събитието „Варна през обектива на модерните

технологии” възниква през месец октомври 2013 година в град Варна.

Събитието се основа на идеята за представяне на една по различна стара

Варна. Използвайки модерните технологии ще представим триизмерни

снимки на Варна и как тя се е променила през времето.

Старите снимки на град Варна ще са обработени чрез специален

софтуер, за да придобият триизмерния си вид. Те ще бъдат подредени по

хронологичен ред, образувайки нещо като улица на времето. На

посетителите ще се раздават специални очила и слушалки, където ще

могат освен да видят стара Варна чрез 3D снимки, но и ще могат да чуят

нейната история със звукови ефекти.

Варна е град, в който идват хора от цяла България по една или друга

причина. Много от тях не знаят, а и сигурно не са се интересували от

историята на града. Също така с напредване на времето много варненци

също са забравели своята история. Нашата идея е да им покажем по по –

различен начин историята на Варна, така че да обхване всички възрастови

групи. Затова за първи път в България, град Варна ще бъде представено

единственото по рода си събитие – „Варна през обектива на модерните

технологии”. Сред проведените предварителни проучвания, идеята

придоби популярност още преди да бъде представена официално.

Събитието ще се проведе под мотото: „Триизмерна Варна през времето”.

1.2 Цели на кампанията

Както беше казано по горе целта на събитието е да популяризира

историята на град Варна, представена по един по различен начин – чрез

триизмерни снимки с звукови ефекти, и по този начин да привлече

вниманието на повече туристи.

Друга цел е чрез организираното събитието град Варна да увеличи

шансовете си за спечелване на титлата „Европейска столица на културата -

2019г.”.

1.3 Задачи на кампанията

За провеждането на събитието е необходимо извършването на

следните задачи:

Page 5: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 5 от 21

Набиране на снимки и тяхното обработване със

специален софтуер – като софтуера, който ще се

използване е AnaMaker и е напълно безплатен и лесен за

използване;

Контакт с благотворителни организации, които да

помогнат с реализирането на събитието;

Осъществяване на контакт с Община Варна;

Осъществяване на контакт с различни медии;

Изработка на рекламни материали – банери, флаери,

билбордове, уеб сайт и страници в социалните мрежи;

Уточняване на дата и част на събитието

1.4 Канали за популяризация

За да достигне най – успешно до целевата си аудитория събитието

„Варна през обектива на модерните технологии” предвижда използването

на различни канали за комуникация.

Предвижда се изработването на:

- Интернет сайт – в него ще се включи подробна информация

за събитието;

- Facebook страница;

- Google + страница;

Page 6: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 6 от 21

- Twitter страница;

- Флаери / брошури – които ще се разпространяват по улиците

и в някои големи вериги магазини и търговски центрове;

- Билбордове – в центъра на града и близост до мястото на

събитието;

- Радио Браво;

- Радио N-joy;

- Банер в www.moreto.net;

- Банер в www.varnautre.bg .

2. Създаване на интернет сайт

С развиването на технологиите, Интернет става все по необходим от

колкото си мислим. 90% от потребителите в Интернет го използват още

преди да са станали от леглото. Той е на всякъде и ни предлага все по нови

начини за забавление, бизнес, образование и социални контакти.

На повечето стартиращи фирми първата им работа е да създадат

страници за бизнеса си в социалните мрежи. Това е един от най-лесните и

бързи начини за популяризиране на бизнеса. Но това не е достатъчно.

Създаване на интернет сайт за MD Design Studio

За да може нашата фирма, MD Design Studio, да достигне до всички

свои потенциални клиенти, дори тези, които не са в социалните мрежи,

реши да си изработи уеб сайт, в който да покаже своето портфолио,

професионално развитие и дейност на фирмата. Въпреки богатите опции

на социалните мрежи, те си имат и свои недостатъци, и затова е нужно

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

MD Design Studio цели винаги да е в крак с модерните технологии,

ето защо за изработката на своя уеб сайт е използвана последната

технология на HTML и CSS, а именно HTML5 и CSS3. За по-голяма

абстрактност и функционалност на сайта е използван също и JavaScript. За

подобряване на концепцията на дизайна са използвани външни

библиотеки, които все по бързо навлизат на пазара за уеб технологии и се

използват от водещи компании, за създаването на своите професионални

уеб сайтове. Библиотеките, които са използвани за сайта на MD Design

Studio са: Bootstrap и JQuery Mobile. За да може сайта на MD Design Studio

да бъде намиран от своите потенциални клиенти и потребители е

оптимизиран за търсачките, така че те да могат да обхождат и индексират

Page 7: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 7 от 21

нашите страници. За целта е използвана SEO оптимизация и подходящи

мета тагове, включващи нужните ключови думи и описание.

Създаване на интернет сайт за събитието „Триизмерна Варна

през времето”

За популяризиране на събитието бяха създадени страници в някои от

социалните мрежи, като Faceook, Google Plus и Twitter, а също така и бе

направен уеб сайт, където да могат да се публикуват различни новини,

снимки и интересни факти.

За направата на уеб сайта на „Триизмерна варна през времето” бе

използвана една нова технология на Adobe, а именно програмата Adobe

Muse. Тя позволя както кодиране на HTML и CSS, като използва

последните им версии HTML5 и CSS3, така и на Flash и JavaScript. Също

така предоставя възможността за drag-and-drop, т.е с дърпане и влачене на

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

на сайтовете за бързо създаване на уеб сайтове като Wix, Weebly, Webs,

Yola, iPage и други. Разликата е, че не е нужно да си в Интернет за да си

направиш сайта, програмата е много по олекотена от готовите платформи

и предлага много повече възможности, също така тук липсват и водните

знаци и банер рекламите на готовите платформи.

3. Описание и структура на уеб сайта

При създаването на е уеб сайта е нужно първо да се изготви план за

създаването му, т.е първо се започва от дизайна – сайтовете са като

къщите, ако искаме нашите потребители да се чувстват удобно в нашия

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

трябва дизайна да ги предразполага. Най-лесния начин е като се започне от

цветовете, те трябва да съвпадат с цветовете на фирмения бранд.

Втората част е да решим какво трябва да съдържа сайта, като текстове.

Те трябва да се отнасят за това, което предлагаме.

Третата част е структуриране на страниците. Всяка страница трябва да

съдържа, лого на видимо място – обикновено това е левия или десния

горен ъгъл на сайта. Също така трябва да има на видимо място контактна

информация – адрес, телефон, имейл и т.н, това е т.нар хедър на

страницата, който се повтаря за всички страници на сайта. Задължително

след логото и контактната информация е т.нар навигационна лента или

още наречена меню. Тук се съдържат линкове към останалите страници на

Page 8: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 8 от 21

сайта ни. Такова меню трябва да има на всяка от нашите страници. След

навигационната лента страниците вече се делят на два вида: Начална

страница и Страница за разглеждане. В началната страница се съдържа

основната информация и препратки към другите страници и зависи от това

към какво е насочен сайта. Страницата за разглеждане е стандартна, тя

съдържа текстова част и картинка към текста. Също така има и Страница

за контакти, обикновено тя е стандартна и съдържа контактна форма за

директно съобщения, контактна информация – адрес, телефон, имейл, и

карта с точен адрес. На последно място е т.нар футър на страницата, той е

еднакъв за всички страници и трябва да съдържа, кратка контакта

информация, навигация като тази в хедъра и кой е изработил сайта.

MD Design Studio сайт

За създаването на сайта на MD Design Studio са използвани няколко

програми преди самото кодирането на сайта. За дизайна на сайта е

използван програмата Adobe Photoshop. По време на изработката на

дизайна се създава и структурата на сайта – лого, бутони за социалните

мрежи, меню, контент с основна информация и футър. Началната страница

на сайта се дели на 6 основни части: Хедър – съдържащ лого и социални

бутони, Меню – основната навигация на сайта, Слайдър – картинки с

последни проекти, Категории – какво предлага фирмата, Последни проекти

– линк към вече реализирани проекти и Футър - навигация. Страницата за

разглеждане съдържа: хедър, основна информация и футър.

Page 9: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 9 от 21

Хедър

В хедъра на уеб сайта на MD Design Studio се съдържа логото на фирмата,

което е в подходящ размер, за да може да се забелязва. Също така на

видимо място са поставени връзките към социалните бутони – Facebook,

Twitter, Google Plus.

Меню/Навигация

В менюто се съдържат списък от линкове към всички страници на сайта:

Начало – води към началната страница;

Проекти – води към страницата с реализирани проекти, която

представлява списък с линкове към проектите придружени с

подходяща снимка;

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

популяризиране на фирмата в интернет;

За нас – съдържа описание за дейността на фирмата;

Контакти - съдържа контактна форма, информация за

местоположение, телефон и имейл.

Слайдър

За по атрактивно представяне на реализираните проекти е добавен слайдър

в началната страница, който на определен брой секунди се сменят

снимките, има възможност и за ръчно сменяне чрез, вградените точки.

Page 10: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 10 от 21

Категории

За по ясно представяне на функциите на фирмата е избрано в началната

страница те да се категоризират.

Последни проекти

За привличане на вниманието на клиентите сме избрали в началната

страница да поставим част от последните си реализирани проекти.

Футър

Във футъра се съдържа меню, за удобство на посетителите, както кой е

изработил сайта и правата за запазване.

Page 11: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 11 от 21

Страница „За Нас”

В тази страница се съдържа хедърна част включваща лого, социални

бутони и навигация, текстова част, която съдържа информация за

дейността на фирмата, кога е възникнала и какво предлага, и футърна част,

която съдържа бърза навигация и кой е проектирал сайта.

Страница „Проекти”

В тази страница се съдържат всички реализирани проекти. За по ефектно

представяне на новите проекти сме предвидили специален знак/символ,

който да ги отличава от останалите.

Page 12: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 12 от 21

Страница „Контакти”

В страницата за контакти може да намерите, карта, която съдържа точния

адрес, контактна форма за директно съобщение и контактна информация –

адрес, телефон, имейл.

Страница „Блог”

В него се съдържат всички необходими инструменти. Има търсачка, с

която лесно може да достигнеш до желания материал. Страници,

включващи Начална страница, където се поместват всички новини и

статии. Страници за реализираните проекти, където се предоставя

информация за тях. Линкове включващи препратки към статии за MD

Design Studio или някой от нейните проекти. Има директна връзка за

Page 13: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 13 от 21

споделяне в социалните мрежи, както и архив на всички статии и новини.

Също така и възможност за публикуване на коментари и споделяне на

статии и новините в социалните мрежи. Във футъра на Блога се съдържа

контактна форма за директна връзка. Дизайна на Блога е избран като

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

За кодирането на сайта е използвана програмата Adobe Dreamweaver.

За качване на сайта на безплатен домейн е използвана програмата FileZilla.

Page 14: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 14 от 21

Триизмрна Варна през времето сайт

Идеята за дизайна на сайта е да изглежда като стар вестник. Тъй като

събитието е за популяризиране на стари снимки представени чрез новите

технологии, идеята за дизайна е същата – Стария вестник в Интернет.

Както при сайта за MD Design Studio, така и тук за дизайна на сайта е

използвана програмата за графична обработка Adobe Photoshop. По време

на изработката на дизайна се създава и структурата на сайта – лого, бутони

за социалните мрежи, меню, контент с основна информация и футър. Сайта

се дели на 4 основни части: Хедър – съдържащ лого и заглавие, Меню –

основната навигация на сайта, Контент – съдържащ новини за проекта,

описание на проекта, контактна форма и Футър - навигация.

Хедър

Като един истински вестник хедъра съдържа лого, заглавие, дата и брой.

По този начин се цели да забравиш, че си в Интернет и наистина да си

Page 15: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 15 от 21

помислиш, че четеш вестник. Концепцията на сайта е опростен и

олекотена, показваща само това, което е нужно.

Меню

Менюто е изключително опростено. Съдържа само три линка:

Новини – където се публикуват новините относно проекта;

За проекта – цялата необходима информация относно проекта,

неговото възникване и реализация;

Контакти – стандартна страница за контакти, която съдържа

контактна форма и контактна информация за създателите на проекта.

Контент

Тук са представени новините за проекта. Типично като вестник те

съдържат заглавие, дата, основен текст придружен с картинка и автор на

новината/статията.

Футър

Футъра е също възможно най – опростен. Съдържа единствено необходима

информация. Връзка към социалните мрежи и имейл връзка.

Page 16: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 16 от 21

Страница „За проекта”

Тук се съдържа информация относно идеята на проекта, неговите цели и

реализация. Страницата е възможно най опростена, като се запазва изгледа

от началната страница – тип вестник. Текстовия материал е придружен със

снимки за по добър естетически изглед. Основните стилове, размер на

текста, цвят, дизайн са запазени от началната страница. Снимките са

представени като стари пощенски картички с цел запазване на идеята.

Страница „Контакти”

Тук, чрез стара снимка на Пощата в град Варна изобразяваме страницата за

контакти. Има контактна форма, за бърза връзка, съдържаща необходимите

полета: Име, Имейл и Съобщение.

Page 17: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 17 от 21

За популяризирането на проекта, са направени необходимите регистрации

в социалните мрежи: Facebook, Google Plus и Twitter.

Facebook

Page 18: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 18 от 21

Google Plus

Twitter

За създаването на сайта на „Триизмерна Варна през времето” е използвана

програмата Adobe Muse. Програмата не е голяма и тежка и веднага след

инсталирането се отваря без забавяния. Стартираме програмата и пред нас

се отваря диалоговият прозорец, който задава въпроса дали желаем да

отворим настоящ проект или ще създадем нов. Първото нещо, което

потребителя трябва да направи е да създаде структурата на сайта си (Plan)

– коя страница и коя под страница къде да се намира. Тук тепърва

Page 19: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 19 от 21

създателят на страницата трябва да започне да обяснява за дървовидна

структура, менюта и категории. След двоен клик върху дадена страница

вече сте в нея и започвате същинското създаване на дизайна на Вашият

статичен сайт. Вдясно виждаме лентата с инструменти и палитри, която

напомня на друг продукт на Adobe – Photoshop. Структурата на менюто се

създава и променя сама – съгласно структурата на страницата ви.

Единствения минус е, че има едва три възможности за меню – две

хоризонтални и една вертикална. Вградени са възможности за създаване на

акордеони и панели с табове. Adobe Muse се препоръчва за по опростени

сайтове, какъвто е на „Триизмерна Варна през времето”.

Page 20: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 20 от 21

Заключение

За популяризирането на една фирма или бранд не е достатъчно само

присъствие в социалните мрежи. За това тук се появява и уеб сайта.

Изграждането на сайт в днешно време е лесно. Вече има множество

програми и уеб платформи, с които не е нужно да се пише никакъв код и

улеснява работата на уеб дизайнера. Въпреки всичко създаването на сайт

не е чак толкова лесно, ако искаме потребителите да ни вземат на

сериозно. Важно за една страница е нейната структура, цветовете,

шрифтовете и размера на текста който се използва.

За създаването на нашите сайтове за MD Design Studio и Триизмерна

Варна през времето сме целили те да грабват окото на потребителя. Чрез

юзърфрендли структура нашата цел бе да задържи потребителите, за да

могат да разгледат целия сайт и да го посетят отново.

Сайта на MD Design Studio е корпоративен сайт на рекламна агенция,

която предоставя своите услуги. Целта най сайта е потребителите по лесно

да ни открият и да могат да видят нашите продукти и услуги, които

предлагаме. Чрез кралските цветове и излъчване, нашата цел е да покажем,

че нашата фирма е лидер и всичките ни проекти са представени по

възможно най-добрия начин.

Сайта на „Триизмерна Варна през времето” отговаря на същността

на проекта, а именно да възродим старото чрез новите технологии. Сайта е

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

проекта.

Page 21: Project Create a website

Тема: Създаване на уеб сайт

Мария Михнева – Ф№10631, 43гр., курс 6 Димана Михнева – Ф№10632, 43гр., курс 6

Страница 21 от 21

Връзки

MD Design Studio сайт - http://mddesign.eu.pn/

Триизмерна Варна през времето сайт - http://3dvarna.eu.pn/

Блог - http://mddst.blogspot.com/

Facebook - https://www.facebook.com/3dvarnaa

Google Plus - https://plus.google.com/117619518090611249483/posts

Twitter - https://twitter.com/3dvarna