При первом входе в developerWorks для Вас будет создан профиль. Выберите информацию отображаемую в Вашем профиле — скрыть или отобразить поля можно в любой момент.

Вся введенная информация защищена.

При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Вся введенная информация защищена.

My developerWorks:

Сообщения:

Выйти

Выбрать язык:

Ajax и XML: Пять замечательных Ajax-виджетов

Усовершенствуйте свой сайт с помощью новых графических инструментов Ajax и XML

Джек Д Херрингтон, главный инженер-программист, Leverage Software Inc.

Джек Д. Херрингтон (Jack D. Herrington) - главный инженер-программист с более чем двадцатилетним опытом работы. Он автор трех книг: "Генерирование кода в действии", "Podcasting Hacks" и "PHP Hacks". Написал более 30 статей. Вы можете связаться с Джеком по адресу jherr@pobox.com.

Описание: Появление Web 2.0 повысило внимание к пользовательскому интерфейсу. В частности, разрабатываются новые способы взаимодействия с информацией и представления ее пользователям. Часто эти новые интерфейсы называются виджетами, и для связи с сервером в них используется язык Asynchronous JavaScript + XML (Ajax). В статье рассматриваются пять виджетов, которые вы можете использовать для повышения интерактивности вашего сайта.

Больше статей из этой серии

Пометить это!

Дата: 17.02.2009
Уровень сложности: средний
Активность: 5688 просмотров
Комментарии:

Революция Web 2.0 открыла новые и оригинальные способы взаимодействия с пользователями Web-сайтов. Многие из этих инновационных технологий заключаются в использовании графики и виджетов, получающих данные с сервера и отображающих их. Я покажу вам пять таких виджетов, как с открытыми исходными кодами, так и лицензионных, которые используют для общения с сервером Ajax и XML:

Карусель: это прокручивающийся виджет для просмотра рисунков. Пользователи пролистывают список элементов, представленных в виде маленьких картинок. Что произойдет, когда пользователь нажмет мышкой на элемент виджета – решать вам. Карусель можно увидеть вживую на сайте Flikr и в интерфейсе iTunes от Apple. Виджет "карусель" бесплатен, он основывается на JavaScript-оболочке jQuery.
SWF/Charts: этот элемент управления от Adobe основан на технологии Flash. Он читает находящийся на сервере файл XML, получая из него данные для диаграммы и настройки стилей, после чего отображает соответствующую диаграмму. Интерфейс настолько элегантен, а файл XML с данными создаётся настолько легко, добавление динамических графиков на сайт не составляет никакого труда.
SWF/Gauge: Этот виджет на Flash, родственный SWF/Gauge, используя находящийся на сервере XML, отображает полностью настраиваемый и видоизменяемый стрелочный индикатор. Индикатор может быть похож на автомобильный спидометр, авиационный прибор или что-либо еще более стильное. Выбирать вам.
Редактирование на месте: хотя окошко редактирования на месте – не совсем виджет, это интуитивный, интерактивный и простой путь получения информации от желающих её предоставить пользователей. Функциональность редактирования на месте опирается на оболочку Scriptaculous, основанную на библиотеке prototype.js.
Окна DHTML: механизм создания окон DHTML позволяет размещать немодальные плавающие окна поверх содержимого страницы. Пользователи могут их двигать, изменять размер и закрывать. Содержимое окон может быть как указано на странице посредством JavaScript, так и взято с сервера посредством Ajax. В такой тип окошек идеально помещать разные предупреждения или небольшие формы, для которых перезагрузка страницы не нужна.

Я начну с виджета SWF/Charts, поскольку считаю, что с ним работать проще всего. Ещё он даёт наибольшую отдачу.

Виджет SWF/Charts

Нельзя не согласиться со старой поговоркой - "Лучше один раз увидеть, чем сто раз услышать", особенно, когда речь идёт о графиках. Но создание графиков на страницах всегда было сложной задачей. Большинство Web-сред не имеет готовых инструментов для создания графиков, хотя в некоторых есть графические примитивы для создания картинок. В результате с графиками приходится маяться самому.

Правда, будет замечательно, если виджет будет сам отображать закодированные в XML данные? Такой виджет есть - это SWF/Charts. Чтобы установить его, я загрузил с сайта файлы SWF, которые виджет использует. Потом я установил файлы на свой сайт, и как показано в листинге 1, добавил на страницу ссылку на виджет.

Листинг 1. Chart_page.html

				
<html><body>

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" 
  width="400" height="250">
<param name="movie"
  value="charts.swf?xml_source=chart_data.xml&library_path=charts_library">

<embed
  src="charts.swf?xml_source=chart_data.xml&library_path=charts_library" 
  width="400" height="250" 
  type="application/x-shockwave-flash" 
  pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

</body></html>

