Основы

Drag.Move

var myDrag = new Drag.Move(dragElement, {
	        // параметры класса Drag.Move
		droppables: dropElement,
		container: dragContainer,
		// параметры класса Drag
		handle: dragHandle,
		// событие класса Drag.Move
		onDrop: function(el, dr) {
                        // вызовет предупреждение с атрибутом id сброшенного элемента
                        // в элемент, принимающий сброшенные элементы
                        // (это может показаться запутанным, на первый взглад, но, надеюсь,
                        // далее все проясниться
                        alert(dr.get('id'));
		},
                // События Drag
                // передаются перетаскиваемому элементу
                onComplete: function(el) {
			alert(el.get('id'));
		}
	});

Параметры Drag.Move

• droppables – опеределяет элементы, которые будут способны «принять» сброшенный элемент
• container – установить контейнер перетаскиваемого элемента (будет удерживать элемент внутри этого элемента-контейнера)

//определяем один элемент по id, который можно будет перетаскивать
var dragElement = $('drag_element');
//определяем массив элементов по их классу, которые смогут принят сброшенный элемент
var dropElements = $$('.drag_element');
//определяем контейнер
var dragContainer = $('drag_container');
//определяем объект Drag.Move
var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag.Move
                // назначаем элементу droppables массив элементов, определённых немного выше
		droppables: dropElements ,
               // назначаем элементу container элемент, определенный немного выше
		container: dragContainer
	});

События объекта Drag.Move

• onDrop – запускается при сбросе элемента в соответствующий принимающий элемент;
• onLeave – запускается когда перетаскиваемый элемент покидает границы элемента, способного принимать перетаскиваемые элементы;
• onEnter – запускается при входе перетаскиваемого элемента в зону принимающего элемента.

var dragContainer = $('drag_container');
 
var myDrag = new Drag.Move(dragElement , {
	// Параметры Drag.Move
	droppables: dropElements ,
	container: dragContainer ,
	// События Drag.Move
	// функции Drag.Move передадут перетаскиваемый элемент (в данном случае 'el')
	// принимающему элементу, с которым перетаскиваемый взаимодействует (у нас 'dr')
	onDrop: function(el, dr) {
		// на русском: "если элемента, на который происходит сброс НЕ ЯВЛЯЕТСЯ принимающий"
		if (!dr) {
			//ничего не делать
		}
		// в противном случае, т.е. элемент принимающий
		// делать то-то, то-то
		else {
			// действия, который произойдут,
			// когда элемента будет сброшен на принимающий элемент
		};
	},
	onLeave: function(el, dr) {
		// эта функция будет запущена, когда перетаскиваемый элемент
		// покинет границы принимающего элемента
	},
	onEnter: function(el, dr) {
		// эта функция будет запущена, когда перетаскиваемый элемент
		// входит в границы принимающего элемента
	}
});

Несколько событий объекта Drag

Параметр – snap

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		snap: 10
	});

Параметр – handle

// определяет массив элементов по классу
// это позволит нам добавить несколько "ручек",
// если нам нужно будет определять несколько передвигаемых элементов
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
	        // параметры Drag
		handle: dragHandle
	});

Событие onStart

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onStart: function(el) {
                    // сюда вставляем всё, что должно произойти вначале перетаскивания
               }
	});

Событие – onDrag

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onDrag: function(el) {
                    // сюда вставляем всё, что должно происходить во время перетаскивания
               }
	});

Событие onComplete

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onComplete: function(el) {
                    // сюда вставляем всё, что должно произойти при сбросе элемента
               }
	});

Примеры

window.addEvent('domready', function() {
	var dragElement = $('drag_me');
	var dragContainer = $('drag_cont');
	var dragHandle = $('drag_me_handle');
	var dropElement = $$('.draggable');
	var startEl = $('start');
	var completeEl = $('complete');
	var dragIndicatorEl = $('drag_ind');
	var enterDrop = $('enter');
	var leaveDrop = $('leave');
	var dropDrop = $('drop_in_droppable'); 
 
	var myDrag = new Drag.Move(dragElement, {
	    // Параметры Drag.Move
		droppables: dropElement,
		container: dragContainer,
		// Параметры Drag
		handle: dragHandle,
		// События Drag.Move
		onDrop: function(el, dr) {
			if (!dr) { }
 
        	        else {
				dropDrop.highlight('#FB911C'); //мигает оранжевым
				el.highlight('#fff'); //мигает белым
				dr.highlight('#667C4A'); //мигает зеленым
			};
		},
		onLeave: function(el, dr) {
			leaveDrop.highlight('#FB911C'); //мигает оранжевым
		},
		onEnter: function(el, dr) {
			enterDrop.highlight('#FB911C'); //мигает оранжевым
		},
		// Drag Events
		onStart: function(el) {
			startEl.highlight('#FB911C'); //мигает оранжевым
		},
		onDrag: function(el) {
			dragIndicatorEl.highlight('#FB911C'); //мигает оранжевым
		},
		onComplete: function(el) {
			completeEl.highlight('#FB911C'); //мигает оранжевым
		}
	});
});

body {
	margin: 0;
	padding: 0;
}
 
/* убедитесь в том, что перетаскиваемый элемент умеет "position: absolute"
 а параметры top и left установлены на значения для первоначального положения элемента*/
#drag_me {
	width: 100px;
	height: 100px;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
}
 
#drop_here {
	width: 200px;
	height: 200px;
	background-color: #eee;
}
 
/* убедитесь в том, что элемент-контейнер имеет "position:relative" */
#drag_cont {
	background-color: #ccc;
	height: 600px;
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}
 
#drag_me_handle {
	width: 100%;
	height: auto;
	background-color: #666;
	cursor:move;
}
 
#drag_me_handle span {
	display: block;
	padding: 5px;
}
 
.indicator {
	width: 100%;
	height: auto;
	background-color: #0066FF;
	border-bottom: 1px solid #eee;
}
 
.indicator span {
	padding: 10px;
	font-size:14px;
	display: block;
}
 
.draggable {
	width: 200px;
	height: 200px;
	background-color: blue;
}

<div id="drag_cont">
<div id="start" class="indicator"><span>Начало</span></div>
<div id="drag_ind" class="indicator"><span>Перетаскивание</span></div>
<div id="complete" class="indicator"><span>Завершен</span></div>
<div id="enter" class="indicator"><span>Вход в принимающий элемент</span></div>
<div id="leave" class="indicator"><span>Выход из принимающего элемента</span></div>
<div id="drop_in_droppable" class="indicator"><span>Сброшен в принимающий элемент</span></div>
<div id="drag_me">
<div id="drag_me_handle"><span>ручка</span></div>
</div>
<div id="drop_here" class="draggable"></div>
</div>

Хочу поделиться опытом! Я давно хотел научиться делать интерактивные закладки, чтобы размещать их на панели закладок браузера, но, к сожалению, пока этого так и не сделал…

Зато, я подсмотрел, как это делается у всяких сервисов, как, например, у сервиса автоматического постинга в различные сервисы закладок – bposter.net, и теперь, как минимум, могу просто их изменять и приспосабливать под собственные нужды. Но, обо всем по порядку…

Вначале, напомню, кто такая эта панель, да еще и закладок. В Win Safari она выглядит так:

Для тех, кто пока не рассмотрел и не особо понял, что это, пожалуйста:

Увеличенная панель закладок

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

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

- открыть сервис;
– возможно, yahoo.com попросит авторизоваться;
- набрать адрес сайта, инфу о котором требуется узнать;
- нажать на кнопку «Inlinks», чтобы перейти на отображение не кол-ва страниц в кэше Яху, а на, собственно, информацию об обратных ссылках;
- выбрать опцию «Except from this domain» (Кроме этого домена), чтобы исключить ссылки с этого домена;
– возможно, выбрать опцию «Entire Site», чтобы посмотреть ссылки, приходящие на страницы всего сайта, а не только на одну страницу.

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

