Сказки на ночь

Расширяем gwtwiki своими тегами

2010-07-15T01:26:00.000-07:00

gwtwiki - это проект на Java, предоставляющий API, для преобразования Wiki разметки в html. Основан он на движке Bliki engine.

Несколько полезных ссылок:
- Домашняя страница проекта gwtwiki. Java Wikipedia API (Bliki engine).
- Захотелось попробовать, пожалуста - http://w-i-k-i.appspot.com/

API очень простое, но вот документация скудновата. Так как код написан хорошо, то заглянув в исходники, можно разобраться с любым функционалом. Хочу сэкономить ваше время и раcказать как быстро расширить движок своими wiki тегами.

Создание Wiki тег

Основой для моего wiki тега возьму NowikiTag. Все что вам нужно, так это переопределить метод renderHTML.


import info.bliki.htmlcleaner.TagNode;
import info.bliki.wiki.filter.ITextConverter;
import info.bliki.wiki.model.IWikiModel;
import info.bliki.wiki.tags.NowikiTag;

import java.io.IOException;
import java.util.Map;

public class MyTag extends NowikiTag {
 
 public MyTag(){
  super("my");
 }
 
 @Override
 public void renderHTML(ITextConverter converter, Appendable buf, IWikiModel model) throws IOException {
  
  TagNode node = this;

  //Список атрибутов, которые присутствуют в теге
  Map<String, String> tagAtttributes = node.getAttributes();
  
  //Контент, который находится внутри тега
  String content = getBodyString();
  
  buf.append('<p>My wiki tag.</p>');
  buf.append('\n');
  buf.append('<p>'+content</p>);
  buf.append('\n');
 }

 @Override
 public boolean isReduceTokenStack() {
  return true;
 }
}

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


import info.bliki.wiki.addon.model.AddonConfiguration;

public class MyConfiguration extends AddonConfiguration {
 
 static {
  TAG_TOKEN_MAP.put("my", new MyTag());
 }

 public static MyConfiguration DEFAULT_CONFIGURATION = new MyConfiguration();

 public MyConfiguration() {
 }
}

Преобразование wiki разметки в html

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


import info.bliki.wiki.model.WikiModel;
import info.bliki.wiki.model.Configuration;

public class Test {

 /**
  * @param args
  */
 public static void main(String[] args) {
  WikiModel wikiModel = 
            new WikiModel(new MyConfiguration(), "http://www.mywiki.com/wiki/${image}", "http://www.mywiki.com/wiki/${title}");
  String htmlStr = wikiModel.render("This is a simple [[Hello World]] <my>Wow!</my>");
  System.out.print(htmlStr);
 }

}

Вот и вся магия :).

Статистика посещения блога Blogger (Blogger Stats)

2010-07-05T10:38:00.001-07:00

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

Вот уже второй месяц читаю его блог http://www.vdovgan.ru/. Тему блога в полной мере иллюстрирует заголовок "Мои мысли об успехе, счастье и богатстве". И действительно, на множество своих вопросов я нашел глубокую мудрость. Хочу выразить огромную благодарность Владимиру Довганю! Ну и теперь о самом главном :), о статистики посещения блога.

После того, как Google приобрел проект blogger.com, было понятно, что сам сервис будет улучшен и появятся новые возможности. И вот сейчас появилась очередная новая возможность позволяющая просматривать статистику блога Blogger используя "Blogger in Draft".

Статистика

Для просмотра статистики входим в блог через "Панель инструментов" ("Blogger in Draft") и смело жмем на новом пункте меню "Статистика". Дальше можно увидеть 4 простых подменю: Обзор, Посты, Источники переходов, Аудитория. Все довольно просто и понятно.

"Обзор"

"Посты"

"Источники переходов"

"Аудитория"

Какие отличия от Google Analytics?

В своем блоге я использую инструмент Google Analytics, который позволяет отлично отслеживать посещаемость, и у многих может возникнуть вопрос: "Чем данная статистика отличается от статистики Google Analytics?".

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

Для себя я решил, что ее можно использовать как отличный предварительный инструмент анализа. Так что попробуйте ее уже сейчас!

"Каталог шрифтов" или "Как быстро подобать шрифт для сайта/блога"

2010-05-25T00:41:00.000-07:00

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

В этом посте хочу рассказать о проекте Google "Каталоге шрифтов" и о вспомогательном сервисе "Просмотрщике шрифтов". Используя их вы сможете ответить на вопрос "Как установить шрифт на сайте/блоге?", "Как изменить шрифт на сайте/блоге?" и внедрить эти шрифты в течении 1 минуты. Сразу хочу сказать о том, что, к сожалению, данные шрифты НЕ поддерживают кириллические символы :(.

Making the Web Beautiful!

Поддерживается браузерами(по документации):
- Google Chrome 4.249.4+
- Mozilla Firefox 3.5+
- Apple Safari 3.1+
- Opera 10.5+
- Microsoft Internet Explorer 6+

Каталог шрифтов

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

Например, для того чтобы написать фразу "Making the Web Beautiful!" необходимо добавить следующий html


<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

<div style="font-family: 'Tangerine'; font-size: 80px">Making the Web Beautiful!</div>

Предварительный просмотр шрифтов

Просмотреть и подобрать необходимый параметры шрифта вам поможет "Просмотрщик шрифтов". Вводите свой текст, выбирает шрифт, задаете параметры и сразу же получаете результат!

Предварительный просмотр текста

Настройка параметров

Код для внедрения

Уложились в минуту?! :)

Удаляем "Панель навигации"(Navbar) из блога Blogger (blogspot.com)

2010-05-18T04:41:00.000-07:00

Мой блог "Сказки на ночь" повзрослел немного, 5-го мая ему исполнился первый годок. Желание рассказать и написать про какие-то вещи возникало и до этого, но начал только после того, как столкнулся с проблемой, решение которой не смог найти в интернете.

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

С самого начала выбора платформы Blogger(blogspot.com), как основы для блога, у меня часто возникал вопрос: "Как удалить Панель навигации из блога Blogger?". Обычно каждый гаджет можно удалить войдя в режим редактирования ("Дизайн"->"Элементы страницы"->кнопка "Изменить"), но почему-то "Панель навигации" одна из числа "особенных" :(.

Как оказалось, удалить "Панель навигации" можно довольно простым способом. Для этого переходим в меню "Дизайн"->"Изменить HTML", находим открывающийся тех body ("<body>") и перед ним добавляем следующий HTML


<script type='text/javascript'> 
<![CDATA[ 
<!-- 
/*<body>*/ 
--> 
]]> 
</script>

Жмем "Сохранить шаблон" и на экране будет отображено следующее окно

Для окончания удаления "Панель навигации" необходимо нажать "Удалить виджет". Если вам все же захотелось вернуть ее назад, то просто уберите вставленный HTML код из шаблона.

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

Пробуйте и наслаждайтесь!

Финал конкурса бизнес-проектов HSE{10K}

2010-05-11T04:55:00.000-07:00

Апрель выдался отличным месяцем для новых интересных знакомств, новых идей и даже публичных выступлений (первый опыт). Одним из результатов работы стал выход в финал конкурса HSE{10K} с идеей проекта MobilQuest. Призовых мест нам не досталось(а так бы постригли одного из участников налысо), зато мы получили кучу опыта, интересные знакомства и весьма хорошую обратную связь от членов жюри.

Рождение идеи проекта

Сама идея проекта MobilQuest родилась в результате работы на серии курсов "Создание успешного нового бизнеса", там же сформировалась команда из 6 человек. Дмитрий Репин (Директор по старт-ап проектам СКОЛКОВО, профессор ГУ-ВШЭ, основатель конкурса 'Бизнес инновационных технологий',
создатель программы eXtrepreneurship) и Алексей Николаев (директор академических программ Intel в России) , по моему мнению, справились со своей задаче на все 100%. Программа курсов получилась живой, основной же изюминкой курса была практика. Огромная благодарность создателям и руководителям курса.

Курсы позволили понять некоторые тонкости механизма и обзавестись разносторонней командой. От нас же требовалось выбрать идею и проработать ее. С самого начала нам хотелось поучаствовать в конкурсе HSE{10K}, да и времени было достаточно, до окончания подачи заявки оставалось 2 месяца.

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

Осталась 1 неделя

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

Каждый день проходили встречи и обсуждения результатов, страсти кипели не на шутку. Встречи в живую ближе к ночи переходили в online, где заканчивались бурными дискуссиями и морем негодования. И вот за 7 минут до окончания мы успели подать заявку.

Через несколько дней мы получили письмо, о том, что проект MobilQuest вышел в финал. Первое ликование...

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

7 дней до конкурса

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

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

Презентацию закончили доделывать за 2 часа до начала :).

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

Час X

Первым всегда тяжело.

Выводы: идея должна зажечь весь зал; правильное позиционирование залог успеха.

В очередной раз убеждаюсь, что ЛУЧШЕ ОДИН РАЗ ПОПРОБОВАТЬ, ЧЕМ СТО РАЗ УСЛЫШАТЬ. Дерзайте и вы добьетесь успехов!

P.S: Апрель был знаменателен не только этими событиями. На своем блоге сейчас тестирую небольшой проект о котором расскажу вскоре.

Изменяем дизайн блога Blogger(blogspot.com)

2010-03-12T11:38:00.000-08:00

Талант дизайнера явно не в первой десятке моих сильных сторон. И вот, узнав о новом инструменте "Blogger Template Designer", который был анонсирован на сайте Blogger in Draft, решил его опробовать.

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

Хочу в этом посте рассказать о самом инструменте и о некоторых тонкостях с которыми пришлось столкнутся.

Как войти в Blogger Template Designer?

Новый инструмент изменения дизайна "Blogger Template Designer" доступен в версии "Blogger in Draft" о которой я писал ранее в статье "Новые возможности Blogger (Blogger in Draft)".

Для доступа к шаблону сперва необходимо зайти в "Панель инструментов Blogger in Draft" и перейти в меню "Дизайн" необходимого блога.

При клике на меню "Дизайнер шаблонов" попадем в новый инструмент настройки дизайна.

Возможности инструмента по изменению дизайна

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

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

- масса высококачественных фоновых картинок и 12 наборов цветовой схемы блога.

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

- в секции "Дополнительно" вы сможете нужным образом настроить некоторые из блоков вашего блога. Разбивка по блокам немного изменилась, и не всегда с первого раза находишь необходимое свойство, но что действительно радует, так это новая секция "Добавить CSS". FireBug + данная секция позволят с меньшими усилиями преобразить дизайн вашего блога.

