20 Ajax эффектов, которые должен знать веб-разработчик.

На сайте nettuts.com была опубликована статья с примерами и исходниками 20 Ajax эффектов, способных придать вашему сайт современный вид и повысить его юзабилити. Перевод данного обзора и предлагается вашему вниманию. Существует несколько способов добавить модной перчинки и налёта современности внешнему виду практически любого сайта. Перед вами 20 Ajax эффектов, который должен знать каждый веб-девелопер. Они входят в инструментарий любого профессионала и если вы не знали их раньше, вам так или иначе приведётся случай использовать эти эффекты в своих будущих работах. 1. Автозаполнение и список вариантов текстового поля. Автозаполняемые поля в форме могут помочь пользователю сэкономить время и сделать процедуру заполнения более удобной. Например, выбор email адреса - это задача, которую можно запросто упростить и сделать более увлекательной (если конечно можно использовать этот эпитет в данном контексте :) при помощи тривиального Ajax эффекта. TextboxList meets Autocompletion – это пример скрипта автозаполнения, который использует такой же подход к заполнению поля, как и в известной сети Facebook. Реализация его совсем проста и интуитивно понятна. При этом данная функция автозаполнения будет полезна пользователю, да и выглядит весьма симпатично. Исходник Демо 2. Ajax IM. Ajax IM – это прекрасный мессенджер, который в работе в точности напоминает Yahoo messenger, однако при этом встроен в ваш веб-сайт в отличие от десктоп клиента яху. Ajax IM грамотно организован, и если у вас сеть своя социальная сеть ли другой сайт, на котором пользователям предполагается коммуницировать друг с другом Ajax IM будет хорошим инструментом для общения юзеров. Исходник Демо 3. Валидация в режиме реального времени. Заполнение веб форм – это одно из наиболее скучных и утомляющих занятий в сети. Большинство из них слишком длинны, собирают слишком много информации о пользователе, и зачастую ценящему своё время юзеру банально нет времени и желания их заполнять. Ну а самый мрачный момент во всём этом– это когда после заполнения формы и нажатия кнопки "Submit" перед вами выкатывается целый список ошибок и приходится добрую половину полей заполнять заново. Один из способов избавиться от этой раздражающей проблемы - это добавить лайв валидацию вводимых данных при помощи Ajax, которая будет информировать пользователя о наличии ошибки непосредственно в момент её совершения. LiveValidation – это прекрасный, простой в применении скрипт, который просто обязан использоваться в любом сайте, в котором предполагается заполнять более-менее длинные формы. Исходник Демо 4. Inline редактирование Возможность редактировать что-нибудь в inline режиме – это небольшая эстетическая фишка, которая может сделать процесс использования вашего ресурса более удобным и запоминающимся. Что может быть изящней, чем возможность два раза кликнуть по текстовому полю и быть способным сразу же его редактировать? Manoloweb предлагает хороший и несложный вариант реализации функции inline редактора. Это совсем небольшой скрипт, однако, в зависимости от ваших потребностей его можно сделать гораздо более сложным и функциональным. Исходник Демо 5. Ajax загрузка. Загрузка файлов при помощи Ajax гораздо симпатичнее, нежели традиционный скучный способ. Это полезно для пользователя – видеть прогресс загрузки, а для девелопера выгодно использовать способ аплоуда, который модифицирует только отдельные секции веб-страничек. Так как вариантов реализации загрузки при помощи Ajax технологий существует немало, приведём для примера самый простой способ. У AnyExample есть прекрасный туториал по созданию базовой Ajax загрузки, которая может использоваться в чистом виде или же усложненном и модифицированном. Если вам необходимо готовое решение попробуйте jqUploader на jQuery или вот эти скрипты для загрузки сразу нескольких файлов. Исходник 6. Продвинутая загрузка Сейчас, когда мы уже познакомились с базовыми Ajax загрузчиками, давайте обратимся к более продвинутым и интересным вариантам. Fancy Upload - это базирующийся на превосходном JavaScript фреймворке Mootools загрузчик, который можно изменять, модифицировать и стилизовать до бесконечности. Он малозаметен, может использоваться inline, независит от типа сервера, и поэтому может быть легко встроен в уже существующие приложения. Исходник Демо 7. ClickHeat покажет, куда кликают ваши пользователи. Хитмапы – это пока ещё не до конца оценённый элемент в веб-разработке. Да, это не какой-нибудь популярный элемент, который привлекает внимание и жизненно необходим пользователям, однако для веб девелопера это прекрасный способ увидеть, наконец, куда же кликают посетители его сайта. Существует много таких веб-сервисов, например тот же crazyegg, однако вы может использовать и свой собственный абсолютно бесплатный Ajax –хитмап – ClickHeat. ClickHeat – весьма прост, однако от этого не менее функционален. Он показывает кто, куда и когда кликал за указанный период времени по вашим страничкам. Подобная информация хорошее подспорье и пища для размышлений для оптимизации планировки, а значит и навигации по вашему сайту. Знание того, куда кликают ваши пользователи – это абсолютно незаменимая вещь для вебмастера, ведь вы сможете вживую увидеть, какой по расположению на странице рекламный баннер пользуется большей популярностью у пользователей и по каким линкам они кликают чаще всего. Исходник Демо 8. Ajax форма для подписки. Нет ничего полезнее для стартапа или создаваемого сайта, нежели аккуратная и чистая форма для подписки на рассылку о запуске проекта или начале его тестирования. Ну а если вы для этого используете Ajax форму с динамической обработкой информации – это только лишний бонус. NinjaDesigns предлагает использовать изящный небольшой PHP скрипт, который использует Ajax технологии, для отправки данных при перегрузке страницы. Удобная и полезная штучка для любого вебдевелопера. Исходник Демо 9. Ajax файл-менеджер Навигация по традиционной иерархической структуре или "дереву" файлов может вызывать затруднения у веб-пользователей. Каждый клик по папке или файлу требует перегрузки страницы, и вы уж тем более можете забыть о drag-n-drop функциональности. Так что если вы хотите использовать дружественный к пользователю файловый менеджер для веб, вам придётся обратиться к Ajax. Relay – это смышлёный файловый менеджер, построенный на Ajax, обладающий следующими возможностями: • Перетаскивания файлов и папок • Динамически загрузки файловой структуры • Загрузки с указанием прогресса • Наличия аккаунтов пользователя … и многих других. Relay полнофункционален и может быть использован как отдельное приложения или в качестве элемента существующего ресурса. Исходник Демо 10. Ajax email клиент. Кому не нравится Gmail? Email сервис от Google перевернул наше понимание о электронной почте и заставил остальных (таких как Yahoo! И Hotmail) развиваться и пытаться реализовать схожий функционал. А сделано всё это Google'ом при определённой помощи всё того же Ajax. Cделать свой собственный Ajax мейл клиент похожим на Gmail, это интересный эксперимент, опыт разработки и результаты которого потом могут быть использованы во многих приложениях. DevArticles предлагает в помощь такому начинанию, хоть и не новую, но всё равно крайне полезную и познавательную статью – "Как создать Gmail клон ". 11. Повышение юзабилити веб-форм при помощи автосообщений. Многие скрипты, представленные в данной статье, созданы для повышения удобства заполнения веб-форм – главной головной боли для многих девелоперов. Действительно, ни один владелец сайта не будет счастлив, если посетители будут покидать его в момент подписки на услуги, из-за сложности и запутанности заполняемой формы. Использование автосообщений для подсказок и направления действий пользователя в данном случае это один из вариантов решения проблемы. Woork разработали подробный туториал по созданию автосообщений, появляющихся в виде небольших поп-апов при активизации поля. Это совсем простая фишка в исполнении, но при этом весьма полезная для пользователя. Исходник 12. qGallery Хоть qGallery – это не полнофункциональная галерея, однако всё же прекрасный пример использования Ajax для представления изображений и медиа. Базируется этот маленький скрипт на JavaScript фреймворке Prototype и создан для лёгкого и удобного показа картинок. Причём он даже оснащён функциями кэширования для снижения нагрузки на канал. Демо 13. Рейтинг в виде звёздочек на Ajax. Так уж повелось, что любой пользователь всегда не против высказать своё мнение по какому-либо поводу. Создание функции рейтинга даст возможность пользователю высказаться, а вашему сайту добавит интерактивности. Есть такой небольшой изящный скриптик под длинным названием unobtrusive ajax start rater, позволяющий вам предоставить пользователю возможность проголосовать буквально за всё что угодно. Он не прицеплен к какой-либо платформе и поэтому может быть использован везде, где используется PHP и MySQL. Исходник Демо 14. CakePHP Ajax Form Если вы являетесь пользователем фреймворков Django или CakePHP, вам может показаться весьма интересным туториал CakeBaker'a о том как создавать сабмит форму при помощи Ajax. Реализация такой формы совсем проста и занимает всего пару строчек кода, однако при этом если у пользователя отключён JavaScript в браузере, то отправка данных всё равно будет происходить, только уже без использования Ajax. 15. Организация туров по сайту при помощи библиотеки AmberJack. AmberJack – это одна из наиболее впечатляющих JavaScript-библиотек, позволяющая вам быстро и легко создавать обзорный туры по сайту, рассказывающие пользователю о нюансах использования ресурса. Отличительной особенностью данной библиотеки является её размер – всего четыре килобайта! Она лёгко кастомизируется и поможет вам произвести максимальное впечатление на посетителей сайта с минимумом затрат. Исходник Демо 16. Prototype UI. Prototype UI берёт на себя основную тяжесть по созданию визуальных Ajax элементов, в частности таких как "карусели" или модальные окна. Данный скрипт основывается на Prototype и Scriptaculous, и представляет собой, по сути, библиотеку классов юзер интерфейса. Исходник Демо 17. JCrop. Фоторедактирование фотографий онлайн – это не сильно увлекательный процесс, независимо от того используете ли вы специальные сервисы типа Picnic или же запускаете Photoshop. Не лучше ли было бы, если бы вебсайт, куда вы заливаете свои фото, позволял бы вам кропить их при этом? Это вполне реально при использовании jQuery плагина под названием JCrop, который позволяет пользователям кропить любое изображение, закачанное ими на сайт при помощи мощного Ajax движка. Исходник Демо 18. jQuery плагин для авто-табирования. Как мы уже отмечали выше, работа веб-девелопера зачастую заключается в том, чтобы максимально облегчить пользователю заполнение форм. И в этом все средства хороши, даже если на первый взгляд они почти незаметны и совсем незначительны. Пример такого небольшого, но всё равно полезного улучшательства – это авто-табирование при заполнении данных о телефонном номере иди других подобным образом форматированных данных. Lousyllama предлагает использовать превосходный плагин для jQuery для авто-табирования выбранных вами полей. Исходник Демо 19. Сортировка рядов таблицы при помощи Ajax. Сортировка элементов таблицы – это, несомненно, полезнейшая возможность при работе со страницами с большим количеством данных. The Daily Inspired опубликовала симпатичный туториал, раскрывающий нам способ реализации сортировки при помощи скрипта Стюарта Лэнгриджа sortable.js. Исходник 20. DrasticMap. Google maps – ещё один революционный продукт, который тесно связан с технологиями Ajax. DrasticMap – это прекрасный JavaScript/Ajax скрипт, который позволяет вам отображать координаты объектов из вашей MySQL базы на карте Google Maps. Данный скрипт имеет широкие возможности по настройке и конфигурированию и поэтом возможности его для работы с картами весьма и весьма широки. Исходник Демо -------------------------------------------------------- Источник Оригинал статьи

Место солидарности беларусского ИТ-комьюнити

Далучайся!