IBM®
Перейти к тексту
    в России и странах СНГ [изменить]    Условия использования
 
 
   
    Главная страница    Продукты    Услуги и решения    Поддержка и загрузка    Мой профиль    
Перейти к тексту

developerWorks Россия  >  SOA и Web-сервисы | XML  >

Разработка качественных Ajax-приложений: Часть 1. Создание интерфейса

Создание удобных, интуитивно понятных интерфейсов для приложений Ajax

developerWorks
Опции документа

Опции документа, требующие включения JavaScript, не отображаются

Обсудить

Исходные тексты примера


Выскажите мнение об этой странице

Помогите нам улучшить содержание


Уровень сложности: средний

Бретт МакЛафлин, автор и редактор, O'Reilly Media, Inc.

04.03.2009

Ajax по-прежнему остается одной из наиболее популярных тем в среде разработчиков программного обеспечения. Несмотря на то, что регулярно выпускаются новые приложения на основе Ajax, создание качественного продукта далеко не всегда является простой задачей. В данной статье подробно рассматриваются вопросы разработки интуитивных и простых в использовании Ajax-приложений.

Главным в Ajax являются вовсе не его технические основы, хотя большинство программистов будет пытаться вас в этом убедить, выстраивая свои аргументы вокруг таких языков, как XML и JavaScript. Но это лишь верхушка айсберга, на которой нет места главному звену – вашему заказчику – человеку, благодаря которому вы получаете зарплату, вне зависимости от того, является ли он непосредственным клиентом или вашим начальником (который также получает свои деньги за счет удовлетворения нужд клиентов).

Заказчиков абсолютно не интересуют технические вопросы. Им гораздо важнее то, как приложение выглядит и насколько именно им удобно с этим приложением работать. Таким образом, даже приложения, построенные на основе самых совершенных технологий, могут оказаться провальными, и наоборот – простенькая программа, состоящая из нескольких HTML-страниц, может работать идеально. Поэтому главной задачей разработчика является нахождение нужного баланса между техническим совершенством и удобством использования, что особенно актуально при создании приложений Ajax.

Центр материалов по Ajax на сайте developerWorks

Обратитесь к центру материалов по Ajax, содержащему множество ресурсов на тему программной модели Aajx, включая статьи, руководства, форумы, блоги, страницы wiki, события и новости. Все, что происходит в мире Ajax, так или иначе, отражается на этом сайте.

Возможности Ajax

Важно понимать, что именно Ajax может предложить, причем как вам (разработчику), так и вашим пользователям. Вне зависимости от того, наклеиваете ли вы ярлык “Ajax” на свои программы, необходимо учитывать, что в наши дни от Web-приложений ожидают намного большего, чем ранее, поэтому очень важно представлять, чего именно ждут ваши клиенты, если вы рассчитываете удовлетворить их потребности.

Удобство использования

Во-первых, одной из задач Ajax является повышение удобства работы с приложением. Возможно, это удивит кого-то из разработчиков, потому что первое, что приходит в голову при упоминании Ajax – это скорость работы, разнообразные элементы управления (виджеты) и прочие яркие графические приемы. Все это, безусловно, является неотъемлемой частью Ajax, однако большинство пользователей (не программистов) попросту считают, что Ajax-приложения удобнее. Они ведут себя именно так, как ожидается, в частности все элементы приложений, например, поля ввода, кнопки, изображения, находятся на своих местах.

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

Отзывчивость

Кроме вопросов удобства использования вам также придется позаботиться об отзывчивости вашего приложения Ajax. На первый взгляд может показаться, что “отзывчивый” означает “быстрый”. Как известно, Ajax-приложения не пересылают данные HTML-форм на сервер и не обновляют страницу в ответ на каждое действие пользователя, поэтому они должны быть более быстрыми (по крайней мере, в теории). Однако здесь не все так просто. Во время популярности DSL-интернета пользователям не приходится так уж долго ждать отклика от приложений. У ваших родственников уже наверняка есть кабельные модемы, а вы сами (особенно если читаете это на работе), скорее всего, находитесь внутри T1 или T3-сети. Поэтому аргумент о том, что Ajax-приложения по своей природе быстрее остальных, не столь очевиден (если да, то насколько? 10 мс? 100 мс? Вы представляете себе, насколько ничтожно это преимущество?).