Бэклинки по SiteExplorer

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

А вот и сам код ссылки:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(document.domain)+'&bwm=i&bwmo=d&bwmf=s');})();

Что в коде? Первым словом в атрибуте href идет слово javascript, которое сообщает браузеру, что ссылка – это JavaScript код. Далее – функция, которая открывает новое окно, вставляя имя домена (document.domain) текущего документа «куда надо». (По сути, такая ссылка действует также, как и ссылка вида javascript:history.back().) Если вместо window.domain использовать метод location.href, в открывшейся вкладке (окне), будут показаны обратные ссылки только на открытую страницу.

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

• Посмотреть, есть ли страница в индексе Яндекса:

Индекс Яндекса

Исходник:

javascript:(function(){window.open('http://www.yandex.ru/yandsearch?serverurl='+encodeURIComponent(location.href));})();

• Количество страниц с домена в индексе Google:

# страниц в гугле

Исходник:

javascript:(function(){window.open('http://www.google.ru/search?q=site:'+encodeURIComponent(document.domain));})();

• Есть ли страница в индексе Google:

Есть в кэше гугла?

Исходник:

javascript:(function(){window.open('http://www.google.ru/search?q=cache:'+encodeURIComponent(location.href));})();

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

• Постинг в закладки через сервис bposter.net:

В закладки!!!

Исходник:

javascript:(function(){window.open('http://www.bposter.net/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&desc='+encodeURIComponent(window.getSelection?window.getSelection():''));})();

Тут следует отметить, что я этот код совсем не придумывал, а просто заменил метод location.href на window.open, чтобы открывалась новая закладка (или окно, в зависимости от настроек браузера).

• Обратные ссылки по SiteExplorer.search.yahoo.com на весь сайт:

Обратные ссылки на сайт

Исходник:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(document.domain)+'&bwm=i&bwmo=d&bwmf=s');})();

• Обратные ссылки по SiteExplorer.search.yahoo.com на данную страницу:

Обратные ссылки на страницу

Исходник:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(location.href)+'&bwm=i&bwmo=d&bwmf=u');})();

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

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

Всем удачи в своих открытиях!

Обратившись к интернету, мгновенной помощи, на которую я так рассчитывал утром перед выходом на работу, так и не нашлось. Но решение пришло внезапно, ниоткуда и случайно. Перед тем как импортировать конфигурации подключений, я вместо того, чтобы импортировать файл через соответствующее окно программы, а просто попытался запустить через Finder (Explorer, если по-уиндоуски), но файл просто открылся в дримуивере в виде обычного XML файла. Я решил еще раз открыть, посмотреть, что там есть. Оказалось, что там есть 2 локальных пути на папки, где дримуивер хранил временные файлы на старой системе, т.е. сейчас таких путей нет и в помине, т.к. я изменил и количество, и название партитиций диска.

Решение оказалось простым: я удалил атрибуты localroot и еще какой-то (дома посмотрю и добавлю название) и файлы стали нормально открываться.

Потому, если после каких-то перемен с железом вы видите, что Dreamweaver отказывается открывать файлы, а в Журнале появляется такая запись «ПУТЬ К УДАЛЕННОМУ ФАЙЛУ – отменено пользователем

Обработка файлов завершена.» на Windows XP, русская версия Adobe Dreamweaver CS3, (то, что писал мне Dreamweaver на маке напишу позднее) вероятнее всего проблема именно в том, что приложение не знает, куда нужно писать файл.

Надеюсь это кому-нибудь еще, кроме меня поможет.

Удачи!

P.S.: позже выложу и скрины всего произошедшего.

Некоторые из пунктов очень очевидны, думаю, только ленивый СЕО-работник не использует их, а некоторые раскрыты только потому, что они уже и так слишком раскрыты. Я имею ввиду, ну вот зачем раскрывать всем, что с домена nytimes.com (а точнее с одного из его поддоменов), либо с форума на поддомене sourceforge.net можно получить ссылку без nofollow? А только потому, что там этих ссылок уже и так уйма, и добавлять еще и себя туда, среди виагры, порнухи, таблеток и фармы абсолютно не нужно – такая ссылка, мне кажется, только навредит. Сами посудите: вот одна страница, вот другая. Эти страницы о PECL, а то, что там вылазят ссылки на всякие нечистоты – уже не хорошо, и даже если там вдруг появится ссылка на сайт/страницу/статью про PECL – сомневаюсь, что она даст ее владельцу серьезный вес, т.к. вся страница уже с черной пометкой «spam page» где-то там, в недрах гугловской БД и Гугл либо не учитывает эти ссылки при ранжировании, либо просто выбросил ее из свой выдачи.

Что касается ссылок с остальных доменов – мне думается, они рано или поздно все равно утратят свою значимость при ранжировании, но пока, естественно, можно их и попользовать. Например, можно, добавить ссылку на сайт в профиль при регистрации на форуме sourceforge (вообще, это нужно делать всегда, при регистрации на любом форуме), можно/нужно добавить ссылку на что-то продвигаемое в подпись, но и нужно потом использовать этот профиль, нужно быть активным форумчанином, чтобы эти ссылки имели хоть какую-то значимость. Еще раз, в качестве примера, возьмем уже упомянутый форум на поддомене sourceforge.net – http://ettercap.sourceforge.net/forum/. Я не поленился и посмотрел на список форумчан. Судя по их количеству – определенно очень популярный форум. 28419 пользователей. А между тем, кто-нибудь слышал про такую программульку, как Ettercap? Если кто не в курсе, вышла версия 0.7.3!!! Оказалось, что 27093 пользователя не написало ни одного сообщения (хотя, самые отпетые спамеры умудрились зарегистрироваться еще в 2001 году – они не оставили ни одного сообщения, но у них есть интересные сайты про фарм). Вопрос в том, стоит ли тратить время, на то, чтобы зарегистрироваться на форуме только ради того, чтобы получить одну ссылку, которая, скорее всего, уже никогда не проиндексируется из-за большого количества спаммынх ссылок? Длинный вопрос получился…

Ради чего я всего это написал? Просто хотел поделиться мыслью о том, что реально полезной информации на тему СЕО мало. Публикуется, в основном то, что опытные СЕО-специалисты уже испробовали и им это результата не дало, либо метод исчерпал себя. Они публикуют метод на своем блоге, получают кучу благодарностей в комментариях, трафика и доход с рекламы на блоге. Конечно же, отнюдь не все методы, публикующиеся на СЕО блогах – фальшивки. Например, я подписан на RSS блога Михаила Шакина – shakin.ru (Михаил мне, вообще, кажется, талантливым писателем, т.к. он не только про Интернет интересно пишет, но и просто про жизнь), и блога известного Рунет деятеля Димка (моего тезки, только меня просто Дима зовут ), который недавно получил от WebmastersWorld мою любимую игрушку – МакБук Pro.

Итого: верить всему, что написано в СЕО статьях и блогах, мне кажется, не нужно. Главное в этой сфере – умение анализировать факты! Почитал, проанализировал. При необходимости, проверил, протестировал. Слепо верить и следовать всему, что пишут в Интернете – не всегда верно и не всегда полезно. Так что моим ответом на вопрос в заголовке будет таким: Нужно думать самому..

Сегодня продолжим исследовать раздел спец. эффектов нашей любимой библиотеки. Вначале, мы научимся тому, как использовать библиотеку Fx.Morph (которая, по сути, позволяет изменять несколько свойств объектов), после чего посмотрим на несколько примеров использования общих параметров спец. эффектов, применимых как к Fx.Tween и Fx.Morph. Ну а в конце, рассмотрим такие события раздела Fx как «onComplete» и «onStart«. Все эти параметры и события позволят нам получить больше контроля над анимированными переходами.

Fx.Morph

