Разработка промо-сайта «Моторное масло Magnum»

Содержание:

Введение

Сайт (от англ. website: web — «паутина, сеть» и site — «место») — информационная система, предоставляющая пользователям сети Интернет доступ к своему содержимому и функционалу в виде упорядоченного набора взаимосвязанных HTML-страниц. Страницы сайтов — это файлы с текстом, размеченным на языке верстки (HTML, XML, XHTML, HTML5 и др.) Языки вёрстки позволяют форматировать текст, различать в нём функциональные элементы, создавать гиперссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением в неё таблицы стилей на языке CSS или сценариев, написанных на языке программирования.

Промо-сайт – это сайт, создание которого направлено на продвижение определенного бренда, товара или услуги на рынке. Основная цель промо-сайта: увеличение продаж. Соответственно под покупателем подразумевается конечный потребитель, который пользуется Интернетом.

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

Важен тот факт, что промо-сайт запускается параллельно с оффлайновой рекламной кампанией. Информация сайта дублируется или дублирует информацию из различных источников рекламной поддержки. Реклама в СМИ (прессе, радио, ТВ) вызывает первичный интерес к рекламируемому продукту.

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

Далее представлены требования к разрабатываемому проекту.

1. Требования к разрабатываемому проекту

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

При разработке сайта должны быть использованы преимущественно светлые стили. Основные разделы сайта должны быть доступны с первой страницы. На первой странице не должно быть большого объема текстовой информации.

В дизайне сайта не должны присутствовать:

– мелькающие баннеры;

– много сливающегося текста.

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

Контентная область первой страницы должна делится на следующие разделы:

– вступительный видеоролик о компании с описанием производимых продуктов и самой технологии производства моторного масла. Под медиаблоком содержится кнопка «Попробовать», ведущая на раздел «Продукты »;

– тезисное описание одного из продуктов компании в нескольких блоках, расположенная под медиаблоком;

– краткая контактная информация – телефон и e-mail компании;

– с левой стороны страницы отображается облегченная навигационная панель, которая обеспечивает переход к основным пунктам меню сайта;

– поле поиска – предназначено для выполнения полнотекстового поиска по сайту;

– счетчик и ссылка на страницу обмена ссылками.

Графическая оболочка внутренних страниц должна делиться на следующие разделы:

– графическая шапка;

– навигационное меню сайта (переход к основным пунктам меню);

– ссылка «На главную»;

– навигационная панель по подразделам выбранного раздела сайта;

– поле для отображения контента выбранной страницы сайта;

– внизу страницы – краткая контактная информация;

1.1. Требования к системе управления сайтом

Для получения доступа к административной части сайта необходимо указать определенный адрес в строке браузера и пройти авторизацию. После авторизации доступны управление разделами сайта и управление наполнением сайта.

В состав дополнительных функций административной части должны входить:

– при попытке входа в закрытый раздел у пользователя не прошедшего аутентификацию, должен быть запрошен логин и пароль;

– после прохождения аутентификации система должна проверять полномочия пользователя на доступ к запрошенному разделу.

1.2. Требования к видам обеспечения

Для реализации статических страниц и шаблонов должны использоваться языки HTML и CSS. Исходный код должен разрабатываться в соответствии со стандартами W3C.

Для реализации интерактивных элементов клиентской части должны использоваться языки JavaScript и DHTML.

Для реализации динамических страниц должен использоваться язык PHP.

Все ссылки на сайте должны быть относительным (за исключением внешних).

1.3. Цель разработки интернет-приложения

Целью данной работы является разработка промо-сайта «Моторное масло Magnum» с возможностью последующего размещения в сети Интернет.

Сайт обеспечивает реализацию следующих функций:

• Имиджевая.

Формирование стиля и образа компании. Стилевое оформление сайта должно соответствовать корпоративному стилю компании.

• Информационная.

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

• Рекламная.

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

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

2. Общие требования к сайту

2.1. Стилистическое оформление

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

Шрифты, используемые в графических элементах сайта, выбираются произвольно при условии не противоречия корпоративному стилю. Шрифты, используемые в текстовом материале сайта, должны соответствовать стандартным шрифтам браузеров: Helvetica/Arial, Times New Roman, Courier.

Допустимо использование иных распространенных шрифтов (Verdana, Tahoma и др.) в том случае, если их замена на стандартные шрифты не приведет к визуальному искажению текста. Размер (кегль) шрифтов должен обеспечивать удобство восприятия текста при минимально допустимом размере экрана.

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

Цвета: согласно стиля, выбранного компанией.

Требования к функциональности веб-сервера:

Веб-сервер должен обеспечивать возможности:

– управления содержанием и структурой сайта через систему управления контентом;

– осуществления обратной связи c пользователями: прием отзывов и запросов пользователей по e-mail через заполнение специальных форм на сайте;

– обработки статистики посещений (подключение внешней системы статистики HotLog);

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

Требования к браузеру:

