![]() |
Статьи | Новости | Контакты | ||||||||||
|
|||||||||||||
|
|||||||||||||
Технологии / ПО (187), Проблемы и ошибки (1), Общая информация (3), Оптимизация и продвижение (3), Проектирование (0), Веб-дизайн (0), Контент (0)
11.01.2009 |
![]() |
Рис. 1. Эффект всплывающей страницы |
В наше время интернет-ресурсы — это не просто странички с некоторой информацией. Они призваны решать совершенно определенные задачи: рекламировать товары и услуги; привлекать аудиторию; изучать спрос и общественное мнение; доносить информацию о различных общественных, технических, культурных новостях. А это уже более сложная задача, чем просто технически грамотно разработать сайт. Необходимо предоставить пользователю максимум удобств, удержать его на сайте и завлечь сервисами. В представленной статье мы рассмотрим небольшую часть этого огромного комплекса задач — а именно как сделать свой ресурс удобным и привлекательным с использованием стандартных технических решений. Вопросы маркетинга, регулярности обновлений и юзабилити мы оставим за пределами этого обзора. Сосредоточимся на основных моментах, которые сделают сайт приятным в работе, таким, чтобы посетитель остался на нем подольше и захотел вернуться еще и еще.
Одна из наиболее масштабных библиотек — Yahoo! User Interface — уже неоднократно рассматривалась в наших публикациях. Сейчас мы хотим предложить обзор более локальных библиотек на примере Highslide и WalterZorn.
Загрузка и установка производятся непосредственно с сайта. Простой инсталлятор создает всю необходимую инфраструктуру, включая служебные иконки, картинки, инструкции и примеры. Авторы ведут учет совместимости своих решений с основными типами браузеров. Реально сейчас поддерживаются все версии 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.
Библиотека векторной графики содержится в файле 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 содержит несколько несложных, но достаточно забавных функций, позволяющих изменять отображение картинок на странице: вращать, отображать зеркально.
Завершая обзор, надо отметить, что использование описанных пользовательских эффектов не самоцель. Их применение обосновано, когда необходимо представить большое количество информации, с одной стороны, удобно и наглядно, а с другой — быстро, без лишних перезагрузок. Этой же цели служит масштабирование графических изображений. В результате мы можем сделать веб-ресурс максимально полезным и привлекательным для посетителей и получить эффективную отдачу от его использования.
Ссылки по теме
Скоро на сайте
-
Wordpress
Серия статей о плагинах к движку WordPrress -
AJAX
Проекты и продукты, ориентированные на AJAX -
Новые сервисы Google
Обзор новых сервисов Google
Copyright © 2003—2022 Все права защищены
При использовании материалов сайта ссылка на hostinfo.ru обязательна