Web notes » usability

Добавление социальных закладок на сайт

nice — Fri, 29 Oct 2010 09:51:25 +0000

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

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

Затем размещаем у себя на сайте любую из этих картинок в специальной ссылке такого социального сервиса, и все!

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

В результате, появится картинка, в моем случае это fac.gif, при нажатии на которую откроется новое окно с сервисом добавления в Facebook.

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

Но лучше посмотреть пример: Социальные закладки у себя на сайте (блоге)

Прозрачные png картинки в IE

nice — Sat, 10 Oct 2009 14:34:33 +0000

На заметку напишу о одном старом но очень полезном плагине для jQuery – pngFix. Этот плагин позволяет решить проблему отображения прозрачных png картинок в Internet Explorer.

Одним из достоинств есть его вес в упакованном виде - всего 2кб.

Подключаем так:

И используем на страничке так:

Скрипт:

$(document).ready(function(){

$('#colorpickerHolder').ColorPicker({flat: true});

$('#colorpickerField').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});

$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}

});

Строка 02 – обычный вызов палитры в DIV контейнере.
Строка 03-13 – привязка к элементу input по id c обработчиками для задания выбранного цвета с value.
Строка 14-26 – вывод в контейнере DIV c эффектами onHide и onShow

HTML:

Для корректной работы в IE предлагаю подключать плагин прозрачности png файлов для jQuery (о нем чуть позже).

Посмотреть пример работы палитры цветов.

Скачать пример.

Пагин TwitterFox – для работы с twitter.

nice — Tue, 08 Sep 2009 19:53:48 +0000

С недавнего времени я начал пользоваться микроблогом twitter. Со временем начало надоедать постоянно заходить на twitter.com, чтобы написать сообщение или прочитать мысли других…

И после небольшого поиска, наткнулся на один удобный плагин для FireFox – TwitterFox.

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

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

А также еще две закладки - ответы на ваши сообщения и личные сообщения.

И последнее - строка ввода самого текста сообщения. Все просто, интуитивно понятно и удобно!

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

Также, посмотрите обзор полезных плагинов для Mozilla Firefox

Генерация индикатора загрузки Ajax

nice — Sun, 06 Sep 2009 12:41:22 +0000

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

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

http://www.preloaders.net/
http://www.ajaxload.info/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/

По ходу нахождения новых похожих ресурсов, буду пополнять список!

Или добавляйте свои, в комментариях!

Еще один плагин прокрутки на jQuery

nice — Sat, 05 Sep 2009 20:27:50 +0000

Удобный плагин к jQuery для новостей с прокруткой текста попался мне на одном блоге.

Плагин умеет прокручивать текст как по нажатию на стрелочки, по вращению скролла так и по нажатию клавиши Enter.

Подключаем:

Сам скрипт:

где строка 03 - хак для оперы, строка 05 - количество выводимых новостей, строка 06 - длительность, 07 - id контейнера

Сам контейнер с новостями:


Еще новости

….
....
….

Более подробно смотрите пример прокрутки новостей на jQuery.

Или скачайте архив с примером.

1 сентября – Opera 10

nice — Tue, 01 Sep 2009 19:40:14 +0000

Сегодня вышла финальная версия Opera 10. Новый элегантный интерфейс, улучшенные вкладки и технология компрессии информации – Opera Turbo, а также многое другое ждет нас в этой сборке.

Opera 10 доступна по адресу www.opera.com как для Windows, так и для Linux и Mac.

Более подробно можно прочитать в обзоре на http://habrahabr.ru или на оф.сайте www.opera.com.

Ну что ж, попробуем! Хоть я и поклонник FireFox...

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

nice — Mon, 31 Aug 2009 10:41:14 +0000

Продолжая тему прозрачности элементов при наведении еще один примерчик применения этого приема для usability на страничке, предложил все тот же David Walsh используя jQuery.

При наведении курсора на DIV (в данном примере) c классом "opacity", плавно меняется свойство стиля opacity с 0,7 на 0,9. Все достаточно просто:

И походу в коде:

…

Более подробно смотрите пример плавного изменения прозрачности фона на jQuery.

Или скачайте архив с примером.

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

nice — Fri, 28 Aug 2009 18:41:49 +0000

Интересное решение для акцентирования внимания на чем-то, предложил David Walsh используя jQuery.

Суть скрипта найти все дочерние элементы контейнера и поставить им прозрачность 50%, кроме выделенного элемента. Как говорят: все гениальное – просто.

Сначала подключаем jQuery:

И используем так:

Более подробно смотрите пример прозрачные элементы jQuery.

Или скачайте архив с примером.

HTML редактор CKEditor

nice — Thu, 27 Aug 2009 12:05:57 +0000

Продолжая обзор WYSIWYG редакторов текста хочу оставить заметку о новом CKEditor

Разработчики намного ускорили этот редактор и дизайн его сделали боле эргономичней.

Редактор CKEditor может загружаться с помощью AJAX, можно редактировать содержимое DIVа при двойном клике, разные режимы обработки клавиши ENTER, поддержка скинов, 57 языков интерфейса и так далее…

Смотрим демо на оф.сайте

Скачать бесплатно