Создание нового эффекта Fx.Morph

Запуск нового превращения (morph с англ. – превращение) происходит примерно также, как и запуск нового эффекта tween, с той разницей, что указывать изменения нужно в нескольких свойствах.

//вначале, назначим нашему элементу переменную
var morphElement = $('morph_element');
 
//теперь создаем объект превращения
var morphObject = new Fx.Morph(morphElement);
 
//далее задаем параметры свойств, также как в случае с Fx.Tween
//только сейчас можно будет устанавливать несколько свойств
morphObject.set({
    'width': 100,
    'height': 100,
    'background-color': '#eeeeee'
});
 
//еще можно начать превращение также, как и в случае с tween
//с помощью функции start, но назначить изменения в нескольких свойствах
morphObject.start({
    'width': 300,
    'height': 300,
    'background-color': '#d3715c'
});

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

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

var morphSet = function(){
	//далее задаем параметры свойств стилей, также как в случае с Fx.Tween
	//только сейчас можно будет устанавливать несколько свойств стилей
	this.set({
		'width': 100,
		'height': 100,
		'background-color': '#eeeeee'
	});
}
 
var morphStart = function(){
//еще можно начать превращение также, как и в случае с tween
//с помощью функции start, но назначить изменения в нескольких свойствах
	this.start({
		'width': 300,
		'height': 300,
		'background-color': '#d3715c'
	});
}
 
 
var morphReset = function(){
	//устанавливаем первоначальные значения
	this.set({
		'width': 0,
		'height': 0,
		'background-color': '#ffffff'
	});
}
 
window.addEvent('domready', function() {
	var morphElement = $('morph_element');
	var morphObject = new Fx.Morph(morphElement);
 
	//тут добавляем прослушку соответствующим кнопкам
	//и соединяем переменную morphObject с функцией
	//что позволяет нам использовать "this"
	$('morph_set').addEvent('click', morphSet.bind(morphObject));  
	$('morph_start').addEvent('click', morphStart.bind(morphObject));
	$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});

<div id="morph_element"></div>
<button id="morph_set">Установить</button>
<button id="morph_start">Запустить</button>
<button id="morph_reset">Сбросить</button>

Установить
Запустить
Сбросить

Fx Options

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

//объявляем объекты morph и tween
//а все параметры вставляем в фигурные скобки
var morphObject = new Fx.Morph(morphElement, {
    //вначале объявляем название параметра
    //потом двоеточие - :
    //и значение параметра
    duration: 'long',
    transition: 'sine:in'
});

fps (frames per second) – кадры в секунду

Данный параметр определяет скорость анимации. По умолчанию скорость анимации установлена на 50 кадров в секунду и этот параметр может принимать данные в виде чисел и переменные, содержащие числа.

//определяем объект, а параметры в фигурные скобки { }
var morphObject = new Fx.Morph(morphElement, {
    fps: 60
});
 
//или
var framesPerSecond = 60;
 
var tweenObject = new Fx.Tween(tweenElement, {
    fps: framesPerSecond
});

unit

Параметр unit определяет единицу измерения. Например, нужно, чтобы число 100 означало px – пиксели, % – проценты или что-лобо еще.

//все как и выше
var morphObject = new Fx.Morph(morphElement, {
    unit: '%'
});

link

Параметр link позволяет управлять несколькими вызовами эффекта. Например, если имеется объект с эффектом mouseover, вы же не хотите начинать его каждый раз, как пользователь наводит на него указатель? Или, если пользователь наводит мышь на объект дважды, нужно ли игнорировать следующий вызов эффекта или его нужно поставить в очередь и запустить сразу по окончании первого вызова? У параметра link есть 3 возможных значения:

• ‘ignore’ (по умолчанию) – это значение игнорирует все вызовы пока предыдущее выполнение эффекта не выполнено.
• ‘calcel’ – отменяет текущее выполнение эффекта и запускает его с начала.
• ‘chain’ – позволяет чередовать вызовы эффектов и выполнять каждый из них по очереди.

//и снова назначаем объект в переменную
var morphObject = new Fx.Morph(morphElement, {
    link: 'chain'
});

duration – длительность

Параметр duration определяет длительности анимации. Этот параметр не является идентичным параметру speed (скорость), но пока всей разницы лично я пока не понял. Может кто объяснит? Этот параметр принимает числа (милисекунды), переменную, содержащую числа, или же одно из ключевых слов, обозначающих длительность в милисекундах:

• ’short’ = 250
• ‘normal’ = 500 (по умолчанию)
• ‘long’ = 1000

//определяем объект и вставляем его параметры в фигурные скобки
var morphObject = new Fx.Morph(morphElement, {
    duration: 'long'
});
 
//или
var morphObject = new Fx.Morph(morphElement, {
    duration: 1000
});

transition – переход

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

var tweenObject = new Fx.Tween(tweenElement, {
    transition: 'quad:in'
});

Примечание: Первая полоса перехода оснащена зарядом красного highlight, переходящий в оранжевый highlight (мы о нем говорили в прошлом уроке). А вот и она, «транзитница», собственно:

Всего существует 30 видов переходов, которые состоят из 10 основных типов, имеющих каждый по 3 параметра.

Основные типы:

• Quad
• Cubic
• Quart
• Quint
• Expo
• Circ
• Shine
• Back
• Bounce
• Elastic

Параметры:

• Ease In
• Ease Out
• Ease In Out

Эти три параметра отвечают за следующее: при использовании параметра In спец.эффект перехода будет использоваться только при увеличении некоторых свойств объекта, тогда как параметр Out отвечает за спец.эффект перехода при уменьшении свойствf (знаю, что звучит немного непонятно, но обратите внимание на то, как себя ведут объекты с переходом одного типа с параметрами in и out нашей «транзитницы» при наведении курсора и при его заборе с объекта). InOut, соответственно, определяет использование спец. эффекта перехода, в обоих случаях, т.е. как при увеличении определенных свойств, так и при их уменьшении.

Fx Events – события

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

• onStart – срабатывает при начале эффекта
• onCancel – срабатывает при отмене эффекта
• onComplete – срабатывает при завершении эффекта
• onChainComplete – срабатывает при завершении поочередных эффектов.

При создании эффекта tween или morph, события определяются по тому же принципу, что и параметры эффекта, только в качестве значения событию передается функция:

//определяем новый объект переменной
//и объявляем его новым объектом класса Fx.Tween
quadIn = new Fx.Tween(quadIn, {
        //тут выставляем опции
	link: 'cancel',
	transition: ‘quad:in’,
 
       //несколько событий
	onStart: function(passes_tween_element){
                //эти события применяются к нашему объекту
                //потому эффект "highlight" применяется к
                //началу анимации
	        passes_tween_element.highlight('#C54641');
	},
 
        //обратите внимание на разделители между функциями, в виде запятых,
        //тогда как, после последнего параметра или события
        //запятые не ставятся
        onComplete: function(passes_tween_element){
                //а тут мы применяем эффекст highlight к завершению анимации 
	        passes_tween_element.highlight('#C54641');
	}
});

Пример

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

//эту функцию будем запускать по событию mouseenter
var enterFunction = function() {
	this.start('width', '700px');
}
 
//эту функцию будем запускать по событию mouseleave
var leaveFunction = function() {
	this.start('width', '300px');
}
 