Дополнительные особенности о которых необходимо знать

Данный инструмент и шаблоны имеют ряд небольших особенностей:

- Template Designer точно не поддерживает Internet Explorer 6. Так посетителей использующих IE 6 на моем блоге всего 2%, то думаю пора ребята проапгрейдить ваш браузер.

- Закругление и Тени могут не отображаться в старых версиях браузеров. Пользователям использующим Opera придется подождать версии 10.5. А кто использует IE7 и IE8 эффекта в дизайнере не получат, но большинство из них будут отображаться на самом блоге.

- Некоторые гаджеты по разному могут сбоить, перед применением лучше примените дизайн к тестовому блогу.

- Перед применением шаблона сохраните старый. Для этого воспользуйтесь функцией "Дизайн"->"Изменить HTML"->"Загрузить весь шаблон".

- В Opera есть небольшой глюк с фоновым изображением при прокрутки блога вниз. Для исправления добавьте следующий стиль в секцию "Добавить CSS".


.body-fauxcolumn-outer {
  height: 100%;
}

- Если вы хотите изменить фоновое изображение на свое добавьте следующий стиль.


.body-fauxcolumn-outer {
  background: url(<Путь к вашему фоновому изображению>) no-repeat fixed center bottom;
}

Пользуйтесь и наслаждайтесь!

Кнопка "Ссылки@Mail.Ru" на Blogger(blogspot.com)

2010-03-10T02:47:00.000-08:00

Mail.ru реализовала новый сервис Ссылки@mail.ru. Данный сервис позволяет пользователям Моего Мира@Mail.Ru делиться с друзьями ссылками на страницы с любых сайтов. Ссылки на страницы появляются в потоке "Что нового" пользователя в Моем Мире и у всех его друзей.

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

Внедрение кнопки "Ссылки@mail.ru" на сайт

Для того что бы добавить кнопку сервиса Ссылки@mail.ru, необходимо внедрить следующий кусок html.


<a class="mrc__share" href="http://connect.mail.ru/share">Поделиться</a>
<script src="http://connect.mail.ru/js/api/share.js" type="text/javascript"></script>

Тут проблем не должно возникнуть.

Добавления кнопки "Ссылки@mail.ru" на блог Blogger (blogspot.com)

А вот если вам захотелось добавить такую кнопку на блог Blogger, то необходимо будет воспользоваться расширенным синтаксисом.

Заходим в редактирование шаблона блога ('Дизайн'->'Изменить Html'), и установив галку 'Расширить шаблоны виджета', находим секцию


<b:includable id='post' var='post'>
  <div class='post hentry'>
   //Место для добавления кнопки Ссылки@mail.ru!
   ...
  </div>
</b:includable>

Добавляем следующий фрагмент кода


<div style='float:right;'>

<a class='mrc__share' expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url'>Поделиться</a>
<script src='http://connect.mail.ru/js/api/share.js' type='text/javascript'/>

</div>

Выбор стиля кнопки "Ссылки@mail.ru"

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


<a class="mrc__share" type="button_count" href="http://connect.mail.ru/share">Поделиться</a>

- "big".
- "button_count" (используется по умолчанию).
- "button".
- "micro".

Детальную информацию можно найти в описании Ссылки@Mail.Ru.

Как добавить Google Buzz Feed на свой сайт/блог за 5 мин?

2010-03-07T07:15:00.000-08:00

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

Подключаем Google Buzz Feed

Чтобы добавить Google Buzz Feed на свой сайт, воспользуемся готовым решением google-buzz-widget от mikedotmore. Для этого необходимо выполнить 2 шага:
1. Добавляем скрипты jQuery (выше версии 1.3.2) и google-buzz-widget на страницу.
2. Добавляем инициализацию google-buzz-widget.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://google-buzz-widget.googlecode.com/files/jquery.google-buzz-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('div.my-buzz').googleBuzz({
         username:'Sergey.Melnichenko'
         ,n:6
         ,show_n:3
      });
   });
</script>

<div class="my-buzz">loading..</div>

где username нужно заменить на ваше имя пользователя Google.

Дополнительные настройки Google Buzz Widget

Google Buzz Widget имеет несколько настроек, которыми вы можете воспользоваться:

- debug - включает debug режим. Если установить значение в 1, то будут выводиться ошибки. По умолчанию имеет значени 0.

- username - имя пользователя Google.

- n - число записей Google Buzz, которое будет запрошено. Максимальное значение 100, по умолчанию 1.

- show_n - число записей Google Buzz которое будет отображаться на странице. По логике вещей данное число должно быть меньше чем параметр n. Если данное число установить в 0, то будет отключен режим переходов между отображениями и будет отображаться простой список. По умолчанию данное поле имеет значение 1.

- stay_time - время отображения записи в миллисекундах . По умолчанию 5000.

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

- exit_time - время за которое будут скрыты старые записи при смене в миллисекундах. По умолчанию - 200.

- animate - какой режим анимации будет при смене записей. Доступны: 'opacity', 'height', 'width', 'fontSize', 'lineHeight'. По умолчанию - 'opacity'.

- header - Html разметка, которая будет помещена в начало виджета в качестве заголовка.

- snippet - режим отображения каждой записи. Если установить в 1, то будет отображаться краткое содержание, 0 - полностью запись. По умолчанию - 1.

- show_source - отображать источник записи (Twitter, Google Reader и т.д.). По умолчанию - 1.

- show_date - отображать дату записи или нет. По умолчанию - 1

- info - Html, в котором находится ссылка на сайт создателя виджета. Можно удалить ее, установив значение данного поля в "".

jQuery tips. Часть 2. Советы и уловки

2010-03-03T14:03:00.000-08:00

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

Альтернативный путь Document Ready

Одной из первых функций с которой я познакомился изучая jQuery, была "$(document).ready". Есть и альтернативный вариант вызова данной функции.


$(document).ready(function() {
 //document ready
});

//Альтернативный путь, и заметьте, так короче! :)
$(function(){
 //document ready
});

Используем jQuery для разбора xml(parse xml)

Используя jQuery, вы можете с легкостью обрабатывать и манипулировать xml данными. Следующий пример демонстрирует как можно преобразовать xml данные в jQuery объект.


var jquery_xml_parse = $("<xml><title>jQuery parse xml</title><data>Xml data</data></xml>");
var data_node = $("data", jquery_xml_parse);
var result = data_node.text(); // результат "Xml data"

Экранирование символов используя jQuery

jQuery настолько крут, что легко справляется с экранированием символов. Рассмотрим следующий пример.


var htmlString = "<scr"+"ipt>alert('hi!');</scr"+"ipt>";
$("#jquery_escape_html").text(htmlString);

В результате отработки данного скрипта получим HTML


<div id="jquery_escape_html">&lt;script&gt;alert(&#39;hi!&#39;);&lt;/script&gt;</div>

А на экране будет отображен текст: "<script>alert('hi!');</script>"

Отложенная загрузка контента

Очень прикольно смотрятся сайты в которых некоторые секции загружаются динамически. jQuery позволяет делаеть такие вещи крайне просто.


$('#jquery_page_load').load('content/load_form.html', function() {
    // Код, который будет выполнен после загрузки контента
});

Открываем ссылки в новом окне

Для того чтобы ссылки открывались в popup окне добавьте на свою страницу следующий код.


jQuery('a.popup_window').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) { newwindow.focus(); }
    return false;
});

Теперь, при клике на ссылку у которой будет установлен класс "popup", страница будет открыта в popup окне.

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


jQuery('a.tab').live('click', function(){
    jQuery(this).attr("target","_blank");
    return true;
});

События

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


$("a").bind("click.event_tracking", function(){
  //ваш код
});

$("a").bind("click.animation", function(){
  //ваш код
});

$("a").unbind(".event_tracking");

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


//Добавления обработчика события "custom_event"
$("p").bind("custom_event", function(e, count) {
});

//Вызов события
$("p").trigger("custom_event", [ 5 ]);

Определяем позицию курсора

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


$().mousemove(function(e){  
    //Записываем координату x и y в элемент с идентификатором "cursor_position"
    $('#cursor_position').html("X: " + e.pageX + "; Y:" + e.pageY + ".");
});

Как получить координаты DOM элемента?

С помощью jQuery получить координаты DOM элемента очень просто. Используйте следующий код:


var сe = $("#сoordinate_element");
var left_offset_position = сe.offset().left; //это координата left
var top_offset_position = сe.offset().top; //это координата top
var right_offset_position = сe.offset().left+сe.width(); //это координата right
var bottom_offset_position = сe.offset().top + сe.height(); //это координата bottom

Как определить какую кнопку нажали?

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


$(function() {
    $(document).keypress(function(e){
        //e.which содержит код нажатой кнопки
        switch(e.which){
            // "ENTER"
            case 13:
                alert('enter pressed');
            break;

            // "s"
            case 115:
                alert('s pressed');
            break;
        }
    });

});

Возврат к началу страницы

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


<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......  
<a id="top" style="cursor:hand;cursor:pointer">Вверх!</a>

Javascript


$('#go_top').click(function() {  
    $(document).scrollTo(0,500);  
}

Используйте клонирование для создания элементов

Для создания DOM элементов максимально используйте метод jQuery ".clone".


// клонируем элемент с идентификатором "cloneHtmlElement"
var cloned = $('#cloneHtmlElement').clone();

К сожалению, данный метод не клонирует JavaScript объекты. Для этого можно воспользоваться следующим кодом:


// Simple clone
var clone_object = jQuery.extend({}, source_object);

// Deep clone
var clone_object1 = jQuery.extend(true, {}, source_object);

Simple clone - клонирование всех свойств объекта, исключая сложные свойства.
Deep clone - рекурсивное клонирования всех свойств объекта.

Проверка элемента на соответствие

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

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


if($(element).is(":visible")) {
       //элемент видимый УРА (Visible!)
}

Жизнь стала легче? :)

Добавляем кнопку Google Buzz в свой блог Blogger(blogspot.com)

2010-02-12T09:52:00.001-08:00

Совсем недавно Google анонсировал выход нового продукта "Google Buzz (Google Живая Лента)". Направление на проекты с социальным уклоном Google взял уже давно, а данный сервис еще одна из таких социальных реализаций. Если вкратце, то суть сервиса "Делись всем со всеми".

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

Использовать или не использовать Buzz сервис решать вам,а в этом небольшом посте хотел лишь описать то, как можно добавить кнопку Google Buzz на ваш блог Blogger(blogspot.com).

