Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта компании «_Gabovpab_»

Содержание:

ВВЕДЕНИЕ

Особенностью современной объективной реальности является широкое внедрение во все сферы жизнедеятельности личности, общества и государства современных информационных технологий, создания на их основе различной сложности локальных и глобальных информационных систем, предназначенных для ускорения обмена информации и доступа к различным информационным источникам. Анализ современного развития информационных технологий и телекоммуникаций, позволяет рассматривать этот показатель как один из критериев уровня развития государства и инструмент интенсификации всех процессов в обществе. Современная Россия, как и любая другая страна, заинтересована в развитии информационной инфраструктуры, в том числе и путем использования во всех сферах хозяйственной деятельности возможностей, предоставляемых глобальными сетями передачи данных [16].

Всемирная паутина представляет собой чрезвычайно перспективное средство коммуникации, кроме того технологии и подходы постоянно развиваются. Сегодняшние средства связи позволили объединить разрозненные коммуникационные системы в глобальную сеть. Благодаря этому человек получил возможность обмениваться информацией в пределах всей планеты, независимо от границ и расстояний. Именно глобальная сеть является одним из признаков перехода общества от индустриальной стадии развития к информационной [16].

За 40 лет глобальная паутина - Интернет переросла из секретной закрытой технологии, используемой военными организациями и учебными заведениями, работающих на военные и разведывательные программы, в общедоступную, открытую систему, стала влиять на развитие всей планеты и человека [17].

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

контактные формы, каталоги продукции, подписки, рассылки, поиск по сайту и многое другое. Интерактивность и адаптивность сайта обеспечивается счет современных технологий веб-программирования в лице HTML5 и CSS3.

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

Индивидуальность и единство графических констант фирменного стиля (ФС) выделяет компанию среди компаний-конкурентов. Фирменный стиль идентифицирует компанию, делает компанию узнаваемой и запоминающейся для потенциального клиента. Хороший уровень узнаваемости позволяет уменьшить затраты на рекламные кампании [8].

Актуальность исследования определяется тенденциями времени и актуальными требованиями в мире бизнеса. Актуальность разработки сайта визитки для конкретной организации (пивной паб «ГабовПаб») связана с реорганизацией паба и обновлением концепции заведения. Сайт-визитка должен стать информационным источником для ознакомления и привлечения новых клиентов.

Объектом исследования курсовой работы является представительство компаний в сети Интернет.

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

Целью работы является исследование особенностей разработки сайта, организация ключевых этапов разработки, выработка и совершенствование навыков верстки и дизайна.

Исходя из тематики, объекта и предмета исследования, в работе стоит поставить следующие задачи:

‑ определение задач сайта и целевой аудитории;

‑ анализ поисковых запросов в тематике сайта, формирование семантического ядра сайта;

‑ обор сайтов-аналогов;

‑ анализ понятия «фирменный стиль» и реализация отдельных графических элементов, для дальнейшего использования на сайте компании;

‑ анализ и краткая характеристика инструментов для верстки сайта;

‑ проектирование структуры и подготовка графических материалов;

‑ верстка сайта, согласно ранее разработанному проекту;

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

1 АНАЛИТИЧЕСКИЙ РАЗДЕЛ

1.1 Краткая характеристика компании-заказчика

1.1.1 Общая характеристика заведения

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

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

Заказчиком работы является пивной бар «Габов Паб». У заведения уже есть определенная неудачная история, в следствие анализа коммерческой не успешности организации решено было провести ряд работ по обновлению заведения, с целью поднять его популярность среди клиентов и вывести на качественно новый уровень. Среди прочих мероприятий по обновлению и реструктуризации заведения предложены маркетинговые идеи и идеи нового представления компании на рынке.

Основными маркетинговыми стратегиями являются:

‑ перепрофилирование заведения в элитный пивной паб с широким выбором, в первую очередь, крафтовых сортов пива;

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

‑ обновление элементов фирменного стиля, разработка сайта для представления компании в сети;

‑ введение системы скидок, действующей для постоянных клиентов;

‑ введение бонусной системы для любого клиента.

