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

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

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

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

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

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

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

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

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

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

В этой статье я хочу познакомить вас с очень полезным инструментом для вебмастера -- дополнением для браузера 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. Можно использовать и альтернативные варианты доступа к инструментам плагина:

1. Кликните правой мышью в окне браузера Firefox и в открывшемся меню выберите Web Developer, откроется панель вкладок с инструментами;
2. Выберите в меню браузера 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.

Плагин 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 – инструмент, предназначенный для редактирования, отладки и исследования 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 и нажмите «Готово».

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

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

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

Схематически сложно представить все возможности Firebug, однако, программа настолько интуитивно понятна, что ознакомившись с основами работы в Firebug, вы сами разберётесь в особенностях работы со всеми инструментами. Кстати, хотелось бы заметить, тем, кто не очень силён в HTML и CSS, работа с Firebug поможет легче и гораздо быстрее их освоить. Для того, чтобы вам проще было разобраться с программой, мною подготовлен небольшой видеоролик о работе с Firebug. Видео, конечно, хорошо, но прежде, обязательно прочитайте этот материал. И так, сейчас, кратко о самом главном.

Включение/выключение Firebug

1 - Для включения Firebug нажмите F12 на клавиатуре или кликните по значку Firebug - серому жучку в правом верхнем углу браузера. Жучок станет оранжевым и внизу экрана откроется окно с набором инструментов Firebug.

2 - Для выключения Firebug выполните те же действия – F12 или клик по жучку, жучок станет серым.

Окно инструментов Firebug

3 - Панель вкладок. В окне инструментов Firebug расположены семь вкладок: КОНСОЛЬ , HTML, CSS, СЦЕНАРИЙ, DOM, СЕТЬ, COOKIES. При наведении курсора на вкладки появляются всплывающие подсказки, поэтому, даже новичку будет не сложно разобраться в том, для каких целей используется та или иная вкладка. В каждой вкладке есть меню, которое можно открыть, кликнув по флажку рядом с вкладкой. С помощью кнопки на панели инструментов ненужные вкладки можно отключить.

4 - Кнопка со стрелкой – с помощью её вы сможете анализировать любой элемент веб-страницы. Для анализа щёлкните по кнопке. Затем наведите курсор на любой из элементов страницы. Элемент будет заключён в рамку, щёлкните по элементу. Рамка зафиксируется и в окне инструментов Firebug откроется вкладка HTML, где синим цветом будет выделен данный элемент. В правой половине окна вы увидите стиль этого элемента.

Теперь вы можете редактировать  HTML в левой части окна и изменять стиль элемента (цвет, размер и др.) в правой части окна, просматривая изменения в браузере. Для того чтобы сбросить все изменения, обновите страницу.

5 - Кнопка «Командная строка» - позволит вам ввести любые JavaScript. Работает функция автозаполнения – всплывающее окно показывает список всех доступных свойств,  введенного выражения. Для вызова помощи введите в командную строку help и нажмите Enter.

6 - Кнопка «Выбор панели» - позволит отключать и подключать вкладки.

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

Данная статья посвящена одной из популярнейших программ - редактору Notepad++.  В Windows уже существует простой текстовой редактор для создания и редактирования простых текстовых файлов. Однако, если вы работаете с Html и PHP, вам просто необходим такой мощный инструмент, как Notepad++.

Преимуществ у Notepad++, по сравнению с другими подобными программами, масса. Notepad++ - бесплатный, несложный в освоении, лёгкий, быстрый, имеет портативную версию (можно работать с флешки), поддерживает многие языки, в том числе русский.

Скачать редактор Notepad ++ можно с сайта разработчика: notepad-plus-plus.org

Портативную версию можно скачать с сайта: portableapps.com/apps/development/notepadpp_portable

Возможности Notepad++