В то же время приложения Ajax должны обладать повышенной отзывчивостью по сравнению с традиционными Web-приложениями. Тут дело не только в скорости, но также в том, насколько приятно работать с приложением (будьте внимательны, это тесно связано с удобством использования и качеством интерфейса). Например, после того, как вы ввели свое имя в интернет-магазине, у программы есть много времени пока вы заняты чем-то еще, например, выбираете цвет ботинок. За это время она может сделать много полезного, скажем, извлечь из базы данных ваш адрес, информацию о кредитной карте или даже что купили люди, которых вы ранее пометили как друзей. Подобные действия занимают определенное время, но поскольку вы все равно заняты чем-то другим, то приложение успевает оперативно подготовить всю необходимую информацию. В этом случае говорят, что оно отзывчиво.

При этом основные сложности связаны с проектированием интерфейса с целью повышения отзывчивости (далее мы поговорим об этом подробнее). Как разработчик, вы представляете себе последовательность действий пользователя, потому что она зависит от порядка полей ввода в вашем приложении. Это можно учитывать при определении сценариев взаимодействия приложения с сервером через Aajx. Попробуйте на минуту представить, как это можно сделать, а мы рассмотрим этот вопрос чуть позже на конкретных примерах.

Настольные приложения или все же нет?

Периодически совершаются попытки превратить все Web-приложения в настольные при помощи Ajax. В теории это выглядит весьма привлекательно, но не всегда работает на практике. Например, лично я использую один достаточно популярный пакет Web-приложений для управления расписанием, который имитирует функциональность Microsoft® Office. В частности, он использует всплывающие окна, сигнализирующие о надвигающемся событии (встрече). Звучит неплохо, прямо как в Outlook или iCal, не так ли? Однако все дело в том, что это не настольное приложение и обязано выполняться в браузере.

И что же получается в результате? Всплывающие окна работают превосходно, но только пока окно вашего Web-браузера находится поверх остальных приложений. Стоит мне только минимизировать его или скрыть за другой программой (например, InDesign), как всплывающие окна становятся совершенно незаметными. Их больше нет. Это интерфейсное решение оказалось неудачным, потому что приложение пыталось вести себя как настольная программа, таковой при этом не являясь. Не повторяйте подобных ошибок!

Выделяющиеся интерфейсы, напоминающие настольные приложения

Подобные интерфейсы являются наиболее заметным отличием, но в то же время наиболее трудно реализуемой особенностью приложений Ajax. При взгляде на них должно складываться ощущение, что вы работаете с настольными программами, но, как правило, это просто означает, что они “выглядят” как настольные программы. Например, в моей организации используется почтовый Web-клиент под названием Zimbra, который напоминает Microsoft Outlook. Скорее всего, при его проектировании считалось, что раз он выглядит как настольное приложение, то и работать с ним будет так же удобно.

Вокруг этого вопроса всегда возникает множество споров, так что мы пока отложим его обсуждение. Некоторые люди убеждены, что Web в итоге должен заменить настольные приложения, предоставив их точные аналоги, которые будет доступны в Интернет. При этом все аспекты работы с приложениями должны остаться неизменными. Другая часть Интернет-сообщества (к которой я отношу и себя) считают, что Web обладает рядом уникальных свойств и возможностей, которые позволяют выполнять одни действия лучше, чем настольные приложения, а другие – значительно хуже. Web – это ни с чем не сравнимая среда, поэтому выполняющиеся в нем приложения должны проектироваться по собственным принципам, а не копировать настольные аналоги.

Так или иначе, очевидно, что возможности приложений Ajax выходят далеко за пределы простых форм HTML 1997 с их здоровенными серыми кнопками “Submit” и грубым оформлением в стиле "border=1". Поэтому, несмотря на отсутствие единого подхода к созданию приложений Ajax, они должны выглядеть значительно богаче и привлекательнее.

Пример приложения

Но довольно теории и технических рассуждений. Пора заняться чем-то реальным, например, созданием простого приложения. В качестве примера я выбрал приложение Hoverbox Натана Смита (Nathan Smith) (все ссылки приведены в разделе Ресурсы). Hoverbox обладает простым Web-интерфейсом на основе CSS, который позволяет рассматривать увеличенные версии изображений в галерее при наведении на них курсора мыши. Интерфейс Hoverbox по умолчанию показан на рисунке 1.


Рисунок 1. Демонстрация Hoverbox
Hoverbox is a simple CSS-based image gallery viewer

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

Lightbox... он выглядит еще лучше!

