Ajax Russia : Аякс по-русски

Сегодня я покажу вам пару приёмов использования джаваскрипт библиотеки Prototype. Туториал рассчитан для начинающих, но может и более опытные программисты узнают для себя что-то новое.

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

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

А тут тоже самое, но в более привычной всем текстовой форме:
Read more

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

Называется этот скрипт GFslideShow, и как можно догадаться из названия - сделали его талантливые ребята из Google. Для туториала нам необходимо: ключ для GoogleFeed API и RSS feed с фотографиями.

Read more

Большая новость для поклонников идеи “пользоваться вэб сайтами в оффлайне”. Крупный Web 2.0 сайт - Zoho Writer начал предоставлять своим посетителям возможность использовать ресурс в оффлайне. То есть теперь можно начать печатать документ на Zoho в онлайне, отключиться от интернета, и сайт Zoho всё равно будет доступен в браузере вместе со всеми вашими документами.

Возможно это благодаря Google Gears. Это специальный плагин, который заставляет браузер работать с локальным кешем страниц (на основе SQLite), периодически синхронизируя кеш с on-line источником. Здорово, что наконец то появляются сайты, кроме самого Google, с оффлайн функцией.

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

Чтобы показать и спрятать картинку существует огромное количество способов. А где взять то саму картинку? Найти в интернете aнимированное изображение ещё пол беды. Надо чтобы эта картинка подходила к дизайну сайта. Вот тут на помощь приходит ресурс ajaxload. Ещё нигде я не видел такого лёгкого и быстрого способа сгенерировать для себя картинку-индикатор.

Выбираем тип картинки, цвет фона и цвет самого индикатора

и получаем свой уникальный анимированный Gif.

Не знаю как Вы, но я просто в восторге от Google Suggest. Для тех кто не в курсе, это знакомый всем поисковик от Google с одним отличием. Когда Вы начинаете что то писать - Google делает Вам подсказки. Для этого Ваш кусочек текста посылается при помощи аякса на сервер и сервер возвращает список слов которые Вы скорее всего ищете. Очень удобно.

А как же встроить такую классную штуку у себя на сайте? Всё просто. Можно сесть и написать свой JavaScript, а можно позаимствовать уже готовый. А именно Autosuggest / Autocomplete with Ajax. По моему выглядит привлекательнее, чем на Google.

Инструкция:

1) Подгружаем 1 JavaScript файл

2) Добавляем к любому текстовому полю функциональность Autosuggest. Допустим что у нашего поля id="ajaxed_field".

Теперь, когда Вы начнёте печатать что нибудь в этом поле, браузер будет делать асинхронный запрос на http://www.yourdomain.com/suggest.php?mytext=то-что-вы-напечатали

На сервере не обязательно должен быть PHP. Это может быть Ruby on Rails, Java, ASP, не важно. Главное это в каком виде вернуть данные браузеру. Autosuggest скрипт поддерживает XML и JSON.

JSON объект должен иметь следующую структуру:

И всё. Чтобы результат выглядел также красиво, как в видео - используйте CSS, который можно скачать в комплекте с JavaScript файлом с сайта разработчика.