Делаем сайт

Пора браться за дело. В самом деле, доколе можно. Уж больше трёх лет как мы с Сашей Качановым сделали этот самый Гомелюг, а что-то так и стоит недоделанное. Пора также продолжить наш с Сашей спор о некоторых технических тонкостях web-технологий.

Тот дизайн страниц, который вы видите в своём браузере, сделан вполне хорошо, его переделывать нет никакой необходимости. В последние месяцы прошлого века, когда Саша Качанов по моей просьбе сделал макет нашего сайта, я вряд ли мог оценить, как просто и интересно можно сверстать html-страничку, оживить её таким же изящным javasript'ом. С этими технологиями я в ту пору знаком не был, так что при сочинении статей приходилось слепо копировать обрамление текста и упорно продираться через малопонятные html-тэги.

Согласитесь, что редактировать текст, сочинять его в разметке html, удовольствие ниже среднего. Вряд ли ситуацию исправят самые лучшие html-редакторы, если дело касается обычного текста с некоторым минимумом стилевого оформления. К тому же у тех, кто сочиняет, скорее всего уже есть привычный удобный редактор текста. Для писателя хотелось бы иметь нечто не сложнее разметки LaTeX, когда технические детали прячутся в заголовок документа, автор осваивает только нужные ему стили, чтению текста не мешают метки параграфов.

Были проблемы с сопровождением сайта. Приходилось многое делать вручную - перегонять из одной кодировки в другую, отслеживать обновления страниц. Что-то изменить в оформлении было так сложно, что это желание приходилось прятать подальше. Так наш сайт и жил, обростая статьями и становясь всё менее управляемым. Настоятельно требовалось вмешательство программиста, квалифицированного посредника между web-дизайнером и писателем, автором текстов. То, что наш web-мастер, Саша Качанов, к тому времени был очень далеко, а писатель и программист были одним и тем же человеком, сути не меняет. Web-среда представляет собой такое хаотичное нагромождение разных технологий, что для грамотного сайта нужна квалификация даже не трёх, а гораздо большего количества специалистов.

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

1. язык разметки HTML, стилевые таблицы CSS
2. программирование на стороне клиента - JavaScript, Java
3. протокол HTTP, конфигурация сервера Apache, анализ логов
4. программирование на стороне сервера - SSI, CGI, PHP, Perl
5. работа с реляционной СУБД, язык SQL

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

Вернёмся, однако, к нашему Гомелюгу. Что мне хотелось переделать с самого начала - это уменьшить количество картинок на странице и добавить ещё одну, с usemap, в низ каждой страницы, т.н. подножие, footer. Уменьшить количество картинок в данном случае можно было совершенно не трогая дизайн страницы. По чьему-то неграмотному совету Саша разбил одну большую картинку с пингвинами на 7 меньших. Якобы это должно было ускорить загрузку страницы. К сожалению, автор подобного совета имеет очень слабое представление о работе протокола HTTP. Для загрузки каждого объекта на странице - самого html-документа, каждой картинки, файла стиля, скрипта - создаётся новое соединение с довольно большими накладными расходами. Для того, чтобы передать в браузер крошечную однопиксельную картинку, нужно, как минимум, клиенту и серверу обменяться почти десятком IP-пакетов, итого немногим менее одного килобайта. Создаётся ненужная нагрузка на сервер, логи забиваются бесполезной информацией. Грамотный сисадмин, правда, может настроить Apache не записывать в журнал передачу некоторых типов файлов.

Итак, переделку сайта мы начинаем с тщательного его анализа - как устроена страница, какие части общие для всех документов, как сохранить рубрики и каталоги. Для многих сайтов, и нашего в том числе, уже простейшая серверная технология - SSI (Server Side Include), с её десятком элементарных команд, позволяет разбить страницы на составные части и задать динамическую, при обращении, сборку готовой страницы.

Пойдём сразу немного дальше. Почему бы для нашего статичного сайта не сделать сборку из отдельных кусков страницы здесь, на месте, например, скриптом и утилитой make. Можно также научить скрипт преобразовывать некоторые строки из обычного текста в html-заголовки. Документ RFC0822, определяющий стандарт для почтовых сообщений, даёт пример организации текстового документа наподобие полей в базе данных. Таким же образом мы укажем в документе поле:

Title: Остров пингвинов. Делаем сайт

а в скрипте сделаем преобразование этого поля в html-вид:

awk '/^Title: /{print "<title>"substr($0,8)"</title>"}'

Т.е. я хочу организовать содержимое сайта в виде текстовых документов с некоторыми элементами базы данных. Эту же задачу пытаются решить многие проекты, используя технологию XML и многочисленные наборы скриптов. Похоже, развитие технологии XML испытывает серьёзный кризис. Об этом говорит чрезмерное многообразие инструментов и языков, их возрастающая сложность. Одна из попыток совместить в одном документе легко читаемый текст и также легко извлекаемые поля для БД реализована в проекте yaml.org. Кстати, этот проект использует формат, напоминающий всё тот же RFC0822.

Продолжаем упрощать жизнь авторов текстов. Подобно приведенному, можно завести поля для всех тэгов из заголовка html-документа. Точно также, в новый, RFC0822-совместимый заголовок документа можно вставить имя стилевого файла, javascript-файла, header'а, footer'а. Очень часто в дизайне страницы используется таблица, разбивающая страницу на области заголовка, меню, собственно текста. Её также можно поместить в отдельный файл и включать в готовую страницу скриптом.

Включая стилевую CSS-таблицу и текст javascript'а непосредственно в документ html, мы решаем сразу две проблемы. Во-первых, немного повышается эффективность пересылки страницы клиенту. Помните, протокол HTTP открывает новое соединение для каждого объекта, а здесь есть возможность включить текст стиля и скрипта непосредственно в файл. А во-вторых, нашу страницу будет легче копировать на компьютер клиента, если, конечно, вы хотите облегчить эту процедуру.

Полезно включить в наш скрипт приятную мелочь из языка TeX - отделять параграфы друг от друга пустой строкой. Замена пустой строки на тэг <p> - пустяк для скрипта, а редактировать текст станет гораздо приятнее. Пора, наверное, взглянуть на этот скрипт повнимательнее, вот он весь : text2html.

Имея скрипт для компиляции обычного, удобного для редактирования текста, с элементами БД, в результирующий html-код, перейдём к следующему шагу - создадим Makefile для автоматизации сопровождения сайта. Обычно утилита make используется для сборки программ из исходного кода. На самом деле эта утилита хорошо подходит для решения сразу двух задач. Первая задача - отслеживание зависимостей одних файлов от других, например, при изменении документа пересобрать соответствующую страницу. Вторая задача, легко реализуемая через make - собрать в один файл много мелких скриптов, удобно их организовать. Как правило, загрузка сайта на сервер, удаление временных файлов, и прочее, делается несколькими рутинными командами. В Makefile'е эта группа команд называется целью, она указывается при вызове make.

Утилита make хорошо документирована, многократно растолкована в примерах. Можете посмотреть на мой Makefile. Но возможно, будет интереснее увидеть весь сайт с набором скриптов. Скрипты и программки распространяются по лицензии GPL(русский перевод), а весь сайт прошу использовать всех желающих соблюдая лицензию FDPL.

Но прежде чем изучать исходный текст сайта и скрипты, поговорим ещё на одну тему - а нельзя ли усовершенствовать язык html, дать автору ещё более простые конструкции для разметки документа. По этому поводу откроем ещё один документ - "Совершенствуем сайт".