Последний пункт является мерой, цель которой привлечь нового клиента и мотивировать его на повторное (постоянное) посещение заведения. Эта бонусная программа проста и понятна – каждый 6 бокал пива бесплатный. Ничто так не привлекает клиента как скидка, а возможность получить бесплатно бокал фирменного пива существенная мотивация для ценителя. С другой стороны бонусная программа оставаясь постоянно на слуху, не очень существенно отразится на финансовом положении. Не частый гость выпьет больше 5 бокалов пива, а уж если он «заработал» второй бонус (12-ый бокал) значит ‑ он провел в заведении не 1,5 час., принес прибыль, потому как вместе с пивом употреблял и какие-то закуски, но главное – программа позволила задержать клиента в заведении на длительный период. Он успел познакомиться близко с интерьером, атмосферой, обслуживанием, меню, появляется возможность и время понравиться клиенту.

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

Цель компании: «Вкусно, удобно, атмосферно: здесь и сейчас».

1.1.2 Конкретизация поставленной задачи

Практическим заданием в курсовой работе является разработка сайта – визитки для «Габов Паб».

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

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

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

Логотип обязательно должен включать название паба «Габов Паб», выбранный тип лого – «Графический Символ +Текст».

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

Цветовые решения: черный, светло зеленый (травянистый, шотландский), пивной оттенок (оттенки желтого, светло-коричневый, янтарный). Для того что бы предоставить заказчику выбор – разрабатывается несколько вариантов логотипа.

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

1.2 Краткая характеристика инструментов

Практическая задача работы состоит в разработке сайта. Так как сайт относится к типу «сайт-визитка», особых сервисов реализация не предполагает. Разработка больше ориентирована на верстку, наполнение и дизайн, нежели на программирование. Для демонстрации некоторых программных возможностей front-end части на сайте будет использован JavaScript. В реализации дизайна и верстки будет использован «чистый» HTML и CSS. Сайт будет полностью разработан «в ручную» без использования каких-либо конструкторов, систем управления контентом, шаблонов и т.д.

В обзоре инструментария ограничимся коротким описанием используемых инструментов.

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

- HTML – как основное средство разработки веб - страниц;

- Javascript – язык программирования web, для реализации активного содержимого на стороне клиента (выполняется в браузере);

Язык гипертекстовой разметки HTML

Обмен информацией в Интернет осуществляется с помощью протоколов прикладного уровня, которые реализуют тот или иной прикладной сервис (пересылку файлов, гипертекстовой информации, почта и так далее). Одним из наиболее молодых и популярных сервисов Интернет, развитие которого и привело к всплеску популярности самой Интернет, стала World Wide Web (WWW), основанная на протоколе HTTP (Hyper Text Transfer Protocol - протокол передачи гипертекстовой информации).

Гипертекстовые документы, представлены в WWW, имеют одно принципиальное отличие от традиционных гипертекстовых документов - связи, которые в них используются, не ограниченны одним документом, и более того, не ограниченны одним компьютером. Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language – язык разметки гипертекстовых документов), что предоставляет широкие возможности по форматированию и структурной разметке документов, организации связей между разными документами, средства интеграции графической и мультимедийной информации в документ.

Язык программирования Javascript

При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования ‑ Javascript.

Таким образом, Javascript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Основная идея Javascript состоит в возможности изменения значений атрибутов Html- контейнеров и свойств среды отображения в процессе просмотра Html- страницы пользователем. При этом перезагрузка страницы не происходит.

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый Html-контейнер ‑ это объект, который характеризуется тройкой:

свойства;
методы;
события.

1.3 Обзор подобных сайтов

Для примера рассмотрим сайт тематического пивного бара «The Right Place».

theright.ru – русскоязычный сайт рок-бара «The Right Place», находящегося в Санкт-Петербурге.

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

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

Макет страницы сбалансирован и не перегружен информацией.

Безымянный1.png

Рисунок 1.1 ‑ Баннер при входе на сайт

Сайт выполнен в одной цветовой гамме, текст не очень хорошо читается на контрастной подложке. Очень маленький логотип на странице, клиенту придется вглядываться в него. Это можно увидеть на рисунке 1.2.

