Рис. 1. Эффект всплывающей страницы

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

Одна из наиболее масштабных библиотек — Yahoo! User Interface — уже неоднократно рассматривалась в наших публикациях. Сейчас мы хотим предложить обзор более локальных библиотек на примере Highslide и WalterZorn.

Наверное, многие видели на различных сайтах популярный эффект: клик по картинке открывает увеличенное изображение, которое можно перемещать по экрану. Но мало кто знает, что авторство принадлежит именно HighSlide. Этот ресурс в основном представляет разработки управления графикой, галереями и, в последнее время, видеороликами. Очень важно, что практически все скрипты сделаны таким образом, что не блокируются средствами браузера как "активное содержимое" и срабатывают по одному клику. Значит, эффекты будут доступны практически всем пользователям без ограничений и лишних кликов. Библиотека поставляется по Creative Commons Attribution-NonCommercial 2.5 License, что позволяет использовать ее бесплатно на персональных и некоммерческих ресурсах и требует небольшой оплаты или письменного согласия владельца для использования в коммерческих разработках. Впрочем, размер оплаты невелик: $25 за сайт или $179 — лицензия для веб-студии с правом неограниченного использования.

Загрузка и установка производятся непосредственно с сайта. Простой инсталлятор создает всю необходимую инфраструктуру, включая служебные иконки, картинки, инструкции и примеры. Авторы ведут учет совместимости своих решений с основными типами браузеров. Реально сейчас поддерживаются все версии Internet Explorer от 5.0 и старше, Firefox 1.0 — 3.0, Safari 2.0, 3.0 и Netscape 7.2.

Рис. 2. Эффект управления изображениями на странице

Обзор возможностей Highslide начнем с управления графикой. Подключим файл highslide-with-gallery.js. Предварительно подготовим пары картинок — иконку и увеличенный рисунок. При этом необходимо файл иконки назвать в таком формате: имя_файла_изображения.thumb.расширение. Для создания эффекта воспользуемся функцией expand. Библиотека highslide содержит ряд предопределенных классов стилей, которые необходимо использовать для корректного отображения эффекта. Так, например, класс highslide необходимо использовать в контейнере div, который содержит обрабатываемое изображение. В результате конструкция будет иметь такой вид:

<div class="highslide-gallery">
<a href="images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/gallery1.thumb.jpg" alt="Highslide JS" title="Click to enlarge" /></a>
</div>

Дополнительно можно использоватть эффект просмотра галереи благодаря функции addSlideShow (рис. 2). Пользовательские эффекты, такие как прозрачность, скругление и ряд других, настраиваются встроенными функциями класса highslide:transitions, outlineType, fadeInOut, dimmingOpacity.

Рис. 3. Открытие флеш-ролика во всплывающем окне

Отдельно стоит рассказать о возможностях контролов, содержащих html-контент: inline, AJAX, iframe, flash. Эти элементы управления реализуют на странице несложные интерактивные компоненты. В результате при открытии в браузере веб-страница, с точки зрения пользователя, не выглядит перенасыщенной различными элементами. Если же пользователь захотел воспользоваться той или иной функцией, то, щелкнув по контролу, он получит доступ к расширенному функционалу. Рассмотрим на примере (рис. 3). На странице размещен заголовок статьи. Если пользователя он заинтересовал, то одним кликом без перегрузки страницы открывается окно, содержащее html-страницу с полным текстом. Это окно является заранее подготовленной веб-страницей, на которой может быть размещен любой контент: графика, флеш, фреймы, формы, AJAX-компоненты.

Функции управления произвольным контентом содержатся в библиотеке highslide-with-html.js. Всплывающее окно вызывается функцией htmlExpand. Свойство objectType указывает тип отображаемой страницы. Благодаря популярности библиотеки к HighSlide реализуется большое количество независимых плагинов: для .Net, Joomla, Wordpress, Picasa и iWeb для гаджетов Apple. Доступ к ним также предоставляется на сайте HighSlide.

