AjaxBlog » Плагины

Расширения и модули для Firebug

admin — Sun, 24 May 2009 12:33:28 +0000

Что общего у таких программ как ACDSee, Nero, Winamp… то, что из когда-то любимых программ, сделали неповоротливых и громоздких «монстров». Известная проблема универсальности, чем более универсальным становиться программный продукт, тем более он становиться тормознутый, глючный и неудобный для работы с ним.

Тем же путем, идет Opera (зачем там IRC-чат, почтовый клиент и BitTorrent, мне это не нужно). Я понимаю что мои предпочтения по функциональности браузера могут не совпадать с другими пользователями, которым это нужно. Как угодить всем, ответ прост и давно известен – расширения, модули и плагины.

Я очень рад что разработчики Firefox пошли именно этим путем. Я могу настроить функциональность своего браузера именно так как мне нужно и любо.

Об одном из таком расширении мы и поговорим. Это Firebug.

Расширения для Firebug

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

Вот наверно самые востребованные.

FirePHP – расширение номер один для Firebug. Если вы конечно, PHP программист:) Что тут говорить, мой рабочий инструмент. Поэтому маловероятно, что я перейду на какой-то другой браузер.

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

Jiffy – делалась как более функциональный аналог вкладки Net. но как-то у меня не сложилось. Наверное мне не нужен такой расширенный функционал. мне вполне хватает функционала вкладки Net.

Pixel Perfect – позволяет накладывать макет дизайна прямо на существующий сайт. Хорошее расширение, за исключением одного обидного недостатка – можно смешать картинку только на один пиксел за раз. Однажды мне нужно было срочно подогнать картинку к дизайну, сдвинув ее на 200 пикселей… думал сломаю мышку кликая.

FireRainbow – раскрашивает ваш js код. Предупреждаю, находиться в стадии экспериментального расширения. у меня не возникло проблем. работает отлично.

YSlow – вроде как позволяет проанализировать ваши страницы и рассказать что нужно сделать что-бы ускорить ее. Рекомендации основаны на опыте написание разработчиков Yahoo высокопроизводительных сайтов. То есть стоит прислушаться. Но у меня как-то не прижился. Наверное оптимизация запросов к бд, дает более существенный выигрыш, чем пытаться оптимизировать сами странички.

Модули основанные на FirePHP

Во время отладки темы для своего проекта «Твои плагины«, была острая необходимость постоянно отслеживать значение переменных не нарушая дизайна. Вот здесь и пригодился плагин от Ivan Weiler под WordPress. Все просто:

Скачиваем плагин
Активизируем в панели администратора
Пишем в любом месте fb($var); ?>
Смотри значение в панели FirePHP

Вообще то модулей написанных под различные продукты:

Скрещиваем Twitter и WordPress

admin — Sat, 23 May 2009 11:08:40 +0000

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

Глобальный подход

Есть официальная документация которая позволяет нам использовать предоставленный API интерфейс для работы с твиккером. Мне было лень разбираться с ним и я начал искать далее.

Готовые плагины для WordPress

SimpleTwitter – плагин который позволяет добовлять ваши посты в твиттер, достаточно много настроек.
The Twitter Updater – другой плагин который автоматически отправляет сообщения в twitter, при редактирование записи, обновлении ее или публикации, настраивайте плагин, как сами считаете нужным.
Twitter Tools – позволяет как постить в твитер, так и в блог постить свои твитты.

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

Сервисы для работы с твиттером

Пока из известных – TwitterFeed. Инструкция по применению очень проста.

Если есть OpenId – отлично. Если нет – заводим, (например: здесь myopenid, или здесь Yandex OpenID)

Логинемся в TwitterFeed под вашим OpenID

Создаем новый профиль

Заполняем форму

Вводим адрес вашего RSS
Устанавливаем частота обновления вашего твикера (по умолчанию: каждый час)
Сколько добавлять новых постов в твикер (по умолчанию: 1, максимальное количество 5)
Что выводит в твитер (по умолчанию: заголовок и описание)
Каким сервисом коротких ссылок мы будем пользоваться, а мы будем пользоваться так как длина сообщения для твикера ограничена 140 символами (если вы хотите без регистрации – то urlShot, если не поленитесь и зарегистрируетесь то – bit.ly. Помимо того что этот сервис сокращает ссылки, он ведет статистику кликов по ним.)
Публикация новых постов на основание их (по умолчанию: на дате).
Сообщение выводимое перед публикацией поста в твикер (по умолчанию: пусто). Не совсем нужная опция, у нас и так ограничено, так тратить дорогие знакосимволы на прикрепляемое сообщение – разорительно.
Если галочка стоить то идет публикация в ваш твикер. Если ее убрать то времено будет остановлен процесс публикации до тех пор пока вы ее снова не установите.
Думаю кнопочку «Create» вы сами найдете

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