При наведении курсора на ссылку она начинает подсвечиваться. Это показано на рисунке 1.3.

Безымянный13.png

Рисунок 1.2 ‑ Стартовая страница сайта

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

Все ссылки работают верно, грамматических и синтаксических ошибок нет.

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

Имеется страница с афишей мероприятий прошедших и предстоящих.

Безымянный123.png

Рисунок 1.3 ‑ Виджеты и кнопки

Безымянный15.png

Рисунок 1.4 ‑ Меню

1.4 Элементы фирменного стиля. Логотип как образ фирмы

1.4.1 Фирменный стиль и его предназначение

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

Можно выделить следующие особенности создания «фирменного стиля».

1. Фирменный стиль должен основаться и содержать в себе основную идею и философию компании. Именно по этому часто термин «фирменный стиль» считается равнозначным термину «система идентификации компании» (corporate identity) или «система идентификации бренда» (brand identity).

2. ФС определяется как система различных средств коммуникации, основное место среди которых занимает визуальное средство, но наряду с ним входят и вербальные, аудиальные и др. средства.

3. Принцип сочетания свободного творчества и потребностей рынка; уникальных и типичных характеристик объекта.

4. Технологичность элементов ФС предполагает максимальную гибкость, возможность реализации в различных видах и на основе различных материалов.

Следует подчеркнуть, что понятие «фирменный стиль» определяется как конкретная практическая форма реализации системного дизайна, объединяет в себе методическую последовательность целостного процесса разработки концепции эстетично художественной визуализации сложного социокультурного объекта и логическое программирование целей организации системы деятельности по реализации и внедрения [10; 11].

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

В созданные положительного имиджа многие организации достаточно часто идут по пути привлечения к себе внимания через создание запомненного визуального образа. И это действительно становится маркетинговым инструментом при условии соблюдения единого стиля, привлекательности, четкости и запоминания. К элементам корпоративного дизайна Шкардун В.Д., Ахтямов Т.М. относят: здания; транспорт; вывески; печатные материалы, выходящих из организации; фирменный знак, логотип; фирменная одежда персонала; упаковка товара; ценные бумаги организации [10].

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

1.4.2 Виды и классификация логотипов

В видовой классификации (по типу исполнения) можно выделить 3 основных класса логотипов [11]:

- в логотипе использован только текст;

- логотип содержит исключительно графический символ;

- логотип представляет собой комбинацию: графический элемент + текстовый элемент.

Логотип представляет собой название сущности, которую он идентифицирует, в виде стилизованных букв и/или идеограммы. Логотипы широко применяются в качестве товарных знаков. Кроме рассмотренных выше основных групп, можно привести более расширенную классификацию:

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

Визуальные требования:

ассоциативность логотипа
оригинальность
уникальность знака
запоминаемость символа
масштабируемость знака
функциональность логотипа

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

Ассоциативность логотипа: знак логотипа должен визуально соответствовать объектам тематики, заданной видом деятельности компании

Создание логотипа для размещения в современных средствах массовой информации предусматривает представление нескольких версий его визуального исполнения:

черно-белый логотип,
2х или 3х-цветной логотип,
полноцветный логотип,
объемный логотип (с эффектами текстуры и освещение).

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

1.4.2 Анализ элементов фирменного стиля подобных компаний

Анализ характеристик и особенностей логотипов компаний данного направления начнем с анализа цветовых решений.

Анализ цветовых решений

Здесь можно выделить две основных группы:

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

Рисунок 1.5 ‑ Логотипы «BeerHOUSE» и «BEER LTD»

Основным ассоциативным цветом для пива все же остается желтый (оттенки). В частности Pantone создал самую полную на сегодняшний день классификацию оттенков основных сортов этого вида алкоголя [21]. Новая палитра, сделанная компанией при содействии пивоварен Швейцарии, состоит только из пивных оттенков — цветов реально существующих сортов пива. Пример палитры приведен в приложении Б.