Существует один виджет под названием Lightbox (см. Ресурсы), который, по-моему мнению, выглядит интереснее и привлекательнее, чем элементы управления в примере. Однако для него потребуется намного больший объем кода, поэтому я принял решение от него отказаться. Но вам может быть полезно попробовать реализовать идеи данной статьи на основе Lightbox.

Совершенствование CSS-страницы Hoverbox

Перед тем как углубиться в JavaScript, давайте на минуту задумаемся над тем, что мы хотим получить в итоге. Мы собираемся взять за основу галерею изображений, используя CSS-стили Hoverbox, и вдобавок к увеличению выбранного изображения реализовать возможность просмотра комментариев, ассоциированных с данной фотографией. В этом нам поможет Ajax. Но сначала необходимо позаботиться о выделении определенного пространства на странице, где будут располагаться комментарии.

Загрузите архив с примерами к данной статье и найдите файл hoverbox.css. Он содержит определения стилей для галереи изображений. Необходимо изменить стили в соответствии с листингом 1 (достаточно просто скопировать его содержимое в файл).


Листинг 1. Отредактированная версия CSS для галереи изображений
        

*
{
	border: 0;
	margin: 0;
	padding: 0;
}

/* Базовое оформление HTML, не принципиально важно
----------------------------------------------------------------------*/

a
{
	text-decoration: none;
}

body
{
	background: #fff;
	color: #777;
	padding: 50px;
}

#page {
  position: relative;
}

#images {
  float: left;
  width: 400px;
}

#details {
  color: #000;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p#footer
{
	clear: both;
	font: 10px Verdana, sans-serif;
	padding: 10px 0;
	text-align: center;
}

p a
{
	background: inherit;
	color: #777;
}

p a:hover
{
	background: inherit;
	color: #000;
}

/* Код Hoverbox
----------------------------------------------------------------------*/

.hoverbox
{
        width: 375px;
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

/* Стили для оформления дополнительной информации -----------------------------*/
.info-title {
  color: #933;
}

.info-date {
  font-size: 14px;
  color: #777;
}

.info-text {
  font: 10px Verdana, sans-serif;
  padding: 10px 0;
}


В листинге 1 добавлены несколько элементов div, в основном для того, чтобы можно было работать с галереей как с единым объектом, одним из элементов которого является дополнительная информация об изображении (которую мы скоро добавим). Остальные изменения носят скорее поверхностный характер, в частности, они служат для двух-колоночной разметки страницы.

Далее нам предстоит добавить несколько элементов div в HTML, как показано в листинге 2.


Листинг 2. Отредактированное HTML-содержимое страницы галереи изображений
        

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hoverbox Image Gallery<title>
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" 
      media="screen, projection" />


  
</head>
<body>
<h1>Hoverbox Image Gallery</h1>


<div id="page">

<div id="images">
<ul class="hoverbox">
<li>
<img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo06.jpg" alt="description" /><img src="img/photo06.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo07.jpg" alt="description" /><img src="img/photo07.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo16.jpg" alt="description" /><img src="img/photo16.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo17.jpg" alt="description" /><img src="img/photo17.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo18.jpg" alt="description" /><img src="img/photo18.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo19.jpg" alt="description" /><img src="img/photo19.jpg" 
                 alt="description" class="preview" />
</li>
<li>
<img src="img/photo20.jpg" alt="description" /><img src="img/photo20.jpg" 
                 alt="description" class="preview" />
</li>
</ul>
</div>

<p id="footer"> <a href="http://validator.w3.org/check/referer">XHTML</a> 
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> 
<a href="http://www.contentquality.com/mynewtester/cynthia.exe?
Url1=http://host.sonspring.com/hoverbox/">508</a>
 | Hoverbox by <a href="http://sonspring.com/">Nathan Smith</a>. | 
Read the <a href="http://sonspring.com/journal/hoverbox-image-gallery">Tutorial</a>
.</p>
</div>

</body>
</html>


Сохраните файл и обновите страницу. Она должна выглядеть как на рисунке 2.


Рисунок 2. Измененный вариант Hoverbox
We've left room for image details on the right

Замечание: Данная CSS не вполне идеальна. Моей целью было изменить ее наиболее простым и очевидным способом, а не потратить массу времени на детали. Но если у вас есть такое желание, то ради Бога!



В начало


Пользовательский интерфейс, тип 101: чтение слева направо

Возможно, вы не обратили внимание, но один очень важный выбор мы уже сделали, поместив галерею изображений в левой части страницы, оставив справа место для дополнительной информации. У нас было несколько вариантов:

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

Второй вариант совершенно неприемлем по одной простой причине: в западной цивилизации люди привыкли читать слева направо (см. рисунок 3). Это закладывается еще в раннем детстве, когда мамы и бабушки читают детям книги, указывая при этом на слова. Даже глаза привыкают двигаться слева направо (существует целое научное направление, называемое z-tracking, но его обсуждение выходит за рамки данной статьи). Поэтому нарушая данный принцип, вы заставляете пользователей бороться с привычками, которые вырабатывались десятилетиями. Таким образом, гораздо удобнее выбрать изображение слева, навести курсор мыши, а затем перевести взгляд направо, где появится дополнительная информация. Это естественный порядок действий, поэтому даже тем пользователям, которые не имеют опыта работы в Интернете, будет удобно пользоваться программой.


Рисунок 3. Естественный порядок чтения в виде буквы "Z": слева направо, а затем вниз
The human brain likes to move from left to right

Если же нарушить этот принцип, то вы заставите пользователей перемещать взгляд справа налево совершенно неестественным образом (см. рисунок 4). Они сначала будут рассматривать изображение справа, а затем поворачивать голову обратно налево, чтобы прочитать информацию. Насколько это важно? На первый взгляд не очень, и пользователи не будут жаловаться на это. Никто не придет и не скажет: “Боже мой, я терпеть не могу поворачивать голову справа налево!”. Однако, как показывают исследования, со временем появится некоторый дискомфорт. Поэтому лучше, чтобы пользователь чувствовал себя так, как будто читает книгу.


Рисунок 4. Принудительное чтение справа налево
Westerners do not like to read or travel their eyes from right to left

Третий вариант, который заключается в том, чтобы придумать новый, замысловатый тип интерфейса, при котором, например, информация появляется под изображениями или где-то посередине, раздвигая картинки, таит в себе определенную опасность. Вероятно пользователи, уверенно работающие с компьютерами и приложениями следующего поколения, будут чувствовать себя нормально. Однако менее опытные люди, например, родственники, которым компьютер нужен только для того, чтобы рассматривать ваши фотографии и платить по счетам, могут быть озадачены и даже раздражены подобными новинками. Им не хочется, чтобы объекты перемещались по экрану, мигали и вели себя любым неожиданным образом. Все, что им надо – это простой и понятный интерфейс, как будто они читают газету или книгу. Поэтому я рекомендую использовать естественный вариант интерфейса с перемещением слева направо. Поверьте, он себя оправдает.



В начало


Используйте тестовые данные

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

Проблемы с “встроенными” фрагментами HTML

Главной причиной подготовки тестовых данных на данном этапе создания приложения является то, что работать непосредственно с HTML в лучшем случае проблематично. Фрагменты HTML постоянно меняются, не говоря уже о множестве угловых скобок. Тем не менее, у вас есть опыт работы с HTML. Однако если поместить такие фрагменты в JavaScript и работать с ними через DOM, то вероятность появления ошибок, таких как неправильно местоположение элемента p или атрибута id, значительно возрастает. Подготовив тестовый фрагмент HTML, вы не будете испытывать подобные трудности и можете быть спокойны, что на странице он будет выглядеть именно так, как нужно.

Оформив тестовый фрагмент, вы можете легко поместить его куда угодно. Кроме того, вам не составит труда удалить из него данные и сосредоточиться на самой структуре, так как это именно то, с чем вам придется работать через интерфейс DOM.

Уменьшение размера шрифта сверху вниз

Фрагмент HTML будет содержать заголовок, дату и небольшое описание для каждой фотографии. Далее добавим элемент div с идентификатором “details” под div “images”, непосредственно перед нижней секцией страницы.


Листинг 3. HTML-код страницы
        

<a href="#"><img src="img/photo20.jpg" alt="description" />
<img src="img/photo20.jpg" alt="description" class="preview" /></a>
</li>
</ul>
</div>

<div id="details">
<h2 class="info-title">Sunrise over the bay</h2>
<h3 class="info-date">27 October, 2006</h3>
<p class="info-text">Here is what I experienced when 
I took this photo.</p>
</div>

<p id="footer"><a href="http://validator.w3.org/check/referer">XHTML</a> 
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=
http://host.sonspring.com/hoverbox/">508</a> | 
Hoverbox by <a href="http://sonspring.com/">Nathan Smith</a>. | 
Read the 
<a href="http://sonspring.com/journal/hoverbox-image-gallery">Tutorial</a>.</p>
</div>

</body>

Стили CSS для этих классов приведены в листинге 1. Загрузите страницу в браузер, чтобы убедиться, что она выглядит как на рисунке 5.


Рисунок 5. Описание для каждой фотографии
When you mouse over a photo, you get more information about that photo

Страница выглядит достаточно незамысловато, но содержит ряд важных моментов. Первый и главный из них – это то, что размер шрифта текста уменьшается сверху вниз. Это может показаться незначительной деталью, однако это существенно улучшает восприятие страницы (помните, мы обсуждали вопросы восприятия в начале этой статьи?). Данный принцип аналогичен чтению слева направо. Рисунок 6 иллюстрирует предпочтительное изменение размера шрифта при перемещении сверху вниз.


Рисунок 6. Размер шрифта должен уменьшаться сверху вниз
Headings start big and get smaller

Каким бы тривиальным этот принцип не выглядел, но он оказывает серьезное влияние на восприятие вашей страницы пользователями. В качестве примера, давайте увеличим размер шрифта в заголовке страницы и посмотрим, что будет. Измените стиль h1 в CSS следующим образом:

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 32px Georgia, serif;
        font-weight: bold;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

Несмотря на незначительные изменения в CSS, страница теперь выглядит по-другому (см. рисунок 7).


Рисунок 7. Увеличение размера шрифта заголовка
Now the text flows from large to small consistently

Будьте последовательны!

Главным недостатком данной версии страницы является несогласованность шрифтов. Заголовок написан шрифтом Georgia, в отличие от названия, даты и описания фотографий. В результате страница выглядит неприглядно. Однако, это несложно поправить, отредактировав следующие строки внизу файла CSS:

/* Стили для оформления описания --------------------*/
.info-title {
  font: Georgia;
  color: #933;
}

.info-date {
  font: 14px Georgia;
  color: #777;
}

.info-text {
  font: 10px Verdana, sans-serif;
  padding: 10px 0;
}

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

… во всем, кроме шрифта в блоках текста

Вы могли заметить, что тип шрифта в текстовых фрагментах для описания фотографий не совпадает с тем, что используется в остальных текстовых полях на странице. Шрифт в основных блоках текста часто отличается от заголовков, особенно если в последних используются шрифты типа serif, которые можно узнать по маленьким завиткам, как, например, в нижней части буквы “y”.

Шрифты типа serif выглядят привлекательно, но создают излишнюю нагрузку на глаза при использовании в крупных текстовых фрагментах. Поэтому большинство книг печатается при помощи шрифтов типа sans-serif, несмотря на популярность такого serif-шрифта, как Times New Roman. Более того, большинство издательств требуют от авторов преобразовывать их материалы в шрифты sans-serif перед сдачей в печать. Таким образом, вне зависимости от того, короткие у вас фрагменты текста или длинные – используйте шрифт типа sans-serif. В результате страница примет вид как на рисунке 8.


Рисунок 8. Текущий вариант интерфейса галереи изображений
Fonts are consistent, except for the sans-serif photo details

Добавим немного пространства...

Последний из замеченных мною недостатков интерфейса – это то, что верхняя часть страницы с фотографиями и заголовком выглядит несколько зажато. Однако это несложно поправить, добавив немного свободного пространства между заголовком и верхним рядом изображений.

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 32px Georgia, serif;
        font-weight: bold;
	margin: 0 0 20px;
	padding: 0 0 15px;
	text-align: center;
}