window.addEvent('domready', function() {
    //определим переменными некоторые элементы на странице
    var quadIn = $('quadin');
    var quadOut = $('quadout');
    var quadInOut = $('quadinout');
 
    //потом создаем по одному элементу tween каждой переменной, объявленной выше
    quadIn = new Fx.Tween(quadIn, {
	link: 'cancel',
	transition: Fx.Transitions.Quad.easeIn,
	onStart: function(passes_tween_element){
		passes_tween_element.highlight('#C54641');
	},
	onComplete: function(passes_tween_element){
		passes_tween_element.highlight('#E67F0E');
	}	
    });
 
   quadOut = new Fx.Tween(quadOut, {
	link: 'cancel',
	transition: 'quad:out'
    });
 
    quadInOut = new Fx.Tween(quadInOut, {
	link: 'cancel',
	transition: 'quad:in:out'
    });
 
    //теперь добавим каждому элементу по прослушке на события
    //обратите внимание на использование функции .addEvents
    //которая работает также, как и .addEvent
    //только можно добавлять несколько событий, используя определённый шаблон
    $('quadin').addEvents({
        //вначале нужно объявить событие, поместив его в единичные кавычки,
        //отделить их двоеточием (":")
        //и объявить функцию, которая будет выполняться при этом событии.
        //в данном случае, это функция, которая связана с эффектом tween
        //разделения событий производится с помощью запятой;
        //после последнего события запятая НЕ ИСПОЛЬЗУЕТСЯ
        'mouseenter': enterFunction.bind(quadIn),
        'mouseleave': leaveFunction.bind(quadIn)
    });
 
    $('quadout').addEvents({
        //обратите внимание, как мы снова используем те же функции в этом коде
        'mouseenter': enterFunction.bind(quadOut),
        'mouseleave': leaveFunction.bind(quadOut)
    });
 
    $('quadinout').addEvents({
        //тут мы также используем те же функции
        //просто они каждый раз вызываются для работы с событием над разными элементами
        //и привязаны они к разным объектам tween
        'mouseenter': enterFunction.bind(quadInOut),
        'mouseleave': leaveFunction.bind(quadInOut)
    });

Итак, сегодня мы рассмотрим возможности создания спец. эффектов в Mootools из библиотеки эффектов Fx.Tween. Функции этого дополнения, как и многие другие функции библиотеки, очень просты в применении, но при этом дают разработчикам очень большую свободу действий, позволяя улучшить эстетичность веб-приложений и конечно же «юзабилити» (очень модное слово сегодня в интернете; в переводе с англицкого: usability – «удобство (ис)пользования«).

Быстрые спец.эффекты

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

.tween();

Английское слово tween означает мягкий переход из одного свойства в другое. В нашем случае можно сказать, что переход осуществляется от одного значения свойства, к другому. Например можно сделать так, чтобы блок div мягко и красиво растянулся с ‘width:100px’ до ‘width:300px’. А фреймворк Mootools позаботился о том, чтобы создание таких эффектов не занимало более секунды!

//создаем функцию
var tweenerFunction  = function() {
        //выбираем элемент, над которым будем издеваться
        //и добавляем к нему .tween
        //а в качестве атрибутов добавляем свойство, которое будет изменяться
        //и значение на которое это свойство нужно мягко изменить
	$('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)
        //к кнопке, которая должна вызвать эффект
        $('tween_button').addEvent('click', tweenerFunction);
});

Ну а HTML код для этой функции выглядит так:

<button id="tween_button">растянуть до 300 px</button>

.fade();

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

//создаем функцию
var tweenFadeFifty = function() {
       //выбираем объект
       //добавляем к нему .fade
       //и задаем значение между 0 и 1, к которому нужно привести прозрачность элемента
       //(0 - невидимка, 1 - полный видимка)
	$('tweener').fade('.5');
}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)
        //к кнопке, которая должна вызвать эффект
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});

Вот и HTML код:

<button id="tween_fade_fifty">Снижаем видимость до 50%</button>

.highlight();

Снова не могу обойтись без слова «замечательная»! .highlight() – это замечательная функция! Она очень узконаправленная, при этом также очень полезна. Она имеет две функции:

1. Использование для мягкого перехода к иному цвету фона (можно посмотреть пример немногой ниже).
2. Мгновенно изменяет цвет фона, потом мягко переходит к другому цвету.

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

А пока предлагаю рассмотреть пример использования функции. Создадим два блока div, и применим к ним оба типа функции .highlight().

//создаем функцию
var tweenHighlight = function(event) {
        //тут мы будем использовать конструкцию, которую пока еще не использовали - event.target
        //которая будет передаваться как параметр функции
        //на человеческом языке это звучит как "цель события"
        //а так как эффект применим к тому же элементу, к которому прикреплена прослушка на событие
        //не нужно будет снова создавать селектор.
        //обратите внимание, что addEvent автоматически передаст объект события в качестве параметра
        //в функцию, которую вызывает... оч полезно ;)
	event.target.highlight('#eaea16');
}
 
//создаем вторую функцию
//тут нужно передать сразу параметр
//так как функция будет вызываться при определенном событии
//и ей в параметры автоматически припишут событие (как в функции выше)
//а элемент можно вызывать с помощью конструкции .target
//(цель события)
var tweenHighlightChange = function(item) {
        //тут, вместо одного значения цвета, через запятую добавляем второй цвет
        //что установит первый цвет, и целевой цвет перехода
        item.target.highlight('#eaea16', '#333333');
}
 
window.addEvent('domready', function() {
	$('tweener').addEvent('mouseover', tweenHighlight);
    $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

Вкусные примеры

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

var tweenerFunction  = function() {
	$('tweener').tween('width', '300px');
}
 
var tweenerGoBack  = function() {
	$('tweener').tween('width', '100px');
}
 
//функция .fade еще принимает ключевые слова 'out' и 'in',
//что эквивалентно 0 и 1 соответственно
var tweenFadeOut = function() {
	$('tweener').fade('out');
}
 
var tweenFadeFifty = function() {
	$('tweener').fade('.5');
}
 
var tweenFadeIn = function() {
	$('tweener').fade('in');
}
 
var tweenHighlight = function(event) {
	event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {
	$('tween_button').addEvent('click', tweenerFunction);
	$('tween_reset').addEvent('click', tweenerGoBack);
	$('tween_fade_out').addEvent('click', tweenFadeOut);
	$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
	$('tween_fade_in').addEvent('click', tweenFadeIn);
	$('tweener').addEvent('mouseover',tweenHighlight);
});

При наведении курсора, кстати, работает первый тип функции .highlight().

А этот одинокий квадратик иллюстрирует работу второго типа функции .highlight().

И это еще не всё…

Создание нового эффекта

Если потребовалось больше гибкости в управлении эффектами, или еще какие-то дополнительные возможности, а такое бывает, скажу я вам, нужно будет всего навсего создать новый эффект, вместо использования уже имеющихся эффектов в Mootools. Ниже пример создания нового эффекта. Обратите внимание на ключевое слово new, которое используется для создания нового объекта Fx.Tween:

window.addEvent('domready', function() {
        //вначале назначаем объект, над которым собираемся издеваться своим новым эффектом,
//и назначаем этот объект новой переменной
        var newTweenElement = $('newTween');
 
       //теперь создаем новый эффект, которому передаем переменную с объектом в качестве параметра
       var newTween = new Fx.Tween(newTweenElement);
});

<div id="newTween"><!-- это элемент, к которому применим новый Tween эффект--></div>
<!-- а это кнопка, которая очень скоро сыграет свою главную роль -->
<button id="netTween_set">Назначить</button>

Установка стилей

При создании нового объекта Tween из элемента, можно начинать назначать свойства стилей с помощью функции .set();. Эта функция работает моментально и прицип ее работы практически ничем не отличается от .setStyle();, рассмотренной нами в 7-м уроке:

var newTweenSet = function() {
        //обратите внимание на использование ключевого слова "this"
        //немного далее рассмотрю более подробно использование этого слова
	this.set('width', '300px');
}

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

.bind()

С помощью функции .bind(); можно сделать любой параметр равным ключевому слову «this» в спектре работы определенной функции:

//вначале добавляем событие клика к кнопке, которую видели немного выше
//потом, помимо простого вызова функции
//мы добавляем к ней ".bind()"
//и помещаем в скобки все, что мы хотим передать этой функции
//и теперь, внутри функции "newTweenSet," ключевое слово "this"
//будет относиться к переменной "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

Таким образом, если взглянем на функцию выше, «this» теперь ровняется тому, что мы говорим «newTween» (который, по совместительству, и является нашим объектом классса tween)

А теперь, соединим все это в единое целое:

//вот наша функция
var newTweenSet = function() {
        //так как мы использовали bind, "this" теперь относится к "newTween"
        //т.е. на самом деле мы говорим
        //newTween.set('width', '300px')
	this.set('width', '300px');
}
 
window.addEvent('domready', function() {
    //вначале назначаем нашему элементу переменную
	var newTweenElement = $('newTween');
 
    //потом создаем новый эффект FX.Tween и назначаем его своей собственной переменной
    var newTween = new Fx.Tween(newTweenElement);
 
    //а сейчас добавляем наше событие, в котором связываем newTween и newTweenSet с помощью bind
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));
});