Для начала необходимо зайти в редактирование шаблона блога ('Дизайн'->'Изменить Html'), и установить галку 'Расширить шаблоны виджета'. Находим секцию


<b:includable id='post' var='post'>
  <div class='post hentry'>
   //Место для добавления Google Buzz Button!
   ...
  </div>
</b:includable>

и добавляем следующий Html


<div style="float:right;">

  <a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homepageUrl '><img src='http://sscaos.googlecode.com/svn/trunk/img/googlebuzz.png'/></a>

</div>

Тег div можете убрать, он лишь заставляет кнопку прижаться к правому краю. Сохраняем шаблон и теперь справа у каждого поста будет кнопка "Google Buzz".

Наслаждайтесь!

Новое доменное имя блога

2010-02-09T03:07:00.000-08:00

На прошлой неделе назрел вопрос о смене домена. Не то чтобы такой вопрос не возникал раньше, просто не видел существенных аргументов в пользу смены домена. Аргумент "Так круто!" не имел, да и не имеет для меня значения :).

Но вот у меня появилась нормальная аргументация (о ней чуть дальше) и блог "Сказки на ночь" переехал на новый домен http://night-fairy-tales.com/. Сразу прошу прощения у всех пользователей, которые при этом ощутили какие-либо неудобства.

Как затронут данные изменения читателей блога?

Так как я не менял движок блога и оставил его на Blogger(blogspot.com), то на данный момент никаких изменения для читателей почти не произойдет. Если вы были "Постоянными читателями" блога, то вы ими и останетесь. Если вы читали RSS ленту, то ничего менять вам не придется, адрес RSS ленты останется старым (связано с особенностями FeedBurner :) ).

Зачем менять домен?

Движок Blogger(blogspot.com) имеет некоторые недостатки и приходится или искать обходные пути, или мириться с ними в надежде, что программисты расщедрятся и исправят их :).

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

Например, на текущий момент, при смене домена(*.blogspot.com) вы не сможете склеить ваш поисковый ранг Google(PR) или Yandex(ТИЦ). Для Google нужно указать в "Инструменты для веб-мастеров" для сайта "Изменение адреса", но сделать это можно исключительно для доменов корневого уровня, или вернуть страницу со статусом 301 c указанием на новый домен. Для Yandex необходимо в файле robots.txt добавить строчку "host: domain.zone". В Blogger нельзя реализовать ни один из перечисленных вариантов :(.

Особенности публикации блога Blogger(blogspot.com) на персональном домене

Дальше буду рассматривать ситуацию, когда вы уже купили домен и когда блог будет непосредственно на самом домене.

Ну вот вы стали счастливым обладателям доменного имени. Что делать дальше?

Изменить настройки своего DNS сервера

В настройках вашего DNS сервера вам необходимо добавить 4-е записи типа A для следующих IP адресов: 216.239.32.21, 216.239.34.21, 216.239.36.21, 216.239.38.21

Мой регистратор услугу "Primary и Seconadary DNS сервер" толкает за деньги, поэтому было решено воспользоваться бесплатным DNS сервером (список был найден в статье "10 бесплатных Primary и Seconadary DNS серверов"). Выбор пал на www.xname.org.

Настройка публикации в Blogger

Для настройки публикации заходим в меню "Настройки"->"Публикация" и нажимаем на ссылку "Персональный домен". Так как домен у нас уже есть жмем "Перейти к расширенным настройкам", вводим в поле "Ваш домен" имя домена (для меня это "night-fairy-tales.com"), ломая мозг пытаемся понять, что же написано в капче, вбиваем текст и жмем "Сохранить настройки".

И вот тут вы должны уже были начать радоваться, но УВЫ вы видите сообщение "Блоги нельзя размещать на доменах без субдоменов".

В принципе можно было разместить и c субдоменом, если бы перед этим я не тестировал на другом блоге, на котором все получилось. Это меня очень удивило и ввело в ступор на пару часов.

Все оказалось проще простого, если вы введете название домена в верхнем регистре, то Blogger опубликует его без ошибок. Для меня необходимо было ввести - NIGHT-FAIRY-TALES.COM

Странный момент, но это работает :).

Новые возможности Blogger (Blogger in Draft)

2010-02-06T03:49:00.000-08:00

В поисках информации по статистики посещения блогов Blogger наткнулся на упоминание draft.blogger.com. Название меня заинтересовало, решил посмотреть, что же все таки это за блог.

Как оказалось это новый разрабатываемый сайт для управления блогом Blogger(blogspot.com). То, что я нашел, меня приятно удивило.

Возможно не только я прозевал такие замечательные фичи. Дальше кратко расскажу про некоторые из них.

Пенель инструментов

Для того что бы вам были доступны новые возможности Blogger in Draft , вам необходимо входить через draft.blogger.com. Каждый раз менять url с blogger.com на draft.blogger.com не очень удобно, для упрощения доступа заходим на draft.blogger.com и ставим галочку "Сделать Черновик Blogger панелью инструментов по умолчанию".

При всех следующих входах на Панель инструментов Blogger вы будете автоматически попадать на Blogger in Draft.

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

Дополнительные страницы

Один из самых неудобных моментов, которые меня раздражали на Blogger(blogspot.com) - это отсутствие возможности добавлять дополнительные страницы. Из этой ситуации можно выйти добавив страницу в качестве поста и запретив добавлять комментарии, но такая страница попадает в общий список постов :(, что тоже неудобно.

С помощью Blogger in Draft вы можете добавить такие страницы(до 10 страниц) на свой блог. Эта фича настолько естественна и необходима, что для меня это оказалось самым востребованным нововведением!

Для добавления страницы вам необходимо зайти в меню "Отправка"->"Изменить страницы".

Жмем "Создать страницу" и заполняем страницу как при обычном написании поста. Чтобы она появилась в блоге, необходимо нажать "Опубликовать страницу".

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

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

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

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

Изменения даты публикации

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

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

Ярлыки местоположения

В Blogger in Draft, кроме обычных ярлыков вы можете добавить и ярлык местоположения. Очень интересная фича :), а главное добавить местоположения действительно просто.

Для добавление местоположение находим кнопку "Добавить местоположение" при редактировании поста и смело жмем ее.

Находим нужное нам местоположение и сохраняем его. При публикации в конце вашего поста будет отображена ссылка на указанное местоположение, при клике на которую оно будет отображено в Google Maps.

Местоположения добавленные таким образом будут доступны в RSS и Atom лентах с использованием стандарта GeoRSS. Это даст возможность RSS-агригаторам и поисковым движкам ассоциировать ваш пост с указанным местоположением.

Добавил ярлык местоположения, а ссылка не появилась?
В старых версиях шаблона отсутствует секция вывода ярлыков местоположения. Решить проблему можно двумя способами:
1. Установить обновленный шаблон. Этим решением лучше воспользоваться если вы сами не правили шаблон, в противном случае смотрите решение 2.
2. Добавить секцию вывода ярлыка местоположения в шаблон. Для этого вам необходимо перейти в меню "Дизайн"->"Изменить HTML" и установить флаг "Расширить шаблоны виджета". После чего необходимо найти секцию

<div class='post-footer-line post-footer-line-3'/>

и заменить ее следующим фрагментом

<div class='post-footer-line post-footer-line-3'>
    <span class='post-location'>
    <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
    </b:if>
    </span>
</div>

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

Мнение

2010-01-29T23:39:00.000-08:00

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

Ну и как благодарный читатель периодически думаю над вопросами
- О каких интересных вещах написать?
- Как можно улучшить свой блог?
- Чего не хватает в самом блоге и его статьях?

Как показывает практика одна голова хорошо, а две лучше :). Поэтому решил, что необходимо сделать следующие:

1. Поучаствовать в акции "Свежая голова". Автор блога "Школа фрилансера" предлагает услуги по бесплатному обзору блогов.

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

3. Переработать свой блог с точки зрения дизайна и структуры.

Дорогие читатели, прошу вас оставить в комментариях ваше мнение о моем блоге и ваши пожелания и замечания! Кто первый? :)

Google App Engine. Обработка запросов с ошибками в webapp фреймворке

2010-01-29T10:06:00.000-08:00

Идея переработать блог летала вокруг уже давно, назрело так сказать. Разделив работу на этапы, для начала решил перенести все ресурсы на CDN. Но как всегда захотелось халявы :).

Вспомнил о своем аккаунте на Google App Engine, промелькнула мысль "Можно же построить свой CDN, практически без затрат денег и управлять им так, как душа пожелает". Реализации, которые есть на текущий момент меня немного не устроили и работа закипела.

В качестве основы был выбран webapp фреймворк. Но речь как раз не о моей реализации, а о тонкостях самого фреймворка. Краткий пост хотел посвятить небольшому хаку по обработке запросов, в которых произошла ошибка.

В документации данная тема раскрыта в статье "Перенаправления, заголовки и коды статуса". И приведен следующий пример.


class MyHandler(webapp.RequestHandler):
  def get(self):
    self.response.out.write("Вы попросили что-то сделать.")
    try:
      doSomething()
      self.response.out.write("Это сделано!")

    except Error:
      # Очистить вывод и вернуть сообщение об ошибке.
      self.error(500)

Вроде бы все понятно, если вызвать self.error(500), то все данные которые записаны в ответ будут удалены и будет возвращено сообщение об ошибке.

Но при выполнении сразу можно заметить один маленький нюанс, сервер нам вернет пустую страницу в случае, когда отработает команда self.error(500) или self.error(404), или будет вызван данный метод с любой другой ошибкой. Но как и написано в документации, ответ будет имеет код ошибки 500 или 404, или любой другой, соответственно.

Поведение метода можно посмотреть в исходниках.
google.appengine.ext.webapp.RequestHandler


class Request(webob.Request):  
  ...
  def error(self, code):
    """Clears the response output stream and sets the given HTTP error code.

    Args:
      code: the HTTP status error code (e.g., 501)
    """
    self.response.set_status(code)
    self.response.clear()
  ...