В итоге страница должны выглядеть как на рисунке 9:


Рисунок 9. Интерфейс после добавления свободного пространства в верхней части страницы
Now there's more space between the page heading and the gallery and image details

Все эти изменения настолько просты, что могут показаться несущественными и малозначительными. Тем не менее, не забывайте то, о чем мы говорили в начале статьи: пользователями ваших приложений будут обыкновенные люди. Их не интересуют технические изыски, скрытые в ваших приложениях. Наоборот, кропотливая работа со шрифтами, отступами, гарантирование согласованности всех элементов интерфейса – вот составляющие профессионально сделанных и удобных в использовании приложений.



В начало


А где же Ajax?

Вполне допускаю, что некоторые читатели недоумевают, при чем тут Ajax, где знакомые объекты XMLHttpRequest и вызовы send()? Не волнуйтесь, все это появится в следующей части. В этой статье нас больше интересовали вопросы создания удобного интерфейса, что требует от разработчика гораздо большего, чем просто владение JavaScript. В основном приходится заниматься подборкой правильных шрифтов, отступов и совершенствованием внешнего вида приложения в целом.

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

Подводя итоги, я советую вам потратить время, совершенствуя интерфейс вашего приложения. Убедитесь, что пользователи будут получать информацию слева направо, а не наоборот, а размер шрифта будет уменьшаться при перемещении сверху вниз. Позаботьтесь над тем, что было достаточно пространства между элементами, и чтобы в целом интерфейс выглядел опрятно. Это понравится вашим пользователям, а вы тем временем подготовитесь к следующей статье, в которой мы уделим программированию значительно большее время!




В начало


Загрузка

ОписаниеИмяРазмерМетод загрузки
Исходный код примеровwa-aj-frontend-startSamples.zip279KБHTTP
Исходный код примеровwa-aj-frontend-completeSamples.zip280KБHTTP
Информация о методах загрузки


Ресурсы

Научиться
  • Обратитесь к документации по Hoverbox, на основе которого созданы примеры к данной статье. (EN)

  • Посмотрите online-демонстрацию Hoverbox – так выглядело приложение до наших изменений. (EN)

  • Попробуйте применить методы, о которых рассказывалось выше, совместно с Lightbox – более совершенным JavaScript-инструментарием. (EN)

  • Большое количество материалов по Ajax можно найти в Wikipedia. (EN)

  • Обратитесь к разделу Web-разработки на сайте developerWorks, который содержит множество материалов на тему Web 2.0.(EN)

  • В центре материалов по Ajax на сайте developerWorks вы можете найти постоянно пополняемую библиотеку Ajax-содержимого, а также множестве полезных ресурсов, которые помогут вам начать создавать приложения Ajax прямо сегодня.


Получить продукты и технологии
  • Прочитав книгу "Быстрый штурм Ajax (Head Rush Ajax)" (Брэт Маклафлин, O'Reilly Media, Inc.), вы быстро усвоите принципы, о которых рассказывалось в этой статье (так называемый подход “Вперед с головой”). (EN)

  • В книге "Java™ и XML, второе издание" (Брэт Маклафлин, O'Reilly Media, Inc., 2001 г.) автор данной статьи обсуждает преобразования документов XHTML и XML. (EN)

  • "JavaScript: Полное руководство (The Definitive Guide) " (Дэвид Флэнаган, O'Reilly Media, Inc., 2001 г.): изучите подробную инструкцию о работе с JavaScript и динамическими Web-страницами. В следующем издании будут добавлены две статьи о Ajax. (EN)

  • "В первую очередь HTML с CSS и XHTML (Head First HTML with CSS & XHTML)" (Элизабет и Эрик Фриман, O'Reilly Media, Inc., 2005 г.): узнайте больше о стандартизированных HTML и XHTML, и о том, как применять CSS в HTML. (EN)


Обсудить


Об авторе

Бретт МакЛафлин (Brett McLaughlin) работает с компьютерами со времен Logo (помните маленький треугольник?). За последние несколько лет он стал одним из наиболее известных авторов и программистов сообщества по технологиям Java и XML. Он работал в Nextel Communications над реализацией сложных корпоративных систем, в Lutris Technologies - фактически над созданием серверов приложений, - а с недавнего времени - в O'Reilly Media, Inc., где продолжает писать и редактировать важные и содержательные книги. Его готовящаяся книга "Head Rush Ajax" продолжает отмеченный наградами инновационный подход "Вперед головой" применительно к изучению Ajax. Его недавняя книга Java 1.5 Tiger: Заметки разработчика является первой доступной книгой по новейшей версии технологии Java, а его классическая книга Java и XML остается одной из наиболее авторитетных работ по применению технологий XML в языке Java.




Выскажите мнение об этой странице


Пожалуйста, найдите минутку и заполните форму, чтобы повысить уровень сервиса.



 


 


 


Поделиться этой статьей:

забобрить забобрить memori сохранить в memori




В начало


IBM обладает всеми авторскими правами касательно информации, расположенной на developerWorks. Использование информации приведенной на этом ресурсе без явного письменного разрешения от IBM или первоначального автора запрещены. Если Вы желаете использовать информацию с developerWorks, пожалуйста воспользуйтесь регистрационной формой для того, чтобы связаться с нами запрос на использование материалов developerWorks Россия.
    IBM в России Конфиденциальность Контакты