Коричневые и желтоватые оттенки являются предпочтительными в данной группе логотипов, но достаточно часто используются и другие цветовые решения. В частности на рис. 1.12 представлены логотипы бело-зеленой (или черно-зеленной) цветовой палитрой. Такие наборы цветов свойственны именно пабам. Так как паб это английское (Ирландия) наследие, то и традиции в стилистике, также частично наследованы. Символика, связанная с Ирландией, будет рассмотрена ниже.

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

Рисунок 1.6 ‑ Монохромные цветовые решения в логотипах

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

Композиционно достаточно часто встречаются логотипы вписаны в круг или эллипс, это и некоторые предыдущие примеры, и примеры приведенные на рис. 1.7

Рисунок 1.7 ‑ Композиция на основе круга

На фоне применения графических элементов можно выделить следующие приоритетные группы.

Группа 1. Традиционные графические элементы это: бочка, бокал, хмель, ячменный колос. Этот набор очевиден для исследуемой тематики и пояснений не требует. Примеры логотипов с данными элемента уже были приведены ранее, еще несколько примеров представлено на рис. 1.8

Рисунок 1.8 – Традиционные символы организаций связанных с пивом

Группа 2. Как уже упоминалось ранее, пабы тесно связаны с ирландскими традициями, на рисунке 1.9 приведен выборочный набор символики связанной с Ирландией.

Рисунок 1.9 – Символика Ирландии

Если посмотреть на различные логотипы пабов, то как раз там и увидим комбинации данных символов, цветовая палитра таких лого так же вызывает явные ассоциации. Для этих лого очень свойственна округлая, вплоть до правильного круга форма. Примеры приведены на рис. 1.10

Рисунок 1.10 – Логотипы пабов с ирландской символикой

1.4.3 Идея логотипа для сайта паба

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

В названии заведения есть «ПАБ» и по маркетинговой стратегии заведение позиционируется на крафтовых сортах пива, следовательно – какие-то элементы ирландской тематики должны присутствовать. На логотипе должно быть название компании. Основным маркетинговым ходом является бесплатный 6-ой бокал пива, которую коротко можно сформулировать «SixFree». Эта маркетинговая идея должна быть тоже отражена в элементах фирменного стиля, желательно в некоторой завуалированной форме, что бы изначально вызвать интерес у наблюдателя – «что же это означает?»

В то же время нужно разрабатывать альтернативные варианты. Кроме основного логотипа могут быть некоторые другие варианты. Они могут использоваться временно и ситуативно, на каких либо рекламных макетах и материалах. В альтернативных реализациях обязательно должен присутствовать идентифицирующий информационный элемент, например ‑ таким элементом может выступать название компании. Исходя из этого анализа, а также основных требований рассмотренных в работе выше, выбираем логотип типа «Графический символ+Текст»

Концепция Вариант 1.

В первом варианте (рис. 1.11 а) представим эскиз на основе традиционных классических графических элементов, ассоциируемых с пивом, (бокал бочка) в объединении с текстовой надписью – название компании

а) б)

Рисунок 1.11 – Эскизы вариантов

Этот вариант (а) очень ассоциативно понятен. Интересным представляется вариант с деревянной кружкой, где предложено графическое решение использовать начальную букву названия компании в английском написании «G» в виде ручки. Из минусов такой концепции можно назвать следующие:

‑ очень распространённый символ, часто встречается в логотипах пивных компаний;

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

Концепция Вариант 2.

В этом варианте (рис. 1.13 (б)) предлагается использовать графические символы, имеющие ассоциации с ирландскими пабами. Из графических элементов выбран «Кельтский узел». Также на лого добавлены элементы, отражающие маркетинговую стратегию «SixFree».

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

2 ПРОЕКТНЫЙ РАЗДЕЛ

2.1 Анализ запросов. Построение семантического ядра

Естественный поиск ‑ представляет собой эффективный механизм, позволяющий привлечь пользователей и увеличить трафик сайта. В основе привлечения аудитории через естественный поиск лежит механизм создания семантического ядра сайта. Этапы создания ядра включает:

‑ изучение целевой аудитории, и ее основные запросы;

‑ анализ запросов на поисковых платформах и применение специализированных инструментов статистики и анализа запросов;

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

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

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

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