Он всего лишь устанавливает нужный статус и очищает ответ. А хотелось же получить страницу с сообщением об ошибке :(!!!

Просто редиректить на страницу ошибки как-то не интересно. Добавлять после каждого вызова "self.error" рендер страницы ошибки тоже как-то не кошерно. Решил добавить небольшой хак


import os
import logging
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import RequestHandler

template_path = os.path.join(os.path.dirname(__file__), "templates")

def get_template_path(file_name):    
  return os.path.join(template_path, file_name)

def error_decorator(func):    
    def wrapper(*args, **kwarg):
        handler = args[0]
        status_code = args[1]
        result = func(*args, **kwarg)
        try:
            html = {
                404 : "404.html",
                500 : "500.html"
                }[status_code]
            if not html:
                return;
            handler.response.out.write(template.render(get_template_path(html), template_values))
        except Exception, e:
            logging.error('Raise error in error_decorator. %s' % e)
        return result
    return wrapper

def main():
    RequestHandler.error = error_decorator(RequestHandler.error)
    application = webapp.WSGIApplication(
          [('/', MainHandler),
          ], debug=True)
    util.run_wsgi_app(application)

if __name__ == '__main__':
    main()

При вызове метода "self.error(404)" кроме установки статуса и очистки данных response в ответ будет добавлена страница с сообщением об ошибке. Такой подход имеет ряд преимуществ.

Пользуйтесь! :)

Необычные особенности JavaScript

2010-01-22T10:37:00.000-08:00

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

Операции суммирования и вычитания

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

var p1 = "3" + 1; // p1 = "31" (строка)
var p2 = "3" - 1;    // p2 = 2 (число)
var p3 = "3" - -"1"; // p3 = 4 (число)

Как оказывается, в результате сложения строки и числа, вы получаете строку, а вот если вы будете вычитать из строки число или из строки строку, то получите опять- таки число.

Сравнения

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

var n = ''=='0'; //false
var n1 = 0==''; //true
var n2 = 0=='0'; //true
var n3 = false=='false'; //false
var n4 = false=='0'; //true
var n5 = false==undefined; //false
var n6 = false==null; //false
var n7 = null==undefined; //true
var n8 = " \t\r\n"==0; //true

Еще один из интересных моментов связан со сравнением массивов.

var n = 2==[2]; // результат true

Еще более удивительным может показаться следующие сравнение

var n1 = 2==[[[2]]]; // результат true

Ну и что бы окончательно убедится, что сравнение массивов обладает истинной магией, посмотрите на вот этот пример.

var a = { "item" : 1 };
var n2 = a[[[["item"]]]]==a["item"]; // результат true

Особенность работы с типом undefined

Этот тип состоит из единственного значения undefined. Данное значение принимают все переменные, которые объявлены, но которым еще не присвоено значение.

var i = {};
var n = i.j===undefined; // результат true, значение свойства b не установлено

Особенность заключается в том, что если данной переменной undefined присвоить другое значение, то результат при сравнении не заданного свойства с этим значением будет давать значение false;

undefined = 1;
var n1 = i.j===undefined; // результат false

Для избежания ошибок в коде лучше использовать сравнение типов.

var n2 = typeof i.j=="undefined"; // результат всегда true

Преобразования строки в число

Функция parseInt преобразует строку в число по указанному основанию.

var n1 = parseInt('06'); // результат 6
var n2 = parseInt('07'); // результат 7
var n3 = parseInt('08'); // результат 0
var n4 = parseInt('09'); // результат 0
var n5 = parseInt('10'); // результат 10

Будьте бдительны при использовании этого метода :).

Преобразование в логический тип

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

var n = Boolean(value);

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

var n1 = !!0; // результат false
var n2 = !!1; // результат true
var n3 = !!4; // результат true
var n4 = !!""; // резульатат false
var n5 = !!"0"; //результат true
var n6 = !!"12"; // результат true

Операции преобразования будут проведена согласно правилам преобразование к логическому типу.

Округление чисел

Для округления в JavaScript вы можете воспользоваться функциями Math.floor(x) или parseInt(x,10). Двойное побитовое NOT (~~) можно так же использовать для округления.

var n = Math.PI; // результат 3.141592653589793
var n1 = Math.floor(n); // результат 3
var n2 = parseInt(n, 10); // результат 3
var n3 = ~~n; // результат 3

Очень необычный способ, но результат возвращает корректно :).

Тип Date

Дата в JavaScript измеряется в миллисекундах, начиная от полуночи 01 января 1970 года GMT+0. Для получения даты вам нужно создать объект типа Date и передать туда необходимые параметры даты.

var currentDate = new Date(); //Текущая дата
var date = new Date(2008,07,06); // 06.07.2008

Есть интересный момент при работе с датой, связан с тем, что вы можете указывать смещение по годам, месяцам, дням, минутам, секундам. Например, вам необходимо от даты 10.10.2010 узнать дату 1024 дня.

var futureDate = new Date(2010,10,10+1024); // 30.08.2013
alert(futureDate);

Особенность работы try, catch, finally

Как мы все прекрасно знаем, для обработки исключений в javascript нам необходимо использовать конструкцию try...[catch]...[finally]. Казалось, какие особенности может иметь такая конструкция. Рассмотрев в примере от Neil Fraser, мы можем убедится, что все же тут имеется некоторые особенности. Как вы думаете, что какое значение вернет функция f()?

function f() {
  try {
      return true;
  } 
  finally {
    return false;
  }
}

j = f(); // j == false;

Как оказывается данный метод вернет значение "false".

Обращение к свойствам

Javascript имеет два способа используя которые можно получить значение свойства. Первый, обращение через ".", удобней для написания, второй, обращение как к элементу массива, будет полезен в программного доступе к значениям.

a['title'] = "JavaScript array";
a.title = "JavaScript свойства объекта";

Именно из-за этой особенности можно ответить на вопрос "Как узнать все свойства объекта?".

