—»     —»   Секрет силы букмарклетов (закладурок)
  Раздел: Разное   Комментариев: 1  

Секрет силы букмарклетов (закладурок)

Букмарклеты (или в российском сообществе всё чаще говорят: «закладурки») представляют собой специальные ссылки, которые пользователи могут добавить в закладки браузера.

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

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

С помощью букмарклетов у вас есть возможность адаптировать любую веб-страницу под ваши нужды.

Как работают букмарклеты

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

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

По возвращении на страницу, пользователь должен снова кликнуть по ссылке для активизации букмарклета.

Пример букмарклета

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

Секрет силы букмарклетов (закладурок)

Когда вы кликаете по букмарклету bit.ly, на текущей странице загружается панель. Учтите, что это не новое окно в браузере, а код, который применим к текущей открытой странице. Такие букмарклеты позволяют разработчикам внести больший функционал своего веб-сайта в любые страницы в сети.

5 полезных букмарклетов, с которых можно начать

Bit.ly

Здесь сразу стоит выделить возможность вам быстро укоротить ссылку, и поделиться ей. С помощью букмарклета Bit.ly, вместо копирования URL-адреса и его публикации, вы можете просто кликнуть для генерации укороченной версии ссылки. У вас также есть возможность отслеживать, как часто эту ссылку используют. Здесь удобно не только это. Учтите ещё тот факт, что короткая ссылка не будет преломляться, скажем, в электронном письме, так как длинные ссылки там зачастую обрезаются.

Shortwave

Разработчики часто предпочитают упаковать множество разных функций в один маленький букмарклет. Например, посмотрите на вариант Shortwave от Шона Инмана (Shaun Inman). Этот мощный ярлык содержит в себе огромное число функций поиска. Вы можете осуществлять поиск по Google, Amazon, Netflix и догружать результаты со множества других ресурсов. Единственная сложность заключается в том, что вам нужно запоминать команды, чтобы работать с этим сервисом. Но если начнете пользоваться, то быстро привыкнете.

Секрет силы букмарклетов (закладурок)

ReCCS

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

autoPopulate

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

Секрет силы букмарклетов (закладурок)

Instapaper

Instapaper представляет собой целый сервис по обработке букмарклетов. Удобный инструмент сохраняет страницы, которые вы хотели бы прочесть позже. Он также удобно синхронизирует закладки с iPhone, iPad и Kindle, что позволяет вам мгновенно вернуться на место, где вы прервали чтение.

Секрет силы букмарклетов (закладурок)

Идеальная структура для букмарклетов

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

Для того чтобы подготовить вашу закладку, просто создайте ссылку, которая будет подгружать все ресурсы с вашего сервера на страницу. Это включает в себя добавления на страницу файлов javascript и css, а затем запуск основного кода javascript для запуска функций.

Последующий код javascript прикрепляет определенный файл JS к странице:

new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?';
document.getElementsByTagName('head')[0].appendChild(new_script);

Шаблон создания букмарклетов

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

Шаблон 1: кэширование

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

javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?';
document.getElementsByTagName('head')[0].appendChild(new_script);
})();

Шаблон 2: кэширование отключено

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

javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?x=' +(Math.random());
document.getElementsByTagName('head')[0].appendChild(new_script);
})();

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

Также учтите, что эти функции находятся в оболочке javascript, которая определяет его как код javascript.

Как применить шаблоны?

Если вы хотите воспользоваться этими двумя шаблонами, то это можно сделать следующим образом: для начала замените URL в коде на полный путь до файла javascript, который размещён на сервере. А затем разместите код выше тэга ссылки, которая может быть добавлена на страницу. Это та ссылка, которую пользователи будут вписывать в закладки.

Должно получиться нечто вроде этого:

<a href="javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?x=' +(Math.random());
document.getElementsByTagName('head')[0].appendChild(new_script);})();">Sample bookmarklet </a>

Учтите, что весь код javascript должен быть сжат в одну строку. Это сжатие может доставить хлопот, поэтому мы предпочитаем использовать этот удобный генератор букмарклетов.

Секрет силы букмарклетов (закладурок)

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

Не забудьте про кэширование!

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

Предупреждение об «исходном коде»

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

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

Дополнительные ресурсы по разработке букмарклетов

* Вышеприведенные шаблоны основаны на обучающих статьях с сайта BetterExplained.
* Marklets представляет собой отличные залежи информации о букмарклетах.
* Здесь также имеется руководство по разработке букмарклетов, основанных на jQuery.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, генераторы
Опубликовал Mysterious Master   Прочитано (раз): 9348   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 июля 2011 @ 15:25
Написал: Chathymaf — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Завбавная ситуация
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2020    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031