В нашем случае тематикой сайта является – «ПИВО», как основной образующий продукт коммерческой деятельности организации.

Следовательно, базовыми ключами будут фразы, содержащие это слово:

Пиво, купить пиво, выпить пива…

Такого рода запросы имеют очень конгруэнтность и малую релевантность и таргетивность, так как не конкретизируют потребностей пользователя. Учитывая структур запроса «СПЕЦИФИКАТОР- ТЕЛО - ХВОСТ», можно предложить запросы: «Попить пива в Петербурге», «Попить пива в пабе», «Пабы в Питере».

Так как организация позиционирует себя как паб с крафтовыми (несерийное, мелкое, мастеровое производство) сортами пива стоит также использовать эти ключи: «крафтовое пивое», «крафтовое пиво лучших сортов», «уникальные сорта крафтового пива». Организация также предлагает и программы досуга, то есть идеей организация является не просто употребление хмельного напитка, но и интересное времяпрепровождение: приглашение интересных творческих людей, тематические вечеринки, камерные концерты. Покрывая эту часть, стоит внести ключи типа ‑ «паб с культурной программой».

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

Анализ частотности указанных запросов предложен в приложении Д.

Карта семантического ядра представлена на рис. 2.1

Рисунок 2.1 ‑ Карта семантического ядра

2.2 Подготовка графических материалов

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

Для удовлетворения потребностей клиента и создания более полной гармонической концепции решено реализовать два варианта (см. рис. 1.11) базового логотипа.

По варианту 1 выбран эскиз с бокалом (деревянной кружкой). Рассмотрим некоторые моменты его реализации.

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

Рисунок 2.2 – Элементы кружки

Далее их необходимо разместить, как бы укрепив на некоторое эллиптическое дно. Таким образом достигается и конусная форма и симметрия (рис. 2.3)

Рисунок 2.3 – Закрепление элементов кружки

Следующие этапы – создание пенной шапки и конструктивные элементы кружки. Для пены используем свободную кривую (рис. 2.4), стяжки кружки создаем из прямоугольников подгибая их на нужную кривизну

Рисунок 2.4 – Пенная шапка

Дальше создаем надпись и отдельно позиционируем ее по отношению к кружке так, чтобы буква “G” воспринималась как ручка кружки (рис. 2.5-2.6)

Рисунок 2.5 – Подбор шрифта для надписи

Рисунок 2.6 – Скомпонованный логотип (варианты с цветом)

Для подчеркивания графической задумки с ручкой букву «G» можно немного повернуть, ориентируясь наклоном боковой стенки кружки (рис. 2.7)

Рисунок 2.7 – Вариации размещения надписи

По варианту 2 в ходе творческого поиска и сравнения полученных результатов наиболее удачным показался вариант с использованием «кельтского узла». Рассмотрим эту реализацию более детально.

Эскиз этого варианта представлен на рис. 2.8 (правый рисунок)

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

Рисунок 2.8 ‑ центральный элемент символа

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

Рисунок 2.9 ‑ реализация сплетения лучей

После некоторых экспериментов получили следующий результат (рис. 2.10)

Рисунок 2.10 ‑ Законченная форма символа

Следующий этап (согласно эскиза) ‑ необходимо создать элемент ‑ букву «F», так как этот элемент также является базовым, решено не использовать готовых шрифтовых решений, а создать этот элемент индивидуально. Ведь он отражает основную маркетинговую идею, и в дальнейшем может использоваться и индивидуально.

Буква «F» была создана в двух вариантах: с помощью кривых, и вырезанием из скругленного прямоугольника.

В ходе работы было создано много различных вариаций «F» и «6F», но в конечном варианте выбраны только две реализации.

Рисунок 2.11 ‑ Этапы создания «F»

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

Из разработанных элементов скомпонован итоговый вариант логотипа, который и использован для применения в различных вариантах элементов фирменного стиля.

Составляющие элементы представлены на рис. 2.12

Рисунок 2.12 – Элементы логотипа

Для цветного представления логотипа выбрана 3-х цветная палитра (рис. 2.13)

