Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Javascript генерирует служебные элементы страниц.
краткое содержание

Javascript генерирует служебные элементы страниц.

Использование JS для уменьшения траффика - генерация повторяющихся элементов страниц сайта - шапки, тегов оформления. Учёт восприятия страниц поисковиками - прописывание важных ссылок и контента в HTML.
Существует дней: 133
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Статья.
31.08.06

Генерация служебных элементов страницы.

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

Задача генерации повторяющихся частей страницы в подавляющем большинстве случаев в практике функционирования сайтов даже не возникает. Причин этому много, основная из которых - необходимость дополнительной работы над сайтом, создающей трудности для дальнейшей модификации страниц в визуальных HTML-редакторах. Проще говоря, после оптимизации вы уже так запросто не откроете страницу во FrontPage или DreamWeaver-е, чтобы поправить любой элемент в дизайнерской панели. Но если сайт небольшой, а время позволяет отточить технику управления содержанием страниц, может быть, стоит поробовать применить её хотя бы на ограниченном участке частопросматриваемых страниц. Расчёты по экономии траффика покажут, будет ли это выгодно. Выгода определяется не только соотношением затрат времени, но и приобретением практики управления страницами. Предварительно надо тщательно рассмотреть получаемые плюсы и минусы.

Как работает генерация частей страницы. Как уже упомянули в аннотации, идея генерации проста. Вместо того, чтобы каждый раз при загрузке страницы выдавать HTML-код, выдаём тег скрипта с вызовом функции генерации страницы. Функция содержит операторы document.write(). Когда страница загружается они вставляют HTML-код в поток документа, так же, как делает оператор echo или print в PHP.

