Инструменты для разработки сайта

  • текстовый редактор (один хороший);
  • браузеры (много);
  • анализатор грамматики русского языка;
  • анализатор кода (валидатор);
  • справочники (по HTML и CSS);
  • графические редакторы (векторный и растровый);
  • оптимизатор графики;
  • ftp-клиент (для копирования сайта на сервер).

 

Текстовый редактор

Рекомендуем использовать бесплатное приложение PSPad. Этот маленький редактор предоставляет богатый инструментарий и удобную возможность работать с древовидными проектами, имитирующими структуру сайта. В списке выбора языка интерфейса есть и русский.

PSPad позволяет:

  • выделять кодовые конструкции (HTML, CSS, JavaScript и др.) цветом;
  • вставлять в текст заготовки языковых конструкций;
  • проверять синтаксис HTML;
  • выводить на экран вертикальную полосу, которая не запрещает записывать длинные строчки, но показывает переходы за установленную границу;
  • преобразовывать названия тегов к верхнему регистру букв;
  • создавать макрокоманды;
  • работать с FTP прямо в редакторе.

У PSPad есть и другие интересные возможности. Загрузить этот бесплатный редактор можно со странички www.pspad.com/ru

 

Браузеры

Список самых популярных браузеров (на момент написания книги) представлен ниже.

 

Анализатор грамматики русского языка 

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

Для такой проверки хорошо подойдёт текстовый процессор Word. Страницу можно скопировать из окна браузера в Word через буфер обмена Windows по следующему алгоритму:

  1. В окне браузера выделить всё (аккорд Ctrl+A).
  2. Запомнить выделенное в буфере обмена (аккорд Ctrl+C).
  3. В окне Word скопировать содержимое буфера (аккорд Ctrl+V).

Платному офисному набору от Microsoft (в который входит Word) есть бесплатная альтернатива: продукт OpenOffice.org.

 

Анализатор кода

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

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

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

Примером такого анализатора кода является продукт CSE HTML Validator Lite (с англоязычным интерфейсом). Бесплатную версию этой программы можно загрузить со странички www.htmlvalidator.com/lite

Этот продукт можно использовать не только в качестве валидатора, но и в качестве редактора кода.

Как пользоваться валидатором CSE HTML Validator Lite

  1. Запускаем программу
  2. File/Open/нужный html-файл (ы)
  3. Tools/Validate (или F6)

Внизу, в подокне программы, появляется список ошибок. Щёлкаем на ошибке, она отмечается в тексте. Исправляем ошибку, записываем исправленный файл и снова:

Tools/Validate (или F6)

Валидация от W3C. On-line бесплатный валидатор с сайта организации W3C (организация, которая разрабатывает стандарты Web): http://validator.w3.org

Валидатор работает в одном из трёх режимов:

  1. Validate by URI
    Проверка страницы в Интернете по заданному адресу
  2. Validate by File Upload
    Проверка html-файла с диска вашего компьютера
  3. Validate by Direct Input
    Проверка кода, который можно набрать или перенести через буфер обмена.

 

Справочники

Для уточнения формата языковых конструкций (теги, атрибуты тегов и их значения, стилевые свойства и их значения) разработчику полезно иметь под рукой описания стандартов W3C (англ. World Wide Web Consortium — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины).

Стандарты W3C
Спецификация HTML 4.0 от 18 декабря 1997 года
Спецификация HTML 4.01 от 24 декабря 1999 года
Спецификация CSS2 от 12 мая 1998 г

 

Графические редакторы

Для подготовки иллюстраций для Web необходимо иметь:

  • растровый редактор;
  • векторный редактор.

Растровый редактор

Полезен для обработки фотографий, в том числе и для сайта. Про Photoshop говорить не приходится — признанный лидер. Бездонная по возможностям программа. В неё встроен и оптимизатор графики.

Что касается альтернативных бесплатных вариантов, то можно предложить два неплохих продукта.

Растровый редактор GIMP: www.gimp.org. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p2159.shtml. Есть поддержка русского языка.

Растровый редактор Pixia: park18.wakwak.com/~pixia. С сайта автора можно скачать плагины для подключения Photoshop filters и дополнительные фильтры. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p839.shtml. В комментариях упоминается русский хэлп и русификатор.

Векторный редактор

Векторный редактор очень удобен для подготовки графики в силу следующих его свойств:

  • преобразования рисунка выполняются без искажений;
  • получаются маленькие графические файлы;
  • рисовать быстро и просто;
  • независимое редактирование частей рисунка;
  • высокая точность прорисовки (до 1 000 000 точек на дюйм);
  • векторный рисунок легко преобразовать в растровые форматы.

Очень хороший векторный редактор — Xara X. Адрес сайта производителя: www.xara.com/products/xtreme.

В качестве бесплатного варианта можно назвать продукт Inkscape. Адрес сайта производителя: www.inkscape.org. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p4432.shtml.

 

Оптимизатор графики

Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается.

Вот почему уменьшение объёма графических файлов (без видимого ухудшения качества изображения) имеет большое значение в сайтостроении — графические файлы создают основную часть трафика, передаваемого с Web-сервера на браузер клиента, для показа гипертекстовой страницы.

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

Для оптимизации графики, предназначенной для Web, можно рекомендовать бесплатный продукт WebGraphics Optimizer Professional: www.webopt.com/download.