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

Текст из файла (страница 4)

Рисунок 22 – Блок с изображение байка

За ним на главной странице следует элемент, содержащий в себе видео с продукцией, которую представляет компания.

Рисунок 23 – Блок с видео на главной странице

Код блока с видео:

<div id="presentation">
<h2>Бесконечные дороги с <strong>FAT</strong> BIKE</h2>
<div id='presentation-block' code='fmKAZ5qlqvE'></div>
</div>

Также необходим код JS для подключения видео с канала YouTube:

$(document).ready(function(){
//presentation
$('#presentation').click(function(){
var params = { allowScriptAccess: "always" };
var atts = { id: "presentation-block" };
var code = $('#presentation-block').attr('code');
swfobject.embedSWF("http://www.youtube.com/v/"+code+"?enablejsapi=1&nologo=1&ps=docs&modestbranding=1&disablekb=0&playerapiid=ytplayer&autoplay=1&controls=0&rel=0&showinfo=0&autohide=1&color=white&theme=light",
"presentation-block", "100%", "100%", "8", null, null, params, atts);
});
});

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

Рисунок 24 – Информация и подписка

С точки зрения программной реализации блок с информацией не представляет особого интереса. Код для подписки:

<div id="subscribe">
<div class="sub-text">
Интересуетесь новым видом
велосипедов Fatbikes? Все, что
вы хотели о них знать - в нашей
новостной рассылке, оставайтесь
с нами!
<span class="arrow-green"></span>
</div>
<div class="sub-form">
<h2>ПОДПИСКА НА РАССЫЛКУ</h2>
<?php print render($subscribe); ?>
</div>
</div>
</div>

И, наконец, нижнее меню страницы, включающее в себя блок со ссылками «О компании», «Стать дилером» и «Контакты»; ссылки на страницы в социальных сетях и телефонный номер.

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

<div class='social fleft'>
Мы в соцсетях —
<ul class='clearfix'>
<li><a class='f_iko vk' target="_blank" href="http://vk.com/tokyobikes" title="Вконтакте"></a></li>
<li><a class='f_iko fb' target="_blank" href="https://www.facebook.com/pages/Tokyobikes/562987217139287" title="Facebook"></a></li>
<li class='last'><a class='f_iko tw' target="_blank" href="https://twitter.com/tokyobikes" title="Твиттер"></a></li>
</ul>
</div>

Рисунок 25 – Ссылки на социальные сети

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

<?php if ($tabs): ?><div id="tabs-wrapper" class="clearfix"><?php endif; ?>
<?php print $breadcrumb; ?>
<?php print render($title_prefix); ?>
<?php if ($title && (!$is_front)): ?>
<h1<?php print $tabs ? ' class="title" id="page-title"' : '' ?>><?php print $title ?></h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><?php print render($tabs); ?></div><?php endif; ?>
<?php print render($tabs2); ?>
<?php print $messages; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
<?php print render($page['content']); ?>

Рисунок 26 – Блоки с велосипедами

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

Рисунок 27 – Форма для подачи заявки

Также на каждой странице есть ссылка на корзину (рисунок 28).

Рисунок 28 – Ссылка на корзину

Код элемента:

<?php if (empty($cart)): ?>
<div class="cart_one_row empty">Ваша корзина пуста</div>
<?php else: ?>
<div class="cart-link"><?php print l('','cart',array(
'attributes'=>array('alt'=>'Перейти в корзину','title'=>'Перейти в корзину')
)
); ?>
</div>
<div class="cart_one_row">Товаров — <?php print count($cart); ?></div>
<div class="cart_one_row sum">На сумму — <?php print $price; ?></div>
<?php endif; ?>

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

Рисунок 29 – Велосипед Fuji Wendigo 2015

Рисунок 30 – Характеристика велосипеда Fuji Wendigo 2015

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

3 Продвижение сайта

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

– у каждой страницы прописаны (или сгенерировать автоматом) уникальные (отличающиеся друг от друга) теги title, description, keyword;

– предусмотрена от имени администратора возможность редактирования тегов title, description, keywords, h1 независимо друг от друга и каких-либо других элементов сайта;

– заголовок каждой страницы обернут в h1. Тег h1 не содержит стилей и используется только 1 раз на странице непосредственно для оборачивания названия (заголовка) страницы. Подзаголовки на странице можно оформлять тегами <h2>, <h3>, <h4>;

– тексты на сайте технически уникальны и соответствуют правилам русского языка. Перед тем как выложить на сайт, сайт был проверен в Advego Plagiatus (http://advego.ru/plagiatus/top/). Если уникальность меньше 90%, ее необходимо повышать, перефразируя тексты (можно также заказать уникальный текст за деньги);

– между текстами расположены ссылки там, где это уместно;

– названия файлов изображений, не относящихся к дизайну, содержат в себе человекопонятное наименование (пример: kondicioner_mitsubishi_arx500.jpg). Также, для каждого изображения прописан уникальный атрибут ALT, описывающий содержимое или действие, содержащиеся на картинке, либо совпадающий с названием товара. У разных изображений атрибуты ALT и названия изображений должны отличаться хотя бы незначительно (пример: kondicioner_mitsubishi_arx500.jpg, kondicioner_mitsubishi_arx500_small.jpg);

– Java подгружается из внешних файлов (чтобы не перегружать код страниц), если будет необходимость расположения скриптов непосредственно в коде - они должны быть закрыты в <noindex>;

– на каждой странице сайта количество ссылок на сторонние сайты не превышает 2-х. Если ссылок больше, лишние закрываются в <noindex>;

– у каждой страницы сайта только один URL адрес. Все дублирующие адреса исключены;

– при запросе несуществующей страницы сайт выдает код 404 и 404 страницу с сообщением о том, что страницы не существует;

– сайт выполнен без применения фреймов;

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

– размер текста на сайте: от 2000 до 3000 печатных знаков без пробелов (если это не статья, для статьи можно больше). В отдельных случаях можно меньше (там, где текст особо не нужен);

– на сайте нет пустых страниц;

– со всех внутренних страниц сайта с логотипа есть ссылка на главную страницу;

– стили подгружаются из внешних css фалов;

– подключена hcard;

– подключены Я.Вебмастер и Google Analitics.

Результаты поисковой оптимизации наблюдались в течение месяца. Как результат поисковой оптимизации можно расценивать позиции сайта в поисковых системах Google и Яндекс по необходимым поисковым запросам, а также рост количества посетителей сайта по данным Яндекс.Метрика.

Ниже представлены результаты оптимизации в поисковых системах Google и Яндекс по запросу «токио байк».

Рисунок 31 – Позиции сайта до поисковой

оптимизации в Google

Рисунок 32 – Позиции сайта после поисковой

оптимизации в Google

Рисунок 33 – Позиции сайта до поисковой
оптимизации в Яндекс

Рисунок 34 – Позиции сайта после поисковой
оптимизации в Яндекс

Характеристики

Список файлов ВКР