Real Web 2.0: Букмарклеты - легко реализуемые встраиваемые Web-приложения

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

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

Уче Огбуйи (Uche Ogbuji), главный консультант, Fourthought

28.09.2007

Известным фактом является то, что Web 2.0 основывается не на новых захватывающих дух открытиях, а скорее на новых акцентах на старые Web-технологии. Одна из этих старых технологий, возродившихся в Web 2.0, - букмарклеты (bookmarklet). Букмарклет - это, по существу, Web-приложение, встроенное в обычную закладку браузера. Данная статья содержит полностью функционирующий букмарклет (а также инструкции по настройке), который можно использовать для выделения текста на любой Web-странице и поиска этого текста на IBM developerWorks.

В предыдущих выпусках данной рубрики я представил описания (с точек зрения пользователя и разработчика) важных сайтов Web 2.0, уделяя основное внимание функциональным возможностям совместного использования данных для совершенствования практического применения Web. Я в общих чертах рассмотрел del.icio.us, а затем Digg и Reddit. Теперь я вернусь немного назад и остановлюсь на некоторых аспектах этих сайтов. На огромном количестве подобных сайтов применяются общие инструментальные средства и технологии, пригодные как для пользователей, так и для разработчиков. В их состав входят и букмарклеты.

Закладки с секретом

Конечно, вам знакомы закладки, поскольку вы используете Web-браузеры. Но знаете ли вы, что закладка может быть чем-то большим, нежели просто статической ссылкой на другой сайт? Например, можно применить особую форму ссылки (поддерживаемую почти всеми видами Web-браузеров), используя URL-схему javascript: и помещая после нее один или более операторов ECMAScript (чаще называемого JavaScript). Так как при помощи ECMAScript выполняется широкое разнообразие операций, можно применить данный подход для разработки и настройки мощных инструментальных средств, не используя ничего сложнее закладок. Немногим более десяти лет назад (когда появилась технология Java™) был придуман термин "апплет", описывающий часть богатой функциональности, предоставляемой Java-кодом, выполняющимся в браузере. Вскоре появился термин "сервлет", описывающий такую же функциональность, обеспечиваемую на сервере. Аналогично, термин "букмарклет" предлагает расширенную функциональность, доступную в рамках закладки (или ссылки). Букмарклеты выполняются полностью в браузере, как, скажем, Java-апплеты. Они выполняются так, как будто непосредственно со страницей были загружены операторы сценария. Таким образом, букмарклеты являются мощным инструментальным средством для совершенствования практического применения Web и передачи в браузер некоторых серверных функций управления. Букмарклеты подходят для многих задач, в том числе:

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

Перечисленные задачи в основном покрывают потребности реальных сервисов Web 2.0, поэтому букмарклеты стали популярным способом использования функций браузера при взаимодействии с сайтами подобного рода. Например, существуют букмарклеты, предоставляющие страницы сайтам ссылок (link site) типа del.icio.us, Digg и Reddit. Если поместить такой букмарклет в панель закладок браузера в качестве кнопки, то можно будет, находясь на любой Web-странице, одним щелчком предоставить эту страницу сайту ссылок. Таким образом, использование букмарклетов увеличивает количество функциональных возможностей браузера при минимуме программирования или вообще без него, если кто-то уже написал букмарклет, подходящий под ваши требования.

Пример простейшего букмарклета

В этом простом примере представлена кнопка (букмарклет) "отправка на del.icio.us", размещение которой в панели закладок пользователя поощряется сайтом del.icio.us. Листинг 1 - это образец букмарклета с добавлением пробельных символов для форматирования.

                
 javascript:location.href =
 'http://del.icio.us/post?v=4;url='
 + encodeURIComponent(location.href)
 + ';title='
 + encodeURIComponent(document.title)

  

Реальный букмарклет - это содержимое листинга 1, записанное в одну строку (все пробельные символы удалены). В нем просто переназначается location.href, указывая браузеру загрузить новую страницу. Последние три строки создают новый URL согласно структуре сервиса del.icio.us, используя в качестве параметров запроса текущий адрес страницы и заголовок. Многие букмарклеты, вызывающие доступные через Web сервисы, так же просты, как этот, но лишь пока искомый сервис предлагает простые API, основанные на URL. В данном случае на del.icio.us при обращении к сервису используется "GET"-доступ путем нажатия на ссылку или ввода URL в адресной строке браузера. Иногда обращение возможно только при помощи "POST"-доступа путем отправки формы в браузере. Такие сервисы также можно вызвать при помощи букмарклетов, но сделать это значительно труднее. Обратите внимание, что листинг 1 демонстрирует, возможно, не лучшую практику кодирования, поскольку на del.icio.us должен был бы использоваться "POST". Причина этого проста - "GET" проектировался для случая, когда вызов URL, по существу, не изменяет состояние Web-ресурса. В нашем же случае состояние изменяется из-за добавления точки входа в базу данных del.icio.us. Web-эксперты в подобных случаях предпочитают использовать "POST".

В начало

Букмарклет поиска на IBM developerWorks