Файлу Charts.swf передаются два параметра: каталог с его библиотеками и адрес данных в XML. Формат данных XML чрезвычайно прост. В листинге 2 показан простой пример.

Листинг 2. Chart_data.xml

				
<chart>
  <chart_type>bar</chart_type>
  <chart_data>
    <row>
      <null/>
      <string>2005</string>
      <string>2006</string>
    </row>
    <row>
      <string>Projected</string>
      <number>500</number>
      <number>700</number>
    </row>
    <row>
      <string>Actual</string>
      <number>600</number>
      <number>900</number>
    </row>
  </chart_data>
</chart>

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

Просматривая файл в браузере Firefox, я вижу показанный на рисунке 1 график.

Рисунок 1. Диаграмма в действии

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

Кроме того, файл graph_data.xml можно заменить динамической страницей: лишь бы формат данных был правильным. Это касается и остальных примеров из статьи. Фактически все примеры можно запускать в Web-браузере на локальных файлах без использования сервера (такого как Apache Tomcat или IBM® WebSphere® Application Server) и без использования языков интернет-программирования (например, PHP, Microsoft® ASP.NET, Java™ 2 Enterprise Edition [Java EE]).

В начало

Виджет SWF/Gauge

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

Однако если в Web-приложении нелегко создать диаграмму, то круговой индикатор – и подавно. Так что я опять обратился к создателям SWF/Charts, и что же вы думаете? Они предоставляют решение и для индикаторов: SWF/Gauge.

Я начну с показанной в листинге 3 страницы, на которой установлен виджет SWF/Gauge.

Листинг 3. Gauge_page.html

				
<html><body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/.../swflash.cab#version=6,0,0,0"
  width="110" height="55">
<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">
<embed src="gauge.swf?xml_source=gauge_data.xml"
  width="110" height="55" type="application/x-shockwave-flash"
  pluginspace="http://www.macromedia.com/go/getflashplayer">

</embed></object>

</body></html>

Файл gauge.swf принимает один аргумент: расположение данных. В данном случае они находятся в представленном в листинге 4 в файле gauge_data.xml.

Листинг 4. Gauge_data.xml

				
<gauge>

<circle fill_color="888888" start="275" fill_alpha="100"
  line_color="555555" line_thickness="3" line_alpha="90"
  radius="50" x="55" end="445" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="90"
  line_thickness="4" line_alpha="20" radius="45" x="55"
  end="440" y="55"/>
<circle fill_color="666666" start="317" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="322" y="55"/>
<circle fill_color="666666" start="337" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="342" y="55"/>
<circle fill_color="666666" start="357" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="362" y="55"/>
<circle fill_color="666666" start="377" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="382" y="55"/>
<circle fill_color="666666" start="397" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="402" y="55"/>
<circle fill_color="666666" start="417" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="422" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="100"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="FF4400" start="280" fill_alpha="100"
  radius="44" x="55" end="310" y="55"/>
<circle fill_color="44FF00" start="50" fill_alpha="100"
  radius="44" x="55" end="80" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="80"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="333333" start="270" fill_alpha="100"
  line_alpha="0" radius="20" x="55" end="450" y="55"/>

<rotate start="280" shake_span="2" shadow_alpha="15"
  step="1" x="55" span="0" y="55" shake_frequency="20">
  <rect fill_color="ffff00" fill_alpha="90" line_alpha="0"
    height="40" x="53" width="4" y="13"/>
</rotate>

<circle fill_color="111111" start="270" fill_alpha="100"
  line_thickness="5" line_alpha="50" radius="15" x="55"
  end="450" y="55"/>

</gauge>

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

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

Открывая страницу в браузере, я вижу то, что показано на рисунке 2.

Рисунок 2. Виджет Gauge в действии
Виджет Gauge в действии

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

В начало

Редактирование на месте

Пользователи привыкли использовать в программах редактирование на месте, однако в интернете эта возможность до сих пор встречалась редко. В Web 2.0 интерактивность играет ключевую роль, а потому и редактирование на месте начинает встречаться чаще.

Можно написать скрипт для редактирования на месте самостоятельно, а можно переложить тяжёлую работу на одну из оболочек JavaScript. Одна из наиболее популярных оболочек – это Scriptaculous, основанная на библиотеке prototype.js. С библиотекой Scriptaculous создание элемента для редактирования на месте становится простым делом.

Простенький файл HTML с редактированием на месте показан в листинге 5.

Листинг 5. Inplace.html

				
<html><head>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="controls.js"></script>
<script src="scriptaculous.js"></script>
</head><body>
<table width="100%">
<tr><th width="10%">Name</th>
<td width="90%"><p id="name">Candy bar</p></td>
</tr></table>
<script>
new Ajax.InPlaceEditor('name', 'submitted.html' );
</script>
</body>
</html>

