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

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

Что мне в нем нравится:

1. Есть плагин под jQuery
2. Простая настройка
3. Много настроек
4. Работает во всех браузерах (проверял IE, FF, Opera, Safari, Chrome)
5. Код генерирует в виде html тегов а не стилей CSS, типа <span style=»font-weight: bold;»>жирный</span>
6. Удобно создавать пользовательские кнопки
7. Можно русифицировать

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

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

1. Активный таб
2. При наведении
3. Таб в пассивном состоянии

Процесс создания табов

1. Создание спрайта. Спрайт создал в фотошопе. GIMP что-то для меня остается пока загадкой (Да и разбираться нет желания).

2. Создается CSS файл. Здесь тоже сложного ничего нет, единственные хлопоты – вычислить координаты каждого шаблона. Пример CSS файла возьмите в тестовых примерах – http://flowplayer.org/css/tabs.css

3. html код. Выглядит он так:

<!-- the tabs -->
<ul class="tabs" id="my_tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a class="w4" href="#">Длинный заголовок в табе</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes" id="my_panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>

Обратите внимание. Если текст в заголовке большой, то применяйте соответствующий класс (w1,w2,w3,w4 и т.д.)

4.  Оживляем табы:

$("#my_tabs").tabs("#my_panes > div");

Посмотреть как вживую работает мой пример можно на моем портале о рыбалке – http://rybalka.tv, который на днях кстати вышел на 1к в сутки по данным GA.

• Обзор сервиса smotri.com
• replica cartier

Колорпикеры я бы разделил на два типа

1. Палитра
2. Каталог цветов

Каталог цветов я бы разделил еще на два типа

1. Предустановленные цвета. Яркий представитель – плагин iColorPicker. В нем предустановлены наиболее популярные web-цвета. Сам плагин очень компактный (6 кб) и простой в установке.
2. Пользовательские цвета. Если нужно дать пользователю выбрать из нескольких цветов, можно попробовать плагин Crayonbox jQuery Plugin.

Среди палитровых можно выделить два плагина

1. Farbtastic: jQuery color picker plug-in. Очень достойный плагин. Мне он нравится прежде всего тем, что он стильный, легковесный (js-файл 8кб + стили и картинки) и очень просто встраивается. Есть и недостаток, этот плагин статичен, т.е. он не может аккуратно «выпасть» и так же плавно исчезнуть. Можно конечно написать и самому эти фичи, но желательно иметь по умолчанию.
2. Color Picker. безусловный лидер. Отличный универсальный плагин, который можно использовать для тонкой настройки цвета. Именно его я использую в своих разработках.

Спонсоры выпуска:
Грузовой и легковой Автомобиль, доска объявлений покупка/продажа.
Ищите ресторан для свадьбы? На этом сайте найдете не один.
Дорогущие золотые швейцарские часы breguet пусть покупают миллионеры. В кризис можно обойтись и копией =)

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

Предлагаю свое решение данной проблемы

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

Делается автоскроллинг с помощью очень простого jQuery скрипта. Просто вставьте его в любое место html кода (желательно в <head> или сразу после <body>), и задайте насколько пикселов прокрутить вниз.

<script type="text/javascript">

	$(document).ready(function(){
		window.scrollTo(0,300);
	});

</script>

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

В живую работу скрипта можно посмотреть на моем сайте о рыбалке

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

<?
	// Автоскроллинг
	if( !is_type('home') ){
		echo '<script type="text/javascript">$(document).ready(function() { window.scrollTo(0,300); });</script>';
	}

?>

Рецепт приготовления очень простой:

1. В поле Indicator type выбираем внешний вид индикатора. Довольно большой выбор. Я бы даже сказал на любой вкус.
2. Либо ставим фоновый цвет (Background color), либо выбираем прозрачность (Transparent background).
3. Устанавливаем цвет (Foreground color).

Все, сервис генерирует анимированный gif файл для вашего ajax приложения.

Нагенерировать гифчиков можно тут:

http://www.ajaxload.info/

Работаю сейчас над личными блогами пользователей rybalka.tv. Встроил визуальный редактор (другими словами WYSIWYG). До этого никогда не работал с WYSIWYG, и попросил помощи на форуме MaxSite CMS, там мне Юрий Белотицкий посоветовал использовать встроенный в админку MaxSite CMS jWYSIWYG который является плагином для jQuery.

Посмотрел так же что из себя представляют конкуренты jWYSIWYG (блин ну и название). Флагманы в этой нише TinyMCE и FCKeditor. Если первый просто громоздкий и долго грузится, то второй просто монстр, по функционалу напоминающий Microsoft Word.

