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

“Чемоданчик” сайтостроителя содержит такой минимальный набор инструментов:

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

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

Написать гипертекстовую страницу можно в любом текстовом редакторе. Подойдёт и Блокнот Windows. Только не надо включать в нём опцию Перенос по словам в меню Формат. Если опцию включить, на экране будут демонстрироваться короткие строки, а в файл — записываться длинные. Это нарушит форматирование кода (структурную лесенку).

Однако Блокнот — не лучший вариант в качестве редактора гипертекстового кода.

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

PSPad позволяет:

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

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

Гипертекстовые коды можно записывать и с помощью других текстовых ASCII-редакторов (редакторов plain-текста) — тех, к которым вы привыкли. Но не надо использовать для этого текстовые процессоры, подобные Word.

Браузеры

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

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

• Microsoft Internet Explorer (входит в состав ОС Windows)
• Firefox (бесплатный) www.mozilla.ru/products/firefox
• Opera (бесплатный) www.opera.com
• Netscape (бесплатный) browser.netscape.com

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

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

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

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

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

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

В его состав входят следующие компоненты:

• Writer (текстовый процессор с проверкой грамматики);
• Calc (электронные таблицы);
• Draw (графический редактор);
• Impress (система презентаций);
• Base (база данных);
• редактор формул.

По своим возможностям OpenOffice.org сопоставим с MS Office.

Можно загружать документы MS-Office (Word, Excel, Powerpoint), редактировать их и сохранять как в оригинальном формате, так и в формате OpenOffice.org. Основное ограничение состоит в том, что OpenOffice.org не исполняет макросы в этих документах. Но они сохраняются и их можно использовать при работе с MS Office.

Описание продукта можно найти по адресу ru.openoffice.org/about-product.html

Русскую сборку продукта можно загрузить (около 90 Мбайт) со страницы ru.openoffice.org/about-downloads.html

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

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

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

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

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

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

Справочники

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

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

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

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

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

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

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

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

Растровый редактор 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 (и новый вариант Xara Xtreme). Адрес сайта производителя: 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.

Ftp-клиент

Сайты разрабатываются на локальном компьютере, а потом передаются на Web-сервер (чтобы их можно было смотреть в Интернете).

Передачу файлов на сервер эффективнее выполнять по протоколу FTP. Для этого нужно обзавестись хорошим ftp-клиентом.

Хороший ftp-клиент встроен в оболочку Far (бесплатный продукт): farmanager.com.

Пользователям, привыкшим к графическому интерфейсу Windows, можно рекомендовать бесплатный продукт SmartFtp: www.smartftp.com. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p1527.shtml.

Кроме того, ftp-клиент входит в состав текстового редактора PSPad.