В начале файла Inplace.html включены все необходимые исходные коды JavaScript. После этого я собрал простенькую таблицу с абзацем с редактируемыми данными. Затем в конец файла я вставил маленький скрипт, создающий для редактируемого абзаца объект InPlaceEditor.

В качестве аргументов конструктор InPlaceEditor принимает ID абзаца и адрес страницы, которой отправляется результат. В данном случае эта страница - submitted.html; однако на практике это будет страница ASP.NET, Java EE или PHP, или ещё какая-нибудь динамическая интернет-технология.

В листинге 6 показан простой файл submitted.html.

Листинг 6. Submitted.html

				
<p>Name changed!</p>

Перейдём к тестированию. Сначала я открываю в браузере мой файл HTML и вижу в нем исходный текст. При подведении курсора мыши текст выделяется желтым, что отображено на рисунке 3.

Рисунок 3. Начало редактирования на месте

Жёлтая подсветка – указание для пользователя, что, нажав на поле, его можно отредактировать. Я и нажимаю на кнопку, получая в ответ поле Name, а также кнопки ok и cancel, показанные на рисунке 4.

Рисунок 4. Редактирование текста после щелчка на нём

Изменив текст и нажав кнопку ok, я отправляю данные серверу (или как в данном случае, странице submitted.html). Сервер возвращает HTML-страницу, в которой замещается оригинальный текст. Я отправил значение Name changed! (как видно из рисунка 5); на практике это будет новое значение данных.

Рисунок 5. После нажатия кнопки "ок" содержимое изменяется

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

В начало

Окна DHTML

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

Однако, как я уже сказал, встроить в динамические страницы (DHTML) окна непросто. И я был счастлив, когда нашёл этот замечательный, основанный на библиотеке Protoype.js, интерфейс для построения окон. Он не только прост в использовании, но ещё и работает в любом браузере. В листинге 7 показана страница window.html.

Листинг 7. Window.html

				
<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="prototype.js"></script>
<script src="window.js"></script>
</head>
<body>
<script>
var win = new Window( 'myPopup', {
   title: "Terms and Conditions",
   top:70, left:100, width:300, height:200,
   resizable: true, url: "terms.html",
   showEffectOptions: { duration: 3 }
  } 
);
win.show();
</script>
</body>
</html>

Сначала я вставил в заголовок исходные коды prototype.js и window.js. Потом, указав такие нужные мне параметры, как размер, местоположение, заголовок и адрес страницы, с которой виджету предстоит брать необходимые мне данные, я создал всплывающий объект. Впрочем, загружать содержимое на страницу можно не только посредством Ajax; его можно указывать динамически кодом JavaScript или взять из существующего на странице тега <div>.

В данном случае я ссылаюсь на показанный в листинге 8 файл terms.html.

Листинг 8. Terms.html

				
<html><body bgcolor="white">
<h1>Terms and Conditions</h1>
<p>In order to use this site you must comply
with the following conditions...</p>
</body></html>

Запуская страницу в своём браузере, я вижу окно, показанное на рисунке 6.

Рисунок 6. Исходное окно

Нет, это не два расположенных одно на другом макинтошевских окна. Это похожее на макинтошевское фальшивое окно DHTML, расположенное в настоящем окне браузера Firefox. Но выглядит оно вполне настоящим.

Как видно из рисунка 7, я могу растягивать окошко, и двигать его.

Рисунок 7. Окошко после перемещения и изменения размера

Для написания данной статьи и своей работы я изучил несколько библиотек DHTML, позволяющих создавать окна, и эта мне понравилась больше всех. Другие окна плохо или не полностью отображались браузерами либо же плохо себя вели при изменении размеров. А это похоже на настоящее окно, только ограниченное рамками браузера.

В начало

Виджет-карусель

Любой занимавшейся проработкой пользовательских интерфейсов, скажет вам, что экранное пространство чрезвычайно важно. Нужно уметь вставить в данное пространство кучу данных, причём так, чтобы они не казались сжатыми. И я был очень впечатлён, когда впервые увидел карусель в Apple iTunes

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

Экономия пространства очень значительна: 30 обложек альбомов помещаются на месте трех, и при этом они сохраняют приличные размеры. Управление этим элементом интуитивно понятно, он похож на упрощённую полосу прокрутки.

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

На странице из листинга 9 я установил простенькую карусель.