• Подсветка синтаксиса большого числа языков программирования. Для выбора языка программирования в верхнем меню выберите «Синтаксис». Языки программирования расположены в алфавитном порядке.
• Подсветка синтаксиса в Notepad++. Позволяет проверить закрыты ли все теги. Если курсор мыши поместить между какими-либо скобками { } [ ] ( ), скобки подсветятся, выделяя начало и конец блока Html или PHP кода. Ошибка будет выделяться определённым цветом. Изменить настройку подсветки синтаксиса можно с помощью пункта верхнего меню «Опции» - «Определение стилей».
• Отмена предыдущего действия. Вы всегда можете отменить предыдущее действие, вернувшись на шаг назад, причём количество шагов назад не ограничено. Отменить действие можно с помощью кнопки «Отмена» на панели инструментов под верхним меню.
• Преобразование в разные кодировки. В Joomla, смена кодировки на UTF-8 (без BOM) пригодится, если вы захотите русифицировать какое-либо из понравившихся расширений (компонент, модуль, плагин).
• Вкладки. Возможность работать в одном окне с множеством документов. Очень удобная функция, идентична работе с браузером. Работа в одном окне, с открытием документов в новых вкладках. Управлять вкладками можно с помощью пункта меню «Окна» (Окна...).
• Возможность просматривать результаты работы c HTML файлами в браузерах. Такая возможность осуществляется с помощью пункта меню «Запуск».
• Поиск / замена. Очень удобная функция, позволяющая осуществлять поиск или поиск с заменой не только в одном документе, но и во всех  файлах папки. 
• Авто-завершение слов, функций и параметров функций. Всплывающие подсказки. Эти опции можно включить в настройках редактора:  «Опции» - «Настройки» - «Автозавершение».
• Расширение возможностей Notepad++ с помощью плагинов. В Notepad++ несколько плагинов по умолчанию устанавливаются с программой, остальные вы можете устанавливать самостоятельно с помощью меню «Плагины» — «Plagin Manager» — «Show Plagin Manager». Для установки поставьте галочку напротив нужного плагина и нажмите на кнопку «Install».
• WYSIWYG (печать). С помощью пункта меню «Опции» - «Настройки» - «Печать» вы можете выбрать нужные варианты для распечатки документа (подсветки кода цветом, отображение номера строк и т.д.)
• Увеличение и уменьшение масштаба.
• Запись макроса.

И это не полный перечень возможностей Notepad++. В следующем посте рассмотрим некоторые плагины Notepad++, в том числе установку плагина для проверки орфографии русскоязычного текста.

Плагины значительно расширяют возможности редактора Notepad++. По умолчанию в Notepad++ уже установлено несколько плагинов. Вы можете управлять плагинами - устанавливать, обновлять и удалять ненужные плагины с помощью менеджера плагинов. Для того, чтобы войти в менеджер плагинов выберите в меню «Плагины» - «Plugin Manager» - «Show Plugin Manager». В менеджере плагинов Notepad++ вы увидите достаточно большое количество плагинов. Пройдемся по некоторым из них.

Плагин DSpellCheck

Плагин DSpellCheck – служит для проверка орфорграфии. Это плагин уже установлен в Notepad++, но по умолчанию включена проверка грамматики только английского языка.  Для того, чтобы получить возможность проверять тексты на русском языке, нужно, чтобы на вашем компьютере был установлен Aspell – программа для проверки орфографии.

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

Сначала скачайте и установите на компьютер установщик Full installer.

Затем скачайте и установите программу Aspell. По умолчанию программа будет установлена в C :\Program Files (x86)\Aspell\.

После установки необходимых программ откройте Notepad++. Выберите в меню «Плагины» - «DSpellCheck» - Settings...

Здесь нужно изменить настройки таким образом, как указано на картинке ниже, т.е. выбрать библиотеку Aspell, указать путь к ней C:\Program Files (x86)\Aspell\bin\aspell-15.dll, выбрать язык «ru» и нажать «Применить»

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

Для отключения проверки орфографии откройте в меню «Плагины» - «DSpellCheck» и снимите галочку напротив опции – Auto-check Document.

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

Плагины Notepad++

Плагин Customize Toolbar – дает возможность управлять кнопками панели инструментов Notepad++ (перетаскивать, удалять или добавлять новые кнопки).

Плагин WebEdit – предоставляет возможность заключать текст в наиболее востребованные теги (h1, h2, li, ol, a и другие). Выделите фрагмент текста, кликните мышью  по нужной кнопке на панели инструментов Notepad++ и выделенный фрагмент текста будет заключён в необходимые теги.

Плагин ImgTags — позволяет вставлять теги IMG со всеми атрибутами в HTML документ, используя диалоговое окно.

Плагин NppFTP – даёт возможность редактировать Html или PHP файлов вашего сайта, подключившись к сайту по FTP.

Плагин TextFX – включает в себя множество функций для преобразования выделенного текста (автозакрытие тегов, подсчет символов и множество других полезных возможностей).

Плагин Compare – позволяет сравнить два файла. Откройте два файла, которые вы хотите сравнить и выберите в меню Плагины → Compare → Compare. Или нажмите комбинацию клавиш Alt+D.

Это лишь краткий обзор некоторых плагинов. Предназначение каждого из плагинов, которым можно расширить возможности Notepad++ можно узнать, если в менеджере плагинов кликнуть по какому-либо из плагинов. Внизу появится краткое описание возможностей плагина и адрес домашней страницы его разработчика. Конечно, всё на английском, но, как говорится, google нам в помощь.