За последний год можно наблюдать необычайный рост популярности социальных закладок. Что же это такое — социальные закладки, для чего они нужны? Давайте попробуем разобраться. Закладки на вашем компьютере служат для хранения ссылок на страницы, которые вы регулярно посещаете или хотели бы посетить позже. А социальные закладки хранятся не на жёстком диске компьютера, а на сервере в сети интернета.
Всю эту работу по хранению ваших ссылок в интернете осуществляют сервисы социальных закладок . Они выполняют много достаточно много полезных для пользователя функций. С помощью этих сервисов можно:
Хранить закладки в интернете . Это дает вам возможность получить доступ к своей коллекции закладок с любого компьютера, где бы вы не находились.
Делиться и обмениваться закладками . Вам достаточно будет дать друзьям ссылку на страничку в социальном сервисе и ваши (не закрытые вами от посторонних глаз) закладки, расскажут за вас о ваших интересах и любимых сайтах.
Находить новые интересные сайты и единомышленников . Если человек сохранил ту же самую линку, что что и вы, может это говорит об общности интересов? Возможно, просмотр других закладок принесет вам другие находки.
Систематизировать закладки с помощью тэгов . Вы просто присваиваете каждой закладке несколько ключевых слов или фраз, которые наиболее точно описывают ее. Поэтому вы легко и быстро можете найти любую ссылку в вашей коллекции.
Для того, чтобы добавить социальную закладку, надо быть зарегистрированным в каком-либо из сервисов. Ниже я собрала список из 20 самых популярных сервисов. Потом заполняете несложную форму, где вы указываете урл странички, которая вам понравилась, заголовок, краткое описание и присваиваете теги. Все просто — ваша закладка готова.
4. Mister-wong.ru
7. Google.com/bookmarks
9. Myscoop.ru — Сервис прекратил существование
13. Myelect.ru — Сервис прекратил существование
14. Ru-marks.net — Сервис прекратил существование
Всем привет, сегодня речь пойдет про использование букмарклета, или закладки для браузера.
Кто не знает, это такая штука, которую можно добавить в закладки (да, я сегодня дебютирую в роли Капитана Очевидность:) и, при нажатии на нее, произвести какой-нибудь эффект.
Примером может служить герой сегодняшней заметки, который расположен по адресу 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 .
Потом подгружается непосредственно код самого окошка. Думаю, он может представлять некий интерес сам по себе, так что и его я сюда запощу (все комментарии идут на английском, так как заказчик американец):
Если интересно, вот
Разработчики Bookmark OS хорошо поработали над тем, чтобы вам было удобно просматривать даже большую коллекцию закладок и быстро находить в ней нужные элементы. Для этого сервис предлагает несколько режимов отображения ссылок и позволяет группировать их с помощью меток и папок.
Интерфейс Bookmark OS разбит на две части. В левой находится список меток и дерево папок. Кликнув по любой из них, вы увидите все соответствующие закладки в правой части окна с наглядными иконками в виде скриншотов. Благодаря кнопкам на панели инструментов можно сортировать ссылки по дате, названию, домену и прочим атрибутам. Другие кнопки позволяют менять режим отображения закладок: список или плитка.
Разумеется, есть возможность поиска по названиям ссылок и папок.
Добавление и редактированиеДобавлять веб-страницы в закладки можно с помощью расширения для браузера или букмарклета - специальной кнопки, которая выносится на браузерную панель. Вы также можете создавать отдельные букмарклеты для выбранных папок, чтобы сервис отправлял ссылки прямо в них и не спрашивал каждый раз путь для сохранения. Кроме того, в Bookmark OS есть функции экспорта и импорта закладок из браузеров.
Отдельного внимания заслуживает возможность редактирования добавленных закладок и папок. Вы можете выделить один или сразу несколько элементов с помощью мышки, а затем перетянуть их в нужную папку или удалить - прямо как в Windows. Но стоит сказать, что в мобильной версии Bookmark OS групповое редактирование отсутствует.
Bookmark OS использует машинное обучение и алгоритмы обработки естественного языка, чтобы сделать добавление закладок ещё проще. Когда вы сохраняете очередную веб-страницу, система анализирует ваши папки, выбирает из них самую подходящую и предлагает поместить новую закладку именно туда.
Сервис иногда ошибается, но в большинстве случаев рекомендует подходящие папки, что избавляет от необходимости указывать путь сохранения вручную.
Кнопка для отмены последнего совершённого действия может не раз спасти ваши данные в подходящий момент.
Пока разработчики не сделали приложения для мобильных платформ, но веб-версия Bookmark OS адаптируется под любые размеры экранов. Система синхронизирует закладки между разными устройствами через облако, так что ваши ссылки всегда будут под рукой.
Кроме того, вы можете открывать доступ к выбранным папкам для своих знакомых. Это позволит вам вместе работать над общими ссылками.
Bookmark OS доступен бесплатно. Но, оформив подписку за 12 долларов в год, вы разблокируете дополнительные настройки отображения, возможность добавлять подпапки, автоматическое создание скриншотов для импортированных закладок и другие платные функции.
Опера и Хром.
А сейчас поговорим о том, как можно делать резервное копирование закладок и настроек всех этих браузеров. Такая необходимость может пригодиться в случаях, например, когда нужно делать переустановку Windows или когда надо перенести все закладки и настройки браузеров на другой компьютер.
Есть разные способы сделать копирование закладок, но мы обсудим, на мой взгляд, один из самых простых способов для начинающих пользователей. Поговорим о программе , которая специально предназначена для того, чтобы можно было быстро и удобно делать копирование закладок, а также при необходимости быстрое восстановление закладок.
Программа Bookmarks Backup не требует установки! Достаточно скачать и запустить ее.
Чтобы сделать копирование закладок и всех остальных настроек своих браузеров, запускаем Bookmarks Backup и в верхней части программы в разделе Backup сначала ставим галочки (1) на тех браузерах, у которых хотим сделать копирование закладок.
Далее нажимаем на кнопку Browse … (2), выбираем на компьютере место (3), где будут храниться эти сохраненные данные, создаем папку (4), например (5). После ввода названия этой новой папки нажимаем на клавиатуре Enter и жмем Ок (6):
Будет дано напоминание, чтобы закрыли все браузеры. Жмем Ок :
Начнется копирование закладок и других настроек всех выбранных браузеров:
После чего будет сказано, что резервное копирование закладок прошло успешно.
Закрываем это окно, — Ок :
Вот и всё! Копирование закладок закончено.
Теперь, можно сохранить созданную нами папку Резервное копирование закладок где-нибудь на съемном носителе, например на флешке, и если придется переустанавливать Windows или переносить закладки в браузер другого компьютера, то данная папка нам пригодится, чтобы сделать восстановление закладок.
Восстановление закладок в Bookmarks BackupЕсли понадобиться данная функция, тоже закрываем все запущенные браузеры. Чтобы сделать восстановление закладок, снова запускаем программу и теперь уже переходим в раздел Restore .
Как и при копировании закладок, сначала выбираем браузеры (1), закладки которых хотим восстановить. Далее, через кнопку Locate …(2), находим на компьютере папку Резервное копирование закладок и в ней выбираем папку , в которую были сохранены все настройки браузеров.
Остается нажать на кнопку Restore (3):
Будет дано предупреждение, что наши текущие закладки будут изменены. Они будут заменены теми, которые у нас находятся сохраненными в папке Резервное копирование закладок . Если согласны с этим, нажимаем Да :
Как видим, все достаточно просто!
Попробуйте и Вы сделать резервное копирование закладок через . Мало ли что может быть с операционной системой! А резервная копия закладок и настроек своих браузеров не помешает!
Управлять содержимым 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 "