var obj = { param1 : JavaScript string", param2 : "Javascript date" };
var result = '';
for (var i in obj) {
  // обращение к свойствам объекта по индексу
  result += i + " = " + obj[i] + "\n";
}
alert(result);

Аргументы функции

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

function wow(param1){
  var params = arguments; // ["hello", "world"];
}
wow("JavaScript tips", "Используем arguments JavaScript");

Что-то упустил?

Исследуем новые возможности jQuery 1.4

2010-01-16T03:25:00.000-08:00

14 января был 4-й день рождения jQuery. К этому дню и был приурочен выпуск релиза jQuery 1.4. Цельного понимания изменений не было, информация была немного скупа, вот я и решил попробовать его в действии, вследствие чего и родилась данная статья.

Так как версию jQuery 1.3.2 я использовал уже довольно долго, то хотелось найти ответ на следующий вопрос: "Стоит ли переходить и что придется менять в старом коде для перехода на jQuery 1.4?".

Совместимость с другими версиями jQuery

Разработчики, которые раньше использовали версию jQuery 1.3.2, могут смело переходить на использование версии jQuery 1.4, они полностью совместимы (одна оговорка, см. jQuery.param). Во всех остальных случаях вам придется проверить совместимость вашего кода с jQuery 1.4.

Данная версия обладает рядом преимуществ, одним из которых является оптимизация и повышения быстродействия методов addClass, removeClass, append, html и других.

Производительность методов(источник)

СSS

Как видно из графика, была проведена работа по оптимизации методов взаимодействующих с css. Для удобства был расширен функционал методов .css(), .addClass(), .removeClass(), .toggleClass(), .offset().

- .css(propertyName,function(index,value)).
Метод css необходим для определения и установки css свойств. Теперь определять значение css свойства можно в динамике.

Внимание: В документации по jQuery 1.4 в описании данного метода допущена ошибка. Данный метод принимает объект map, где значение может быть определено функцией function(index,value).


$(this).css({
  width : function(index, value) {
        //index - индекс текущего элемента
        //value - старое значение этого свойства
        return parseFloat(value) * 1.2;
      },
  height: "20px" 
});

- .addClass(function(index,class)), .removeClass(function(index,class)), .toggleClass(function(index,class),[switch])
Группа данных методов необходима для добавления/удаления css классов. Теперь методы могут в качестве значений принимать функцию, которая должна вернуть строку с значением класса. Если нужно передать несколько классов, то они должны быть разделены пробелом.


$("#myID").addClass(function(index, className) {
 //index - индекс текущего элемента
 //className - старое значение class
 return "myclass";
});

$("#myID").removeClass(function(index, className){
 if (index==0) {
    return "myclass";
 } else {
    return "";
 }
});

- .offset(coordinates), .offset(function(index,coords))
Метод .offset() в предыдущих версиях jQuery возвращал объект, который описывал положение DOM элемента относительно объекта document. В текущей версии функционал данного метода был расширен, и теперь можно не только узнать положение, но и установить его.


//Смещаем элемент на 20 пикселей по оси X, и на 10 по оси Y
$("#myID").offset(function(index, coordinate){
  //index - индекс текущего элемента
  //coordinate - текущие координаты смещение элемента
  return { top: coordinate.top+20, left: coordinate.left+10 };
});

//Перемещаем элемент в левый верхний угол экрана
$("#myID").offset({ top: 0, left: 0 });

Внимание: При исследовании заметил маленькую особенность в работе метода offset принимающего функцию.
1. Если изменить значение coordinate.top или/и coordinate.left, а в качестве значения вернуть объект coordinate, то смещение НЕ произойдет.
2. Если изменить значение coordinate.top или/и coordinate.left, а в качестве значения вернуть новый объект с необходимыми координатами, то при смещении элемент НЕ будет находится в задаваемой точке.

Детальная информация: css, addClass, removeClass, toggleClass, offset.

Создание/добавление DOM элементов

Была проведена существенная работа и по доработке методов создания/добавления DOM элементов.

- cоздание DOM элементов jQuery(html,props)
В своей статье "jQuery tips. Часть 1. 11 моментов о которых необходимо знать" я описывал возможность jQuery по созданию html элементов. В версии 1.4 появилась возможность добавлять атрибуты при создании элемента, передавая их вторым параметром:


jQuery('<a/>', {  
  id: 'jquery14',  
  href: 'http://jquery14.com/day-01/jquery-14',  
  title: 'jQuery 1.4',  
  rel: 'ext_link',  
  text: 'Release jQuery 1.4'  
});

Как вы могли уже заметить тег "a" не имеет атрибута text. В jQuery 1.4 была добавлена возможность устанавливать не только атрибуты, но и вызывать методы jQuery. Так, в данном случае будет вызван метод ".text()" и в качестве параметра будет передано значение "Release jQuery 1.4"

Вот пример который продемонстрирует всю мощь таких атрибутов в jQuery 1.4


jQuery('<div/>', {
  id: 'jquery',  
  css: {
         fontWeight: 500,
         color: 'red'
  },
  click: function(){
         alert('Используем jQuery 1.4!');
  }
});

Кроме присвоения значения атрибуту id, в данном примере устанавливается значение css свойств и добавляется обработчик событий click.

- .after(function(index)), .before(function(index))
Метод after/before добавляет передаваемый в параметре контент после/до каждого элемента в выборке. Теперь данные методы могут принимать функцию, которая должна вернуть Html строку или DOM элемент.


$("#myID").after(function(index){
  //index - индекс текущего элемента
  return document.createTextNode("Используем jQuery 1.4.");
});

$("#myID").before(function(index){
  return "<div>jQuery уже подрос, ему 4 года :).</div>";
});

- .append(function(index,html)), .prepend(function(index,html))
Метод append/prepend добавляет передаваемый в параметре контент в конец/начало каждого элемента в выборке. И в эти методы также можно передавать первым параметром функцию, она должна вернуть Html строку или DOM элемент.


$("#myID").append(function(index, html){
  //index - индекс текущего элемента
  //html - innerText найденного элемента
  return "А вы используете jQuery 1.4?";
});

- .html(function(index,html)), .text(function(index,text)), .val(function)
Возможности этих методов были расширены, и теперь каждая может принимать функцию.


$("#myID").text(function(index, text){
  //index - индекс текущего элемента
  //text - старое значение текста
  return "А вы участвуете в акции '14 Days of jQuery, 15 Days of prizes.'?";
});

$("#myID").html(function(index, html){
  //index - индекс текущего элемента
  //html - старое значение html
  return "<a href='http://mediatemple.net/jquery14/'>14 Days of jQuery, 15 Days of prizes.</a>";
});

$("#myID").val(function(index, value){
  //index - индекс текущего элемента
  //value - старое значение value
  return '13” Apple MacBook Pro хороший приз для конкурса :)';
});

Детальная информация: jQuery, after, before, append, prepend, html, text, val.

Работа с DOM элементами

В новой версии также добавлены некоторые интересные методы по работе с DOM элементами.

- .wrap(wrappingFunction), .wrapInner(wrappingFunction), .wrapAll(wrappingFunction)
Эти методы для каждого элемента в выборке создают дополнительную обертку. Они были доступны с версии 1.2, но в версии 1.4 эти методы могут принимать функцию. Функция должна вернуть структуру, которая будет использована в качестве обертки.


$("#myID").wrap(function(index){
  //index - индекс текущего элемента
  return "<div></div>";
});

$("#myID").wrapInner(function(index){
  //index - индекс текущего элемента
  return document.createElement("b");
});

- .unwrap()
Также был добавлен метод ".unwrap()", который осуществляет противоположное действие методу ".wrap()", т.е. удаляет родительский элемент(обертку) у всех элементов в выборке.


$("#myID").unwrap();

- .detach()
Данный метод удаляет элемент из DOM. Действует подобно методу .remove(), но сохраняет все ассоциации jQuery с этим объектом, т.е. все данные добавлены к этому элементу методом .data() и все обработчики событий добавленные через jQuery будут сохранены.

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


myEl = $("#myID").detach(); //удаляем объект из DOM
....
myEl.appendTo("body"); //добавляем объект

- .toArray()
Очень простой метод, возвращает список элементов, которые были выбраны селектором.
Html:


<ul>
    <li>jQuery 1.2</li>
    <li>jQuery 1.3</li>
    <li>jQuery 1.4</li>
    <li>more</li>
</ul>

JavaScript:


var list = $("li").toArray();
//list = [li, li, li, li];

- .replaceWith(function)
Данный метод заменит каждый выбранный элемент значением, которое будет возвращено функцией. Функция может возвращать Html код или DOM элемент.


$("#myId").replaceWith(function(index){
  //index - индекс текущего элемента
  return "<div>Use replaceWith method in jQuery 1.4!</div>";
});

- .index(), .index(selector)
Метод ".index(element)" доступен с версии 1.0, но теперь у него появилось еще несколько вариантов использования.


var listItem = $('#myID');
alert('Index: ' + $('li').index(listItem));

$('li').click(function(){
  alert('Index: ' + '$(this).index());
})

Детальная информация: wrap, wrapAll, wrapInner, detach, toArray, replaceWith, index.

Сохранение области видимости

Думаю, одним из самых интересных и в тоже время простых методов, которые были добавлены в jQuery 1.4, является jQuery.proxy(). Данный метод имеет следующий синтакс jQuery.proxy(function,scope), jQuery.proxy(scope,name).

Продемонстрирую на примере, описанном в документации jQuery 1.4
Html:


<button id="test" name="test">Test button</button>

JavaScript:


var obj = {
  name: "John",
  test: function() {
    alert(this.name);
  }
};

Если выполнить функцию "obj.test()", то при выполнении, область действия функции будет объект obj, т.е. переменная this будет иметь значение obj, и this.name будет равняться "John".

Добавим в качестве обработчика клика данную функцию
JavaScript:


$("#test").click(obj.test);

В этом случае при выполнении область действия функции будет кнопка button, т.е. переменная this будет иметь значение "[button id="test"]", и this.name будет равняться "test".

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

JavaScript:


$("#test").click(jQuery.proxy(obj,"test"));

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

Детальная информация: jQuery.proxy

Методы проверки вхождения

- .has()
Добавлена новый метод .has(), который проверяет вхождения. Действует он аналогично селектору ":has()". В качестве аргумента проверки метод может принимать jQuery селектор или DOM элемент.


jQuery('div').has('ul');
//аналогично
jQuery('div:has(ul)');

- jQuery.contains()
Это новый метод в версии 1.4, который проверяет вхождения одного DOM элемента в другой. Использовать его чрезвычайно просто.


jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

Детальная информация: has, contains.

Выбор элементов "До"

В тяжелый арсенал селекторов былы добавлены 3 метода: "nextUntil", "prevUntil", "parentsUntil".

Методы "nextUntil", "prevUntil" предназначены для ограничения выбора элементов. Выбор элементов будет прекращен, когда условие, переданное в качестве первого аргумента, не будет истина. Например, если у вас есть следующий html
Html:


<ul>
    <li>jQuery 1.2</li>
    <li>jQuery 1.3</li>
    <li>jQuery 1.4</li>
    <li>more</li>
</ul>

JavaScript:


jQuery('ul li:contains(jQuery 1.2)').nextUntil(':contains(more)');
// будут выбраны значения jQuery 1.3, jQuery 1.4

Метод "parentsUntil" действует похожим способом с двумя предыдущими аналогами, но выбирает все родительские элементы пока условие селектора ложно.

Детальная информация: nextUntil, prevUntil, parentsUntil.

Множественное добавление обработчиков событий

В статье "jQuery tips. Часть 1. 11 моментов о которых необходимо знать" я уже писал об интересном решении от Keegan Watkins, которое позволяло добавлять множество обработчиков событий в одном методе.

Как видим, разработчики jQuery добавили такую возможность в jQuery 1.4.


var i = 0;
//Добавляем обработчики событий
$("#myID").bind({
 click : function(event) {
  //обработчик события click
  i += 1;
  if (i>=100) {
     $this.unbind(event);
  }
 },
 mouseover : mouseoverHandler,
 mouseout : mouseoutHandler
});

function mouseoverHandler(e) {
 //обработчик события mouseover
}

function mouseoutHandler(e) {
 //обработчик события mouseout
}

$("#myID").unbind("click"); //Удаляем все обработчики события click
$("#myID").unbind(); //Удаляем ВСЕ обработчики событий

Детальная информация: bind, unbind.

Новые события в jQuery

В jQuery 1.4 можно выделить 2 интересных связанных с событиями новшества, были добавлены новые события ".focusin()", ".focusout()" и появилась возможность делегировать дополнительные типы событий используя метод ".live()".

- ".focusin(handler(eventObject))" возникает, когда элемент или дочерние элементы получают фокус, ".focusout(handler(eventObject))", когда элемент или дочерние элементы теряют фокус.

Добавление этих событий меня немного удивило. Чем не устроили события "focus", "blur"?

Объяснение было найдено при прослушивании jQuery Podcast with John Resig. Суть заключается в том, что события "focus", "blur" по спецификации W3C Document Object Model (DOM) Level 2 Events Specification не имеют возможности "всплывания"(bubbles) событий(крайне важный момент при использовании в делегировании событий :) ). Во всех современных браузерах, кроме IE, данный момент был реализован в точности со спецификацией.

Но в тоже врямя, в спецификации W3C описаны событий DOMFocusIn, DOMFocusOut, которые как раз имеют указанную возможность. Команда разработчиков приняла решение упростить названия и добавить еще 2 новых события. Возможность всплывания и реализация данных событий позволила расширить возможности их делегирования, используя метод ".live()".


$("#myID").focusin(function(){
  //элемент получил фокус
});

$("#myID").focusout(function() {
  //элемент потерял фокус
});

- .live()
Расширен список событий, которые можно делегировать с помощью данного метода. Добавлена поддержка "submit", "change", "focusin" и "focusout" событий. Также появилась расширенная аннотация ".live(eventType,[eventData],handler)".


jQuery('input').live('focusin', function(){
    // фокус передан элементу
});

Детальная информация: .focusin(), .focusout(), .live()

Расширенные возможности анимации

В данную версию jQuery был внесен ряд интересных функций для анимации.

- Удаление событий с очереди
Появился новый метод ".clearQueue([queueName])". При вызове метода без параметров все события, которые были добавлены в очередь с использованием метода ".queue()" и не были запущены, удаляются.

Параметр queueName необходим для удаления событий в определенной очереди, по умолчанию - fx. Данный метод выполняет те же действия, что и вызов метода ".stop(true)", но в отличии от метода ".stop()" может применяться не только в анимации.

- Пауза при анимации
До версии 1.4 не было реализовано возможности паузы в анимации. Для реализации необходимо было использовать javascript функцию "setTimeout". На базе плагина jQuery Delay от Clint Helfers был добавлен функционал реализующий задержку. Необходимо вызвать метод "delay()", передав первым параметром количество миллисекунд задержки.


jQuery('#myId')
    .fadeOut()
    .delay(300) // Задержка на 300 мс
    .fadeIn();

Детальная информация: .clearQueue(), .delay()

Методы по работе с объектами

- jQuery.isEmptyObject(object)
Данный метод проверяет пустой ли объект. Вернет значение false в случае, когда объект будет иметь хотя бы одно свойство.


jQuery.isEmptyObject({}); //true
jQuery.isEmptyObject(null); //true
jQuery.isEmptyObject({ item: null }); //false

- jQuery.isPlainObject(object)
Этот метод проверяет, является ли объект плоским, т.е. он должен иметь тип "Object", не должен иметь своих конструкторов и не может иметь свойств от других объектов. На практике такие объекты могут быть созданы 2-мя путями:


var plainObject1 = {};
var plainObject2 = new Object();


jQuery.isPlainObject({}); // true
jQuery.isPlainObject(new Object()); // true
jQuery.isPlainObject({ release: "jQuery 1.4" }); // true
jQuery.isPlainObject(document.createTextNode("Используем jQuery 1.4.")); //false

- сериализация объектов jQuery.param
В jQuery 1.4 добавлена поддержка вложенных сериализаций параметров с использованием метода jQuery.param, который пользуется популярностью в PHP и поддерживается в Ruby on Rails.

При сериализации объекта "{foo: ["bar", "baz"]}" мы получим следующий результат:


jQuery.param({foo: ["bar", "baz"]});
//jQuery 1.4 - "foo[]=bar&foo[]=baz"
//jQuery 1.3.2 - "foo=bar&foo=baz"

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


// Включаем старый способ сериализации на уровне всего фреймворка
jQuery.ajaxSettings.traditional = true;
 
// Включаем старый способ сериализации для одной операции
jQuery.param( stuff, true );
 
// Включаем старый способ сериализации для одного Ajax запроса
$.ajax({ data: stuff, traditional: true });

Детальная информация: jQuery.isPlainObject, jQuery.isEmptyObject, jQuery.param

Еще несколько ~~бесполезных~~ функций:
jQuery() - возвращает пустой список.
jQuery.noop() - возвращает пустую функцию.

Детальную информацию вы можете найти на сайте jQuery, 14 Days of jQuery, jQuery 1.4 API Cheat Sheet.

Используем FireBug для удобной отладки JavaScript

2009-12-29T09:39:00.000-08:00

FireBug один из прекраснейших плагинов разработанных для FireFox. Он сочетает в себе удобство, широкий функционал и возможность написания своих дополнений. Вот уже долгое время FireBug стал для меня незаменимым помощником в веб программировании. Чего стоит возможность просмотра и редактирования html разметки, CSS стилей, мониторинг сетевых запросов и т.д. Каждый из инструментов, предоставляемый FireBug, отличается простой.

В данной статье хотел рассказать про то, как может помочь FireBug при отладке JavaScript кода, а именно про функции и возможности объекта console.

Логирования

Одной из самых незаменимых возможностей при разработке JavaScript сценариев является логирование. Используя FireBug вы получаете 3 преимущества:
1. Возможность задавать разные типы сообщений при логировании.
3. Можете воспользоваться строкой форматирования вывода.
4. Можете группировать сообщения логирования.

При логировании иногда важно разделять сообщения по типам критичности, что бы однозначно определить сбой ли это, небольшое отклонение, или просто сообщение про выполнения каких либо действий. FireBug поддерживает 5 типов логирования:
1. log - обычное сообщение.
3. debug - отладочное сообщение. В консоль возле такой записи будет добавлена ссылка на строку вызова.
2. info - информационное сообщение. Будет отображаться иконка информации (), а в тексте будет ссылка на строку вызова.
4. warn - сообщение предупреждение. Будет отображаться иконка предупреждения (), строка сообщение будет подсвечена цветом, а в тексте будет ссылка на строку вызова.
5. error - сообщения об ошибки. Текст такого сообщения будет красного цвета, будет отображаться иконка ошибки () и так же как у всех важных сообщений будет ссылка на строку вызова.

Методы имеют следующий формат:


console.log(object[, object, ...]); //обычное сообщений
console.debug(object[, object, ...]); //отладочное сообщение
console.info(object[, object, ...]); //информационное сообщение
console.warn(object[, object, ...]); //сообщение предупреждение
console.error(object[, object, ...]); //сообщения об ошибки

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

%s - сторока
%d, %i - целое число
%f - дробное число
%o - ссылка на объект

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

При выводе данный функционал будет выглядеть следующим образом


console.log("Тип сообщения: %s. Обычное сообщение", "log");
console.debug("Тип сообщения: %s. Отладочное сообщение", "debug");
console.info("Тип сообщения: %s. Информационное сообщение", "info");
console.warn("Тип сообщения: %s. Сообщение предупреждение", "warn");
console.error("Тип сообщения: %s. Сообщения об ошибки", "error");

Одной из интересных особенностей, которые обладает FireBug при логировании является группирование логов. Для этого присутствуют 3 функции: console.group, console.groupCollapsed, console.groupEnd.

Каждая из них имеет следующий формат


console.group(object[, object, ...]); //начало групирования
console.groupCollapsed(object[, object, ...]); //начало группирования, с сворачиванием результата
console.groupEnd(); //окончание групирования

Начало группы определяется функциями console.group и console.groupCollapsed, для того чтобы закрыть группу, необходимо вызвать функцию console.groupEnd. Так же можно добавлять подгруппы, количество подгрупп ограничено, наверное, только здравым смыслом :).

