iZhurnal

Скрипт для отображения списка похожих статей — обновленная версия

2010-11-20T23:39:00.004+07:00

Новая версия скрипта для отслеживания похожих сообщений блога. Основные изменения:

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

Принцип работы

Скрипт имеет 2 режима работы: с группировкой ссылок на посты по ярлыкам и плоский (общим списком). Принцип работы скрипта в режиме группировки:

Берётся список ярлыков текущего поста, из него отбрасываются ярлыки, занесенные в настройках в список игнорируемых.
Запрашивается с блога информация о постах, соответствующих оставшимся ярлыкам. (Параметр relposts_queryPostsPerLabel указывает, по сколько постов запрашивать для каждого ярлыка).
Полученные посты группируются по ярлыкам с учётом настроек переименования ярлыков.
В каждой группе удаляются лишние посты, если их количество превышает указанное в параметре relposts_showPostsPerLabel
Каждой группе постов назначается приоритет, заданный в настройках.
Группы ссылок на посты показываются на странице. Группы отображаются в порядке их приоритета, заданного в настройках. (Если у двух групп приоритет одинаков, первым показывается группа, идущая раньше по алфавиту.)
При показе групп проверяются параметры relposts_showLabels и relposts_prioDelta, и при выполнении соответствующих условий, вывод прекращается. (Подробнее ниже, в описании настроек.)

В плоском режиме скрипт работает иначе:

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

Настройка и установка

Аналогично изначальной версии скрипта, находим в шаблоне место, куда будем вставлять код. Обычно оно после строки <data:post.body/>.

Пишем туда:

<!--[relposts]-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<div class='relposts'>

 <div id='relpostsdataheader'></div>
 <div id='relpostsdatalisting'></div>

 <script type='text/javascript'>

 // Сюда будем вписывать настройки

 </script>

 <script type='text/javascript'>
 relposts_sourceLabels = []
 <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
   relposts_sourceLabels.push(&quot;<data:label.name/>&quot;);
  </b:loop>
 </b:loop>
 </script>

 <script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/relposts.js'></script>
</div>
</b:if>
</b:if>
<!--[/relposts]-->

Внутри тега script, где написано «Сюда будем вписывать настройки», следует поместить настройки скрипта. Впрочем и без настроек по умолчанию всё работает — можете сохранить шаблон и проверить. :)

Настройки (общие для обоих режимов):

relposts_headerPlain — использовать плоский или обычный режим. Значения: true, false.
relposts_excludeLabels — список ярлыков, которые следует игнорировать. Значение: массив строк.
relposts_queryPostsPerLabel — Количество постов, запрашиваемых для каждого ярлыка с блога. Значение: число.
relposts_renameLabels — таблица для переименования ярлыков. Если при переименовании названия 2-х или более ярлыко совпадают, посты этих ярлыков объединяются в выдаче. Значение: ассоциативный массив.
relposts_labelPrio — таблица приоритетов ярлыков. Обратите внимание: имена ярлыков даются в таблице в уже переименованном виде. Ярлыки, для которых приоритет не указан в таблице, имеют приоритет 1. Значение: ассоциативный массив.

Настройки, использущиеся в режиме группировки по ярлыкам:

relposts_excludeDups — исключать ли повторяющиеся ссылки в разных ярлыках. Значения: true, false.
relposts_showPostsPerLabel — сколько максимально постов отображать для каждого ярлыка. Если постов с блога запрошено больше, чем число relposts_showPostsPerLabel, посты выбираются случайным образом. Значение: число.
relposts_showLabels — сколько максимально ярлыков отображать. Ярлыки отображаются, начиная с более высокого приоритета, и до тех пор, пока не будет выведено relposts_showLabels ярлыков. Значение: число.
relposts_prioDelta — ограничение на разницу приоритетов между ярлыками. Берётся приоритет максимального ярлыка и ярлыки выводятся до тех пор, пока разница между приоритетом следующего ярлыка и приоритетом первого не превысит значение relposts_prioDelta. Значение: число.
relposts_header0 — Текст, который будет показан, если похожих постов не найдено. Значение: строка.
relposts_header1 — Текст, который будет показан, если найдёны похожие посты только по одному ярлыку. Если в строке есть фрагмент __LABEL__, он заменяется на название ярлыка. Значение: строка.
relposts_headerN — Текст, который будет показан, если похожие посты найдены более чем по одному ярлыку. Значение: строка.

Настройки, использущиеся в плоском режиме:

relposts_showPostsPlainMode — сколько максимально постов показывать. Посты показываются, начиная с самых приоритетных. Значение: строка.
relposts_headerPlain — текст заголовка. Значение: строка.

Значения опций по умолчанию:

`relposts_headerN`	"Похожие статьи:"
`relposts_header1`	"Еще статьи из категории «__LABEL__»:"
`relposts_header0`	""
`relposts_headerPlain`	"Похожие статьи:"
`relposts_plainMode`	false
`relposts_showPostsPlainMode`	5
`relposts_showPostsPerLabel`	5
`relposts_queryPostsPerLabel`	10
`relposts_excludeDups`	false
`relposts_showLabels`	1000
`relposts_excludeLabels`	[]
`relposts_renameLabels`	{}
`relposts_labelPrio`	{}
`relposts_prioDelta`	10000

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

Пример настройки. Допустим, у нас есть ярлыки, имеющие максимальный приоритет, и если сообщению назначен один из этих ярлыков, ярлыки более низкого приоритета следует игнорировать. Для определённости возьмём в качестве образца ярлыки из этого блога: javascript и перевод. Выставляем им приоритет, а значение relposts_prioDelta ставим равным 0. Тогда в случае, когда у поста есть какой-либо из этих ярлыков, остальные ярлыки будут игнорироваться:

<script type='text/javascript'>
 var relposts_prioDelta = 0;
 var relposts_labelPrio = {
  'javascript' : 2,
  'перевод' : 2
 };
</script>

«Сеошники, они такие... сеошники...» — и действительно. Совершенно упоротые сеошники.

2010-11-17T00:42:00.004+07:00

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

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

Clr, ключевая фраза в вашем коментарии — «вы не сеошник», потому для вас такие слова как «поисковый трафик» ничего и не значат )) а вот людям, создающим проекты под этот самый трафик — совсем даже не наплевать. Лучше не обсуждать вопросы, в которых вы не разбираетесь

Моё скромное мнение таково, что лучшее, что могут сделать люди, создающие «проекты под трафик», вместо того чтобы создавать сервисы для людей — добровольно выпилить себя из интернетов и пойти въ*бывать на завод.

Ага, то есть проекты типа BigPicture, smi2, news2 и даже Яндекс созданы людьми, которые пошли неправильным путем и место им за станком на заводе?.. Clr, я вежливый человек, давайте закроем тему, не хочу на личности переходить

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

Ладно, а как быть с киносайтами? (фильмы онлайн) Они сделаны чисто под трафик — они тоже никому не нужны?

Ну хватит отжигать-то так. На голубом глазу называть серьёзные СДЛ «сайтами чисто под трафик» — это надо уметь.

«Сайт чисто под трафик» — это, натурально, дор или саттелит к основному проекту. Потому что _единственная_ цель его существования — собирать и перенаправлять поисковый трафик. (И разница между дором и саттелитом тут чисто техническая.)

Вы отличаете проект, на который посетители приходят, конкретно, за информацией и услугами (И НАХОДЯТ ИХ ТАМ), от проекта, на котором висит 3 партнерки и полторы рерайченных статьи? Формально, и тот, и другой — «сайты под трафик». Но первый — настоящий сайт, а второй — говно на палочке. Первый после начального пинка раскрутки сам обрастёт естественными ссылками, и на такие мелочи, как имя домена, ему будет откровенно плевать. А второй будет всеми мыслимыми способами цепляться за топ, потому что ни естественных ссылок, ни непоискового трафика ему не светит никогда.
Собственно, всё это уже не имеет никакого отношения к изначальной теме разговора, так что давайте на этом и закончим.

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

Как сделать, чтобы на разных страницах отдельные элементы блога были разными

2010-11-16T19:47:00.003+07:00

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

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

  <div class='descriptionwrapper'>
    <p class='description'><data:description/></p>
  </div>

Чуток переформатируем его для удобства дальнейшего восприятия:

  <div class='descriptionwrapper'>
    <p class='description'>
      <data:description/>
    </p>
  </div>

2. Итак, тег <data:description/> подставляет в шаблон подзаголовок из настроек блога, а нам надо, чтобы на некоторых страницах вместо него выводился нужный нам текст. В этом нам поможет условная конструкция:

<b:if cond='условие'>
  тут текст, который будет показан, если условие выполняется
<b:else/>
  тут текст, который будет показан, если условие НЕ выполняется
</b:if>

В качестве условия используем проверку на равенство некоторому URL: 'data:blog.url == "адрес"'.

Собираем всё вместе: вместо <data:description/> ставим условную конструкцию, а прежний <data:description/> загоняем под <b:else/>:

  <div class='descriptionwrapper'>
    <p class='description'>
      <b:if cond='data:blog.url == &quot;адрес&quot;'>
         какой-то текст
      <b:else/>
        <data:description/>
      </b:if>
    </p>
  </div>