Запуск эффекта tween

А теперь, когда мы полностью настроили наш объект, наша функция находится вне события domready и мы помним, как с помощью функции .set(); назначить параметр стиля, потому, давайте пройдем к, собственно, спец.эффектам. Запустить эффект – очень просто! Аналогично .fade(); использовать .start(); можно двумя методами.

1. Провести преобразование от одного значения свойства стиля до другого
2. Назначить значение свойства стиля, потом перейти у другому

//эта строчка изменит текущее значение свойства width на 300px
newTween.start('width', '300px');
 
//эта строчка установит свойство width на 100px, потом сделает плавный переход на 300px
newTween.start('width', '100px', '300px');

Теперь можно начать (с помощью функции .start();) выполнение эффекта из функции и спользовать «this», если была использована функция .bind(); для связи с «newTween».

По эффектам tween пока все…

Несмотря на то что о эффектах tween еще можно долго говорить. Например, если нужно наложить спец. эффекты на несколько свойств стилей одновременно, можно использовать функцию .morph();. Можно использовать библиотеку эффектов и переходов для изменения тех самых переводов. Но этот урок и так получается довольно длинным, потому оставим это все на другие уроки.

Всем удачи и успехов!

Решил немного отвлечься от темы уроков Mootools опубликовать перевод статьи на тему продвижения сайтов, которая меня сильно впечатлила. Наткнулся на статью в блоге huomah.com, и она так и называется «Искусство оптимизации под персонализированный поиск», только на английском (»The Art of Personalized Search Optimization»). Несмотря на то, что статье уже более 2х лет, лично я вижу в ней не мало актуальности, особенно в связи с тем, что флагман мирового поиска, Google, переходит на полностью персонализированный поиск, (за ним, наверняка, пойдут и остальные более или менее крупные поисковики), думаю, многим как специалистам, так и не особо специалистам, было бы интересно узнать, что думают другие специалисты о перспективах продвижения своих проектов в реалиях персонализированного поиска.

Введение

Краткое содержание новости с официального блога Google, опубликованной 4 декабря 2009:

[…]Например, из-за того, что я часто ищу разные рецепты на epicurious.com, Google может выдать этот сайт выше остальных в следующий раз, когда я будут искать рецепты.[…]
[…]Раньше, мы персонализировали результаты поиска только залогиненных пользователей и только в тех случаях, когда они включали опцию истории поиска (Web History) в настройках своих учетных записей. Сегодня мы расширяем персонализированные результаты таким образом, что можем их предоставлять также и незалогиненным и незарегистрированным пользователям. […]

Специалисты Google также упомянули, каким образом они будут это делать, а именно с помощью cookie-файла, который будет храниться на компьютере пользователя в течение 180 суток.

Искусство в теории

Стань, персонализация к кому-нибудь задом, а ко мне – передом

В этой статье я расскажу, что такое Персонализированный Поиск и почему вебмастеры и специалисты SEO должны потратить немного времени на более подробное изучение вопроса «что может сделать SEO специалист, чтобы улучшить Оптимизацию Персонализированного Поиска?»

Метрика пользовательской активности теперь пересонализирована

Что такое метрика пользовательской активности (МПА)? Попросту говоря, МПА – это некий набор данных, который анализируется поисковыми системами для улучшения поиска. В этот набор может входить такая информация, как прошлые поисковые запросы, активность на сайте, пользовательские данные, информация о документе и т.д. Поисковая система пытается «познакомиться» со своим пользователем, узнать его предпочтения путем активного и пассивного сбора данных о том, что он делает в Интернете.

Не только то, какой выбор делает или какие действия производит пользователь c предоставленным ему результатом поиска (или с рекламой, которая показывается вместе с этим результатом), но и то, что он НЕ выбирает или то, с чем он производит минимальные действия, (показатель отказов) могут влиять на дальнейшие результаты поиска. Такие данные могут быть использованы для создания возможного прототипа будущей поисковой выдачи. В конечном итоге, при ранжировании результатов поиска будут использоваться как активные методы сбора данных, как взаимодействие с пользователем (в стиле популярного сайта Digg.com), так и пассивные (Google Desktop, Google тулбар, IP клиента, файлы cookie, учетная запись Google и т.д.).

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

Как использовать Персонализированный Поиск в своих инетересах

На данном этапе нужно понять то, что действия не только одного, но множества пользователей (включая типы пользовательских групп) могут повлиять на то, в каком месте поисковой выдачи окажется сайт в конечном итоге. Потому, в этом новом мире нельзя сходу использовать ту же машину, которая использовать в мире SEO. Хотя, стоит отметить, что обычные для нас явления, такие как PR, не будут игнорироваться при новом ранжировании. Также нужно понять, что принципы Персонализированного Поиска (ПП) – это лишь очередные методы ранжирования, созданные, чтобы дополнить уже существующие. Это еще одна преграда, которую нужно преодолеть и которую необходимо учитывать. На что нам нужно будет еще обратить внимание, так это на то, какие области поисковой оптимизации и создания сайтов нужно улучшить, чтобы обойти те трудности, которые представляет собой работа над оптимизацией сайта для персонализированного поиска.

Области применения

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

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

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

Целевые ключевые слова / Стратегии словосочетаний: в продолжение темы о релевантности, руководствоваться основными терминами тематики сайта будет также важно, как и понимание принципов поиска. Много усилий может быть направлено на возможные уточнения поискового запроса в определенной подгруппе типов пользователей. Поиск логических продолжений релевантных слов и словосочетаний также принёс бы немало пользы. Более того, «персонализированное ранжирование» заставит нас измерять успех оптимизации текущим трафиком и конверсиями, что проливает новый свет на значение «таргетинг» (Прим переводчика: уже сейчас мало кого интересуют исключительно позиции в выдаче. Трафик – вот основной критерий успеха в интернете. В целом, автор статьи как в воду глядел…).

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

Конверсия результатов поиска: те вебмастеры, которые умеют составлять конкурентоспособные названия (title) своих страниц и сниппеты, скорее всего, получат наивысшие показатели конверсии результатов поиска. Сайт, который на определенной странице результатов пользовательского поиска пользуется большей популярностью, чем его конкуренты, получит, соответственно, больший вес в будущем ранжировании. Работа над мета-тегами страницы (title, meta-description) и над сниппетами приобретает большую, чем ранее значимость в борьбе за посетителей. Осмелюсь предположить, что анализ статистики и разнообразные тесты и эксперименты станут большим подспорьем в определении факторов, которые влияют не только на ранжирование, но и на посещаемость.

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

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

Удобство использования (Юзабилити): как с точки зрения поискового робота, так и с точки зрения конечного пользователя, логическая структура сайта, которая понятна любому, также имеет высокий ранг важности. Действия, которые пользователь производит, находясь на определенном сайте, формируют «тему», которая становится тематической точкой отсчета. Если похожие типы пользователей произвели похожие действия на этом сайте (сохранение сайта в закладках, печать страницы, навигация, подписка на RSS и т.д.), это придаст больший вес ранжирования целевым страницам внутри сообщества данного типа пользователей. Это, в свою очередь, расширяет релевантность профиля сайта.

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

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