Например, у нас есть вот такой JavaScript. В котором желательно знать в каком из циклов возникли ошибки.


for(i = 0; i < 3; i++) {
    if (i===0) {
        console.groupCollapsed("Обработка вложенного цикла %s раз/а", i);
    } else {
        console.group("Обработка вложенного цикла %s раз/а", i);  
    }
    for(j = i-2; j < i+2; j++) {
        if (i-j>0){
            console.error("ошибка в коде! i = %i; j = %i", i, j); //сообщения об ошибки
        } else {
            console.log("i = %i; j = %i", i, j);
        }
    }
    console.groupEnd();
}

Вывод сообщений будет иметь следующий вид

Одна из интересных функций для отображения количество вызовов методов console.count.


for(i = 0; i < 3; i++) {
 for(j = i-2; j < i+2; j++) {
  console.count("Count set j = ");
 }
}

Результат исполнения

Отслеживаем время выполнения

Для определения узких мест при разработке сценариев на JavaScript иногда приходиться отслеживать время выполнения. Для таких целей FireBug имеет два метода console.time, console.timeEnd и console.profile, console.profileEnd.

Если вам необходимо определить время выполнение части когда, пользуйтесь функциями console.time, console.timeEnd. При этом можете инициализировать множество таймеров. Рассмотрим работу на примере.


console.time("Весь цикл");
for(i = 0; i < 3; i++) {
    console.time("Одна итерация");
    if (i===0) {
        console.groupCollapsed("Обработка вложенного цикла %s раз/а", i);
    } else {
        console.group("Обработка вложенного цикла %s раз/а", i);
    }
    for(j = i-2; j < i+2; j++) {
        if (i-j>0){
            console.error("ошибка в коде! i = %i; j = %i", i, j); //сообщения об ошибки
        } else {
            console.log("i = %i; j = %i", i, j);
        }
    }
    console.groupEnd();
    console.timeEnd("Одна итерация");
}
console.timeEnd("Весь цикл");

Результат логирования

Если же вы хотите определить время выполнения функции, количество вызовов каждой функции, процентное распределение между временем каждой функции, то вам лучше воспользоваться console.profile, console.profileEnd.

Для того чтобы начать отслеживание вызовете функцию console.profile, для окончания отслеживания, вам будет необходимо вызвать функцию console.profileEnd.


function first(){
 for(i = 0; i < 3; i++) {
  second(i);
 }
}

function second(i) {
 for(j = i-2; j < i+2; j++) {
  var p = i*2-j%2+i*j;
 }
}

console.profile("first");
first();
console.profileEnd();

Тестирование

Для построение тестовых сценариев можно воспользоваться функцией console.assert. Если выражение, которое будет передано в функцию ложь, то возникнет ошибка.


function first(){
 for(i = 0; i < 3; i++) {
  second(i);
 }
}

function second(i) {
 for(j = i-2; j < i+2; j++) {
  var p = i*2-j%2+i*j;
  console.log("Значение p=%i.",p);
  console.assert(p>=0); 
 }
}

first();

Результат

Просмотр значение элементов

Тяжелый арсенал FireBug завершает функции console.dir и console.dirxml.

console.dir необходим для вывода в лог всех свойств или методов доступных у объекта.


function first() {
 for(i = 0; i < 2; i++) {
  for(j = i-1; j < i+1; j++) {
   var p = i*2-j%2+i*j;
   var m = ({ "item" : p, "item1" : p*100 });
   console.dir(m);
  }
 }
}
first();

Результат выполнения

console.dirxml необходим для отображения xml дерева html элемента.


<table id="test">
    <tr>
        <td>пример 1</td>
        <td>пример 2</td>
    </tr>
</table>
<script type="text/javascript">
    var t = document.getElementById('test');
    console.dirxml(t);
</script>

Рузультат выполнения

Использования FireBug в разных браузерах

FireBug поставляется как плагин к FireFox. Если вы в сценарий внедряете такие функции, то при проверке в IE, Opera (Safari поддерживает такие же методы логирования) у вас возникнет исключение. Ситуацию можно исправить 2-мя способами.

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


if (!("console" in window) || !("firebug" in console))
 {
     var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
     "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

     window.console = {};
     for (var i = 0; i < names.length; ++i)
         window.console[names[i]] = function() {}
 }

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


window.onload = function() {
    if (window.console) { return; };
    firebug=document.createElement('script');
    firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');
    document.body.appendChild(firebug);
    (function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
}

Вот и все магия о которой я хотел вам рассказать.

Эта моя последняя статья в этом году :). Хочу всех поздравить с Новым Годом. И пожелать, чтобы наступающий год принес вам больше счастья и радости, чем позволят ваши самые смелые желания!

Используем отложенную загрузку и анализ JavaScript кода

2009-12-23T23:44:00.000-08:00

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

Например, при поиске информации, я открываю первые 5 результатов, и практически всегда, первые два результатах дают 100% информации, просматриваю конечно те страницы, которые загрузились первыми. Но, как ни странно, это может влиять и на получения прибыли от сайтов. Google констатировал, что после переработки страниц, время загрузки страницы увеличилось на 0.4 секунды для 10 и на 0.9 для 30 поисковых результатов, это привело к уменьшению поискового трафика и доход от рекламы на 20% (Linden, 2006)!

Если разобраться на что уходит время при работе с Javascript на этапе загрузки страницы, то можно выделить 3 этапа:
1. Загрузка файла/кода JavaScript
2. Анализ/разбор JavaScript кода браузером
3. Выполнения JavaScript кода на этапе загрузки страницы

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


<html>
  <head>
    //ваш html разметка секции head
  </head>
  <body>
    //ваш html разметка секции body
    <script type="text/javascript" src="myJavaScript.js">
    </script>
  </body>
</html>

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

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

А почему скрипты должны загружаться и анализироваться в начале загрузки страницы? Сколько процентов кода выполняется на этапе загрузки?!

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