Листинг 9. Carousel.html

				
<html>
<head>
<script type="text/javascript" src="js/jquery-1.0.3.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<style type="text/css">
#mycarousel { display: none; }
.jcarousel-scope {  position: relative; width: 255px;
  -moz-border-radius: 10px; background: #D4D0C8;
  border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
  margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block;  outline: none;
  border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next {  position: absolute; top: 45px;
  right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
  left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
  right: 0px; display: none; }
</style>
<script type="text/javascript">
function loadItemHandler( carousel, start, last, available ) {
  if (available) { carousel.loaded(); return; }
  var cr = carousel;
  jQuery.get("data.xml", function(data) { appendItemCallback(cr, start, last, data); });
};

function appendItemCallback( carousel, start, last, data ) {
  var items = data.match( /(\<img .*?\>)/g );

  for (i = start; i <= last; i++) {
    if ( items[ i - 1 ] == undefined ) break;
    var item = carousel.add( i, getItemHTML( items[i-1]) );
    item.each(function() {
      jQuery("a.thickbox", this).click(function() {
        var t = this.title || this.name || null;
        var g = this.rel || false;
        TB_show(t,this.href,g);
        this.blur();
        return false;
      });
    });
  }
  carousel.loaded();
};

function getItemHTML( item ) {
  var found = item.match( /href=\"(.*?)\"/ );
  var url   = jQuery.trim(found[1]);
  var title = jQuery.trim(found[1]);
  var url_m = url.replace(/_s.jpg/g, '_m.jpg');
  return '<a href="' + url_m +
	'" title="' + title +
	'" class="thickbox"><img src="' + url +
	'" width="' + 75 + '" height="' + 75 +
	'" alt="' + title + '" /></a>';
};

var nextOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };

var nextOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };

var nextDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };

function nextButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/next.gif")
      .mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")
      .unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);
  }
}

var prevOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };

var prevOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };

var prevDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };

function prevButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")
      .mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")
      .unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
  }
}

jQuery(document).ready(function() {
  jQuery().ajaxStart(function() { jQuery(".loading").show(); });
  jQuery().ajaxStop(function() { jQuery(".loading").hide(); });
  jQuery("#mycarousel").jcarousel({
    itemVisible: 3, itemScroll: 2, wrap: true,
    loadItemHandler: loadItemHandler,
    nextButtonStateHandler: nextButtonStateHandler,
    prevButtonStateHandler: prevButtonStateHandler
  });
});
</script></head><body><div id="mycarousel">
<div class="loading">
<img src="img/loading.gif" width="16" height="16" border="0" />Loading...</div>
<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-prev" />
<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-next" />
<ul></ul>
</div></body></html>

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

Данные для карусели показаны в листинге 10.

Листинг 10. Data.xml

				
<images>
<img href="pics/image1.jpg" />
<img href="pics/image2.jpg" />
<img href="pics/image3.jpg" />
<img href="pics/image4.jpg" />
</images>

Это обычный файл в формате XML с тегом <images> и набором тегов <img>, в которых хранятся адреса рисунков. Поскольку этот виджет не встроен в Ajax, вы можете использовать тот формат, который вам больше нравится. Я написал код, интерпретирующий XML и создающий все прокручивающиеся элементы. Результат – на рисунке 8.

Рисунок 8. Карусель на странице

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

В начало

Заключение

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

Кроме редакторов WYSIWYG вы можете найти решения для создания индикаторов выполнения, диалоговых окон с закладками, элементов управления с множеством панелей, часов, приёмников данных, интерпретаторов RSS и Outline Processor Markup Language (OPML) – и даже интерактивных терминальных окон. Само собой, прежде чем начинать создавать собственные элементы на DHTML или Flash, стоит посмотреть на то, что есть в Интернете (зачастую - бесплатно). Располагая такими виджетами, вы ценой совсем небольших усилий можете значительно повысить интерактивность своего сайта.

Ресурсы

Научиться

Оригинал статьи "Ajax and XML: Five cool Ajax widgets" (EN).
Раздел developerWorks XML: подробная информация об XML.
jQuery и prototype.js: обратите внимание на эти популярные оболочки JavaScript.(EN)
Сертификация в области IBM XML: узнайте, как стать сертифицированным разработчиком XML и смежных технологий. (EN)
Техническая библиотека XML: в разделе XML developerWorks вы найдёте немало технических статей, советов, руководств, стандартов и IBM Redbooks.
Технические трансляции developerWorks: будьте в курсе новых технологий.
Ajaxian: этот великолепный ресурс поможет вам с разработками на Ajax и с использованием его новейших виджетов. (EN)

Получить продукты и технологии

JCarousel: взгляните на карусель, созданную на оболочке jQuery.(EN)
SWF/Gauge и SWF/Charts: загрузите виджеты SWF/Gauge и SWF/Charts, разработанные maani.us. Здесь же вы найдёте разработанный на Flash виджет XML Слайдшоу.(EN)
Окна DHTML: поэкспериментируйте с лучшим из найденных мною пакетов для создания окон DHTML.(EN)
Scriptaculous: загрузите библиотеку Scriptaculous и узнайте о ней подробнее на сайте script.aculo.us site. (EN)

Обсудить