Рисунок 2.13 – Палитра цветов

Итоговый вариант логотипа (рис. 2.14 (а)) удовлетворяет основным требованиям как в общем к логотипу, так и пожеланиям заказчика. Этот вариант логотипа достаточно неплохо (без потерь информативности и значащих контуров) переводится в монохромный вариант (рис. 2.14 (б))

а) б)

Рисунок 2.14 – Итоговый вариант реализации

2.3 Структура сайта. Описание отдельных моментов реализации

2.3.1 Описание структуры сайта

Для реализации сайта используется структура, которая состоит из 5 страниц:

Страница 1 – «Домашняя страница. Главная». Эта страница содержит короткую фото галерею, и контент восхваляющая пиво. Короткая статья, которая должна пробудить интерес.

Станица 2 – «Пивная карта». Содержит перечень предлагаемых сортов пива с коротким описанием этих напитков. В работе страницы представлены как макет по этому, перечень ограничен несколькими пунктами. На этой же странице представлены пункты по меню закусок. Отображать или не отображать цену на предлагаемые напитки и блюда? Этот вопрос очень спорный, на этот счет имеются диаметрально противоположные мнения. В нашем варианте цены не отображаются, это больше не меню, а именно пивная карта. Закуски отображены как дополняющий элемент.

Страница 3 – «Контакты». Содержание отвечает названию, страница содержит телефоны и адрес заведения, а также карту, которая поможет клиенту сориентироваться на месте.

Страница 4 – «Новости». На этой странице планируется отображать новости о предстоящих мероприятиях, акциях и творческих программах, которые будут проводиться в пабе.

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

Структура всех страниц одинакова, схематически структура представлена на рис. 2.15

Рисунок 2.15 – Структура страниц сайта

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

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

2.3.2 Верстка страниц

Верстка страниц реализуется с использованием языка разметки html и каскадных стилей css. Общий шаблон страниц в html представлении имеет верстку на основе использования блоков <div>.

Код -шаблона:

<html>

<head>//заголовочный блок

</head>

<body> //тело

<div>

<img class="logo" src="images/logo21.png">// логотип

</header>

//реализация главного меню

<nav>

<li><a href="#">Главная</a></li>

<li><a href="html/beermap.html">Пивная карта</a></li>

<li><a href="html/contact.html">Контакты</a></li>

<li><a href="html/news.html">Новости</a></li>

</ul>

</nav>

//блок контента

//Заголовок статьи

<h2 class="title">Полезные свойства и лечебное действие пива</h2>

//пример оформления абзаца

<p>Конечно пиво не панацея..</p>

//абзац с вставкой картинки

<p><img src="images/5.jpg" class="al-right">Пиво выводит из организма …</p>

</div>

//блок подвала сайта

//реализация текста в футере

<h2>Gabov Pab - Прийди и попробуй </h2>

<h3>Питер, Скобелевский проспект д 4 </h3>

<h3>выполнено в качестве курсовой работы 2019</h3>

</footer>

</div>

</body>

</html>

Отдельные общие для всех страниц настройки вынесены в файл стилей. Для примера рассмотрим настройки изображений в блоке контента. В файле стилей определен класс content, внутри которого определены подклассы лево- и право- ориентированное изображение, для которых определены параметры отображения:

#content{

padding: 40px;

text-align: justify;

background: #000;

color:white;

}

#content img{

height: 250px;

}

.al-left{

float:left;

margin: 10px 20px 10px 0px;

}