Динамическая загрузка JavaScript кода

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

Динамическое изменение свойства src


<script src='' id="s1" type="text/javascript"></script>
<script type="text/javascript">
var s1 = document.getElementById("s1");
s1.src= "myJavaScript.js";
</script>

Динамическое создание script тега


<script type="text/javascript">
var script = document.createElement('script');
script.src = "myJavaScript.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

Уловка от John Resig
Если совместить динамическую загрузку JavaScript кода с интересной уловкой описанной John Resig в статье Degrading Script Tags, то выполнения скриптов после загрузки страницы можно реализовать следующим образом.


window.onload = function() {
    var script = document.createElement('script');
    script.src = "myJavaScript.js";
    script.text = "my.init()"; // выполняем свои скрипты
    document.getElementsByTagName('head')[0].appendChild(script);
}

Скрипт "my.init()" будет выполнен, когда будет успешно загружен JavaScript код. При этом, если при загрузки возникнет ошибка, скрипт не будет выполнен. Работает в Firefox, Opera, Safari, и всеми "уважаемом" IE.

Отложенный анализ/разбор JavaScript кода браузером

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


<script type="text/javascript">
  function loadFile(url) {
     function callback() {
      if (req.readyState == 4) { // 4 = Loaded
        if (req.status == 200) {
          //можно реализовать анализ скриптов по требованию
          eval(req.responseText);
        } else {
          // ошибка в получении ответа
        }
      }
    };
    var req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send("");
  }
</script>

Для загрузки и анализа скриптов вам понадобится вызвать метод "loadFile" с указанием url ардеса файла. Ключевым моментом в данной реализации есть функция eval, которая и производит анализ/разбор полученного кода.

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

jQuery tips. Часть 1. 11 моментов о которых необходимо знать

2009-12-14T13:34:00.001-08:00

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

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

Определяем тип браузера

Сразу вспомнились мои первые робкие шаги в веб программировании и то, сколько недовольства возникало при одной мысли о том, что html,css и javascript необходимо проверять в разных браузерах, а в случае с IE и в разных версиях :(. Используя jQuery сам процесс определения типа браузера стал очень прост и удобен.


$.browser.safari //Safari browser
$.browser.opera //Opera browser
$.browser.msie //IE browser
$.browser.mozilla //FireFox browser

if ($.browser.mozilla) {
  alert('ОоО. Так держать!');
}

Так же вы можете узнать версию браузера

$.browser.version

Проверка на конфликтность

jQuery в качестве упрощенного обращения использует переменную "$". Но как же быть, если данную переменную использует другой фреймворк? Для того чтобы определить, конфликтует ли использование данной переменной, нужно вызвать функцию


jQuery.noConflict();

Например, если конфликт имеет место, то чтобы задать выбор всех дивов, вместо конструкции $('div'), вам необходимо будет использовать jQuery('div').

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


$jq=jQuery.noConflict();
$jq('div');

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

Создание html элемента

Очень простой функционал, но действительно необходимый :).


var newDiv = $('
'); //Создание div элемента
newDiv.attr("id","myNewDiv").appendTo("body"); //Добавление на страницу

Изменение текста в элементе

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


var el = $('#id');
el.html(el.html().replace(/mytext/ig, ""));

Проверяем существования элемента

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


if ($('#author').length) {  
    //ура. существует
} else {
    // :(. отсутствует
}

Получаем значение элемента

Используя javascript код, для того чтобы получить значение элемента "select" вам понадобится выбрать сам элемент, перебрать дочерние и определить какой же элемент выбран. В jQuery данная задача решается одной строчкой


var value = $('#author').val(); // возвращает значение
$('#author').val(value); // устанавливает значение

Запоминание данных в элементе

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


$("#formComment").data("myData", { name : "my name", description : "my description"}); //Сохранение данных в элемент с идентификатором "formComment"

var myData = $("#formComment").data("myData"); //Получение данных

$("#formComment").removeData("myData"); //удаление данных

Сбор данных

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

Разработчики jQuery добавили в свой арсенал "тяжелой артиллерии" функции по сбору данных с элементов ввода. Используя функции serialize, serializeArray вам не потребуется собирать данные вручную.

HTML


...
<form id="commentform" method="post" >
   <input type="text" name="author"/><br/>
   <input type="text" name="email" value=""/></br>
   <input type="text" name="url" value=""/></br>
   <textarea rows="10" cols="100%" name="comment"/></br>
   <input type="submit" value="Submit Comment" name="submit"/>
</form>
...

Javascript


var str = $("#commentform").serialize(); //Строка. Результат "email=emailData&url=urlData&comment=commentData"

var array = $("#commentform").serializeArray(); //Массив значений. Результат "[{ name:"email", value:"emailData" }, { name:"url", value:"urlData" }, {name:"comment", value:"commentData"}]"

Есть одно маленькое ограничение, данные с элемента <input type="file"/> не собираются!

Работа с обработчиками событий: bind и unbind

Для добавления обработчиков событий можете воспользоваться функциями bind и unbind.


function send_ajax_submit(){
 //ваш код
}

$("form").bind("submit", send_ajax_submit); //Добавляет обработчик send_ajax_submit на событие "submit"

$("form").unbind("submit", send_ajax_submit); //Удаляет обработчик send_ajax_submit с события "submit"

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


function send_ajax_submit(){
   event.preventDefault(); //отменяет действие по умолчанию. Для данного примера отменит отправку данных с формы.

   event.stopPropagation(); //прерывает процесс "всплывания" события

   return false; //прерывает процесс "всплывания" события и отменяет действие по умолчанию, т.е. заменяет event.preventDefault() и event.stopPropagation().
}

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


(function($) {

// Keep a copy of the old methods
$.fn._bind = $.fn.bind;
$.fn._unbind = $.fn.unbind;

// Redefine $().bind()
$.fn.bind = function( type, data, fn ) {
 // If only a map of handlers was passed...
 return (arguments.length === 1) ? 

 this.each(function(key, node) {
  // Iterate over the map...
  $.each(type, function(event, handler) {
   event == "unload" ?
    // ... using $.fn.one() for "unload" events...
    $(this).one(event, handler) :
    // ... and $.event.add() for others
    jQuery.event.add( this, event, handler );
  });
 }) :

 // Otherwise, use the existing implementation as of 1.3.2,
 // with slight syntactic modifications
 this.each(function(key, node) {
  type == "unload" ?
   // Use $.fn.one() for "unload" events...
   $(this).one(type, fn) :
   // ... and $.event.add() for others
   jQuery.event.add( this, type, fn || data, fn && data );
 });
};

// Redefine $().unbind()
$.fn.unbind = function(type, fn) {
 // If only a map of handlers was passed...
 return (arguments.length === 1) 

 this.each(function(){
  // Iterate over the map...
  $.each(type, function(event, handler) {
   // ... and unbind each using event.remove()
   jQuery.event.remove( this, event, handler );
  });
 }) :

 // Otherwise, use the existing implementation as of 1.3.2,
 // copied verbatim
 this.each(function(){
  jQuery.event.remove( this, type, fn );
 });
};

})(jQuery);

А в своем коде используем следующий синтаксис


//Добавляем обработчики событий
$("#myID").bind({
 click : function(e) {
  //обработчик события click
 },
 mouseover : mouseoverHandler,
 mouseout : mouseoutHandler
});

function mouseoverHandler(e) {
 //обработчик события mouseover
}

function mouseoutHandler(e) {
 //обработчик события mouseout
}

//Удаляем обработчики событий
$("#myID").unbind({
 mouseover : mouseoverHandler,
 mouseout : mouseoutHandler
});

Работа с массивами

Стандартные средства javascript по работе с массивами не всегда удовлетворяют потребности, а порой даже по разному себя ведут

Определяем количество элементов


//количество элементов
$('element').size();

Преобразования выборки элементов в массив


var arr = $("div").get();

Перебор элементов массива


var arr = ["Запад", "Север", "Восток", "Юг"];
jQuery.each(arr, function() {
  //работа с элементом массива
  var value = this;
});

Фильтрация элементов массива


var arr = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
arr = jQuery.grep(arr, function(n, i){
    //n - текущий элемент
    //i - номер элемента
    return n > i;
});
//результат [1, 9, 3, 8, 6, 9]

Обработка элементов массива


var arr = [ "a", "b", "c", "d", "e" ]
arr = jQuery.map(arr, function(n, i){
  // n - элемент массива
  // i - индекс элемента в массиве
  return (n.toUpperCase() + i);
});
//результат [ "A0", "B1", "C2", "D3", "E4" ]

Поиск вхождения элемента


var arr = [4, "Pete", 8, "John"];
var index = jQuery.inArray("John", arr); // Если элемент не найден то возвращается значение -1
//результат index = 3

Объединения массивов


$.merge([0,1,"a"],["a",3,4]); 
//результат [0,1,"a","a",3,4]

Является ли объект массивом


$.isArray([]);

Отключаем контекстное меню


$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

Работает в : Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Панель Google Translation для нуждающихся

2009-12-02T03:49:00.000-08:00

В очередной раз, при просмотре статистики Google Analytics понял, что люди которые не понимают русский язык периодически заходят в мой блог, но так же быстро и уходят. Сразу хочется сказать: "Учите русский язык - пригодится!" :).

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

Для использования вам понадобится следующий кусок javascript-а:


<script type="text/javascript">
var ignoreLanguage = ['ru'];
$(document).ready(function(){
if (!hl(ignoreLanguage)){
d=document;b=d.body;o=d.createElement('scri'+'pt');o.setAttribute('src','http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');o.setAttribute('type','text/javascript');b.appendChild(o);v=b.insertBefore(d.createElement('div'),b.firstChild);v.id='google_translate_element';v.style.display='none';p=d.createElement('scri'+'pt');p.text='function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:""},"google_translate_element");}';p.setAttribute('type','text/javascript');b.appendChild(p);
}
});

function hl(ls) {
if (!ls instanceof Array) { return false; }
var cl = get_current_language();
for(i=0;i<ls.length;i++) { if (cl.indexOf(ls[i])==0){ return true; } }
return false;
}

function get_current_language(){
 return window.navigator.language?window.navigator.language:window.navigator.systemLanguage;
}
</script>

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

При использовании данного скрипта вам понадобится jQuery, но вы без труда сможете исключить его из кода. Работает в IE, FireFox, Google Chrome, Opera, Safari.

UPDATE: Исключение секций перевода

Иногда бывает необходимо исключить некоторые секции текста из перевода. Например, текст программного кода или цитату. Для этого мы можем воспользоваться Google Translator Toolkit Data API, часть тескта помещаем в html тег и зададим класс "notranslate".


