Он знал, он знал
Многим пользователям Сети уже довелось познакомиться с сервисом Google Suggest. Тем, кто этого еще не сделал, настоятельно рекомендую[Последняя «бета» живет здесь]. Это не только наглядная демонстрация возможностей AJAX, но и действительно полезная штука. На первый взгляд — ничего необычного. В поле для поиска вводится ключевое слово. Мгновение — и Google предложит вам несколько вариантов поисковых запросов, а также статистику по ним. Создается впечатление, что поисковик в буквальном смысле реагирует на каждое нажатие клавиши. Попробуйте немного изменить слово — набор подсказок изменится. При этом страница и не думает перезагружаться.Каким образом сайт «догадывается», что вы собираетесь искать? Откуда берет информацию? Конечно, Google не мог заранее «знать», о чем его спросят. Он просто сумел почти незаметно «спросить» об этом хранилище данных и получить от него ответ.
Необычные ощущения порождает и работа с почтовым сервисом Gmail. Благодаря щедрости владельцев и всяким дополнительным завлекалочкам, многие российские пользователи доверили ему свою переписку. Фокусы начинаются уже при входе: если ввести неправильный пароль, перезагружается только форма авторизации, а не страница целиком. Наверняка вы заметили, что перемещаться между сообщениями внутри ящика можно очень быстро — дозагружается лишь центральная часть страницы, где выводится новая информация, — в отличие от Mail.ru, HotMail.com и многих других почтовых сервисов, где при просмотре каждого письма пользователя заставляют загружать воз баннеров и трехэтажное меню. Gmail тоже активно использует подход, лежащий в основе «нового веба».
В последнее время идеи AJAX набирают популярность и получают развитие во все новых проектах. В числе «зараженных идеей»: онлайновый сервис фотоальбомов Flickr, проекты Google — Maps и Group, Virtual Earth от Microsoft, почтовый сервис America Online — AIM Mail и многие другие.
Сайт Webmascon посвящен веб-дизайну. Не веб-программированию, а именно концепциям веб-дизайна. Почти все статьи переведены с английского. Как сказано в разделе «О проекте Webmascon», «…цель проекта — донести русскоязычному населению Интернета информацию по веб-дизайну, которая доступна только на английском языке. Более глобальная цель — пропаганда качественного, чистого, культурного и стандартного веб-дизайна». Cейчас на Webmascon’e больше трехсот статей (в месяц появляется от 3 до 10 новых). Да и сам дизайн сайта — очень стильный, его часто приводят в пример, как нужно делать сайты. Статьи делятся на категории: «Информационная структура», «(X)HTML», «Юзабилити», «Реклама и продвижение», «Менеджмент проектов», «Текст и контент», «Проектирование», «Якоб Нильсен», «Тестирование» и многие другие. Проект некоммерческий, все статьи пишутся или переводятся владельцем сайта и его добровольными помощниками.
Проверенная команда
AJAX — это не отдельная технология, не программа и даже не среда разработки. Это связка из нескольких технологий, которые умело выстроены «в цепочку» и способны к слаженной и дружной работе. Действительно, все игроки этой команды известны довольно давно.За отображение информации на сайте отвечает HTML в сочетании с каскадными стилями — CSS. С этими технологиями знакомы многие пользователи Сети, которые хотя бы однажды мечтали завести себе домашнюю страничку.
HTML никогда не был большой премудростью: страничка состоит из элементов, которые заключаются в теги. Достаточно знать их названия и можно легко превратить любой текст в заголовок, ссылку, выделить его жирным шрифтом или курсивом. HTML, по сути, предназначен для разметки содержимого страницы — вот здесь будет текст, а вот здесь — список.
Про CSS (Cascading Style Sheets) слышал, наверное, каждый, но используют каскадные стили далеко не все создатели сайтов. Дело в том, что, в принципе, можно обойтись лишь HTML, не путаясь в дебрях стилевых настроек. Однако желание упростить себе жизнь создаст дополнительные проблемы, как только вам захочется что-нибудь поменять. Стили позволяют хранить все инструкции по отображению информации отдельно. В общем, можно сказать так: в HTML пользователь указывает, какую информацию следует вывести на экран, а в CSS — как она будет выглядеть (цвет, шрифт, размер и т. д.).
Верхушка айсберга, как можно заметить, полностью лишена чего-либо революционного. Собака по имени AJAX зарыта в связке следующих трех технологий — XML, XSL[См. дальше. Вообще, XSL не является обязательным элементом AJAX. Достойно представить информацию на сайте сумеет и сам JavaScript3] и JavaScript.
XML (eXtensible Markup Language) представляет собой популярный формат хранения и обмена данными. Звучит солидно, на деле же оказывается текстовым файлом, в котором хранится размеченная информация. Предположим, есть желание представить архив публикаций «Компьютерры» в виде XML-файла. Открываем Блокнот и создаем простенькую структуру.
<?xml version=”1.0” encoding=”ISO-8859-1”?>
<archive>
<journal name=”Computerra”/>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</archive>
Разумеется, реальные XML-структуры гораздо сложнее. Однако уже в этом простом примере легко заметить существенное отличие XML от HTML. Если создавая веб-страничку, мы ограничены готовым набором элементов, то XML позволяет придумывать собственную структуру данных. На эту структуру не налагается никаких дополнительных ограничений, от пользователя требуется лишь следовать строгим правилам. Легкомысленные вольности вроде незакрытых тегов и перепутанных элементов, которые великодушно «прощает» HTML, в XML не пройдут.
Ради чего привыкать к порядку? Десяток ответов на этот вопрос может привести любой разработчик. С помощью XML можно создать структуру данных, то есть упорядочить информацию определенным образом. После этого, используя один и тот же XML-файл, можно отображать эту информацию по-разному[Например, на витрине интернет-магазина и в корзине покупателя вид товара может отличаться], причем ее сможет использовать не только движок сайта, но и любые другие программы[Тот самый файл с товарами легко доступен из бухгалтерской программы и системы управления складскими запасами].
Еще больше возможностей открывается, если включить в игру XSL (eXtensible Stylesheet Language). Эта технология позволяет развести контент и его представление по разным углам. В файлах XSL содержатся инструкции, как именно показывать страницу. Получив XML-размеченные данные, браузер «заглядывает» в шаблон и демонстрирует веб-страницу пользователю.
С такими инструментами управлять информацией, представленной на сайте, намного легче. Вот пример из жизни: список ссылок на статьи стал слишком длинным, давно пора выстроить его в две колонки. Проще простого — нужно отредактировать XSL-шаблон. Во время работы не придется прорубаться сквозь данные, следя за ссылками и командами разметки в постоянном страхе удалить что-нибудь ценное, ведь весь контент «проживает» в отдельном XML-файле.
XML и XSL обеспечивают удобное манипулирование информацией, однако им не дано стать движущими элементами всей цепочки. Тут роль посредника и координатора отведена JavaScript. Он «оживляет» пеструю технологическую связку под названием AJAX, поэтому без его участия никакие чудеса «нового веба» не возможны.
Технологическую начинку AJAX составляют давно и хорошо известные ингредиенты, однако изюминка подхода — в аранжировке элементов. Другими словами, камень и палка в лапах человекообразной обезьяны совсем не обязательно представляют собой топор.
Обратите внимание на портал Woweb (www.woweb.ru) — в частности, на два сайта: «Статьи и документация на Woweb» (doc.woweb.ru) и «Скрипты на Woweb» (script.woweb.ru).
На первом вы найдете множество отличных статей на самые разные темы, так или иначе связанные с разработкой веб-сайтов. Одни заголовки разделов чего стоят: «Flash», «Photoshop», «Базы данных», «Apache», «Истории веб-мастеров», «Веб-технологии», «Программирование для Web» и др.
Второй сайт — неистощимый источник скриптов для всего Рунета. Их там тысячи, причем категории самые разные: «PHP», «Perl», «Java-апплеты», «JavaScript», «ASP» и т. д.
В англоязычном Интернете скрипты, написанные на PHP, Perl, Java и ASP, можно найти на ресурсе Hot Scrpits (www.hotscripts.com); там около десяти тысяч скриптов на самые разные темы.
Обмен данными «из-под полы»
Понять преимущества альтернативного подхода сможет лишь тот, кто знает о недостатках традиционного.Что происходит в недрах обычного динамического сайта? Стоит пользователю, например, кликнуть по ссылке или выбрать какую-нибудь опцию из выпадающего меню, как исполнительный браузер немедленно отправит полученную информацию на сервер. Неприученный к самостоятельной работе, браузер предоставляет другим решать все важные вопросы. Серверу необходимо разобрать поступившие данные, понять их и правильно отреагировать. В результате браузер будет удостоен ответа в виде новой полной веб-страницы. Да и сервер не всесилен, поэтому, если его начинают засыпать вопросами со всех сторон, он вполне может взять тайм-аут.
А как же главное действующее лицо — пользователь? Ему остается покорно ждать, пока браузер с сервером решают свои проблемы и грузят для него новую страницу. Время ожидания складывается из «сообразительности» сервера и скорости интернет-соединения.
Неужто AJAX способен избавить веб-интерфейсы от извечной заторможенности? Что ж, популярные Google-сервисы показали, что приложения в Сети способны работать гораздо проворнее, чем привыкли ожидать терпеливые пользователи.
Вернемся к технической начинке «нового веба». Браузер получает в свое распоряжение XML-файл. Далее на арену выходят еще два игрока — JavaScript и XMLHttpRequest. Первый из них выступает в роли распорядителя, а второй отвечает за получение информации с сервера.
XMLHttpRequest играет немалую роль в рождении «чуда». Именно он позволяет тихонько отправлять асинхронные запросы серверу через протокол HTTP и столь же незаметно получать всю необходимую информацию в виде XML[Строго говоря, могут использоваться и другие форматы — например, plaintext].
Скажем, вы пытаетесь ввести какое-то слово в окошко поиска на Google Suggest. С помощью XMLHttpRequest браузер отправляет запрос на сервер и ожидает ответа. Сервер присылает необходимые данные в виде XML. Расторопный JavaScript разбирает полученные данные и заботливо заворачивает их в HTML-теги. Момент… и ниже окна поиска отобразилось несколько полезных «подсказок».
Можно использовать и более изящное решение, если привлечь «запасного игрока» — XSL. Получив в свое распоряжение XML-файл и XSL-шаблон, современный браузер способен сгенерировать правильную HTML-страницу. Таким образом, в его «голове» оказываются сами данные, их структура и внешний вид для пользователя. «Поумневшая» программа — настоящая находка для JavaScript’а, которому по долгу службы в AJAX приходиться управлять информацией. Скрипту доступен XML-образ веб-страницы, который заботливо хранит в своей памяти браузер, поэтому манипулирование данными не составляет для него особого труда.
Ловкая комбинация технологий — и никакого мошенничества. Короче говоря, часть функций сервера по сборке итоговой страницы из данных и таблиц переходит к браузеру, вооруженному JavaScript’ом.
«Компьютерные шрифты» от портала Gets.Ru (fonts.gets.ru). Несколько тысяч шрифтов удобно разбиты по категориям: «3d-шрифты», «Компьютерные», «Декоративные», «Плакатные», «Символьные» и др. Есть шрифты русских разработчиков, есть и англоязычных.
«Шрифты на Woweb» (font.woweb.ru) — еще один ресурс по этой теме. Многие шрифты, конечно, вы уже могли найти на Fonts.Gets.Ru, но достаточно и тех, которые добавлены специально для Font.Woweb.Ru. Именно тут можно найти оригинальные шрифты, подходящие для создания логотипа или другой графической работы.
Немного о грустном
Преимущества AJAX очевидны — сэкономленное время и трафик, ожившие интерфейсы, счастливые пользователи. Но столь же очевидны и недостатки.AJAX не может похвастать универсальностью. Используя этот подход, программистам приходится изворачиваться, чтобы порадовать поклонников различных браузеров. Конечно, эти технологии поддерживаются всеми заслуживающими внимания программами — Mozilla Firefox, Microsoft Internet Explorer, Opera, Konqueror и Apple Safari. Однако отдельные компоненты могут вести себя непредсказуемо в браузерах различных производителей. Как всегда, именно «мелкая несовместимость» способна омрачить радость приобщения к «новому вебу», поэтому приложения приходится дотошно тестировать. К счастью, разработчики объединили усилия, и теперь в Сети можно найти библиотеки, решающие проблемы с совместимостью.
Самое досадное ограничение — JavaScript в браузере обязательно должен быть включенным. А контроль за этим целиком и полностью находится в руках пользователя. Особо мнительные субъекты, «продвинутые» в вопросах безопасности, имеют привычку отключать все «лишние» возможности. И такой «спартанский» браузер, разумеется, не сможет порадовать своего владельца чудесами «нового веба». С другой стороны, один из горячих поклонников AJAX привел весьма остроумный контраргумент: «Вы никогда не увидите картинок, если отключите их в своем браузере… Ваш компьютер перестанет работать, если вы выдернете вилку из розетки… На свете и так слишком много вещей, которые можно отключить».
Подобные утверждения не убеждают противников «нового веба». Ведь есть же последняя и самая страшная заповедь, которую нарушает этот подход, — юзабилити.
В AJAX-приложениях не работает знакомая каждому кнопка «Back». С точки зрения программиста, такой саботаж вполне объясним: браузер хранит историю перемещения пользователя по страницам, а в AJAX контроль отдается в руки приложения, где нет понятия отдельных страниц, — и «цепь времен» разорвана. Пользователь же убежден, что любимая кнопка должна работать всегда и везде. Приходится выдумывать дополнительные трюки, которые имитируют правильную работу злосчастной кнопки в AJAX.
Но этим дело вовсе не ограничивается. Эксперты по юзабилити неожиданно вспомнили, что хваленый подход будет работать лишь в графических браузерах, а пользователи того же Lynx останутся «с носом». Что на это можно возразить? Лишь еще раз вспомнить о том, что идеал, увы, недостижим, и продолжить создавать веб-приложения с шустрым интерфейсом.
Дефицит идей и избыток технологий
Похоже, что хитренький автор из Adaptive Path, чья статья была многократно растиражирована в Сети, оказался не так уж неправ. Конечно, наивно называть «новым вебом» подход, технологическую начинку для которого придумали в незапамятные времена. Да, технологии известны давно, и их комбинация, отдаленно напоминающая AJAX, была впервые использована Microsoft аж семь лет назад.Как ни странно, призрак AJAX довольно давно тревожит умы и отечественных программистов. В России этот подход, пожалуй, даже нашел новые сферы применения. Например, родственная комбинация технологий под названием LCD (Live Client Documents)[Разрабатывается компанией BYTE-force с 2000 года] легла в основу системы управления контентом. Здесь отсутствуют асинхронные запросы к серверу, то есть «чудеса» можно наблюдать, даже отключившись от Интернета, связь потребуется лишь для сохранения изменений. Однако об удобных приложениях с быстрыми интерфейсами, оперативно реагирующими на каждый «чих» пользователя, заговорили лишь в этом году. Бесспорно, немалую роль в этом сыграл Google: разработчики подхватили старую идею и придумали ей новое применение.
Случай с AJAX, по-моему, еще раз подтверждает старую истину: главное — идея, а способы ее удачного (и не очень) воплощения обязательно найдутся. Наверняка они уже существуют. Обсуждая плюсы и минусы «нового веба», стоит помнить, что, возможно, мы просто плохо представляем себе весь идеологический потенциал этого подхода. Известно — удобные интерфейсы и революционные приложения создаются людьми, а не технологиями.
Ажиотаж вокруг «нового веба» великолепно иллюстрирует и другую, немного грустную закономерность. Пока не найдется талантливый популяризатор, или, если угодно, «пиарщик», самой гениальной технологии уготовано место на задворках компьютерного мира. AJAX повезло, и будем надеяться, что и для других хороших идей будут находится не менее хорошие популяризаторы.
Понятие «дизайн страниц» давно переросло в более правильное понятие «дизайн пользовательского интерфейса». Как обычно, можно выделить крайности:
***
www.useit.com
Максим Перевозчиков
[max@softafacade.ru]