Своими руками

Хочешь что-бы получилось как надо. сделай сам. Берем готовый PHP класс для работы с твикером. И на базе него пишем свой плагин для WordPress.

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


/*
Plugin Name: Twitter post
Plugin URI: http://www.youplugins.com/
Description: Updates Twitter when you create a new blog or publish one
Version: 1.00.0
Author: Denis Doroshenko
*/

function wp_twitter_post_shotlink($link)  {
	$shotlink = "";
	$url = "http://api.bit.ly/shorten?version=2.0.1&longUrl={$link}&login=******&apiKey=******";
	$bit = json_decode(file_get_contents($url), TRUE);
	if ($bit["errorCode"] == 0) {
		$shotlink = $bit["results"]["{$link}"]["shortUrl"];
	}
	return $shotlink;
}

function wp_twitter_post_add($post_ID) {
    include(dirname(__FILE__).'/twitterAPI.php');

	$post 			= get_post($post_ID);
	$postTitle 		= $post->post_title;
	$postLink 		= get_permalink($post_ID);
	$postContent 	        = $post->post_content;

	$twitter_username 	= '******';
	$twitter_psw 		= '******';
	$twitter_message	= "{$postTitle}: {$postContent}";
	$count = mb_strlen($twitter_message);
	if ($count < 1) {
		$twitter_message = "";
	} else if ($count > 115) {
		$twitter_message = mb_substr($twitter_message, 0, 115).'..';
	}
	$twitter_message .= ' '.wp_twitter_post_shotlink($postLink);
	$twitter_status = postToTwitter($twitter_username, $twitter_psw, $twitter_message);
	return $post_ID;
}

add_action('publish_post', 'wp_twitter_post_add');

?>

add_action(‘publish_post’, ‘wp_twitter_post_add’) – вызываем функцию wp_twitter_post_add, после события publish_post
wp_twitter_post_add() – функция которая производит публикацию поста в ваш твикер, для этого вам нужно знать логин и пароль вашего твикера.
wp_twitter_post_shotlink($link) – функция преобразования ваших урлов в их укороченный вариант, я для этого использовал сервис bit.ly, для его правильной работы вы должны быть на нем зарегистрированы. После регистрации сервис для вас с генерирует apiKey, который и нужно будет подставить в эту функцию.

Ссылки по данной тематике

Pencil – зарисовки и наброски прототипов интерфейсов с помощью Firefox

admin — Tue, 21 Oct 2008 18:41:44 +0000

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

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

Вот что я нашёл – Pencil.

Доступ ко всем свойствам формы

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

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

Select Box Factory – очумелый плагин для jQuery.

admin — Mon, 20 Oct 2008 09:47:59 +0000

Я являюсь тайным фанатом библиотеки для javascript – jQuery. Это библиотека предоставляет для разработчика фантастические возможности для реализации задуманного им функционала.

jQuery, по своей концепции напоминает Firefox. Сама по себе, как и «голый» Firefox (без плагинов) вряд ли завоевал такую популярность и любовь. Все дело в дружественной среде заложенной в библиотеке. Которая позволяет легко писать расширения в виде плагинов. Начиная от официальных плагинов jQuery UI, и заканчивая сторонними.

Вот об одном из них я и расскажу. Select Box Factory –поистине очумелый плагин для создание списков с выбором.

Что он умеет:

строить списки на основе уже существующей DOM – структуры

var dropdown = new sFac({
	id : "fromMemory",
	container : "dropdownContainer"
});	


	 Lynx 
	Cheetah
	Bobcat

Получать самому списочный массив с сервера с помощью JSON или прописать его в коде

var dropdown = new sFac({
	id : "fromTheServerSide",
	container : "dropdownContainer",
	choices :
		[
			['leopard','leopard','Leopard',false,0,["spots"," ears"]],
			['tiger','tiger','Tiger',false,0,[" tail","nose"]],
			['serval','serval','Serval',true,0,["tail","nose"]],
		]
});

Списки поддерживают следующие свойства: dropdown, показать один только список без шапки, мультивыбор значений списка, изменений размеров списков (resize)
Плагин поддерживает фильтрование значений списка и создание списков из картинок
Создание списков с подкрашенными значениями, с последующей возможностью применить к ним фильтр
Поддержка скинов для списков