<div class="notranslate">
//Текст который не будет переведен!
</div>

Flex. Как правильно обработать ошибки SOAP веб-сервисов.

2009-12-01T04:53:00.000-08:00

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

Создание SOAP клиента и работа с SOAP веб-сервисами (SOAP Web Service) во Flex при использовании Flex Builder 3 - сплошное удовольствие, все делается в считанные минуты. В процессе работы с SOAP веб-сервисами в ответе вы можете получить сообщение об ошибке, тело самой ошибки будет помещено в атрибут SOAP Fault.

Для обработки ошибки добавляем слушателя события Fault.


private function onServiceFault(evt:FaultEvent): void {
   Alert.show("При получении данных произошла ошибка: " + evt.fault.faultString);
}

Но, как ни странно, при обработке ошибки во Flex приложении я получал сообщение: "HTTP request error". Оригинальное сообщение, которое было помещено в SOAP Fault в ответе веб-сервиса получить не удалось.

Много времени ушло на выяснения обстоятельств и на поиск откуда "растут ноги". Просмотрев код обработки SOAP клиента, я понял, что в случае когда Http Status ответа приходил 500, тело пакета не анализировалось и вызывалось событие mx.rpc.events.FaultEvent с mx.rpc.Fault ошибкой. Для решения необходим был Http Status 200, а само решение пришлось реализовать на серверной стороне в веб-сервисе.

Серверная часть была написана на Java и построена с использованием JAX-WS Reference Implementation. На мой взгляд, лучшим решением было написать свой handler-chain для веб-сервиса.

sun-jaxws.xml



            name='MyService'
        implementation='MySystem.services.MyService'
        url-pattern='/services/MyService'>
        
            
                
                    MySystem.services.MySOAPHandler

MySOAPHandler.java


import java.util.Set;

import javax.xml.namespace.QName;
import javax.xml.ws.handler.MessageContext;
import javax.xml.ws.handler.MessageContext.Scope;
import javax.xml.ws.handler.soap.SOAPMessageContext;
import javax.xml.ws.handler.soap.SOAPHandler;

public class MySOAPHandler implements SOAPHandler {

 public Set getHeaders() { 
  return null;
 }

 public void close(MessageContext context) {
  context.put(MessageContext.HTTP_RESPONSE_CODE, new Integer(200));
  context.setScope(MessageContext.HTTP_RESPONSE_CODE, Scope.APPLICATION);
 }

 public boolean handleFault(SOAPMessageContext context) {
  return true;
 }

 public boolean handleMessage(SOAPMessageContext context) {
  return true;
 }
}

После этих манипуляций на стороне клиента Flex можно обрабатывать SOAP Fault.


import mx.rpc.soap.SOAPFault;

private function onServiceFault(evt:FaultEvent): void {
   if (evt.fault is SOAPFault){
      var soapData:String = evt.fault.faultDetail;
      var soapError:String = evt.fault.faultString;
   } else {
      Alert.show("При получении данных произошла ошибка: " + evt.fault.faultString);
   }
}

Данный хак хоть и решает проблему, но требует дополнительных усилий. А вот если вы пользуетесь веб-сервисами других компаний, то вы можете столкнутся с "непреодолимым" барьером.

Выполняем HTML или JavaScript код используя адресную строку

2009-11-25T02:38:00.000-08:00

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

Для того что бы отобразить html или обработать javascript код вам необходимо добавить к вашему коду строку "data:text/html," и получившийся результат, выполнить. Рассмотрим это на примере видео из Youtube.

Код видео будет выглядеть следующим образом:


<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/j1Nf8TcdaH0&hl=ru_RU&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/j1Nf8TcdaH0&hl=ru_RU&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

Добавим магические символы "data:text/html," в начало кода.


data:text/html,<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/j1Nf8TcdaH0&hl=ru_RU&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/j1Nf8TcdaH0&hl=ru_RU&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

Вставляем результирующую строку в поле адреса и выполняем переход. В окне браузера отобразится плеер из Youtube. Все элементарно и просто!

Протестировано в Google Chrome, Firefox, Opera, Safari. Данное решение точно не работает в IE!

Компилируем flex-htmlfilter в Windows за 10 минут

2009-11-13T06:14:00.000-08:00

При программировании на Flex обращаешь внимание на разные библиотеки, одним из таких проектов, который привлек мое внимание, стал flex-htmlfilter. Он дает возможность поддержки дополнительный html тегов: ul, ol, table и т.д. Полный список тегов можно найти на сайте проекта.

Посмотрев пример использования стало понятно, что нужно "пощупать" его поплотнее. Правда скомпилировать его из исходников оказалось не очень просто, на что и ушло уйма времени. Дальше о том как это сделать :).

Скачиваем исходники flex-htmlfilter

Используя svn клиент скачиваем исходники с http://flex-htmlfilter.googlecode.com/svn/trunk/.

Установка MinGW

Для компиляции вам понадобится установить MinGW. Инструкцию по установке данного продукта вы можете найти в информации по проекту. Но, что бы не мучиться, советую устанавливать MinGW используя windows installer. Скачиваем MinGW-5.1.6.exe, устанавливаем. В данной реализации отсутствует файл "make", вместо него необходимо использовать "mingw32-make".

При вызове "mingw32-make" у вас может возникнуть ошибка

'mingw32-make' is not recognized as an internal or external command, operable program or batch file.

Для устранение вам необходимо добавить директорию "MinGw\bin" в переменную окружения компьютера "Path" (свойство "My Computer" -> закладка "Advanced" -> "Environment Varibles" -> "System varibles", в переменную "PATH" добавляем путь к MinGW в конец параметра через ";"). У меня данное значение выглядит следующим образом "C:\MinGw\bin".

Установка sed

Для работы вам понадобится установить утилита sed. Очень печально, что про это не упоминается в инструкции. Список инсталляций под Windows можно найти на sourceforge.net. Себе установил версию sed-4.2-1.

При компиляции у вас может возникнуть ошибка

'sed' is not recognized as an internal or external command, operable program or batch file.

Так же как и для MinGW, вам необходимо прописать пути к файлу sed. Добавляем в перемунную окружения "Path" путь к расположению файла sed.exe(c:\Program Files\GnuWin32\bin\).

Пути к компилятору

При выполнении скриптов необходим компилятор mxmlc. Как и в случае с MinGW и sed, добавляем путь к директории в которой находится компилятор в переменную окружения Path. У меня установлен плагин Flex Builder для Eclipse и данный путь выглядит следующим образом "c:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.2.0\bin\". Если вы не добавите данный путь в переменную окружения вы получите ошибку при компиляции:

'mxmlc' is not recognized as an internal or external command, operable program or batch file.

Компилируем swf

Последним шагом в компиляции является запуск скриптов. Для этого необходимо перейти в корень проекта и исполнить команду "mingw32-make". В папке "as" у вас появятся скомпилированные исходники и сам файл проекта index.swf.

Компилируем swc

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

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

Как изменить размер изображений не потеряв в качестве используя CSS

2009-11-10T03:47:00.002-08:00

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

Например, у вас была картинка 300x200, а необходимо получить размер 120x120.

Воспользуйтесь css свойством clip, которое поможет вам правильно изменить размер изображение:

Данное свойство определяет область позиционирования элемента, которая и будет отображаться. А все, что попало за эту область, будет обрезано.

Для реализации вам понадобится задать стиль и разметку для отображения картинки следующим образом.

CSS


.clip {
 position: relative;
 height: 120px;
 width: 120px;
 border: solid 1px #ccc;

}
.clip img {
 position: absolute;
 height:120px;
 clip: rect(0 150px 120px 30px);
 left: -30px;
}

HTML


<div class="clip">
<img src="demo_clip.jpg"/>
</div>

Вот и весь секрет, который поможет вам изменять размер изображения(resize image) без потери качества.

Быстро и удобно. Отслеживаем переходы и скачивания файлов на своем сайте с использованием Google Analytics

2009-11-07T07:30:00.000-08:00

У вас возникла задача отслеживать переходы и скачивания файлов? В этом вам поможет Google Analytics(видео по регистрация акаунта). Если вы уже используете данный продукт на вашем сайте, то вам осталось для выполнения этой задачи всего "полшага".

По сути, Google Analytics предоставляет возможность для выполнения отслеживаний. Чтобы воспользоваться ими вам необходимо добавить javascript-овое событие onclick в ссылку.


<a href="http://mysite.com/files/logo.jpg" onClick="javascript: pageTracker._trackPageview(’/download/logo’);">click me</a>

Прописывать событие "onclick" возле каждой ссылке очень неудобно. Вот об упрощении работы и пойдет дальше речь.

Для упрощения можно воспользоваться проектом jquery-google-analytics. Хорош он тем, что позволяет использовать преимущество jQuery Selectors и сам выполняет работу по инициализации Google Analytics.

Подключения скриптов

Для работы вам понадобится jQuery и jquery-google-analytics. Подключить их можно следующим образом.


<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://github.com/christianhellsten/jquery-google-analytics/raw/master/jquery.google-analytics.js' type='text/javascript'/>

Инициализация

При использовании этого решения вам не придется добавлять скрыпты Google Analytics, данное решение сделает эту работу за вас. Необходимо лишь запустить trackPage с указанием вашего кода отслеживания.


<script type='text/javascript'>
$.trackPage('UA-#######-#', {status_code: 404});
</script>

Замените значение "UA-#######-#" на свой код.

Добавления отслеживания

Про все возможности отслеживания вы можете прочитать на странице проекта. Мне нужно было добавить отслеживание для скачиваемых файлов(категория "download"), и на переходы по внешним ссылкам(категория "ext_link"). В качестве атрибута, который указывает на необходимость такого отслеживания, выбрал "rel".


<script type='text/javascript'>
$(document).ready(function(){
    $('a[rel=download]').track({
        category : 'download'
    });
    $('a[rel=ext_link]').track({
        category : 'ext_link'
    });
});
</script>

Использование

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


<a rel="download" href="http://sscaos.googlecode.com/svn/trunk/nft/sr/actionscript3/n_VS_i_sum.mxml">Исходник теста.</a>
<a rel="ext_link" href="http://www.adobe.com/devnet/flex/articles/server_perf.html" class="tracked">Flex Application Performance: Tips and Techniques for Improving Flex Server Performance</a>

При таком использовании в Google Analytics появится категории "download" и "ext_link", и в каждой из них будут отображаться url страниц для которых вы установили отслеживания.

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