Я думаю пользователям моей соц. сети не нужны какие-то излишества в виде вставки таблицы или печать напрямую из редактора, и они вполне обойдутся минимальным набором функций форматирования (жирный, курсив, подчеркивание, лево, право, центр, сцыль и вставить картинку). К тому же размер плагина jquery.wysiwyg.js всего 21 КБ (и это не запакованная версия). Выбор был очевиден. Сам редактор поставился и настроился очень легко.

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

Dialog

Сперва далеко не стал ходить, а пошел напрямую на офсайт jQuery UI за виджетом Dialog. Провозившись с ним все утро, понял что он какой-то недоработанный. Конкретно: он не может нормально работать в IE 6, а т.к. у меня 30% юзеров сидят на нем, просто так я не мог это оставить. Ну и размер виджета тоже не сахар – 100 КБ в сжатом виде.

Вот так выглядит jQuery UI Dialog в файрфоксе, опере и сафари

А вот так в IE6

В поисках аналогов наткнулся на простенький плагин для jQuery jqModal. Этот поставился и заработал сразу, но создает диалоги не такие эффектные, и стиль диалога нужно создавать самому. Возможно и говно у меня вышло (см. последний скрин), но можно и доработать, главное что корректно работает во всех браузерах, да и размер плагина 3,5 Кб.

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

Но все это в прошлом. Оказывается jQuery UI (дополнительные библиотеки пользовательского интерфеса) содержат в себе виджет Datepicker, а jQuery UI это кроссбраузерность, локализация, надежность jQuery и возможность темизации (пользовательской стилизации) виджетов.

Приступим к созданию собственного диалога выбора даты