Эффекта перелистывания страницы на сайте

admin — Fri, 17 Oct 2008 11:02:17 +0000

Вот такой интересный плагин для WordPress я нашёл. Называется – Pageear.

Что умеет

Изменять размер страницы 100 × 100 или 500 × 500 пикселей.
Проигрывать MP3-файлы при запуске, открытые и закрытие Pageear.
Возможность оставлять страницу открытой и ждать действия пользователя на закрытие страницы.
Менять место расположение в левом или правом верхнем углу.
Открывать и закрывать автоматически после X секунд.
Изменять скорость открытия и закрытия страницы
Определения наличие флешплейера.
Эффект отражения картинки угла на страницу.
Цвет уголка страницы.
Установить ссылку перехода.
Работает почти во всех браузеров (FireFox, InternetExplorer, Opera, Safari и т.д.)

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

240 удивительных плагинов для jQuery

admin — Fri, 25 Jul 2008 06:58:51 +0000

jQuery одна из моих любимых JavaScript библиотек. Одно из сильных сторон этот библиотеки – поддержка сторонних расширений (плагинов). А нашему брату только дай по расширять

В этом посту приведен список более чем 200 отобранных плагинов для jQury на каждый случай. Правда не мной, а Jürgen Koller.

File upload

Form Validation

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Облако тегов, с использованием флеша

admin — Thu, 03 Jul 2008 08:06:42 +0000

Хотел ничего про WordPress не писать. Не получилось, постоянно ищешь для своего блога что-то новенькое, а найдя хочеться рассказать о своей находки.

WP Cumulus – плагин для WordPress. Краткий перевод статьи Roy Tanck.

Установка

Необходим WordPress версии 2.3 и выше
Скачать и распаковать ZIP архив
Залить папку wp-cumulus в плагин-папку (wp-content/plugins/)
Активируйте плагин в разделе “Плагины” в административной панели WP
Редактируйте настройки в разделе “Настройки->WP Cumulus”

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

Есть два варианта вывода флеш облака тегов.

В любом месте страницы или записи вставьте: [WP-CUMULUS ]
При сохранении этот тег будет заменён на облако тегов. Использовать без пробела.
Если у вас установлен. к примеру, плагин Exec-PHP, вы можете подключить облако тегов через вызов функции:
Через вызов функции плагин можно использовать, к примеру, в виджетах.

О настройках

Ширина облако тегов – если Вы сделаете очень маленьким, то возможно посетители не смогут прочитать мало используемые тэги. Размер от 500 будет прекрасно работать.
Высота облако тегов – в идеале, высота должна быть что-то вроде 3 / 4 от ширины. Это сделает вращающееся облако наиболее красивым.
Цвета тегов – указывается шестизначное hex значение цвета без #. Черный (000000) будет красиво выглядеть на светлом фоне. Белый (ffffff) рекомендуется для темного фона.
Цвет фона – будет игнорироваться, если включена функция прозрачного фона.
Скорость – позволяете Вам изменять скорость вращение сферы. Варианты между 25 и 500 самый оптимальный

Как избежать утечки PR или NOFOLLOW

admin — Wed, 02 Jul 2008 08:01:52 +0000

Намедни, начитавшись SEO-блогов.

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

И так, с одной стороны я не могу не разместить ссылку на источник откуда взял материал. С другой стороны каждый раз добавлять этот атрибут меня как программиста «ломает», это «не наш путь». Наш путь – написать плагин который это делает за нас.

Начнем. Заходим в папку /wp-content/themes/myteam, где myteam – название вашей темы. Находим (если нет создаем) файл functions.php. И добавляем следующий код:

add_filter('the_content', 'nofollow'); //Добавили новый фильтр

//Сам фильтр
function nofollow($content) {
    $content = str_replace('
Как это работает. В момент отдачи поста, он проходит через еще один фильтр nofollow. Который ищет в теле поста ссылки и добавляет к найденным ссылкам атрибут rel=»nofollow»

Всплывающей подсказки или tooltip

admin — Mon, 23 Jun 2008 08:29:52 +0000

В Интернете наблюдается определенная модная тенденция к использованию на сайте всевозможных всплывающих подсказок (tooltip).

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

Я давно уже хотел на своем сайте задействовать их. И вот смотрим…

Идея подсказки, взята с одного известного сайта.
Скрипт полностью написан с нуля, так-так их вариант не устраивал по ряду причин.
Скрипт пока еще «сырой», но если появиться интерес то доведу его до кондиции плагина к WordPress`у

Здесь можно посмотреть демо работу скрипт, а здесь скачать.