.al-right{

float:right;

margin: 10px 0px 10px 20px;

Обработка и подготовка графики для шапки сайта и подвала проводилась с использованием графического редактора PhotoShop с использованием ранее реализованных графических элементов. Прикидочное использование логотипов показано на рис. 2.16

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

Рисунок 2.16 – Пробы различных лого

Вид окончательного варианта страниц представлен в приложении В.

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

Рисунок 2.17 – Итоговый вариант

Более гармонический вид достигается и за счет формы и за счет связки по цветам. Так сайт не имеет оттенков зеленого, но при наведении на меню ссылка меняет цвет как раз на базовый зеленый логотипа. Желтый цвет логотипа связан с оттенками на фотографии в шапке и в подвале сайта.

Рисунок 2.18 – Цветовые связки

Футер страниц сайта имеет вид, показанный на рис. 2.19.

Рисунок 2.19 – Футер страниц сайта

Желтый хорошо сочетается с черным, именно по этому в качестве фона выбран черный цвет. В таком цветом решении сайт получился и не вызывающим («наляпистым») и в тоже время ярким и контрастным. Логотип своим зеленым цветом существенно отличается от всей цветовой схемы сайта, тем самым привлекая внимание. Но тонкая цветовая привязка все таки есть – это цвет ссылки при наведении. На сайте (кроме логотипа) есть упоминание о программе «SixFree», но расшифровки и детализации нигде нет. Так сохраняется интрига и приятный сюрприз для клиента.

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

2.3.3 Описание реализации отдельных элементов

Реализация галереи

Галерея реализуется с использованием языка программирования JavaScript и подготовленных данных с помощью css.

Реализация процесса вращения карусели с фото.

var angle = 0;

function galleryspin(sign) {

spinner = document.querySelector("#spinner");

if (!sign) { angle = angle + 45; } else { angle = angle - 45; }

spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");

}

</script>

Подготовка и настройки элементов галереи

//настройки отступов, выравнивания и размеров

div#carousel {

perspective: 1200px;

background: #100000;

padding: 10px 0px 40px;

font-size:0;

margin-bottom: 3rem;

overflow: hidden;

}

figure#spinner {

transform-style: preserve-3d;

height: 300px;

transform-origin: 50% 50% -500px;

transition: 1s;

}

//настройка последовательности и вида неактивных фото (transform: rotateY)

figure#spinner img:nth-child(1) { transform:rotateY(0deg);

}

figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }

figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }

figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }

figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }

figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }

figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }

figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }

//подгрузка картинок для галереи

</figure>

</div>

Добавление галереи на главную страницу:

</figure>

</div>

</div>

Реализация живой полоски под пактами меню в момент выбора реализована с использованием события .menu li:hover и svg графики.

Сначала элемент был описан с помощью скриптового языка:

<?xml version="1.0" encoding="utf-8"?>

width="390px" height="50px" viewBox="0 0 390 50" enable-background="new 0 0 390 50" xml:space="preserve">

<path fill="none" stroke="#51ae3c" stroke-width="1.5" stroke-miterlimit="10" d="M0,47.585c0,0,97.5,0,130,0

c13.75,0,28.74-38.778,46.168-19.416C192.669,46.5,243.603,47.585,260,47.585c31.821,0,130,0,130,0"/>

</svg>

А потом закодирован в формат base64 для поддержки большим количеством браузеров, некоторые браузеры не поддерживаю эту технологию без перекодирования. В закодированном виде реализация «живой полоски» интегрирована в стили меню css, и имеет следующий вид:

.menu li:hover { background:

url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTFhZTNjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzguNzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVjMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+");

-webkit-animation: line 1s;

animation: line 1s;

}

.menu li:hover a {

color: #51AE3C;

}

ВЫВОДЫ

Сегодня работа фирмы без представительства в сети (хотя бы в какой-то минимизированной форме, например – сайт-визитка) уже практически невозможна. Отсутствие сайта компании в сети резко уменьшает ее конкурентный уровень. Если существующая клиентская база у компании и останется, то наработка и расширение клиентской базы без сети уже невозможно. Так же стоит отметить особенности связанные с конкретным видом деятельности исследуемой компании. Компания позиционирует своей «фишкой» организацию тематических вечеров и мини-концертов, но в этой ситуации сразу же возникает проблема информирования потенциальных клиентов и постоянной публики. Другим аспектом можно рассмотреть бронирование мест, и хотя текущая реализация предполагает только наличие контактов для связи (телефон), определенные расширения и внедрение специальных модулей позволит интегрировать в сайт сервис бронирования столика. Наличие удаленного доступа к меню и пивной карте также делает сайт удобным и полезным для пользователя, что, в свою очередь, повышает уровень лояльности и расположенности клиента.

