Пожалуйста, заполните ваше имя Ваше имя:
Нужен ваш телефон Ваш email или телефон:
Введите текст задания Ваше задание на сайт:

Galleo (главная страница) :: Статьи :: WEB-приложения, ВЕБ-приложения , Web-application :: Букмарклеты - легко реализуемые встраиваемые Web-приложения

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

  

Увеличить шрифт  Уменьшить шрифт

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

Конечно, вам знакомы закладки, поскольку вы используете 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 - это образец букмарклета с добавлением пробельных символов для форматирования.


Листинг 1. Букмарклет для отправки сообщений на del.icio.us
                
 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 приведен код букмарклета в удобном формате.


Листинг 2. Букмарклет "поиск на developerWorks" в удобном формате
                
/* Получить строку запроса из выделенного текста */
/* Обеспечить кросс-браузерную совместимость */
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 - это скриншот с подсказкой. Левее диалогового окна подсказки в инструментальной панели можно увидеть данный букмарклет, а также вход в панель, в которой я размещаю другие часто используемые букмарклеты.


Рисунок 1. Букмарклет поиска на developerWorks в действии
Рисунок 1. Букмарклет поиска на developerWorks в действии 

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


http://www.ibm.com
Добавить в закладки: 

Классификация веб-приложений по виду используемых при их создании компонентных мКлассификация веб-приложений по виду используемых при их создании компонентных м
Под «веб-приложениями» практически всегда понимаются серверные приложения — просто в силу того, что в качестве клиента о... Читать дальше...
Модернизация Web-приложений с использованием новых технологийМодернизация Web-приложений с использованием новых технологий
Для поддержания успешной деятельности компании часто внедряют преимущества новых и развивающихся технологий в свои основ... Читать дальше...
Технологии, применяемые в Web-приложенияхТехнологии, применяемые в Web-приложениях
Одним из направлений развития Web-приложений стало размещение некоторой части логики приложения (такой как проверка корр... Читать дальше...
Web-приложение как программа автоматизации турагентстваWeb-приложение как программа автоматизации турагентства
Все мы ежедневно используем интернет (и для работы в том числе), и каждый из нас посещал множество web-сайтов. Очень час... Читать дальше...
Скупка картриджей как сервис для системных администраторов

Скупка картриджей как сервис для системных администраторов
... Читать дальше...
Сделать сайт самостоятельно или заказать готовый?

Сделать сайт самостоятельно или заказать готовый?
... Читать дальше...
Федор Иванович Лидваль. Часть 7

Федор Иванович Лидваль. Часть 7
... Читать дальше...
Ваш комментарий к данной статье:
Жирный шрифт Курсив Подчеркнуть Выровнять влево Выровнять по центру Выровнять вправо Выровнять по ширине Вырезать Копировать Вставить Отменить Повторить Список Нумерованный список Верхний индекс Нижний индекс Вставить ссылку  Цвет:
Инфо от наших друзей:




Наши партнёры: