Советы

Букмарклеты. Азы букмарклет, автоматическое заполнение htm форм

Букмарклеты. Азы букмарклет, автоматическое заполнение htm форм

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

Интерфейс Bookmark OS разбит на две части. В левой находится список меток и дерево папок. Кликнув по любой из них, вы увидите все соответствующие закладки в правой части окна с наглядными иконками в виде скриншотов. Благодаря кнопкам на панели инструментов можно сортировать ссылки по дате, названию, домену и прочим атрибутам. Другие кнопки позволяют менять режим отображения закладок: список или плитка.

Разумеется, есть возможность поиска по названиям ссылок и папок.

Добавление и редактирование

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

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

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

Сервис иногда ошибается, но в большинстве случаев рекомендует подходящие папки, что избавляет от необходимости указывать путь сохранения вручную.

Кнопка для отмены последнего совершённого действия может не раз спасти ваши данные в подходящий момент.

Пока разработчики не сделали приложения для мобильных платформ, но веб-версия Bookmark OS адаптируется под любые размеры экранов. Система синхронизирует закладки между разными устройствами через облако, так что ваши ссылки всегда будут под рукой.

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

Bookmark OS доступен бесплатно. Но, оформив подписку за 12 долларов в год, вы разблокируете дополнительные настройки отображения, возможность добавлять подпапки, автоматическое создание скриншотов для импортированных закладок и другие платные функции.

Ни для кого не секрет, что большинство российских пользователей в качестве браузера на своих компьютерах используют Opera или Google Chrome. Несколько дней назад я писал о , которые я использую в своей повседневной жизни. Порой возникают случаи, когда нужно синхронизировать закладки, перенести закладки с Opera в Google Chrome, либо импортировать закладки с телефона в Оперу на компьютере. И у большинства людей возникает вопрос: как скопировать, к примеру, закладки с Opera Mini на телефоне в Opera на PC , либо перенести с Google Chrome на телефон … Если вы все ещё задаётесь подобным вопросом, то вы просто обязаны дочитать статью до конца)).

1.Перенос закладок с Opera Mini в Opera на компьютере

Большинство пользователей используют на своем телефоне Opera Mini . Самый простой способ перенести закладки с мобильной оперы в «компьютерную версию» это воспользоваться сервисом Opera Links .
Для любителей Opera Mini Mod есть способ попроще.


Открываем Opera Mini Mod, кликаем «закладки». Нажимаем левую софт клавишу, выбираем имп/экспорт закладок. Кликаем «экспортировать», сохраняем файл на телефоне. Желательно делать экспорт закладок без иконок. Все описанное отображено на скрине ниже.

В итоге, в телефоне будет файл с примерно таким названием: Bkm_Exp_25092011_165412.htm . Дата в файле будет ваша)).

Открываем Opera на PC. В боковой панели кликаем «закладки». В открывшемся поле нажимаем правой кнопкой мыши и в контекстном меню выбираем файл >> Импортировать закладки Firebox . Выбираем файл закладок и импортируем их.
Если вы используете Opera AC, то делаем следующее: идем по пути: закладки >> управление закладками >> файл >> импортировать закладки Netscape/FireBox.
В открывшемся окне выбираем наш файл с расширением .htm
Закладки успешно скопированы (импортированы).

2. Перенос закладок с Opera на компьютере на Opera Mini Mod
Процесс копирования закладок с компа на телефон такой же как и описан выше. Только все немного наоборот))
Открываем Opera на ПК. Идем по пути: закладки >> файл >> экспортировать как HTML.
На выходе получаем файл bookmarks.htm
Копируем его на телефон и через меню Оперы Мини импортируем закладки в телефон.

3. Перенос закладок с Opera Mini Mod на Google Chrome
Для того, чтобы импортировать закладки в Google Chrome с телефона следует сперва выполнить пункт 1 , а потом и пункт второй . Google Chrome отказывается понимать файл закладок, который создаётся модом Opera Mini. После того, как вы сделаете оба пункта, вы получаете закладки в виде bookmarks.htm. Открываете Total Commander и правите расширение файла на html. Все банально — просто добавьте букву в конце расширения .htm , чтобы получить .html Можете переименовать расширение более удобным способом для вас.
Теперь откройте Google Chrome, нажмите в верхнем правом углу «гаечный ключ» настроек. Выберите диспетчер закладок. В открывшемся окне нажмите на «упорядочить» и выберите «импортировать закладки из HTML-файла».
Процесс импорта будет успешно завершен)).

4. Перенос закладок с Opera на Google Chrome
Чтобы перенести свои закладки с Opera в Гугл Хром , выполните сперва пункт 2 . Полученный файл bookmarks.htm переименуйте в bookmarks.html и выполните заключительную часть пункта 3.

5. Перенос закладок в Internet Explorer
Если вы являетесь пользователем IE, то перенос закладок для вас будет также легок…
Вам всего лишь следует получить файл bookmarks.htm . Все зависит от того, с чего решили вы перенести — с телефона или компа. Получив файл с закладками, переходим в IE. Нажимаем кнопку «Избранное». В открывшемся окне видим ссылку «Добавить в избранное», а рядом стрелочку. Кликаем на стрелочку и выбираем экспорт/импорт, а потом импортировать из файла. Выбираем наш файл закладок и радуемся)).

Всем привет, сегодня речь пойдет про использование букмарклета, или закладки для браузера.

Кто не знает, это такая штука, которую можно добавить в закладки (да, я сегодня дебютирую в роли Капитана Очевидность:) и, при нажатии на нее, произвести какой-нибудь эффект.

Примером может служить герой сегодняшней заметки, который расположен по адресу http://ulizko. com/demo/allthat/ . Инструкция по применению:

  • Перетащите ссылку «link» на панель закладок или щелкните по ней правой кнопкой мыши и выберите пункт меню «добавить в избранное».
  • Зайдите на какой-нибудь сайт, вроде http://twitter. com , и нажмите на эту закладку (ну или на избранное).
  • Появится окошко, в которое можно ввести данные. Вообще, предполагается, что это будет интерфейс добавления желаний в вишлисты (предварительно созданные на каком-то сайте), настроить триггеры оповещений, и прочее. Есть даже какая-то валидация начального уровня. И налажен обмен данными с сервером - то есть, на любом домене к вам приходит список ваших вишлистов, а ваше новое желание с любого домена долетит на крыльях любви к вишлисту и уютно устроится в его объятьях .

    Но. Мы сегодня не об этом, а о том, как делать такие штуки в принципе.

    Прежде чем перейти непосредственно к разбору кода, хотелось бы ответить на вопрос (который мне никто не задавал:), а именно, "Какие возможности дает букмарклет?". Правильный ответ - любые. Так как мы получаем возможность подгрузить любой скрипт, мы можем сделать с клиентской страничкой все, что угодно. Например - сделать «выносной» виджет, в котором на любой страничке можно будет добавить запись в блокнот или таскменджер. Или вообще сделать весь таскменеджер выносным. Что тоже важно, они будут работать практически везде - это не плагины к firefox’у и не виджеты к opera. Букмарклетам не важно (ну, почти:), какая у вас ОС или браузер. В общем, есть простор для фантазии.

    Итак, как же делать эти самые букмарклеты?
    Очень просто: надо создать на страничке элемент anchor с атрибутом href, содержащим javascript-код. Если перевести на русский, то надо сделать вот такую ссылку, адрес которой, по большому счету, и будет букмарклетом:

    Bookmarklet

    Для того, чтобы 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 .

    Потом подгружается непосредственно код самого окошка. Думаю, он может представлять некий интерес сам по себе, так что и его я сюда запощу (все комментарии идут на английском, так как заказчик американец):

    Если интересно, вот

    Путешествуя в бурных волнах Интернет, дабы не забыть место, куда волей или неволей судьба забросила пользователя, он делает закладки в своем любимом броузере. Они называются Bookmarks или Favorites. Bookmarks (Закладки) или Favorites (Избранное) - это набор ссылок (URL) на интернет-ресурсы, как правило, целые сайты или отдельные страницы. Microsoft Internet Explorer сохраняет каждую ссылку в отдельном файле, Netscape использует для этого html-файл bookmark.htm. Для работы с большим количеством закладок одного броузера становится недостаточно. Помочь пользователю призваны специальные программы для работы со ссылками.
    Они подразделяются на:


    Программы для организации коллекции ссылок (менеджеры);

    Программы для конвертации ссылок из Microsoft Internet Explorer в Netscape, HTML-страницу и наоборот;

    Программы для проверки "живучести" ссылок и также для определения изменения ресурсов на указанных страницах.
    Рассмотрим эти категории более подробно на примерах лучших программ данного направления.. URL Managers (Менеджеры ссылок)Compass 2.82
    Довольно известный менеджер закладок с большими возможностями.

    Поддерживает форматы трех основных броузеров: Netscape, Microsoft Internet Explorer, Opera и другие менее распространенные форматы.


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


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


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

    Linkman 6.0.1.45
    Еще один довольно известный менеджер по закладкам. Позволяем импортировать закладки из Microsoft Internet Explorer, Netscape, а также позволяет настроить импорт ссылок пользовательского формата. Экспорт в Microsoft Internet Explorer, Netscape, HTML, поддерживает собственный формат. Содержит шаблоны для экспорта в html-файл, которые можно задавать самому. Содержит две уже готовые базы ссылок на ресурсы интернета, в том числе одну по производителям компьютерного "железа". Позволяет задавать рейтинг от 0 до 5 для каждой ссылки.

    Поиск дубликатов. Выборка ссылок на локальном диске, удовлетворяющих заданным условиям.


    Проверка ссылок на "живучесть" и изменение содержания страниц.


    Программа содержит большое количество настроек и по своим характеристикам не уступает Compass"у.

    URL Organizer 2.4.5
    Снова, как видно из названия, менеджер закладок. Автор программы ограничился функциями менеджера, направив основные усилия по разработке настраемого пользовательского интерфейса и удобства работы с программой, благодаря большому количеству комбинаций горячих клавиш и другим настройкам.


    Программа позволяет импортировать/экспортировать закладки трех основных броузеров: Netscape, Microsoft Internet Explorer и Opera. Содержит небольшую базу готовых закладок.

    URL Converters (Программы конвертации закладок)Bookmark Converter 2.9
    Программка для конвертации закладок Netscape в избранное Microsoft Internet Explorer.


    и наоборот.


    Ничего лишнего. Просто и со вкусом. Поддерживает режим командной строки. Интуитивно-понятный интерфейс. Умеет также синхронизировать ссылки между Netscape и Microsoft Internet Explorer. Нет лимита на размер коллекции, с моими пятью тысячами ссылок справилась великолепно.

    Bookmark Magic 2.31
    Еще один конвертер закладок. Конвертация между Microsoft Internet Explorer, Netscape и html-файлом Программа умеет искать дублирующие ссылки. Есть сортировка по описаниям. Основные функции программы также доступны через командную строку.

    Программы поиска "мертвых" ссылокSiteChecker 3.5
    Программа проверяет все ссылки на вашем сайте (html-файлы, рисунки и т.д.), включая файлы, на которые никто не ссылается и ссылки на внешние ресурсы. Программа может работать локально или через FTP.


    Гибкая система настроек результирующего отчета. На сайте производителя доступно подробное описание: линк


    SiteMapper 1.04
    SiteMapper от Trellian Software (создавшем линейку продуктов Wolf ) тщательно проанализирует ваш сайт, проиндексирует все ресурсы и создаст детальный рапорт. Проверяет ссылки на отсутствующие страницы и изображения. Пример рапорта можно посмотреть здесь . Программа отмечена многочисленными наградами и, по-видимому, не зря.


    Xenu"s Link Sleuth 1.1f
    Еще одна программа для проверки сайта на предмет наличия "мертвых" ссылок. Проверяет простые ссылки, рисунки, фреймы, плагины, таблицы стилей, скрипты, Java-аплеты и т.д. Выдает подробный рапорт с сортировкой по заданным критериям, если отметить все опции на больших сайтах, выдает рапорты размером несколько мегабайт.


    Поддерживает SSL соединения, FTP, Gopher, redirect"ы. Возможность перепроверки ссылок на случай ошибок во время случайных сбоев сети. Программа отмечена множеством наград. На странице автора имеется подробное описание и ответы на вопросы.

    CopyURL 2.30
    Говоря о ссылках, нельзя не рассказать о еще одной замечательной программке, которая не вписывается в указанные выше категории, но часто, несмотря на свои размеры, облегчает жизнь. Это бесплатное приложение CopyURL от Moon Software . Оно позволяет добавлять в проводник три дополнительных меню: Copy URL, Copy Link и Copy Name, появляющиеся при нажатии на URL-файле правой кнопки мыши.


    В результате выбора этих пунктов в буфер обмена скопируется следующая информация:
    Copy URL:
    Copy Link: сайт
    Copy Name: сайт:
    Можно задавать сразу несколько URL. Скачать CopyURL 2.30 можно отсюда

    Управлять содержимым 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 "