Подключить необходимую библиотеку можно двумя способами. Первый — тривиальный, с помощью HTML-элемента script.

<script src="http://ajax.googleapis.com/
    ajax/libs/prototype/1.6.0.2/prototype.js"></script>

Как не сложно догадаться, вместо prototype/1.6.0.2 можно указать название любого другого фреймворка и его версии.

Второй способ более гибок. С помощью специального JS-метода google.load() можно задавать версию библиотеки не точно, а по первым цифрам.

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6");
// …
</script>

Заданное в примере значение «1.6» означает то, что будет автоматически выбрана самая свежая версия prototype в ветке 1.6. Таким образом, AJAX Libraries API может обеспечить автообновление JS-библиотек без каких-либо изменений в вызывающем скрипте (естветсственно, такое обновление ограничивается пределами нужной ветки).

К основным плюсам использования AL API можно отнести следующие:

• Хранение скриптов на Google в некоторой степени снижает нагрузку на собственный веб-сервер.
• Скорость загрузки страниц увеличивается, благодаря переносу части запросов на другой хост и поддержке gz-сжатия.
• При массовом использовании централизованно-хранимых фреймворков, кэш браузеров используется эффективнее. Файл, загруженный для одного веб-приложения, может быть повторно использован при работе с другим, использующим тот же фреймворк. Пока это лишь потенциальный бенефит сервиса, но, тем не менее, приятный.
• Кроме того, благодаря Google можно облегчать дистрибутивы веб-приложений, использующих JS-фреймворки.

Ссылки по теме

• Официальный анонс AJAX Search API.
• Подробное описание метода google.load().
• Developer’s Guide, содержащий список поддерживаемых фреймворков с номерами версий.
• Announcing AJAX Libraries API: Speed up your Ajax apps with Google’s infrastructure @ ajaxian.com

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

Скриншот с форума, на котором окно орфуса появилось за пределами видимой области страницы

Глюк описан на форуме и, по всей видимости, происходит не всегда, а только при наличии каких-то особенностей в коде страницы. Готового решения там я не нашел, поэтому пришлось ковырять код самому (при всей моей нелюбви к JavaScript).

По ходу дела выяснилось, что Орфус — совсем даже не опен сорс и его код обфусцирован до почти полной нечитаемости. В результате, вместо того чтобы все по-человечески исправить, моего терпения хватило только на quick and dirty patch: добавил в начало две функции для правильного определения координат и использовал их при позиционировании.

На мой взгляд, если уж с позиционированием div возникают такие сложности, более простым и переносимым решением было бы использование popup окон браузера — так ведь тоже можно отправлять сообщения об ошибках без перезугрузки страницы.

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

Ссылки по теме

• Грамотность on-line, или Использование системы Orphus — статья про Орфус в «Куроводстве» Дмитрия Котерова.
• Cross Browser Window Size And Centering — две неплохие функции на JavaScript, одна из которых определяет размеры окна, а другая — находит координаты центра. Работают вроде бы во всех актуальных версиях главных браузеров.

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

Описанные выше доводы, по всей видимости, стали одной из причин реализации photoshop-style color picker для веб-приложений. И не просто какой-то отдельно взятой реализации, а целой толпы JavaScript-аналогов.

Один из хороших примеров CP сделан на основе уже упоминавшейся раньше библиотеки Mootools. Окошко с палитрой появляется прямо внутри страницы:

На странице проекта продемонстрированы разные варианты внедрения color picker-а. Например, еще есть вот такой миниатюрный:

Вариант на базе Mootools ине понравился больше других, но если кому-то противит использование JS-фреймворков (по религиозным причинам или по причине 90 килобайт, на которые несжатый MT утяжеляет первую загрузку), можно отдать предпочтение «независимому» скрипту.

Один из них отличается тем, что появляется в виде отдельного popup окна и имеет дополнительную возможность ограничения выбора только из палитры безопасных цветов:

А другой — тем, что дружит не только с цветовой моделью RGB, но и HSB:

Ссылки по теме