В процессе работы над проектов были проведены ряд исследований. Работа оказалась достаточно комплексной, так как все этапы выполнялись непосредственно автором. В спектр рассмотренных вопросов попали:

‑ теоретические исследования (инструменты, технологии, понятие фирменного стиля и его роль для компании);

‑ проектная деятельность и аналитические исследования (проектирование структуры сайта, подбор ключевых фраз и составление семантического ядра);

‑ практические навыки в дизайне, компьютерной графике и верстке страниц сайта.

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

Косвенным заданием в ходе реализации стала разработка логотипа компании с учетом требований клиента. В пунктах второго раздела приведены несколько альтернативных вариантов реализации логотипа. Один из реализованных вариантов применен в ходе реализации сайта бара «Габов Паб».

Цели работы достигнуты, задачи, поставленные во введении, выполнены в полном объеме. Структура и содержание работы отвечает тематике и требованиям.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ГОСТ ЕСПД 19.102-77 “Стадии разработки ”
Хеслоп «HTML с самого начала», Издательство: Спб: Питер 2015.
Орлов, Л. Как создать электронный магазин в Интернет. - М.: Альянс-пресс, 2016.
«PHP, Mysql и Dreamweaver MX 2008. Разработка интерактивных Web-Сайтов.» Дронов В. А. — Спб.: Бхв-Петербург, 2011. - 448 с : ил.
Балабанов И.Т. - «Торговля через виртуальный магазин» /«Электронная коммерция»/ 2015 г. с.195-197
Паршенцев А.А. Проблема и перспективы развития электронных магазинов // Маркетинг в России и за рубежом. - 2008. - № 3. - С. 84-89.
CMS List. Обзор cms. Сайт о системах управления сайтом. [электронной ресурс] // Режим доступа: http://www.cmslist.ru
Добробабенко Н. С. Фирменный стиль: принципы разработки. М., 2009.
Фирменный стиль: учеб методический комплекс / Е.А.Антонович, А.Б.Максимова; за наук. ред. проф. Е.А.Антоновича. - М.: НАКККиМ, 2012. - 48 с.
Шкардун В.Д., Ахтямов Т.М. Оценка и формирование корпоративного имиджа предприятия // Маркетинг в России и за рубежом. 2010. № 3.
Канферер Н. «Торговая марка: испытание практикой» ‑ Новосибирск: СП "Интербук", М. 2002. - с.154.
Буковецкая О. Дизайн текста: шрифт, эффекты, цвет. М.: Прогресс. 2000. 248с.
Ярлыков А. Инструменты Интернет-маркетинга [Электронный ресурс] / А. Ярлыков // Эффективные инструменты Интернет-маркетинга. - 2013. - Электронный ресурс [режим доступа]:http://takmak51.ru/
Плескачев В.Л. Технологии электронного бизнеса: Монография/В. Л. Плескачев. - М.: МНЭУ, 2012. - 223 с.
Новомлинский Л. Интернет-стратегии каждый выбирает по себе [Электронный ресурс] / Л. Новомлинский. - Информационно-консалтинговый центр по электронному бизнесу. - Режим доступа: - http://www.e-commerce.ru/analytics/analytics-part/analytics13.html
Веб-сайт [электронной ресурс] // Режим доступа: http://www.webtec.com/articles/index/view/2011-05-05/web-site
Компания Nexo [электронной ресурс] // Режим доступа: http://nexosa.com/en/ – название с экрана
Компанія QSC [электронной ресурс] // Режим доступа: http://qsc.com
Б. Хоган HTML5 и CSS3. Веб-разработка по стандартам нового поколения– 4-е изд. – СПб.: Издательский дом «Питер», 2010. – 260 с.
Питер Лабберс, Брайан Олберс, Фрэнк Салим HTML5 для профессионалов. Мощные инструменты для разработки современных вебприложений – СПб.: Издательский дом «Питер», 2011. – 272 с.
Стармер А. The Color Scheme Bible: Inspirational Palettes for Designing Home Interiors, ‑ М .: Арт-Родник, 2014, 256 стр.