Вместо 'адрес' подставить конкретный URL нужной страницы/поста.
Теперь на странице с указанным адресом в подзаголовке будет «какой-то текст», а на остальных — подзаголовок, взятый из настроек блога.

3. Чтобы добавить текст подзаголовка для еще одной страницы, повторяем предыдущий шаг, добавляя еще одно условие:

  <div class='descriptionwrapper'>
    <p class='description'>
      <b:if cond='data:blog.url == &quot;адрес&quot;'>
         какой-то текст
      <b:else/>
        <b:if cond='data:blog.url == &quot;второй адрес&quot;'>
           еще какой-то текст
        <b:else/>
          <data:description/>
        </b:if>
      </b:if>
    </p>
  </div>

Теперь у нас предусмотрены варианты текста для двух адресов.

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

Однако, тут есть некоторая проблема. Как видите, на каждом шаге конструкция лесенкой растёт «вглубь». Я не знаю, есть ли у движка blogspot ограничение на количество вложенных условных конструкций, но вполне возможно, что добавив так определённое число условий, вы столкнётесь с тем, что blogspot откажется работать с вашим шаблоном. Впрочем, думаю, гораздо раньше вас просто утомит писать эту многоступенчатую «лесенку».
В нормальных языках программирования можно легко создавать многозвенные условные конструкции любой длины, но в blogspot авторы решили использовать такой вот странный синтаксис шаблонов.
Поэтому, если вам нужно создать варианты для 5-6 страниц, это имеет смысл, а если больше — это превращается в крайне утомительное занятие.

Еще несколько рекомендаций:

1. Имейте ввиду, что else-часть писать не обязательно, если вам она не нужна, например:

<b:if cond='data:blog.url == &quot;адрес&quot;'>
 текст
</b:if>

2. Этим способом можно создать разные варианты метатега description для разных страниц!. Хотел написать об этом отдельную заметку, но раз уж зашла речь об использовании условий в шаблоне, упоминаю об этом тут. ;)

3. Бывает, нужно добавить в блог виджет/агджет, но сделать так, чтобы он отображался только на отдельных страницах. Находим в шаблоне данный виджет, находим внутри него фрагмент, начинающийся с <b:includable id='main'> и выносим его содержимое в условие.
Было:

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-тут какие-то внутренности виджета-->
</b:includable>
</b:widget>

Стало:

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;адрес&quot;'>
  <!-тут какие-то внутренности виджета-->
</b:if>
</b:includable>
</b:widget>

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

5. Если у вас есть набор условий, для которого не нужен вариант типа «а для всего остального, не подходящего под условия, сделать так-то» (т.е. самый внутренняя else-часть пустая или отсутствует) и все условия взаимоисключающие (т.е., как раз рассмотренный выше случай: если URL страницы равнен одному значению, то он уже не может быть для этой страницы равен какому-то другому значению), то можно «лесенку» переделать в последовательность одиночных условий:

  <div class='descriptionwrapper'>
    <p class='description'>
      <b:if cond='data:blog.url == &quot;адрес1&quot;'>
         какой-то текст1
      </b:if>
      <b:if cond='data:blog.url == &quot;адрес2&quot;'>
         какой-то текст2
      </b:if>
      <b:if cond='data:blog.url == &quot;адрес3&quot;'>
         какой-то текст3
      </b:if>
      <b:if cond='data:blog.url == &quot;адрес4&quot;'>
         какой-то текст4
      </b:if>
    </p>
  </div>

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

Динамический подзаголовок в шапке сайта

2010-11-16T17:20:00.001+07:00

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

Находим в шаблоне место, где выводится подзаголовок и изменяем. Было:

<div class='descriptionwrapper'>
    <p class='description'><data:description/></p>
  </div>

Стало:

<div class='descriptionwrapper'>
    <p class='description'><span id='random_subtitle'><data:description/></span></p>
  </div>
<script type='text/javascript'> 
 random_subtitles = [
  &#39;Журнал обо всём.&#39;,
  &#39;Всё обо всём.&#39;,
  &#39;Что вижу, то пою.&#39;,
  &#39;Рандом не дремлет.&#39;,
  &#39;Странное место.&#39;,
  &#39;Хроники оттуда.&#39;,
  &#39;Вам и не снилось.&#39;,
  &#39;Копипаста оптом.&#39;,
  &#39;Здесь водятся буквы.&#39;,
  &#39;Что-то здесь не так.&#39;,
  &#39;Под веществами.&#39;,
  &#39;Нетрезвые мысли.&#39;];
 document.getElementById(&#39;random_subtitle&#39;).innerHTML =  random_subtitles[Math.floor(Math.random() * random_subtitles.length)]
</script>

Фразы, как видно, задаются прямо в коде.

Update. Еще на схожую тему.

Получаем код страницы как она есть (innerHTML), а не просто код принятого браузером файла

2010-11-14T22:04:00.002+07:00

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

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

В общем, решение на самом деле элементарно. Берем вот эту ссылку и добавляем её на панель ссылок или в избранное. Теперь, находясь на любой странице, можно тыкнуть эту ссылку и просмотреть содержимое кода в document.body.innerHTML.
Profit!

Проверялось в Firefox, но и в остальных браузерах должно работать.

commentarius

2010-11-12T14:01:00.001+07:00

Завёл еще один блог — нечто вроде персонального твиттера без ограничения длины сообщений.

Нормальные поддомены на блогспоте еще не все разобрали, долго и мучительно имя блогу выдумывать не пришлось: adversaria — занято, commentarius — свободно, ок.

Реализация карты или оглавления для блога с разбиением на рубрики/категории

2010-11-11T14:47:00.002+07:00

Вроде как вступление

Вот и обещанное «нечто удивительное» для blogspot-а — полнофункциональный скрипт для создания оглавления или карты сайта.

Практически каждый, кто завёл блог на blogspot, рано или поздно задаётся вопросом, каким образом на этой платформе можно сделать разделение статей по рубрикам и добавить оглавление. И к сожалению, напрямую Blogger.com такую возможность не поддерживает — всё, что есть в нашем распоряжениии, это лента постов, которым мы можем назначать ярлыки, и возможность фильтровать посты по отдельным ярлыкам.

В этой ситуации, распространённый способ сделать «категории» — использовать вместо них ярлыки, а в качестве карты сайта использовать длинную-длинную выдачу списка сообщений, в которой оставлены только лишь заголовки, а текст сообщений скрыт при помощи CSS. Все эти «улучшения блога» описаны на множестве сайтов, посвященных «хакам для blogspot» — и преподносятся там как невероятное откровение, хотя им примерно столько же лет, сколько самому blogspot-у. (На самом деле, как я уже упоминал, 90% этих сайтов почти целиком содержат переводы с английского и копипаст друг друга, и если вы видели один такой сайт, значит вы видели все. Впрочем, это вполне типично для русской блогосферы вообще, по любой тематике. Реально что-то новое для блогспота можно увидеть, от силы, на 4-х англоязычных блогах.)

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

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

Обзор возможностей

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

Считать с блога сообщения по заданным в настройках ярлыкам и сгруппировать их в категории. Например, допустим, у вас блог о растениях, и вы используете ярлыки «Комнатные цветы», «Садовые цветы» и «Плодовые культуры». Вы хотите, чтобы всё, что связано с цветами, отображалось в оглавлении в одной категории, а всё, что связано с ягодами/фруктами, в другой. Тогда в настройках вы задаёте, что «Плодовые культуры» — это отдельная категория, а вот «Комнатные цветы» и «Садовые цветы» следует объединить в категорию «Цветы». Также для каждой категории можно задать описание — дополнительный текст, который будет показан после заголовка категории.
Для каждого сообщения отобразить дату, заголовок со ссылкой на сообщение, описание сообщения и картинку. Что именно из этого нужно показывать, а что нет, можно задать в настройках.
Автоматически сформировать для каждого сообщения описание на основе начала текста сообщения. В настройках вы можете задать и свои собственные описания для конкретных сообщений.
Найти в посте первую картинку и использовать её в качестве иллюстрации. Также есть возможность задать картинку и вручную.
Отсортировать сообщения по дате публикации или названию — в прямом или обратном порядке.

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

Если же вы разбираетесь в программировании на javascript, то, благодаря расширяемости скрипта, вы можете дополнить его практически любыми возможностями. Несколько примеров:

Можно в оглавлении показывать размер каждого сообщения.
Можно отобразить оглавление в две колонки.
Если у вас фотоблог, можно сделать галерею изображений.
Если у вас в блоге есть статьи, посвященные каким-нибудь однотипным объектам (например, обзоры фильмов, описания цветов, рецензии и т.п.), то можно автоматически извлечь из таких постов какие-либо ключевые данные (например, для фильмов — год выхода, жанр, имя режиссёра и т.п.) и предоставить всю эту информацию в виде сводной таблицы, с возможностью сортировать её по выбранным посетителем сайта колонкам.

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

Установка и настройка

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

1. Итак, создаём новое сообщение блога, в редакторе постов переходим на вкладку «Изменить HTML» — все правки поста необходимо будет выполнять в этом режиме. Также убедитесь, что в настройках сообщения выбраны пункты «Интерпретировать введенный HTML-код» и «Используйте теги <br />». (Если вы создали страницу, а не пост, в её настройках пункт «Используйте теги <br />» подписан как «Пропускать символы новой строки».)

Вводим туда ~~заклинание~~ текст:

<script type='text/javascript'>
/* Настройки скрипта */
</script>

<script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/itoc.js'></script>

<noscript>
Для отображения содержимого страницы необходима поддержка JavaScript.
</noscript>

В первый тег script мы сейчас будем вписывать настройки скрипта. Второй тег script подключает непосредственно сам скрипт с заданными настройками. Наконец, текст, введённый в теге noscript будет показан посетителю, если в его браузере отключена поддержка JavaScript.

2. Базовая настройка скрипта включает в себя указание адреса блога и списка рубрик. Примеры настройки здесь и далее будут показаны на примере настройки карты сайта на этом блоге.

В переменной itoc_siteUrl указываем адрес блога.

var itoc_siteUrl = "http://izhurnal.blogspot.com/"

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

Далее в переменной itoc_categories необходимо указать таблицу категорий. Тут проще показать, чем объяснить словами:

var itoc_categories = [
 ['Blogger.com'        , ''                   , 'Cкрипты, виджеты, идеи и советы для всех, кто держит блог на платформе Blogger.com'],
 ['блогеру на заметку' , 'Блогеру на заметку' , 'Полезности для блогеров, вне зависимости от используемой платформы.'],
 ['утилиты онлайн'     , 'Утилиты онлайн'     , 'Полезные скрипты, выполняющиеся прямо в браузере.'],
 ['советы по настройке', 'Советы по настройке', 'Рецепты и рекомендации по настройке программ.'],
 ['это интересно'      , 'Это интересно'      , 'Заметки обо всём на свете.'],
 ['мысль вслух'        , 'Мысль вслух'        , 'Случайные мысли на произвольные темы.'],
 ['разное'             , 'Разное'             , 'Сообщения, не вписавшиеся в формат других разделов.'],
 ['PR'                 , 'Разное'             , ''],
 ['поле чудес; страна дураков', 'Разное'      , '']
];

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

В примере выше в первой строке указано, что ярлык Blogger.com относится к категории Blogger.com (поскольку имя категории категории не указано, считается равным названию ярлыка), и для этой категории дано описание. В следующих шести строчках задаётся еще 6 категорий с описаниями. Поскольку перечисленные там ярлыки написаны со строчной буквы, а названия категорий хотелось видеть с заглавной, то названия категорий указаны в явном виде. В последних двух строчках указано, что к категории Разное относятся еще 2 ярлыка. Поскольку описание категории Разное уже было дано до этого, то в этих двух строчках столбец описания не заполнен.

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

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

var itoc_showDate = true;        // Отображать ли даты
var itoc_showDesc = true;        // Отображать ли описания
var itoc_showImg  = false;       // Отображать ли изображения-иллюстрации
var itoc_showImgOnlyWithDesc  = true; // Отображать изображение только если есть описание

var itoc_sortBy = 'published';   // Режим сортировки: published или title. (По дате публикации или по заголовку.)
var itoc_sortOrderAscending = true; // Сортировка по возрастанию/убыванию.

var itoc_minContentLength = 700; // Минимальная длина поста, при которой включается автоматическое описание.
var itoc_maxDescLength = 500;    // Максимальная длина автоматически формируемого описания.
var itoc_minDescLength = 30;     // Если автоматическое описание получилось короче этого значения, не выводить это описание.

Здесь первые 4 переменные указывают, какие данные отображать для каждого сообщения, далее еще 2 переменные задают режим сортировки — тут всё самоочевидно.

Переменные itoc_minContentLength, itoc_maxDescLength, itoc_minDescLength задают параметры работы механизма, отвечающего за автоматические описания постов. Тут следует подробнее остановиться на особенностях его работы.

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

Затем текст урезается по одному из следующих тегов: многострочная цитата, таблица, список, разрыв сообщения по ссылке «Читать далее». Если получившийся фрагмент меньше, чем значение переменной itoc_minDescLength, автоматическое описание также не формируеться — это проверка проводится, чтобы избежать слишком коротких описаний. (Например, когда в начале поста идёт буквально пара слов, а затем таблица.)

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

Следует заметить, что если у вас в настройках блога RSS-лента настроена отображать только начало постов, то данный скрипт «увидит» только такие укороченные варианты сообщений. В общем, если RSS-лента выводит, например, только первые 200 символов сообщения, то не стоит ожидать здесь описаний постов по 500 символов.

В данный момент всё готово для работы скрипта, можно нажать «Просмотр» и просмотреть получившееся или опубликовать пост. Однако результат будет выглядеть страшно, поскольку мы еще не задали стили оформления. Если вы не собираетесь вручную указывать описания сообщений и/или картинки, то переходите сразу к настройке CSS.

4. Если автоматические описания и картинки вас не устраивают, то можно настроить вручную заданные описания и иллюстрации. Описания задаются в переменной itoc_descriptions в виде пар «адрес поста : описание поста». Образец:

var itoc_descriptions = {
 'http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html' : 
  'Виджет «Календарь-архив» показывает в вашем блоге календарь на текущий месяц, в котором по дням проставлены ссылки на ваши статьи. Вам и вашим посетителям будет наглядно видно, когда и что вы писали. Календарь можно листать по месяцам и по годам, просматривая весь архив.',
 'http://izhurnal.blogspot.com/2010/11/css-typetextcss-table-background-color.html' :
  'Примеры оформления <a href="http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html">виджета Календарь</a> '+
  'при помощи таблиц стилей.'
};

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

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

В итоге, после указания всех настроек получается что-то типа следующего:

<script type='text/javascript'>

var itoc_siteUrl = "http://izhurnal.blogspot.com/" // Адрес блога.

var itoc_categories = [
 ['Blogger.com'        , ''                   , 'Cкрипты, виджеты, идеи и советы для всех, кто держит блог на платформе Blogger.com'],
 ['блогеру на заметку' , 'Блогеру на заметку' , 'Полезности для блогеров, вне зависимости от используемой платформы.'],
 ['утилиты онлайн'     , 'Утилиты онлайн'     , 'Полезные скрипты, выполняющиеся прямо в браузере.'],
 ['советы по настройке', 'Советы по настройке', 'Рецепты и рекомендации по настройке программ.'],
 ['это интересно'      , 'Это интересно'      , 'Заметки обо всём на свете.'],
 ['мысль вслух'        , 'Мысль вслух'        , 'Случайные мысли на произвольные темы.'],
 ['разное'             , 'Разное'             , 'Сообщения, не вписавшиеся в формат других разделов.'],
 ['PR'                 , 'Разное'             , ''],
 ['поле чудес; страна дураков', 'Разное'      , '']
];

var itoc_descriptions = {
 'http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html' : 
  'Виджет «Календарь-архив» показывает в вашем блоге календарь на текущий месяц, в котором по дням проставлены ссылки на ваши статьи. Вам и вашим посетителям будет наглядно видно, когда и что вы писали. Календарь можно листать по месяцам и по годам, просматривая весь архив.',
 'http://izhurnal.blogspot.com/2010/11/css-typetextcss-table-background-color.html' :
  'Примеры оформления <a href="http://izhurnal.blogspot.com/2010/10/calendar-archive-widget-blogger.html">виджета Календарь</a> '+
  'при помощи таблиц стилей.',
 'http://izhurnal.blogspot.com/2010/09/blog-post_10.html' :
  'Как изменить подпись «Анонимный» в комментариях блога на «Гость» или любую другую. Небольшой скрипт-хак для Blogger.com.',
 'http://izhurnal.blogspot.com/2010/10/blog-post_11.html' :
  'Как изменить текст и внешний вид ссылок навигации, что расположены в конце каждой страницы блога.',
 'http://izhurnal.blogspot.com/2010/10/disqus.html' :
  'Идея о том, как заставить поисковые системы индексировать текст комментариев, оставленных на блоге при помощи системы Disqus.',
 'http://izhurnal.blogspot.com/2010/09/today-yesterday-date-blogger.html' :
  'Сегодня мы научим блог писать вместо даты слова «вчера» и «сегодня» для сообщений, которые были опубликованы вчера и сегодня. :)',
 'http://izhurnal.blogspot.com/2010/09/blogspot_08.html' :
  '«1 комментарий», «2 комментария», «25 комментариев»... Хотите, чтобы ваш блог показывал число комментариев в полном соответствии с правилами русского языка? На самом деле, сделать это очень просто...',
 'http://izhurnal.blogspot.com/2010/09/blogspot-hidden-posts.html' :
  'Небольшой хак для шаблона блога: делаем так, чтобы сообщения без ярлыков не было видно на главной, в архиве и т.п.',
 'http://izhurnal.blogspot.com/2010/09/blogger.html' :
  'Оптимизация шаблона блога с целью сделать ваш блог более дружественным для поисковых систем.',
 'http://izhurnal.blogspot.com/2010/09/blogspot.html' :
  'Описание синтаксиса, используемого в шаблонах блога. В первой части рассматриваются базовые элементы: теги секций и виджетов.',
 'http://izhurnal.blogspot.com/2010/09/widget-tags-blogspot.html' :
  'Синтаксис шаблонов блога, часть вторая. Теги для формирования внутренностей виджетов: условия, циклы, подключаемые сегменты и так далее.',
 'http://izhurnal.blogspot.com/2010/09/blogspot_04.html' :
  'Синтаксис шаблонов блога, часть третья. Теги для подстановки в шаблон реальных данных, таких как название блога, содержимое сообщений, ярлыки и т.п.',
 'http://izhurnal.blogspot.com/2010/10/blog-post_26.html' :
  'Мой вариант скрипта для списка похожих статей. Как и большинство подобных скриптов, определяет похожие сообщения на основе совпадения ярлыков. Расширенные возможности настройки: фильтрация, переименование и объединение ярлыков.',
 'http://izhurnal.blogspot.com/2010/08/mp.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/blog-post_05.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/seo-intelligence.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/blog-post_7110.html' :
  '',
 'http://izhurnal.blogspot.com/2010/09/blog-post_9547.html' :
  '',
 'http://izhurnal.blogspot.com/2010/10/blog-post_10.html' :
  ''
};

var itoc_images = {
 'http://izhurnal.blogspot.com/2010/10/firefox-cache.html' :
  'http://3.bp.blogspot.com/_9LzkYxYJB94/TLAXCacumTI/AAAAAAAAAIQ/9hR0lBxOYJE/s200/mozilla-firefox-logo.jpg',
 'http://izhurnal.blogspot.com/2010/10/feedburner.html' :
  ''
};

var itoc_showDate = true;
var itoc_showDesc = true;
var itoc_showImg  = false;
var itoc_showImgOnlyWithDesc  = true;

var itoc_maxDescLength = 500;
var itoc_minContentLength = 700;
var itoc_minDescLength = 30;

var itoc_sortBy = 'published';
var itoc_sortOrderAscending = true;

</script>

<script type='text/javascript' src='http://izhurnalscripts.googlecode.com/svn/trunk/itoc.js'></script>

<noscript>
Для отображения содержимого страницы необходима поддержка JavaScript.
</noscript>

Настройка CSS

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

Если у вас в блоге используется более одной страницы с данным скриптом, то имеет смысл вынести CSS в шаблон блога. Если же всёго одна страница, можно CSS указать прямо в посте перед настройками скрипта.

Элементы CSS, которые используются в скрипте:

.itoc h4	Заголовок категории
.itoc p	Описание категории
.itoc ul	Список сообщений категории
.itoc li	Элемент для конкретного сообщения
.itoc .date	Дата сообщения
.itoc a	Ссылка на сообщение
.itoc img	Иллюстрация к сообщению
.itoc .desc	Описание сообщения
.itoc .endofdesc	Пустой div, вставляемый в конце описания
.itoc .progressbartable	Полоса загрузки, появляющаяся когда скрипт читает RSS-ленту
.itoc .progressbartable td
.itoc .progressbartable .ready
.itoc .progressbartable .notready
.itoc .progressbartable .progressbartext

Я не буду здесь расписывать, как задавать стили элементов — предполагается, что читатель знаком с CSS хотя бы на уровне новичка. За основу при составлении вашего стиля можете взять CSS, который я использую для оглавления на этом блоге:

<style type='text/css'>
.itoc p {
 margin-top: 0px;
}
.itoc h4 {
 margin-bottom: 0px;
 clear:left;
}

.itoc li {
 list-style-type: none;
 clear:left;
}

.itoc .date {
 font-size: small;
 color: green;
 font-family: terminus, monospace;
}

.itoc a {
 font-size: 140%;
 color: #8bc;
}

.itoc .date:before  { content: "["  }
.itoc .date:after  { content: "]"  }

.itoc .desc {
 margin-left: 20px;
 padding-left: 20px;
 border-left: 1px solid green;
}

.itoc .endofdesc {
 clear:left;
}

.itoc img {
 float: left;
 padding-left: 41px;
 padding-right: 5px;
 width: 130px;
}

.itoc .progressbartable {
 margin-left: auto;
 margin-right: auto;
}

.itoc .progressbartable td {
 width:  10px;
 height: 5px;
}

.itoc .progressbartable .ready {
 background-color: #cdf;
}

.itoc .progressbartable .notready {
 background-color: #ccc;
}

.itoc .progressbartable .progressbartext {
 color: #cdf;
 font-family: terminus, monospace;
 font-size: small;
 text-align: center;
}
</style>

Расширение возможностей скрипта

В какую сторону копать, если вы знаете JavaScript и хотите получить от скрипта дополнительную функциональность:

Чтобы частично или полностью «взять на себя» управление формированием HTML-кода, выдаваемого виджетом, определите в шаблоне блога или в посте, из которого вызываете скрипт, следующие функции:

itoc_getShortDescFor	Возвращает автоматическое описание для заданного контента
itoc_getImageFor	Возвращает автоматически выбранный URL картинки для заданного контента
itoc_onItemReceived	Производит дополнительную обработку элемента перед началом сортировок и формированием HTML-кода
itoc_compareItems	Возвращает результат сравнения двух заданных постов для сортировки постов
itoc_getToCHtml	Возвращает HTML для всего оглавления
itoc_getHtmlForItems	Возвращает HTML для заданного списка элементов-постов
itoc_getHtmlForItem	Возвращает HTML для заданного элемента

Скрипт проверяет, определена ли соответствующая функция на момент вызова скрипта, и если да, использует её, а не встроенную реализацию.

Подробной документации по внутреннему устройству скрипта не пишу, так как всё можно посмотреть непосредственно в исходном коде.

Минусы скрипта

Основным минусом является необходимость загрузки RSS ленты со всеми теми постами, которые будут перечислены в выдаче скрипта. Если у вас RSS отдаётся в полном виде, то загружается полный текст постов. Соответственно, трафика скрипт кушает прилично и на медленных каналах загружаться может ощутимое время. Особенно это критично для посетителей с оплатой за трафик.

Что дальше?

Как я и обещал, отдельные части работы будут релизиться по мере готовности. Данный скрипт — лишь первая часть. Что же будет дальше?

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

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

В третьих... time will tell. :)

Инновационные ресурсы, PHP-видеокурсы и прочая фауна русских интернетов

2010-11-07T02:38:00.005+07:00

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

Так что отправился я, значит, чтоб время скоротать, читать, что братья по разуму в интернетах пишут.

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

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

...а потом я тыкнул в меню на том сайте, и тут басня-то возьми и кончись, и вывалился я обратно в суровую реальность. Попов, конечно, тот еще звиздун, но рассуждать за семантичный и грамотный код на ресурсе, где в главном меню вместо ссылок стоят обработчики событий onclick, — как-то несподручно. Отчего-то сразу становится понятно, что Попов, в общем-то, и не виноват. Ну или — виноват не только Попов.

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

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

<div class="menu">
 <div class="item_pas" id="general" onclick="tohref('http://irbis-team.com')">
  <div class="menu_img"></div>
  <div class="text">Главная</div>
 </div>
 
 <div class="item_pas" id="lessons" onclick="tohref('http://irbis-team.com/15')">
  <div class="menu_img"></div>
  <div class="text">Курсы</div>
 </div>

 <div class="item_pas" id="datebase" onclick="tohref('http://irbis-team.com/2')">
  <div class="menu_img"></div>
  <div class="text">База знаний</div>
 </div>
</div>

Там в коде страницы (и в комментариях к материалам на сайте) хватает и других... эээ... загадочных вещей, но чёрт с ними.

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

Короче. В рамках компании "Пятиминутка альтруизма", бесплатно восполню пробелы автора в HTML. (скину ему где-нибудь в комментариях на сайте ссылку сюда)

Во-первых, вертаем ссылки на то место, где они законно должно быть:

<div class="menu">
 <div class="item_pas" id="general" onclick="tohref('http://irbis-team.com')">
  <a href='http://irbis-team.com'>
  <div class="menu_img"></div>
  <div class="text">Главная</div>
  </a>
 </div>
 
 <div class="item_pas" id="lessons" onclick="tohref('http://irbis-team.com/15')">
  <a href='http://irbis-team.com/15'>
  <div class="menu_img"></div>
  <div class="text">Курсы</div>
  </a>
 </div>

 <div class="item_pas" id="datebase" onclick="tohref('http://irbis-team.com/2')">
  <a href='http://irbis-team.com/2'>
  <div class="menu_img"></div>
  <div class="text">База знаний</div>
  </a>
 </div>
</div>

Если при этом что-нибудь в разметке разъедется (не должно бы, но вдруг — кто его знает, что там в стилях этого сайта) — не ругаем теги ссылок, а идём в CSS и подкручиваем там винтики до восстановления статус-кво.
Бесполезный onclick после этого можно убрать, но если дорог как память, пущай болтается...

Во-вторых, в коде страницы видны странные функции — вроде как кто-то пытался сделать выпадающее меню, но забил. Так вот, javascript для этого не нужен. Вот на этом блоге у меня сбоку висит календарь, а под календарём ссылка Calendar Widget — если на неё навести мышь, появится выпадающее меню (оно там из одного пункта всего, но сути это не меняет). Без всяких скриптов, на голых стилях. Если есть желание, можно прямо у меня из исходника страницы свиснуть соответствующий CSS, ну или нагуглить.

В-третьих, изменение стиля текущего пункта меню при помощи document.getElementById('lessons').className, насколько я понимаю, производится подстановкой на стороне сервера конкретного идешника в параметры метода getElementById (во всяком случае, я надеюсь... иначе совсем печально). Так вот, это тоже не нужно. Либо выносим полностью всю эту обработку на сторону сервера и сразу в html-код менюшки фигачим нужный стиль, либо полностью убираем её с сервера, и делаем самостоятельный джаваскрипт для этого — анализируем адрес текущей страницы и запиливаем на основе этого нужный стиль нужному пункту меню.

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

Тут диагноз может быть только один — скрипты выпилить, сделать нормальное меню списком ссылок.

Что еще... А, ну форум сайта меня порадовал небывалым сообщением, просто уникальным:

Скриншот из разряда вебмастеры против посетителей. Пчёлы против мёда. Я просьбы форума послушался, и кликов больше делать не стал — закрыл страницу.

Ну и забыл совсем. Самая жесть в названии сайта, разумеется. Innovative resource for business information systems.

Морали не будет.

Хроники веб-девелопера: о IE, запятых, PHP и снова о getElementsByClassName

2010-11-05T21:50:00.002+07:00

Убил полвечера на отладку скрипта только потому, что у меня нет под рукой компьютера с Windows, и баги в IE мне пришлось «отлаживать» через скриншоты и переписку по электронной почте. При этом еще и отнимая время у человека, не имеющего к программированию ни малейшего отношения.

В итоге, как обычно и бывает с IE, виной всему оказались не мои кривые руки, а альтернативное восприятие действительности разработчиками браузера. Настолько альтернативное, что они уже 10 лет как не могут починить парсер, а в 5-м издании javascript специально для них добавлено особое разъяснение.
Да-да, — запятые — если вы, не ходя по ссылке, догадались, что дело было в запятых, то вы молодец. А я — не молодец, я про них забыл и твердо верил, что как написано в спецификации, так оно и обязано работать.

Попутно узнал о самом коротком определении IE из-под javascript с использованием этого бага. А так же — внезапно — о том, что «многие языки для реализации и массивов, и хэшей используют один и тот же тип данных» (пунктуация цитаты не сохранена — хоть тут дайте запятую поставить нормально). Напомню, что в число «многих языков» входит PHP... и, собственно, никто больше не входит.
PHP разрушает мозг, ну вы в курсе.

Еще выяснилось, что в отдельных случах IE8 таки настаивает на своём и по-прежнему «не поддерживает это свойство или метод». Я наугад потыкал код, но кажется, это привело лишь к тому, что теперь на этом блоге в IE вообще никак не работаёт скрипт дат, а проверить не на чем. Да и чёрт с ним. На следующей неделе доберусь до ноутбука, на котором установлена винда, там и посмотрим, что опять не так с getElementsByClassName.

Ну и самое главное-то чуть не забыл сказать. Мы тут с amateurblogger подумали-подумали, и решили еще что-нибудь радикально улучшить в этом буржуйском блогспоте. Поэтому скоро вас ждёт нечто более удивительное, чем какой-то там календарь. Удивительное будет выходить в свет по частям, по мере готовности частей к релизу.
Stay tuned!

Я не играю в WoW, потому что у меня есть блог

2010-11-05T12:03:00.001+07:00

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

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

А правила как обычно просты, стоит лишь вспомнить мой первый курс и целые ночи, проводимые за игрой в Diablo II. Сейчас игры круче, но общие принципы остаются те же.

Правило первое. Невозможно одновременно прокачивать нескольких персонажей (читай блогов). Вот никак не получится играть сразу на двух компах, точно проверял. Время можно уделять только одному персонажу, правда можно прокачивать персонажей по очереди, но тогда все равно каждому будет уделено значительно меньше времени, чем если бы играл только одним. И тут встает выбор – либо прокачать одного, но до 90 уровня, либо двух, но до 45 за то же время.

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

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

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

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

Всем гамерам привет!

Чем отличается хороший сайт от плохого

2010-11-04T19:37:00.000+07:00

На хорошем сайте — информация. На плохом — контент.

Примеры стилей для виджета календаря

2010-11-02T11:19:00.002+07:00

Примеры оформления виджета календаря при помощи CSS:

<style type='text/css'>

.iacalendar table {
 background-color: #888;
}

.iacalendar table td {
 background-color: #ddd !important;
 text-align: center  !important;
 font-family: Arial !important
}

.iacalendar .wday_cell {
 font-weight: bold !important
}

</style>

<style type='text/css'>

.iacalendar table td {
 text-align: left  !important;
 font-family: Arial !important;
 font-size: 10pt !important;
 color: #ddd !important;
}

.iacalendar .wday_cell, .iacalendar .month_year_cell {
 font-weight: bold !important;
 color: #999 !important;
}

.iacalendar .month_year_cell {
 text-align: center !important;
}

.iacalendar .cell a {
 color: #888 !important;
 text-decoration: none !important;
}

.iacalendar .cell a:hover {
 color: #888 !important;
 text-decoration: underline !important;
}

</style>

<style type='text/css'>

.iacalendar table {
 border: 1px solid #888;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.iacalendar table td {
 text-align: center  !important;
 font-family: Arial !important
}

.iacalendar .wday_cell {
 font-weight: bold !important
}

.iacalendar .month_year_cell {
 border-bottom: 1px solid #888;
}
</style>

<style type='text/css'>

.iacalendar table {
 border: 1px solid #888;
}

.iacalendar table td {
 text-align: center !important;
 font-family: Monospace !important
}

.iacalendar .wday_cell {
 font-weight: bold !important
}

.iacalendar .month_year_cell {
 border-bottom: 1px solid #888;
}

.iacalendar .cell a {
 display: block;
 background-color: #ddd;
 text-decoration: none !important;
}

</style>

Роботы проехали 13000 километров

2010-11-01T14:14:00.001+07:00

Завершился пробег роботизированных автомобилей из Италии в Китай.

Как показал эксперимент, вмешательство человека потребовалось
- на таможнях
- в московских пробках
- при подвозе автостопщиков

via vitus-wagner.livejournal.com

Сбор статистики посещений для страниц социальных сетей

2010-10-30T11:26:00.000+08:00

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

Спрашивали? Отвечаем!

2010-10-29T09:20:00.000+08:00

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

как разрешить запуск нескольких копий firefox
Как следует из описания опций запуска Firefox, для этого нужно использовать ключ -no-remote. Также лучше бы создать два или более отдельных профиля и запускать разные копии фокса с разными профилями при помощи опции -P. Чтоб красномордые лисы не передрались.

отключить внутренний кэш в firefox
За использование кэша отвечает параметр network.http.use-cache в about:config. Подробности.

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

<form method="POST" action="http://beta.blogger.com/add-widget">
  <input type="hidden" name="widget.title" value="тут название виджета"/>
  <input type="hidden" name="widget.content" value="тут содержимое тела виджета"/>
  <input type="hidden" name="widget.template" value="тут шаблон оформления виджета" />
  <input type="hidden" name="infoUrl" value="ссылка на ваш сайт"/>
  <input type="submit" name="go" value="Добавить виджет"/>
</form>

А подробности в справке гугла.

объект не поддерживает это свойство или метод
И не будет поддерживать. Но его можно перехитрить.

объект не поддерживает эта свойство или метод
Неграмотный IE8, неграмотные индусы. :'(

поис к кеше яндекс
Совсем печально.

<b:include data='blog' name='all-head-content'/> это код
Даже Кэп ищет мой блог.

ищч-ырфвщц ghjgflftn
Lf b x`hn c ytqю

как попасть в кеш в фирефоксе
Адрес about:cache. А там будут 3 ссылки на 3 разных типа хранилища: в памяти, на диске и оффлайновое хранилище для данных.

+notepad++ +убрать +переносы +строк
Правка -> Объединить строки (Ctrl+J)

поисковая яндекса
Поисковая яндекса, найди еда для чукча. Чукча кушать хочет.

Экономическая независимость

2010-10-28T15:12:00.001+08:00

Увидел очень странный пост, в чём-то даже немного истеричный. Вообще, это типа конкурсная работа на очередной конкурс сеошников, посвященный экономической независимости. Я хоть и не собираюсь принимать в нём участие, но тоже выскажусь.
Ну так вот. Автор горячо убеждает нас, что независимости не существует. Кто ж спорит — конечно, не существует. Товарищ, вы не нервничайте, всё так и есть. Тут можно даже вспомнить кибернетическое определение понятия информации как меры влияния состояния одного объекта на состояние другого. Понятно, что обмен информацией и веществом/энергией в мире идет постоянно и везде, и добиться реальной независимости от чего угодно, хоть от правительства, хоть от магии вуду, можно только сбежав в отдельную вселенную. Однако, это всё лирика. Ну то есть, разумеется, не лирика, а самая настоящая суровая физика и информатика, но не суть — тема-то конкурса, собственно, вообще не про то.

Речь в конкурсе идёт о экономической независимости, о независимости от работы «на дядю». Что это вообще за зверь, экономическая независимость? Организаторы определения не дают, предоставив авторам простор для творчества.
Моё определение таково: экономическая независимость — это положение вещей, при котором человек самостоятельно создаёт, контроллирует и развивает основные источники своего дохода; а полученной прибыли при этом хватает как на нужны потребления, так и на дальнейшее развитие данных источников.
Собственно, всё. Тему вопроса можно считать раскрытой. Остальные мысли, которые можно высказать по данному поводу — вполне очевидные следствия данного определения. ;)

Виджет для Blogger: календарь с возможностью просмотра архива блога.

2010-10-28T13:28:00.009+08:00

Итак, свершилось. То, о чём все блогеры на blogspot так долго мечтали, глядя на ЖЖ, доступно прямо здесь и сейчас, достаточно лишь нажать одну кнопку в конце этого поста. Идея виджета принадлежит amateurblogger, а её воплощением в коде занимался ваш покорный слуга. Пока другие перепечатывают друг у друга одни и те же скрипты, гаджеты и уловки, мы таки просто сделаем что-нибудь полезное. Это было лирическое вступление, а теперь к делу.

Виджет «Календарь» показывает в вашем блоге календарь на текущий месяц, в котором по дням проставлены ссылки на ваши посты. Вам и вашим посетителям будет наглядно видно, когда и что вы писали. Календарь можно листать по месяцам и по годам, просматривая весь архив. (Ну или же просто можно воспользоваться им как обычным календарём — посмотреть, на какой день недели какое число приходится. :) )

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

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

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

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

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

И еще кое-что. Если вы разбираетесь в CSS, и хотите изменить внешний вид календаря, то вот перечисление стилей, которые вы можете настраивать для этого:

.iacalendar — весь календарь целиком
.iacalendar table — таблица с ячейками календаря (включая «шапку»)
.iacalendar .month_year_cell — «шапка»
.iacalendar .wday_cell — ячейки с названиями дней недели
.iacalendar .empty_cell — пустые ячейки (которые соответствуют дням недели предыдущего или следующего месяца)
.iacalendar .cell — ячейки с датами
.iacalendar .cell_X, где X цифра от 0 до 6 — ячейки, приходящиеся на соответствующий день недели (.cell_0 — воскресенье, .cell_1 — понедельник и т.д.)
.iacalendar .cell_future — ячейки, относящиеся к датам в будущем
.iacalendar .cell_long_ago — ячейки, относящиеся к датам ранее даты первого сообщения в блоге.

Эти стили лучше вписывать в таблицу стилей в head-области шаблона блога, а не в таблицу стилей внутри виджета, поскольку если вы обновите календарь, настройки в таблице стилей виджета заменятся на стандартные. Чтобы ваши настройки стилей имели больший приоритет, чем стандартные стили виджета, указывайте их с ключевым словом !important.

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

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

Calendar Widget

Идея: amateurblogger
Реализация: izhurnal

Настройки:

Вариант заголовка:

Выберите оформление заголовка календаря.

Отображать ссылки:

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

Адрес блога:

Адрес блога, сообщения с которого будут отслеживаться календарём. Если оставить это поле пустым, календарь будет автоматически обращаться к тому блогу, на страницах которого он размещен.

Дата первого сообщения:

Год:
Месяц:
Число:

Укажите дату первого сообщения в вашем блоге. Все более ранние даты в календаре будут написаны серым цветом.

Язык:

Выберите язык календаря. Если вам нужно отобразить календарь на языке отличном от русского или английского, выберите пункт «Другой» и введите названия месяцев и дней недели в появившиеся поля ввода.

Названия месяцев:

Введите названия месяцев, начиная с января, разделяя их пробелами или запятыми.

Названия дней:

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

Неделя с понедельника:

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

Текст для всплывающей подсказки:

Введите текст, который будет отображаться во всплывающей посказке, показывающей количество сообщений.

Цвет фона ячеек:

Цвет фона ячеек календаря. Если ни один из стандартных вариантов вам не подходит, выберите пункт «Своё значение» и введите в появившеся поле ввода другое значение цвета.

Значение цвета должно быть в формате, пригодном для вставки в CSS.

Цвет фона за ячейками:

Цвет фона под ячейками календаря.

Значение цвета должно быть в формате, пригодном для вставки в CSS.

Ширина

Ширина виджета. Значение в пикселях (например, 300px) или процентах от ширины доступной области (например 50%), либо auto (ширина определяется браузером автоматически).

Выравнивание

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

Внимание. Если у вас после добавление виджета, в панели управления блога перестала работать вкладка «Элементы страницы» (невозможно передвинуть виджеты и т.п.), для исправления ситуации достаточно зайти на вкладку «Изменить HTML» и поставить флажок «Расширить шаблоны виджета». Ничего править или сохранять на этой вкладке не нужно — просто возвращаемся на предыдущую вкладку, и там всё работает. Причина проблемы пока не ясна, возможно, это внутренняя ошибка блогспота.

RegExp.escape: Экранирование строки при формировании регулярных выражений в javascript (функция и рабочий пример)

2010-10-28T11:31:00.003+08:00

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

RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

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

Текст, требующий экранирования:

Результат:

Экранирование спецсимволов html в html entities и обратно

2010-10-28T11:15:00.002+08:00

Простая утилита, позволяющая заменять специсимволы html на соответствующие entities и обратно. Заменяет символы больше и меньше, амперсанд, кавычки и апострофы, а также символ новой строки (на тег br). Работает без перезагрузки страницы: просто вставьте текст в верхнюю область ввода и переместите курсор в нижнюю.

Введите текст, требующий экранирования спецсимволов html:

Параметры:
Обратно

Результат:

Скрипт для отображение списка похожих статей

2010-10-26T23:16:00.002+08:00

Для блогспота существует множество реализаций виджета похожих постов, начиная от простого списка ссылок и заканчивая навороченными и стильно оформленными виджетами. Для своего блога я перебрал несколько таких скриптов, но ни один из них меня не устроил по тем или иным причинам. Поэтому, взяв за основу код с hoctro.blogspot.com, я написал свой собственный. Собственно, сам скрипт был написал и опубликован еще полгода назад, но изначальная публикация исчезла вместе с удалённым аккаунтом в ЖЖ.

Что же такого может мой скрипт и чего я не нашел в уже готовых виджетах?
Во-первых, это возможность настраивать заголовок скрипта, чтобы он гармонировал с содержимым вашего блога. Согласитесь, если, например, у вас блог посвящен кулинарии и рецептам, то надпись «Еще похожие статьи на тему "Салаты":» будет выглядеть крайне странно. Гораздо лучше написать что-то вроде «Еще рецепты из рубрики "Cалаты":».

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

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

И в-четвертых, возможность изменять имена ярлыков и объединять несколько ярлыков в один.

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

Как добавить скрипт похожих постов в ваш блог:
В шаблоне блога находим строку <data:post.body/> — это то место, где выводится содержимое поста. После неё вставляем мой скрипт:

<!-- Скрипт "Связанные статьи из этой категории." -->
<!-- (c) http://izhurnal.blogspot.com/ -->

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.labels'>
            <div class='simposts'>

                <div class='widget-content'>
                <br/>
                  <div id='simpostsdata350471'></div>
                  <div id='simpostsdata350470'></div><br/>
                    <script type='text/javascript'>

                    /* Настройки скрипта. */

                    var headerN = &quot;Похожие статьи:&quot;; /* Заголовок виджета, когда в нём отображается более чем одна метка. */
                    var header1 = &quot;Еще статьи из категории \&quot;__LABEL__\&quot;:&quot;;  /* Заголовок виджета, когда в нём отображается одна метка. Если в заголовке есть слово __LABEL__, то вместо него будет подставлено имя метки. */
                    var header0 = &quot;&quot;; /* Текст, выводимый если нет ни одной метки и ссылки. */

                    var maxNumberOfPostsPerLabel = 5; /* Максимальное число постов, отображаемых для каждой метки. */
                    var maxNumberOfLabels = 4;      /* Максимальное число отображаемых меток. */
                    var excludeEmptyLabels = true;  /* Скрывать ли метки, для которых нет подходящих постов. true - скрывать, false - отображать. */
                    var excludeLabels = []; /* Метки, которые не следует отображать. */

                    /* Смена отображаемых имён.
                       Здесь перечисляем соответствия реального имени метки и названия, которое будет показано на странице.
                       Если для двух меток указать одно название, они при отображении склеятся в одну метку.
                       Если метка здесь не перечисляется, то отображается под своим настоящим названием.
                    */
                    var renameLabels = {
                    };

                    /* Конец настроек скрипта. */

                    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; /* Адрес блога, откуда берём список постов. */

                    function is_in(item, array) {
                      for (k in array) {
                        if (typeof array[k] == &quot;function&quot;) continue;
                        if (array[k] == item) return true;
                      }
                      return false;
                    }

                    function label_title(label) {
                      if (renameLabels[label])
                        return renameLabels[label];
                      return label;
                    }

                    totalLabels = 0;
                    receivedReplies = 0;
                    var receivedItems = [];

                    var k_label;

                    function labelReceived() {
                      receivedReplies++;

                      if (receivedReplies != totalLabels)
                        return;

                      var labelCount = 0;
                      for (k_label in receivedItems) {
                        if (typeof receivedItems[k_label] == &quot;function&quot;) continue;
                        var items = receivedItems[k_label];
                        if (items.length == 0 &amp;&amp; excludeEmptyLabels)
                          continue;
                        labelCount++;
                      }

                      var labelCount1 = 0;
                      for (k_label in receivedItems) {
                        if (typeof receivedItems[k_label] == &quot;function&quot;) continue;
                        var items = receivedItems[k_label];

                        if (items.length == 0 &amp;&amp; excludeEmptyLabels)
                          continue;

                        var ul = document.createElement(&#39;ul&#39;);
                        var itemsCount = 0;
                        for (var k_item in items) {
                          if (typeof items[k_item] == &quot;function&quot;) continue;
                          var item = items[k_item];
                          var li = document.createElement(&#39;li&#39;);
                          var a = document.createElement(&#39;a&#39;);
                          a.href = item.href;
                          var txt = document.createTextNode(item.title);
                          a.appendChild(txt);
                          li.appendChild(a);
                          ul.appendChild(li);
                          itemsCount++;
                          if (itemsCount == maxNumberOfPostsPerLabel)
                            break;
                        }
                        
                        var txt = document.createTextNode(k_label);
                        var h = document.createElement(&#39;b&#39;);
                        h.appendChild(txt);
                        var div1 = document.createElement(&#39;div&#39;);
                        if (!(labelCount == 1 &amp;&amp; header1.search &amp;&amp; header1.search(/(LABEL)/) != -1))
                          div1.appendChild(h);
                        div1.appendChild(ul);
                        document.getElementById(&#39;simpostsdata350470&#39;).appendChild(div1);

                        labelCount1++;
                        if (labelCount1 == maxNumberOfLabels)
                          break;
                      }

                      var txt;
                      if (labelCount == 1 &amp;&amp; header1)
                        txt = document.createTextNode(header1.replace(&quot;__LABEL__&quot;, k_label));
                      else if (labelCount)
                        txt = document.createTextNode(headerN);
                      else if (header0)
                        txt = document.createTextNode(header0);
                      if (txt)
                      {
                        var h = document.createElement(&quot;h4&quot;);
                        h.appendChild(txt);
                        document.getElementById(&#39;simpostsdata350471&#39;).appendChild(h);
                      }
                    }

                    function receiveReply_123(json) {
                      var label = &quot;&quot;;
                      for (var l = 0; l &lt; json.feed.link.length; l++) {
                        if (typeof json.feed.link[l] == &quot;function&quot;) continue;
                        if (json.feed.link[l].rel == &#39;alternate&#39;) {
                          var raw = json.feed.link[l].href;
                          var label = raw.substr(homeUrl3.length+13);
                          var k;
                          for (k=0; k&lt;20; k++)
                            label = label.replace(&quot;%20&quot;, &quot; &quot;);
                          label = decodeURI(label);
                          break;
                        }
                      }
                      var labelTitle = label_title(label);
                      if (typeof receivedItems[labelTitle] != &quot;object&quot;)
                        receivedItems[labelTitle] = [];

                      for (var k in json.feed.entry) {
                        var entry = json.feed.entry[k];
                        if (typeof entry == &quot;function&quot;) continue;
                        var href = &quot;&quot;;
                        for (var kl in entry.link) {
                          if (typeof entry.link[kl] == &quot;function&quot;) continue;
                          if (entry.link[kl].rel == &quot;alternate&quot;) {
                            href = entry.link[kl].href;
                            break;
                          }
                        }

                        if(href != &quot;&quot; &amp;&amp; href != location.href.split(new RegExp("\\?|\\#"))[0]) {
                          var item = { &quot;href&quot; : href, &quot;title&quot; : entry.title.$t};
                          receivedItems[labelTitle].push(item);
                        }
                      }

                      labelReceived();

                    }
                    function sendQueryForLabel(query, label) {
                      var script = document.createElement(&#39;script&#39;);
                      script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
                        + label +
                        &#39;?alt=json-in-script&amp;callback=receiveReply_123&amp;max-results=&#39;+maxNumberOfPostsPerLabel);
                      script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
                      document.documentElement.firstChild.appendChild(script);
                    }

                    var parsedlabels = [];
                    var labelsCount = 0;

                    function list_items(textLabel) {
                      if (labelsCount &gt;= maxNumberOfLabels ||
                          is_in(textLabel, excludeLabels) ||
                          is_in(textLabel, parsedlabels)) {
                        labelReceived();
                        return;
                      }
                      labelsCount++;
                      parsedlabels.push(textLabel);
                      sendQueryForLabel(homeUrl3, textLabel);
                    }
                    <b:loop values='data:posts' var='post'>
                      <b:loop values='data:post.labels' var='label'>
                        totalLabels++;
                      </b:loop>
                    </b:loop>
                    <b:loop values='data:posts' var='post'>
                      <b:loop values='data:post.labels' var='label'>
                        list_items(&quot;<data:label.name/>&quot;);
                      </b:loop>
                    </b:loop>
                    </script>

                </div>

            </div>
        </b:if>
        </b:if>

<!-- Конец скрипта "Связанные статьи из этой категории." -->

В начале скрипта находим место, помеченное текстом «/* Настройки скрипта. */». Сюда вписываются настройки:

headerN — текст заголовка виджета, когда похожие статьи найдены более чем по одному ярлыку.
header1 — текст заголовка виджета, когда похожие статьи найдены только по одному ярлыку. Если в тексте есть фрагмент __LABEL__, то вместо него будет подставлено имя данного ярлыка.
header0 — текст, если похожих статей не найдено.

maxNumberOfPostsPerLabel — сколько максимально статей отображать для каждого ярлыка.
maxNumberOfLabels — максимальное число отображаемых ярлыков.

excludeEmptyLabels — скрывать ли ярлыки, для которых нет подходящих статей. true - скрывать, false - отображать.

excludeLabels — список ярлыков, которые следует игнорировать.

renameLabels — Здесь перечисляются соответствия реального имени ярлыка и названия ярлыка, которое будет показано на странице. Если для двух ярлыков указать одно название, они при отображении склеятся в одну метку. Если ярлык здесь не указан, то отображается под своим настоящим названием.

Пример настроек скрипта для блога Флеш-обзор:

var headerN = &quot;Похожие игры:&quot;;
var header1 = &quot;Еще игры из категории «__LABEL__»:&quot;;
var header0 = &quot;&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 4;
var excludeEmptyLabels = true;
var excludeLabels = [&quot;флеш&quot;, &quot;разное&quot;];
var renameLabels = {
    &quot;логическая&quot; : &quot;логические&quot;,
    &quot;стрелялка&quot;  : &quot;стрелялки&quot;,
    &quot;стратегия&quot;  : &quot;стратегии&quot;,
    &quot;не игры&quot;    : &quot;разное&quot;,
    &quot;развлечения&quot;: &quot;разное&quot;,
    &quot;платформер&quot; : &quot;платформеры&quot;,
    &quot;текстовая&quot;  : &quot;текстовые&quot;
};

Список хоткеев bash

2010-10-18T22:10:00.001+08:00

Шпаргалка по стандартным биндингам хоткеев в bash.

CTRL-команды:
Ctrl + a — переход к началу строки
Ctrl + b — аналог стрелки влево
Ctrl + c — отменить редактирование команды или прекратить работу
Ctrl + d — аналог Delete. Если строка пустая - выход из shell
Ctrl + e — переход к концу строки
Ctrl + f — аналог стрелки вправо
Ctrl + g — выход из режима дополнения
Ctrl + h — аналог BackSpace
Ctrl + i — аналог Tab
Ctrl + k — удалить всё до конца строки
Ctrl + l — очистить экран (набранная строка и даже позиция курсора остаётся)
Ctrl + r — поиск по истории набранных команд
Ctrl + R — поиск по истории набранных команд назад (это когда есть несколько вариантов и проскочили нужный)
Ctrl + t — поменять местами текущий символ с предыдущим
Ctrl + u — удалить всё до начала строки
Ctrl + v — преобразует следующую клавишу в её символьное отображение (Enter - ^M, Esc - ^[ и т.д.)
Ctrl + w — удалить от курсора до начала слова
Ctrl + x дважды — скачок между началом строки и текущей позицией курсора
Ctrl + x @ — Показывает возможные варианты дополнения доменного имени
Ctrl + y — вставить из буфера (все удаляемое по горячим клавишам удаляется не просто так, а в буфер)
Ctrl + z — притормозить/остановить выполнение команды в фон
Ctrl + _ — отмена последнего изменения

ALT-команды
Alt + < — к первой команде в истории (вообще к самой первой в .bash_history) Alt + > — к последней команде в истории
Alt + ? — показать весь список вариантов дополнения (аналог 2Т - см. ниже)
Alt + * — вставить все возможные варианты дополнения
Alt + / — попытатся дополнить имя файла (из имеющихся в текущем каталоге)
Alt + . — вставить последний аргумент из предыдущей команды
Alt + b — влево на слово
Alt + c — сделать первую букву слова заглавной (и перейти к следующему слову)
Alt + d — удалить от текущей позиции до конца слова
Alt + f — вправо на слово
Alt + l — сделать первую букву слова строчной (и перейти к следующему слову)
Alt + n — искать по истории (но не сразу, а после полного ввода и нажатия Ентер)
Alt + p — искать по истории назад
Alt + r — очистить всю строку
Alt + t — поменять слова местами
Alt + u — сделать все буквы заглавными от текущей позиции до конца слова
Alt + BackSpace — Удалить от текущей позиции до начала слова

Tab-команды
2T обозначает дважды нажатый Tab
2T — все доступные команды (это тоже все знают)
(string)2T — все доступные команды начинающиеся на string
/2T — все каталоги, включая скрытые. Для текущего надо набрать ./2Т
*2T — каталоги, кроме скрытых
~2T — все пользователи, присутствющие в /etc/passwd
~f2T — все пользователи, присутствющие в /etc/passwd, начинающиеся на f
$2T — все системные переменные
@2T — все записи в /etc/hosts
=2T — вывод наподобии ls или dir

Просто команды
!! — выполнить последнюю команду в истории
!abc — выполнить последнюю команду в истории, начинающуюся на abc
!a:p — напечатать последнюю команду в истории, начинающуюся на a
!n — выполнить n-ную команду в истории
!$ — посдедний аргумент последней команды
!^ — первый аргумент последней команды
^abc^xyz — заменить abc на xyz в последней команде и выполнить результат

Исправляем многоканальный звук в alsa на AC'97 чипсетах Intel ICH4/ICH5/ICH6

2010-10-15T16:02:00.000+08:00

Столкнулся с проблемой со встроенным звуком на AC'97 Realtek ALC850 (ICH5): выводы для боковых колонок и центра/саба перепутаны местами. При этом очевидное решение — переподключить колонки — не работает, поскольку миксер регулирует звук правильно, и в результате попытка настроить саб/центр приводит к регулированию баланса боковых и наоборот.

Гугление форумов и различных FAQ на эту тему никаких результатов не дало. Решение нашлось в бактрекере alsa. Пользователь аж в 2005 году открыл тему с багом, и через год, не дождавшись никакой реакции от разработчиков, описал там в комментариях решение проблемы. На этом всё и закончилось, как и с большинством других тамошних багов. Патч за 5 лет в исходники никто так и не закоммитил.

Итак, вот конфиг, который надо прописать в /usr/share/alsa/cards/ICH4.conf , чтобы звук через surround51 заработал как положено:

#
# Configuration for the Intel ICH4/ICH5/ICH6 chips
#
# Edited by Uday Bondhugula <bondhugula.1@osu.edu> to
# fix center/LFE swapping with rear channels on some
# ICH5 chips
#

<confdir:pcm/front.conf>

ICH4.pcm.front.0 {
 @args [ CARD ]
 @args.CARD {
  type string
 }
 type softvol
 slave.pcm {
  type hw
  card $CARD
  device 0
 }
 control {
  name "PCM Playback Volume"
  card $CARD
 }
} 

# default with dmix+softvol & dsnoop
ICH4.pcm.default {
 @args [ CARD ]
 @args.CARD {
  type string
 }
 type asym
 playback.pcm {
  type plug
  slave.pcm {
   type softvol
   slave.pcm {
    @func concat
    strings [ "dmix:" $CARD ]
   }
   control {
    name "PCM Playback Volume"
    card $CARD
   }
  }
 }
 capture.pcm {
  type plug
  slave.pcm {
   @func concat
   strings [ "dsnoop:" $CARD ]
  }
 }
}

<confdir:pcm/surround40.conf>

ICH4.pcm.surround40.0 {
 @args [ CARD ]
 @args.CARD {
  type string
 }
 type softvol
 slave.pcm {
  type hooks
  slave.pcm {
   type hw
   card $CARD
   device 0
  }
  hooks.0 {
   type ctl_elems
   hook_args [
   {
    name "Channel Mode"
    preserve true
    value "4ch"
    lock true
    optional true
   }
   # for old drivers
   {
    name "Line-In As Surround"
    preserve true
    value true
    optional true
   }
   {
    name "Surround Down Mix"
    preserve true
    value off
    lock true
    optional true
   }
   ]
  }
 }
 control {
  name "PCM Playback Volume"
  card $CARD
 }
}

<confdir:pcm/surround41.conf>
<confdir:pcm/surround50.conf>
<confdir:pcm/surround51.conf>

ICH4.pcm.surround51.0 {
 @args [ CARD ]
 @args.CARD {
  type string
 }
 type softvol
 slave.pcm {
  type route
  ttable.0.0 1
  ttable.1.1 1
  ttable.2.4 1
  ttable.3.5 1
  ttable.4.2 1
  ttable.5.3 1
  slave.pcm {
   type hooks
   slave.pcm {
    type hw
    card $CARD
    device 0
   }
   hooks.0 {
    type ctl_elems
    hook_args [
    {
     name "Channel Mode"
     preserve true
     value "6ch"
     lock true
     optional true
    }
    # for old drivers
    {
     name "Line-In As Surround"
     preserve true
     value true
     optional true
    }
    {
     name "Mic As Center/LFE"
     preserve true
     value true
     optional true
    }
    {
     name "Surround Down Mix"
     preserve true
     value off
     lock true
     optional true
    }
    {
     name "Center/LFE Down Mix"
     preserve true
     value off
     lock true
     optional true
    }
    ]
   }
  }
  slave.channels 6
 }
 control {
  name "PCM Playback Volume"
  card $CARD
 }
}

<confdir:pcm/iec958.conf>

ICH4.pcm.iec958.0 {
 @args [ CARD AES0 AES1 AES2 AES3 ]
 @args.CARD {
  type string
 }
 @args.AES0 {
  type integer
 }
 @args.AES1 {
  type integer
 }
 @args.AES2 {
  type integer
 }
 @args.AES3 {
  type integer
 }
 type hooks
 slave.pcm {
  type hw
  card $CARD
  device 4
 }
 hooks.0 {
  type ctl_elems
  hook_args [
   {
    name "IEC958 Playback AC97-SPSA"
    lock true
    preserve true
    value 3
    optional true
   }
   {
    name "IEC958 Playback Default"
    lock true
    preserve true
    value [ $AES0 $AES1 $AES2 $AES3 ]
   }
   {
    name "IEC958 Playback Switch"
    lock true
    preserve true
    value true
   }
  ]
 }
}

Гугл — чёртов Скайнет

2010-10-14T15:02:00.000+08:00

К вопросу о понимании естественных языков поисковыми системами:

АнтиSEO

2010-10-14T00:11:00.006+08:00

Вот такой вот блог anti-seoblog.ru, в котором анонимус стебёт SEO вообще и отдельных SEOшников в частности. Местами забавно.

«Национальная ОС, которую мы потеряли»

2010-10-13T16:14:00.005+08:00

Попалась на глаза потрясающая по уровню бреда статья от патриота «Русских Компьютеров»™ : http://slon.ru/blogs/revich/post/464142/. Автор даже не в состоянии понять разницу между архитектурой компьютера, языком программирования и операционной системой, но, тем не менее, имеет смелость критиковать современные технологии.

Давайте внимательно присмотримся к тому, что предлагается на роль национальной ЭВМ (или ОС... или ЯП... посыл автора остался не вполне ясным) — персональной вычислительной системе «МИР» 1965-го года издания. Итак, «тактико-технические характеристики»:

Быстродействие 1-2 тысячи операций в секунду (200—300 операций в секунду для 5-разрядных чисел). Управление построено на микропрограммном принципе. Микропрограммами выполнялось большинство арифметических действий. Микрокоманды 120-разрядные и записывались на сменных микропрограммных матрицах.
Система счисления двоично-десятичная.

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

Ввод-вывод через перфоленту и принтер.

Питание трёхфазное, 380 В. Потребляемая мощность 1,5 кВт. Масса 400 кг. Т.е. для неё отдельный цех и электроподстанция не требуется, достаточно запитать от сети для токарного станка — потому и «персональная» называлась, а вы как хотели.

Общение с машиной производилось посредством языка программирования АЛМИР-65, который, судя по обрывочной информации в интернете, представляет собой... русифицированный диалект Алгола! Вот вам и «забытые советские технологии», бережно уворованные у загнивающего Запада...
Разумеется, вычислять на Русском Инженерном Алголе системы уравнений для простого пользователя гораздо интереснее, чем смотреть ролики на YouTube или по скайпу обсуждать футбольный матч с приятелем из Канады.