Алексей Качаев | Web-developer, фрилансер, менеджер

PHP, jQuery, AJAX, CodeIgniter, ZendFramework, Web2.0, блоггинг, Wordpress, бизнес, StartUp, Инветоры, web-проекты, бизнес-идеи, фриланс, интерфейсы

JQuery-навигация: каскад динамических списков произвольной длины

Опубликовано: Алексей Качаев | 39 комментариев

Добрый день, читатели. Решил сегодня расслабиться от каждодневной работы и написать очередной tutorial. На повестке дня сегодня магия jQuery и небольшой рассказ о том, как динамически создавать на странице группы select`ов. Для того, чтобы вам была понятна задача, которую мы решаем, немного предыстории.

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

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

jQuery, Ajax и PHP - создание каскада динамических списков

О том, как организовать подобную иерархию списков, можно прочитать здесь. Но. Такое решение не снимает проблем, ведь оно создано специально под 3 списка, в которых динамически меняется содержимое. А при работе с деревом категорий неограниченной вложенности мы никогда не знаем, сколько списков нам понадобиться. Поэтому описанную в статье методику пришлось “расширить”.

Вооружимся jQuery, PHP и современными традициями AJAX, начнем (сразу скажу, что нам понадобиться jQuery 1.3)…

Для нетерпеливых: то, что у нас получиться в итоге, вы можете посмотреть здесь:

jQuery, Ajax, PHP - создание каскада динамических списков.

[Читать далее...]

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

JQuery и Ajax: результат в красивой оболочке

Опубликовано: Алексей Качаев | 10 комментариев

Уверен, если вы используете в своем клиентском приложении элементы AJAX, перед вами так или иначе встает вопрос: как сообщить пользователю о том, что запрос выполнен, или произошла ошибка, или еще чего случилось?

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

Кто работает с Google Reader уже привыкли вот к этому:

jQuery и Ajax - оформление ответа сервера

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

Работая над движком НаСтенке.ру мне понадобилось что-то подобное для того, чтобы выводить пользователю сообщения при голосовании “Спасибо, ваш голос учтен”, “Извините, произошла ошибка”, “Вы уже голосовали за эту статью раньше!”. Погуглив немного, нашел очень удобный jQuery плагин jGrowl, с которым и буду работать в дальнейшем.

Стандартное использование JGrowl

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

jQuery и Ajax - красивая оболочка для ответа сервера

Использование этого плагина продемонстрирую на примере своего Bank Your Brain: когда пользователь загружает пример из файла, клиентское приложение получает ответ сервера в формате XML, парсит его и для каждого найдено в XML пункта создает переносимый блок на сайдбаре. Давайте увеличим немного юзабильность приложения - будем сообщать пользователю о том, сколько балансовых статей добавлено (без этого действительно неудобно, поскольку добавленные блоки уходят далеко вниз, за пределы видимости экрана).

[Читать далее...]

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

“Пятизвездочная” помощь - голосовалка на JavaScript

Опубликовано: Алексей Качаев | 2 комментария

Спонсор поста: Поиск работы в Украине.

Давненько, я не писал про хитрости и тонкости веб-разработки. Сегодня хочу поделиться с читателями одной своей наработкой. В последнее время работаю в основном с парсерами (очень много заказов, но об этом как-нибудь в другой раз) и с различными рейтингами.

В эпоху любимого веб2.0 ни один рейтинг не может обойтись без системы комментирования (reviews) и оценивания (rank) пользователями. Привычными на многих сайтах стало простое добавление оценки путем выбора мышкой количества звездочек на некой стилизованной шкале. Кстати, в блогах тоже встречается такое - есть даже плагин для вордпресса специальный.

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

Пример реализации:

Rank:

Рецепт создания:
[Читать далее...]

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

Эпоха веб-лени и немного о регистрациях

Опубликовано: Алексей Качаев | 14 комментариев

Алексей Качаев. Обзор юзабилити сервисовВы, знаете, последнее время замечаю за собой, что становлюсь все более и более ленивым в плане… заполнения всяких регистрационных форм, “придумывания” логинов и тому подобного. И я уверен, что я такой - не один! Действительно, когда вас просят зарегистрироваться, придумать себе ник и пароль, то это может показаться проявлением уважения к вам как к пользователю. Мол, Вы теперь будете называться как хотите, но….

Пункт 1. Пользователей очень и очень много. Поэтому часто приходиться “расстраиваться” из-за того, что мой любимый ник уже занят. Приходиться придумывать что-то другое, а значит, менее для меня привлекательное, а значит… я быстро это забуду.

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

[Читать далее...]

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

Следите за глазами!

Опубликовано: Алексей Качаев | Один комментарий

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

Или… может все-таки…

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

Сегодня мы на примере стартовой странички FeedMates.ru мы рассмотрим, как использовать этот подход. Конечно, всех тонкостей в одной заметке не расскрыть, но основную идею вы уловите.

Алексей Качаев: следите за глазами

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

С чего посетитель начнет изучать страничку?

Алексей Качаев: следите за глазами

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

Алексей Качаев: следите за глазами

По дороге нам встретиться слово БЕСПЛАТНО. Слово-магнит, призваное “прикрутить” внимание к сайту и прочитать текст. В тексте описано как раз то, что нам нужно - польза проекта для посетителя. Теперь остался последний шаг - необходимо превратить посетителя в пользователя. Вот с этим на страничке трудновато…

[Читать далее...]

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

Страница 1 из 11