4.5 5 на основании 8 оценок и 8 отзывов

Шаблон для сайта

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

Напомним, все, что будет описано дальше, имеет отношение именно к технической части, а не к маркетинговой!

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

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

двух колоночный макет

В html коде отдаваемом сервером, должен находиться только информационный контент, а интерфейсная часть документа будет формироваться на стороне браузера. Есть два способа реализации подобного подхода это использование JS и/или XSLT. Мы будем использовать вариант на JS.

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

двух колоночный макет

Скачать шаблон в архиве

Всё что находится на зелёном фоне, есть в html коде страницы отдаваемой сервером, всё остальное формируется браузером клиента с помощью JS. Некоторые методы, используемые в нашем примере, мы рассматривали ранее в статье скрытие ссылок

Для реализации будем использовать:

  • JS библиотека jquery (js/jquery.js)
  • Плагин jquery.livequery для работы с ещё несуществующими элементами DOM (js/jquery.livequery.min.js)
  • Плагин jquery.cookie для работы с cookies (для реализации работы пагинаторов) (js/jquery.cookie.js)
  • Плагин jquery.history для правильной работы кнопок вперёд/назад браузера (js/jquery.history.js)
  • И собственно наш JS (js/jss.js)

Идеология метода следующая, выносим в отдельный текстовый файл все повторяющиеся блоки (шапка, меню, футер) – это и будет наш шаблон. При обращению к серверу за документом, будет отдаваться только информационная составляющая страницы. После загрузки браузером DOM, наш JS сформирует новый DOM и покажет его пользователю.

Файл cod/diz.txt – в нём находится шаблон сайта, в него вынесена интерфейсная часть страниц (те элементы, которые повторяются на всех страницах сайта, в него мы будем встраивать html отдаваемый сервером). Места, в которые необходимо встраивать содержимое, в шаблоне отмечены метками:

  • <!--nav--> - хлебные крошки (микроформат понимаемый гуглом)
  • <!--texts--> - блок с дополнительным контентом (блок перелинковки)
  • <!--sitcon2--> - основной контент страницы

Обратите внимание в шаблоне нет ни одной ссылки (тега <a>), он заменён на элементы с class="loc …"

Наш JS, начало. Объявление переменных
NewEventPage
количество элементов выводимых пагинаторами
pathmap
путь к карте сайта
poNav
метка для поиска в шаблоне файла cod/diz.txt блок «хлебных крошек»
poSitcon2
метка для поиска в шаблоне файла cod/diz.txt основной контент страницы
poTexts
метка для поиска в шаблоне файла cod/diz.txt дополнительный блок
namePage
имя текущей страницы без расширения
cookieName
переменная для работы с cookies плагин jquery.cookie
cookieOptions
установка опций работы плагина jquery.cookie

после загрузки DOM, происходит разбор html отданного сервером по переменным для вставки в шаблон, везде идёт проверка на существование, если нет то переменной присваивается значение пустой строки (для предотвращения некорректного отображения браузером не установленных значений)

jQuery(document).ready(function(){
var codNav=($('#nav').size()>0) ? '<div xmlns:v="http://rdf.data-vocabulary.org/#" id="nav">'+$('#nav').html()+'</div><hr />' : '';
// блок навигации «хлебные крошки»
var codSitcon2=($('#sitcon2').size()>0) ? '<div id="sitcon2">'+$('#sitcon2').html()+'<br class="perenos" /></div>' : '';
// блок основного контента
var codTexts=($('#texts').size()>0) ? '<span class="h2">Популярные разделы</span><dl id="texts">'+$('#texts').html()+'</dl>' : '';
// дополнительный блок
$('body').html('');
// очистка содержимого страницы (тега body)

Post запрос шаблона.

$.ajax({
type:'POST',
dataType:'text',
url:'cod/diz.txt',
cache:false,
success:function(data){
//в случае успешно выполненного запроса замена меток в шаблоне на html код полученный из текущей страницы
var DizCod=data;
var NewCod=DizCod.replace(poNav,codNav);
NewCod=NewCod.replace(poSitcon2,codSitcon2);
NewCod=NewCod.replace(poTexts,codTexts);
$('body').html(NewCod);
// формирование новой DOM (отображение страницы)
}
});
});

