Букмарклеты. Черствый
За последний год можно наблюдать необычайный рост популярности социальных закладок. Что же это такое — социальные закладки, для чего они нужны? Давайте попробуем разобраться. Закладки на вашем компьютере служат для хранения ссылок на страницы, которые вы регулярно посещаете или хотели бы посетить позже. А социальные закладки хранятся не на жёстком диске компьютера, а на сервере в сети интернета.
Всю эту работу по хранению ваших ссылок в интернете осуществляют сервисы социальных закладок . Они выполняют много достаточно много полезных для пользователя функций. С помощью этих сервисов можно:
Хранить закладки в интернете . Это дает вам возможность получить доступ к своей коллекции закладок с любого компьютера, где бы вы не находились.
Делиться и обмениваться закладками . Вам достаточно будет дать друзьям ссылку на страничку в социальном сервисе и ваши (не закрытые вами от посторонних глаз) закладки, расскажут за вас о ваших интересах и любимых сайтах.
Находить новые интересные сайты и единомышленников . Если человек сохранил ту же самую линку, что что и вы, может это говорит об общности интересов? Возможно, просмотр других закладок принесет вам другие находки.
Систематизировать закладки с помощью тэгов . Вы просто присваиваете каждой закладке несколько ключевых слов или фраз, которые наиболее точно описывают ее. Поэтому вы легко и быстро можете найти любую ссылку в вашей коллекции.
Для того, чтобы добавить социальную закладку, надо быть зарегистрированным в каком-либо из сервисов. Ниже я собрала список из 20 самых популярных сервисов. Потом заполняете несложную форму, где вы указываете урл странички, которая вам понравилась, заголовок, краткое описание и присваиваете теги. Все просто — ваша закладка готова.
4. Mister-wong.ru
7. Google.com/bookmarks
9. Myscoop.ru — Сервис прекратил существование
13. Myelect.ru — Сервис прекратил существование
14. Ru-marks.net — Сервис прекратил существование
Объект Word.Bookmark, применение закладок в шаблоне, получение из объектов Bookmark объектов Selection и Range
Объект Bookmark - это просто закладка. На практике это - самый удобный способ навигации по документам, созданных при помощи шаблонов (например, отчетов). Принципиальное отличие его от объектов Selection и Range заключается в том, что все выделения и диапазоны теряются при закрытии документа (объекты Range вообще существуют только во время работы создавшей их процедуры, а закладки сохраняются вместе с документом. Если документ создан на основе шаблона, то все закладки, которые были определены в шаблоне, будут определены и в созданном на основе этого шаблона документе.
Создать закладку (меню Вставка -> Закладка ) намного проще, чем считать количество символов для объекта Range от начала документа/абзаца/предложения, или выполнять операции Move() (MoveDown(), MoveRight(), MoveNext()) для объекта Selection. Кроме того, если вы будете исправлять шаблон (а делать это на практике приходится очень часто), вам, скорее всего, не придется править код для определения объектов Selection и Range.
Функциональность объекта Bookmark невелика. Свойств и методов у этого объекта намного меньше, чем у объектов Selection и Range. Однако обычно никто и пытается использовать объект Bookmark для работы с текстом напрямую. Из объекта Bookmark очень просто получить объект Selection (при помощи метода Select()) или объект Range (при помощи свойства Range()) - и дальше можно пользоваться уже свойствами и методами этих объектов, например:
ThisDocument.Bookmarks("Bookmark1").Select
MsgBox Selection.Text
Создавать объекты Bookmark программным способом необязательно, но если есть необходимость, то можно использовать метод Add() коллекции Bookmark:
ThisDocument.Bookmarks.Add Name:="temp", Range:=Selection.Range
У этого метода - всего лишь два параметра, оба которых используются в примере.
Некоторые важные свойства объекта Bookmark:
- Empty - если это свойство возвращает True, то это значит, что закладка указывает на точку вставки, а не та текст;
- Name - имя закладки. Очень удобно, что найти нужную закладку в коллекции закладок можно не только при помощи индекса (номера) закладки, но и по ее имени.
- Range - возвращает объект Range на месте этой закладки.
- Start , End , StoryType - аналогично таким же свойствам у объекта Selection.
Методов у объекта Bookmark всего три - Copy(), Delete() и Select(). Copy() - создает закладку на основе существующей, Delete() - удаляет ее, а Select() - выделяет то, на что ссылается закладка.
Всем привет, сегодня речь пойдет про использование букмарклета, или закладки для браузера.
Кто не знает, это такая штука, которую можно добавить в закладки (да, я сегодня дебютирую в роли Капитана Очевидность:) и, при нажатии на нее, произвести какой-нибудь эффект.
Примером может служить герой сегодняшней заметки, который расположен по адресу http://ulizko. com/demo/allthat/ . Инструкция по применению:
Появится окошко, в которое можно ввести данные. Вообще, предполагается, что это будет интерфейс добавления желаний в вишлисты (предварительно созданные на каком-то сайте), настроить триггеры оповещений, и прочее. Есть даже какая-то валидация начального уровня. И налажен обмен данными с сервером - то есть, на любом домене к вам приходит список ваших вишлистов, а ваше новое желание с любого домена долетит на крыльях любви к вишлисту и уютно устроится в его объятьях .
Но. Мы сегодня не об этом, а о том, как делать такие штуки в принципе.
Прежде чем перейти непосредственно к разбору кода, хотелось бы ответить на вопрос (который мне никто не задавал:), а именно, "Какие возможности дает букмарклет?". Правильный ответ - любые. Так как мы получаем возможность подгрузить любой скрипт, мы можем сделать с клиентской страничкой все, что угодно. Например - сделать «выносной» виджет, в котором на любой страничке можно будет добавить запись в блокнот или таскменджер. Или вообще сделать весь таскменеджер выносным. Что тоже важно, они будут работать практически везде - это не плагины к firefoxу и не виджеты к opera. Букмарклетам не важно (ну, почти:), какая у вас ОС или браузер. В общем, есть простор для фантазии.
Итак, как же делать эти самые букмарклеты?
Очень просто: надо создать на страничке элемент anchor с атрибутом href, содержащим javascript-код. Если перевести на русский, то надо сделать вот такую ссылку, адрес которой, по большому счету, и будет букмарклетом:
Для того, чтобы javascript код в адресе ссылки заработал, надо добавит перед ним слово javascript: . Если мне не изменяет мой склероз, это называется «указание псевдопротокола javascript». Еще одна важная деталь - если ваш код вернет какое-то значение, то браузер воспримет его в качестве адреса, по которому нужно перейти, и уйдет с текущей страницы. Чтобы избежать этого, не возвращайте значения, то есть допишите в конец скрипта void 0; , либо оберните весь код в анонимную функцию, невозвращающую значения - (function(){... ваш код мог бы быть здесь...})() .
В любом случае, все эти вопросы подробно рассмотрены у Ильи Кантора в его заметке Букмарклеты и правила их написания , к которой я вас и отсылаю за подробностями.
Единственную вещь, которую нам еще нужно знать - это то, что все браузеры ограничивают максимальную длину кода букмарклета. И, подобно тому, как скорость каравана равна скорости самого медленного верблюда, так и максимальный размер кроссбраузерного букмарклета равен ограничению, наложенному IE 6 SP2, то есть, 488 символам.
Таким образом, вряд ли мы сможем закодить какую-то комплексную логику в неполных пятистах символах, так что чаще всего букмарклеты просто создают новый тэг script, в который уже сгружают код приложения.
Так поступил и я. Вот код моего букмарклета в человекоадаптированном виде:
(function () {// создаем новую внутреннюю переменную a (лучше в данном случае использовать короткие идентификаторы)
// и сразу же добавляем свой объект в глобальный объект window, и записываем в него данные, которые уникальны
// для каждого пользователя (ведь они сгенерированы сервером для пользователя перед тем, как он добавил этот букмарклет к себе)
var a = window.allThat = {
userId: "123345456" ,
server: "http://mysite.com/" ,
script: document .createElement("script" ), // создадим и запомним тэг скрипт,
// который сгрузит нам код нашего приложения - мы его потом удалим, если пользователь нажмет кнопку "закрыть"
css: document .createElement("link" ) // аналогично
},
/* динамически создаем и добавляем в DOM элементы: */
h = document .getElementsByTagName("head" );
a.css.rel = "stylesheet" ;
a.css.href = a.server + "css/bookmarklet.2.css" ;
h.appendChild(a.css);
a.script.src = a.server + "js/bookmarklet.7.js" ;
h.appendChild(a.script);
h=null ;
})();
* This source code was highlighted with Source Code Highlighter .
Потом подгружается непосредственно код самого окошка. Думаю, он может представлять некий интерес сам по себе, так что и его я сюда запощу (все комментарии идут на английском, так как заказчик американец):
Если интересно, вот
Гуляя по просторам Интернет мы конечно же периодически находим страницы, которые являются для нас интересными или важными. И естественно у нас возникает желание быстро сохранить адрес понравившейся страницы, чтобы вернуться к ней ещё раз. Для этих целей каждый современный броузер (будь-то Opera, Mozilla, Internet Explorer или др.) имеет в своём арсенале инструмент, который позволяет создавать и хранить списки закладок (избранных страниц).
В этом уроке речь пойдёт о том, как создавать (добавлять) закладки, на примере двух популярных броузеров – Opera и Internet Explorer (IE), а также как правильно хранить список закладок, чтобы не потерять его в случае сбоя системы или после вынужденной её переустановки.
Работа с закладками в Internet Explorer
Итак, если вы работаете в броузере Internet Explorer, то должны знать, что для этих целей служит пункт меню Избранное.
Самый простой способ добавить интернет-страницу в свой список, это находясь на понравившейся странице выбрать пункт Избранное - Добавить в избранное …
Появится окошко, уточняющее название и расположение будущей закладки:
Здесь Вы можете изменить название (под себя) и для удобства поиска в дальнейшем поместить эту закладку в отдельную папку. Если папки нет, то её можно создать. Для этого нажимаем кнопку Добавить в >> , а затем выбираем название папки для сохранения или нажимаем кнопку Создать папку… В появившемся окне набираем название создаваемой папки и нажимаем Ok :
После этого новая папка появится в списке и вам останется выбрать её и нажать Ok :
Теперь, если нажать на пункт Избранное , мы увидим, что в списке появилась новая папка и новый пункт меню в этой папке:
При нажатии на созданный пункт мы сразу же попадём на необходимую страницу без ввода её адреса.
Таким образом, можно добавлять сколько угодно закладок. Однако имейте ввиду, что со временем этих закладок становится очень много, поэтому старайтесь сразу распределять их по тематическим папкам, чтобы в последствии не заблудиться и всегда иметь возможность быстро найти нужную страницу.
Если вам понадобится произвести какие-либо изменения со списком закладок (переименовать, переместить, удалить и т.д.), то для этого надо выбрать пункт Упорядочить избранное… , который открывает одноименное окно. В этом окне вам будут доступны все возможности по работе со списком закладок. Достаточно выбрать нужный пункт и нажать необходимую кнопку:
Думаю, что с этим у вас не будет сложностей, и поэтому давайте перейдём к тому, как сохранять и восстанавливать закладки на случай выхода из строя Windows. Дело том, что все закладки хранятся в одном файле, который всегда расположен в системном разделе (диск С) и при выходе системы из строя такой файл естественно не сохраняется, а после переустановки Windows мы увидим, что наши закладки исчезли.
Чтобы иметь возможность восстановить закладки нам необходимо сделать копию такого файла и сохранить её в другой раздел (например D) или на внешний носитель информации (на CD или флешку).
В IE для этого надо выбрать пункт меню Файл – Импорт и Экспорт …
В появившемся окне Мастер импорта-экспорта нажимаем кнопку Далее , а в следующем окне выбираем нужное действие. Если мы хотим сохранить закладки, то выбираем пункт Экспорт избранного и нажимаем кнопку Далее :
В следующем окне выбираем папку, которую мы хотим сохранить (обычно всё избранное) и опять жмём кнопку Далее . После этого нам предлагается выбрать место, куда мы хотим сохранить закладки. По умолчанию это папка Мои документы , но мы договорились, что для надёжности надо выбрать другое место, поэтому нажимаем кнопку Обзор… и выбираем другое место (не на диске С):
Выбрав подходящее место нажимаем кнопку Далее и в следующем окне кнопку Готово . После этого файл с закладками будет помещён в указанное место. В IE такой файл по умолчанию называется bookmark. htm .
После такого экспорта можно смело переустанавливать систему, не переживая о потере закладок, а когда решите восстанавливать их сделайте то же самое: Файл – Импорт и экспорт… - Далее , а в окне выбора действий выберите Импорт избранного . После этого укажите место откуда этот файл надо восстановить (вы же помните куда его сохраняли?) и закончите восстановление.
Если вы сделаете всё правильно, то увидите такое сообщение:
После импорта все закладки будут восстановлены на своё место и вы сможете их увидеть как обычно (пункт Избранное) или же вторым способом, нажав кнопку с изображением жёлтой звезды. В этом случае закладки будут видны не в виде выпадающего меню, а в виде панели в левой части окна броузера IE.
Закрывается такая панель повторным нажатием жёлтой звезды или крестиком в верхнем правом углу этой панели:
Работа с закладками в Opera
Смысл работы с закладками в броузере Opera тот же что и в IE, поэтому я буду более краток.
Чтобы создать закладку необходимой страницы, необходимо находясь на этой странице нажать пункт Закладки – Создать закладку страницы …
Чтобы навести порядок в закладках (удалить, переместить и т.д.) необходимо выбрать пункт Управление закладками …
Редактор закладок откроется не в отдельном окне, а на новой вкладке Закладки броузера Opera. Для работы с отдельными закладками служит специальное меню с кнопками управления закладками:
Выбрав нужную закладку, мы можем произвести с ней те же действия, что и в IE и даже больше. В Opera, например, есть возможность сортировки закладок и отображения их в нескольких видах, что гораздо удобнее, нежели в IE. Кроме этого перемещение закладок из папки в папку можно производить перетаскиванием, т.е. нажать закладку и не отпуская кнопку мыши перетащить её на изображение нужной папки, а потом отпустить кнопку мыши. Удалять закладки можно с помощью соответствующей кнопки меню или более быстрым способом - кнопкой Delete на клавиатуре.
Импорт и экспорт в Opera тоже не сильно отличается от IE. Выбираем пункт меню Файл – Импорт и экспорт – Импортировать закладки Opera …(или Экспортировать закладки Opera…):
Далее также выбираем место для экспорта (или импорта) файла и сохраняем файл с закладками (или восстанавливаем закладки из файла). Единственное отличие в Opera это то, что файл с закладками по умолчанию называется opera6.adr .
При правильном восстановлении закладок из файла вы увидите окно с сообщением:
Вот собственно и всё!
Теперь выполнив всего несколько щелчков мыши и потратив несколько секунд времени, вы сохраните свои закладки и всегда будете спокойны, зная, что не потеряете ни одного важного сайта из поля своего внимания. Только не забывайте время от времени делать копии закладок и хранить их в надёжном месте (на случай сбоя Windows).
Управлять содержимым html страницы можно при помощи букмарклета. В данной заметке опишу простые примеры букмарклета и его использование для заполнение веб форм.
Для написания статьи использовался Crome, возможно в других браузерах есть свои особенности. Самым простым примером использования букмарклета является отображение сообщения в браузере. Для этого, например, можно открыть www.google.ru и после открытия страницы в строку адреса вместо www.google.ru ввести такой код
Javascript:alert("Привет мир");
И нажать Enter, в окне браузера появится сообщение
Что бы не вводить код постоянно в строку адреса браузера и иметь его постоянно под рукой возможно добавить код этой функции в закладки.
Для это есть несколько вариантов, опишу два из них. Первый создать закладку вручную в меню создания закладок, второй написать html страницу со специально оформленной ссылкой, которую перетащить мышью на панель закладок.
Рассмотрим первый вариант. В Chrome зайдите в меню закладок.
Нажмите "Добавить страницу в закладки" появиться следующее окно
В нем нажмите кнопку "Изменить". И в появившемся окне введите название для закладки и код функции.
После этого нажимаете кнопку "Сохранить". Теперь эта закладка появляется в панели закладок. И для вызова этой функции можно на любой странице нажать на эту закладку.
Рассмотри второй вариант добавления закладки из html страницы. Для этого создадим пустой текстовый файл с названием AddBookmark.html. и вставим в него следующий код:
AddBookmark Сообщение "Привет мир!"
Особенностью ввода JavaScript кода является замена кавычек на их символьное описание ". Теперь откройте страницу в браузере.
Ссылка на букмарклет выделена синим, мышкой перетащите её на панель закладок, если панель закладок не отображается то это можно поправить - https://support.google.com/chrome/answer/95745?hl=ru
Теперь рассмотри некоторые примеры.
1.Изменение цвета фона. В фал html добавьте еще одну ссылку
Серый фон
Перетащите её на панель закладок. При запуске закладки на странице www.google.ru получится такой результат:
2.Заполним данные в текстовом поле и поменяем его класс.
Для заполнения текстовых полей, нажатий на кнопку необходимо знать или их name или id. Что бы найти имя поля нужно на него нажать правой кнопкой мыши и выбрать "Посмотреть код". В правой части окна появиться окно с кодом и выделенным текстовым элементом.
В нашем случае находим атрибут id и запоминаем его, у нас это lst-ib. Теперь зная id текстового поля добавим на страницу html новую ссылку на буркмаркет:
Заполнение гугл поиска
В нашем случае меняется класс текстового поля на MyClass и он заполняется текстом "Привет мир!".
Добавим новую закладку на панель задач. И перейдём на www.google.ru выполним букмарклет и в результате получим.
Для проверки изменения класса опять откроем код элемента, ранее класс был такой class =" gsfi " теперь class ="MyClass "