Если кто не заметил, я перешел от вручную написанного моим знакомым программистом движка на более популярный вордпрес. Это не означает, что ЦМСка моего знакомого не хороша – наоборот, она хороша тем, что она заточена под определенные действия, а именно под продвижение. Но, так как эту систему управления написал не я, я в ней совсем не разбираюсь, а дергать человека постоянно не хочу, решил перейти на вордпрес. Благо, по этой тематике в интернете много всего понаписано, да и просто покопаться в коде вордпреса тоже полезно для развития. Итак, все старые посты перекинуты, теперь все по-прежнему. Продолжаю публиковать уроки Mootools. Вот он следующий урок, о фильтрации текста.

Функции обработки строк

В этом уроке поговорим о том, какие возможности нам предоставляет библиотека Mootools при работе с данными в виде строк. Сразу нужно отметить, что то, что будет показано в этом уроке – это лишь ничтожная часть того, что Mootools может предоставить для работы со строками. В качестве небольшой иллюстрации можно привести функцию сamelCase(), которая переделывает текст такого-типа в текст ТакогоТипа (или любую другую функцию обработки текста, основанную на регулярных выражениях). Итак, в этом уроке мы пробежимся по основам работы с текстовыми строками, а потом углубимся дальше.

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

var my_text_variable = "Сюда вставляем текстовую строку";
//  результат            переменная с исходником.наименование функции
var result_of_function = my_text_variable.someStringFunction();

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

var result_of_function = "Сюда вставляем текст".someStringFunction();

Обратите внимание, что так же можно вызвать и функцию для обработки числа:

//Обратите внимание на использование скобок
//тогда как при работе со строками используются кавычки
var limited_number = (256).limit(1, 100);

Также, хочет отметить вот что: Ява скрипты не должны вычищать пользовательский текст перед посылкой его на сервер для дальнейшей обработки. Все, что пишится на JavaScript может быть видно ВСЕМ посетителям страницы, эти скрипты можно включать/выключать, потому настоятельно рекоммендую не использовать JavaScript для обеспечения безопасности. Надеюсь не забуду провести небольшой дискурс по поводу безопасности с помощью PHP, когда мы дойдем до класса Mootools Request. И еще раз – все скрипты обеспечивающие безопасность должны выполняться на сервере, подальше от пользователя, а не с помощью JavaScript и всего к нему относящемуся!!!

trim()

Функция trim() позволяет, как и в языке PHP, быстро и эффективно избавить строку от лишних пробелов и пустого пространсва по обеим сторонам.

//Текст, который мы "тримируем"
var text_to_trim =  "    \nСтрока с ненужным пустым местом     ";
//  переменная trimmed_text стала такой: "Строка с ненужным пустым местом"
var trimmed_text = text_to_trim.trim();

Если вы еще не сталкивались с таким символом, как «\n», сообщаю, что этот символ соответствует новой строке (от англ. «Newline«). Этот символ можно использовать в тексте, который нужно разбить на строки. Такой символ, или разрыв строк, фунцией trim() считается как пустое пространство, потому от него функция тоже избавляется. Жаль только, что trim() не избавляет от пустого пространства внутри текста:

var trimDemo = function(){
	//дадим тексту переменную
	var text_to_trim =  '            \nочень       много       белого\n              ';
 
	//тримируем
	var trimmed_text = text_to_trim.trim();
 
	//Смотрим результат
	alert('До тримирования: \n' + 
		  '|-' + text_to_trim + '-|\n\n' +
		  'После тримирования : \n' +  
	      '|-' + trimmed_text + '-|');
}

Тримирование

clean()

Понятно, заваливать весь текст пробелами – нехорошо. Потому, разработчики Mootools пошли навстречу тем, кто так считает. Функция clean() очистит не только пробелы и «пробело-образные» символы до и после текста, но и внутри него:

//Текст для очистки
var text_to_clean =  "    \nТекст     \nс      большим \n \n    количеством     \nпробелов  \n   ";
//  очищенный текст будет таким "Текст с большим количеством пробелов"
var cleaned_text  = text_to_trim.clean();

Как показывает пример, функция clean() – это тотже trim(), только с возможностью чистки пробелов внутри текста. Таким образом, эта функция почистит весь текст от пробелов в количестве более 2-х поряд, и от всех табов (\t) и разрывов строк (\n). Давайте сравним результаты работы этих двух функций:

var cleanDemo = function(){
	//Прикрепляем исходник к переменной
	var text_to_clean =  '            слишком \n       много\n       пробелов              ';
 
	//Чистим
	var cleaned_text = text_to_clean.clean();
 
	//Выводим результат в окно alert()
	alert('До чистки : \n' + 
		  '|-' + text_to_clean + '-|\n\n' +
		  'После чистки : \n' +  
	      '|-' + cleaned_text + '-|');
}

Чистка

contains()

Как и 2 предыдущие рассмотренные функции, функция Mootools clean() делает одну очень простую вещь, без особенностей и заморочек: она проверяет, содержиться ли в исходном тексте заданная строка. В качестве результата работы возвращается True если вхождения есть и False – если нет.

//Строка с исходным текстом
var string_to_match = "В этом тексте ведем поиск?";
 
//Ищем слово "тексте", did_string_match возвращает true
var did_string_match = string_to_match.contains('тексте');
 
//Ищем слово "ужас", функция возвращает False
did_string_match = string_to_match.contains('ужас');

Эта функция может пригодится во многих приложениях на Вашем сайте/блоге/сайте, особенно в комплексе с другими Mootools функциями. Например, если использовать функцию clean() с функцией each() для приминения пользовательской функции к каждому элементу массива (см. урок 3), можно сделать довольно многое, засоряя лишь несколько строк. Например, если мы создадим некий массив слов, запрещенных к использованию в комментариях, можно просмотреть весь текст на предмет использования этих слов. При этом, используется не такая уж и большая фукнция:

	string_to_match = "сюда вставляем любой текст, в котором нужно проводить поиски";
	word_array = ['слова', 'которые', 'нужно', 'найти'];
	//Передаем каждое слово в качестве переменного аргумента функции
	word_array.each(function(word_to_match){
		//Поиск текущего слова
		if (string_to_match.contains(word_to_match)){
			alert('было найдено слово' + word_to_match + '! НЕХОРОШО!');
		};
	});

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

var containsDemo = function (textAreaID){
	//Создаем список запрещенных слов
	var banned_words = ['BMW', 'Audi', 'Fererro Roche', 'хрень', 'херня', 'мудак'];	
 
	//берем содержимое тега textarea
	var textarea_input = $(textAreaID).get('value');
 
	//эта переменная будет отвечать за количество НЕ найденых совпадений
    //чтобы можно было отблагодарить пользователей
    //за чистоту речи, если вдруг такое случиться
	var i = 0;
 
   	//используя функцию each() пробегаем по каждому слову этого текста
	banned_words.each(function(banned_word){
		//ищем запрещенные слова указанные в списке
		if (textarea_input.contains(banned_word)){
 
			//Сообщаем пользователю, что такие плохие слова использовать очень плохо!
			alert('Слово ' + banned_word + ' тут использовать нельзя!');
		}
		//Если совпадение по очередному слову не найдено
        //перемнная i увеличивается на 1
		else ++i;
	});
    //Если i ровняется количеству запрещенных слов, значит пользователь их не использовал
    //Благодарим пользователя за чистоту речи
	if (i==banned_words.length) alert ("Спасибо, что не используете ненависные нам слова! :) ");
}

Как-то раз ехал на своем BMW на фабрику Fererro Roche и тут меня подрезает какой-то мудак на своем Audi. Я ему вдогонку кричу «Ты что за хрень вытворяешь, мудак!!! Что за херня!»
Проверка на запрещенные слова

