Библиотека Интернет Индустрии I2R.ru |
|||
|
БукмарклетыСегодня я вам расскажу о полезных добавлениях к броузерам, которые не только облегчают процесс просмотра сайтов, но и помогают разрабатывать их. Речь идет о так называемых bookmarklets (букмарклетах). Это небольшие программки, написанные на javascript, которые можно помещать на панель закладок (отсюда и название, склеенное из двух слов: bookmark и applet). При щелчке по такой закладке запускается JavaScript-программа, которая выполняет какое-либо полезное действие. Очень часто букмарклеты используют DOM, а так как в разных броузерах реализация DOM - разная, не все букмарклеты могут работать одинаково хорошо во всех броузерах. Что уж говорить о таких допотопных монстрах, как IE4 или NN4. Букмарклеты, которые будут здесь представлены, работают в последних версиях Mozilla/Firebird, 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/" в ссылку. ПослесловиеДля Firebird (Mozilla Project) есть дополнительный компонент Web Developer, который позволяет удобно выполнять такие функции, как включение/выключение CSS, включение/выключение картинок, изменение размера окна, обрисовка ячеек таблиц и блоковых элементов, посмоттреть http-заголовки. Opera поставляется с дополнительными CCS-файлами, которые можно быстро наложить на любую страницу и очертить блоковые элементы или ячейки таблиц. |
|
2000-2008 г. Все авторские права соблюдены. |
|