Cайт должен обеспечивать корректное отображение данных в следующих браузерах: Internet Explorer 8.0 и выше (Microsoft), Opera 12.0 и выше (Opera Software), Netscape 11.0 и выше (AOL Netscape).

Требования к верстке:

Сайт должен быть оптимизирован для просмотра при разрешении 1024*768, 1280*1024 без горизонтальной полосы прокрутки и без пустых (белых) полей для основных типов разрешения.

Мета-теги и контент сайта:

На этапе изготовления сайта должны быть настроены с учетом требований поисковых систем, что обеспечить продвижение сайта по ключевым словам в руcскоязычных поисковых системах Yandex, Aport!, Rambler, Google.

2.2. Структура и описание сайта

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

Описание контента разделов сайта:

Главная страница – текст + иллюстрации

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

Контентная область главной страницы делится на разделы:

«Описание продукта» - содержит краткую информацию о конкретном продукте, отображенном в этом разделе.

«О продукте» - краткое тезисное описание, кнопка «Попробовать» ведет на раздел «Продукты»

Страница «Продукты» – текст + иллюстрации

На странице «Продукты» размещается ассортимент предлагаемых компанией товаров. Также есть возможность подробнее ознакомиться и узнать о свойствах конкретного продукта. Контентная область страницы «Продукты» делится на разделы:

«Ассортимент товаров» - расположен на правой стороне страницы в виде списка изображений-ссылок реализуемых товаров, при клике на которые, открывается соответствующий изображению продукт с поясняющей информацией к нему.

«Описание продукта» - при клике на крупное изображение выбранного товара осуществляется переход на страницу «О продукте».

Страница «О продукте» - текст + иллюстрации

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

Страница «О бренде» – текст + иллюстрации

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

Страница «Контакты» – раздел для выбора способа связи, текст с контактной информацией

Раздел «Контакты» включает в себя фоновое изображение и 5 блоков с информацией о контактах производителя. Также на странице содержится текстовый блок с описанием местоположения и деятельности производителя. Блок «АЗС» включает в себя адреса и телефоны АЗС, где можно приобрести продукт производителя. Блок «Дистрибьюторы и партнеры» включает контакты партнерских магазинов и других точек сбыта продукции. Блок «Офисы» содержит контакты представительств компании-производителя, в которые можно обратиться с вопросами по качеству продукции, вопросами партнерства и другими вопросами по сотрудничеству. Блок «Горячая линия» включает контакты горячей линии производителя, по которым можно обратиться с вопросами, связанными с приобретенной продукцией.

Заключение

В рамках курсового проектирования спроектировано и разработано Интернет-приложение на языке высокого уровня. В данном курсовом проекте описывается процесс разработки промо-сайта «Моторного масла Magnum», этапы проектирования и создания концепции проекта, а также непосредственно сам производственный процесс.

Список литературы

http://wikipedia.org

И.В. Успенский ИНТЕРНЕТ-МАРКЕТИНГ Учебник.- СПб.: Изд-во СПГУЭиФ, 2003.

http://book.promo.ru

http://htmlbook.ru

http://php.net

Константин Максимюк «Новый интернет для бизнеса» ISBN 978-5-699-41320-1; 2010 г.

Приложение

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Пример страницы с таблицей №1.</title>

</head>

<body>

<table width="100%" border="1" cellspacing="1" cellpadding="1" bgcolor="">

<tr>

<th height="91" colspan=3 align="center" bgcolor="#66FF00">

<strong>Шапка сайта</strong></th>

</tr>

<tr>

<th height="47" colspan=3 align="center" bgcolor="#BCEE68">

<table width="50%" border="2" cellspacing="1" bgcolor="#4876FF">

<tr>

<td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td>

<td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td>

<td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td>

<td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td>

</tr>

</table>

</th>

</tr>

<tr>

<th width="17%" height="498" align="center" bgcolor="#BFEFFF">левый блок</th>

<th width="65%" align="center" bgcolor="grey">

<table width="90%" border="2" cellspacing="1" bordercolor="#0000CC">

<br>

</th>

<th width="18%" align="center" bgcolor="#98F5FF">правый блок</th>

</tr>

<tr>

<th height="49" colspan=3 align="center" bgcolor="#1E90FF">Подвал сайта</th>

</tr>

</table>

</body>

</html>

<body>

<div id="pagewrap">

<div id="header">

<h1>Website Title</h1>

<ul id="navigation">

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul><!-- end #header -->

<div>

<div id="contentwrap">

<div id="maincontent">

<h2>Main Content Title</h2>

<p>Main content, which is so much more

important than the secondary content that it

makes one teary with emotion.</p>

</div><!-- end #maincontent -->

<div id="secondarycontent">

<h3>Sidebar Title</h3>

<p>Sidebar content, which is not as important

as the primary content (which is why it is in

the sidebar)</p>

</div><!-- end #secondarycontent -->

</div><!-- end #contentwrap -->

<div id="footer">

<p>standard copyright and footer

information</p>

</div><!-- end #footer -->

</div><!-- end #pagewrap -->

</body>