Как-то раз ехал на своем автомобиле на фабрику одной известной компании по производству всяких разных сладостей и тут меня подрезает какой-то нехороший человек на своем автомобиле. Я ему вдогонку кричу «Ты что за нехорошую вещь вытворяешь, нехороший человек!!! Ну как же так?! Что за люди то неприличные!?!»
Проверка на запрещенные слова

substitute()

Функция substitute() – это очень мощный инструмент несмотря на свою кажущююся простоту. Сегодня мы затронем лишь ее основы, но отметим, что основная мощь ее исходит из возможности использовать ее с регулярными выражениями, которые мы рассмотрим в последующих уроках. Однако, только лишь основные возможности этой функции уже позволяет немного поиздеваться над исходным текстом.

//Это текст, который функция будет использовать
//в качестве шаблона. Обращаю внимание, что слова, которые 
//нужно заменить, помещаются в фигурные скобки
var text_for_substitute = "Майонез - это {один},  Кетчуп - это {два}, Горчица - это {три}.";
 
//Далее содаем объекс, в котором содержаться правила замены
//Слова справа, не помещенные в кавычки - это слова
//которые будут заменены словами слева, помещенными
//в кавычки
var substitution_object = {
	один: 'лучшая заправка для салата', 
	два: 'соус, который хорошо подходит к мясу, особенно к шашлыку', 
	три: 'такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит'
    };
 
//вызываем функцию substitute() с объектом, 
//в котором находятся шаблоны замены   
var new_string = text_for_substitute.substitute(substitution_object); 
 
//теперь наш текст выглядит вот так:
//"Майонез - это лучшая заправка для салата,
//Кетчуп - это соус, который хорошо подходит к мясу, особенно к шашлыку,
//Горчица - это такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит."

Вообще не всегда обязательно нужно создавать объект с шаблонами, т.к. можно обойтись и таким кодом:

//Создаем текст с отметками для замены
var text_for_substitute = "{это_нужно_заменить} и оригинальный текст";
//А шаблон для замены в виде объекта можно передать функции substitute()
//в виде параметра
var result_text = text_for_substitute.substitute({это_нужно_заменить: 'Значение замены'});
//результатом функции будет "Значение замены и оригинальный текст"

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

var substituteDemo = function(){
	//Берем оригинальный тест из соответствующего элемента DOM
	var original_text = $('substitute_span').get('html');
 
	//Определяем, чем будем заменять:
	//а заменять мы будем текстом введеным в текстовое поле
	var new_text = original_text.substitute({
		первый  : $('first_value').get('value'),
		второй : $('second_value').get('value'),
		третий  : $('third_value').get('value'),
	});
 
	//Заменяем первоначальный текст на новый
	$('substitute_span').set('html', new_text);
 
 
	//Отключаем кнопку замены и включаем кнопку сброса
	$('simple_substitute').set('disabled', true);
	$('simple_sub_reset').set('disabled', false);
}
 
var substituteReset = function(){
	//Создаем переменную для первоначального текста
	var original_text = "|- {first} -- {second} -- {third} -|";
 
	//Заменяем текст в соответствующем элементе на первоначальный 
	$('substitute_span').set('html', original_text);
 
	//Выключаем кнопку сброса и включаем кнопку замены
	$('simple_sub_reset').set('disabled', true);
	$('simple_substitute').set('disabled', false);
}

|- {первый} — {второй} — {третий} -|

Первая замена:

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

("{раз} блаблабла {два} и пусть бе-бе-бе").substitute({раз : 'текст на замену'});

, в конечном итоге получится вот что

Привет, люди!

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

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

Числа

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

rgbToHex()

С точки зрения структуры, функция rgbToHex() принадлежит коллекции функции для работы с массивами. Но, т.к. эта функция для работы с числовыми массивами, мы будем рассматривать ее именно в этом уроке. С точки зрения предназначения и использования, функция rbgtoHex() вполне проста:

function changeColor(red_value, green_value, blue_value){
  	var color = [red_value, green_value, blue_value].rgbToHex();
   	alert('Конвертируется в : ' + color);
   }
     changeColor('5', '41', '18')

changeColor(’54′, ‘41′, ‘18′);

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

changeColor(’54′, ‘41′, ‘опля’);

«Nan» виднеющийся в конце сообщения имеет значение Not a Number (Не Число). Если именно вы вводите вручную массив цифр для значения цвета, такой ошибки может вы и не увидите. Но если используется какой-либо внешний источник, очень вероятно, что придется частенько почитывать такие ошибочки.

toInt()

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

var toIntDemo = function(make_me_a_number){
var number = make_me_a_number.toInt();
 
alert ('Что получилось : ' + number);
}

toIntDemo(’613.234′)
toIntDemo(’83_ура!’)
toIntDemo(’а_нет_ли_тут_26?’)

Ну вот! Как видно, toInt() несправляется с каждой неоднозначной ситуацией, но, благодяра другой классной вещи в Mootools, которая называется $type(), мы можем спокойно разобраться и с этой проблемкой!

$type()

$type() – это еще одна вкусняшка нашей любимой библиотеки. Она анализирует переданную ей перменную и возвращает текстовую строку с названием типа данных, которому придлажала переменная. Что-то я тут запутал… Лучше разюерем на примере:

var checkType = function(variable_to_check){
	var variable_type = $type(variable_to_check);
	alert("Данные являются типом : " + variable_type);
}

checkType(43)checkType(’a string’)checkType(false)

На самом деле, функция $type() не ограничивается определением этих трех типов данных. $type() возвращает следующие значения в текстовой форме:

• ‘element’ – Если переданный объект является элементом DOMa
• ‘textnode’ – текстовый элемент DOMa.
• ‘whitespace’ – пустое пространство DOMa.
• ‘arguments’ – аргумент.
• ‘array’ – массив.
• ‘object’ – объект.
• ’string’ – текстовая строка.
• ‘number’ – число.
• ‘date’ – дата.
• ‘boolean’ – булев тип.
• ‘function’ – функция.
• ‘regexp’ – регулярной выражение.
• ‘class’ – класс (созданный с помощью new Class или является расширением другого класса).
• ‘collection’ – когда переданный объект – это набор из html-элементов, как при вызове childNodes, getElementsByTagName, и т.д.
• ‘window’ – окно.
• ‘document’ – документ.
• false – (булев тип – единственный в своем роде при использовании $type()) Возвращается тогда, когда объект имеет тип undefined, null, NaN или ни один ииз вышеперечисленных.

var toIntDemo = function(make_me_a_number){
	//попробуем сделать число из введенного текста
	var number = make_me_a_number.toInt();
 
	//Если это не срабатывает, устанавливаем число ноль (0)
	if ($type(number) != 'number'){number = 0;}
	alert('Что получилось : ' + number);
}

toIntDemo_2(’613.234?)
toIntDemo_2(’83_Ё_моЁ!’)
toIntDemo_2(’а_что_если_83?)

Если соединить все это воедино, получиться почти идеальная версия нашего скрипта по конвертированию цветов из формата RGB в шестнадцатиричный код – changeColor():

var changeColor_2 = function(red_value, green_value, blue_value){
	//Убедимся в том, что у нас все данные - числа
 
    red_value = red_value.toInt();
    green_value = green_value.toInt();
    blue_value = blue_value.toInt();
    //Устанавливаем значения по умолчанию на всё, что не является числом
 
    if ($type(red_value)   != 'number'){red_value = 0;}
    if ($type(green_value) != 'number'){green_value = 0;} 
    if ($type(blue_value)  != 'number'){blue_value = 0;}
    //Вычисляем шестнадцатиричное значение
 
    var color = [red_value, green_value, blue_value].rgbToHex();
    alert('Конвертируется в : ' + color);
}

