Дополнения

Плагин SAPE

2012-09-08T17:05:42+00:00

Представьте себе что вы, как оптимизатор, хотите купить для продвижения своего сайта 300-500 ссылок. Ваша задача выбрать для покупки хорошие сайты. Вы, наверное, слышали, что существуют Гно-сайты, которые нужно отсеивать, дабы не навредить репутации своего сайта и не попасть под бан поисковиков. Для проверки такого количества сайтов вручную уйдет уйма времени. Но с помощью плагина вы сэкономите время и сможете более тщательно проверить нужные сайты.

Официальный сайт характеризует плагин следующим образом. Плагин Вебмастер SAPE является дополнительной панелью инструментов Firefox и содержит набор функций, расширяющих возможности веб-мастеров и оптимизаторов при работе в интерфейсе биржи SAPE.

Так как плагин работает с браузером Mozilla Firefox. Значит, если у вас не установлен этот браузер, нужно будет его установить. Последнюю версию Mozilla Firefox можно скачать по этому адресу:http://www.mozilla.org/ru/firefox/new/ (скопируйте адрес и вставьте в адресную строку браузера).

Теперь приступим к установке плагина Вебмастер SAPE. Установить его не сложно. Скопируйте этот адрес в адресную строку браузера:https://addons.mozilla.org/ru/firefox/addon/webmaster-sape/versions/. В открывшемся перед вами окне кликните по кнопке "+ Добавить в Firefox". Плагин будет установлен.

Как работать с плагином Вебмастер SAPE

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

Вы увидите вот такой ряд кнопок. Каждая кнопка, при клике по ней, выполнит определенное задание, за которое она отвечает. Если навести курсор на кнопку, всплывет подсказка команды. Поэтому опишу, вкратце, ваши возможности при работе с плагином.

Интерфейс оптимизатора:

проверка ссылок (индексация в Google и Yandex; наличие в кэше Yandex; общего количества внутренних и внешних; наличия размещенной ссылки на купленной странице)
проверка купленных страниц (наличие в кэше Yandex; отображение PageRank; наличие внутренних и внешних ссылок;
проверка страниц доноров (второй уровень вложенности)
проверка сайтов (ТИЦ; на наличие стоп-слов; на наличие в базе вредоносных и фишинговых сайтов Google и Яндекса)
экспорт помеченных размещенных ссылок и страниц в текстовые файлы
экспорт локальных и глобальных черных списков.

Интерфейс веб-мастера:

проверка ссылок (соответствия анкоров размещенных ссылок тексту оптимизаторских страниц)
проверка страниц (проверка значения PageRank; проиндексированности страниц в Яндексе; на наличие стоп-слов; отображения значения ТИЦ)
проверка сайтов (URL страниц перед модерацией площадки; наличие в базе вредоносных и фишинговых сайтов Google и Яндекса)
экспорт оптимизаторских ссылок в текстовый файл
экспорт локальных и глобальных черных списков
отсев спам-заявок с помощью набора соответствующих фильтров
контроль WAIT-заявок от оптимизаторов, не подтверждающих размещение в установленный дневный срок.

Фильтры заявок:

быстрое выделение и отметка заявок ( с двумя, тремя одинаковыми словами подряд; в которых присутствуют две пары одинаковых слов; длиннее 50, 70 символов; без русских букв; только из заглавных букв; начинающихся не с буквы или цифры).

Дополнительные кнопки позволяют снять отметки со всех заявок, открыть SAPE или форум и быстро переключать видимость панели.

Работа плагина интуитивно понятна. Например, кликнув по кнопке YP (проверка проиндексированности страницы в Yandex) вы увидите, как напротив проверяемых страниц сайтов будут появляться значки зеленого (да) или красного (нет) цвета. В правом нижнем углу окна вы можете видеть всплывающие окна отчета по выполненному заданию.

После того, как вы, с помощью плагина отсеете основную массу неподходящих сайтов, дополнительно можете воспользоваться сервисом «SEOGadget» и проверить оставшиеся сайты на разные показатели. Сервис находится по адресу:http://www.seogadget.ru/.

И все-таки, не нужно полностью автоматизировать этот процесс. Не поленитесь зайти на сайт и посмотреть страницу, чтобы увидеть, что она из себя представляет. Бывает даже беглого взгляда хватает, для того, чтобы правильно оценить представленный сайт. Это не так уж и муторно и долго, всё занимает считанные минуты. Главное тщательно отбирать, ведь ссылки закупаются на долго.

Xenu - находим битые ссылки

2012-10-05T17:22:59+00:00

Программа Xenu простой и полезный инструмент, с помощью которого можно проанализировать все URL-адреса сайта. Полное название программы - Xenu Link Sleuth . Изначально, программа создавалась для поиска неработающих (битых) ссылок на сайте. Однако, этим её возможности не ограничиваются. С помощью программы можно найти неработающие ссылки, скрытые ссылки, ссылки с перенаправлением, неработающие якоря, в общем, сделать полный анализ ссылок на сайте. Полученная информация поможет нам найти и исправить ошибки.

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

Запустите программу. Перед вами появиться окно «Tips and Tricks» (Советы и Рекомендации). Закройте окно

Откройте File и нажмите на Check URL (Проверить URL)

Введите в адресную строку URL-адрес вашего сайта в формате: / (слэш в конце url) и нажмите «ОК»

Программа исследует сайт и предложит создать отчёт. Нажмите «Да»

В следующем окне, для продолжения создания отчёта нажмите «Cancel»

В браузере откроется отчёт. На рисунке ниже вы видите, какую информацию выводит отчет

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

Исправляйте ошибки, проверяйте сайт и обязательно обратите внимание на ссылки, ведущие на чужие сайты. Возможно, эти ссылки на сторонние ресурсы поставлены вами, но если это «паразиты» - находите и уничтожайте. В следующем материале мы рассмотрим, что собой представляют кодированные ссылки и как их можно найти и обезвредить.

{attachments}

WebDeveloper - вебразработчик

2012-11-16T05:27:52+00:00

В этой статье я хочу познакомить вас с очень полезным инструментом для вебмастера -- дополнением для браузера Firefox, плагином Web Developer. Название плагина говорит само за себя: Web Developer – вебразработчик. Понятно, что плагин создан для вебразработчиков, то есть для нас с вами. Предназначен плагин Web Developer для получения информации и тестирования сайта. Какие возможности предоставляют инструменты плагина? Вы сможете включить и выключить изображения, обнаружить все элементы ссылок, просмотреть формы, проверить страницы сайта на соответствие стандартам и многое другое. Сведения, полученные в результате тестирования, помогут вам не только в разработке сайта, с помощью плагина вы сможете найти скрытые ссылки, повреждённые изображения и т.п. Рассмотрим установку плагина Web Developer в браузер Firefox.

Установка плагина Web Developer в Firefox

Хотелось бы отметить, что ранние версии плагина имели русскую локализацию. Обновлённая версия русской локализации не имеет. Однако этот факт не столь важен, так как инструменты плагина сгруппированы таким образом, что становится интуитивно понятно предназначение каждого инструмента даже с базовым знанием языка. Web Developer предоставляет визуальную информацию и для анализа сведений, полученные с помощью плагина Web Developer, в большей степени нужно иметь знания вебразработчика, а не переводчика. Если вам всё-же комфортнее работать с русифицированной версией плагина Web Developer, установите более раннюю версию, имеющую русскую локализацию.

Последнюю версию плагина Web Developer для Firefox можно скачать с домашней страницы разработчика. Установить Web Developer, как и любой другой плагин, можно также через встроенные инструменты Firefox. Для этого откройте браузер Firefox и в меню выберите «Инструменты» - «Дополнения»

1 - В строку поиска скопируйте название нужного дополнения. В открывшемся списке выберите необходимый плагин для установки и запустите установку.
2 - Если же вы уже скачали дополнение на свой компьютер, откройте меню инструментов и выберите «Установить дополнение из файла».

Панель инструментов плагина Web Developer

После успешной установки Web Developer вы начнёте работать с инструментами плагина. Для работы удобнее всего использовать встроенную в браузер панель инструментов Web Developer. Можно использовать и альтернативные варианты доступа к инструментам плагина:

Кликните правой мышью в окне браузера Firefox и в открывшемся меню выберите Web Developer, откроется панель вкладок с инструментами;
Выберите в меню браузера Firefox «Инструменты» и в открывшемся подменю наведите курсор на Web Developer extension.

Возможности плагина Web Developer

Инструменты плагина Web Developer сгруппированы по типу выполняемых операций, что удобно и позволяет интуитивно понимать работу того или иного инструмента.

Давайте рассмотрим панель инструментов Web Developer. На схеме ниже показаны варианты панели инструментов плагина Web Developer с разной языковой локализацией.

На панель инструментов плагина вынесены названия групп инструментов. Если вы кликните по названию группы, откроется вкладка с вложенными в эту группу инструментами. Инструментов в плагине довольно много, но когда вы начнёте работать с Web Developer, поймёте, насколько легко разобраться в работе каждого инструмента. Для того, чтобы включить инструмент, кликните по инструменту, напротив появится галочка. Для выключения – галочку убираем. Рассмотрим каждую группу инструментов плагина Web Developer.

«Отключить» (Disable). С помощью инструментов этой группы можно посмотреть, как будет выглядеть сайт, если пользователь в настройках браузера отключит некоторые элементы веб-дизайна.

«Cookies». Проверка работоспособности сайта в условиях ограниченной способности браузера.

«Ошибок CSS нет» (CSS). Группа инструментов для работы с таблицами стилей. Позволяет подключать, отключать и редактировать стили, просматривая результаты редактирования в браузере, выводить дополнительную информацию о таблицах стилей.

«Формы» (Forms). Можно просматривать элементы форм с их атрибутами, включить показ паролей в полях ввода со звёздочками, очищать радиокнопки, конвертировать переменные запросов и др.

«Графика» (Images). Управление изображениями. Можно получить информацию о размере, весе изображений, найти повреждённые изображения и многое другое.

«Инфо» (Information). Получаем дополнительную информацию о сайте. Можно просмотреть порядок расположения и величину блоков Div, параметры ссылок и объектов, атрибуты Title, значения атрибутов Id и Class, получить подробную информацию об элементах, таблицах, цветах, якорях и многое другое.

«Разное» (Miscellaneous). Здесь находятся разные по функциональности инструменты. Например, инструмент «Линейка», с помощью которого можно измерять объекты. Для этого нужно нажать правую кнопку мыши и выделить нужный объект. Выделение будет иметь форму прямоугольника. Для изменения размера, прямоугольник нужно потянуть за уголок или ввести данные в пикселях на панели инструментов плагина.

«Контуры» (Outline). Выделяет элементы вебдизайна контурными линиями. Хочу обратить особое внимание на пункт «Контур ссылок» - «Внешних ссылок». Этот инструмент поможет вам найти спрятанные и закодированные ссылки.

«Размеры» (Resize). Можно посмотреть размер окна и области просмотра. Также можно изменить размеры окна браузера, увеличить или уменьшить разрешение, что позволить проверить работу сайта при различных значениях разрешения экрана.

«Инструменты» (Tools). Инструменты для вебразработчика. Можно проверить на валидность код HTML, CSS, RSS-ленту с помощью бесплатных сетевых сервисов. Также можно проверить наличие двойных якорей, битых ссылок, просмотреть Консоль ошибок.

«Код» (View Source). Можно посмотреть исходный код страницы. Показывает список фреймов с возможностью просмотра их исходного кода. Показывает сгенерированный код так, как его видит браузер.

«Настройки» (Options). Настройки программы. Запоминает выбор пользователя для разных меню. Сброс и возврат, изменённой в результате работы страницы, к исходному состоянию.

Далее читайте как работать с WebDeveloper.

Как работать с WebDeveloper

2012-11-16T15:04:34+00:00

Плагин Web Developer предоставляет в помощь вебразработчику большое количество инструментов. Мне бы хотелось вам показать в действии возможности плагина Web Developer. Остановлюсь на группе инструментов плагина «Ошибок CSS нет», так как эта группа инструментов чаще всего используется вебмастерами.

Пример работы с WebDeveloper

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

Начинаем работать:

1.Открываем группу инструментов «Ошибок CSS нет». В выпадающем списке инструментов включаем инструменты «Посмотреть стиль элемента»

«Посмотреть стиль элемента» - после включения этого инструмента, под панелью инструментов Web Developer появится строка, данные в которой будут изменяться в зависимости от того, как перемещается курсор по странице. Наведите курсор на определённый элемент сайта, и вам будет показана информация об уровне вложенности этого элемента. Если вы щёлкните по элементу, откроется панель инструмента с информацией о стиле элемента.

В первую очередь нам нужно получить информацию о стиле модуля. Для того, чтобы получить эту информацию, последовательно выполните следующие действия:

Наведите курсор на модуль. В верхней строке инструмента появятся нужные данные, в нашем случае - «.column_left div.moduletable»;
Щёлкните по модулю мышью и в открывшемся окне «Информация о стиле» скопируйте эти данные;
Запомните название стилевого файла, в котором прописан стиль данного модуля.

2.Открываем группу инструментов «Ошибок CSS нет». Отключаем инструмент «Посмотреть стиль элемента» и включаем инструмент «Редактор CSS»

«Редактор CSS» - по умолчанию панель этого инструмента появляется внизу экрана. Но вы можете перемещать панель влево, вверх, вправо, вниз, щёлкая по кнопке «Позиция», которая находится возле кнопки «Закрыть» на панели этого инструмента. В верхней части панели инструмента показаны вкладки стилевых файлов и встроенных стилей страницы. Плагин является тестовым инструментом и не редактирует оригинальные файлы с возможность сохранения. Все изменения, внесённые в CSS файлы, запоминаются только браузером и отменяются с закрытием панели.

Теперь нужно найти модуль в стилевом файле и изменить значение background, которое отвечает за фон модуля. Для этого последовательно выполните следующие действия:

Вставьте скопированные данные «.column_left div.moduletable» в строку поиска открывшегося окна «Редактор CSS»;
Выберите вкладку с нужным стилевым файлом и найдите модуль с помощью информации, скопированной в строку поиска;
В найденном файле измените значение background.

В нашем случае значение background #518C8C изменено на значение #518C51. Цвет модуля моментально изменился. Теперь можно поэкспериментировать с цветом, изменяя значение background.

Таким образом, можно изменять стили любых элементов и просматривать полученные результаты в браузере. Но учтите, вы не можете пользоваться сразу несколькими инструментами Web Developer. Прежде чем приступить к работе с новым инструментом не забудьте отключить «старый». Если будут включены одновременно два инструмента, они либо будут работать некорректно, либо не будут работать вовсе.

Firebug – инструмент для веб-разработчика

2012-12-23T07:41:44+00:00

Firebug – инструмент, предназначенный для редактирования, отладки и исследования CSS, HTML и Javascript. Firebug является самым популярным среди инструментов используемых веб-разработчиками.

В предыдущем посте мы рассматривали Web Developer – плагин, служащий для разработки и тестирования сайтов. Возможности, предоставляемые инструментами плагина Web Developer, ни в коей мере не заменяют возможностей инструментов Firebug.
Web Developer и Firebug дополняют друг друга и используются веб-разработчиками для выполнения различных задач, исходя из возможностей каждого инструмента.
Firebug интегрируется с браузером Firefox. Существует облегчённая версия Firebug для других браузеров, но полноценным инструментом Firebug является именно в слиянии с Firefox. Даже если вы предпочитаете другие браузеры, советую установить и использовать Firefox для работы с различными дополнениями, в том числе и с таким мощным инструментом как Firebug.

Возможности Firebug

Один клик мыши и перед вами откроется полный набор мощнейших инструментов Firebug. Firebug предоставляет массу возможностей для веб-разработчика:

возможность найти информация о любом элементе;
редактировать HTML-код и просматривать результаты редактирования в браузере;
копировать различные аспекты элемента в буфер обмена, включая HTML-фрагмент;
инспектировать любой CSS файл;
показывать правила CSS, которые работают в каскаде, стилизуя каждый элемент;
редактировать CSS и просматривать результаты редактирования в браузере;
содержит полный словарь ключевых слов CSS в памяти;
включает в себя мощный javascript отладчик;
имеет командную строку для javascript, предоставляет набор мощных функций логирования;
дает детализированную полезную информацию об ошибках в Javascript, CSS и XML;
позволяет быстро находить нужные DOM-объекты и редактировать их.

Установка Firebug в Firefox

Последнюю версию Firebug для Firefox можно скачать с домашней страницы разработчика. Установить Firebug, как и любое другое дополнение, можно также через встроенные инструменты Firefox. Откройте браузер Firefox, в меню выберите «Инструменты» - «Дополнения».
Введите название дополнения в строку поиска. В открывшемся списке выберите необходимое дополнение и запустите установку.

Доступ к панели инструментов Firebug

Существуют несколько вариантов доступа к инструментам Firebug.
Вы можете работать с Firebug в одном окне, а с Firefox - в другом. Другой вариант – вы можете открыть панель инструментов Firebug в любом, удобном для вас, положении экрана.
Чтобы открыть Firebug в отдельном окне, вам нужно добавить кнопку Firebug на панель инструментов Firefox. Для этого кликните правой кнопкой мыши в панели инструментов браузера Firefox, в появившемся меню выберите «Настроить». Перетащите кнопку Firebug в нужное место на панели инструментов Firefox и нажмите «Готово».

Для открытия панели инструментов Firebug в отдельном окне нажмите на эту кнопку или, для быстрого доступа с клавиатуры, нажмите Ctrl+F12 (или Command+F12 для Mac).
Для открытия Firebug внизу экрана нажмите на кнопку F12.
Для открытия Firebug в любом другом положении экрана (в отдельном окне, внизу, вверху, слева, справа) кликните по флажку на кнопке Firebug, в выпавшем меню выберите «Положение меню Firebug». Поставьте галочку напротив нужной опции.
Для закрытия панели инструментов Firebug нажмите на кнопку F12 или на кнопку Firebug.

Таким образом, мы установили Firebug и получили доступ к панели инструментов Firebug. В следующем посте рассмотрим принципы работы с панелью инструментов Firebug.