Мемуары сайтостроителя

Архив

   Начало. Идея
   Мы начинали с простой идеи. Журнал "ИнфоБизнес", о сайте которого (www.ibusiness.ru) и пойдет речь, к маю прошлого года был еще очень юн. Развивая его печатную версию, мы не очень торопились с созданием сайта, и в плане на 1998 год такая задача не стояла. Однако к началу лета стало ясно, что читатели не просто хотят читать еженедельник в Сети, но скорее требуют этого. Некоторые прямо говорили: если после летних каникул не откроется сайт "ИнфоБизнеса", отношение к изданию может ухудшиться. Нам ничего не оставалось, как сделать сайт - к 1 сентября.

   Итак, первоначальная идея была проста: создать Web-версию журнала, фактически - его электронную копию.

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

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

   Начало. Задачи
   Web-сайт www.ibusiness.ru должен был быть функциональным (то есть простым и прозрачным с точки зрения навигации), компактным (чтобы читатели на медленных каналах, особенно в регионах, могли работать с ним комфортно) и "читабельным" (ведь для чтения он и создавался). Чуть позже к этим требованиям добавилось еще одно: сайт должен быть несложен и удобен в расширении - для частого обновления информации и введения тех или иных дополнительных разделов без лишних хлопот.

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

   Сайт. Набор страничек
   На продумывание структуры сайта, создание шаблонов для разделов и их обсуждение ушел почти месяц. Еще месяц - на то, чтобы наполнить эти шаблоны текстом и хотя бы немного отладить механизм создания еженедельной электронной версии журнала. Наконец, 1 сентября сайт был официально открыт: мы включили счетчик посетителей, разослали письма нашим партнерам и написали об открытии сайта в журнале.

   Но каков Web-мастер, таков и сайт. До этого мой опыт создания Web-содержания не распространялся дальше персональной странички с архивом статей, так что нет ничего удивительного в том, что www.ibusiness.ru в момент открытия был скорее набором страниц, нежели сайтом. Хотя главная задача была выполнена: "ИнфоБизнес" появился в Интернете.

   Сайт. Изучение основ сайтостроительства
   Развитие сайта сдерживалось лишь одним, но очень существенным фактором: отсутствием необходимых знаний у Web-мастера. Пришлось заняться самообразованием.

   Мы использовали связку Linux-Apache - как наиболее развитый и классический вариант Web-платформы. Как известно, работа с Web-сервером на Unix подразумевает близкое знакомство с языком Perl и технологией SSI (Server Side Includes). Их изучением пришлось заняться в первую очередь.

   Perl оказался очень близок к языку C (который я уже знал - спасибо фундаментальному бауманскому образованию по одной из компьютерных специальностей), но более строен и очень эффективен в обработке строк - именно то, что нужно для Web. А SSI, при своей мощности, вообще очень проста в изучении - концепция прозрачна и жизненна.

   Не зря говорят: "счастливы несведущие". Вскоре стало понятно, как примитивно и нерационально сконструирован уже работающий сайт. Впрочем, излишняя спешка была ни к чему - и www.ibusiness.ru прожил в качестве набора страничек до начала октября.

   Сайт. Добавляем Perl и SSI
   SSI - вот клей, связывающий набор страничек в единый сайт. Дело не в перекрестных гиперссылках, как можно подумать, - дело в принципе создания страниц "на лету".

   Отдельная страница - это законченный HTML-код. Она начинается тегом и заканчивается тегом . Чтобы что-то изменить, нужно править именно ее. А если страниц несколько и у них похожее оформление: "шапка" с рекламным баннером, "хвост" с копирайтом и электронным адресом, меню навигации и тому подобное? Можно, конечно, дублировать их в каждой странице (так и был первоначально сделан наш сайт), но ведь при смене "шапки" или копирайта приходится менять их вручную на всех страницах - какая уж тут гибкость!

   Совсем другое дело - SSI-страница. Она начинается с конструкции и заканчивается (или похожими на них). Эти команды вызывают с диска и вставляют в страницу содержимое файлов header.txt и footer.txt, с тем содержанием, которое одинаково для всех страничек. А между этими тегами - только то содержание, которое уникально для данной страницы. То есть и "шапка", и "хвост", и прочие повторяющиеся элементы страниц - все в отдельном файле, присоединяемом к странице "на лету", в тот момент, когда пользователь хочет на эту страницу взглянуть. И чтобы изменить, в случае необходимости, электронный адрес на каждой из страниц, достаточно поправить всего один файл.

   Другое полезное свойство SSI - способность вызывать (тоже "на лету") программы-скрипты, написанные на каком-либо языке, в нашем случае - на Perl. Скрипты придают сайту интерактивность - они крутят цифры счетчиков посетителей, ищут запрошенную информацию в статьях, позволяют общаться в чате, писать в форумы или гостевые книги и многое другое. В Сети можно найти множество бесплатных скриптов на любой вкус. К сожалению, пословица про бесплатный сыр верна и для бесплатных скриптов: приспособить бесплатный скрипт под задачи конкретного сайта зачастую сложнее, чем написать скрипт самому. Поэтому (а также потому, что большинство бесплатных скриптов с точки зрения образованного программиста написано неприлично плохо) все скрипты на сервере www.ibusiness.ru написаны "с нуля".

   Скриптов потребовалось немало. Вот список тех, что уже реализованы:
   1) Счетчик посещений (тотальный/ежедневный) с отдельным скриптом, представляющим статистику в графическом виде.
   2) Скрипт для голосования, тоже с графическим представлением результатов.
   3) Гостевая книга с отдельным административным скриптом.
   4) Форум - это четыре скрипта, включая административный.
   5) Чат - тоже четыре скрипта, включая административный.
   6) Поисковый скрипт.
   7) Скрипты, обеспечивающие работоспособность ежедневной новостной ленты "ИнфоБизнеса", включая скрипт-календарь - типичный пример уникальных для конкретного сайта скриптов.

   Новые задачи, возникающие по мере развития сайта www.ibusiness.ru, очевидно, потребуют новых скриптов.

   Начинается применение Cascading Style Sheets (CSS), третьего столпа сайтостроительства. До недавнего времени CSS на сайте www.ibusiness.ru применялись только для задания вида гиперссылок. Но сейчас основные возможности этой спецификации, касающиеся управления разметкой документов и управления шрифтами, находят на нем все более широкое применение.

   Сайт. Эпохи
   СЛОВО "эпоха", на мой взгляд, весьма удачно подходит для характеристики уровня технологического развития сайта, обозначения его глубинной сущности. Смотрите сами (рис.): сохраняя в большей или меньшей степени оформление, www.ibusiness.ru переживает сейчас уже третью эпоху и стоит на пороге четвертой.















   Первая эпоха - набор страничек с фреймовой структурой, где технология SSI не использовалась (1 сентября сайт насчитывал 127 HTML-страниц). Основной недостаток такой структуры в том, что для изменения однотипной информации о сайте (которая расположена внизу каждой страницы) или полноценного размещения рекламных баннеров (в верхней части каждой страницы) приходится выполнять большой объем работы, по существу дублируя код. Кстати говоря, отказ от дублирования кода позволяет уменьшить размер каждой страницы (хотя пользователю передается прежний объем - "отрезанные" части присоединяются при передаче) и снижает риск возникновения ошибок.

   Переход ко второй эпохе - та же фреймовая структура, но все страницы переделаны для использования SSI - потребовал достаточно много простой и однообразной работы: в каждой из 340 существовавших тогда (на 7 октября) HTML-страничек пришлось отрезать общие части и заменить их на SSI-инструкции.

   Переход к третьей эпохе - отказ от фреймовой структуры - потребовал замены нескольких единых для всего сайта файлов, включаемых в каждую страницу SSI-инструкциями, и модификации одной библиотеки, которая используется всеми скриптами для вывода на экран стандартных частей страницы. При этом ни одна из 630 HTML-страниц вообще не была модифицирована - нужны ли еще какие-нибудь доводы в пользу SSI? Попутно, по многочисленным пожеланиям обладателей больших мониторов (которых насчитывается почти половина), ширина полезного содержимого сайта была ограничена 800 пикселами (о том, зачем и как, - чуть ниже).

   И, наконец, четвертая технологическая эпоха сайта "ИнфоБизнеса", что она подразумевает? Прежде всего, перевод всех страниц на активное использование CSS. Это требует модификации каждой страницы, и работа уже началась. Надеюсь, что после этого уже никогда не потребуется модифицировать каждую из страниц, даже при серьезных изменениях в дизайне сайта. Помимо упрощения структуры страниц, переход к CSS влечет уменьшение объема HTML-кода (благодаря устранению невидимых элементов оформления, таких как таблицы и прозрачные картинки). Поскольку, как отмечено выше, компактность сайта "ИнфоБизнеса" была и остается одним из главных требований, овчинка (как показывает практика, объем кода уменьшился почти в полтора раза) стоит выделки (переделки каждой страницы).

   Кстати сказать, переход от второй эпохи к третьей означал не только перевод сайта в новую бесфреймовую ипостась - сменилась ориентация его заглавной страницы, "лица" сайта. Если раньше основной задачей сайта было предоставить читателям электронную версию журнала "ИнфоБизнес" - и входная страница отвечала этому требованию, то теперь она призвана акцентировать внимание на возможностях самого сайта: ежедневной ленте новостей, форумах и иных интерактивных возможностях, - тем самым представляя Web-сайт в качестве самоценного интерактивного издания, где электронная копия бумажной версии - лишь одна из составляющих.

   Собственно, вот и вся история сайта www.ibusiness.ru - от зарождения идеи до нынешнего дня. Но в заключение мне хочется дать несколько советов-наблюдений, которые наверняка могут быть полезны читателям.

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

   Пока, к сожалению, заказчикам надо прилагать слишком много усилий, чтобы получить достойный Web-сайт. Как показал наш опыт общения с дизайн-студией, руководить созданием должен все-таки сотрудник компании-заказчика (или независимый консультант), хорошо разбирающийся в особенностях Web-технологий. Конечно, надо посмотреть на технологический уровень работ потенциального исполнителя - именно технологический, поскольку дизайн дело наживное. В любом случае, термины "CSS", "SSI" и "Perl" или "ASP" не должны рождать у заказчика ни малейшего непонимания - без них, как мы выяснили выше, сайт не сайт.

   Совет 2. Платформа и инструменты
   Выбор платформы, конечно, не самое важное, но надо иметь в виду, что бесплатных Windows NT Server и Internet Information Server (в отличие от массы бесплатных Unix'ов и бесплатного Apache) не бывает, - будет неприятно узнать, что ваш Web-сервер работает на ворованном программном обеспечении. Зато, выбрав Apache, можно устроить Web-сервер прямо у себя на компьютере и отлаживать сайт, не выходя в Интернет.

   Трюк прост: надо скачать с сайта www.apache.org последнюю версию Apache для Windows (или для той операционной системы, которую вы используете), а с сайта www.perl.com - интерпретатор Perl для той же платформы. Далее установить их (архив Perl достаточно развернуть в каталоге \usr в корне рабочего диска), выложить HTML-страницы в каталог \home \httpd\html, а скрипты в \home\httpd \cgi-bin в корень того же диска (это обычная структура каталогов Web-сервера на платформе Unix) - и ваш собственный сайт с IP-адресом 127.0.0.1 готов к работе и отладке.

   Совет 3. Разрешение экрана


   Если сайт, подобно сайту "ИнфоБизнеса", ценен прежде всего контентом, обязательно продумайте и попробуйте сами, насколько удобно этот контент воспринимать в разных разрешениях экрана - от 640х480 до 1600х1200 пикселов. Идея заключить весь сайт в фиксированную таблицу шириной 600 с небольшим пикселов, конечно, была хороша еще пару лет назад, но сегодня многих читателей это здорово раздражает. Использовать таблицу большей ширины - значит, игнорировать тех, кто до сих пор ограничивается экраном в 640х480 (а таких, как показывает наш опрос, 10 процентов; см. рис.). Не ограничивать ширины вовсе - причинять неудобства владельцам разрешений 1024х768 и выше: строки текста длиннее 800 пикселов читаются с большим трудом.

   Выход, тем не менее, есть, и он реализован на сайте www.ibusiness.ru: если ширина окна браузера меньше 800 пикселов (разрешение до 800х600 или браузер развернут не на весь экран в больших разрешениях), то используется 100 процентов ширины окна. Если же она больше 800 пикселов, то ширина таблицы, в которой выводится содержимое, равна 800 пикселов, а остальное пространство справа не используется. Этот механизм реализуется простым JavaScript-кодом.

function tableWidth() {

var BrowserName = navigator.appName;
var BrowserVer = parseInt(navigator.appVersion);
var WH = 640;

if (BrowserName == "Netscape") {
WH = window.innerWidth;
}
if (BrowserName == "Microsoft Internet Explorer") {
WH = document.body.clientWidth;
}

if (WH < 800) {
document.write ('<TABLE WIDTH=100%>');
}
else {
document.write ('<TABLE WIDTH=800>');
}

}


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

   Кстати, текст этой функции, а также всех остальных скриптов с сайта www.ibusiness.ru можно найти по адресу mpisarev.computerra.ru. Там же есть и другие советы по сайтостроительству.