Очень часто у начинающих программистов имеется недопонимание принципа действия document.write() в плане того, когда его можно применять и чем он отличается от свойства innerHTML, которое вместе с document.write в учебниках, к сожалению, не преподаётся. Причина в том, что document.write - довольно старый оператор (точнее, метод), и традиционно он преподавался без появившегося позже innerHTML. Разница же в том, что первый используется на этапе, когда страница ещё не загружена, и его параметр помещает теги и текст непосредственно в поток документа (в старых браузерах типа NN4 не всегда это было возможно - нельзя было, например, разрывать начало парного тега, генерируя его начало и выдавая в коде HTML его конец. В новых браузерах, как показало тестирование, мы можем это делать совершенно произвольно, подобно тому, как делаем вставки <?="текст".выражение?> в PHP. Поэтому (замечание для начинающих) используем document.write() только в процессе формирования страницы.

Идея заключается в том, чтобы выделить повторяющиеся части страниц и вынести в файл *.js, который будет кешироваться браузером. А значит, с каждой загрузкой новой страницы мы экономим, как и при выносе стилей в файл, часть траффика. Важно, чтобы расширение файла было "js", а не, скажем, "php". Так сделать можно, но кеширование прекратится.

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

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

Нельзя генерировать метатеги, иначе они перестанут работать. Они в большинстве читаются роботами и должны идти сразу после <html> или <title>. Попробуйте вставить хотя бы один содержательный символ перед метатегами - тут же увидите, что визуальные метатеги перестали работать (<meta http-equiv="imagetoolbar" content="no">, например). Если такую оплошность сделать с поисковыми метатегами (robots), последствия будут, менее заметными, но более печальными. Поэтому метатеги оставляем в HTML, в лучшем случае генерируя их на сервере.

Получим менее наглядную структуру сайта. Часть кода вынесется в отдельный файл, перемешается в скриптах, будет заключена в переменные скриптов. При редактировании шапок уже будет недостаточна работа верстальщика со страницами. (С SSI - та же история, но там хотя бы имеем блоки HTML-кода, а здесь - JS.) Нужна прозорливость программиста, чтобы увидеть код HTML в переменных. Поддержка сайта удорожается. (В альтернативном методе с XSLT получаем то же.) Тут уж выбираем - или выделяем общие части сайта, чтобы быстрее их исправлять, но более квалифицированным верстальщиком, или имеем необходимость исправлять заголовки всех страниц.

Подобные опрерации по оптимизации траффика и заданию метода генерации дизайна делаются через технологию XSLT и файл *.xsl, который тоже кешируется браузером. Но минус его в том, что пока он не поддерживается старыми и довольно распространёнными версиями Оперы (до 9-й). Назначение технологии больше в том, чтобы менять дизайн страниц, передавая контент в XML (XHTML). Наш метод вроде бы делает то же самое - позволяет менять шапку и дизайн сразу для всех страниц. Но не забываем, что это менее удобно, чем было редактирование всей страницы в визуальном редакторе, поэтому к плюсам не относится.

Об удобстве дальнейшей вёрстки страниц сайта. Неплохо, если генерацию частей страницы мы применим после всех доработок дизайна. Но на практике придётся в будущем не раз возвращаться к редизайну закодированных частей страницы. К сожалению, в редакторах HTML нет возможности визуально редактировать генерируемые части - для этого идею генерации надо было бы "вшить" в идею самого редактора. Поэтому, прежде чем приступать к оптимизации траффика сайта за счёт генерации заголовков, подумайте о всех последствиях, связанных с редизайном, как положительных, так и отрицательных. Если вы верстаете дизайн в коде HTML, нет проблем верстать части страниц, вынесенные в файл *.js, лишь бы их расположение не нарушало привычный порядок написания. Если вы хотите вернуться в визуальный редактор, придётся возвратиться к прежней, неоптимизированной версии сайта или шаблона страницы.

Не "перестарайтесь" с оптимизацией. Надо помнить, что наш "прогрессивный" метод оптимизации сайта очень начинает напоминать попытки ввести поисковики в заблуждение подстановкой для них нужного контента (клоакинг). Никто не сможет указать и проконтролировать здесь грань между порядочным и непорядочным использованием возможностей JS, кроме самого автора страниц. Если вы пишете код для помощи в ориентации поисковику, абзац, написанный дял него, будет содержать недостающие слова и органично вписываться в сайт. Слова, идущие вразрез с содержанием страницы, будут иметь все основания дать запрет на участие всего сайта в работе по поисковым запросам - проще говоря, сайт могут "забанить" (англ. ban - запрещение) за некорректную подстановку контента для поисковиков, а политика "бана" сайтов целиком определяется руководством и службами конкретного поисковика.

Такой имеем перечень достоинств и недостатков. Достоинство - одно-два, недостатков несколько. Многие из них обусловлены неприспособленностью редактора для работы с кодированными частями страниц. Налицо усложнение работы с сайтом. За каждое достоинство надо чем-то платить, и далее вступают в расчёт вес того и другого...

Не остановившись перед трудностями и зная подводные камни, делаем следующие организационные мероприятия. В обобщённом шаблоне страницы, нарисованном на бумаге, выделяем места, которые надо оставить для поисковиков и которые можно закодировать. Ищем в коде HTML соответствующие места, и далее остаётся механическая работа по кодированию.

Процесс перевода шаблона страницы в оптимизированную версию будет выглядеть просто - берём все подлежащие кодированию участки HTML-кода и переносим их в скрипты с операторами document.write(). Попутно называем повторяющиеся части кодов именами строковых переменных, делаем циклы для вывода участков меню. Конечный текст будет представлять собой чередование некодированных участков и тегов скриптов с вызовом функций, определения которых будут находиться в файле *.js . Функции могут иметь параметры - меняющиеся от вызова к вызову функции адреса в тегах А или IMG, отдельные названия ссылок или участков страницы, подсказки. Необходимо помнить, что всё, что будет отображено в параметре функции или в скрипте, не будет видно поисковиком и теми редкими посетителями, которые отключили Javascript. Для поисковика вопрос можно решить, перечислив необходимые ключевые слова в специально написанном для этого абзаце и проверив, как это будет выглядеть.

Как оперативно отключать Javascript. Это удобно делать в Firefox. Tools-Options-Web Features-"Enable Javascript". Выключаем чекбокс - тут же видим страницу без него.

 

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

Демонстрация примера - статья об объектной модели документа (DOM).

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

Чтобы не быть многословными с кодами, приведём не все выдержки из autom.js, в котором помещены общие места страниц. В коде страницы http://javascript.aho.ru/files/article-DOM.shtml наблюдаются такие вызовы процедур генерации:

<script>capHead();d.write('<base href=http://javascript.aho.ru>');
capHead2()</script>
<!-- конец таблицы в шапке, невидимой без JS -->
<!-- всеми видимая таблица -->
<table width=771><tr class=artcTd><td width=16%
  title="javascript.aho.ru: 
 главная страница"style=
 ...
<a href=/article4.shtml>Ссылки</td></tr></table>
<!-- конец всеми видимой таблицы -->
<script>plavBlok();d.write(
  '<table width=771 border=0 style="table-layout:fixed">')
aPart=[1,1];pTop(0,sMnuL); // таблица, для скрипта
d.write("<base href="+location.href+">")
</script>
<H1 style="margin-bottom:0;">...<i>заголовок,
  содержание</i>...</H1>
<script>pTop2() //продолжение обрамления таблицы в скрипте
</script><br>
<table class= ...далее - содержание страницы в HTML ...
 ...

и

<script>vPart++;aPart=[1,1,0,0,0,0,0,0,0,0];
  pTop('24.08.2006')</script>
<h1 align=center>...2-й заголовок...</h1>
<script>pTop2() /*генерация обрамления таблицы*/ </script>
 ...
<script>pBot('--???--');pTop('24.08.2006')</script>
<h5>Структура документа в DOM</h5>
<script>pTop2()</script>

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

Содержимое процедур capHead(), capHead2(), plavBlok(), pTop(), pTop2(), pBot():

d=document;
capHead=function(){d.write('<table class=greyBack width=771 ...
...генерируется шапка страницы с баннерами...
}
capHead2=function(){d.write('<table width=771 border=0 ...
...2-я таблица в шапке,
  не сделаны вместе, чтобы включить между ними код...
}
plavBlok=function() //...генерация абс.позиц.слоёв, не по теме
 ...
pTop=function(Dat,Typ,Ico){//верх и левая сторона яч.табл.
d.write(s='<tr valign=top><td width=120 class=greyBack>'
+(Dat?'<div class=mnuLeft title="дата посл. обновления">'
+Dat.replace(/(\d{1,2})\.(\d{1,2})\.\d{0,2}(\d{2})/,
  "$1.$2<sup>$3</sup>")+'</div>':'')
+(Typ?'<div class=mnuLeft>'+Typ+'</div>':'')
+'</td><td width=8 class=artc title="'
+(aPart[vPart]?expRaz:expC)+expVer+'"'
+'id=artc'+vPart+'><A name=part'+vPart+'><img src='
+(Ico==null?'/images/favicon3.gif':Ico)+' width=7 height=10>
</A></td><td width=517 class=ssylkiHead>')
}
pTop2=function(Styl){//отделение несворачиваемой части ячейки
  //  от заголовка ячейки - не по теме статьи
d.write('<div id=artcBdy'+vPart+' class=artcBdy style="display:'
+(aPart[vPart]==0?'none':'block')+';'+(Styl?Styl:'')+'">')}
pBot=function(Aut,Forr){//правая сторона яч.табл. и низ
d.write('</div></td><td class=greyBackAuthor>'+(Aut?'Автор: '
+Aut+'</i></div>':'')+(Forr?'<div style="text-align:right"><i>Для '
+Forr+'</i></div>':'')+'</td></tr>');vPart++}

Подробности процедур не представляют интереса - просто вывод блоков, их нумерация (vPart) для работы скрипта скрывания-раскрывания, массив aPart для указания на то, какие блоки будут раскрыты при загрузке страницы. Но обратите внимание в pTop(), pBot(), как вольно можно обращаться при генерации HTML с кодом - после текста заголовка выводится закрывающий тег ячейки, и заголовок оказывается в сгенерированной таблице.

Третий способ генерировать содержание страницы, кроме document.write и innerHTML - работа через объектную модель документа (DOM). Сторонники стандартов назовут её самым правильным подходом. Правда, он страдает многословностью и ненаглядностью - содержание, вынесенное в скрипт станет ещё труднее читать. Пока первые 2 способа работают во всех браузерах, нет смысла от них отказываться.

 

Подобную технику можно (и только её) использовать для просмотра локальных файлов HTML. С ними уже не помогут ни SSI, ни PHP для генерации повторяющегося оформления (как мы были правы, когда взялись за Javascript :) ). Метатеги тоже не нужны, кроме визуальных, и тогда в заголовках файлов останутся короткие скрипты вызова функций генерации и очень ограниченное меню на случай отключения JS. Генерируемое меню можем сделать богатым, не злоупотребляя размерами файлов в архивах.

Уровень: для программистов
 javascript.aho.ru , © I.Svetlov, 2005-2006 
Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
9. Многуровневое меню с навигацией по наведению мыши.
8. Ключевые слова новых технологий, которые нужно знать разработчику веб-страниц.
3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
5. Древовидное меню, подход к данным, отделение данных от представления.
6. Многонедельный календарь со ссылками. (По списку строится календарь.)

Форум сайта рассылки, почта автора рассылки.

 
В избранное