Следующим в нашем обзоре станет ресурс WalterZorn, представляющий собственные интерактивные библиотеки для лучшего взаимодействия с пользователями. На ресурсе представлены такие библиотеки скриптов: векторной графики; смены изображений; подсказок (Tooltips) и динамических эффектов (Drag'nDrop & DHTML). Модуль математической обработки векторной графики находится в разработке. Заявлена совместимость со всеми основными типами браузеров (IE 4.0 — 6.0, Firefox 1.0 — 3.0, Safari) на основных платформах (Windows, Linux, MacOS). Автор статьи провел свои тесты и подтверждает работоспособность библиотек также на старших версиях IE — 7.0 и 8 beta2. Использование библиотек WalterZorn возможно на условиях лицензии LGPL (Lesser General Public License).

Библиотека векторной графики содержится в файле wz_jsgraphics.js. Она содержит функции для создания простейших графических объектов на странице средствами javascript. Особенно полезна эта библиотека для деловых ресурсов, на которых требуется динамически строить различные графики, гистограммы, круговые диаграммы.

Рис. 4. Создание слайдеров на странице

Модуль DHTML-компонентов позволяет создавать разнообразные спецэффекты на веб-странице. Познакомимся с некоторыми из них. Обязательно стоит упомянуть команды создания слайдеров: MAXOFFBOTTOM, MAXOFFLEFT, MAXOFFRIGHT, MAXOFFTOP. Они задают диапазон перемещения элемента и возвращают его текущее положение (рис. 4). Также может оказаться очень полезной команда SCALABLE. Она дает возможность посетителю веб-сайта самостоятельно изменить размер изображения. Это очень удобно для ресурсов, нацеленных на очень широкую аудиторию. В таких случаях сложно определить предпочтительный диапазон разрешений монитора пользователя и спроектировать дизайн соответствующим образом. Масштабируемое изменение изображений позволит пользователю самому установить удобный размер картинки. Дополнительные возможности самостоятельной компоновки страницы дает команда RESET_Z, которая задает порядок слоя элемента. Так, переместив изображение, можно задать, что оно станет фоновым или, наоборот, будет расположено поверх текста. Команда TRANSPARENT, в свою очередь, позволит сделать изображение при перемещении прозрачным.

Наиболее интересный и полезный модуль из библиотеки WalterZorn — это всплывающие подсказки. Фактически он обеспечивает функционал полноценных html-страниц во всплывающих подсказках (tooltips). Такие возможности очень удобны для представления расширенной информации, что позволяет облегчить дизайн основной страницы и не обращаться лишний раз к серверу. Для работы необходимо загрузить библиотеку wz_tooltip.js. Интересная особенность: функции и команды работают корректно, только если строка подключения скрипта расположена непосредственно после тега <body>.

Рис. 5. Пример страницы с форматированными подсказками

Основных команд в этом модуле всего две: Tip() и UnTip(). Самое интересное содержат атрибуты. Так, содержимым Tip может быть любой html-фрагмент, включая графику, оформление стилями и javascript-блоки. Группа атрибутов bordercolor, borderstyle, backgroundimage, bgcolor, textalign, titlealign, titlefontcolor, titlebgcolor и некоторые другие задают оформление всплывающего окна. Другая группа атрибутов определяет поведение окна в различных ситуациях: при открытии и закрытии; изменении положения указателя мыши; попытке открытия другого всплывающего окна. К ним относятся: CLICKCLOSE, CLICKSTICKY, CLOSEBTN, FIX, FADEIN, FADEOUT, DELAY, DURATION, EXCLUSIVE, FOLLOMOUSE, STICKY, OFFSET[X,Y,Z]. Используя эти и ряд других команд, можно управлять эффектами при открытии и закрытии окна, его расположения на странице. Например, на разработанной автором странице использованы эффекты всплывающего окна с заголовком, отформатированным текстом, изображением (рис. 5). Окно перемещается точно вслед за указателем мыши. При открытии и закрытии окно постепенно "проявляется".

Модуль Rotate Image содержит несколько несложных, но достаточно забавных функций, позволяющих изменять отображение картинок на странице: вращать, отображать зеркально.

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