Теперь нам необходимо проверить есть ли в меню пункт, совпадающий с текущей страницей и раскрыть этот пункт меню и подсветить название раздела в меню:

$('#menu_left li ul li').livequery(function(){
if(namePage==$(this).attr('class').replace('loc ','')){
$(this).parents('li').addClass('bt');
$(this).parents('li').css({'color':'red'});};
},function(){});

Вот нам и понадобился плагин jquery.livequery, помимо того что он может работать с ещё не существующими элементами, в качестве события ему можно передать свою функцию. В нашем случае при совпадении имени класса в меню с именем страницы, происходит отображение (разворачивание элементов) пунктов меню и подсветка названия раздела в котором этот пункт меню находится.

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

$('.loc').livequery(function(){
if($(this).attr('class').replace('loc ','')==namePage){
$(this).removeAttr('class').css({
'color':'red','cursor':'auto'})}
},function(){});

Из-за того что мы не используем в тег <a> для не нужных нам ссылок, нам необходимо написать обработчики событий mouseover, mouseout и click.
Для элементов левого меню:
Наведение мышки на любой первый элемент <li> в меню (название разделов) – подсветка его красным

$('#menu_left>li').livequery('mouseover',function(){
$(this).css({'color':'red'});
});

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

$('#menu_left>li').livequery('mouseout',function(){
if($(this).children('ul:visible').size()<1){$(this).css({'color':'#1C6ABC'});}
});
});

Открытие/закрытие элементов меню (событие click) на названии разделов

$('#menu_left>li').livequery('click',function(){
$(this).toggleClass('bt');
$(this).css({'color':'red'});
});

Обработка события mouseover на элементах меню подсветка красным

$('#sitcon1 li.loc').livequery('mouseover',function(){
$(this).css({'color':'red'});
});

Возврат в исходное состояние

$('#sitcon1 li.loc').livequery('mouseout',function(){
$(this).removeAttr('style');
});

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

$('.loc').livequery('click',function(){
if($(this).attr('class').replace('loc ','')!=namePage){
if($(this).attr('class').replace('loc ','').length>0) {newurl($(this).attr('class').replace('loc ','')+'.html');}
else {newurl('http://www.site.ru');}}
});

Открытие новой страницы вынесено в отдельную функцию. Сначала мы записываем новый URL в историю браузера, средствами плагина jquery.cookie (это необходимо для корректной работы кнопок браузера «вперёд»/«назад»), а затем происходит рефреш текущей страницы с новым URL

function newurl(url){
jQuery.history.load(url);
document.location.replace(url);
};

Переход по внешней псевдо ссылке, с использованием ajax, подробно описан в статье, единственное отличие это использование плагина jquery.livequery, т.к. всех этих элементов нет изначально в DOM. Пример такой ссылки на «Страница раздела (2)» page-2.html (для работы необходим сервер)

$('.web').livequery('click', function() {
……

С основным покончили, перейдём к некоторым интересным возможностям и хитростям.
Наш шаблон представляет собой два раздела, каталог товаров и новостей. Все, наверное, сталкивались с проблемой дублей на страницах сортировок и листинга. Мы попробовали решить эту проблему с технической стороны учитывая сеошные «заморочки» и предлагаем вам, два варианта пагинаторов, показ неиндексируемого контента и Что делать с неуникальными изображениями

Сколько стоит оптимизация сайта
Единственный однозначный ответ: стоимость для каждого web-ресурса индивидуальна!
Юзабилити
это степень удобства работы человека с интерфейсом