• «How to Create a Color Picker in JavaScript» by Mark Kahn — большое и подробное описание того, как написать color picker самостоятельно.
• Mootools — упомянутый выше фреймворк Mootools, предназначение которого отнюдь не ограничено описанным в данной заметке применением.
• Yahoo! UI Library: Color Picker Control — еще одно заслуживающее и внимание решение с поддержкой RGB и HSV.

PS: А вы знаете, что Миша Квакин бесплатно рисует всем желающим прикольные оранжевые иконы для RSS-фидов? RSS-кружка, в левом верхнем углу этой страницы — его творчество (она видна, если вы читаете заметку на сайте, а не в каком-нибудь Гуглридере). И если он нарисует для меня за этот анонс что-то совсем бесподобно-потярсающее, буду ему премного благодарен. Кстати, да, это был неприкрытый PR.

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

Раньше я решал этот вопрос с помощью JavaScript: небольшая функция автоматически корректировала ширину «резиновых» контейнеров при изменении размера окна браузера. Вчера был найден довольно более красивый способ заставить IE ограничивать масштабируемые блоки. Тоже на основе JS.

В имлементации CSS IE есть своя-собственная конструкция — expression, чье значение может вычисляться с помощью client-side скрипта. Например, так:

div {
   width: expression(750 + "px");
}

Что эквивалентно:

div {
   width: 750px;
}

Используя expression в сочетании со стандартными свойствами CSS, можно добиться необходимого эффекта в отношении масштабируемых блоков:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Limiting width</title>
<style type="text/css">
div#cont { 
// min-width и max-width для IE
   width:expression(document.body.clientWidth > 776 ? 
      "777px" : (document.body.clientWidth < 334 ? "333px" : "auto"));
// то же, для всех остальных
   max-width: 777px;
   min-width: 333px;

   height:320px;
   text-align:center;
   color:black;
   background:#f5f5f5;
}
</style>
</head>

<body>

<div id="cont">Hello World!</div>

</body>
</html>

Файл лежит здесь: http://things.paradigm.ru/limited-width.html. Я проверил работоспособность этого кода в IE 5.55, 6, 7, Firefox и Opera. Теоретически, должно работать и в IE 5.01, т.к. expression появился именно в ней, но проверить не начем — эта версия на моем компьютере почему-то не уживается с пятью другими инсталяциями IE (:

Точно таким же образом, как и ширину, можно контролировать высоту блоков. Разница в том, что вместо параметра document.body.clientWidth, потребуется использовать this.scrollHeight, а изменять, вместо width, CSS свойство height.

Основано на материалах perishablepress.com.

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

В блоге Perishable Press я нашел два способа реализации предзагрузки, чье описание со своими изменениями и комментариями привожу ниже.

Предзагрузка веб-графики с помощью CSS

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

CSS:

img.preload { display: none; }

(X)HTML:

<img src="image1.jpg" alt="" class="preload" />
<img src="image2.jpg" alt="" class="preload" />
<img src="image3.jpg" alt="" class="preload" />
<img src="image4.jpg" alt="" class="preload" />

Обратите внимание на набор атрибутов img: width и height отсутствуют, т.к. в отличии от обычной вставк графики, в данном случае нет смысла задавать размеры. Картинки все равно не будут отображены, поэтому и опциональные атрибуты можно отбросить. Обязательному атрибуту alt задано пустое значение, т.к. функциональной нагрузки он не несёт и никакой текстовой замены для него предусматривать не нужно.

Теги размещаются в самом конце кода страницы, непосредственно перед . Это вынудит браузер загрузить вначале содержательную часть веб-документа, а предзагрузку дополнительной графики оставить «на постом». Благодаря этому, скорость отображения страницы не пострадает, увеличится только время первой загрузки.

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

Альтернативный способ основан на JavaScrpt. Он тоже достаточно прост, и при том никак не повредит внешнему виду сайта, даже если у пользователя по какой-то причине отключен JS (правда, в таком предзагрузка не произойдет вообще).

Код приведенного ниже скрипта можно вставить в любую часть страницы, например в контейнер head.

<script type="text/javascript">
if (document.images) {


img1 = new Image();
   img2 = new Image();
   img1.src = "/img/image01.gif";
   img2.src = "/img/image02.gif";

}
</script>

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

Ссылки по теме:

• Оригинальная статья на Perishable Press
• Rollover @ Wikipedia