Поиск:

Букмарклеты

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

Речь идет о так называемых bookmarklets (букмарклетах). Это небольшие программки, написанные на javascript, которые можно помещать на панель закладок (отсюда и название, склеенное из двух слов: bookmark и applet). При щелчке по такой закладке запускается JavaScript-программа, которая выполняет какое-либо полезное действие.

Очень часто букмарклеты используют DOM, а так как в разных броузерах реализация DOM - разная, не все букмарклеты могут работать одинаково хорошо во всех броузерах. Что уж говорить о таких допотопных монстрах, как IE4 или NN4. Букмарклеты, которые будут здесь представлены, работают в последних версиях Mozilla/Firefox, IE 5.5+ и Opera, составляющих подавляющее большинство.

При написании данной статьи были использованы материалы сайтов, список которых будет представлен в конце. Вы без труда найдете еще кучу таких же сайтов: достаточно в google.com набрать ключевое слово bookmarklet.

Броузеры: это Internet Explorer 5.5 for Windows, это Netscape 7.1 или Mozilla, это Netscape 4.79, и это Opera 7.03.

Букмарклеты для веб-серфинга

show hiddens (, , )

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

Придуман "shad-ом".

zap style sheets (, )

Отключает все стили, используемые на странице.

highlight (, )

Подсвечивает все слова на странице, содержащие искомые символы.

Находит и подсвечивает все слова, содержащие искомые символы, кроме случаев, когда фраза прерывается другим элементом. Например, букмарклет найдет слова "Paul McGarry" и "искомые слова", но не фразу "на скрипте" в абзаце, что идет ниже.

Основан частично на скрипте, придуманном Paul McGarry.

sort table (, , )

Позволяет сортировать ряды в таблицах на веб-странице по алфавиту.

Добавляет еще один ряд сверху каждой таблицы со ссылками "a" и "d" над каждой колонкой. Щелкнув по ссылке, вы отсортируете таблицу в убывающем или возрастающем порядке по данной колонке. Сортировка идет по HTML-коду, так что если в колонке присуствуют ссылки, ряды со ссылками будут идти первыми.

transpose tables (, , )

Превращает ряды таблиц в колонки, а колонки - в ряды, и наоборот.

Учитывает rowspan и colspan, а также по возможности старается соблюсти цвет фона в ячейках.

number rows (, , )

Нумерует ряды во всех таблицах на странице.

Полезный букмарклет, например, для улучшения вида таблицы багов Mozilla.

Если у таблицы есть заголовочный ряд (оформленный тегами th и thead), данный скрипт не присваивает ему номера. Вместо этого в заголовочную строку добавляется еще одна ячейка над колонкой, где выводятся номера рядов, и в этой ячейке пишется слово "Row" (Ряд).

bullets to numbers (, , )

Преобразовывает все маркированные списки (UL) в нумерованные (OL).

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

zap images (, , )

Заменяет все картинки на странице на текст, прописанный в теге ALT.

Этот букмарклет позволяет посмотреть на то, как будет выглядеть страница с выключенным выводом картинок. Также вы получите представление о том, как ваша страница будет смотреться для голосовых броузеров и для текстовых броузеров, таких как Links. Более подробно о том, как правильно создавать текстовую версию сайта, читайте Web Content Accessibility Guidelines for alternate text.

Этот букмарклет заменяет только теги <img>; он ничего не делает с картинками на кнопках, с фоновым изображением и с изображениями-картами (image maps).

create link - 1 (, , )

Формирует в диалоговом окне ссылку на текущую страницу в уже готовом формате тега <A>. Пригодится в частности для блоггеров, а вообще для всех, кому надо быстро сделать ссылку на страницу, чтобы переслать по почте или вставить в html-код.

create link - 2 (, , )

Как вариант предыдущего букмарклета, формирует в диалоговом окне ссылку на текущую страницу в простом текстовом варианте "заголовок: ссылка".

Букмарклеты для веб-мастеров

test styles (, , )

Позволяет создать временный или пробный CSS и тут же увидеть результат его исполнения.

Букмарклет создает новое окно, в котором можно напечатать CSS-правила. Эти правила сразу же будут применены к странице. Правила будут действовать, пока окно открыто, даже в том случае, когда вы перезагрузите страницу или перейдете на другую страницу на том же сайте. См. примеры полезных стилевых правил.

ancestors (, )

Отображает в статусной строке список всех "предков" любого элемента страницы, над которым вы устанавливаете курсор.

Например при установке курсора на ссылке в ячейке таблицы в статусной строке появится следующее: "BODY > table tbody tr TD > A".

Так же показывает классы элементов (например, SPAN.newsItemLink) и идентификаторы id (например, DIV#content), если таковые присуствуют. Идея отображения классов и идентификаторов появилась из букмарклета pixy "List computed styles".

show blocks (, , )

Рисует границы вокруг таблиц (цветами показывается уровень вложенности), абзацев и div-ов.

Абзацы обводятся светлосерым цветом, div-ы - черным. Цвета границ у таблиц зависят от уровня вложенности: самые внешние таблицы обводятся синим, таблицы второго уровня - зеленым, а третьего уровня и глубже - красным.

Этот букмарклет накладывает на страницу таблицу стилей, которая загружается динамически с сайта http://www.cs.hmc.edu/. Изучите внимательно этот css-файл: он немного меняет вид страницы (убирает фон), что не всегда удобно.

Придумал Paul McGarry.

Если вам хочется создать свою таблицу стилей и не зависеть от постороннего сайта, javascript в букмарклете надо немного поменять. Например, я сохранил свою таблицу стилей на своей машине, а в javascript-е прописал путь к ней, как к файлу: "file://E:/WINDOWS/Web/cells-structure.css" и из букмарклета, показывающего границы блоков, я сделал другой букмакрлет, показывающий только границы ячеек, обводя их легким 1px пунктиром.

find links to squarefree (, , )

При каждом нажатии выделяет на странице ссылку, которая указывает на squarefree.com. Поменяйте в javascript значение, на нужный вам домен.

google backlinks (, , , )

Ищет в Google страницы с PR4+, которые линкуются на текущую страницу, если у нее тоже PR4+.

google all from site (, , , )

Ищет в Google все ему известные страницы с текущего сайта.

word frequency (, , )

Составляет список использованных на странице слов и подсчитывает частоту их употребления.

query as link text (, , )

Меняет ссылку на текст "engine: запрос"

Например, при анализе логов букмарклет поменяет текст данной ссылки http://www.google.com/search?hl=en&q=%22remove+plugins%22+%22internet+explorer%22 на "www.google.com: 'remove plugins' 'internet explorer'".

linkify (, , )

Превращает текстовые ссылки в реальные ссылки.

Например, при анализе логов, этот букмарклет превратит текст "http://www.google.com/" в ссылку.

Послесловие

Для Firefox (Mozilla Project) есть дополнительный компонент Web Developer, который позволяет удобно выполнять такие функции, как включение/выключение CSS, включение/выключение картинок, изменение размера окна, обрисовка ячеек таблиц и блоковых элементов, посмоттреть http-заголовки.

Opera поставляется с дополнительными CSS-файлами, которые можно быстро наложить на любую страницу и очертить блоковые элементы или ячейки таблиц.

Александр Качанов

« назад к списку статей

Самые популярные статьи:

• Элементы разработки веб-сайтов
• Анализ популярных решений в web-дизайне
• Шаблонные решения для web-сайтов
• 10 главных ошибок веб-дизайна 2003 года
• К черту плохие броузеры