Следующий пример - это более сложный букмарклет, который я создал для обеспечения простого доступа к механизму поиска IBM developerWorks с любой страницы. Если, скажем, вы ищете что-либо на сайте технических новостей и сталкиваетесь с упоминанием о "Dojo", то, не будучи уверенным в значении этого термина, можете выделить его и вызвать данный букмарклет, чтобы получить исчерпывающую информацию о "Dojo" на IBM developerWorks. В листинге 2 приведен код букмарклета в удобном формате.

                
/* Получить строку запроса из выделенного текста */
/* Обеспечить кросс-браузерную совместимость */
q = '' + (
  window.getSelection ? window.getSelection() : document.getSelection
    ? document.getSelection() : document.selection.createRange().text
);
/* Если отсутствует выделенный текст, запросить у пользователя */
if (!q)
  q = prompt('Enter a search phrase on IBM developerWorks:', '');
if (q!=null){
  /* Создать основную строку для поиска на IBM developerWorks */
  dWsearch = 'http://www.ibm.com/developerworks/search/searchResults.jsp?'
+ 'searchType=1&'
+ 'searchSite=dW&'
+ 'searchScope=dW&'
+ 'Search.x=0&Search.y=0&'
+ 'Search=Search&';
  /* Избавиться от пробелов в строке запроса и перейти на созданную страницу */
  location.href = dWsearch + 'query=' + escape(q).replace(/ /g, '+');
}
void 0

ECMAScript-процедура, приведенная в листинге 2, - это уже не та единственная строка из листинга 1. Она станет букмарклетом, когда вы предварите ее выражением javascript: и удалите все символы перевода строки, а также прочие пробельные символы. Мне приходилось видеть букмарклеты в два раза длиннее приведенного в листинге 2, так что подобным образом можно решать сложные задачи программирования.

Поиск на developerWorks в действии

Полезно сделать чаще всего используемые букмарклеты доступными в браузере по одному щелчку мыши. В данном разделе показывается, как это осуществить в Mozilla Firefox, используя вариант букмарклета из листинга 2, который я встроил в данную ссылку: developerWorks search. В браузере Firefox щелкните правой кнопкой мыши на этой ссылке и выберите "Bookmark this link". Затем выберите "Bookmarks Toolbar" в качестве папки для создания закладки. Теперь в верхней части каждого окна браузера должна отображаться кнопка "developerWorks search". Если это не так, убедитесь что отмечен пункт "Bookmarks Toolbar" списка "Toolbars" из меню "View".

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

В начало

Заключение

Букмарклеты являются важным элементом Web 2.0 и иллюстрируют те свойства технологии Web 2.0, на которых я акцентирую внимание в выпусках данной рубрики: прозрачность и открытость. Я буду возвращаться к ним время от времени. А пока, если у вас есть хоть какой-то опыт работы с ECMAScript, можете использовать букмарклеты как прекрасный способ поэкспериментировать, разработать и развернуть расширения для Web-страниц. Если вы не являетесь разработчиком на ECMAScript, то вы все равно можете использовать множество букмарклетов, разработанных другими.

Ресурсы

• Оригинал статьи "Real Web 2.0: Quick and dirty Web applications with bookmarklets".
  
  
• Руководство "Пользовательские комментарии в Ajax (en)" Грега Тревиса содержит несколько доступных заметок о букмарклетах.
  
  
• Семинары и обучение на developerWorks Россия.
  
  
• Обогатите ваш опыт разработки сайтов при помощи статей и руководств в разделе SOA и Web-сервисы, а также выпусков данной рубрики.
  
  

• Многие букмарклеты, приведенные на классических сайтах Bookmarklets home page (en) и Jesse's Bookmarklets Site (en), выдержали испытание временем. А на Stephen Ostermiller (en) можно найти более свежую, хотя и не такую обширную, коллекцию.
  
  
• Букмарклет del.icio.us (en), обсуждаемый в данной статье.
  
  
• Загрузите пробные версии продуктов IBM (en).
  
  

• Примите участие в обсуждении материала на форуме.
  
  
• Подключайтесь к сообществу developerWorks (en).

Об авторе

		Уче Огбуйи (Uche Ogbuji) является консультантом и соучредителем корпорации Fourthought, которая занимается поставкой и консультационными услугами в области XML-решений для корпоративного управления знаниями. Корпорация Fourthought разрабатывает 4Suite, платформу с открытым исходным кодом для XML, RDF и приложений управления знаниями. Огбуйи также является ведущим разработчиком Versa - языка запросов RDF. Специалист по компьютерной технике и писатель, Огбуйи родился в Нигерии, в данной время проживает и работает в г. Боулдер, Колорадо, США. Связаться с ним можно по электронной почте uche@ogbuji.net.

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

Пожалуйста, найдите минутку и заполните форму, чтобы повысить уровень сервиса. Помогла ли данная информация достичь Вашей цели? Да Нет Не знаю   Пожалуйста, напишите комментарий, чтобы мы могли улучшить данную страницу:   Насколько полезна эта информация? (1 = Бесполезна, 5 = Очень полезна) 1 2 3 4 5

В начало