1. Скачиваем библиотеку jQuery (http://jquery.com/)
2. Переходим на страницу загрузок jQuery UI. Здесь можно скачать комплект для разработчиков (в него включены все виджеты, контролы из jQuery UI), но я советую выбрать «Build your Download» и собрать только тот функционал, который используется на сайте.
   

   Получаем нужный нам функционал в виде архива.

   

3. Полученные файлы складываем в отдельную папку, причем в только что скачанном архиве jQuery UI находим в папке ui файл ui.datepicker-ru.js (это файл локализации, он нужен для отображения дней и месяцев на русском языке). Нам понадобятся только файл локализации и сама библиотека.
   

4. Открываем index.html, и между тегами <head> и </head> вставляем следующий код.

   <!-- Подключаем jQuery -->
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   
   <!-- Подключаем jQuery UI (у нас там только datepicker) -->
   <script type="text/javascript" src="jquery-ui-personalized-1.5.3.packed.js"></script>
   
   <!-- Подключаем русификацию datepicker`a -->
   <script type="text/javascript" src="ui.datepicker-ru.js"></script>

5. Теперь, когда почти все готово можно протестировать работает ли все что мы подключили. Вставляем м-ду тегами <body> и </body> код:

   <script type="text/javascript">
   /*<![CDATA[*/
   
   	var $d = jQuery.noConflict();
   
   	$d(document).ready(function() {
   
   		// Указываем дейтпикеру что выводить все нужно на русском
   		$d.datepicker.setDefaults($d.datepicker.regional['ru']);
   
   		$d('#datepicker_edit').datepicker();
   
   	});	
   
   /* ]]> */
   </script>
   
   <input type="text" id="datepicker_edit" />

   Смотрим ч-з браузер что вышло:

   

   А вышла вот такая размазня. Почему? Потому что я с самого начала не упомянул о том что нужно «стилизировать» календарь. Нет, самому лезть в CSS коды не придется, потому что уже создано достаточно много шкурок для календаря, но если есть желание самому создать уникальный дизайн календаря, посмотрите страницу темизации.

6. Стилизация календаря. Я знаю два самых простых способа:
   1. Скачать готовый стиль, например отсюда: http://marcgrabanski.com/article/jquery-ui-datepicker-themes. Или поискать в гугле по запросу «jQuery UI Datepicker theme».
   2. Собрать собственный стиль используя сервис ThemeRoller.
7. Мне вот приглянулась готовая тема «smoothness», я ее скачал и кинул в папку с общими скриптами, после чего подключил css файл в index.html. Вот так теперь выглядит календарь выбора даты:
   Уже лучше, правда?
   

Если вам нужны какие-то дополнительные настройки календаря, то можно почитать о них здесь http://docs.jquery.com/UI/Datepicker.

Пример использования календаря можно посмотреть у меня на сайте:

http://www.samborsky.com/sources/datepicker-jquery-ui/
http://www.samborsky.com/sources/datepicker-jquery-ui-2/

Скачать исходники примеров
Note: There is a file embedded within this post, please visit this post to download the file.

В этот раз определяется тулбарная тематика для списка сайтов в ПС Яндекс. Как бонус определяется ТИЦ домена. Напоминаю что скрипт бесплатный, и для его корректной работы у вас должен быть установлен PHP5.

Тем кто привык к Яндекс.XML, регистрация у них для этого скрипта не требуется, т.к. данные берутся из тулбара яши, и вроде бы он не банит за кучу запросов, по крайней мере пока никаких ограничений не было замечено. Определяется все молниеносно.

Где можно применить?

1. Часто всплывают на форумах топики типа «Домены с ТИЦ бесплатно». Проверяете список, во первых узнаете реальный ТИЦ, во вторых узнаете тематику, и если она определена, такой сайт легче в дальнейшем прокачать.
2. Анализ списка своих сайтов.
3. Анализ конкурентов.

Замечание

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

Качаем отсюда

Как выглядит скрипт «в живую» можно посмотреть тут — http://www.samborsky.com/sources/thematic/

Ограничение только одно: проверять не более 10 ссылок за раз.

Все пожелания и замечания пишите мне на мыло или в комментариях к этой записи.

1. PHP версии 5 и выше
2. Включенный Javascript в браузере

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

В этот раз я научился работать с функцией загрузки страницы $.ajax и плавно разворачивать блоки.

Помоему получился вполне удачный эксперимент, надеюсь скриптом будут пользоваться. Для тех, кто интересуется откуда я беру данные, отвечу:

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

Посмотреть как скрипт выглядит и работает вживую можно тут – http://www.samborsky.com/sources/prcy/

Но я поставил у себя лимит на проверку в 10 урл за раз. В исходниках лимитов нет. Качайте и пользуйтесь.

Скачать исходники можно отсюда:

Note: There is a file embedded within this post, please visit this post to download the file.

Эта версия полностью в кодировке UTF-8, как-то мне влом было создавать точную копию для windows-1251, но сделать это пятиминутное дело. Просто файлы откройте в Notepad++ и выберите ANSI кодировку.

Если нашли ошибку, напишите мне на почту или оставляйте комментарии

]]> http://www.samborsky.com/news/173/feed/ 57 http://www.samborsky.com/news/170/ http://www.samborsky.com/news/170/#comments Sun, 09 Nov 2008 01:51:31 +0000 Samborsky http://www.samborsky.com/?p=170 Под впечатлением от статьи Алексея Качаева «jQuery + Ajax – парсим PR в несколько потоков«, я решил доработать свой скриптик до многопоточности.

Многопоточность реализована на основе связки фреймворка jQuery и PHP. В цикле, функция $.post, работает асинхронно, тоесть возвращает управление основному потоку сразу, но выполнение продолжается.

for( var i = 0; i <= keywords_array.length - 1; i++ ){
	if( keywords_array[i].length ){
		var params = "hostname=" + hostname + "&keyword=" + keywords_array[i] + "&id=" + i;

		$.post(
				"worker.php",
				params,
				function(data){
					var id = $("id",data).html();
					var keyword = $("keyword",data).html();
					var concurents = $("concurents",data).html();
					var position = $("position",data).html();

					// Кейворд
					$('#k_' + id).html(keyword);
					// Позиция
					$('#p_' + id).html(position);
					// Конкуренты
					$('#c_' + id).html('<h3 id="show_hide_' + id + '">Показать/спрятать</h3><ol style="display: none;">' + concurents + '</ol>');

					$("#show_hide_"+ id ).click(function(){
						$(this).next("ol").slideToggle("slow").siblings("ol:visible").slideUp("slow");
						$(this).toggleClass("active");
						$(this).siblings("h3").removeClass("active");
					});					

				}
		);
	}
}

Но все это технические тонкости.

Что получает от многопоточности обычный пользователь?

Прежде всего скорость работы скрипта существенно увеличивается, и данные обновляются в «прямом эфире», вот как это выглядит на практике:

Это тестовая версия, и мой первый опыт на jQuery, потому прошу не судить строго, но об ошибках, если не трудно сообщайте.

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

Note: There is a file embedded within this post, please visit this post to download the file.

Note: There is a file embedded within this post, please visit this post to download the file.