changeColor(’208′, ‘127′, ‘74′);
changeColor(’82′, ‘7′, ‘скунс’);
changeColor(’522′, ‘847′, »);

Обратите внимание, что последняя кнопка передает числа куда более высокие, чем могут приминать цвета в формате RGB (0-255), а это, нужно сказать, делает шестнадцатиричное число не особо пригодным для обозначения цветов. К сожалению, это означает, что если мы получим число большее или меньшее диапазона 0-255, мы не получим шестнадцатиричного значения цвета. К счастью, Mootools поможет нам забыть и об этой проблеме.

limit()

Функция limit() не выдиляется сложностью, т.к. этим словом ее охарактеризовать нельзя. Она помогает удержать числа в заданном диапазоне:

//вызываем функцию
limit(n1, n2)
//где n1 наименьшее число требуемого диапазона
// а n2 - наивысшее

Ничего сложного! Елинственное «но», это то, что нужно иметь ввиду, что функция предполагает, что n1 и n2 – это числа. Поэтому крайне рекомендуется применять toInt() к данным, которые предположительно являются числами и которые предствоит передавать в функцию limit() (или любую другую функцию для работы с числами).

var limitDemo = function(number_to_limit){
	//Получаем число
 
	number_to_limit = number_to_limit.toInt();
 
	//получаем число из требуемого диапазона
	var limited_number = number_to_limit.limit(0, 255);
	alert("Ограничиваем до : " + limited_number);
}

limitDemo(6535634);

А вот и полный рецепт

var changeColor = function(red_value, green_value, blue_value){
	//Убеждаемся, что все данные у нас - это числа
 
	red_value   = red_value.toInt();
	green_value = green_value.toInt();
	blue_value  = blue_value.toInt();
 
	//Устанавливаем значения по умолчанию на все, что не является числом
	if ($type(red_value)   != 'number'){red_value = 0;}
	if ($type(green_value) != 'number'){green_value = 0;}
	if ($type(blue_value)  != 'number'){blue_value = 0;}
 
	//Ограничиваем все до диапазона значений RGB (0 - 255)
 
	red_value   = red_value.limit(0, 255);
	green_value = green_value.limit(0, 255);
 
	blue_value  = blue_value.limit(0, 255);
 
	//Конвертируем в шестнадцатиричную систему
	var color = [red_value, green_value, blue_value].rgbToHex(); 
	alert('Converts to : ' + color); 
}

changeColor(’28′, ‘17′, ‘47′);changeColor(’28′, ‘17′, ‘oops’);changeColor(’428′, ‘317′, ‘265000′);

Обратите внимание, что функция .rgbToHex() нигде не принимает никаких атрибутов. Это все потому, что эта функция может принять 2 атрибута булев типа: true, false. По умолчанию установлен false, что и возвращает нам строку в таком виде, в котором она нам нужна для вставки в атрибут цвета, т.е. «#000000″. Если же передать атрибут true, функция вернет данные в виде массива.

Только что взял задание с таким описанием (оно довольно стандартно для заданий по составлению вариантов текста, поэтому и используем его как общее)

«Заказ на размножение от системы. Для каждого предложения [в квадратных скобках] нужно

составить через знак | минимум по 6 рерайтов с изменением структуры предложения.

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

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

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

(максимум по 1000).Не забывайте предварительно дробить длинные предложения на несколько!

Предложения более 15 слов не нужны.»

Теперь попробую перевести это с языка разработчиков системы на язык более приближенный к русскому:

Используя спец. знаки «[|].» (квадратные скобки и вертикальный разделитель) для разделение предложений составляем варианты отдельных предложений, при этом разбивая длинные предложения (> 15 слов) на короткие (< 15 слов).

Итак, задание есть, мы его взяли, теперь у нас есть 4 (четыре) часа на его выполнение. Заходим в панель исполнителя, находим ссылку «Мои задания» и переходим к списку с текущими заданиями. Кликаем по нужному и заходим уже, собственно, в один из самых главных инструментов xap.ru – генератор рерайтов. Тут у нас есть 4 закладки: «Задание», «Работа над заданием», «Сгенерированные тексты» и «Отправить на модерацию».

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

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

Я обычно делаю минимально требуемое количество вариантов предложения, т.е. 6 в данном случае. Заключаем все 6 вариантов в спец символы, вот так:

[Вариант1|
  Вариант2|
  Вариант3|
  Вариант4|
  Вариант5|
  Вариант6]

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

Из учета всех комментариев и отклоненных заданий, которые у меня были в системе xap.ru, могу сказать, что все 6 вариантов должны как можно сильнее отличаться друг от друга, т.к. модераторам тамошним не угодить очень сильно придираются ко всему. Лучше всего использовать разные словоформы, чтобы уже в вариантах можно было использовать совсем разные синонимы – это важный пункт для хорошего рейтинга.

Небольшое отступление: недавно выполнил рерайт, написал текст, проверил, отправил. В ответ оценка 7 с комментарием «Опечатки». Я еще раз проверил, еще раз сбросил в Ворд, попросил жену проверить… мы, безграмотные, опечаток не нашли (у меня они могут быть, я знаю, потому и проверял как можно тщательнее), отправил сообщение на форум сервиса, с просьбой к модератору, указать мне опечатки. Оказалось, что если смотреть на уже выполненное и отмодерированное задание, то там опечаток не будет, так как там откорректированное модером задание, а не тот текст, что мы отсылаем!!! Так что будьте внимательны с гневом, если что

Обратно к теме. При составлении рерайтов, в задании чаще всего требуются минимум 6 вариантов, по 85 каждый. Это означает, что из каждого варианта система предлагает составить 85 вариантов посредством синонимов слов, которые заключаем в спец. символы «{|}» (в фигурных скобках указывать близкие по смыслу слова/словосочетания/варианты построения предложения, разделяя их вертикальным разделителем). Т.е. это должно выглядеть примерно так:

[Слово1 {слово2|синоним1|синоним2|синоним2} слово3 слово4|
  Слово1 слово2 слово3 {слово4|синоним1|синоним2|синоним3}|
  Слово1 {слово2|синоним1|синоним2|синоним3|синоним4} слово3 слово4|
  {Слово1|синоним1|синоним2|синоним3|синоним4} слово2 слово3 слово4|
  Слово1 слово2 {слово3||синоним1|синоним2|синоним3|синоним4} слово4|
  Слово1 {слово2|синоним1|синоним2|синоним3|синоним4} слово3 слово4]

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

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

В закладке «Сгенерированные варианты» можно посмотреть сгенерированные уникальные варианты текстов, которые были сделаны в соответствии со схемой [вариант1|вариант2|...]. Генерировать варианты обязательно, т.к. при генерации система подсчитывает количество сделанных уникальных вариантов и сравнивает с заданием. Если вариантов меньше, чем указано в задании, его даже не получится отправить на модерацию в следующей закладке.

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

UPD: Через неделю вспомнил еще один небольшой, но важный момент – перед тем, как продлить задание или сохранить его в черновик, ОБЯЗАТЕЛЬНО скопируйте весь текст в буфер обмена (Ctrl+C). Например, если вносить текст в поле генератора из сторонней программы, например из Ворда, то текст просто слетает!

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

А теперь, главное но: для регистрации, понадобится инвайт-код xap.ru. Инвайт-коды были введены после того, как система прошла первоначальное тестирование, потому теперь не каждый может зарегистрироваться на сайте, а регистрация по инвайт-кодам позволяет контролировать количество и качество участников.

Если Вы хотите зарегистрироваться на xap.ru напишите мне на e-mail, указанный в контактах, указав тему «xap». Я вышлю код и проинструктирую Вас в дальнейших действиях.

Почему лучше получить инвайт у меня лично, а не по ссылке, на многочисленных сайтах?

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

Почему я это делаю?

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

Ну вот и все! Удачи!